Improve Theming docs
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
@@ -29,8 +29,100 @@ Here's an example of how your theme.css file should look like:
|
||||
|
||||
<CodeBlock lang="css" code={customTheme} />
|
||||
|
||||
## CSS class name structure
|
||||
|
||||
All Canon components come with a set of CSS classes that you can use to style them. To make it
|
||||
easier to identify the class name you can use, we use a specific structure for the class names.
|
||||
|
||||
<img
|
||||
src="/css-classname-structure.png"
|
||||
style={{ width: '100%', marginBottom: '32px', marginTop: '16px' }}
|
||||
/>
|
||||
|
||||
Every component has a unique prefix `.canon-` followed by the component name. Component props
|
||||
are represented using the `data-` attribute. That way, class names are easily identifiable.
|
||||
|
||||
## Available CSS variables
|
||||
|
||||
### Base colors
|
||||
|
||||
These colors are used for special purposes like ring, scrollbar, ...
|
||||
|
||||
<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-black</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
Pure black color. This one should be the same in light and dark themes.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-white</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
Pure white color. This one should be the same in light and dark themes.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-gray-1</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-gray-2</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-gray-3</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-gray-4</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-gray-5</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-gray-6</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-gray-7</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-gray-8</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
|
||||
### Core background colors
|
||||
|
||||
These colors are used for the background of your application. We are mostly using for now a
|
||||
@@ -57,98 +149,60 @@ color of your app.
|
||||
</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>
|
||||
<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-accent</Chip>
|
||||
<Chip head>--canon-bg-surface-2</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Used mostly for primary interactive components.</Table.Cell>
|
||||
<Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-bg-accent-hover</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
Used for interactive components when they are hovered.
|
||||
<Chip head>--canon-bg-solid</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Used for solid background colors.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-bg-accent-focus</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
Used for interactive components when they are in focus.
|
||||
<Chip head>--canon-bg-solid-hover</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Used for solid background colors when hovered.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-bg-accent-disabled</Chip>
|
||||
<Chip head>--canon-bg-solid-pressed</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Used for solid background colors when pressed.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
Used for interactive components when they are disabled.
|
||||
<Chip head>--canon-bg-solid-disabled</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Used for solid background colors when disabled.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-bg-tint</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Used for secondary interactive components.</Table.Cell>
|
||||
<Table.Cell>Used for tint background colors.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-bg-tint-hover</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
Used for interactive components when they are hovered.
|
||||
</Table.Cell>
|
||||
<Table.Cell>Used for tint background colors when hovered.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-bg-tint-focus</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
Used for interactive components when they are active.
|
||||
</Table.Cell>
|
||||
<Table.Cell>Used for tint background colors when active.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-bg-tint-disabled</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
Used for interactive components when they are disabled.
|
||||
</Table.Cell>
|
||||
<Table.Cell>Used for tint background colors when disabled.</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
|
||||
### 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>
|
||||
@@ -189,7 +243,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-surface-1`.
|
||||
It should be used on top of main background surfaces.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
@@ -197,7 +251,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-surface-1`.
|
||||
It should be used on top of main background surfaces.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
@@ -205,7 +259,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-surface-1`.
|
||||
It should be used on top of main background surfaces.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
@@ -213,38 +267,64 @@ 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-surface-1`.
|
||||
It should be used on top of main background surfaces.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-fg-accent</Chip>
|
||||
<Chip head>--canon-fg-disabled</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
It should be used on top of main background surfaces.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-fg-solid</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
It should be used on top of solid background colors.
|
||||
</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.Cell>
|
||||
It should be used on top of tint background colors.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-fg-tint-disabled</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
It should be used on top of tint background colors when disabled.
|
||||
</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.Cell>
|
||||
It should be used on top of danger background colors.
|
||||
</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.Cell>
|
||||
It should be used on top of warning background colors.
|
||||
</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.Cell>
|
||||
It should be used on top of success background colors.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
@@ -288,21 +368,9 @@ low contrast to help as a separator with the different background colors.
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-border-tint</Chip>
|
||||
<Chip head>--canon-border-disabled</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.Cell>Used when the component is disabled.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
@@ -325,7 +393,40 @@ low contrast to help as a separator with the different background colors.
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
|
||||
## Font families
|
||||
### Special colors
|
||||
|
||||
These colors are used for special purposes like ring, scrollbar, ...
|
||||
|
||||
<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-ring</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>The color of the ring.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-scrollbar</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>The color of the scrollbar.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-scrollbar-thumb</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>The color of the scrollbar thumb.</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
|
||||
@@ -354,9 +455,9 @@ monospace font that we use for code blocks and tables.
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
|
||||
## Font weights
|
||||
### Font weights
|
||||
|
||||
We have two font weights that we use across Canon. Regular or Bold
|
||||
We have two font weights that we use across Canon. Regular or Bold.
|
||||
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
@@ -381,7 +482,7 @@ We have two font weights that we use across Canon. Regular or Bold
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
|
||||
## Spacing
|
||||
### 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
|
||||
@@ -520,18 +621,9 @@ tokens for pretty much each spacing properties like padding, margin, gaps, ...
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
|
||||
### Radius (Work in progress)
|
||||
### Radius
|
||||
|
||||
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`
|
||||
We use a radius system to make sure that the components have a consistent look and feel.
|
||||
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
@@ -543,9 +635,59 @@ Here are the different radius factor we recommend to use
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-radius-factor</Chip>
|
||||
<Chip head>--canon-radius-1</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
The radius of the component. Default value is `0.125rem`.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-radius-2</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
The radius of the component. Default value is `0.25rem`.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-radius-3</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
The radius of the component. Default value is `0.5rem`.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-radius-4</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
The radius of the component. Default value is `0.75rem`.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-radius-5</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
The radius of the component. Default value is `1rem`.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-radius-6</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
The radius of the component. Default value is `1.25rem`.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-radius-full</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
The radius of the component. Default value is `9999px`.
|
||||
</Table.Cell>
|
||||
<Table.Cell>By default the value is set to medium `1`.</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
|
||||
Reference in New Issue
Block a user