From a2c1ed1e3d993a1950f18535b39e314e6c7503e7 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 24 Jan 2025 15:06:49 +0000 Subject: [PATCH] Update text tokens Signed-off-by: Charles de Dreuille --- canon-docs/src/app/(docs)/theme/theming/page.mdx | 4 ++-- canon-docs/src/app/globals.css | 2 +- canon-docs/src/app/page.module.css | 2 +- .../src/components/CodeBlock/styles.module.css | 2 +- .../src/components/CustomTheme/styles.module.css | 2 +- .../src/components/HeadlessBanners/styles.module.css | 4 ++-- canon-docs/src/components/Sidebar/Sidebar.module.css | 8 ++++---- canon-docs/src/components/Tabs/parts.tsx | 4 ++-- canon-docs/src/components/Tabs/styles.module.css | 2 +- canon-docs/src/components/Toolbar/nav.module.css | 12 ++++++------ canon-docs/src/components/Toolbar/theme.module.css | 10 +++++----- canon-docs/src/mdx-components.tsx | 4 ++-- packages/canon/.storybook/themes/backstage.css | 8 ++++---- packages/canon/src/components/Box/Box.stories.tsx | 2 +- packages/canon/src/components/Box/styles.css | 2 +- packages/canon/src/components/Button/styles.css | 8 ++++---- packages/canon/src/components/Checkbox/styles.css | 2 +- packages/canon/src/components/Field/Field.styles.css | 6 +++--- packages/canon/src/components/Heading/styles.css | 2 +- packages/canon/src/components/Input/Input.styles.css | 4 ++-- packages/canon/src/components/Text/styles.css | 2 +- packages/canon/src/css/core.css | 8 ++++---- 22 files changed, 50 insertions(+), 50 deletions(-) diff --git a/canon-docs/src/app/(docs)/theme/theming/page.mdx b/canon-docs/src/app/(docs)/theme/theming/page.mdx index 14cd06cb8f..4cb03859f9 100644 --- a/canon-docs/src/app/(docs)/theme/theming/page.mdx +++ b/canon-docs/src/app/(docs)/theme/theming/page.mdx @@ -186,7 +186,7 @@ are prefixed with `fg` to make it easier to identify. - --canon-fg-primary + --canon-fg-text-primary It should be used on top of `--canon-bg-app` or `--canon-bg-elevated`. @@ -194,7 +194,7 @@ are prefixed with `fg` to make it easier to identify. - --canon-fg-secondary + --canon-fg-text-secondary It should be used on top of `--canon-bg-app` or `--canon-bg-elevated`. diff --git a/canon-docs/src/app/globals.css b/canon-docs/src/app/globals.css index 6f3702c950..343f23a38f 100644 --- a/canon-docs/src/app/globals.css +++ b/canon-docs/src/app/globals.css @@ -2,7 +2,7 @@ body { display: flex; flex-direction: row; background-color: var(--canon-bg); - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); transition: background-color 0.2s ease-in-out; --docs-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, diff --git a/canon-docs/src/app/page.module.css b/canon-docs/src/app/page.module.css index 3d22802a3c..bc28185d48 100644 --- a/canon-docs/src/app/page.module.css +++ b/canon-docs/src/app/page.module.css @@ -17,7 +17,7 @@ } .page p { - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); font-size: 1rem; line-height: 1.5rem; margin-top: 0; diff --git a/canon-docs/src/components/CodeBlock/styles.module.css b/canon-docs/src/components/CodeBlock/styles.module.css index fcd5309f14..966b3ff72b 100644 --- a/canon-docs/src/components/CodeBlock/styles.module.css +++ b/canon-docs/src/components/CodeBlock/styles.module.css @@ -18,7 +18,7 @@ border-bottom: 1px solid var(--canon-border); padding: 12px 20px; font-size: 0.875rem; - color: var(--canon-fg-secondary); + color: var(--canon-fg-text-secondary); } .code { diff --git a/canon-docs/src/components/CustomTheme/styles.module.css b/canon-docs/src/components/CustomTheme/styles.module.css index 8f72b15d02..ac7d7f36f1 100644 --- a/canon-docs/src/components/CustomTheme/styles.module.css +++ b/canon-docs/src/components/CustomTheme/styles.module.css @@ -66,7 +66,7 @@ padding: 0 8px; color: #fff; background-color: var(--canon-bg); - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); transition: background-color 0.2s ease-in-out; border-radius: 0.25rem; cursor: pointer; diff --git a/canon-docs/src/components/HeadlessBanners/styles.module.css b/canon-docs/src/components/HeadlessBanners/styles.module.css index 6cbb107aa7..4817ab569f 100644 --- a/canon-docs/src/components/HeadlessBanners/styles.module.css +++ b/canon-docs/src/components/HeadlessBanners/styles.module.css @@ -10,7 +10,7 @@ } .icon path { - fill: var(--canon-fg-primary); + fill: var(--canon-fg-text-primary); } .content { @@ -37,6 +37,6 @@ border-radius: 100px; margin-top: var(--canon-space-3); font-size: var(--canon-font-size-3); - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); gap: var(--canon-space-2); } diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css index d87be799d0..feb9f8bea3 100644 --- a/canon-docs/src/components/Sidebar/Sidebar.module.css +++ b/canon-docs/src/components/Sidebar/Sidebar.module.css @@ -10,7 +10,7 @@ left: 0; width: 300px; height: 100vh; - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); background-color: var(--canon-bg-elevated); border-right: 1px solid var(--canon-border); padding-left: 20px; @@ -26,7 +26,7 @@ } .logo path { - fill: var(--canon-fg-primary); + fill: var(--canon-fg-text-primary); } .menu { @@ -75,11 +75,11 @@ font-family: var(--docs-font); font-size: var(--canon-font-size-3); font-weight: var(--canon-font-weight-regular); - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); } .lineStatus { font-family: var(--docs-font); font-size: var(--canon-font-size-3); - color: var(--canon-fg-secondary); + color: var(--canon-fg-text-secondary); } diff --git a/canon-docs/src/components/Tabs/parts.tsx b/canon-docs/src/components/Tabs/parts.tsx index 0139d3be1a..41dfadf2ea 100644 --- a/canon-docs/src/components/Tabs/parts.tsx +++ b/canon-docs/src/components/Tabs/parts.tsx @@ -34,8 +34,8 @@ export const Tab = (props: React.ComponentProps) => ( {...rest} style={{ color: state.selected - ? 'var(--canon-fg-primary)' - : 'var(--canon-fg-secondary)', + ? 'var(--canon-fg-text-primary)' + : 'var(--canon-fg-text-secondary)', }} > {children} diff --git a/canon-docs/src/components/Tabs/styles.module.css b/canon-docs/src/components/Tabs/styles.module.css index 2ce4d81064..137bc7470d 100644 --- a/canon-docs/src/components/Tabs/styles.module.css +++ b/canon-docs/src/components/Tabs/styles.module.css @@ -22,6 +22,6 @@ left: var(--active-tab-left); width: var(--active-tab-width); height: 1px; - background-color: var(--canon-fg-primary); + background-color: var(--canon-fg-text-primary); transition: all 0.2s ease-in-out; } diff --git a/canon-docs/src/components/Toolbar/nav.module.css b/canon-docs/src/components/Toolbar/nav.module.css index 123817c323..526d7bf918 100644 --- a/canon-docs/src/components/Toolbar/nav.module.css +++ b/canon-docs/src/components/Toolbar/nav.module.css @@ -27,21 +27,21 @@ all: unset; height: 60px; font-family: var(--docs-font); - color: var(--canon-fg-secondary); + color: var(--canon-fg-text-secondary); font-size: var(--canon-font-size-3); font-weight: var(--canon-font-weight-bold); cursor: pointer; transition: color 0.2s ease-in-out; &:hover { - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); } &[data-selected] { - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); & p { - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); } } @@ -60,7 +60,7 @@ } .tab p { - color: var(--canon-fg-secondary) !important; + color: var(--canon-fg-text-secondary) !important; } .indicator { @@ -72,7 +72,7 @@ width: var(--active-tab-width); height: 1px; border-radius: 0.25rem; - background-color: var(--canon-fg-primary); + background-color: var(--canon-fg-text-primary); transition-property: translate, width, background-color; transition-duration: 200ms; transition-timing-function: ease-in-out; diff --git a/canon-docs/src/components/Toolbar/theme.module.css b/canon-docs/src/components/Toolbar/theme.module.css index 4da56e31f3..ac3701541f 100644 --- a/canon-docs/src/components/Toolbar/theme.module.css +++ b/canon-docs/src/components/Toolbar/theme.module.css @@ -29,23 +29,23 @@ outline: 0; background: none; appearance: none; - color: var(--canon-fg-secondary); + color: var(--canon-fg-text-secondary); user-select: none; height: 2rem; flex: 1; cursor: pointer; &[data-selected] { - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); & p { - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); } } @media (hover: hover) { &:hover { - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); } } @@ -64,7 +64,7 @@ } .tab p { - color: var(--canon-fg-secondary) !important; + color: var(--canon-fg-text-secondary) !important; } .indicator { diff --git a/canon-docs/src/mdx-components.tsx b/canon-docs/src/mdx-components.tsx index 6d94175619..182eaa03b4 100644 --- a/canon-docs/src/mdx-components.tsx +++ b/canon-docs/src/mdx-components.tsx @@ -62,7 +62,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {

), a: ({ children, href }) => ( - + {children as ReactNode} ), @@ -83,7 +83,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents { backgroundColor: 'var(--canon-bg-elevated)', padding: '0.2rem 0.375rem', borderRadius: '0.25rem', - color: 'var(--canon-fg-secondary)', + color: 'var(--canon-fg-text-secondary)', border: '1px solid var(--canon-border)', fontSize: '0.875rem', }} diff --git a/packages/canon/.storybook/themes/backstage.css b/packages/canon/.storybook/themes/backstage.css index 1f13b1ddae..653836c558 100644 --- a/packages/canon/.storybook/themes/backstage.css +++ b/packages/canon/.storybook/themes/backstage.css @@ -60,9 +60,9 @@ --canon-bg: #f4f4f4; /* Text colors */ - --canon-fg-primary: #000; + --canon-fg-text-primary: #000; --canon-fg-accent: #fff; - --canon-fg-secondary: #646464; + --canon-fg-text-secondary: #646464; } [data-theme-name='legacy'][data-theme='dark'] { @@ -82,7 +82,7 @@ --canon-fg-danger: #f50000; /* Text colors */ - --canon-fg-primary: #fff; + --canon-fg-text-primary: #fff; --canon-fg-accent: #000; - --canon-fg-secondary: #b3b3b3; + --canon-fg-text-secondary: #b3b3b3; } diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx index e9caa0a3f9..52dd7bc782 100644 --- a/packages/canon/src/components/Box/Box.stories.tsx +++ b/packages/canon/src/components/Box/Box.stories.tsx @@ -383,7 +383,7 @@ export const Border: Story = { args: { style: { background: 'var(--canon-bg-elevated)', - color: 'var(--canon-fg-primary)', + color: 'var(--canon-fg-text-primary)', padding: '4px 8px', width: '80px', height: '32px', diff --git a/packages/canon/src/components/Box/styles.css b/packages/canon/src/components/Box/styles.css index f3b24793cf..229f322343 100644 --- a/packages/canon/src/components/Box/styles.css +++ b/packages/canon/src/components/Box/styles.css @@ -1,4 +1,4 @@ .canon-Box { font-family: var(--canon-font-regular); - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); } diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css index a90fe59348..6bfd93a8ea 100644 --- a/packages/canon/src/components/Button/styles.css +++ b/packages/canon/src/components/Button/styles.css @@ -36,14 +36,14 @@ &:hover { background-color: transparent; box-shadow: inset 0 0 0 1px var(--canon-border-focus); - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); } } .canon-Button--variant-secondary { background-color: transparent; box-shadow: inset 0 0 0 1px var(--canon-border); - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); &:hover { box-shadow: inset 0 0 0 1px var(--canon-border-hover); @@ -52,10 +52,10 @@ .canon-Button--variant-tertiary { background-color: transparent; - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); &:hover { - color: var(--canon-fg-secondary); + color: var(--canon-fg-text-secondary); } } diff --git a/packages/canon/src/components/Checkbox/styles.css b/packages/canon/src/components/Checkbox/styles.css index 5dae047191..1da96e8344 100644 --- a/packages/canon/src/components/Checkbox/styles.css +++ b/packages/canon/src/components/Checkbox/styles.css @@ -23,7 +23,7 @@ gap: var(--canon-space-2); font-size: var(--canon-font-size-xs); font-family: var(--canon-font-regular); - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); user-select: none; &:hover { diff --git a/packages/canon/src/components/Field/Field.styles.css b/packages/canon/src/components/Field/Field.styles.css index 6a8e3c8e22..6bf695fc97 100644 --- a/packages/canon/src/components/Field/Field.styles.css +++ b/packages/canon/src/components/Field/Field.styles.css @@ -24,14 +24,14 @@ .canon-FieldLabel { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); margin-bottom: var(--canon-space-1_5); } .canon-FieldDescription { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); - color: var(--canon-fg-secondary); + color: var(--canon-fg-text-secondary); margin: 0; padding-top: var(--canon-space-1_5); } @@ -47,7 +47,7 @@ .canon-FieldValidity { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); - color: var(--canon-fg-secondary); + color: var(--canon-fg-text-secondary); margin: 0; padding-top: var(--canon-space-1_5); } diff --git a/packages/canon/src/components/Heading/styles.css b/packages/canon/src/components/Heading/styles.css index 2db11d7eb2..a730afe9f0 100644 --- a/packages/canon/src/components/Heading/styles.css +++ b/packages/canon/src/components/Heading/styles.css @@ -16,7 +16,7 @@ .canon-Heading { font-family: var(--canon-font-regular); - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); line-height: 100%; padding: 0; margin: 0; diff --git a/packages/canon/src/components/Input/Input.styles.css b/packages/canon/src/components/Input/Input.styles.css index 72248f887e..cfeed27b48 100644 --- a/packages/canon/src/components/Input/Input.styles.css +++ b/packages/canon/src/components/Input/Input.styles.css @@ -21,13 +21,13 @@ background-color: var(--canon-bg-elevated); font-size: var(--canon-font-size-3); font-weight: var(--canon-font-weight-regular); - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out; width: 100%; } .canon-Input::placeholder { - color: var(--canon-fg-secondary); + color: var(--canon-fg-text-secondary); } .canon-Input:hover { diff --git a/packages/canon/src/components/Text/styles.css b/packages/canon/src/components/Text/styles.css index 871960b8db..9cf8c884fb 100644 --- a/packages/canon/src/components/Text/styles.css +++ b/packages/canon/src/components/Text/styles.css @@ -16,7 +16,7 @@ .canon-Text { font-family: var(--canon-font-regular); - color: var(--canon-fg-primary); + color: var(--canon-fg-text-primary); padding: 0; margin: 0; } diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css index a2e561b134..d744d468d0 100644 --- a/packages/canon/src/css/core.css +++ b/packages/canon/src/css/core.css @@ -95,8 +95,8 @@ --canon-border-hover: rgba(0, 0, 0, 0.2); --canon-border-success: #008000; --canon-border-warning: #e36d05; - --canon-fg-primary: #000; - --canon-fg-secondary: #646464; + --canon-fg-text-primary: #000; + --canon-fg-text-secondary: #646464; --canon-fg-link: #fff; --canon-fg-link-hover: #fff; --canon-fg-accent: #fff; @@ -137,6 +137,6 @@ --canon-fg-warning: #e36d05; --canon-fg-link: #fff; --canon-fg-link-hover: #fff; - --canon-fg-primary: #000; - --canon-fg-secondary: #646464; + --canon-fg-text-primary: #000; + --canon-fg-text-secondary: #646464; }