From c1b646a8246d6640aac314d3621a670a700e5d6c Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 20 Jan 2025 14:28:51 +0000 Subject: [PATCH] Update global CSS tokens Signed-off-by: Charles de Dreuille --- .../src/app/(docs)/theme/theming/page.mdx | 18 +-- .../(playground)/playground/styles.module.css | 4 +- canon-docs/src/app/globals.css | 6 +- .../components/CodeBlock/styles.module.css | 4 +- .../components/CustomTheme/customTheme.tsx | 4 +- .../components/CustomTheme/styles.module.css | 10 +- .../HeadlessBanners/styles.module.css | 14 +- .../components/IconLibrary/styles.module.css | 4 +- .../src/components/Sidebar/Sidebar.module.css | 14 +- .../src/components/Snippet/styles.module.css | 4 +- .../src/components/Table/styles.module.css | 10 +- .../src/components/Tabs/styles.module.css | 2 +- .../src/components/Toolbar/nav.module.css | 6 +- .../src/components/Toolbar/styles.module.css | 4 +- .../components/Toolbar/theme-name.module.css | 12 +- .../src/components/Toolbar/theme.module.css | 8 +- canon-docs/src/mdx-components.tsx | 4 +- packages/canon/.storybook/preview.tsx | 5 +- .../canon/.storybook/themes/backstage.css | 28 ++-- .../canon/src/components/Box/Box.stories.tsx | 2 +- .../canon/src/components/Button/styles.css | 10 +- .../canon/src/components/Checkbox/styles.css | 8 +- .../src/components/Field/Field.styles.css | 10 +- .../canon/src/components/Heading/styles.css | 10 +- .../src/components/Input/Input.styles.css | 14 +- .../canon/src/components/Table/styles.css | 30 ++-- packages/canon/src/components/Text/styles.css | 8 +- packages/canon/src/css/core.css | 136 ++++++++++-------- packages/canon/src/css/utilities/2xl.css | 20 +-- packages/canon/src/css/utilities/lg.css | 20 +-- packages/canon/src/css/utilities/md.css | 20 +-- packages/canon/src/css/utilities/sm.css | 20 +-- packages/canon/src/css/utilities/xl.css | 20 +-- packages/canon/src/css/utilities/xs.css | 20 +-- 34 files changed, 264 insertions(+), 245 deletions(-) diff --git a/canon-docs/src/app/(docs)/theme/theming/page.mdx b/canon-docs/src/app/(docs)/theme/theming/page.mdx index 421b315a7b..3a16b533e9 100644 --- a/canon-docs/src/app/(docs)/theme/theming/page.mdx +++ b/canon-docs/src/app/(docs)/theme/theming/page.mdx @@ -27,10 +27,10 @@ example below on how to set your light and dark mode. lang="css" code={`/** Light theme **/ [data-theme='light'] { - --canon-accent: #1ed760; + --canon-bg-accent: #1ed760; --canon-bg: #fff; - --canon-surface-1: #f5f5f5; - --canon-surface-2: #000; + --canon-bg-elevated: #f5f5f5; + --canon-bg: #000; --canon-outline: #666; --canon-outline-focus: #ccc; --canon-text-primary: #f0f0f0; @@ -42,10 +42,10 @@ example below on how to set your light and dark mode. /** Dark theme **/ [data-theme='dark'] { - --canon-accent: #1ed760; + --canon-bg-accent: #1ed760; + --canon-bg: #000; + --canon-bg-elevated: #f5f5f5; --canon-bg: #000; - --canon-surface-1: #f5f5f5; - --canon-surface-2: #000; --canon-outline: #666; --canon-outline-focus: #ccc; --canon-text-primary: #fff; @@ -73,7 +73,7 @@ application to match your brand. - --canon-accent + --canon-bg-accent The accent color for the theme. @@ -85,13 +85,13 @@ application to match your brand. - --canon-surface-1 + --canon-bg-elevated The first surface color for the theme. - --canon-surface-2 + --canon-bg The second surface color for the theme. diff --git a/canon-docs/src/app/(playground)/playground/styles.module.css b/canon-docs/src/app/(playground)/playground/styles.module.css index 5280021836..8fdd79a1dd 100644 --- a/canon-docs/src/app/(playground)/playground/styles.module.css +++ b/canon-docs/src/app/(playground)/playground/styles.module.css @@ -30,7 +30,7 @@ .breakpointContent { height: 100%; border-radius: 4px; - border: 1px solid var(--canon-border-base); - background-color: var(--canon-background-base); + border: 1px solid var(--canon-border); + background-color: var(--canon-bg); padding: 16px; } diff --git a/canon-docs/src/app/globals.css b/canon-docs/src/app/globals.css index 5efc0407e7..71f7b8be9c 100644 --- a/canon-docs/src/app/globals.css +++ b/canon-docs/src/app/globals.css @@ -1,7 +1,7 @@ body { display: flex; flex-direction: row; - background-color: var(--canon-background); + background-color: var(--canon-bg); color: var(--canon-text-primary); transition: background-color 0.2s ease-in-out; @@ -41,8 +41,8 @@ iframe { } .ΝΌ2 .cm-gutters { - background-color: var(--canon-surface-2); - border-right: 1px solid var(--canon-border-base); + background-color: var(--canon-bg); + border-right: 1px solid var(--canon-border); transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; } diff --git a/canon-docs/src/components/CodeBlock/styles.module.css b/canon-docs/src/components/CodeBlock/styles.module.css index e74714e07c..b5f005f962 100644 --- a/canon-docs/src/components/CodeBlock/styles.module.css +++ b/canon-docs/src/components/CodeBlock/styles.module.css @@ -1,6 +1,6 @@ .codeBlock { border-radius: 4px; - border: 1px solid var(--canon-border-base); + border: 1px solid var(--canon-border); position: relative; background: transparent; overflow-x: auto; @@ -15,7 +15,7 @@ } .title { - border-bottom: 1px solid var(--canon-border-base); + border-bottom: 1px solid var(--canon-border); padding: 12px 20px; font-size: 0.875rem; color: var(--canon-text-secondary); diff --git a/canon-docs/src/components/CustomTheme/customTheme.tsx b/canon-docs/src/components/CustomTheme/customTheme.tsx index 3d8ed394bd..6f76267725 100644 --- a/canon-docs/src/components/CustomTheme/customTheme.tsx +++ b/canon-docs/src/components/CustomTheme/customTheme.tsx @@ -11,13 +11,13 @@ import { createTheme } from '@uiw/codemirror-themes'; import { tags as t } from '@lezer/highlight'; const defaultTheme = `:root { - --canon-accent: #000; + --canon-bg-accent: #000; }`; const myTheme = createTheme({ theme: 'light', settings: { - background: 'var(--canon-surface-1)', + background: 'var(--canon-bg-elevated)', backgroundImage: '', foreground: '#6182B8', caret: '#5d00ff', diff --git a/canon-docs/src/components/CustomTheme/styles.module.css b/canon-docs/src/components/CustomTheme/styles.module.css index a4f51c8a1d..fdb2d00fba 100644 --- a/canon-docs/src/components/CustomTheme/styles.module.css +++ b/canon-docs/src/components/CustomTheme/styles.module.css @@ -4,9 +4,9 @@ right: 16px; width: 240px; height: 47px; - background-color: var(--canon-surface-1); + background-color: var(--canon-bg-elevated); border-radius: 0.375rem; - border: 1px solid var(--canon-border-base); + border: 1px solid var(--canon-border); display: flex; flex-direction: column; overflow: hidden; @@ -31,8 +31,8 @@ .header { height: 46px; flex-shrink: 0; - border-bottom: 1px solid var(--canon-border-base); - background-color: var(--canon-surface-1); + border-bottom: 1px solid var(--canon-border); + background-color: var(--canon-bg-elevated); display: flex; justify-content: space-between; align-items: center; @@ -65,7 +65,7 @@ height: 28px; padding: 0 8px; color: #fff; - background-color: var(--canon-surface-2); + background-color: var(--canon-bg); color: var(--canon-text-primary); transition: background-color 0.2s ease-in-out; border-radius: 0.25rem; diff --git a/canon-docs/src/components/HeadlessBanners/styles.module.css b/canon-docs/src/components/HeadlessBanners/styles.module.css index 6993f51943..1353f150bb 100644 --- a/canon-docs/src/components/HeadlessBanners/styles.module.css +++ b/canon-docs/src/components/HeadlessBanners/styles.module.css @@ -1,9 +1,9 @@ .container { display: flex; - background-color: var(--canon-surface-1); + background-color: var(--canon-bg-elevated); padding: var(--canon-space-6); - border-radius: var(--canon-border-radius-xs); - border: 1px solid var(--canon-border-base); + border-radius: var(--canon-radius-2); + border: 1px solid var(--canon-border); margin-bottom: var(--canon-space-6); gap: var(--canon-space-6); transition: background-color 0.2s ease-in-out; @@ -29,14 +29,14 @@ align-items: center; justify-content: center; cursor: pointer; - background-color: var(--canon-surface-2); - border: 1px solid var(--canon-border-base); - border-radius: var(--canon-border-radius-xs); + background-color: var(--canon-bg); + border: 1px solid var(--canon-border); + border-radius: var(--canon-radius-2); padding: 0 var(--canon-space-3); height: 28px; border-radius: 100px; margin-top: var(--canon-space-3); - font-size: var(--canon-font-size-body); + font-size: var(--canon-font-size-3); color: var(--canon-text-primary); gap: var(--canon-space-2); } diff --git a/canon-docs/src/components/IconLibrary/styles.module.css b/canon-docs/src/components/IconLibrary/styles.module.css index 40b177ced0..8cef221620 100644 --- a/canon-docs/src/components/IconLibrary/styles.module.css +++ b/canon-docs/src/components/IconLibrary/styles.module.css @@ -19,10 +19,10 @@ height: 80px; border: 1px solid #d3d3d3; border-radius: 0.5rem; - background-color: var(--canon-background); + background-color: var(--canon-bg); transition: background-color 0.2s ease-in-out; &:hover { - background-color: var(--canon-surface-1); + background-color: var(--canon-bg-elevated); } } diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css index f3bdd3f2e7..43f1681812 100644 --- a/canon-docs/src/components/Sidebar/Sidebar.module.css +++ b/canon-docs/src/components/Sidebar/Sidebar.module.css @@ -11,8 +11,8 @@ width: 300px; height: 100vh; color: var(--canon-text-primary); - background-color: var(--canon-surface-1); - border-right: 1px solid var(--canon-border-base); + background-color: var(--canon-bg-elevated); + border-right: 1px solid var(--canon-border); padding-left: 20px; padding-right: 20px; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; @@ -44,7 +44,7 @@ .sectionTitle { font-family: var(--docs-font); - font-size: var(--canon-font-size-body); + font-size: var(--canon-font-size-3); font-weight: var(--canon-font-weight-bold); padding: 12px 0; } @@ -63,23 +63,23 @@ transition: background-color 0.2s ease-in-out; &:hover { - background-color: var(--canon-surface-2); + background-color: var(--canon-bg); } } .line.active { - background-color: var(--canon-surface-2); + background-color: var(--canon-bg); } .lineTitle { font-family: var(--docs-font); - font-size: var(--canon-font-size-body); + font-size: var(--canon-font-size-3); font-weight: var(--canon-font-weight-regular); color: var(--canon-text-primary); } .lineStatus { font-family: var(--docs-font); - font-size: var(--canon-font-size-body); + font-size: var(--canon-font-size-3); color: var(--canon-text-secondary); } diff --git a/canon-docs/src/components/Snippet/styles.module.css b/canon-docs/src/components/Snippet/styles.module.css index c56627b1e1..65bdc62d05 100644 --- a/canon-docs/src/components/Snippet/styles.module.css +++ b/canon-docs/src/components/Snippet/styles.module.css @@ -6,8 +6,8 @@ .preview { border-radius: 4px; - box-shadow: inset 0 0 0 1px var(--canon-border-base); - background-color: var(--canon-background); + box-shadow: inset 0 0 0 1px var(--canon-border); + background-color: var(--canon-bg); transition: all 0.2s ease-in-out; padding: 1px; position: relative; diff --git a/canon-docs/src/components/Table/styles.module.css b/canon-docs/src/components/Table/styles.module.css index df90566eee..7ac48709eb 100644 --- a/canon-docs/src/components/Table/styles.module.css +++ b/canon-docs/src/components/Table/styles.module.css @@ -15,7 +15,7 @@ */ .wrapper { - border: 1px solid var(--canon-border-base); + border: 1px solid var(--canon-border); border-radius: 4px; overflow: hidden; margin-bottom: 1rem; @@ -33,7 +33,7 @@ padding: 12px 16px !important; border: none !important; text-align: left; - background-color: var(--canon-surface-1) !important; + background-color: var(--canon-bg-elevated) !important; font-size: 16px; transition: background-color 0.2s ease-in-out; @@ -43,14 +43,14 @@ } .tableHeaderCell { - border-bottom: 1px solid var(--canon-border-base) !important; + border-bottom: 1px solid var(--canon-border) !important; font-weight: 500; font-size: 14px; } .tableRow { border: none; - border-bottom: 1px solid var(--canon-border-base); + border-bottom: 1px solid var(--canon-border); &:last-child { border-bottom: none; } @@ -59,7 +59,7 @@ .tableChip { display: inline-block; font-size: 14px !important; - border: 1px solid var(--canon-border-base); + border: 1px solid var(--canon-border); border-radius: 6px; padding: 0px 6px; height: 24px; diff --git a/canon-docs/src/components/Tabs/styles.module.css b/canon-docs/src/components/Tabs/styles.module.css index c331316353..8d898fd727 100644 --- a/canon-docs/src/components/Tabs/styles.module.css +++ b/canon-docs/src/components/Tabs/styles.module.css @@ -5,7 +5,7 @@ .list { display: flex; gap: var(--canon-space-6); - border-bottom: 1px solid var(--canon-border-base); + border-bottom: 1px solid var(--canon-border); position: relative; margin-bottom: var(--canon-space-6); } diff --git a/canon-docs/src/components/Toolbar/nav.module.css b/canon-docs/src/components/Toolbar/nav.module.css index c16ed3d02a..90730b1403 100644 --- a/canon-docs/src/components/Toolbar/nav.module.css +++ b/canon-docs/src/components/Toolbar/nav.module.css @@ -12,7 +12,7 @@ .tabsTheme { width: 142px; border-radius: 0.375rem; - background-color: var(--canon-surface-2); + background-color: var(--canon-bg); transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } @@ -28,7 +28,7 @@ height: 60px; font-family: var(--docs-font); color: var(--canon-text-secondary); - font-size: var(--canon-font-size-body); + font-size: var(--canon-font-size-3); font-weight: var(--canon-font-weight-bold); cursor: pointer; transition: color 0.2s ease-in-out; @@ -53,7 +53,7 @@ position: absolute; inset: 0.25rem 0; border-radius: 0.25rem; - outline: 2px solid var(--canon-surface-1); + outline: 2px solid var(--canon-bg-elevated); outline-offset: -1px; } } diff --git a/canon-docs/src/components/Toolbar/styles.module.css b/canon-docs/src/components/Toolbar/styles.module.css index ff3376cfc1..3b0378a03e 100644 --- a/canon-docs/src/components/Toolbar/styles.module.css +++ b/canon-docs/src/components/Toolbar/styles.module.css @@ -4,8 +4,8 @@ left: 0; right: 0; z-index: 10; - background-color: var(--canon-surface-1); - border-bottom: 1px solid var(--canon-border-base); + background-color: var(--canon-bg-elevated); + border-bottom: 1px solid var(--canon-border); height: 60px; display: flex; align-items: center; diff --git a/canon-docs/src/components/Toolbar/theme-name.module.css b/canon-docs/src/components/Toolbar/theme-name.module.css index c9700c571b..0ae2675e31 100644 --- a/canon-docs/src/components/Toolbar/theme-name.module.css +++ b/canon-docs/src/components/Toolbar/theme-name.module.css @@ -17,7 +17,7 @@ color: var(--color-gray-900); cursor: pointer; user-select: none; - background-color: var(--canon-surface-2); + background-color: var(--canon-bg); transition: background-color 0.2s ease-in-out; &:focus-visible { @@ -31,7 +31,7 @@ } .SelectValue { - font-size: var(--canon-font-size-body); + font-size: var(--canon-font-size-3); font-weight: var(--canon-font-weight-regular); } @@ -43,9 +43,9 @@ box-sizing: border-box; padding-block: 0.25rem; border-radius: 0.375rem; - background-color: var(--canon-surface-1); + background-color: var(--canon-bg-elevated); color: var(--color-gray-900); - border: 1px solid var(--canon-border-base); + border: 1px solid var(--canon-border); padding-inline: 0.25rem; transform-origin: var(--transform-origin); transition: transform 150ms, opacity 150ms; @@ -82,7 +82,7 @@ padding-block: 0.5rem; padding-left: 0.625rem; padding-right: 1rem; - font-size: var(--canon-font-size-body); + font-size: var(--canon-font-size-3); font-weight: var(--canon-font-weight-bold); display: grid; gap: 0.5rem; @@ -104,7 +104,7 @@ z-index: 0; position: relative; color: var(--color-gray-50); - background-color: var(--canon-surface-2); + background-color: var(--canon-bg); } &[data-highlighted]::before { diff --git a/canon-docs/src/components/Toolbar/theme.module.css b/canon-docs/src/components/Toolbar/theme.module.css index 2d17ffbac2..564f5be4ca 100644 --- a/canon-docs/src/components/Toolbar/theme.module.css +++ b/canon-docs/src/components/Toolbar/theme.module.css @@ -1,14 +1,14 @@ .tabs { border-radius: 0.375rem; width: 100%; - background-color: var(--canon-surface-2); + background-color: var(--canon-bg); transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .tabsTheme { width: 100px; border-radius: 0.375rem; - background-color: var(--canon-surface-2); + background-color: var(--canon-bg); transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } @@ -57,7 +57,7 @@ position: absolute; inset: 0.25rem 0; border-radius: 0.25rem; - outline: 2px solid var(--canon-surface-1); + outline: 2px solid var(--canon-bg-elevated); outline-offset: -1px; } } @@ -76,7 +76,7 @@ width: var(--active-tab-width); height: 1.5rem; border-radius: 0.25rem; - background-color: var(--canon-surface-1); + background-color: var(--canon-bg-elevated); transition-property: translate, width, background-color; transition-duration: 200ms; transition-timing-function: ease-in-out; diff --git a/canon-docs/src/mdx-components.tsx b/canon-docs/src/mdx-components.tsx index eec8eec438..85df3315c4 100644 --- a/canon-docs/src/mdx-components.tsx +++ b/canon-docs/src/mdx-components.tsx @@ -77,11 +77,11 @@ export function useMDXComponents(components: MDXComponents): MDXComponents { diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx index 867461818b..0588d75c0a 100644 --- a/packages/canon/.storybook/preview.tsx +++ b/packages/canon/.storybook/preview.tsx @@ -85,12 +85,11 @@ const preview: Preview = { defaultTheme: 'Light', }), Story => { - document.body.style.backgroundColor = 'var(--canon-background)'; + document.body.style.backgroundColor = 'var(--canon-bg)'; const docsStoryElements = document.getElementsByClassName('docs-story'); Array.from(docsStoryElements).forEach(element => { - (element as HTMLElement).style.backgroundColor = - 'var(--canon-background)'; + (element as HTMLElement).style.backgroundColor = 'var(--canon-bg)'; }); return ( diff --git a/packages/canon/.storybook/themes/backstage.css b/packages/canon/.storybook/themes/backstage.css index 3e8cc85a56..92884fa4e7 100644 --- a/packages/canon/.storybook/themes/backstage.css +++ b/packages/canon/.storybook/themes/backstage.css @@ -54,35 +54,35 @@ [data-theme-name='legacy'][data-theme='light'] { /* Colors */ - --canon-accent: #2e77d0; - --canon-background: #f8f8f8; - --canon-surface-1: #fff; - --canon-surface-2: #f4f4f4; + --canon-bg-accent: #2e77d0; + --canon-bg: #f8f8f8; + --canon-bg-elevated: #fff; + --canon-bg: #f4f4f4; /* Text colors */ --canon-text-primary: #000; - --canon-text-primary-on-accent: #fff; + --canon-fg-accent: #fff; --canon-text-secondary: #646464; } [data-theme-name='legacy'][data-theme='dark'] { /* Colors */ - --canon-accent: #fff; - --canon-background: #000; - --canon-surface-1: #121212; - --canon-surface-2: #1a1a1a; + --canon-bg-accent: #fff; + --canon-bg: #000; + --canon-bg-elevated: #121212; + --canon-bg: #1a1a1a; /* Borders */ - --canon-border-base: rgba(255, 255, 255, 0.2); + --canon-border: rgba(255, 255, 255, 0.2); --canon-border-warning: #f50000; - --canon-border-error: #f87503; - --canon-border-selected: #25d262; + --canon-border-danger: #f87503; + --canon-border-focus: #25d262; /* States - Add more states */ - --canon-error: #f50000; + --canon-fg-danger: #f50000; /* Text colors */ --canon-text-primary: #fff; - --canon-text-primary-on-accent: #000; + --canon-fg-accent: #000; --canon-text-secondary: #b3b3b3; } diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx index d11f9fbab7..bf4b8ae5de 100644 --- a/packages/canon/src/components/Box/Box.stories.tsx +++ b/packages/canon/src/components/Box/Box.stories.tsx @@ -382,7 +382,7 @@ export const BorderRadius: Story = { export const Border: Story = { args: { style: { - background: 'var(--canon-surface-1)', + background: 'var(--canon-bg-elevated)', color: 'var(--canon-text-primary)', padding: '4px 8px', width: '80px', diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css index 2dfc2f1aa6..3456f8aa1a 100644 --- a/packages/canon/src/components/Button/styles.css +++ b/packages/canon/src/components/Button/styles.css @@ -22,16 +22,16 @@ user-select: none; font-family: var(--canon-font-regular); font-weight: var(--canon-font-weight-bold); - font-size: var(--canon-font-size-body); + font-size: var(--canon-font-size-3); padding: 0; transition: all 150ms ease; cursor: pointer; - border-radius: 8px; + border-radius: var(--canon-radius-2); } .canon-Button--variant-primary { - background-color: var(--canon-accent); - color: var(--canon-text-primary-on-accent); + background-color: var(--canon-bg-accent); + color: var(--canon-fg-accent); &:hover { background-color: transparent; @@ -42,7 +42,7 @@ .canon-Button--variant-secondary { background-color: transparent; - box-shadow: inset 0 0 0 1px var(--canon-border-base); + box-shadow: inset 0 0 0 1px var(--canon-border); color: var(--canon-text-primary); &:hover { diff --git a/packages/canon/src/components/Checkbox/styles.css b/packages/canon/src/components/Checkbox/styles.css index 9d055be24d..76e14029ca 100644 --- a/packages/canon/src/components/Checkbox/styles.css +++ b/packages/canon/src/components/Checkbox/styles.css @@ -5,13 +5,13 @@ justify-content: center; width: 1rem; height: 1rem; - box-shadow: inset 0 0 0 1px var(--canon-border-base); + box-shadow: inset 0 0 0 1px var(--canon-border); cursor: pointer; border-radius: 2px; transition: all 0.2s ease-in-out; &[data-checked] { - background-color: var(--canon-accent); + background-color: var(--canon-bg-accent); } } @@ -20,7 +20,7 @@ flex-direction: row; align-items: center; justify-content: center; - gap: var(--canon-spacing-xs); + gap: var(--canon-space-2); font-size: var(--canon-font-size-xs); font-family: var(--canon-font-regular); color: var(--canon-text-primary); @@ -37,5 +37,5 @@ display: flex; align-items: center; justify-content: center; - color: var(--canon-text-primary-on-accent); + color: var(--canon-fg-accent); } diff --git a/packages/canon/src/components/Field/Field.styles.css b/packages/canon/src/components/Field/Field.styles.css index 3412ab7b5c..317dce8143 100644 --- a/packages/canon/src/components/Field/Field.styles.css +++ b/packages/canon/src/components/Field/Field.styles.css @@ -22,14 +22,14 @@ } .canon-FieldLabel { - font-size: var(--canon-font-size-caption); + font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-text-primary); margin-bottom: var(--canon-space-1_5); } .canon-FieldDescription { - font-size: var(--canon-font-size-caption); + font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-text-secondary); margin: 0; @@ -37,15 +37,15 @@ } .canon-FieldError { - font-size: var(--canon-font-size-caption); + font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); - color: var(--canon-error); + color: var(--canon-fg-danger); margin: 0; padding-top: var(--canon-space-1_5); } .canon-FieldValidity { - font-size: var(--canon-font-size-caption); + font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-text-secondary); margin: 0; diff --git a/packages/canon/src/components/Heading/styles.css b/packages/canon/src/components/Heading/styles.css index 122d8f4925..bc121c1063 100644 --- a/packages/canon/src/components/Heading/styles.css +++ b/packages/canon/src/components/Heading/styles.css @@ -23,22 +23,22 @@ } .canon-Heading--variant-display { - font-size: var(--canon-font-size-display); + font-size: var(--canon-font-size-10); font-weight: var(--canon-font-weight-bold); } .canon-Heading--variant-title1 { - font-size: var(--canon-font-size-title1); + font-size: var(--canon-font-size-9); font-weight: var(--canon-font-weight-bold); } .canon-Heading--variant-title2 { - font-size: var(--canon-font-size-title2); + font-size: var(--canon-font-size-8); font-weight: var(--canon-font-weight-bold); } .canon-Heading--variant-title3 { - font-size: var(--canon-font-size-title3); + font-size: var(--canon-font-size-7); font-weight: var(--canon-font-weight-bold); } @@ -48,6 +48,6 @@ } .canon-Heading--variant-title5 { - font-size: var(--canon-font-size-title5); + font-size: var(--canon-font-size-5); font-weight: var(--canon-font-weight-bold); } diff --git a/packages/canon/src/components/Input/Input.styles.css b/packages/canon/src/components/Input/Input.styles.css index 6b66c0aedb..51ad1c5afe 100644 --- a/packages/canon/src/components/Input/Input.styles.css +++ b/packages/canon/src/components/Input/Input.styles.css @@ -15,11 +15,11 @@ */ .canon-Input { - border-radius: var(--canon-border-radius-sm); - border: 1px solid var(--canon-border-base); + border-radius: var(--canon-radius-3); + border: 1px solid var(--canon-border); padding: 0 var(--canon-space-4); - background-color: var(--canon-surface-1); - font-size: var(--canon-font-size-body); + background-color: var(--canon-bg-elevated); + font-size: var(--canon-font-size-3); font-weight: var(--canon-font-weight-regular); color: var(--canon-text-primary); transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out; @@ -35,13 +35,13 @@ } .canon-Input:focus-visible { - outline-color: var(--canon-border-selected); + outline-color: var(--canon-border-focus); outline-width: 0px; - border-color: var(--canon-border-selected); + border-color: var(--canon-border-focus); } .canon-Input[data-invalid] { - border-color: var(--canon-error); + border-color: var(--canon-fg-danger); } .canon-Input--size-sm { diff --git a/packages/canon/src/components/Table/styles.css b/packages/canon/src/components/Table/styles.css index 472d88fcb9..6bb470a423 100644 --- a/packages/canon/src/components/Table/styles.css +++ b/packages/canon/src/components/Table/styles.css @@ -2,11 +2,11 @@ position: relative; overflow: auto; width: 100%; - background-color: var(--canon-surface-1); - border-radius: var(--canon-border-radius-xs); + background-color: var(--canon-bg-elevated); + border-radius: var(--canon-radius-2); padding-bottom: var(--canon-space-0_5); padding-top: var(--canon-space-0_5); - font-size: var(--canon-font-size-body); + font-size: var(--canon-font-size-3); table { width: 100%; @@ -31,29 +31,29 @@ transition: color 0.2s ease-in-out; &:hover td { - background-color: var(--canon-surface-3); + background-color: var(--canon-bg-tint); } & .table-cell:first-child { - border-top-left-radius: var(--canon-border-radius-xs); - border-bottom-left-radius: var(--canon-border-radius-xs); - box-shadow: inset 4px 2px 0 0 var(--canon-surface-1), - inset 4px -2px 0 0 var(--canon-surface-1); + border-top-left-radius: var(--canon-radius-2); + border-bottom-left-radius: var(--canon-radius-2); + box-shadow: inset 4px 2px 0 0 var(--canon-bg-elevated), + inset 4px -2px 0 0 var(--canon-bg-elevated); padding-left: var(--canon-space-3); } & .table-cell:last-child { - border-top-right-radius: var(--canon-border-radius-xs); - border-bottom-right-radius: var(--canon-border-radius-xs); - box-shadow: inset -4px 2px 0 0 var(--canon-surface-1), - inset -4px -2px 0 0 var(--canon-surface-1); + border-top-right-radius: var(--canon-radius-2); + border-bottom-right-radius: var(--canon-radius-2); + box-shadow: inset -4px 2px 0 0 var(--canon-bg-elevated), + inset -4px -2px 0 0 var(--canon-bg-elevated); padding-right: var(--canon-space-3); } } .table-cell { padding: var(--canon-space-3); - background-color: var(--canon-surface-2); - box-shadow: inset 0px 2px 0 0 var(--canon-surface-1), - inset 0px -2px 0 0 var(--canon-surface-1); + background-color: var(--canon-bg); + box-shadow: inset 0px 2px 0 0 var(--canon-bg-elevated), + inset 0px -2px 0 0 var(--canon-bg-elevated); } diff --git a/packages/canon/src/components/Text/styles.css b/packages/canon/src/components/Text/styles.css index a338c6bca1..62f9d1eec0 100644 --- a/packages/canon/src/components/Text/styles.css +++ b/packages/canon/src/components/Text/styles.css @@ -22,22 +22,22 @@ } .canon-Text--variant-body { - font-size: var(--canon-font-size-body); + font-size: var(--canon-font-size-3); line-height: 140%; } .canon-Text--variant-subtitle { - font-size: var(--canon-font-size-subtitle); + font-size: var(--canon-font-size-4); line-height: 140%; } .canon-Text--variant-caption { - font-size: var(--canon-font-size-caption); + font-size: var(--canon-font-size-2); line-height: 140%; } .canon-Text--variant-label { - font-size: var(--canon-font-size-label); + font-size: var(--canon-font-size-1); line-height: 140%; } diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css index abba9f3d9c..bd03d4d906 100644 --- a/packages/canon/src/css/core.css +++ b/packages/canon/src/css/core.css @@ -31,22 +31,19 @@ --canon-font-weight-bold: 600; /* Font sizes */ - --canon-font-size-label: 0.625rem; /* 10px */ - --canon-font-size-caption: 0.75rem; /* 12px */ - --canon-font-size-body: 0.875rem; /* 14px */ - --canon-font-size-subtitle: 1rem; /* 16px */ - --canon-font-size-title5: 1.25rem; /* 20px */ - --canon-font-size-title4: 1.5rem; /* 24px */ - --canon-font-size-title3: 2rem; /* 32px */ - --canon-font-size-title2: 3rem; /* 48px */ - --canon-font-size-title1: 4rem; /* 64px */ - --canon-font-size-display: 5.75rem; /* 92px */ + --canon-font-size-1: 0.625rem; /* 10px */ + --canon-font-size-2: 0.75rem; /* 12px */ + --canon-font-size-3: 0.875rem; /* 14px */ + --canon-font-size-4: 1rem; /* 16px */ + --canon-font-size-5: 1.25rem; /* 20px */ + --canon-font-size-6: 1.5rem; /* 24px */ + --canon-font-size-7: 2rem; /* 32px */ + --canon-font-size-8: 3rem; /* 48px */ + --canon-font-size-9: 4rem; /* 64px */ + --canon-font-size-10: 5.75rem; /* 92px */ /* Spacing */ - /* This is the spacing multiplier */ - --canon-space: 0.25rem; /* 4px */ - - /* These are the spacing scale */ + --canon-space: 0.25rem; /* This is the spacing multiplier */ --canon-space-0_5: calc(var(--canon-space) * 0.5); /* 2px */ --canon-space-1: var(--canon-space); /* 4px */ --canon-space-1_5: calc(var(--canon-space) * 1.5); /* 6px */ @@ -64,58 +61,81 @@ --canon-space-13: calc(var(--canon-space) * 13); /* 52px */ --canon-space-14: calc(var(--canon-space) * 14); /* 56px */ - /* Border radius */ - --canon-border-radius-2xs: 0.125rem; /* 2px */ - --canon-border-radius-xs: 0.25rem; /* 4px */ - --canon-border-radius-sm: 0.5rem; /* 8px */ - --canon-border-radius-md: 0.75rem; /* 12px */ - --canon-border-radius-lg: 1rem; /* 16px */ - --canon-border-radius-xl: 1.25rem; /* 20px */ - --canon-border-radius-2xl: 1.5rem; /* 24px */ + /* Radius */ + --canon-radius-factor: 1.5; + --canon-radius-1: calc(3px * var(--canon-radius-factor)); + --canon-radius-2: calc(4px * var(--canon-radius-factor)); + --canon-radius-3: calc(6px * var(--canon-radius-factor)); + --canon-radius-4: calc(8px * var(--canon-radius-factor)); + --canon-radius-5: calc(12px * var(--canon-radius-factor)); + --canon-radius-6: calc(16px * var(--canon-radius-factor)); + --canon-radius-full: 9999px; /* Colors */ - --canon-accent: #000; - --canon-background: #f8f8f8; - --canon-surface-1: #fff; - --canon-surface-2: #f4f4f4; - --canon-surface-3: #f1f1f1; - - /* Borders */ - --canon-border-base: rgba(0, 0, 0, 0.1); + --canon-bg: #f8f8f8; + --canon-bg-elevated: #fff; + --canon-bg-accent: #000; + --canon-bg-accent-active: #000; + --canon-bg-accent-disabled: #000; + --canon-bg-accent-hover: #000; + --canon-bg-tint: #edf2fe; + --canon-bg-tint-active: #c7d7ff; + --canon-bg-tint-disabled: #f8f8f8; + --canon-bg-tint-hover: #dbe4ff; + --canon-bg-danger: #f8f8f8; + --canon-bg-elevated: #fff; + --canon-bg-success: #f8f8f8; + --canon-bg-warning: #f8f8f8; + --canon-border: rgba(0, 0, 0, 0.1); + --canon-border-accent: #000; + --canon-border-accent-focus: #000; + --canon-border-accent-hover: #000; + --canon-border-danger: #e22b2b; + --canon-border-focus: rgba(0, 0, 0, 0.4); --canon-border-hover: rgba(0, 0, 0, 0.2); + --canon-border-success: #008000; --canon-border-warning: #e36d05; - --canon-border-error: #e22b2b; - --canon-border-selected: rgba(0, 0, 0, 0.4); - - /* States - Add more states */ - --canon-error: #f50000; - - /* Text colors */ + --canon-fg-accent: #fff; + --canon-fg-danger: #e22b2b; + --canon-fg-success: #008000; + --canon-fg-warning: #e36d05; + --canon-text-link: #fff; + --canon-text-link-hover: #fff; --canon-text-primary: #000; - --canon-text-primary-on-accent: #fff; --canon-text-secondary: #646464; } /* Dark theme tokens */ [data-theme='dark'] { - /* Colors */ - --canon-accent: #fff; - --canon-background: #000; - --canon-surface-1: #121212; - --canon-surface-2: #1a1a1a; - - /* Borders */ - --canon-border-base: rgba(255, 255, 255, 0.2); - --canon-border-hover: rgba(255, 255, 255, 0.3); - --canon-border-warning: #f50000; - --canon-border-error: #f87503; - --canon-border-selected: rgba(255, 255, 255, 0.4); - - /* States - Add more states */ - --canon-error: #f50000; - - /* Text colors */ - --canon-text-primary: #fff; - --canon-text-primary-on-accent: #000; - --canon-text-secondary: #b3b3b3; + --canon-bg: #f8f8f8; + --canon-bg-elevated: #fff; + --canon-bg-accent: #000; + --canon-bg-accent-active: #000; + --canon-bg-accent-disabled: #000; + --canon-bg-accent-hover: #000; + --canon-bg-tint: #edf2fe; + --canon-bg-tint-active: #c7d7ff; + --canon-bg-tint-disabled: #f8f8f8; + --canon-bg-tint-hover: #dbe4ff; + --canon-bg-danger: #f8f8f8; + --canon-bg-elevated: #fff; + --canon-bg-success: #f8f8f8; + --canon-bg-warning: #f8f8f8; + --canon-border: rgba(0, 0, 0, 0.1); + --canon-border-accent: #000; + --canon-border-accent-focus: #000; + --canon-border-accent-hover: #000; + --canon-border-danger: #e22b2b; + --canon-border-focus: rgba(0, 0, 0, 0.4); + --canon-border-hover: rgba(0, 0, 0, 0.2); + --canon-border-success: #008000; + --canon-border-warning: #e36d05; + --canon-fg-accent: #000; + --canon-fg-danger: #e22b2b; + --canon-fg-success: #008000; + --canon-fg-warning: #e36d05; + --canon-text-link: #fff; + --canon-text-link-hover: #fff; + --canon-text-primary: #000; + --canon-text-secondary: #646464; } diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css index bbf51c3af6..0252fefaf7 100644 --- a/packages/canon/src/css/utilities/2xl.css +++ b/packages/canon/src/css/utilities/2xl.css @@ -21,13 +21,13 @@ } .cu-2xl-border-base { - border-color: var(--canon-border-base); + border-color: var(--canon-border); border-width: 1px; border-style: solid; } .cu-2xl-border-error { - border-color: var(--canon-border-error); + border-color: var(--canon-border-danger); border-width: 1px; border-style: solid; } @@ -38,7 +38,7 @@ } .cu-2xl-border-selected { - border-color: var(--canon-border-selected); + border-color: var(--canon-border-focus); border-width: 1px; border-style: solid; } @@ -854,19 +854,19 @@ } .cu-2xl-rounded-2xl { - border-radius: var(--canon-border-radius-2xl); + border-radius: var(--canon-radius-full); } .cu-2xl-rounded-2xs { - border-radius: var(--canon-border-radius-2xs); + border-radius: var(--canon-radius-1); } .cu-2xl-rounded-lg { - border-radius: var(--canon-border-radius-lg); + border-radius: var(--canon-radius-5); } .cu-2xl-rounded-md { - border-radius: var(--canon-border-radius-md); + border-radius: var(--canon-radius-4); } .cu-2xl-rounded-none { @@ -874,15 +874,15 @@ } .cu-2xl-rounded-sm { - border-radius: var(--canon-border-radius-sm); + border-radius: var(--canon-radius-3); } .cu-2xl-rounded-xl { - border-radius: var(--canon-border-radius-xl); + border-radius: var(--canon-radius-6); } .cu-2xl-rounded-xs { - border-radius: var(--canon-border-radius-xs); + border-radius: var(--canon-radius-2); } .cu-2xl-row-span-1 { diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css index e2bb93a355..a69dae1df3 100644 --- a/packages/canon/src/css/utilities/lg.css +++ b/packages/canon/src/css/utilities/lg.css @@ -21,13 +21,13 @@ } .cu-lg-border-base { - border-color: var(--canon-border-base); + border-color: var(--canon-border); border-width: 1px; border-style: solid; } .cu-lg-border-error { - border-color: var(--canon-border-error); + border-color: var(--canon-border-danger); border-width: 1px; border-style: solid; } @@ -38,7 +38,7 @@ } .cu-lg-border-selected { - border-color: var(--canon-border-selected); + border-color: var(--canon-border-focus); border-width: 1px; border-style: solid; } @@ -854,19 +854,19 @@ } .cu-lg-rounded-2xl { - border-radius: var(--canon-border-radius-2xl); + border-radius: var(--canon-radius-full); } .cu-lg-rounded-2xs { - border-radius: var(--canon-border-radius-2xs); + border-radius: var(--canon-radius-1); } .cu-lg-rounded-lg { - border-radius: var(--canon-border-radius-lg); + border-radius: var(--canon-radius-5); } .cu-lg-rounded-md { - border-radius: var(--canon-border-radius-md); + border-radius: var(--canon-radius-4); } .cu-lg-rounded-none { @@ -874,15 +874,15 @@ } .cu-lg-rounded-sm { - border-radius: var(--canon-border-radius-sm); + border-radius: var(--canon-radius-3); } .cu-lg-rounded-xl { - border-radius: var(--canon-border-radius-xl); + border-radius: var(--canon-radius-6); } .cu-lg-rounded-xs { - border-radius: var(--canon-border-radius-xs); + border-radius: var(--canon-radius-2); } .cu-lg-row-span-1 { diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css index 19842e2eab..2230865466 100644 --- a/packages/canon/src/css/utilities/md.css +++ b/packages/canon/src/css/utilities/md.css @@ -21,13 +21,13 @@ } .cu-md-border-base { - border-color: var(--canon-border-base); + border-color: var(--canon-border); border-width: 1px; border-style: solid; } .cu-md-border-error { - border-color: var(--canon-border-error); + border-color: var(--canon-border-danger); border-width: 1px; border-style: solid; } @@ -38,7 +38,7 @@ } .cu-md-border-selected { - border-color: var(--canon-border-selected); + border-color: var(--canon-border-focus); border-width: 1px; border-style: solid; } @@ -854,19 +854,19 @@ } .cu-md-rounded-2xl { - border-radius: var(--canon-border-radius-2xl); + border-radius: var(--canon-radius-full); } .cu-md-rounded-2xs { - border-radius: var(--canon-border-radius-2xs); + border-radius: var(--canon-radius-1); } .cu-md-rounded-lg { - border-radius: var(--canon-border-radius-lg); + border-radius: var(--canon-radius-5); } .cu-md-rounded-md { - border-radius: var(--canon-border-radius-md); + border-radius: var(--canon-radius-4); } .cu-md-rounded-none { @@ -874,15 +874,15 @@ } .cu-md-rounded-sm { - border-radius: var(--canon-border-radius-sm); + border-radius: var(--canon-radius-3); } .cu-md-rounded-xl { - border-radius: var(--canon-border-radius-xl); + border-radius: var(--canon-radius-6); } .cu-md-rounded-xs { - border-radius: var(--canon-border-radius-xs); + border-radius: var(--canon-radius-2); } .cu-md-row-span-1 { diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css index 7a4e9a0cc7..c8fe35cb42 100644 --- a/packages/canon/src/css/utilities/sm.css +++ b/packages/canon/src/css/utilities/sm.css @@ -21,13 +21,13 @@ } .cu-sm-border-base { - border-color: var(--canon-border-base); + border-color: var(--canon-border); border-width: 1px; border-style: solid; } .cu-sm-border-error { - border-color: var(--canon-border-error); + border-color: var(--canon-border-danger); border-width: 1px; border-style: solid; } @@ -38,7 +38,7 @@ } .cu-sm-border-selected { - border-color: var(--canon-border-selected); + border-color: var(--canon-border-focus); border-width: 1px; border-style: solid; } @@ -854,19 +854,19 @@ } .cu-sm-rounded-2xl { - border-radius: var(--canon-border-radius-2xl); + border-radius: var(--canon-radius-full); } .cu-sm-rounded-2xs { - border-radius: var(--canon-border-radius-2xs); + border-radius: var(--canon-radius-1); } .cu-sm-rounded-lg { - border-radius: var(--canon-border-radius-lg); + border-radius: var(--canon-radius-5); } .cu-sm-rounded-md { - border-radius: var(--canon-border-radius-md); + border-radius: var(--canon-radius-4); } .cu-sm-rounded-none { @@ -874,15 +874,15 @@ } .cu-sm-rounded-sm { - border-radius: var(--canon-border-radius-sm); + border-radius: var(--canon-radius-3); } .cu-sm-rounded-xl { - border-radius: var(--canon-border-radius-xl); + border-radius: var(--canon-radius-6); } .cu-sm-rounded-xs { - border-radius: var(--canon-border-radius-xs); + border-radius: var(--canon-radius-2); } .cu-sm-row-span-1 { diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css index b4d0b3b3d3..218bd37217 100644 --- a/packages/canon/src/css/utilities/xl.css +++ b/packages/canon/src/css/utilities/xl.css @@ -21,13 +21,13 @@ } .cu-xl-border-base { - border-color: var(--canon-border-base); + border-color: var(--canon-border); border-width: 1px; border-style: solid; } .cu-xl-border-error { - border-color: var(--canon-border-error); + border-color: var(--canon-border-danger); border-width: 1px; border-style: solid; } @@ -38,7 +38,7 @@ } .cu-xl-border-selected { - border-color: var(--canon-border-selected); + border-color: var(--canon-border-focus); border-width: 1px; border-style: solid; } @@ -854,19 +854,19 @@ } .cu-xl-rounded-2xl { - border-radius: var(--canon-border-radius-2xl); + border-radius: var(--canon-radius-full); } .cu-xl-rounded-2xs { - border-radius: var(--canon-border-radius-2xs); + border-radius: var(--canon-radius-1); } .cu-xl-rounded-lg { - border-radius: var(--canon-border-radius-lg); + border-radius: var(--canon-radius-5); } .cu-xl-rounded-md { - border-radius: var(--canon-border-radius-md); + border-radius: var(--canon-radius-4); } .cu-xl-rounded-none { @@ -874,15 +874,15 @@ } .cu-xl-rounded-sm { - border-radius: var(--canon-border-radius-sm); + border-radius: var(--canon-radius-3); } .cu-xl-rounded-xl { - border-radius: var(--canon-border-radius-xl); + border-radius: var(--canon-radius-6); } .cu-xl-rounded-xs { - border-radius: var(--canon-border-radius-xs); + border-radius: var(--canon-radius-2); } .cu-xl-row-span-1 { diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css index 37a56a54c4..fa64c1d624 100644 --- a/packages/canon/src/css/utilities/xs.css +++ b/packages/canon/src/css/utilities/xs.css @@ -20,13 +20,13 @@ } .cu-border-base { - border-color: var(--canon-border-base); + border-color: var(--canon-border); border-width: 1px; border-style: solid; } .cu-border-error { - border-color: var(--canon-border-error); + border-color: var(--canon-border-danger); border-width: 1px; border-style: solid; } @@ -37,7 +37,7 @@ } .cu-border-selected { - border-color: var(--canon-border-selected); + border-color: var(--canon-border-focus); border-width: 1px; border-style: solid; } @@ -853,19 +853,19 @@ } .cu-rounded-2xl { - border-radius: var(--canon-border-radius-2xl); + border-radius: var(--canon-radius-full); } .cu-rounded-2xs { - border-radius: var(--canon-border-radius-2xs); + border-radius: var(--canon-radius-1); } .cu-rounded-lg { - border-radius: var(--canon-border-radius-lg); + border-radius: var(--canon-radius-5); } .cu-rounded-md { - border-radius: var(--canon-border-radius-md); + border-radius: var(--canon-radius-4); } .cu-rounded-none { @@ -873,15 +873,15 @@ } .cu-rounded-sm { - border-radius: var(--canon-border-radius-sm); + border-radius: var(--canon-radius-3); } .cu-rounded-xl { - border-radius: var(--canon-border-radius-xl); + border-radius: var(--canon-radius-6); } .cu-rounded-xs { - border-radius: var(--canon-border-radius-xs); + border-radius: var(--canon-radius-2); } .cu-row-span-1 {