fix: Update base color tokens + styles for FernTag (#846)

fern-api · May 10, 2024 · f605c43 · f605c43
1 parent 39955c0
commit f605c43
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 104 deletions.
diff --git a/.gitignore b/.gitignore
@@ -53,4 +53,5 @@ lerna-debug.log*
 *storybook.log
 
 #ide
-.idea/
+.idea/
+*.cookie
diff --git a/packages/ui/app/.storybook/main.ts b/packages/ui/app/.storybook/main.ts
@@ -17,6 +17,7 @@ const config: StorybookConfig = {
         getAbsolutePath("@storybook/addon-essentials"),
         getAbsolutePath("@chromatic-com/storybook"),
         getAbsolutePath("@storybook/addon-interactions"),
+        getAbsolutePath("@storybook/addon-themes"),
     ],
     framework: {
         name: getAbsolutePath("@storybook/nextjs"),

diff --git a/packages/ui/app/.storybook/preview.tsx b/packages/ui/app/.storybook/preview.tsx
@@ -1,16 +1,29 @@
+import { withThemeByClassName } from "@storybook/addon-themes";
 import type { Preview } from "@storybook/react";
 import React from "react";
 import { Toaster } from "../src/components/FernToast";
+import { FernTooltipProvider } from "../src/components/FernTooltip";
 import "../src/next-app/globals.scss";
 import "./variables.css";
 
 const globalDecorator = (Story) => (
     <React.Fragment>
-        <Story />
-        <Toaster />
+        <FernTooltipProvider>
+            <Story />
+            <Toaster />
+        </FernTooltipProvider>
     </React.Fragment>
 );
-export const decorators = [globalDecorator];
+export const decorators = [
+    globalDecorator,
+    withThemeByClassName({
+        themes: {
+            light: "light",
+            dark: "dark",
+        },
+        defaultTheme: "light",
+    }),
+];
 
 const preview: Preview = {
     parameters: {

diff --git a/packages/ui/app/package.json b/packages/ui/app/package.json
@@ -120,6 +120,7 @@
     "@storybook/addon-interactions": "8.1.0-alpha.6",
     "@storybook/addon-links": "8.1.0-alpha.6",
     "@storybook/addon-onboarding": "8.1.0-alpha.6",
+    "@storybook/addon-themes": "^8.0.10",
     "@storybook/blocks": "8.1.0-alpha.6",
     "@storybook/nextjs": "8.1.0-alpha.6",
     "@storybook/react": "8.1.0-alpha.6",

diff --git a/packages/ui/app/src/components/FernTag.tsx b/packages/ui/app/src/components/FernTag.tsx
@@ -45,24 +45,24 @@ export const FernTag: FC<FernTagProps> = ({
                 },
                 {
                     // Gray
-                    "bg-tag-default text-default": colorScheme === "gray" && variant === "subtle",
-                    "bg-tag-default-inverted text-text-default-inverted": colorScheme === "gray" && variant === "solid",
+                    "bg-grayscale-a3 text-grayscale-a12": colorScheme === "gray" && variant === "subtle",
+                    "bg-grayscale-a12 text-background": colorScheme === "gray" && variant === "solid",
 
                     // Green
-                    "bg-tag-success text-intent-success": colorScheme === "green" && variant === "subtle",
-                    "bg-method-get text-background": colorScheme === "green" && variant === "solid",
+                    "bg-green-a3 text-green-a11": colorScheme === "green" && variant === "subtle",
+                    "bg-green-a10 text-green-1": colorScheme === "green" && variant === "solid",
 
                     // Blue
-                    "bg-tag-info text-intent-info": colorScheme === "blue" && variant === "subtle",
-                    "bg-method-post text-background": colorScheme === "blue" && variant === "solid",
+                    "bg-blue-a3 text-blue-a11": colorScheme === "blue" && variant === "subtle",
+                    "bg-blue-a10 text-blue-1": colorScheme === "blue" && variant === "solid",
 
                     // Amber
-                    "bg-tag-warning text-intent-warning": colorScheme === "amber" && variant === "subtle",
-                    "bg-intent-warning text-background": colorScheme === "amber" && variant === "solid",
+                    "bg-amber-a3 text-amber-a11": colorScheme === "amber" && variant === "subtle",
+                    "bg-amber-a10 text-amber-1 dark:text-amber-12": colorScheme === "amber" && variant === "solid",
 
                     // Red
-                    "bg-tag-danger text-intent-danger": colorScheme === "red" && variant === "subtle",
-                    "bg-method-delete text-background": colorScheme === "red" && variant === "solid",
+                    "bg-red-a3 text-red-a11": colorScheme === "red" && variant === "subtle",
+                    "bg-red-a10 text-red-1": colorScheme === "red" && variant === "solid",
 
                     // Accent
                     "bg-accent/10 text-accent-aaa": colorScheme === "accent" && variant === "subtle",

diff --git a/packages/ui/app/src/next-app/globals.scss b/packages/ui/app/src/next-app/globals.scss
@@ -4,10 +4,14 @@
 @import "@radix-ui/colors/sage-alpha.css";
 @import "@radix-ui/colors/olive-alpha.css";
 @import "@radix-ui/colors/sand-alpha.css";
+@import "@radix-ui/colors/green.css";
 @import "@radix-ui/colors/green-alpha.css";
 @import "@radix-ui/colors/grass-alpha.css";
+@import "@radix-ui/colors/red.css";
 @import "@radix-ui/colors/red-alpha.css";
+@import "@radix-ui/colors/amber.css";
 @import "@radix-ui/colors/amber-alpha.css";
+@import "@radix-ui/colors/blue.css";
 @import "@radix-ui/colors/blue-alpha.css";
 @import "@radix-ui/colors/gray-dark-alpha.css";
 @import "@radix-ui/colors/mauve-dark-alpha.css";

diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
@@ -7,6 +7,18 @@ const round = (num) =>
         .replace(/\.0$/, "");
 const em = (px, base) => `${round(px / base)}em`;
 
+const generateScale = (name) => {
+    let scale = Array.from({ length: 12 }, (_, i) => {
+        let id = i + 1;
+        return [
+            [id, `var(--${name}-${id})`],
+            [`a${id}`, `var(--${name}-a${id})`],
+        ];
+    }).flat();
+
+    return Object.fromEntries(scale);
+};
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     darkMode: "class",
@@ -53,6 +65,22 @@ module.exports = {
                 "fern-green": "#49932B",
                 "fern-green-dark": "#ADFF8C",
 
+                /* Radix palettes */
+                green: generateScale("green"),
+                "green-dark": generateScale("green-dark"),
+                amber: generateScale("amber"),
+                "amber-dark": generateScale("amber-dark"),
+                red: generateScale("red"),
+                "red-dark": generateScale("red-dark"),
+                blue: generateScale("blue"),
+                "blue-dark": generateScale("blue-dark"),
+                /* End of Radix palettes */
+
+                /* Full custom scale */
+                grayscale: generateScale("grayscale"),
+                // "accent": generateScale("accent")},
+
+                /* Tokens */
                 accent: withOpacity("--accent"),
                 "accent-aa": withOpacity("--accent-aa"),
                 "accent-aaa": withOpacity("--accent-aaa"),
-Original file line number
+Diff line change
@@ Expand Up / @@ -53,4 +53,5 @@ lerna-debug.log* @@
     *storybook.log
     #ide
-    .idea/
+    .idea/
+    *.cookie