Add figma color name mapping to Colors story

cartridge-gg · Jan 17, 2025 · 79e0a08 · 79e0a08
1 parent 8ae135a
commit 79e0a08
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 24 deletions.
diff --git a/packages/ui-next/src/preset.ts b/packages/ui-next/src/preset.ts
@@ -16,45 +16,32 @@ export const cartridgeTWPreset: Partial<Config> = {
       transparent: "transparent",
       current: "currentColor",
       background: {
-        // bg-background
         DEFAULT: "hsl(var(--background))",
-        // solid-fills/bg-primary
         100: "hsl(var(--background-100))",
-        // solid-fills/bg-secondary
         200: "hsl(var(--background-200))",
-        // solid-fills/bg-tertiary
         300: "hsl(var(--background-300))",
       },
-      // text-primary
       foreground: "hsl(var(--foreground))",
       primary: {
-        // Overwritten by theme.colors.primary
         DEFAULT: "hsl(var(--primary))",
-        // Overwritten by theme.colors.primaryForeground
         foreground: "hsl(var(--primary-foreground))",
       },
-      // Mainly for Duotone icons
       secondary: "hsl(var(--secondary))",
       destructive: {
         DEFAULT: "hsl(var(--destructive))",
         100: "hsl(var(--destructive-100))",
         foreground: "hsl(var(--destructive-foreground))",
       },
       muted: {
-        // TODO: bg.muted
         DEFAULT: "hsl(var(--muted))",
-        // TODO: text.secondary
         foreground: "hsl(var(--muted-foreground))",
       },
       accent: {
-        // TODO: bg.accent
         DEFAULT: "hsl(var(--accent))",
-        // TODO: text.secondary-accent
         foreground: "hsl(var(--accent-foreground))",
       },
       border: "hsl(var(--background)/0.12)",
       input: "hsl(var(--background-200)/0.12)",
-      // solid-fills/spacer
       spacer: "hsl(var(--spacer))",
     },
     extend: {

diff --git a/packages/ui-next/src/stories/colors.stories.tsx b/packages/ui-next/src/stories/colors.stories.tsx
@@ -17,37 +17,36 @@ export const Surface: Story = {
       <>
         <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-background text-xs">
           <div>bg-background</div>
+          <div>(bg-background)</div>
         </div>
 
         <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-background-100 text-xs">
           <div>bg-background-100</div>
+          <div>(solid-fills/bg-primary)</div>
         </div>
 
         <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-background-200 text-xs">
           <div>bg-background-200</div>
+          <div>(solid-fills/bg-secondary)</div>
         </div>
 
         <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-background-300 text-xs">
           <div>bg-background-300</div>
+          <div>(solid-fills/bg-tertiary)</div>
         </div>
       </>
     ),
   },
 };
 
-export const Accent: Story = {
+export const Text: Story = {
   args: {
     children: (
-      <>
-        <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-primary text-primary-foreground text-xs">
-          <div>bg-primary</div>
-          <div>text-primary-foreground</div>
-        </div>
-
-        <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-secondary text-xs">
-          <div>bg-secondary</div>
-        </div>
-      </>
+      <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-foreground text-xs text-background">
+        <div>bg-foreground</div>
+        <div>(text-primary)</div>
+        <div>text-background</div>
+      </div>
     ),
   },
 };
@@ -58,6 +57,7 @@ export const Muted: Story = {
       <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-muted text-muted-foreground text-xs">
         <div>bg-muted</div>
         <div>text-muted-foreground</div>
+        <div>(text.secondary)</div>
       </div>
     ),
   },
@@ -72,6 +72,7 @@ export const Destructive: Story = {
         </div>
         <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-destructive-100 text-xs">
           <div>bg-destructive-100</div>
+          <div>(Red/500)</div>
         </div>
         <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-destructive-foreground text-xs">
           <div>bg-destructive-foreground</div>
@@ -81,6 +82,51 @@ export const Destructive: Story = {
   },
 };
 
+export const Accent: Story = {
+  args: {
+    children: (
+      <>
+        <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-primary text-primary-foreground text-xs">
+          <div>bg-primary</div>
+          <div className="mb-2">(theme.colors.primary)</div>
+          <div className="flex flex-col items-center w-full overflow-x-auto">
+            <div>text-primary-foreground</div>
+            <div>(theme.colors.primaryForeground)</div>
+          </div>
+        </div>
+
+        <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-secondary text-xs">
+          <div>bg-secondary</div>
+          <div>(Used in Duotone)</div>
+        </div>
+      </>
+    ),
+  },
+};
+
+export const Others: Story = {
+  args: {
+    children: (
+      <>
+        <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-border text-xs">
+          <div>bg-border</div>
+          <div>(--background/0.12)</div>
+        </div>
+
+        <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-input text-xs">
+          <div>bg-input</div>
+          <div>(--background-200/0.12)</div>
+        </div>
+
+        <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-spacer text-xs">
+          <div>bg-spacer</div>
+          <div>(spacer)</div>
+        </div>
+      </>
+    ),
+  },
+};
+
 function Colors(props: PropsWithChildren) {
   return <div className="flex gap-4" {...props} />;
 }