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

Build CSS

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-04-12 15:25:58 +02:00
parent 95a233c631
commit 85319ac8cf
7 changed files with 66 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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-Button--icon {
width: 1rem;
height: 1rem;
}
.canon-Button--size-medium .canon-Button--icon {
.canon-Button[data-size="medium"] .canon-Button--icon {
width: 1.5rem;
height: 1.5rem;
}
packages/canon/css/components.css
+22 -22
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-Button--icon {
width: 1rem;
height: 1rem;
}
.canon-Button--size-medium .canon-Button--icon {
.canon-Button[data-size="medium"] .canon-Button--icon {
width: 1.5rem;
height: 1.5rem;
}
@@ -348,7 +348,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;
@@ -372,7 +372,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);
@@ -398,24 +398,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-IconButton--icon {
width: 1rem;
height: 1rem;
}
.canon-IconButton--size-medium .canon-IconButton--icon {
.canon-IconButton[data-size="medium"] .canon-IconButton--icon {
width: 1.5rem;
height: 1.5rem;
}
@@ -487,11 +487,11 @@
border: 1px solid var(--canon-border-disabled);
}
.canon-TextField--input-size-small {
.canon-TextField--input[data-size="small"] {
height: 2rem;
}
.canon-TextField--input-size-medium {
.canon-TextField--input[data-size="medium"] {
height: 2.5rem;
}
@@ -572,31 +572,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);
}
@@ -789,11 +789,11 @@
color: var(--canon-fg-disabled);
}
.canon-Select--trigger-size-small {
.canon-Select--trigger[data-size="small"] {
height: 2rem;
}
.canon-Select--trigger-size-medium {
.canon-Select--trigger[data-size="medium"] {
height: 3rem;
}
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-IconButton--icon {
width: 1rem;
height: 1rem;
}
.canon-IconButton--size-medium .canon-IconButton--icon {
.canon-IconButton[data-size="medium"] .canon-IconButton--icon {
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
+2 -2
View File
@@ -74,11 +74,11 @@
color: var(--canon-fg-disabled);
}
.canon-Select--trigger-size-small {
.canon-Select--trigger[data-size="small"] {
height: 2rem;
}
.canon-Select--trigger-size-medium {
.canon-Select--trigger[data-size="medium"] {
height: 3rem;
}
packages/canon/css/styles.css
+22 -22
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-Button--icon {
width: 1rem;
height: 1rem;
}
.canon-Button--size-medium .canon-Button--icon {
.canon-Button[data-size="medium"] .canon-Button--icon {
width: 1.5rem;
height: 1.5rem;
}
@@ -9572,7 +9572,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;
@@ -9596,7 +9596,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);
@@ -9622,24 +9622,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-IconButton--icon {
width: 1rem;
height: 1rem;
}
.canon-IconButton--size-medium .canon-IconButton--icon {
.canon-IconButton[data-size="medium"] .canon-IconButton--icon {
width: 1.5rem;
height: 1.5rem;
}
@@ -9711,11 +9711,11 @@
border: 1px solid var(--canon-border-disabled);
}
.canon-TextField--input-size-small {
.canon-TextField--input[data-size="small"] {
height: 2rem;
}
.canon-TextField--input-size-medium {
.canon-TextField--input[data-size="medium"] {
height: 2.5rem;
}
@@ -9796,31 +9796,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);
}
@@ -10013,11 +10013,11 @@
color: var(--canon-fg-disabled);
}
.canon-Select--trigger-size-small {
.canon-Select--trigger[data-size="small"] {
height: 2rem;
}
.canon-Select--trigger-size-medium {
.canon-Select--trigger[data-size="medium"] {
height: 3rem;
}
packages/canon/css/textfield.css
+2 -2
View File
@@ -65,11 +65,11 @@
border: 1px solid var(--canon-border-disabled);
}
.canon-TextField--input-size-small {
.canon-TextField--input[data-size="small"] {
height: 2rem;
}
.canon-TextField--input-size-medium {
.canon-TextField--input[data-size="medium"] {
height: 2.5rem;
}