paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 18 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
canon-docs/src/app/(docs)/components/button/page.mdx
+3 -5
View File
@@ -167,9 +167,7 @@ Here's a view when buttons are responsive.
py={4}
open
preview={<ButtonResponsive />}
code={`<Button
variant={{ xs: 'primary', sm: 'secondary', md: 'tertiary' }}
size={{ xs: 'small', sm: 'medium' }}>
Button
</Button>`}
code={`<Button variant={{ initial: 'primary', lg: 'secondary' }}>
Responsive Button
</Button>`}
/>
canon-docs/src/app/(docs)/components/heading/page.mdx
+3 -1
View File
@@ -93,5 +93,7 @@ on the screen size.
py={4}
open
preview={<HeadingResponsive />}
code={`<Heading variant={{ xs: 'title1', md: 'title2' }}>Responsive</Heading>`}
code={`<Heading variant={{ initial: 'title2', lg: 'title1' }}>
Responsive heading
</Heading>`}
/>
canon-docs/src/app/(docs)/components/table/page.mdx
+1 -1
View File
@@ -1 +1 @@
# Table
# Table (Coming soon)
canon-docs/src/app/(docs)/components/text/page.mdx
+3 -1
View File
@@ -137,5 +137,7 @@ on the screen size.
<Snippet
open
preview={<TextResponsive />}
code={`<Text variant={{ xs: 'label', md: 'body' }}>Responsive</Text>`}
code={`<Text variant={{ initial: 'body', lg: 'subtitle' }}>
Responsive text
</Text>`}
/>
canon-docs/src/app/(docs)/theme/theming/page.mdx
+443 -112
View File
@@ -1,67 +1,70 @@
import { CodeBlock } from '@/components/CodeBlock';
import * as Table from '@/components/Table';
import { Chip } from '@/components/Chip';
import { customTheme } from '@/snippets/_snippets';
# Theming
Backstage ships with a default theme with a light and dark mode variant. The
themes are provided as a part of the `@backstage/canon` package, which also
includes utilities for customizing the default theme, or creating completely
new themes.
Canon's theming is built entirely on CSS, without relying on any CSS-in-JS libraries.
At its core, it provides a solid default theme that is easily customizable using a
comprehensive set of CSS variables. Additionally, it enables anyone to adapt the design
to their specific needs. Each component comes with fixed class names, making customization
even more straightforward.
## Light & Dark modes
By default we are supporting both light and dark modes. Each user can opt to
choose what theme they want to use or to use their system decide what theme to
use. If you want to create your own theme, you will have to set both light and
dark themes following the instructions below. If you only set one of them, the
other mode will fallback to the default theme.
By default, Canon supports both light and dark modes using the `data-theme` attribute.
The light theme is applied by default if no `data-theme` attribute is specified. To create
a custom theme, you'll need to define both light and dark modes as outlined below. If
only one mode is defined, the other will fall back to the default theme.
## How to create your own theme
To create your own theme, you will have to define the variables below. To do
that, create a theme.css file and import it in your application. Here's an
example below on how to set your light and dark mode.
In our [started guide](/), we ask you to import two css files. The `core.css` file includes
the default set of variables. We recommend to keep this file in place and add your own theme
on top of it. `core.css` also include an opinionated reset. If you decided to remove `core.css`
you will have to provide your own reset css.
<CodeBlock
lang="css"
code={`/** Light theme **/
[data-theme='light'] {
--canon-bg-accent: #1ed760;
--canon-bg: #fff;
--canon-bg-elevated: #f5f5f5;
--canon-bg: #000;
--canon-outline: #666;
--canon-outline-focus: #ccc;
--canon-text-primary: #f0f0f0;
--canon-text-secondary: #666;
--canon-font-regular: 'Geist', serif;
--canon-font-mono: 'Monospace', monospace;
/* ... other values */
}
/** Dark theme **/
[data-theme='dark'] {
--canon-bg-accent: #1ed760;
--canon-bg: #000;
--canon-bg-elevated: #f5f5f5;
--canon-bg: #000;
--canon-outline: #666;
--canon-outline-focus: #ccc;
--canon-text-primary: #fff;
--canon-text-secondary: #666;
--canon-font-regular: 'Geist', serif;
--canon-font-mono: 'Monospace', monospace;
/* ... other values */
}
`}
/>
Here's an example of how your theme.css file should look like:
## Colors
<CodeBlock lang="css" code={customTheme} />
We provide a set of generic colours tokens that we use across Canon. By
changing these colours you can easily change the look and feel of your
application to match your brand.
## Available CSS variables
### Core background colors
These colors are used for the background of your application. We are mostly using for now a
single elevated background for panels. `--canon-bg` should mostly use as the main background
color of your app.
<Table.Root>
<Table.Header>
<Table.HeaderRow>
<Table.HeaderCell>Prop</Table.HeaderCell>
<Table.HeaderCell>Description</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>--canon-bg</Chip>
</Table.Cell>
<Table.Cell>The background color of your Backstage instance.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-bg-elevated</Chip>
</Table.Cell>
<Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
### Component background colors
These colors are meants for interactive components like buttons, callout avatar, chips, ...
We have two main level of background you can customise. The accent one is mostly used as a primary option
for interactive components. The tint one is used for secondary components like callouts, avatars, ...
<Table.Root>
<Table.Header>
@@ -75,54 +78,254 @@ application to match your brand.
<Table.Cell>
<Chip head>--canon-bg-accent</Chip>
</Table.Cell>
<Table.Cell>The accent color for the theme.</Table.Cell>
<Table.Cell>Used mostly for primary interactive components.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-bg</Chip>
<Chip head>--canon-bg-accent-hover</Chip>
</Table.Cell>
<Table.Cell>
Used for interactive components when they are hovered.
</Table.Cell>
<Table.Cell>The background color for the theme.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-bg-elevated</Chip>
<Chip head>--canon-bg-accent-focus</Chip>
</Table.Cell>
<Table.Cell>
Used for interactive components when they are in focus.
</Table.Cell>
<Table.Cell>The first surface color for the theme.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-bg</Chip>
<Chip head>--canon-bg-accent-disabled</Chip>
</Table.Cell>
<Table.Cell>
Used for interactive components when they are disabled.
</Table.Cell>
<Table.Cell>The second surface color for the theme.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-outline</Chip>
<Chip head>--canon-bg-tint</Chip>
</Table.Cell>
<Table.Cell>The outline color for the theme.</Table.Cell>
<Table.Cell>Used for secondary interactive components.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-outline-focus</Chip>
<Chip head>--canon-bg-tint-hover</Chip>
</Table.Cell>
<Table.Cell>
Used for interactive components when they are hovered.
</Table.Cell>
<Table.Cell>The outline focus color for the theme.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-text-primary</Chip>
<Chip head>--canon-bg-tint-focus</Chip>
</Table.Cell>
<Table.Cell>
Used for interactive components when they are active.
</Table.Cell>
<Table.Cell>The primary text color for the theme.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-text-secondary</Chip>
<Chip head>--canon-bg-tint-disabled</Chip>
</Table.Cell>
<Table.Cell>
Used for interactive components when they are disabled.
</Table.Cell>
<Table.Cell>The secondary text color for the theme.</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
## Typography
### Status background colors
These backgrounds are intended for non-interactive elements to visually convey a specific state.
<Table.Root>
<Table.Header>
<Table.HeaderRow>
<Table.HeaderCell>Prop</Table.HeaderCell>
<Table.HeaderCell>Description</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>--canon-bg-danger</Chip>
</Table.Cell>
<Table.Cell>Used to show errors informations.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-bg-warning</Chip>
</Table.Cell>
<Table.Cell>Used to show warnings informations.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-bg-success</Chip>
</Table.Cell>
<Table.Cell>Used to show success informations.</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
### Foreground colors
Foreground colours are meant to work in pair with a background colours. Typeically this would work
for icons, texts, shapes, ... Use a matching name to know what foreground color to use. These colors
are prefixed with `fg` to make it easier to identify.
<Table.Root>
<Table.Header>
<Table.HeaderRow>
<Table.HeaderCell>Prop</Table.HeaderCell>
<Table.HeaderCell>Description</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<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`.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<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`.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-fg-link</Chip>
</Table.Cell>
<Table.Cell>
It should be used on top of `--canon-bg-app` or `--canon-bg-elevated`.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<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`.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-fg-accent</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--canon-bg-accent`.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-fg-tint</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--canon-bg-tint`.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-fg-danger</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--canon-bg-danger`.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-fg-warning</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--canon-bg-warning`.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-fg-success</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--canon-bg-success`.</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
### Border colors
These border colors are mostly meant to be used as borders on top of any components with
low contrast to help as a separator with the different background colors.
<Table.Root>
<Table.Header>
<Table.HeaderRow>
<Table.HeaderCell>Prop</Table.HeaderCell>
<Table.HeaderCell>Description</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>--canon-border</Chip>
</Table.Cell>
<Table.Cell>
It should be used on top of `--canon-bg-elevated`.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-border-hover</Chip>
</Table.Cell>
<Table.Cell>
Used when the component is interactive and hovered.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-border-focus</Chip>
</Table.Cell>
<Table.Cell>
Used when the component is interactive and focused.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-border-tint</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--canon-bg-tint`.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-border-tint-hover</Chip>
</Table.Cell>
<Table.Cell>Used when the component is hovered.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-border-tint-focus</Chip>
</Table.Cell>
<Table.Cell>Used when the component is in focus.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-border-danger</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--canon-bg-danger`.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-border-warning</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--canon-bg-warning`.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-border-success</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--canon-bg-success`.</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
## Font families
We have two fonts that we use across Canon. The first one is the sans-serif
font that we use for the body of the application. The second one is the
@@ -151,12 +354,9 @@ monospace font that we use for code blocks and tables.
</Table.Body>
</Table.Root>
## Spacing
## Font weights
Our default spacing system is made to work in most scenarios. We have 7 scale
values from `xxs` to `xxl`. We use the values on padding and margin in our
layout components mostly. If you prefer to use a different spacing system, you
can do that by changing the values below.
We have two font weights that we use across Canon. Regular or Bold
<Table.Root>
<Table.Header>
@@ -168,53 +368,184 @@ can do that by changing the values below.
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-unit</Chip>
</Table.Cell>
<Table.Cell>
The base unit for the spacing system. Default value is `1em`
<Chip head>--canon-font-weight-regular</Chip>
</Table.Cell>
<Table.Cell>The regular font weight for the theme.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-xxs</Chip>
<Chip head>--canon-font-weight-bold</Chip>
</Table.Cell>
<Table.Cell>Default value is `0.25 x space unit`</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-xs</Chip>
</Table.Cell>
<Table.Cell>Default value is `0.5 x space unit`</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-sm</Chip>
</Table.Cell>
<Table.Cell>Default value is `0.75 x space unit`</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-md</Chip>
</Table.Cell>
<Table.Cell>Default value is `1.25 x space unit`</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-lg</Chip>
</Table.Cell>
<Table.Cell>Default value is `2 x space unit`</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-xl</Chip>
</Table.Cell>
<Table.Cell>Default value is `3.25 x space unit`</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-xxl</Chip>
</Table.Cell>
<Table.Cell>Default value is `5.25 x space unit`</Table.Cell>
<Table.Cell>The bold font weight for the theme.</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
## Spacing
We built a spacing system based on a single value `--canon-space`. This value is
used to calculate the spacing for all the components. By default if you would like to
increase or decrease the spacing between your components you can do it simply by updating
`--canon-space` and it will apply to all spacing values.
`--canon-space` is not used directly in any components but serve as an easy way to
calculate the other values.
<Table.Root>
<Table.Header>
<Table.HeaderRow>
<Table.HeaderCell>Prop</Table.HeaderCell>
<Table.HeaderCell>Description</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space</Chip>
</Table.Cell>
<Table.Cell>
The base unit for the spacing system. Default value is `0.25rem`.
</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
Below is the list of all spacing values you can use in your application. We use these
tokens for pretty much each spacing properties like padding, margin, gaps, ...
<Table.Root>
<Table.Header>
<Table.HeaderRow>
<Table.HeaderCell>Prop</Table.HeaderCell>
<Table.HeaderCell>Description</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-0_5</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`) times 0.5.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-1</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`).</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-1_5</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`) times 1.5.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-2</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`) times 2.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-3</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`) times 3.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-4</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`) times 4.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-5</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`) times 5.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-6</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`) times 6.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-7</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`) times 7.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-8</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`) times 8.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-9</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`) times 9.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-10</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`) times 10.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-11</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`) times 11.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-12</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`) times 12.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-13</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`) times 13.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--canon-space-14</Chip>
</Table.Cell>
<Table.Cell>Base unit (`--canon-space`) times 14.</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
### Radius (Work in progress)
Our radius system is a little bit different from spacing as we use a factor to calculate the radius values.
Under the hood different components uses different radius values. For example, button can be set to have full radius
while a checkbox will have to remain a square.
Here are the different radius factor we recommend to use
- None: `0`
- Small: `0.75`
- Medium: `1`
- Large: `1.5`
<Table.Root>
<Table.Header>
<Table.HeaderRow>
<Table.HeaderCell>Prop</Table.HeaderCell>
<Table.HeaderCell>Description</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>--canon-radius-factor</Chip>
</Table.Cell>
<Table.Cell>By default the value is set to medium `1`.</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
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-text-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-text-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-text-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-text-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-text-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-text-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-text-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-text-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-text-primary);
color: var(--canon-fg-text-primary);
}
.lineStatus {
font-family: var(--docs-font);
font-size: var(--canon-font-size-3);
color: var(--canon-text-secondary);
color: var(--canon-fg-text-secondary);
}
canon-docs/src/components/Table/styles.module.css
+1 -1
View File
@@ -38,7 +38,7 @@
transition: background-color 0.2s ease-in-out;
& p {
margin: 0;
margin: 0 !important;
}
}
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-text-primary)'
: 'var(--canon-text-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-text-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-text-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-text-primary);
color: var(--canon-fg-text-primary);
}
&[data-selected] {
color: var(--canon-text-primary);
color: var(--canon-fg-text-primary);
& p {
color: var(--canon-text-primary);
color: var(--canon-fg-text-primary);
}
}
@@ -60,7 +60,7 @@
}
.tab p {
color: var(--canon-text-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-text-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-text-secondary);
color: var(--canon-fg-text-secondary);
user-select: none;
height: 2rem;
flex: 1;
cursor: pointer;
&[data-selected] {
color: var(--canon-text-primary);
color: var(--canon-fg-text-primary);
& p {
color: var(--canon-text-primary);
color: var(--canon-fg-text-primary);
}
}
@media (hover: hover) {
&:hover {
color: var(--canon-text-primary);
color: var(--canon-fg-text-primary);
}
}
@@ -64,7 +64,7 @@
}
.tab p {
color: var(--canon-text-secondary) !important;
color: var(--canon-fg-text-secondary) !important;
}
.indicator {
canon-docs/src/mdx-components.tsx
+5 -2
View File
@@ -62,10 +62,13 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
</p>
),
a: ({ children, href }) => (
<a href={href} style={{ color: 'var(--canon-text-primary)' }}>
<a href={href} style={{ color: 'var(--canon-fg-text-primary)' }}>
{children as ReactNode}
</a>
),
li: ({ children }) => (
<li style={{ marginBottom: '0.5rem' }}>{children as ReactNode}</li>
),
pre: ({ children }) => {
const codeContent = React.isValidElement(children)
? (children.props as { children: string }).children
@@ -80,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-text-secondary)',
color: 'var(--canon-fg-text-secondary)',
border: '1px solid var(--canon-border)',
fontSize: '0.875rem',
}}
canon-docs/src/snippets/_snippets.ts
+31
View File
@@ -1,5 +1,36 @@
// Sometimes codes are not formatted correctly in the docs, so we need to use snippets
export const customTheme = `:root {
--canon-font-regular: system-ui;
--canon-font-weight-regular: 400;
--canon-font-weight-bold: 600;
--canon-bg: #f8f8f8;
--canon-bg-elevated: #fff;
/* ... other CSS variables */
/* Add your custom components styles here */
.canon-Button {
background-color: #000;
color: #fff;
}
}
[data-theme='dark'] {
--canon-font-regular: system-ui;
--canon-font-weight-regular: 400;
--canon-font-weight-bold: 600;
--canon-bg: #f8f8f8;
--canon-bg-elevated: #fff;
/* ... other CSS variables */
/* Add your custom components styles here */
.canon-Button {
background-color: #000;
color: #fff;
}
}
`;
export const grid = `import { Grid } from '@backstage/canon';
<Grid>
canon-docs/src/snippets/button.tsx
+5 -2
View File
@@ -62,8 +62,11 @@ export const ButtonDisabled = () => {
};
export const ButtonResponsive = () => {
// TODO: Add responsive button
return null;
return (
<Button variant={{ initial: 'primary', lg: 'secondary' }}>
Responsive Button
</Button>
);
};
export const ButtonPlayground = () => {
canon-docs/src/snippets/heading.tsx
+1 -2
View File
@@ -19,10 +19,9 @@ export const HeadingAllVariants = () => {
};
export const HeadingResponsive = () => {
return null;
return (
<Stack>
<Heading variant={{ xs: 'title4', md: 'title2' }}>
<Heading variant={{ initial: 'title2', lg: 'title1' }}>
Responsive heading
</Heading>
</Stack>
canon-docs/src/snippets/text.tsx
+3 -2
View File
@@ -57,8 +57,9 @@ export const TextAllWeights = () => {
};
export const TextResponsive = () => {
// TODO: Add responsive text
return null;
return (
<Text variant={{ initial: 'body', lg: 'subtitle' }}>Responsive text</Text>
);
};
export const TextPlayground = () => {
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;
}