test

.ladle/components.tsx

@@ -87,7 +87,7 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
 
   return (
     <Provider store={store}>
-      <StoryHeader>
+      <div tw="flex flex-row items-center gap-[8px] ">
         <h4>Active Theme:</h4>
         <SelectMenu value={theme} onValueChange={setTheme}>
           {[
@@ -126,20 +126,12 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
             <SelectItem key={value} value={value} label={label} />
           ))}
         </SelectMenu>
-      </StoryHeader>
+      </div>
       <hr />
       {content}
     </Provider>
   );
 };
-
-const StoryHeader = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-`;
-
 const StoryContent = styled.div`
   --default-border-width: 1px;
   --border-width: var(--default-border-width);

package.json

@@ -220,5 +220,11 @@
       "preset": "styled-components",
       "includeClassNames": true
     }
+  },
+  "optionalDependencies": {
+    "css-to-tailwindcss": "^1.0.5",
+    "postcss-safe-parser": "^7.0.0",
+    "postcss-styled": "^0.34.0",
+    "postcss-styled-syntax": "^0.6.4"
   }
 }

src/App.tsx

@@ -131,7 +131,7 @@ const Content = () => {
 
         {isTablet ? <FooterMobile /> : <FooterDesktop />}
 
-        <$NotificationsToastArea />
+        <NotificationsToastArea tw="z-[2] [grid-area:Main]" />
 
         <$DialogArea ref={dialogAreaRef}>
           <DialogManager />
@@ -243,12 +243,6 @@ const $Main = styled.main`
 
   position: relative;
 `;
-
-const $NotificationsToastArea = styled(NotificationsToastArea)`
-  grid-area: Main;
-  z-index: 2;
-`;
-
 const $DialogArea = styled.aside`
   position: fixed;
   height: 100%;

src/components/AssetIcon.tsx

@@ -678,17 +678,15 @@ export const AssetIcon = ({
   className?: string;
 }) =>
   isAssetSymbol(symbol) ? (
-    <$Img src={assetIcons[symbol]} className={className} alt={symbol} />
+    <img
+      src={assetIcons[symbol]}
+      className={className}
+      alt={symbol}
+      tw="h-[1em] w-auto rounded-[50%]"
+    />
   ) : (
     <Placeholder className={className} symbol={symbol ?? ''} />
   );
-
-const $Img = styled.img`
-  width: auto;
-  height: 1em;
-  border-radius: 50%;
-`;
-
 const $Placeholder = styled.div`
   background-color: var(--color-layer-5);
   width: 1em;

src/components/Checkbox.tsx

@@ -34,9 +34,9 @@ export const Checkbox: React.FC<CheckboxProps> = ({
       onCheckedChange={onCheckedChange}
       id={id}
     >
-      <$Indicator>
+      <Indicator tw="flex items-center justify-center text-text-button">
         <CheckIcon />
-      </$Indicator>
+      </Indicator>
     </$Root>
     {label && (
       <$Label disabled={disabled} htmlFor={id}>
@@ -71,15 +71,6 @@ const $Root = styled(Root)`
     --checkbox-backgroundColor: var(--color-layer-1);
   }
 `;
-
-const $Indicator = styled(Indicator)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  color: var(--color-text-button);
-`;
-
 const $Label = styled.label<{ disabled?: boolean }>`
   cursor: pointer;
   color: var(--color-text-2);

src/components/Collapsible.tsx

@@ -45,13 +45,13 @@ export const Collapsible = ({
   withTrigger = true,
 }: CollapsibleProps) => {
   const trigger = slotTrigger ? (
-    <$TriggerSlot>
+    <div tw="flex items-center gap-[0.5em]">
       {triggerIconSide === 'right' && label}
       <Trigger className={className} disabled={disabled} asChild>
         {slotTrigger}
       </Trigger>
       {triggerIconSide === 'left' && label}
-    </$TriggerSlot>
+    </div>
   ) : (
     <$Trigger className={className} disabled={disabled}>
       {triggerIconSide === 'right' && (
@@ -93,13 +93,6 @@ const $Trigger = styled(Trigger)`
   --trigger-icon-width: 0.75em;
   --trigger-icon-color: inherit;
 `;
-
-const $TriggerSlot = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-`;
-
 const $TriggerIcon = styled.span`
   width: var(--trigger-icon-width);
 

src/components/CollapsibleNavigationMenu.tsx

@@ -59,7 +59,7 @@ export const CollapsibleNavigationMenu = <MenuItemValue extends string>({
 
   return (
     <Root orientation="vertical">
-      <$List>
+      <List tw="gap-0.5">
         {items.map((item) =>
           !item.subitems ? (
             <$NavItem key={item.value} onSelect={onSelectItem} {...item} />
@@ -81,7 +81,7 @@ export const CollapsibleNavigationMenu = <MenuItemValue extends string>({
             </Collapsible>
           )
         )}
-      </$List>
+      </List>
     </Root>
   );
 };
@@ -92,11 +92,6 @@ const navItemStyle = css`
   --item-checked-backgroundColor: var(--color-layer-1);
   --item-checked-textColor: var(--color-text-0);
 `;
-
-const $List = styled(List)`
-  gap: 0.5rem;
-`;
-
 const $CollapsibleItem = styled(Item)`
   ${navItemStyle}
   --item-padding: 0;

src/components/ComboboxMenu.tsx

@@ -170,7 +170,9 @@ export const ComboboxMenu = <
             ))}
           </$Group>
         ))}
-        {slotEmpty && searchValue.trim() !== '' && <$Empty>{slotEmpty}</$Empty>}
+        {slotEmpty && searchValue.trim() !== '' && (
+          <Command.Empty tw="h-full p-1 text-text-0">{slotEmpty}</Command.Empty>
+        )}
       </$List>
     </$Command>
   );
@@ -339,9 +341,3 @@ const $ItemLabel = styled.div`
 
   min-width: 0;
 `;
-
-const $Empty = styled(Command.Empty)`
-  color: var(--color-text-0);
-  padding: 1rem;
-  height: 100%;
-`;

src/components/DetailsDialog.tsx

@@ -27,7 +27,7 @@ export const DetailsDialog = ({ slotIcon, title, items, slotFooter, setIsOpen }:
       placement={isTablet ? DialogPlacement.Default : DialogPlacement.Sidebar}
     >
       <$Content>
-        <$Details withSeparators justifyItems="end" items={items} />
+        <Details withSeparators justifyItems="end" items={items} tw="font-small-book" />
 
         <$Footer>{slotFooter}</$Footer>
       </$Content>
@@ -40,11 +40,6 @@ const $Content = styled.div`
   --stickyFooterBackdrop-outsetY: var(--dialog-content-paddingBottom);
   gap: 1rem;
 `;
-
-const $Details = styled(Details)`
-  font: var(--font-small-book);
-`;
-
 const $Footer = styled.footer`
   ${layoutMixins.gridEqualColumns}
   gap: 0.66rem;