fix: clean up theme css vars (#901)

## 📝 Changes - Update theme-aware tokens to remove `--ezui-t-` prefix and just use `--ezui-` instead - Removed theme-aware shadow tokens. This isn't clear if or how these will be used in the future, so removing for now until we have an actual use case - Update "base" theme to "light" theme to be more clear with the theme's intent/language used elsewhere in the ecosystem This allows outside consumer to reference theme-aware CSS vars with a less cryptic naming convention (i.e. `var(--ezui-color-primary-800)` instead of `var(--ezui-t-color-primary-800)`—since the extra `t` is kinda confusing). This will be more thoroughly documented in the near future. Because the theme-aware tokens are aliases there should be no collisions with global tokens, but this is something to be mindful of in any future theme config. I searched our ecosystem with hound and didn't see any uses of existing references to our theme aware variables in other projects, so this should be safe to release. ## ✅ Checklist - [x] Visuals are complete and match Figma - [x] Code is complete and in accordance with our style guide - [x] Design and theme tokens are audited for any relevant changes - [x] Unit tests are written and passing - [x] TSDoc is written or updated for any component API surface area - [x] Stories in Storybook accompany any relevant component changes - [x] Ensure no accessibility violations are reported in Storybook - [x] Specs and documentation are up-to-date - [x] Cross-browser check is performed (Chrome, Safari, Firefox) - [x] Changeset is added
EasyPost · Jan 8, 2024 · ca064bf · ca064bf
1 parent 7c338a7
commit ca064bf
Show file tree

Hide file tree

Showing 13 changed files with 40 additions and 40 deletions.
diff --git a/.changeset/sweet-mice-judge.md b/.changeset/sweet-mice-judge.md
@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": patch
+---
+
+fix: update css var theme token prefix
diff --git a/documentation/decisions/008_support_theming.md b/documentation/decisions/008_support_theming.md
@@ -196,12 +196,10 @@ const theme = createTheme(() => ({
 
 The names of the CSS variables are the same as in the theme configuration. Each variable holds the backing primitive of the most immediate theme and color scheme context.
 
-Note the `--ezui-t` prefix to differentiate theme-aware CSS variables from static design tokens.
-
 ```css
 .Button {
-  color: var(--ezui-t-color-text);
-  background: var(--ezui-t-color-background);
+  color: var(--ezui-color-text);
+  background: var(--ezui-color-background);
 }
 ```
 

diff --git a/easy-ui-react/src/Button/_mixins.scss b/easy-ui-react/src/Button/_mixins.scss
@@ -8,7 +8,7 @@
   cursor: pointer;
 
   &:focus {
-    box-shadow: theme-token("shadow.button");
+    box-shadow: design-token("shadow.button");
     outline: none;
   }
 

diff --git a/easy-ui-react/src/CodeSnippet/theme.ts b/easy-ui-react/src/CodeSnippet/theme.ts
@@ -9,17 +9,17 @@ export function useEasyUiSyntaxHighlighterTheme(maxLines?: number) {
         maxLines,
         fontFamily: ezuiTokens["font.family.mono"],
         fontSize: `${pxToRem(14)}rem`,
-        base: ezuiTokens["theme.base.color.primary.800"],
-        lineNumber: ezuiTokens["theme.base.color.neutral.600"],
-        comment: ezuiTokens["theme.base.color.neutral.400"],
-        punctuation: ezuiTokens["theme.base.color.neutral.700"],
-        property: ezuiTokens["theme.base.color.negative.700"],
-        selector: ezuiTokens["theme.base.color.positive.700"],
-        operator: ezuiTokens["theme.base.color.warning.800"],
+        base: ezuiTokens["theme.light.color.primary.800"],
+        lineNumber: ezuiTokens["theme.light.color.neutral.600"],
+        comment: ezuiTokens["theme.light.color.neutral.400"],
+        punctuation: ezuiTokens["theme.light.color.neutral.700"],
+        property: ezuiTokens["theme.light.color.negative.700"],
+        selector: ezuiTokens["theme.light.color.positive.700"],
+        operator: ezuiTokens["theme.light.color.warning.800"],
         operatorBg: "transparent",
-        variable: ezuiTokens["theme.base.color.warning.700"],
-        function: ezuiTokens["theme.base.color.negative.600"],
-        keyword: ezuiTokens["theme.base.color.primary.500"],
+        variable: ezuiTokens["theme.light.color.warning.700"],
+        function: ezuiTokens["theme.light.color.negative.600"],
+        keyword: ezuiTokens["theme.light.color.primary.500"],
       }),
     [maxLines],
   );

diff --git a/easy-ui-react/src/Menu/_mixins.scss b/easy-ui-react/src/Menu/_mixins.scss
@@ -26,7 +26,7 @@
     "color.background.hovered",
     theme-token("color.neutral.050")
   );
-  @include component-token("menu", "shadow", theme-token("shadow.overlay"));
+  @include component-token("menu", "shadow", design-token("shadow.overlay"));
   @include component-token("menu", "padding.x", design-token("space.2"));
   @include component-token(
     "menu",

diff --git a/easy-ui-react/src/Theme/Theme.test.tsx b/easy-ui-react/src/Theme/Theme.test.tsx
@@ -19,7 +19,7 @@ describe("<ThemeProvider />", () => {
       </ThemeProvider>,
     );
     expect(getThemeForElement(screen.getByText("Child"))).toMatchObject({
-      "--ezui-t-color-text": "black",
+      "--ezui-color-text": "black",
     });
   });
 
@@ -30,7 +30,7 @@ describe("<ThemeProvider />", () => {
       </ThemeProvider>,
     );
     expect(getThemeForElement(screen.getByText("Child"))).toMatchObject({
-      "--ezui-t-color-text": "white",
+      "--ezui-color-text": "white",
     });
   });
 
@@ -44,10 +44,10 @@ describe("<ThemeProvider />", () => {
       </ThemeProvider>,
     );
     expect(getThemeForElement(screen.getByText("Outer"))).toMatchObject({
-      "--ezui-t-color-text": "black",
+      "--ezui-color-text": "black",
     });
     expect(getThemeForElement(screen.getByText("Inner"))).toMatchObject({
-      "--ezui-t-color-text": "white",
+      "--ezui-color-text": "white",
     });
   });
 
@@ -61,10 +61,10 @@ describe("<ThemeProvider />", () => {
       </ThemeProvider>,
     );
     expect(getThemeForElement(screen.getByText("Outer"))).toMatchObject({
-      "--ezui-t-color-text": "red",
+      "--ezui-color-text": "red",
     });
     expect(getThemeForElement(screen.getByText("Inner"))).toMatchObject({
-      "--ezui-t-color-text": "green",
+      "--ezui-color-text": "green",
     });
   });
 
@@ -81,13 +81,13 @@ describe("<ThemeProvider />", () => {
       </ThemeProvider>,
     );
     expect(getThemeForElement(screen.getByText("Outer"))).toMatchObject({
-      "--ezui-t-color-text": "black",
+      "--ezui-color-text": "black",
     });
     expect(getThemeForElement(screen.getByText("Middle"))).toMatchObject({
-      "--ezui-t-color-text": "white",
+      "--ezui-color-text": "white",
     });
     expect(getThemeForElement(screen.getByText("Inner"))).toMatchObject({
-      "--ezui-t-color-text": "black",
+      "--ezui-color-text": "black",
     });
   });
 
@@ -103,7 +103,7 @@ describe("<ThemeProvider />", () => {
       </ThemeProvider>,
     );
     expect(getThemeForElement(screen.getByText("Child"))).toMatchObject({
-      "--ezui-t-color-text": "red",
+      "--ezui-color-text": "red",
     });
   });
 
@@ -119,7 +119,7 @@ describe("<ThemeProvider />", () => {
       </ThemeProvider>,
     );
     expect(getThemeForElement(screen.getByText("Child"))).toMatchObject({
-      "--ezui-t-color-text": "white",
+      "--ezui-color-text": "white",
     });
   });
 });

diff --git a/easy-ui-react/src/Theme/Theme.tsx b/easy-ui-react/src/Theme/Theme.tsx
@@ -16,7 +16,7 @@ export type Theme = {
 export type ColorScheme = "light" | "dark" | "system" | "inverted";
 
 export const defaultTheme = createTheme(() => {
-  return getThemeFromTokens("theme.base");
+  return getThemeFromTokens("theme.light");
 });
 
 const invertedColorSchemes: Record<ColorScheme, ColorScheme> = {
@@ -216,7 +216,7 @@ function getThemeInstanceVariables(theme: Theme) {
   return Object.fromEntries(
     Object.entries(theme).map(([key, value]) => {
       const property = tokenSafeKebabCase(key);
-      return [`--ezui-t-${property}`, value];
+      return [`--ezui-${property}`, value];
     }),
   );
 }
@@ -252,5 +252,5 @@ function getThemeFromTokens(prefix: string) {
  * -> ["disabled", "success", etc]
  */
 export function getThemeTokenAliases(pattern: string) {
-  return getTokenAliases(getThemeFromTokens("theme.base"), pattern);
+  return getTokenAliases(getThemeFromTokens("theme.light"), pattern);
 }
diff --git a/easy-ui-react/src/Tooltip/Tooltip.module.scss b/easy-ui-react/src/Tooltip/Tooltip.module.scss
@@ -20,7 +20,7 @@
   @include component-token(
     "tooltip",
     "shadow",
-    theme-token("shadow.overlay.subdued")
+    design-token("shadow.overlay_subdued")
   );
   @include component-token("tooltip", "max-width", 232px);
 

diff --git a/easy-ui-react/src/styles/_token-helpers.scss b/easy-ui-react/src/styles/_token-helpers.scss
@@ -15,7 +15,7 @@
 /// color: theme-token("color.primary.800");
 @function theme-token($tokenName) {
   $cleanedName: string.clean-name($tokenName);
-  @return var(--ezui-t-#{$cleanedName});
+  @return var(--ezui-#{$cleanedName});
 }
 
 /// Helpers for referencing tokens in components in a structured way. Supports

diff --git a/easy-ui-react/src/types.ts b/easy-ui-react/src/types.ts
@@ -48,7 +48,7 @@ export type DesignTokenNamespace<
       `.${string & NeedleSuffix}`
     >;
 
-export type ThemeTokenAliases = DesignTokenNamespace<"theme.base">;
+export type ThemeTokenAliases = DesignTokenNamespace<"theme.light">;
 
 export type ThemeTokenNamespace<Needle extends string> = Namespace<
   ThemeTokenAliases,

diff --git a/easy-ui-react/src/utilities/css.test.ts b/easy-ui-react/src/utilities/css.test.ts
@@ -69,7 +69,7 @@ describe("getComponentThemeToken", () => {
     expect(
       getComponentThemeToken("icon", "color", "color.text", "disabled"),
     ).toMatchObject({
-      "--ezui-c-icon-color": "var(--ezui-t-color-text-disabled)",
+      "--ezui-c-icon-color": "var(--ezui-color-text-disabled)",
     });
   });
   it("sanitizes falsy values", () => {

diff --git a/easy-ui-react/src/utilities/css.ts b/easy-ui-react/src/utilities/css.ts
@@ -60,7 +60,7 @@ export function getComponentThemeToken(
     componentName,
     componentProp,
     token
-      ? `var(--ezui-t-${tokenSafeKebabCase(tokenSubgroup)}-${tokenSafeKebabCase(
+      ? `var(--ezui-${tokenSafeKebabCase(tokenSubgroup)}-${tokenSafeKebabCase(
           token,
         )})`
       : undefined,

diff --git a/easy-ui-tokens/src/theme/base.json → easy-ui-tokens/src/theme/light.json b/easy-ui-tokens/src/theme/base.json → easy-ui-tokens/src/theme/light.json
@@ -1,5 +1,5 @@
 {
-  "theme.base": {
+  "theme.light": {
     "color.background": { "value": "{color.gray.000}" },
     "color.background.black.bold": { "value": "{color.gray.800}" },
     "color.background.black.subtle": { "value": "{color.gray.050}" },
@@ -167,9 +167,6 @@
     "color.neutral.100": { "value": "{color.gray.100}" },
     "color.neutral.050": { "value": "{color.gray.050}" },
     "color.neutral.000": { "value": "{color.gray.000}" },
-    "font.family": { "value": "{font.family.sans}" },
-    "shadow.button": { "value": "{shadow.button}" },
-    "shadow.overlay": { "value": "{shadow.overlay}" },
-    "shadow.overlay.subdued": { "value": "{shadow.overlay_subdued}" }
+    "font.family": { "value": "{font.family.sans}" }
   }
 }