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

Update text tokens

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-01-24 15:06:49 +00:00
parent d324627252
commit a2c1ed1e3d
22 changed files with 50 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
canon-docs/src/app/(docs)/theme/theming/page.mdx
+2 -2
View File
@@ -186,7 +186,7 @@ are prefixed with `fg` to make it easier to identify.
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>--canon-fg-primary</Chip>
<Chip head>--canon-fg-text-primary</Chip>
</Table.Cell>
<Table.Cell>
It should be used on top of `--canon-bg-app` or `--canon-bg-elevated`.
@@ -194,7 +194,7 @@ are prefixed with `fg` to make it easier to identify.
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-fg-secondary</Chip>
<Chip head>--canon-fg-text-secondary</Chip>
</Table.Cell>
<Table.Cell>
It should be used on top of `--canon-bg-app` or `--canon-bg-elevated`.
canon-docs/src/app/globals.css
+1 -1
View File
@@ -2,7 +2,7 @@ body {
display: flex;
flex-direction: row;
background-color: var(--canon-bg);
color: var(--canon-fg-primary);
color: var(--canon-fg-text-primary);
transition: background-color 0.2s ease-in-out;
--docs-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
canon-docs/src/app/page.module.css
+1 -1
View File
@@ -17,7 +17,7 @@
}
.page p {
color: var(--canon-fg-primary);
color: var(--canon-fg-text-primary);
font-size: 1rem;
line-height: 1.5rem;
margin-top: 0;
canon-docs/src/components/CodeBlock/styles.module.css
+1 -1
View File
@@ -18,7 +18,7 @@
border-bottom: 1px solid var(--canon-border);
padding: 12px 20px;
font-size: 0.875rem;
color: var(--canon-fg-secondary);
color: var(--canon-fg-text-secondary);
}
.code {
canon-docs/src/components/CustomTheme/styles.module.css
+1 -1
View File
@@ -66,7 +66,7 @@
padding: 0 8px;
color: #fff;
background-color: var(--canon-bg);
color: var(--canon-fg-primary);
color: var(--canon-fg-text-primary);
transition: background-color 0.2s ease-in-out;
border-radius: 0.25rem;
cursor: pointer;
canon-docs/src/components/HeadlessBanners/styles.module.css
+2 -2
View File
@@ -10,7 +10,7 @@
}
.icon path {
fill: var(--canon-fg-primary);
fill: var(--canon-fg-text-primary);
}
.content {
@@ -37,6 +37,6 @@
border-radius: 100px;
margin-top: var(--canon-space-3);
font-size: var(--canon-font-size-3);
color: var(--canon-fg-primary);
color: var(--canon-fg-text-primary);
gap: var(--canon-space-2);
}
canon-docs/src/components/Sidebar/Sidebar.module.css
+4 -4
View File
@@ -10,7 +10,7 @@
left: 0;
width: 300px;
height: 100vh;
color: var(--canon-fg-primary);
color: var(--canon-fg-text-primary);
background-color: var(--canon-bg-elevated);
border-right: 1px solid var(--canon-border);
padding-left: 20px;
@@ -26,7 +26,7 @@
}
.logo path {
fill: var(--canon-fg-primary);
fill: var(--canon-fg-text-primary);
}
.menu {
@@ -75,11 +75,11 @@
font-family: var(--docs-font);
font-size: var(--canon-font-size-3);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-primary);
color: var(--canon-fg-text-primary);
}
.lineStatus {
font-family: var(--docs-font);
font-size: var(--canon-font-size-3);
color: var(--canon-fg-secondary);
color: var(--canon-fg-text-secondary);
}
canon-docs/src/components/Tabs/parts.tsx
+2 -2
View File
@@ -34,8 +34,8 @@ export const Tab = (props: React.ComponentProps<typeof TabsPrimitive.Tab>) => (
{...rest}
style={{
color: state.selected
? 'var(--canon-fg-primary)'
: 'var(--canon-fg-secondary)',
? 'var(--canon-fg-text-primary)'
: 'var(--canon-fg-text-secondary)',
}}
>
{children}
canon-docs/src/components/Tabs/styles.module.css
+1 -1
View File
@@ -22,6 +22,6 @@
left: var(--active-tab-left);
width: var(--active-tab-width);
height: 1px;
background-color: var(--canon-fg-primary);
background-color: var(--canon-fg-text-primary);
transition: all 0.2s ease-in-out;
}
canon-docs/src/components/Toolbar/nav.module.css
+6 -6
View File
@@ -27,21 +27,21 @@
all: unset;
height: 60px;
font-family: var(--docs-font);
color: var(--canon-fg-secondary);
color: var(--canon-fg-text-secondary);
font-size: var(--canon-font-size-3);
font-weight: var(--canon-font-weight-bold);
cursor: pointer;
transition: color 0.2s ease-in-out;
&:hover {
color: var(--canon-fg-primary);
color: var(--canon-fg-text-primary);
}
&[data-selected] {
color: var(--canon-fg-primary);
color: var(--canon-fg-text-primary);
& p {
color: var(--canon-fg-primary);
color: var(--canon-fg-text-primary);
}
}
@@ -60,7 +60,7 @@
}
.tab p {
color: var(--canon-fg-secondary) !important;
color: var(--canon-fg-text-secondary) !important;
}
.indicator {
@@ -72,7 +72,7 @@
width: var(--active-tab-width);
height: 1px;
border-radius: 0.25rem;
background-color: var(--canon-fg-primary);
background-color: var(--canon-fg-text-primary);
transition-property: translate, width, background-color;
transition-duration: 200ms;
transition-timing-function: ease-in-out;
canon-docs/src/components/Toolbar/theme.module.css
+5 -5
View File
@@ -29,23 +29,23 @@
outline: 0;
background: none;
appearance: none;
color: var(--canon-fg-secondary);
color: var(--canon-fg-text-secondary);
user-select: none;
height: 2rem;
flex: 1;
cursor: pointer;
&[data-selected] {
color: var(--canon-fg-primary);
color: var(--canon-fg-text-primary);
& p {
color: var(--canon-fg-primary);
color: var(--canon-fg-text-primary);
}
}
@media (hover: hover) {
&:hover {
color: var(--canon-fg-primary);
color: var(--canon-fg-text-primary);
}
}
@@ -64,7 +64,7 @@
}
.tab p {
color: var(--canon-fg-secondary) !important;
color: var(--canon-fg-text-secondary) !important;
}
.indicator {
canon-docs/src/mdx-components.tsx
+2 -2
View File
@@ -62,7 +62,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
</p>
),
a: ({ children, href }) => (
<a href={href} style={{ color: 'var(--canon-fg-primary)' }}>
<a href={href} style={{ color: 'var(--canon-fg-text-primary)' }}>
{children as ReactNode}
</a>
),
@@ -83,7 +83,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
backgroundColor: 'var(--canon-bg-elevated)',
padding: '0.2rem 0.375rem',
borderRadius: '0.25rem',
color: 'var(--canon-fg-secondary)',
color: 'var(--canon-fg-text-secondary)',
border: '1px solid var(--canon-border)',
fontSize: '0.875rem',
}}
packages/canon/.storybook/themes/backstage.css
+4 -4
View File
@@ -60,9 +60,9 @@
--canon-bg: #f4f4f4;
/* Text colors */
--canon-fg-primary: #000;
--canon-fg-text-primary: #000;
--canon-fg-accent: #fff;
--canon-fg-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-fg-primary: #fff;
--canon-fg-text-primary: #fff;
--canon-fg-accent: #000;
--canon-fg-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-fg-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-fg-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-fg-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-fg-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-fg-primary);
color: var(--canon-fg-text-primary);
&:hover {
color: var(--canon-fg-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-fg-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-fg-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-fg-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-fg-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-fg-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-fg-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-fg-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-fg-primary);
color: var(--canon-fg-text-primary);
padding: 0;
margin: 0;
}
packages/canon/src/css/core.css
+4 -4
View File
@@ -95,8 +95,8 @@
--canon-border-hover: rgba(0, 0, 0, 0.2);
--canon-border-success: #008000;
--canon-border-warning: #e36d05;
--canon-fg-primary: #000;
--canon-fg-secondary: #646464;
--canon-fg-text-primary: #000;
--canon-fg-text-secondary: #646464;
--canon-fg-link: #fff;
--canon-fg-link-hover: #fff;
--canon-fg-accent: #fff;
@@ -137,6 +137,6 @@
--canon-fg-warning: #e36d05;
--canon-fg-link: #fff;
--canon-fg-link-hover: #fff;
--canon-fg-primary: #000;
--canon-fg-secondary: #646464;
--canon-fg-text-primary: #000;
--canon-fg-text-secondary: #646464;
}