chore(tailwind): add tokens for specific WL

kiwicom · Oct 19, 2023 · 97d3b3e · 97d3b3e
1 parent 5ee80c0
commit 97d3b3e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 20 deletions.
diff --git a/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap b/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap
@@ -642,9 +642,9 @@ exports[`orbitPreset should match snapshot 1`] = `
       "button-link-secondary-background": "transparent",
       "button-link-secondary-background-active": "var(--palette-cloud-light-active, #D6DEE6)",
       "button-link-secondary-background-hover": "var(--palette-cloud-light-hover, #E5EAEF)",
-      "button-primary-background": "var(--palette-product-normal, #00A58E)",
-      "button-primary-background-active": "var(--palette-product-normal-active, #008472)",
-      "button-primary-background-hover": "var(--palette-product-normal-hover, #009580)",
+      "button-primary-background": "var(--button-primary-background, var(--palette-product-normal, #00A58E))",
+      "button-primary-background-active": "var(--button-primary-background-active, var(--palette-product-normal-active, #008472))",
+      "button-primary-background-hover": "var(--button-primary-background-hover, var(--palette-product-normal-hover, #009580))",
       "button-primary-subtle-background": "var(--palette-product-light, #E1F4F3)",
       "button-primary-subtle-background-active": "var(--palette-product-light-active, #BFE8E2)",
       "button-primary-subtle-background-hover": "var(--palette-product-light-hover, #D6F0EC)",
@@ -3199,12 +3199,12 @@ exports[`orbitPreset should match snapshot 1`] = `
       "button-link-secondary-foreground": "var(--palette-ink-dark, #252A31)",
       "button-link-secondary-foreground-active": "var(--palette-ink-dark-active, #0B0C0F)",
       "button-link-secondary-foreground-hover": "var(--palette-ink-dark-hover, #181B20)",
-      "button-primary-foreground": "var(--palette-white-normal, #FFFFFF)",
-      "button-primary-foreground-active": "var(--palette-white-normal, #FFFFFF)",
-      "button-primary-foreground-hover": "var(--palette-white-normal, #FFFFFF)",
-      "button-primary-subtle-foreground": "var(--palette-product-dark, #007A69)",
-      "button-primary-subtle-foreground-active": "var(--palette-product-dark-active, #006657)",
-      "button-primary-subtle-foreground-hover": "var(--palette-product-dark-hover, #007060)",
+      "button-primary-foreground": "var(--button-primary-foreground, var(--palette-white-normal, #FFFFFF))",
+      "button-primary-foreground-active": "var(--button-primary-foreground-active, var(--palette-white-normal, #FFFFFF))",
+      "button-primary-foreground-hover": "var(--button-primary-foreground-hover, var(--palette-white-normal, #FFFFFF))",
+      "button-primary-subtle-foreground": "var(--button-primary-subtle-foreground, var(--palette-product-dark, #007A69))",
+      "button-primary-subtle-foreground-active": "var(--button-primary-subtle-foreground-active, var(--palette-product-dark-active, #006657))",
+      "button-primary-subtle-foreground-hover": "var(--button-primary-subtle-foreground-hover, var(--palette-product-dark-hover, #007060))",
       "button-secondary-foreground": "var(--palette-ink-dark, #252A31)",
       "button-secondary-foreground-active": "var(--palette-ink-dark-active, #0B0C0F)",
       "button-secondary-foreground-hover": "var(--palette-ink-dark-hover, #181B20)",

diff --git a/packages/orbit-tailwind-preset/src/presets/components/index.ts b/packages/orbit-tailwind-preset/src/presets/components/index.ts
@@ -80,12 +80,6 @@ const cfg = (options?: Options): Config => {
       preflight: disablePreflight ? false : undefined,
     },
     theme: {
-      variables: {
-        DEFAULT: Object.entries(tokens).reduce((acc, [key, value]) => {
-          acc[kebabCase(key)] = value;
-          return acc;
-        }, {}),
-      },
       extend: {
         screens: {
           "sm-mm": { max: px(tokens.breakpointMediumMobile - 1) },
@@ -285,11 +279,26 @@ const cfg = (options?: Options): Config => {
           loader: "loader 1.25s infinite ease-in-out",
           pulse: "pulse 1.5s infinite",
         },
-        textColor: Object.entries(getForegroundColors(tokens)).reduce((acc, [key, value]) => {
-          const name = key.replace("text-", "");
-          return { ...acc, [name]: value };
-        }, {}),
-        backgroundColor: getBackgroundColors(tokens),
+        textColor: {
+          ...Object.entries(getForegroundColors(tokens)).reduce((acc, [key, value]) => {
+            const name = key.replace("text-", "");
+            return { ...acc, [name]: value };
+          }, {}),
+          // overrides for specific WL
+          "button-primary-foreground": `var(--button-primary-foreground, ${tokens.buttonPrimaryForeground})`,
+          "button-primary-foreground-hover": `var(--button-primary-foreground-hover, ${tokens.buttonPrimaryForegroundHover})`,
+          "button-primary-foreground-active": `var(--button-primary-foreground-active, ${tokens.buttonPrimaryForegroundActive})`,
+          "button-primary-subtle-foreground": `var(--button-primary-subtle-foreground, ${tokens.buttonPrimarySubtleForeground})`,
+          "button-primary-subtle-foreground-hover": `var(--button-primary-subtle-foreground-hover, ${tokens.buttonPrimarySubtleForegroundHover})`,
+          "button-primary-subtle-foreground-active": `var(--button-primary-subtle-foreground-active, ${tokens.buttonPrimarySubtleForegroundActive})`,
+        },
+        backgroundColor: {
+          ...getBackgroundColors(tokens),
+          // overrides for specific WL
+          "button-primary-background": `var(--button-primary-background, ${tokens.buttonPrimaryBackground})`,
+          "button-primary-background-hover": `var(--button-primary-background-hover, ${tokens.buttonPrimaryBackgroundHover})`,
+          "button-primary-background-active": `var(--button-primary-background-active, ${tokens.buttonPrimaryBackgroundActive})`,
+        },
       },
     },
     plugins: [