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

Update global CSS tokens

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-01-20 14:28:51 +00:00
parent 47e429861d
commit c1b646a824
34 changed files with 264 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files
canon-docs/src/app/(docs)/theme/theming/page.mdx
+9 -9
View File
@@ -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.
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>--canon-accent</Chip>
<Chip head>--canon-bg-accent</Chip>
</Table.Cell>
<Table.Cell>The accent color for the theme.</Table.Cell>
</Table.Row>
@@ -85,13 +85,13 @@ application to match your brand.
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-surface-1</Chip>
<Chip head>--canon-bg-elevated</Chip>
</Table.Cell>
<Table.Cell>The first surface color for the theme.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-surface-2</Chip>
<Chip head>--canon-bg</Chip>
</Table.Cell>
<Table.Cell>The second surface color for the theme.</Table.Cell>
</Table.Row>
canon-docs/src/app/(playground)/playground/styles.module.css
+2 -2
View File
@@ -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;
}
canon-docs/src/app/globals.css
+3 -3
View File
@@ -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;
}
canon-docs/src/components/CodeBlock/styles.module.css
+2 -2
View File
@@ -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);
canon-docs/src/components/CustomTheme/customTheme.tsx
+2 -2
View File
@@ -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',
canon-docs/src/components/CustomTheme/styles.module.css
+5 -5
View File
@@ -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;
canon-docs/src/components/HeadlessBanners/styles.module.css
+7 -7
View File
@@ -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);
}
canon-docs/src/components/IconLibrary/styles.module.css
+2 -2
View File
@@ -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);
}
}
canon-docs/src/components/Sidebar/Sidebar.module.css
+7 -7
View File
@@ -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);
}
canon-docs/src/components/Snippet/styles.module.css
+2 -2
View File
@@ -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;
canon-docs/src/components/Table/styles.module.css
+5 -5
View File
@@ -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;
canon-docs/src/components/Tabs/styles.module.css
+1 -1
View File
@@ -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);
}
canon-docs/src/components/Toolbar/nav.module.css
+3 -3
View File
@@ -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;
}
}
canon-docs/src/components/Toolbar/styles.module.css
+2 -2
View File
@@ -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;
canon-docs/src/components/Toolbar/theme-name.module.css
+6 -6
View File
@@ -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 {
canon-docs/src/components/Toolbar/theme.module.css
+4 -4
View File
@@ -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;
canon-docs/src/mdx-components.tsx
+2 -2
View File
@@ -77,11 +77,11 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
<code
style={{
fontFamily: 'var(--canon-font-monospace)',
backgroundColor: 'var(--canon-surface-1)',
backgroundColor: 'var(--canon-bg-elevated)',
padding: '0.2rem 0.375rem',
borderRadius: '0.25rem',
color: 'var(--canon-text-secondary)',
border: '1px solid var(--canon-border-base)',
border: '1px solid var(--canon-border)',
fontSize: '0.875rem',
}}
>
packages/canon/.storybook/preview.tsx
+2 -3
View File
@@ -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 (
packages/canon/.storybook/themes/backstage.css
+14 -14
View File
@@ -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;
}
packages/canon/src/components/Box/Box.stories.tsx
+1 -1
View File
@@ -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',
packages/canon/src/components/Button/styles.css
+5 -5
View File
@@ -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 {
packages/canon/src/components/Checkbox/styles.css
+4 -4
View File
@@ -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);
}
packages/canon/src/components/Field/Field.styles.css
+5 -5
View File
@@ -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;
packages/canon/src/components/Heading/styles.css
+5 -5
View File
@@ -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);
}
packages/canon/src/components/Input/Input.styles.css
+7 -7
View File
@@ -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 {
packages/canon/src/components/Table/styles.css
+15 -15
View File
@@ -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);
}
packages/canon/src/components/Text/styles.css
+4 -4
View File
@@ -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%;
}
packages/canon/src/css/core.css
+78 -58
View File
@@ -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;
}
packages/canon/src/css/utilities/2xl.css
+10 -10
View File
@@ -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 {
packages/canon/src/css/utilities/lg.css
+10 -10
View File
@@ -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 {
packages/canon/src/css/utilities/md.css
+10 -10
View File
@@ -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 {
packages/canon/src/css/utilities/sm.css
+10 -10
View File
@@ -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 {
packages/canon/src/css/utilities/xl.css
+10 -10
View File
@@ -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 {
packages/canon/src/css/utilities/xs.css
+10 -10
View File
@@ -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 {