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

Add the CSS output to Git

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-03-13 14:21:30 +00:00
parent 118f721447
commit 946693e94b
31 changed files with 32 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/.gitignore
-3
View File
@@ -1,5 +1,2 @@
# Build output
storybook-static
# CSS output
/css
packages/canon/css/box.css
+1
View File
@@ -0,0 +1 @@
.canon-Box{font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-regular);color:var(--canon-fg-primary)}
packages/canon/css/box.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":null,"mappings":"AAAA","sources":["css/box.css"],"sourcesContent":[".canon-Box {\n font-family: var(--canon-font-regular);\n font-weight: var(--canon-font-weight-regular);\n color: var(--canon-fg-primary);\n}\n"],"names":[]}
packages/canon/css/button.css
+1
View File
@@ -0,0 +1 @@
.canon-Button{user-select:none;font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-bold);cursor:pointer;border-radius:var(--canon-radius-2);justify-content:center;align-items:center;gap:var(--canon-space-1_5);border:none;padding:0;display:inline-flex;&:disabled{cursor:not-allowed}}.canon-Button--variant-primary{background-color:var(--canon-bg-solid);color:var(--canon-fg-solid);transition:background-color .15s,box-shadow .15s;&:hover{background-color:var(--canon-bg-solid-hover)}&:active{background-color:var(--canon-bg-solid-pressed)}&:focus-visible{outline:2px solid var(--canon-ring);outline-offset:2px}&:disabled{background-color:var(--canon-bg-solid-disabled);color:var(--canon-fg-solid-disabled)}}.canon-Button--variant-secondary{background-color:var(--canon-bg-elevated);box-shadow:inset 0 0 0 1px var(--canon-border);color:var(--canon-fg-primary);transition:box-shadow .15s;&:hover{box-shadow:inset 0 0 0 1px var(--canon-border-hover)}&:active{box-shadow:inset 0 0 0 1px var(--canon-border-pressed)}&:focus-visible{box-shadow:inset 0 0 0 2px var(--canon-ring);outline:none;transition:none}&:disabled{box-shadow:inset 0 0 0 1px var(--canon-border-disabled);color:var(--canon-fg-disabled)}}.canon-Button--size-medium{font-size:var(--canon-font-size-4);padding:0 var(--canon-space-3);height:40px}.canon-Button--size-small{font-size:var(--canon-font-size-3);padding:0 var(--canon-space-2);height:32px}.canon-Button--size-small .canon-Button--icon{width:1rem;height:1rem}.canon-Button--size-medium .canon-Button--icon{width:1.5rem;height:1.5rem}
packages/canon/css/button.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":null,"mappings":"AAAA,iRAaE,+BAKF,mJAKE,qDAIA,wDAIA,uEAKA,iGAMF,mLAME,6DAIA,gEAIA,0FAMA,mGAMF,yGAMA,wGAMA,qEAKA","sources":["css/button.css"],"sourcesContent":[".canon-Button {\n user-select: none;\n font-family: var(--canon-font-regular);\n font-weight: var(--canon-font-weight-bold);\n cursor: pointer;\n border-radius: var(--canon-radius-2);\n justify-content: center;\n align-items: center;\n gap: var(--canon-space-1_5);\n border: none;\n padding: 0;\n display: inline-flex;\n\n &:disabled {\n cursor: not-allowed;\n }\n}\n\n.canon-Button--variant-primary {\n background-color: var(--canon-bg-solid);\n color: var(--canon-fg-solid);\n transition: background-color .15s, box-shadow .15s;\n\n &:hover {\n background-color: var(--canon-bg-solid-hover);\n }\n\n &:active {\n background-color: var(--canon-bg-solid-pressed);\n }\n\n &:focus-visible {\n outline: 2px solid var(--canon-ring);\n outline-offset: 2px;\n }\n\n &:disabled {\n background-color: var(--canon-bg-solid-disabled);\n color: var(--canon-fg-solid-disabled);\n }\n}\n\n.canon-Button--variant-secondary {\n background-color: var(--canon-bg-elevated);\n box-shadow: inset 0 0 0 1px var(--canon-border);\n color: var(--canon-fg-primary);\n transition: box-shadow .15s;\n\n &:hover {\n box-shadow: inset 0 0 0 1px var(--canon-border-hover);\n }\n\n &:active {\n box-shadow: inset 0 0 0 1px var(--canon-border-pressed);\n }\n\n &:focus-visible {\n box-shadow: inset 0 0 0 2px var(--canon-ring);\n outline: none;\n transition: none;\n }\n\n &:disabled {\n box-shadow: inset 0 0 0 1px var(--canon-border-disabled);\n color: var(--canon-fg-disabled);\n }\n}\n\n.canon-Button--size-medium {\n font-size: var(--canon-font-size-4);\n padding: 0 var(--canon-space-3);\n height: 40px;\n}\n\n.canon-Button--size-small {\n font-size: var(--canon-font-size-3);\n padding: 0 var(--canon-space-2);\n height: 32px;\n}\n\n.canon-Button--size-small .canon-Button--icon {\n width: 1rem;\n height: 1rem;\n}\n\n.canon-Button--size-medium .canon-Button--icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n"],"names":[]}
packages/canon/css/checkbox.css
+1
View File
@@ -0,0 +1 @@
.canon-CheckboxRoot{width:1rem;height:1rem;box-shadow:inset 0 0 0 1px var(--canon-border);cursor:pointer;border:none;border-radius:2px;justify-content:center;align-items:center;transition:all .2s ease-in-out;display:flex;&:focus-visible{outline:2px solid var(--canon-ring);outline-offset:2px;transition:none}&[data-checked]{background-color:var(--canon-bg-solid);color:var(--canon-fg-solid)}}.canon-CheckboxLabel{align-items:center;gap:var(--canon-space-2);font-size:var(--canon-font-size-3);font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-regular);color:var(--canon-fg-primary);user-select:none;flex-direction:row;display:flex;&:hover{& .canon-CheckboxRoot{box-shadow:inset 0 0 0 1px var(--canon-border-hover)}}}.canon-CheckboxIndicator{color:var(--canon-fg-accent);justify-content:center;align-items:center;display:flex}
packages/canon/css/checkbox.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":null,"mappings":"AAAA,6NAYE,uFAMA,oFAMF,sQAWE,QACE,6EAMJ","sources":["css/checkbox.css"],"sourcesContent":[".canon-CheckboxRoot {\n width: 1rem;\n height: 1rem;\n box-shadow: inset 0 0 0 1px var(--canon-border);\n cursor: pointer;\n border: none;\n border-radius: 2px;\n justify-content: center;\n align-items: center;\n transition: all .2s ease-in-out;\n display: flex;\n\n &:focus-visible {\n outline: 2px solid var(--canon-ring);\n outline-offset: 2px;\n transition: none;\n }\n\n &[data-checked] {\n background-color: var(--canon-bg-solid);\n color: var(--canon-fg-solid);\n }\n}\n\n.canon-CheckboxLabel {\n align-items: center;\n gap: var(--canon-space-2);\n font-size: var(--canon-font-size-3);\n font-family: var(--canon-font-regular);\n font-weight: var(--canon-font-weight-regular);\n color: var(--canon-fg-primary);\n user-select: none;\n flex-direction: row;\n display: flex;\n\n &:hover {\n & .canon-CheckboxRoot {\n box-shadow: inset 0 0 0 1px var(--canon-border-hover);\n }\n }\n}\n\n.canon-CheckboxIndicator {\n color: var(--canon-fg-accent);\n justify-content: center;\n align-items: center;\n display: flex;\n}\n"],"names":[]}
packages/canon/css/components.css
+1
View File
File diff suppressed because one or more lines are too long
packages/canon/css/components.css.map
+1
View File
File diff suppressed because one or more lines are too long
packages/canon/css/container.css
+1
View File
@@ -0,0 +1 @@
.canon-Container{max-width:75rem;margin:0 auto;padding:0 1rem}
packages/canon/css/container.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":null,"mappings":"AAAA","sources":["css/container.css"],"sourcesContent":[".canon-Container {\n max-width: 75rem;\n margin: 0 auto;\n padding: 0 1rem;\n}\n"],"names":[]}
packages/canon/css/core.css
+2
View File
File diff suppressed because one or more lines are too long
packages/canon/css/core.css.map
+1
View File
File diff suppressed because one or more lines are too long
packages/canon/css/field.css
+1
View File
@@ -0,0 +1 @@
.canon-FieldRoot{font-family:var(--canon-font-regular);flex-direction:column;width:100%;display:flex}.canon-FieldLabel{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-FieldDescription{font-size:var(--canon-font-size-2);font-weight:var(--canon-font-weight-regular);color:var(--canon-fg-secondary);padding-top:var(--canon-space-1_5);margin:0}.canon-FieldError{font-size:var(--canon-font-size-2);font-weight:var(--canon-font-weight-regular);color:var(--canon-fg-danger);padding-top:var(--canon-space-1_5);margin:0}.canon-FieldValidity{font-size:var(--canon-font-size-2);font-weight:var(--canon-font-weight-regular);color:var(--canon-fg-secondary);padding-top:var(--canon-space-1_5);margin:0}
packages/canon/css/field.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":null,"mappings":"AAAA,qGAOA,qKAOA,oLAQA,2KAQA","sources":["css/field.css"],"sourcesContent":[".canon-FieldRoot {\n font-family: var(--canon-font-regular);\n flex-direction: column;\n width: 100%;\n display: flex;\n}\n\n.canon-FieldLabel {\n font-size: var(--canon-font-size-2);\n font-weight: var(--canon-font-weight-regular);\n color: var(--canon-fg-primary);\n margin-bottom: var(--canon-space-1_5);\n}\n\n.canon-FieldDescription {\n font-size: var(--canon-font-size-2);\n font-weight: var(--canon-font-weight-regular);\n color: var(--canon-fg-secondary);\n padding-top: var(--canon-space-1_5);\n margin: 0;\n}\n\n.canon-FieldError {\n font-size: var(--canon-font-size-2);\n font-weight: var(--canon-font-weight-regular);\n color: var(--canon-fg-danger);\n padding-top: var(--canon-space-1_5);\n margin: 0;\n}\n\n.canon-FieldValidity {\n font-size: var(--canon-font-size-2);\n font-weight: var(--canon-font-weight-regular);\n color: var(--canon-fg-secondary);\n padding-top: var(--canon-space-1_5);\n margin: 0;\n}\n"],"names":[]}
packages/canon/css/flex.css
+1
View File
@@ -0,0 +1 @@
.canon-Flex{display:flex}
packages/canon/css/flex.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":null,"mappings":"AAAA","sources":["css/flex.css"],"sourcesContent":[".canon-Flex {\n display: flex;\n}\n"],"names":[]}
packages/canon/css/grid.css
+1
View File
@@ -0,0 +1 @@
.canon-Grid{display:grid}
packages/canon/css/grid.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":null,"mappings":"AAAA","sources":["css/grid.css"],"sourcesContent":[".canon-Grid {\n display: grid;\n}\n"],"names":[]}
packages/canon/css/heading.css
+1
View File
@@ -0,0 +1 @@
.canon-Heading{font-family:var(--canon-font-regular);color:var(--canon-fg-primary);margin:0;padding:0;line-height:100%}.canon-Heading--variant-display{font-size:var(--canon-font-size-10);font-weight:var(--canon-font-weight-bold)}.canon-Heading--variant-title1{font-size:var(--canon-font-size-9);font-weight:var(--canon-font-weight-bold)}.canon-Heading--variant-title2{font-size:var(--canon-font-size-8);font-weight:var(--canon-font-weight-bold)}.canon-Heading--variant-title3{font-size:var(--canon-font-size-7);font-weight:var(--canon-font-weight-bold)}.canon-Heading--variant-title4{font-size:var(--canon-font-size-title4);font-weight:var(--canon-font-weight-bold)}.canon-Heading--variant-title5{font-size:var(--canon-font-size-5);font-weight:var(--canon-font-weight-bold)}
packages/canon/css/heading.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":null,"mappings":"AAAA,uHAQA,8GAKA,4GAKA,4GAKA,4GAKA,iHAKA","sources":["css/heading.css"],"sourcesContent":[".canon-Heading {\n font-family: var(--canon-font-regular);\n color: var(--canon-fg-primary);\n margin: 0;\n padding: 0;\n line-height: 100%;\n}\n\n.canon-Heading--variant-display {\n font-size: var(--canon-font-size-10);\n font-weight: var(--canon-font-weight-bold);\n}\n\n.canon-Heading--variant-title1 {\n font-size: var(--canon-font-size-9);\n font-weight: var(--canon-font-weight-bold);\n}\n\n.canon-Heading--variant-title2 {\n font-size: var(--canon-font-size-8);\n font-weight: var(--canon-font-weight-bold);\n}\n\n.canon-Heading--variant-title3 {\n font-size: var(--canon-font-size-7);\n font-weight: var(--canon-font-weight-bold);\n}\n\n.canon-Heading--variant-title4 {\n font-size: var(--canon-font-size-title4);\n font-weight: var(--canon-font-weight-bold);\n}\n\n.canon-Heading--variant-title5 {\n font-size: var(--canon-font-size-5);\n font-weight: var(--canon-font-weight-bold);\n}\n"],"names":[]}
packages/canon/css/icon.css
+1
View File
@@ -0,0 +1 @@
.canon-Icon{width:1rem;height:1rem}
packages/canon/css/icon.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":null,"mappings":"AAAA","sources":["css/icon.css"],"sourcesContent":[".canon-Icon {\n width: 1rem;\n height: 1rem;\n}\n"],"names":[]}
packages/canon/css/input.css
+1
View File
@@ -0,0 +1 @@
.canon-Input{border-radius:var(--canon-radius-3);border:1px solid var(--canon-border);padding:0 var(--canon-space-4);background-color:var(--canon-bg-elevated);font-size:var(--canon-font-size-3);font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-regular);color:var(--canon-fg-primary);width:100%;transition:border-color .2s ease-in-out,outline-color .2s ease-in-out}.canon-Input::placeholder{color:var(--canon-fg-secondary)}.canon-Input:hover{border-color:var(--canon-border-hover)}.canon-Input:focus-visible{outline-color:var(--canon-border-pressed);border-color:var(--canon-border-pressed);outline-width:0}.canon-Input[data-invalid]{border-color:var(--canon-fg-danger)}.canon-Input--size-sm{height:2rem}.canon-Input--size-md{height:2.5rem}
packages/canon/css/input.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":null,"mappings":"AAAA,oYAaA,0DAIA,0DAIA,8HAMA,+DAIA,kCAIA","sources":["css/input.css"],"sourcesContent":[".canon-Input {\n border-radius: var(--canon-radius-3);\n border: 1px solid var(--canon-border);\n padding: 0 var(--canon-space-4);\n background-color: var(--canon-bg-elevated);\n font-size: var(--canon-font-size-3);\n font-family: var(--canon-font-regular);\n font-weight: var(--canon-font-weight-regular);\n color: var(--canon-fg-primary);\n width: 100%;\n transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;\n}\n\n.canon-Input::placeholder {\n color: var(--canon-fg-secondary);\n}\n\n.canon-Input:hover {\n border-color: var(--canon-border-hover);\n}\n\n.canon-Input:focus-visible {\n outline-color: var(--canon-border-pressed);\n border-color: var(--canon-border-pressed);\n outline-width: 0;\n}\n\n.canon-Input[data-invalid] {\n border-color: var(--canon-fg-danger);\n}\n\n.canon-Input--size-sm {\n height: 2rem;\n}\n\n.canon-Input--size-md {\n height: 2.5rem;\n}\n"],"names":[]}
packages/canon/css/styles.css
+2
View File
File diff suppressed because one or more lines are too long
packages/canon/css/styles.css.map
+1
View File
File diff suppressed because one or more lines are too long
packages/canon/css/table.css
+1
View File
@@ -0,0 +1 @@
.table{background-color:var(--canon-bg-elevated);border-radius:var(--canon-radius-2);width:100%;padding-bottom:var(--canon-space-0_5);padding-top:var(--canon-space-0_5);font-size:var(--canon-font-size-3);font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-regular);position:relative;overflow:auto;& table{caption-side:bottom;width:100%;font-size:var(--canon-font-size-sm);border-collapse:collapse}}.table-head{text-align:left;padding:var(--canon-space-3)}.table-body{& tr:last-child{border-bottom:none}}.table-row{transition:color .2s ease-in-out;&:hover td{background-color:var(--canon-bg-tint)}& .table-cell:first-child{border-top-left-radius:var(--canon-radius-2);border-bottom-left-radius:var(--canon-radius-2);box-shadow:inset 4px 2px 0 0 var(--canon-bg-elevated),inset 4px -2px 0 0 var(--canon-bg-elevated);padding-left:var(--canon-space-3)}& .table-cell:last-child{border-top-right-radius:var(--canon-radius-2);border-bottom-right-radius:var(--canon-radius-2);box-shadow:inset -4px 2px 0 0 var(--canon-bg-elevated),inset -4px -2px 0 0 var(--canon-bg-elevated);padding-right:var(--canon-space-3)}}.table-cell{padding:var(--canon-space-3);background-color:var(--canon-bg);box-shadow:inset 0px 2px 0 0 var(--canon-bg-elevated),inset 0px -2px 0 0 var(--canon-bg-elevated)}
packages/canon/css/table.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":null,"mappings":"AAAA,+TAYE,qGAQF,yDAKA,YACE,oCAKF,4CAGE,iDAIA,2PAOA,gQAQF","sources":["css/table.css"],"sourcesContent":[".table {\n background-color: var(--canon-bg-elevated);\n border-radius: var(--canon-radius-2);\n width: 100%;\n padding-bottom: var(--canon-space-0_5);\n padding-top: var(--canon-space-0_5);\n font-size: var(--canon-font-size-3);\n font-family: var(--canon-font-regular);\n font-weight: var(--canon-font-weight-regular);\n position: relative;\n overflow: auto;\n\n & table {\n caption-side: bottom;\n width: 100%;\n font-size: var(--canon-font-size-sm);\n border-collapse: collapse;\n }\n}\n\n.table-head {\n text-align: left;\n padding: var(--canon-space-3);\n}\n\n.table-body {\n & tr:last-child {\n border-bottom: none;\n }\n}\n\n.table-row {\n transition: color .2s ease-in-out;\n\n &:hover td {\n background-color: var(--canon-bg-tint);\n }\n\n & .table-cell:first-child {\n border-top-left-radius: var(--canon-radius-2);\n border-bottom-left-radius: var(--canon-radius-2);\n box-shadow: inset 4px 2px 0 0 var(--canon-bg-elevated), inset 4px -2px 0 0 var(--canon-bg-elevated);\n padding-left: var(--canon-space-3);\n }\n\n & .table-cell:last-child {\n border-top-right-radius: var(--canon-radius-2);\n border-bottom-right-radius: var(--canon-radius-2);\n box-shadow: inset -4px 2px 0 0 var(--canon-bg-elevated), inset -4px -2px 0 0 var(--canon-bg-elevated);\n padding-right: var(--canon-space-3);\n }\n}\n\n.table-cell {\n padding: var(--canon-space-3);\n background-color: var(--canon-bg);\n box-shadow: inset 0px 2px 0 0 var(--canon-bg-elevated), inset 0px -2px 0 0 var(--canon-bg-elevated);\n}\n"],"names":[]}
packages/canon/css/text.css
+1
View File
@@ -0,0 +1 @@
.canon-Text{font-family:var(--canon-font-regular);color:var(--canon-fg-primary);margin:0;padding:0}.canon-Text--variant-body{font-size:var(--canon-font-size-3);line-height:140%}.canon-Text--variant-subtitle{font-size:var(--canon-font-size-4);line-height:140%}.canon-Text--variant-caption{font-size:var(--canon-font-size-2);line-height:140%}.canon-Text--variant-label{font-size:var(--canon-font-size-1);line-height:140%}.canon-Text--weight-regular{font-weight:var(--canon-font-weight-regular)}.canon-Text--weight-bold{font-weight:var(--canon-font-weight-bold)}
packages/canon/css/text.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":null,"mappings":"AAAA,mGAOA,8EAKA,kFAKA,iFAKA,+EAKA,yEAIA","sources":["css/text.css"],"sourcesContent":[".canon-Text {\n font-family: var(--canon-font-regular);\n color: var(--canon-fg-primary);\n margin: 0;\n padding: 0;\n}\n\n.canon-Text--variant-body {\n font-size: var(--canon-font-size-3);\n line-height: 140%;\n}\n\n.canon-Text--variant-subtitle {\n font-size: var(--canon-font-size-4);\n line-height: 140%;\n}\n\n.canon-Text--variant-caption {\n font-size: var(--canon-font-size-2);\n line-height: 140%;\n}\n\n.canon-Text--variant-label {\n font-size: var(--canon-font-size-1);\n line-height: 140%;\n}\n\n.canon-Text--weight-regular {\n font-weight: var(--canon-font-weight-regular);\n}\n\n.canon-Text--weight-bold {\n font-weight: var(--canon-font-weight-bold);\n}\n"],"names":[]}