From 8d72bb631900639dfb6e46d8ebf5501b6e5d26ab Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 13 Mar 2025 10:55:12 +0000 Subject: [PATCH] Move from elevated to surface 1 and 2 Signed-off-by: Charles de Dreuille --- canon-docs/src/app/(docs)/theme/theming/page.mdx | 12 ++++++------ .../src/components/CustomTheme/customTheme.tsx | 2 +- canon-docs/src/snippets/_snippets.ts | 4 ++-- packages/canon/src/components/Button/styles.css | 2 +- .../canon/src/components/Input/Input.styles.css | 2 +- packages/canon/src/components/Table/styles.css | 14 +++++++------- packages/canon/src/css/core.css | 6 ++++-- 7 files changed, 22 insertions(+), 20 deletions(-) diff --git a/canon-docs/src/app/(docs)/theme/theming/page.mdx b/canon-docs/src/app/(docs)/theme/theming/page.mdx index 6ecc2cba58..cab9480a14 100644 --- a/canon-docs/src/app/(docs)/theme/theming/page.mdx +++ b/canon-docs/src/app/(docs)/theme/theming/page.mdx @@ -53,7 +53,7 @@ color of your app. - --canon-bg-elevated + --canon-bg-surface-1 Use for any panels or elevated surfaces. @@ -189,7 +189,7 @@ are prefixed with `fg` to make it easier to identify. --canon-fg-primary - It should be used on top of `--canon-bg-app` or `--canon-bg-elevated`. + It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`. @@ -197,7 +197,7 @@ are prefixed with `fg` to make it easier to identify. --canon-fg-secondary - It should be used on top of `--canon-bg-app` or `--canon-bg-elevated`. + It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`. @@ -205,7 +205,7 @@ are prefixed with `fg` to make it easier to identify. --canon-fg-link - It should be used on top of `--canon-bg-app` or `--canon-bg-elevated`. + It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`. @@ -213,7 +213,7 @@ are prefixed with `fg` to make it easier to identify. --canon-fg-link-hover - It should be used on top of `--canon-bg-app` or `--canon-bg-elevated`. + It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`. @@ -267,7 +267,7 @@ low contrast to help as a separator with the different background colors. --canon-border - It should be used on top of `--canon-bg-elevated`. + It should be used on top of `--canon-bg-surface-1`. diff --git a/canon-docs/src/components/CustomTheme/customTheme.tsx b/canon-docs/src/components/CustomTheme/customTheme.tsx index 174a8d0b24..e8628b83ff 100644 --- a/canon-docs/src/components/CustomTheme/customTheme.tsx +++ b/canon-docs/src/components/CustomTheme/customTheme.tsx @@ -17,7 +17,7 @@ const defaultTheme = `:root { const myTheme = createTheme({ theme: 'light', settings: { - background: 'var(--canon-bg-elevated)', + background: 'var(--canon-bg-surface-1)', backgroundImage: '', foreground: '#6182B8', caret: '#5d00ff', diff --git a/canon-docs/src/snippets/_snippets.ts b/canon-docs/src/snippets/_snippets.ts index ad777c48cf..75ff5056f4 100644 --- a/canon-docs/src/snippets/_snippets.ts +++ b/canon-docs/src/snippets/_snippets.ts @@ -5,7 +5,7 @@ export const customTheme = `:root { --canon-font-weight-regular: 400; --canon-font-weight-bold: 600; --canon-bg: #f8f8f8; - --canon-bg-elevated: #fff; + --canon-bg-surface-1: #fff; /* ... other CSS variables */ /* Add your custom components styles here */ @@ -20,7 +20,7 @@ export const customTheme = `:root { --canon-font-weight-regular: 400; --canon-font-weight-bold: 600; --canon-bg: #f8f8f8; - --canon-bg-elevated: #fff; + --canon-bg-surface-1: #fff; /* ... other CSS variables */ /* Add your custom components styles here */ diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css index 0572028e96..b5d6e1dca0 100644 --- a/packages/canon/src/components/Button/styles.css +++ b/packages/canon/src/components/Button/styles.css @@ -57,7 +57,7 @@ } .canon-Button--variant-secondary { - background-color: var(--canon-bg-elevated); + background-color: var(--canon-bg-surface-1); box-shadow: inset 0 0 0 1px var(--canon-border); color: var(--canon-fg-primary); transition: box-shadow 150ms ease; diff --git a/packages/canon/src/components/Input/Input.styles.css b/packages/canon/src/components/Input/Input.styles.css index 4e3e6771ab..0ff108008d 100644 --- a/packages/canon/src/components/Input/Input.styles.css +++ b/packages/canon/src/components/Input/Input.styles.css @@ -18,7 +18,7 @@ border-radius: var(--canon-radius-3); border: 1px solid var(--canon-border); padding: 0 var(--canon-space-4); - background-color: var(--canon-bg-elevated); + background-color: var(--canon-bg-surface-1); font-size: var(--canon-font-size-3); font-family: var(--canon-font-regular); font-weight: var(--canon-font-weight-regular); diff --git a/packages/canon/src/components/Table/styles.css b/packages/canon/src/components/Table/styles.css index b834485ff5..7d3cb35e3d 100644 --- a/packages/canon/src/components/Table/styles.css +++ b/packages/canon/src/components/Table/styles.css @@ -2,7 +2,7 @@ position: relative; overflow: auto; width: 100%; - background-color: var(--canon-bg-elevated); + background-color: var(--canon-bg-surface-1); border-radius: var(--canon-radius-2); padding-bottom: var(--canon-space-0_5); padding-top: var(--canon-space-0_5); @@ -39,16 +39,16 @@ & .table-cell:first-child { 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); + box-shadow: inset 4px 2px 0 0 var(--canon-bg-surface-1), + inset 4px -2px 0 0 var(--canon-bg-surface-1); padding-left: var(--canon-space-3); } & .table-cell:last-child { 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); + box-shadow: inset -4px 2px 0 0 var(--canon-bg-surface-1), + inset -4px -2px 0 0 var(--canon-bg-surface-1); padding-right: var(--canon-space-3); } } @@ -56,6 +56,6 @@ .table-cell { padding: var(--canon-space-3); 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); + box-shadow: inset 0px 2px 0 0 var(--canon-bg-surface-1), + inset 0px -2px 0 0 var(--canon-bg-surface-1); } diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css index e1b3baf0ca..8c7863953a 100644 --- a/packages/canon/src/css/core.css +++ b/packages/canon/src/css/core.css @@ -72,7 +72,8 @@ /* Background Colors */ --canon-bg: #f8f8f8; - --canon-bg-elevated: #fff; + --canon-bg-surface-1: #fff; + --canon-bg-surface-2: #ececec; --canon-bg-solid: #1f5493; --canon-bg-solid-hover: #163a66; --canon-bg-solid-pressed: #0f2b4e; @@ -116,7 +117,8 @@ [data-theme='dark'] { /* Background Colors */ --canon-bg: #000000; - --canon-bg-elevated: #191919; + --canon-bg-surface-1: #191919; + --canon-bg-surface-2: #242424; --canon-bg-solid: #9cc9ff; --canon-bg-solid-hover: #83b9fd; --canon-bg-solid-pressed: #83b9fd;