From ca064bfdd842037d9e22e19388f59a904a8b04a8 Mon Sep 17 00:00:00 2001 From: Stephen Watkins Date: Mon, 8 Jan 2024 17:20:06 -0500 Subject: [PATCH] fix: clean up theme css vars (#901) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 📝 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 --- .changeset/sweet-mice-judge.md | 5 +++++ .../decisions/008_support_theming.md | 6 ++--- easy-ui-react/src/Button/_mixins.scss | 2 +- easy-ui-react/src/CodeSnippet/theme.ts | 20 ++++++++--------- easy-ui-react/src/Menu/_mixins.scss | 2 +- easy-ui-react/src/Theme/Theme.test.tsx | 22 +++++++++---------- easy-ui-react/src/Theme/Theme.tsx | 6 ++--- easy-ui-react/src/Tooltip/Tooltip.module.scss | 2 +- easy-ui-react/src/styles/_token-helpers.scss | 2 +- easy-ui-react/src/types.ts | 2 +- easy-ui-react/src/utilities/css.test.ts | 2 +- easy-ui-react/src/utilities/css.ts | 2 +- .../src/theme/{base.json => light.json} | 7 ++---- 13 files changed, 40 insertions(+), 40 deletions(-) create mode 100644 .changeset/sweet-mice-judge.md rename easy-ui-tokens/src/theme/{base.json => light.json} (97%) diff --git a/.changeset/sweet-mice-judge.md b/.changeset/sweet-mice-judge.md new file mode 100644 index 000000000..8f07ed9cf --- /dev/null +++ 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 index 1637c9d6e..5aed57177 100644 --- 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 index f8789d8af..2385fcfe8 100644 --- 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 index fb2d63953..f47bace36 100644 --- 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 index fe41950f4..3c28c97b5 100644 --- 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 index d2a93f9ee..02c765038 100644 --- a/easy-ui-react/src/Theme/Theme.test.tsx +++ b/easy-ui-react/src/Theme/Theme.test.tsx @@ -19,7 +19,7 @@ describe("", () => { , ); expect(getThemeForElement(screen.getByText("Child"))).toMatchObject({ - "--ezui-t-color-text": "black", + "--ezui-color-text": "black", }); }); @@ -30,7 +30,7 @@ describe("", () => { , ); expect(getThemeForElement(screen.getByText("Child"))).toMatchObject({ - "--ezui-t-color-text": "white", + "--ezui-color-text": "white", }); }); @@ -44,10 +44,10 @@ describe("", () => { , ); 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("", () => { , ); 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("", () => { , ); 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("", () => { , ); expect(getThemeForElement(screen.getByText("Child"))).toMatchObject({ - "--ezui-t-color-text": "red", + "--ezui-color-text": "red", }); }); @@ -119,7 +119,7 @@ describe("", () => { , ); 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 index ca6d2b1a7..929f077e4 100644 --- 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 = { @@ -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 index e21bb0da1..9bddc3496 100644 --- 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 index 7c29de4f1..b76981e36 100644 --- 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 index 22b8580f5..a7716daf4 100644 --- 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 = Namespace< ThemeTokenAliases, diff --git a/easy-ui-react/src/utilities/css.test.ts b/easy-ui-react/src/utilities/css.test.ts index 530b24c43..4a6fbabba 100644 --- 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 index 6ec62eeff..674aa81d8 100644 --- 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 b/easy-ui-tokens/src/theme/light.json similarity index 97% rename from easy-ui-tokens/src/theme/base.json rename to easy-ui-tokens/src/theme/light.json index fa8cf9020..1ca341039 100644 --- a/easy-ui-tokens/src/theme/base.json +++ b/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}" } } }