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

Merge pull request #29560 from backstage/canon-styling-api

Browse Source 
Canon - Improve component class name structure
This commit is contained in:
Charles de Dreuille
2025-04-14 12:06:50 +02:00
committed by GitHub
parent 64278020b4 62443c60e8
commit dbe42bdd76
26 changed files with 564 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/neat-ducks-wish.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/canon': minor
---
Improve class name structure using data attributes instead of class names.
canon-docs/public/css-classname-structure.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

canon-docs/src/app/(docs)/theme/theming/page.mdx
+237 -95
View File
@@ -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>
packages/canon/css/button.css
+6 -6
View File
@@ -16,7 +16,7 @@
}
}
.canon-Button--variant-primary {
.canon-Button[data-variant="primary"] {
background-color: var(--canon-bg-solid);
color: var(--canon-fg-solid);
transition: background-color .15s, box-shadow .15s;
@@ -40,7 +40,7 @@
}
}
.canon-Button--variant-secondary {
.canon-Button[data-variant="secondary"] {
background-color: var(--canon-bg-surface-1);
box-shadow: inset 0 0 0 1px var(--canon-border);
color: var(--canon-fg-primary);
@@ -66,24 +66,24 @@
}
}
.canon-Button--size-medium {
.canon-Button[data-size="medium"] {
font-size: var(--canon-font-size-4);
padding: 0 var(--canon-space-3);
height: 40px;
}
.canon-Button--size-small {
.canon-Button[data-size="small"] {
font-size: var(--canon-font-size-3);
padding: 0 var(--canon-space-2);
height: 32px;
}
.canon-Button--size-small .canon-Button--icon {
.canon-Button[data-size="small"] .canon-ButtonIcon {
width: 1rem;
height: 1rem;
}
.canon-Button--size-medium .canon-Button--icon {
.canon-Button[data-size="medium"] .canon-ButtonIcon {
width: 1.5rem;
height: 1.5rem;
}
packages/canon/css/components.css
+71 -72
View File
@@ -22,7 +22,7 @@
}
}
.canon-Button--variant-primary {
.canon-Button[data-variant="primary"] {
background-color: var(--canon-bg-solid);
color: var(--canon-fg-solid);
transition: background-color .15s, box-shadow .15s;
@@ -46,7 +46,7 @@
}
}
.canon-Button--variant-secondary {
.canon-Button[data-variant="secondary"] {
background-color: var(--canon-bg-surface-1);
box-shadow: inset 0 0 0 1px var(--canon-border);
color: var(--canon-fg-primary);
@@ -72,24 +72,24 @@
}
}
.canon-Button--size-medium {
.canon-Button[data-size="medium"] {
font-size: var(--canon-font-size-4);
padding: 0 var(--canon-space-3);
height: 40px;
}
.canon-Button--size-small {
.canon-Button[data-size="small"] {
font-size: var(--canon-font-size-3);
padding: 0 var(--canon-space-2);
height: 32px;
}
.canon-Button--size-small .canon-Button--icon {
.canon-Button[data-size="small"] .canon-ButtonIcon {
width: 1rem;
height: 1rem;
}
.canon-Button--size-medium .canon-Button--icon {
.canon-Button[data-size="medium"] .canon-ButtonIcon {
width: 1.5rem;
height: 1.5rem;
}
@@ -248,56 +248,55 @@
.canon-Text {
font-family: var(--canon-font-regular);
color: var(--canon-fg-primary);
margin: 0;
padding: 0;
}
.canon-Text--variant-body {
.canon-Text[data-variant="body"] {
font-size: var(--canon-font-size-3);
line-height: 140%;
}
.canon-Text--variant-subtitle {
.canon-Text[data-variant="subtitle"] {
font-size: var(--canon-font-size-4);
line-height: 140%;
}
.canon-Text--variant-caption {
.canon-Text[data-variant="caption"] {
font-size: var(--canon-font-size-2);
line-height: 140%;
}
.canon-Text--variant-label {
.canon-Text[data-variant="label"] {
font-size: var(--canon-font-size-1);
line-height: 140%;
}
.canon-Text--weight-regular {
.canon-Text[data-weight="regular"] {
font-weight: var(--canon-font-weight-regular);
}
.canon-Text--weight-bold {
.canon-Text[data-weight="bold"] {
font-weight: var(--canon-font-weight-bold);
}
.canon-Text--color-primary {
.canon-Text[data-color="primary"] {
color: var(--canon-fg-primary);
}
.canon-Text--color-secondary {
.canon-Text[data-color="secondary"] {
color: var(--canon-fg-secondary);
}
.canon-Text--color-danger {
.canon-Text[data-color="danger"] {
color: var(--canon-fg-danger);
}
.canon-Text--color-warning {
.canon-Text[data-color="warning"] {
color: var(--canon-fg-warning);
}
.canon-Text--color-success {
.canon-Text[data-color="success"] {
color: var(--canon-fg-success);
}
@@ -309,32 +308,32 @@
line-height: 100%;
}
.canon-Heading--variant-display {
.canon-Heading[data-variant="display"] {
font-size: var(--canon-font-size-10);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title1 {
.canon-Heading[data-variant="title1"] {
font-size: var(--canon-font-size-9);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title2 {
.canon-Heading[data-variant="title2"] {
font-size: var(--canon-font-size-8);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title3 {
.canon-Heading[data-variant="title3"] {
font-size: var(--canon-font-size-7);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title4 {
.canon-Heading[data-variant="title4"] {
font-size: var(--canon-font-size-title4);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title5 {
.canon-Heading[data-variant="title5"] {
font-size: var(--canon-font-size-5);
font-weight: var(--canon-font-weight-bold);
}
@@ -357,7 +356,7 @@
}
}
.canon-IconButton--variant-primary {
.canon-IconButton[data-variant="primary"] {
background-color: var(--canon-bg-solid);
color: var(--canon-fg-solid);
transition: background-color .15s, box-shadow .15s;
@@ -381,7 +380,7 @@
}
}
.canon-IconButton--variant-secondary {
.canon-IconButton[data-variant="secondary"] {
background-color: var(--canon-bg-surface-1);
box-shadow: inset 0 0 0 1px var(--canon-border);
color: var(--canon-fg-primary);
@@ -407,24 +406,24 @@
}
}
.canon-IconButton--size-medium {
.canon-IconButton[data-size="medium"] {
font-size: var(--canon-font-size-4);
width: 40px;
height: 40px;
}
.canon-IconButton--size-small {
.canon-IconButton[data-size="small"] {
font-size: var(--canon-font-size-3);
width: 32px;
height: 32px;
}
.canon-IconButton--size-small .canon-IconButton--icon {
.canon-IconButton[data-size="small"] .canon-IconButtonIcon {
width: 1rem;
height: 1rem;
}
.canon-IconButton--size-medium .canon-IconButton--icon {
.canon-IconButton[data-size="medium"] .canon-IconButtonIcon {
width: 1.5rem;
height: 1.5rem;
}
@@ -436,14 +435,14 @@
display: flex;
}
.canon-TextField--label {
.canon-TextFieldLabel {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-primary);
margin-bottom: var(--canon-space-1_5);
}
.canon-TextField--description {
.canon-TextFieldDescription {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-secondary);
@@ -451,7 +450,7 @@
margin: 0;
}
.canon-TextField--error {
.canon-TextFieldError {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-danger);
@@ -459,7 +458,7 @@
margin: 0;
}
.canon-TextField--input {
.canon-TextFieldInput {
border-radius: var(--canon-radius-3);
border: 1px solid var(--canon-border);
padding: 0 var(--canon-space-4);
@@ -472,39 +471,39 @@
transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
}
.canon-TextField--input::placeholder {
.canon-TextFieldInput::placeholder {
color: var(--canon-fg-secondary);
}
.canon-TextField--input:hover {
.canon-TextFieldInput:hover {
border-color: var(--canon-border-hover);
}
.canon-TextField--input:focus-visible {
.canon-TextFieldInput:focus-visible {
outline-color: var(--canon-border-pressed);
border-color: var(--canon-border-pressed);
outline-width: 0;
}
.canon-TextField--input[data-invalid] {
.canon-TextFieldInput[data-invalid] {
border-color: var(--canon-fg-danger);
}
.canon-TextField--input[data-disabled] {
.canon-TextFieldInput[data-disabled] {
opacity: .5;
cursor: not-allowed;
border: 1px solid var(--canon-border-disabled);
}
.canon-TextField--input-size-small {
.canon-TextFieldInput[data-size="small"] {
height: 2rem;
}
.canon-TextField--input-size-medium {
.canon-TextFieldInput[data-size="medium"] {
height: 2.5rem;
}
.canon-TextField--required {
.canon-TextFieldRequired {
color: var(--canon-fg-secondary);
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
@@ -581,31 +580,31 @@
}
}
.canon-Link--variant-body {
.canon-Link[data-variant="body"] {
font-size: var(--canon-font-size-3);
line-height: 140%;
}
.canon-Link--variant-subtitle {
.canon-Link[data-variant="subtitle"] {
font-size: var(--canon-font-size-4);
line-height: 140%;
}
.canon-Link--variant-caption {
.canon-Link[data-variant="caption"] {
font-size: var(--canon-font-size-2);
line-height: 140%;
}
.canon-Link--variant-label {
.canon-Link[data-variant="label"] {
font-size: var(--canon-font-size-1);
line-height: 140%;
}
.canon-Link--weight-regular {
.canon-Link[data-weight="regular"] {
font-weight: var(--canon-font-weight-regular);
}
.canon-Link--weight-bold {
.canon-Link[data-weight="bold"] {
font-weight: var(--canon-font-weight-bold);
}
@@ -729,14 +728,14 @@
display: flex;
}
.canon-Select--label {
.canon-SelectLabel {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-primary);
margin-bottom: var(--canon-space-1_5);
}
.canon-Select--description {
.canon-SelectDescription {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-secondary);
@@ -744,7 +743,7 @@
margin: 0;
}
.canon-Select--error {
.canon-SelectError {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-danger);
@@ -752,7 +751,7 @@
margin: 0;
}
.canon-Select--trigger {
.canon-SelectTrigger {
box-sizing: border-box;
border-radius: var(--canon-radius-3);
border: 1px solid var(--canon-border);
@@ -771,38 +770,38 @@
display: flex;
}
.canon-Select--trigger::placeholder {
.canon-SelectTrigger::placeholder {
color: var(--canon-fg-secondary);
}
.canon-Select--trigger:hover {
.canon-SelectTrigger:hover {
border-color: var(--canon-border-hover);
}
.canon-Select--trigger:focus-visible {
.canon-SelectTrigger:focus-visible {
border-color: var(--canon-border-pressed);
outline: 0;
}
.canon-Select--trigger[data-invalid] {
.canon-SelectTrigger[data-invalid] {
border-color: var(--canon-fg-danger);
}
.canon-Select--trigger[data-invalid]:hover, .canon-Select--trigger[data-invalid]:focus-visible {
.canon-SelectTrigger[data-invalid]:hover, .canon-SelectTrigger[data-invalid]:focus-visible {
border-width: 2px;
}
.canon-Select--trigger[data-disabled] {
.canon-SelectTrigger[data-disabled] {
cursor: not-allowed;
border-color: var(--canon-border-disabled);
color: var(--canon-fg-disabled);
}
.canon-Select--trigger-size-small {
.canon-SelectTrigger[data-size="small"] {
height: 2rem;
}
.canon-Select--trigger-size-medium {
.canon-SelectTrigger[data-size="medium"] {
height: 3rem;
}
@@ -811,11 +810,11 @@
transition: transform .2s;
}
.canon-Select--trigger[data-popup-open] .canon-SelectIcon {
.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
transform: rotate(180deg);
}
.canon-Select--popup {
.canon-SelectPopup {
box-sizing: border-box;
max-height: var(--available-height);
background-color: var(--canon-bg-surface-1);
@@ -830,12 +829,12 @@
box-shadow: 0 4px 12px #0003;
}
.canon-Select--popup[data-starting-style], .canon-Select--popup[data-ending-style] {
.canon-SelectPopup[data-starting-style], .canon-SelectPopup[data-ending-style] {
opacity: 0;
transform: scale(.9);
}
.canon-Select--item {
.canon-SelectItem {
width: var(--anchor-width);
padding-block: var(--canon-space-2);
padding-inline: var(--canon-space-4);
@@ -853,13 +852,13 @@
position: relative;
}
.canon-Select--item[data-highlighted] {
.canon-SelectItem[data-highlighted] {
z-index: 0;
color: var(--canon-fg-primary);
position: relative;
}
.canon-Select--item[data-highlighted]:before {
.canon-SelectItem[data-highlighted]:before {
content: "";
z-index: -1;
background-color: var(--canon-bg-tint-hover);
@@ -869,37 +868,37 @@
inset-inline: .25rem;
}
.canon-Select--item[data-disabled] {
.canon-SelectItem[data-disabled] {
cursor: not-allowed;
color: var(--canon-fg-disabled);
}
.canon-Select--item-indicator {
.canon-SelectItemIndicator {
grid-area: icon;
justify-content: center;
align-items: center;
display: flex;
}
.canon-Select--item-text {
.canon-SelectItemText {
flex: 1;
grid-area: text;
}
.canon-Select--required {
.canon-SelectRequired {
color: var(--canon-fg-secondary);
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
margin-left: var(--canon-space-1);
}
.canon-Select--icon {
.canon-SelectIcon {
justify-content: center;
align-items: center;
display: flex;
}
.canon-Select--value {
.canon-SelectValue {
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
packages/canon/css/heading.css
+6 -6
View File
@@ -6,32 +6,32 @@
line-height: 100%;
}
.canon-Heading--variant-display {
.canon-Heading[data-variant="display"] {
font-size: var(--canon-font-size-10);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title1 {
.canon-Heading[data-variant="title1"] {
font-size: var(--canon-font-size-9);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title2 {
.canon-Heading[data-variant="title2"] {
font-size: var(--canon-font-size-8);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title3 {
.canon-Heading[data-variant="title3"] {
font-size: var(--canon-font-size-7);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title4 {
.canon-Heading[data-variant="title4"] {
font-size: var(--canon-font-size-title4);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title5 {
.canon-Heading[data-variant="title5"] {
font-size: var(--canon-font-size-5);
font-weight: var(--canon-font-weight-bold);
}
packages/canon/css/iconbutton.css
+6 -6
View File
@@ -16,7 +16,7 @@
}
}
.canon-IconButton--variant-primary {
.canon-IconButton[data-variant="primary"] {
background-color: var(--canon-bg-solid);
color: var(--canon-fg-solid);
transition: background-color .15s, box-shadow .15s;
@@ -40,7 +40,7 @@
}
}
.canon-IconButton--variant-secondary {
.canon-IconButton[data-variant="secondary"] {
background-color: var(--canon-bg-surface-1);
box-shadow: inset 0 0 0 1px var(--canon-border);
color: var(--canon-fg-primary);
@@ -66,24 +66,24 @@
}
}
.canon-IconButton--size-medium {
.canon-IconButton[data-size="medium"] {
font-size: var(--canon-font-size-4);
width: 40px;
height: 40px;
}
.canon-IconButton--size-small {
.canon-IconButton[data-size="small"] {
font-size: var(--canon-font-size-3);
width: 32px;
height: 32px;
}
.canon-IconButton--size-small .canon-IconButton--icon {
.canon-IconButton[data-size="small"] .canon-IconButtonIcon {
width: 1rem;
height: 1rem;
}
.canon-IconButton--size-medium .canon-IconButton--icon {
.canon-IconButton[data-size="medium"] .canon-IconButtonIcon {
width: 1.5rem;
height: 1.5rem;
}
packages/canon/css/link.css
+6 -6
View File
@@ -16,30 +16,30 @@
}
}
.canon-Link--variant-body {
.canon-Link[data-variant="body"] {
font-size: var(--canon-font-size-3);
line-height: 140%;
}
.canon-Link--variant-subtitle {
.canon-Link[data-variant="subtitle"] {
font-size: var(--canon-font-size-4);
line-height: 140%;
}
.canon-Link--variant-caption {
.canon-Link[data-variant="caption"] {
font-size: var(--canon-font-size-2);
line-height: 140%;
}
.canon-Link--variant-label {
.canon-Link[data-variant="label"] {
font-size: var(--canon-font-size-1);
line-height: 140%;
}
.canon-Link--weight-regular {
.canon-Link[data-weight="regular"] {
font-weight: var(--canon-font-weight-regular);
}
.canon-Link--weight-bold {
.canon-Link[data-weight="bold"] {
font-weight: var(--canon-font-weight-bold);
}
packages/canon/css/select.css
+24 -24
View File
@@ -5,14 +5,14 @@
display: flex;
}
.canon-Select--label {
.canon-SelectLabel {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-primary);
margin-bottom: var(--canon-space-1_5);
}
.canon-Select--description {
.canon-SelectDescription {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-secondary);
@@ -20,7 +20,7 @@
margin: 0;
}
.canon-Select--error {
.canon-SelectError {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-danger);
@@ -28,7 +28,7 @@
margin: 0;
}
.canon-Select--trigger {
.canon-SelectTrigger {
box-sizing: border-box;
border-radius: var(--canon-radius-3);
border: 1px solid var(--canon-border);
@@ -47,38 +47,38 @@
display: flex;
}
.canon-Select--trigger::placeholder {
.canon-SelectTrigger::placeholder {
color: var(--canon-fg-secondary);
}
.canon-Select--trigger:hover {
.canon-SelectTrigger:hover {
border-color: var(--canon-border-hover);
}
.canon-Select--trigger:focus-visible {
.canon-SelectTrigger:focus-visible {
border-color: var(--canon-border-pressed);
outline: 0;
}
.canon-Select--trigger[data-invalid] {
.canon-SelectTrigger[data-invalid] {
border-color: var(--canon-fg-danger);
}
.canon-Select--trigger[data-invalid]:hover, .canon-Select--trigger[data-invalid]:focus-visible {
.canon-SelectTrigger[data-invalid]:hover, .canon-SelectTrigger[data-invalid]:focus-visible {
border-width: 2px;
}
.canon-Select--trigger[data-disabled] {
.canon-SelectTrigger[data-disabled] {
cursor: not-allowed;
border-color: var(--canon-border-disabled);
color: var(--canon-fg-disabled);
}
.canon-Select--trigger-size-small {
.canon-SelectTrigger[data-size="small"] {
height: 2rem;
}
.canon-Select--trigger-size-medium {
.canon-SelectTrigger[data-size="medium"] {
height: 3rem;
}
@@ -87,11 +87,11 @@
transition: transform .2s;
}
.canon-Select--trigger[data-popup-open] .canon-SelectIcon {
.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
transform: rotate(180deg);
}
.canon-Select--popup {
.canon-SelectPopup {
box-sizing: border-box;
max-height: var(--available-height);
background-color: var(--canon-bg-surface-1);
@@ -106,12 +106,12 @@
box-shadow: 0 4px 12px #0003;
}
.canon-Select--popup[data-starting-style], .canon-Select--popup[data-ending-style] {
.canon-SelectPopup[data-starting-style], .canon-SelectPopup[data-ending-style] {
opacity: 0;
transform: scale(.9);
}
.canon-Select--item {
.canon-SelectItem {
width: var(--anchor-width);
padding-block: var(--canon-space-2);
padding-inline: var(--canon-space-4);
@@ -129,13 +129,13 @@
position: relative;
}
.canon-Select--item[data-highlighted] {
.canon-SelectItem[data-highlighted] {
z-index: 0;
color: var(--canon-fg-primary);
position: relative;
}
.canon-Select--item[data-highlighted]:before {
.canon-SelectItem[data-highlighted]:before {
content: "";
z-index: -1;
background-color: var(--canon-bg-tint-hover);
@@ -145,37 +145,37 @@
inset-inline: .25rem;
}
.canon-Select--item[data-disabled] {
.canon-SelectItem[data-disabled] {
cursor: not-allowed;
color: var(--canon-fg-disabled);
}
.canon-Select--item-indicator {
.canon-SelectItemIndicator {
grid-area: icon;
justify-content: center;
align-items: center;
display: flex;
}
.canon-Select--item-text {
.canon-SelectItemText {
flex: 1;
grid-area: text;
}
.canon-Select--required {
.canon-SelectRequired {
color: var(--canon-fg-secondary);
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
margin-left: var(--canon-space-1);
}
.canon-Select--icon {
.canon-SelectIcon {
justify-content: center;
align-items: center;
display: flex;
}
.canon-Select--value {
.canon-SelectValue {
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
packages/canon/css/styles.css
+71 -72
View File
@@ -9246,7 +9246,7 @@
}
}
.canon-Button--variant-primary {
.canon-Button[data-variant="primary"] {
background-color: var(--canon-bg-solid);
color: var(--canon-fg-solid);
transition: background-color .15s, box-shadow .15s;
@@ -9270,7 +9270,7 @@
}
}
.canon-Button--variant-secondary {
.canon-Button[data-variant="secondary"] {
background-color: var(--canon-bg-surface-1);
box-shadow: inset 0 0 0 1px var(--canon-border);
color: var(--canon-fg-primary);
@@ -9296,24 +9296,24 @@
}
}
.canon-Button--size-medium {
.canon-Button[data-size="medium"] {
font-size: var(--canon-font-size-4);
padding: 0 var(--canon-space-3);
height: 40px;
}
.canon-Button--size-small {
.canon-Button[data-size="small"] {
font-size: var(--canon-font-size-3);
padding: 0 var(--canon-space-2);
height: 32px;
}
.canon-Button--size-small .canon-Button--icon {
.canon-Button[data-size="small"] .canon-ButtonIcon {
width: 1rem;
height: 1rem;
}
.canon-Button--size-medium .canon-Button--icon {
.canon-Button[data-size="medium"] .canon-ButtonIcon {
width: 1.5rem;
height: 1.5rem;
}
@@ -9472,56 +9472,55 @@
.canon-Text {
font-family: var(--canon-font-regular);
color: var(--canon-fg-primary);
margin: 0;
padding: 0;
}
.canon-Text--variant-body {
.canon-Text[data-variant="body"] {
font-size: var(--canon-font-size-3);
line-height: 140%;
}
.canon-Text--variant-subtitle {
.canon-Text[data-variant="subtitle"] {
font-size: var(--canon-font-size-4);
line-height: 140%;
}
.canon-Text--variant-caption {
.canon-Text[data-variant="caption"] {
font-size: var(--canon-font-size-2);
line-height: 140%;
}
.canon-Text--variant-label {
.canon-Text[data-variant="label"] {
font-size: var(--canon-font-size-1);
line-height: 140%;
}
.canon-Text--weight-regular {
.canon-Text[data-weight="regular"] {
font-weight: var(--canon-font-weight-regular);
}
.canon-Text--weight-bold {
.canon-Text[data-weight="bold"] {
font-weight: var(--canon-font-weight-bold);
}
.canon-Text--color-primary {
.canon-Text[data-color="primary"] {
color: var(--canon-fg-primary);
}
.canon-Text--color-secondary {
.canon-Text[data-color="secondary"] {
color: var(--canon-fg-secondary);
}
.canon-Text--color-danger {
.canon-Text[data-color="danger"] {
color: var(--canon-fg-danger);
}
.canon-Text--color-warning {
.canon-Text[data-color="warning"] {
color: var(--canon-fg-warning);
}
.canon-Text--color-success {
.canon-Text[data-color="success"] {
color: var(--canon-fg-success);
}
@@ -9533,32 +9532,32 @@
line-height: 100%;
}
.canon-Heading--variant-display {
.canon-Heading[data-variant="display"] {
font-size: var(--canon-font-size-10);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title1 {
.canon-Heading[data-variant="title1"] {
font-size: var(--canon-font-size-9);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title2 {
.canon-Heading[data-variant="title2"] {
font-size: var(--canon-font-size-8);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title3 {
.canon-Heading[data-variant="title3"] {
font-size: var(--canon-font-size-7);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title4 {
.canon-Heading[data-variant="title4"] {
font-size: var(--canon-font-size-title4);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title5 {
.canon-Heading[data-variant="title5"] {
font-size: var(--canon-font-size-5);
font-weight: var(--canon-font-weight-bold);
}
@@ -9581,7 +9580,7 @@
}
}
.canon-IconButton--variant-primary {
.canon-IconButton[data-variant="primary"] {
background-color: var(--canon-bg-solid);
color: var(--canon-fg-solid);
transition: background-color .15s, box-shadow .15s;
@@ -9605,7 +9604,7 @@
}
}
.canon-IconButton--variant-secondary {
.canon-IconButton[data-variant="secondary"] {
background-color: var(--canon-bg-surface-1);
box-shadow: inset 0 0 0 1px var(--canon-border);
color: var(--canon-fg-primary);
@@ -9631,24 +9630,24 @@
}
}
.canon-IconButton--size-medium {
.canon-IconButton[data-size="medium"] {
font-size: var(--canon-font-size-4);
width: 40px;
height: 40px;
}
.canon-IconButton--size-small {
.canon-IconButton[data-size="small"] {
font-size: var(--canon-font-size-3);
width: 32px;
height: 32px;
}
.canon-IconButton--size-small .canon-IconButton--icon {
.canon-IconButton[data-size="small"] .canon-IconButtonIcon {
width: 1rem;
height: 1rem;
}
.canon-IconButton--size-medium .canon-IconButton--icon {
.canon-IconButton[data-size="medium"] .canon-IconButtonIcon {
width: 1.5rem;
height: 1.5rem;
}
@@ -9660,14 +9659,14 @@
display: flex;
}
.canon-TextField--label {
.canon-TextFieldLabel {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-primary);
margin-bottom: var(--canon-space-1_5);
}
.canon-TextField--description {
.canon-TextFieldDescription {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-secondary);
@@ -9675,7 +9674,7 @@
margin: 0;
}
.canon-TextField--error {
.canon-TextFieldError {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-danger);
@@ -9683,7 +9682,7 @@
margin: 0;
}
.canon-TextField--input {
.canon-TextFieldInput {
border-radius: var(--canon-radius-3);
border: 1px solid var(--canon-border);
padding: 0 var(--canon-space-4);
@@ -9696,39 +9695,39 @@
transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
}
.canon-TextField--input::placeholder {
.canon-TextFieldInput::placeholder {
color: var(--canon-fg-secondary);
}
.canon-TextField--input:hover {
.canon-TextFieldInput:hover {
border-color: var(--canon-border-hover);
}
.canon-TextField--input:focus-visible {
.canon-TextFieldInput:focus-visible {
outline-color: var(--canon-border-pressed);
border-color: var(--canon-border-pressed);
outline-width: 0;
}
.canon-TextField--input[data-invalid] {
.canon-TextFieldInput[data-invalid] {
border-color: var(--canon-fg-danger);
}
.canon-TextField--input[data-disabled] {
.canon-TextFieldInput[data-disabled] {
opacity: .5;
cursor: not-allowed;
border: 1px solid var(--canon-border-disabled);
}
.canon-TextField--input-size-small {
.canon-TextFieldInput[data-size="small"] {
height: 2rem;
}
.canon-TextField--input-size-medium {
.canon-TextFieldInput[data-size="medium"] {
height: 2.5rem;
}
.canon-TextField--required {
.canon-TextFieldRequired {
color: var(--canon-fg-secondary);
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
@@ -9805,31 +9804,31 @@
}
}
.canon-Link--variant-body {
.canon-Link[data-variant="body"] {
font-size: var(--canon-font-size-3);
line-height: 140%;
}
.canon-Link--variant-subtitle {
.canon-Link[data-variant="subtitle"] {
font-size: var(--canon-font-size-4);
line-height: 140%;
}
.canon-Link--variant-caption {
.canon-Link[data-variant="caption"] {
font-size: var(--canon-font-size-2);
line-height: 140%;
}
.canon-Link--variant-label {
.canon-Link[data-variant="label"] {
font-size: var(--canon-font-size-1);
line-height: 140%;
}
.canon-Link--weight-regular {
.canon-Link[data-weight="regular"] {
font-weight: var(--canon-font-weight-regular);
}
.canon-Link--weight-bold {
.canon-Link[data-weight="bold"] {
font-weight: var(--canon-font-weight-bold);
}
@@ -9953,14 +9952,14 @@
display: flex;
}
.canon-Select--label {
.canon-SelectLabel {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-primary);
margin-bottom: var(--canon-space-1_5);
}
.canon-Select--description {
.canon-SelectDescription {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-secondary);
@@ -9968,7 +9967,7 @@
margin: 0;
}
.canon-Select--error {
.canon-SelectError {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-danger);
@@ -9976,7 +9975,7 @@
margin: 0;
}
.canon-Select--trigger {
.canon-SelectTrigger {
box-sizing: border-box;
border-radius: var(--canon-radius-3);
border: 1px solid var(--canon-border);
@@ -9995,38 +9994,38 @@
display: flex;
}
.canon-Select--trigger::placeholder {
.canon-SelectTrigger::placeholder {
color: var(--canon-fg-secondary);
}
.canon-Select--trigger:hover {
.canon-SelectTrigger:hover {
border-color: var(--canon-border-hover);
}
.canon-Select--trigger:focus-visible {
.canon-SelectTrigger:focus-visible {
border-color: var(--canon-border-pressed);
outline: 0;
}
.canon-Select--trigger[data-invalid] {
.canon-SelectTrigger[data-invalid] {
border-color: var(--canon-fg-danger);
}
.canon-Select--trigger[data-invalid]:hover, .canon-Select--trigger[data-invalid]:focus-visible {
.canon-SelectTrigger[data-invalid]:hover, .canon-SelectTrigger[data-invalid]:focus-visible {
border-width: 2px;
}
.canon-Select--trigger[data-disabled] {
.canon-SelectTrigger[data-disabled] {
cursor: not-allowed;
border-color: var(--canon-border-disabled);
color: var(--canon-fg-disabled);
}
.canon-Select--trigger-size-small {
.canon-SelectTrigger[data-size="small"] {
height: 2rem;
}
.canon-Select--trigger-size-medium {
.canon-SelectTrigger[data-size="medium"] {
height: 3rem;
}
@@ -10035,11 +10034,11 @@
transition: transform .2s;
}
.canon-Select--trigger[data-popup-open] .canon-SelectIcon {
.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
transform: rotate(180deg);
}
.canon-Select--popup {
.canon-SelectPopup {
box-sizing: border-box;
max-height: var(--available-height);
background-color: var(--canon-bg-surface-1);
@@ -10054,12 +10053,12 @@
box-shadow: 0 4px 12px #0003;
}
.canon-Select--popup[data-starting-style], .canon-Select--popup[data-ending-style] {
.canon-SelectPopup[data-starting-style], .canon-SelectPopup[data-ending-style] {
opacity: 0;
transform: scale(.9);
}
.canon-Select--item {
.canon-SelectItem {
width: var(--anchor-width);
padding-block: var(--canon-space-2);
padding-inline: var(--canon-space-4);
@@ -10077,13 +10076,13 @@
position: relative;
}
.canon-Select--item[data-highlighted] {
.canon-SelectItem[data-highlighted] {
z-index: 0;
color: var(--canon-fg-primary);
position: relative;
}
.canon-Select--item[data-highlighted]:before {
.canon-SelectItem[data-highlighted]:before {
content: "";
z-index: -1;
background-color: var(--canon-bg-tint-hover);
@@ -10093,37 +10092,37 @@
inset-inline: .25rem;
}
.canon-Select--item[data-disabled] {
.canon-SelectItem[data-disabled] {
cursor: not-allowed;
color: var(--canon-fg-disabled);
}
.canon-Select--item-indicator {
.canon-SelectItemIndicator {
grid-area: icon;
justify-content: center;
align-items: center;
display: flex;
}
.canon-Select--item-text {
.canon-SelectItemText {
flex: 1;
grid-area: text;
}
.canon-Select--required {
.canon-SelectRequired {
color: var(--canon-fg-secondary);
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
margin-left: var(--canon-space-1);
}
.canon-Select--icon {
.canon-SelectIcon {
justify-content: center;
align-items: center;
display: flex;
}
.canon-Select--value {
.canon-SelectValue {
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
packages/canon/css/text.css
+11 -12
View File
@@ -1,54 +1,53 @@
.canon-Text {
font-family: var(--canon-font-regular);
color: var(--canon-fg-primary);
margin: 0;
padding: 0;
}
.canon-Text--variant-body {
.canon-Text[data-variant="body"] {
font-size: var(--canon-font-size-3);
line-height: 140%;
}
.canon-Text--variant-subtitle {
.canon-Text[data-variant="subtitle"] {
font-size: var(--canon-font-size-4);
line-height: 140%;
}
.canon-Text--variant-caption {
.canon-Text[data-variant="caption"] {
font-size: var(--canon-font-size-2);
line-height: 140%;
}
.canon-Text--variant-label {
.canon-Text[data-variant="label"] {
font-size: var(--canon-font-size-1);
line-height: 140%;
}
.canon-Text--weight-regular {
.canon-Text[data-weight="regular"] {
font-weight: var(--canon-font-weight-regular);
}
.canon-Text--weight-bold {
.canon-Text[data-weight="bold"] {
font-weight: var(--canon-font-weight-bold);
}
.canon-Text--color-primary {
.canon-Text[data-color="primary"] {
color: var(--canon-fg-primary);
}
.canon-Text--color-secondary {
.canon-Text[data-color="secondary"] {
color: var(--canon-fg-secondary);
}
.canon-Text--color-danger {
.canon-Text[data-color="danger"] {
color: var(--canon-fg-danger);
}
.canon-Text--color-warning {
.canon-Text[data-color="warning"] {
color: var(--canon-fg-warning);
}
.canon-Text--color-success {
.canon-Text[data-color="success"] {
color: var(--canon-fg-success);
}
packages/canon/css/textfield.css
+12 -12
View File
@@ -5,14 +5,14 @@
display: flex;
}
.canon-TextField--label {
.canon-TextFieldLabel {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-primary);
margin-bottom: var(--canon-space-1_5);
}
.canon-TextField--description {
.canon-TextFieldDescription {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-secondary);
@@ -20,7 +20,7 @@
margin: 0;
}
.canon-TextField--error {
.canon-TextFieldError {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-danger);
@@ -28,7 +28,7 @@
margin: 0;
}
.canon-TextField--input {
.canon-TextFieldInput {
border-radius: var(--canon-radius-3);
border: 1px solid var(--canon-border);
padding: 0 var(--canon-space-4);
@@ -41,39 +41,39 @@
transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
}
.canon-TextField--input::placeholder {
.canon-TextFieldInput::placeholder {
color: var(--canon-fg-secondary);
}
.canon-TextField--input:hover {
.canon-TextFieldInput:hover {
border-color: var(--canon-border-hover);
}
.canon-TextField--input:focus-visible {
.canon-TextFieldInput:focus-visible {
outline-color: var(--canon-border-pressed);
border-color: var(--canon-border-pressed);
outline-width: 0;
}
.canon-TextField--input[data-invalid] {
.canon-TextFieldInput[data-invalid] {
border-color: var(--canon-fg-danger);
}
.canon-TextField--input[data-disabled] {
.canon-TextFieldInput[data-disabled] {
opacity: .5;
cursor: not-allowed;
border: 1px solid var(--canon-border-disabled);
}
.canon-TextField--input-size-small {
.canon-TextFieldInput[data-size="small"] {
height: 2rem;
}
.canon-TextField--input-size-medium {
.canon-TextFieldInput[data-size="medium"] {
height: 2.5rem;
}
.canon-TextField--required {
.canon-TextFieldRequired {
color: var(--canon-fg-secondary);
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
packages/canon/src/components/Button/Button.tsx
+5 -8
View File
@@ -44,18 +44,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
<button
ref={ref}
disabled={disabled}
className={clsx(
'canon-Button',
`canon-Button--size-${responsiveSize}`,
`canon-Button--variant-${responsiveVariant}`,
className,
)}
className={clsx('canon-Button', className)}
data-size={responsiveSize}
data-variant={responsiveVariant}
style={style}
{...rest}
>
{iconStart && <Icon name={iconStart} className="canon-Button--icon" />}
{iconStart && <Icon name={iconStart} className="canon-ButtonIcon" />}
{children}
{iconEnd && <Icon name={iconEnd} className="canon-Button--icon" />}
{iconEnd && <Icon name={iconEnd} className="canon-ButtonIcon" />}
</button>
);
},
packages/canon/src/components/Button/styles.css
+6 -6
View File
@@ -32,7 +32,7 @@
}
}
.canon-Button--variant-primary {
.canon-Button[data-variant='primary'] {
background-color: var(--canon-bg-solid);
color: var(--canon-fg-solid);
transition: background-color 150ms ease, box-shadow 150ms ease;
@@ -56,7 +56,7 @@
}
}
.canon-Button--variant-secondary {
.canon-Button[data-variant='secondary'] {
background-color: var(--canon-bg-surface-1);
box-shadow: inset 0 0 0 1px var(--canon-border);
color: var(--canon-fg-primary);
@@ -82,24 +82,24 @@
}
}
.canon-Button--size-medium {
.canon-Button[data-size='medium'] {
font-size: var(--canon-font-size-4);
padding: 0 var(--canon-space-3);
height: 40px;
}
.canon-Button--size-small {
.canon-Button[data-size='small'] {
font-size: var(--canon-font-size-3);
padding: 0 var(--canon-space-2);
height: 32px;
}
.canon-Button--size-small .canon-Button--icon {
.canon-Button[data-size='small'] .canon-ButtonIcon {
width: 1rem;
height: 1rem;
}
.canon-Button--size-medium .canon-Button--icon {
.canon-Button[data-size='medium'] .canon-ButtonIcon {
width: 1.5rem;
height: 1.5rem;
}
packages/canon/src/components/Heading/Heading.tsx
+2 -5
View File
@@ -45,11 +45,8 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
return (
<Component
ref={ref}
className={clsx(
'canon-Heading',
responsiveVariant && `canon-Heading--variant-${responsiveVariant}`,
className,
)}
className={clsx('canon-Heading', className)}
data-variant={responsiveVariant}
{...restProps}
>
{children}
packages/canon/src/components/Heading/styles.css
+6 -6
View File
@@ -22,32 +22,32 @@
margin: 0;
}
.canon-Heading--variant-display {
.canon-Heading[data-variant='display'] {
font-size: var(--canon-font-size-10);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title1 {
.canon-Heading[data-variant='title1'] {
font-size: var(--canon-font-size-9);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title2 {
.canon-Heading[data-variant='title2'] {
font-size: var(--canon-font-size-8);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title3 {
.canon-Heading[data-variant='title3'] {
font-size: var(--canon-font-size-7);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title4 {
.canon-Heading[data-variant='title4'] {
font-size: var(--canon-font-size-title4);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title5 {
.canon-Heading[data-variant='title5'] {
font-size: var(--canon-font-size-5);
font-weight: var(--canon-font-weight-bold);
}
packages/canon/src/components/IconButton/IconButton.tsx
+4 -7
View File
@@ -39,16 +39,13 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
return (
<button
ref={ref}
className={clsx(
'canon-IconButton',
`canon-IconButton--size-${responsiveSize}`,
`canon-IconButton--variant-${responsiveVariant}`,
className,
)}
className={clsx('canon-IconButton', className)}
data-size={responsiveSize}
data-variant={responsiveVariant}
style={style}
{...rest}
>
<Icon name={icon} className="canon-IconButton--icon" />
<Icon name={icon} className="canon-IconButtonIcon" />
</button>
);
},
packages/canon/src/components/IconButton/styles.css
+6 -6
View File
@@ -32,7 +32,7 @@
}
}
.canon-IconButton--variant-primary {
.canon-IconButton[data-variant='primary'] {
background-color: var(--canon-bg-solid);
color: var(--canon-fg-solid);
transition: background-color 150ms ease, box-shadow 150ms ease;
@@ -56,7 +56,7 @@
}
}
.canon-IconButton--variant-secondary {
.canon-IconButton[data-variant='secondary'] {
background-color: var(--canon-bg-surface-1);
box-shadow: inset 0 0 0 1px var(--canon-border);
color: var(--canon-fg-primary);
@@ -82,24 +82,24 @@
}
}
.canon-IconButton--size-medium {
.canon-IconButton[data-size='medium'] {
font-size: var(--canon-font-size-4);
height: 40px;
width: 40px;
}
.canon-IconButton--size-small {
.canon-IconButton[data-size='small'] {
font-size: var(--canon-font-size-3);
height: 32px;
width: 32px;
}
.canon-IconButton--size-small .canon-IconButton--icon {
.canon-IconButton[data-size='small'] .canon-IconButtonIcon {
width: 1rem;
height: 1rem;
}
.canon-IconButton--size-medium .canon-IconButton--icon {
.canon-IconButton[data-size='medium'] .canon-IconButtonIcon {
width: 1.5rem;
height: 1.5rem;
}
packages/canon/src/components/Link/Link.tsx
+3 -8
View File
@@ -38,14 +38,9 @@ export const Link = forwardRef<HTMLElement, LinkProps>((props, ref) => {
const { renderElement } = useRender({
render,
props: {
className: clsx(
'canon-Link',
responsiveVariant && `canon-Link--variant-${responsiveVariant}`,
responsiveWeight && `canon-Link--weight-${responsiveWeight}`,
className,
),
responsiveVariant,
responsiveWeight,
className: clsx('canon-Link', className),
['data-variant']: responsiveVariant,
['data-weight']: responsiveWeight,
...restProps,
},
refs: [ref, internalRef],
packages/canon/src/components/Link/styles.css
+6 -6
View File
@@ -36,30 +36,30 @@
}
}
.canon-Link--variant-body {
.canon-Link[data-variant='body'] {
font-size: var(--canon-font-size-3);
line-height: 140%;
}
.canon-Link--variant-subtitle {
.canon-Link[data-variant='subtitle'] {
font-size: var(--canon-font-size-4);
line-height: 140%;
}
.canon-Link--variant-caption {
.canon-Link[data-variant='caption'] {
font-size: var(--canon-font-size-2);
line-height: 140%;
}
.canon-Link--variant-label {
.canon-Link[data-variant='label'] {
font-size: var(--canon-font-size-1);
line-height: 140%;
}
.canon-Link--weight-regular {
.canon-Link[data-weight='regular'] {
font-weight: var(--canon-font-weight-regular);
}
.canon-Link--weight-bold {
.canon-Link[data-weight='bold'] {
font-weight: var(--canon-font-weight-bold);
}
packages/canon/src/components/Select/Select.styles.css
+26 -26
View File
@@ -21,14 +21,14 @@
width: 100%;
}
.canon-Select--label {
.canon-SelectLabel {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-primary);
margin-bottom: var(--canon-space-1_5);
}
.canon-Select--description {
.canon-SelectDescription {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-secondary);
@@ -36,7 +36,7 @@
padding-top: var(--canon-space-1_5);
}
.canon-Select--error {
.canon-SelectError {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-danger);
@@ -44,7 +44,7 @@
padding-top: var(--canon-space-1_5);
}
.canon-Select--trigger {
.canon-SelectTrigger {
box-sizing: border-box;
border-radius: var(--canon-radius-3);
border: 1px solid var(--canon-border);
@@ -63,41 +63,41 @@
gap: var(--canon-space-2);
}
.canon-Select--trigger::placeholder {
.canon-SelectTrigger::placeholder {
color: var(--canon-fg-secondary);
}
.canon-Select--trigger:hover {
.canon-SelectTrigger:hover {
border-color: var(--canon-border-hover);
}
.canon-Select--trigger:focus-visible {
.canon-SelectTrigger:focus-visible {
border-color: var(--canon-border-pressed);
outline: 0;
}
.canon-Select--trigger[data-invalid] {
.canon-SelectTrigger[data-invalid] {
border-color: var(--canon-fg-danger);
}
.canon-Select--trigger[data-invalid]:hover {
.canon-SelectTrigger[data-invalid]:hover {
border-width: 2px;
}
.canon-Select--trigger[data-invalid]:focus-visible {
.canon-SelectTrigger[data-invalid]:focus-visible {
border-width: 2px;
}
.canon-Select--trigger[data-disabled] {
.canon-SelectTrigger[data-disabled] {
cursor: not-allowed;
border-color: var(--canon-border-disabled);
color: var(--canon-fg-disabled);
}
.canon-Select--trigger-size-small {
.canon-SelectTrigger[data-size='small'] {
height: 2rem;
}
.canon-Select--trigger-size-medium {
.canon-SelectTrigger[data-size='medium'] {
height: 3rem;
}
@@ -106,11 +106,11 @@
transition: transform 0.2s ease;
}
.canon-Select--trigger[data-popup-open] .canon-SelectIcon {
.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
transform: rotate(180deg);
}
.canon-Select--popup {
.canon-SelectPopup {
box-sizing: border-box;
max-height: var(--available-height);
overflow-y: auto;
@@ -125,13 +125,13 @@
transition: transform 150ms, opacity 150ms;
}
.canon-Select--popup[data-starting-style],
.canon-Select--popup[data-ending-style] {
.canon-SelectPopup[data-starting-style],
.canon-SelectPopup[data-ending-style] {
opacity: 0;
transform: scale(0.9);
}
.canon-Select--item {
.canon-SelectItem {
position: relative;
width: var(--anchor-width);
display: grid;
@@ -149,13 +149,13 @@
outline: none;
}
.canon-Select--item[data-highlighted] {
.canon-SelectItem[data-highlighted] {
z-index: 0;
position: relative;
color: var(--canon-fg-primary);
}
.canon-Select--item[data-highlighted]::before {
.canon-SelectItem[data-highlighted]::before {
content: '';
z-index: -1;
position: absolute;
@@ -165,37 +165,37 @@
background-color: var(--canon-bg-tint-hover);
}
.canon-Select--item[data-disabled] {
.canon-SelectItem[data-disabled] {
cursor: not-allowed;
color: var(--canon-fg-disabled);
}
.canon-Select--item-indicator {
.canon-SelectItemIndicator {
grid-area: icon;
display: flex;
align-items: center;
justify-content: center;
}
.canon-Select--item-text {
.canon-SelectItemText {
flex: 1;
grid-area: text;
}
.canon-Select--required {
.canon-SelectRequired {
color: var(--canon-fg-secondary);
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
margin-left: var(--canon-space-1);
}
.canon-Select--icon {
.canon-SelectIcon {
display: flex;
align-items: center;
justify-content: center;
}
.canon-Select--value {
.canon-SelectValue {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
packages/canon/src/components/Select/Select.tsx
+12 -14
View File
@@ -48,10 +48,10 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
return (
<div className={clsx('canon-Select', className)} style={style} ref={ref}>
{label && (
<label className="canon-Select--label" htmlFor={selectId}>
<label className="canon-SelectLabel" htmlFor={selectId}>
{label}
{required && (
<span aria-hidden="true" className="canon-Select--required">
<span aria-hidden="true" className="canon-SelectRequired">
(Required)
</span>
)}
@@ -60,35 +60,33 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
<SelectPrimitive.Root {...rest}>
<SelectPrimitive.Trigger
id={selectId}
className={clsx('canon-Select--trigger', {
'canon-Select--trigger-size-small': responsiveSize === 'small',
'canon-Select--trigger-size-medium': responsiveSize === 'medium',
})}
className="canon-SelectTrigger"
data-size={responsiveSize}
data-invalid={error}
>
<SelectPrimitive.Value
className="canon-Select--value"
className="canon-SelectValue"
placeholder={placeholder}
/>
<SelectPrimitive.Icon className="canon-Select--icon">
<SelectPrimitive.Icon className="canon-SelectIcon">
<Icon name="chevron-down" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
<SelectPrimitive.Portal>
<SelectPrimitive.Backdrop />
<SelectPrimitive.Positioner>
<SelectPrimitive.Popup className="canon-Select--popup">
<SelectPrimitive.Popup className="canon-SelectPopup">
{options?.map(option => (
<SelectPrimitive.Item
key={option.value}
value={option.value}
disabled={option.disabled}
className="canon-Select--item"
className="canon-SelectItem"
>
<SelectPrimitive.ItemIndicator className="canon-Select--item-indicator">
<SelectPrimitive.ItemIndicator className="canon-SelectItemIndicator">
<Icon name="check" />
</SelectPrimitive.ItemIndicator>
<SelectPrimitive.ItemText className="canon-Select--item-text">
<SelectPrimitive.ItemText className="canon-SelectItemText">
{option.label}
</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
@@ -98,12 +96,12 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
</SelectPrimitive.Portal>
</SelectPrimitive.Root>
{description && (
<p className="canon-Select--description" id={descriptionId}>
<p className="canon-SelectDescription" id={descriptionId}>
{description}
</p>
)}
{error && (
<p className="canon-Select--error" id={errorId} role="alert">
<p className="canon-SelectError" id={errorId} role="alert">
{error}
</p>
)}
packages/canon/src/components/Text/Text.tsx
+4 -7
View File
@@ -41,13 +41,10 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
return (
<p
ref={ref}
className={clsx(
'canon-Text',
responsiveVariant && `canon-Text--variant-${responsiveVariant}`,
responsiveWeight && `canon-Text--weight-${responsiveWeight}`,
responsiveColor && `canon-Text--color-${responsiveColor}`,
className,
)}
className={clsx('canon-Text', className)}
data-variant={responsiveVariant}
data-weight={responsiveWeight}
data-color={responsiveColor}
style={style}
{...restProps}
>
packages/canon/src/components/Text/styles.css
+11 -12
View File
@@ -16,55 +16,54 @@
.canon-Text {
font-family: var(--canon-font-regular);
color: var(--canon-fg-primary);
padding: 0;
margin: 0;
}
.canon-Text--variant-body {
.canon-Text[data-variant='body'] {
font-size: var(--canon-font-size-3);
line-height: 140%;
}
.canon-Text--variant-subtitle {
.canon-Text[data-variant='subtitle'] {
font-size: var(--canon-font-size-4);
line-height: 140%;
}
.canon-Text--variant-caption {
.canon-Text[data-variant='caption'] {
font-size: var(--canon-font-size-2);
line-height: 140%;
}
.canon-Text--variant-label {
.canon-Text[data-variant='label'] {
font-size: var(--canon-font-size-1);
line-height: 140%;
}
.canon-Text--weight-regular {
.canon-Text[data-weight='regular'] {
font-weight: var(--canon-font-weight-regular);
}
.canon-Text--weight-bold {
.canon-Text[data-weight='bold'] {
font-weight: var(--canon-font-weight-bold);
}
.canon-Text--color-primary {
.canon-Text[data-color='primary'] {
color: var(--canon-fg-primary);
}
.canon-Text--color-secondary {
.canon-Text[data-color='secondary'] {
color: var(--canon-fg-secondary);
}
.canon-Text--color-danger {
.canon-Text[data-color='danger'] {
color: var(--canon-fg-danger);
}
.canon-Text--color-warning {
.canon-Text[data-color='warning'] {
color: var(--canon-fg-warning);
}
.canon-Text--color-success {
.canon-Text[data-color='success'] {
color: var(--canon-fg-success);
}
packages/canon/src/components/TextField/TextField.styles.css
+12 -12
View File
@@ -21,14 +21,14 @@
width: 100%;
}
.canon-TextField--label {
.canon-TextFieldLabel {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-primary);
margin-bottom: var(--canon-space-1_5);
}
.canon-TextField--description {
.canon-TextFieldDescription {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-secondary);
@@ -36,7 +36,7 @@
padding-top: var(--canon-space-1_5);
}
.canon-TextField--error {
.canon-TextFieldError {
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-danger);
@@ -44,7 +44,7 @@
padding-top: var(--canon-space-1_5);
}
.canon-TextField--input {
.canon-TextFieldInput {
border-radius: var(--canon-radius-3);
border: 1px solid var(--canon-border);
padding: 0 var(--canon-space-4);
@@ -57,39 +57,39 @@
width: 100%;
}
.canon-TextField--input::placeholder {
.canon-TextFieldInput::placeholder {
color: var(--canon-fg-secondary);
}
.canon-TextField--input:hover {
.canon-TextFieldInput:hover {
border-color: var(--canon-border-hover);
}
.canon-TextField--input:focus-visible {
.canon-TextFieldInput:focus-visible {
outline-color: var(--canon-border-pressed);
outline-width: 0px;
border-color: var(--canon-border-pressed);
}
.canon-TextField--input[data-invalid] {
.canon-TextFieldInput[data-invalid] {
border-color: var(--canon-fg-danger);
}
.canon-TextField--input[data-disabled] {
.canon-TextFieldInput[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
border: 1px solid var(--canon-border-disabled);
}
.canon-TextField--input-size-small {
.canon-TextFieldInput[data-size='small'] {
height: 2rem;
}
.canon-TextField--input-size-medium {
.canon-TextFieldInput[data-size='medium'] {
height: 2.5rem;
}
.canon-TextField--required {
.canon-TextFieldRequired {
color: var(--canon-fg-secondary);
font-size: var(--canon-font-size-2);
font-weight: var(--canon-font-weight-regular);
packages/canon/src/components/TextField/TextField.tsx
+6 -8
View File
@@ -50,10 +50,10 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
ref={ref}
>
{label && (
<label className="canon-TextField--label" htmlFor={inputId}>
<label className="canon-TextFieldLabel" htmlFor={inputId}>
{label}
{required && (
<span aria-hidden="true" className="canon-TextField--required">
<span aria-hidden="true" className="canon-TextFieldRequired">
(Required)
</span>
)}
@@ -61,10 +61,8 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
)}
<Input
id={inputId}
className={clsx('canon-TextField--input', {
'canon-TextField--input-size-small': responsiveSize === 'small',
'canon-TextField--input-size-medium': responsiveSize === 'medium',
})}
className="canon-TextFieldInput"
data-size={responsiveSize}
aria-labelledby={label ? inputId : undefined}
aria-describedby={clsx({
[descriptionId]: description,
@@ -75,12 +73,12 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
{...rest}
/>
{description && (
<p className="canon-TextField--description" id={descriptionId}>
<p className="canon-TextFieldDescription" id={descriptionId}>
{description}
</p>
)}
{error && (
<p className="canon-TextField--error" id={errorId} role="alert">
<p className="canon-TextFieldError" id={errorId} role="alert">
{error}
</p>
)}