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

Merge pull request #28591 from backstage/canon-docs-updates

Browse Source 
Canon - Update docs + css variables
This commit is contained in:
Charles de Dreuille
2025-01-24 15:22:10 +00:00
committed by GitHub
parent 84b3450850 a2c1ed1e3d
commit 78aff31f0d
31 changed files with 553 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/.storybook/themes/backstage.css
+4 -4
View File
@@ -60,9 +60,9 @@
--canon-bg: #f4f4f4;
/* Text colors */
--canon-text-primary: #000;
--canon-fg-text-primary: #000;
--canon-fg-accent: #fff;
--canon-text-secondary: #646464;
--canon-fg-text-secondary: #646464;
}
[data-theme-name='legacy'][data-theme='dark'] {
@@ -82,7 +82,7 @@
--canon-fg-danger: #f50000;
/* Text colors */
--canon-text-primary: #fff;
--canon-fg-text-primary: #fff;
--canon-fg-accent: #000;
--canon-text-secondary: #b3b3b3;
--canon-fg-text-secondary: #b3b3b3;
}
packages/canon/src/components/Box/Box.stories.tsx
+1 -1
View File
@@ -383,7 +383,7 @@ export const Border: Story = {
args: {
style: {
background: 'var(--canon-bg-elevated)',
color: 'var(--canon-text-primary)',
color: 'var(--canon-fg-text-primary)',
padding: '4px 8px',
width: '80px',
height: '32px',
packages/canon/src/components/Box/styles.css
+1 -1
View File
@@ -1,4 +1,4 @@
.canon-Box {
font-family: var(--canon-font-regular);
color: var(--canon-text-primary);
color: var(--canon-fg-text-primary);
}
packages/canon/src/components/Button/styles.css
+4 -4
View File
@@ -36,14 +36,14 @@
&:hover {
background-color: transparent;
box-shadow: inset 0 0 0 1px var(--canon-border-focus);
color: var(--canon-text-primary);
color: var(--canon-fg-text-primary);
}
}
.canon-Button--variant-secondary {
background-color: transparent;
box-shadow: inset 0 0 0 1px var(--canon-border);
color: var(--canon-text-primary);
color: var(--canon-fg-text-primary);
&:hover {
box-shadow: inset 0 0 0 1px var(--canon-border-hover);
@@ -52,10 +52,10 @@
.canon-Button--variant-tertiary {
background-color: transparent;
color: var(--canon-text-primary);
color: var(--canon-fg-text-primary);
&:hover {
color: var(--canon-text-secondary);
color: var(--canon-fg-text-secondary);
}
}
packages/canon/src/components/Checkbox/styles.css
+1 -1
View File
@@ -23,7 +23,7 @@
gap: var(--canon-space-2);
font-size: var(--canon-font-size-xs);
font-family: var(--canon-font-regular);
color: var(--canon-text-primary);
color: var(--canon-fg-text-primary);
user-select: none;
&:hover {
packages/canon/src/components/Field/Field.styles.css
+3 -3
View File
@@ -24,14 +24,14 @@
.canon-FieldLabel {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-text-primary);
color: var(--canon-fg-text-primary);
margin-bottom: var(--canon-space-1_5);
}
.canon-FieldDescription {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-text-secondary);
color: var(--canon-fg-text-secondary);
margin: 0;
padding-top: var(--canon-space-1_5);
}
@@ -47,7 +47,7 @@
.canon-FieldValidity {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-text-secondary);
color: var(--canon-fg-text-secondary);
margin: 0;
padding-top: var(--canon-space-1_5);
}
packages/canon/src/components/Heading/styles.css
+1 -1
View File
@@ -16,7 +16,7 @@
.canon-Heading {
font-family: var(--canon-font-regular);
color: var(--canon-text-primary);
color: var(--canon-fg-text-primary);
line-height: 100%;
padding: 0;
margin: 0;
packages/canon/src/components/Input/Input.styles.css
+2 -2
View File
@@ -21,13 +21,13 @@
background-color: var(--canon-bg-elevated);
font-size: var(--canon-font-size-3);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-text-primary);
color: var(--canon-fg-text-primary);
transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
width: 100%;
}
.canon-Input::placeholder {
color: var(--canon-text-secondary);
color: var(--canon-fg-text-secondary);
}
.canon-Input:hover {
packages/canon/src/components/Text/styles.css
+1 -1
View File
@@ -16,7 +16,7 @@
.canon-Text {
font-family: var(--canon-font-regular);
color: var(--canon-text-primary);
color: var(--canon-fg-text-primary);
padding: 0;
margin: 0;
}
packages/canon/src/css/core.css
+12 -11
View File
@@ -75,7 +75,7 @@
--canon-bg: #f8f8f8;
--canon-bg-elevated: #fff;
--canon-bg-accent: #000;
--canon-bg-accent-active: #000;
--canon-bg-accent-focus: #000;
--canon-bg-accent-disabled: #000;
--canon-bg-accent-hover: #000;
--canon-bg-tint: #edf2fe;
@@ -95,14 +95,15 @@
--canon-border-hover: rgba(0, 0, 0, 0.2);
--canon-border-success: #008000;
--canon-border-warning: #e36d05;
--canon-fg-text-primary: #000;
--canon-fg-text-secondary: #646464;
--canon-fg-link: #fff;
--canon-fg-link-hover: #fff;
--canon-fg-accent: #fff;
--canon-fg-tint: #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;
--canon-fg-success: #008000;
}
/* Dark theme tokens */
@@ -110,7 +111,7 @@
--canon-bg: #f8f8f8;
--canon-bg-elevated: #fff;
--canon-bg-accent: #000;
--canon-bg-accent-active: #000;
--canon-bg-accent-focus: #000;
--canon-bg-accent-disabled: #000;
--canon-bg-accent-hover: #000;
--canon-bg-tint: #edf2fe;
@@ -134,8 +135,8 @@
--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;
--canon-fg-link: #fff;
--canon-fg-link-hover: #fff;
--canon-fg-text-primary: #000;
--canon-fg-text-secondary: #646464;
}