chore: expand twind groups

_showcase/components/ComponentLink.tsx

@@ -5,7 +5,7 @@ export function ComponentLink({ children: name }: { children: string }) {
     <li>
       <a
         href={`#${headerify(name)}`}
-        class="text-blue(800 dark:300) hover:underline"
+        class="text-blue-800 dark:text-blue-300 hover:underline"
       >
         {name}
       </a>

_showcase/components/ComponentTitle.tsx

@@ -11,7 +11,7 @@ export function ComponentTitle(
     >
       <a
         href={href}
-        class="text-blue(800 dark:300) hover:underline"
+        class="text-blue-800 dark:text-blue-300 hover:underline"
         target="_blank"
       >
         {name}

_showcase/components/Showcase.tsx

@@ -14,7 +14,7 @@ import { ComponentTitle } from "./ComponentTitle.tsx";
 
 const app = css({
   ":global": {
-    "html": apply`bg(white dark:gray-900)`,
+    "html": apply`bg-white dark:bg-gray-900`,
   },
 });
 
@@ -28,7 +28,7 @@ export function Showcase(
 ) {
   return (
     <div
-      class={tw`bg-white dark:(bg-gray-900 text-white) ${app} max-w-screen-xl mx-auto my-4 p-4`}
+      class={tw`bg-white dark:bg-gray-900 dark:text-white ${app} max-w-screen-xl mx-auto my-4 p-4`}
     >
       <h1 class="text-3xl py-3">Deno Doc Components</h1>
       <h2 class="text-2xl py-2 border-b-1">Component Showcase</h2>
@@ -46,7 +46,7 @@ export function Showcase(
           <li>
             <a
               href="/docblocks"
-              class="text-blue(800 dark:300) hover:underline"
+              class="text-blue-800 dark:text-blue-300 hover:underline"
             >
               DocBlocks
             </a>

_showcase/components/ShowcaseDocBlocks.tsx

@@ -21,7 +21,7 @@ import { ComponentTitle } from "./ComponentTitle.tsx";
 
 const app = css({
   ":global": {
-    "html": apply`bg(white dark:gray-900)`,
+    "html": apply`bg-white dark:bg-gray-900`,
   },
 });
 
@@ -46,7 +46,7 @@ export function ShowcaseDocBlocks(
   ) as DocNodeNamespace;
   return (
     <div
-      class={tw`bg-white dark:(bg-gray-900 text-white) ${app} max-w-screen-xl mx-auto my-4 p-4`}
+      class={tw`bg-white dark:bg-gray-900 dark:text-white ${app} max-w-screen-xl mx-auto my-4 p-4`}
     >
       <h1 class="text-3xl py-3">Deno Doc Components</h1>
       <h2 class="text-2xl py-2 border-b-1">DocBlock Component Showcase</h2>

_showcase/components/ShowcaseModuleDoc.tsx

@@ -9,7 +9,7 @@ import { ComponentTitle } from "./ComponentTitle.tsx";
 
 const app = css({
   ":global": {
-    "html": apply`bg(white dark:gray-900)`,
+    "html": apply`bg-white dark:bg-gray-900`,
   },
 });
 
@@ -27,7 +27,7 @@ export function ShowcaseModuleDoc({ url }: { url: URL }) {
   }];
   return (
     <div
-      class={tw`bg-white dark:(bg-gray-900 text-white) ${app} max-w-screen-xl mx-auto my-4 p-4`}
+      class={tw`bg-white dark:bg-gray-900 dark:text-white ${app} max-w-screen-xl mx-auto my-4 p-4`}
     >
       <h1 class="text-3xl py-3">Deno Doc Components</h1>
       <h2 class="text-2xl py-2 border-b-1">DocBlock Component Showcase</h2>

styles.ts

@@ -12,17 +12,17 @@ export const comrakStyles = css({
   a: apply`link`,
   h1: apply`text-xl md:text-2xl lg:text-3xl`,
   h2: apply`text-lg md:text-xl lg:text-2xl`,
-  h3: apply`font-bold md:(text-lg font-normal) lg:(text-xl font-normal)`,
-  h4: apply`font-semibold md:font-bold lg:(text-lg font-normal)`,
+  h3: apply`font-bold md:text-lg md:font-normal lg:text-xl lg:font-normal`,
+  h4: apply`font-semibold md:font-bold lg:text-lg lg:font-normal`,
   h5: apply`font-italic md:font-semibold lg:font-bold`,
   h6: apply`md:font-italic lg:font-semibold`,
   hr: apply`m-2 border-gray-500`,
   ol: apply`list-decimal lg:list-inside`,
   p: apply`my-1 text-left`,
   table: apply`table-auto`,
-  td: apply`p-2 border border(solid gray-500)`,
+  td: apply`p-2 border border-solid border-gray-500`,
   th: apply`font-bold text-center`,
-  ul: apply`lg:(list-disc list-inside)`,
+  ul: apply`lg:list-disc lg:list-inside`,
 
   // syntax highlighting
   ".code-comment": apply`text-gray-500`,
@@ -50,7 +50,7 @@ const styles = {
   docEntryChildren: apply`break-words flex items-center gap-2`,
   docItem: apply`group relative`,
   indent: apply`ml-4`,
-  main: apply`space-y-7 md:(col-span-3)`,
+  main: apply`space-y-7 md:col-span-3`,
   markdown: apply`flex flex-col space-y-4 text-justify`,
   markdownSummary: apply`inline text-gray-600 ${
     css({
@@ -69,28 +69,28 @@ const styles = {
     apply`block lg:table-cell pl-5 pr-3 py-2.5 font-semibold`,
   moduleIndexLinkCellIcon: apply`inline my-1.5 mr-3`,
   moduleIndexDocCell:
-    apply`block lg:(table-cell pl-0 pt-2.5 mt-0) pl-11 pr-[1.375rem] pb-2.5 -mt-2 text-gray-500`,
+    apply`block lg:table-cell lg:pl-0 lg:pt-2.5 lg:mt-0 pl-11 pr-[1.375rem] pb-2.5 -mt-2 text-gray-500`,
   moduleIndexPanel: apply`lg:w-72 flex-shrink-0`,
   moduleIndexPanelActive: apply`bg-gray-100 font-bold`,
   moduleIndexPanelEntry:
-    apply`flex items-center gap-2 py-2 px-3 rounded-lg w-full leading-6 hover:(text-gray-500  bg-gray-50) children:last-child:(truncate flex-shrink-1)`,
+    apply`flex items-center gap-2 py-2 px-3 rounded-lg w-full leading-6 hover:text-gray-500 hover:bg-gray-50 children:last-child:truncate children:last-child:flex-shrink-1`,
   moduleIndexPanelModuleIndex: apply`text-gray-500 font-light`,
   moduleIndexPanelSymbol:
-    apply`flex items-center justify-between gap-1 py-1.5 pl-2.5 pr-3 rounded-lg w-full leading-6 hover:(text-gray-500 bg-gray-50) children:first-child:(flex items-center gap-2 min-w-0 children:last-child:truncate)`,
+    apply`flex items-center justify-between gap-1 py-1.5 pl-2.5 pr-3 rounded-lg w-full leading-6 hover:text-gray-500 hover:bg-gray-50 children:first-child:flex children:first-child:items-center children:first-child:gap-2 children:first-child:min-w-0 children:first-child:children:last-child:truncate`,
   section: apply`text-sm leading-6 font-semibold text-gray-400 py-1`,
-  symbolDoc: apply`space-y-12 md:(col-span-3)`,
+  symbolDoc: apply`space-y-12 md:col-span-3`,
   symbolDocHeader: apply`flex justify-between items-start`,
   symbolKind:
     apply`rounded-full w-6 h-6 inline-flex items-center justify-center font-medium text-xs leading-none flex-shrink-0 select-none`,
   sourceLink:
     apply`pl-2 break-words text-gray-600 hover:text-gray-800 hover:underline`,
   symbolListCellSymbol:
-    apply`block lg:table-cell py-1 pr-3 font-bold children:(space-x-2 min-w-[13rem] flex items-center)`,
+    apply`block lg:table-cell py-1 pr-3 font-bold children:space-x-2 children:min-w-[13rem] children:flex children:items-center`,
   symbolListCellDoc: apply`block lg:table-cell py-1 text-sm text-gray-500`,
   symbolListRow: apply`block lg:table-row`,
   symbolListTable: apply`block lg:table`,
   symbolKindDisplay:
-    apply`w-11 flex-none flex children:(not-first-child:-ml-[7px])`,
+    apply`w-11 flex-none flex children:not-first-child:-ml-[7px]`,
   tag:
     apply`inline-flex items-center gap-0.5 children:flex-none rounded-full font-medium text-sm leading-none`,
 } as const;