paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 48 Packages Projects Releases Wiki Activity

Move from elevated to surface 1 and 2

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-03-13 10:55:12 +00:00
parent cb7e99d914
commit 8d72bb6319
7 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
canon-docs/src/app/(docs)/theme/theming/page.mdx
+6 -6
View File
@@ -53,7 +53,7 @@ color of your app.
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-bg-elevated</Chip>
<Chip head>--canon-bg-surface-1</Chip>
</Table.Cell>
<Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
</Table.Row>
@@ -189,7 +189,7 @@ are prefixed with `fg` to make it easier to identify.
<Chip head>--canon-fg-primary</Chip>
</Table.Cell>
<Table.Cell>
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`.
</Table.Cell>
</Table.Row>
<Table.Row>
@@ -197,7 +197,7 @@ are prefixed with `fg` to make it easier to identify.
<Chip head>--canon-fg-secondary</Chip>
</Table.Cell>
<Table.Cell>
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`.
</Table.Cell>
</Table.Row>
<Table.Row>
@@ -205,7 +205,7 @@ are prefixed with `fg` to make it easier to identify.
<Chip head>--canon-fg-link</Chip>
</Table.Cell>
<Table.Cell>
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`.
</Table.Cell>
</Table.Row>
<Table.Row>
@@ -213,7 +213,7 @@ are prefixed with `fg` to make it easier to identify.
<Chip head>--canon-fg-link-hover</Chip>
</Table.Cell>
<Table.Cell>
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`.
</Table.Cell>
</Table.Row>
<Table.Row>
@@ -267,7 +267,7 @@ low contrast to help as a separator with the different background colors.
<Chip head>--canon-border</Chip>
</Table.Cell>
<Table.Cell>
It should be used on top of `--canon-bg-elevated`.
It should be used on top of `--canon-bg-surface-1`.
</Table.Cell>
</Table.Row>
<Table.Row>
canon-docs/src/components/CustomTheme/customTheme.tsx
+1 -1
View File
@@ -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',
canon-docs/src/snippets/_snippets.ts
+2 -2
View File
@@ -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 */
packages/canon/src/components/Button/styles.css
+1 -1
View File
@@ -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;
packages/canon/src/components/Input/Input.styles.css
+1 -1
View File
@@ -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);
packages/canon/src/components/Table/styles.css
+7 -7
View File
@@ -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);
}
packages/canon/src/css/core.css
+4 -2
View File
@@ -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;