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

Remove minify

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-03-18 11:03:41 +00:00
parent 89ac135054
commit 97498fddf8
21 changed files with 20615 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/css/box.css
+5 -1
View File
@@ -1 +1,5 @@
.canon-Box{font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-regular);color:var(--canon-fg-primary)}
.canon-Box {
font-family: var(--canon-font-regular);
font-weight: var(--canon-font-weight-regular);
color: var(--canon-fg-primary);
}
packages/canon/css/button.css
+89 -1
View File
@@ -1 +1,89 @@
.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-surface-1);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}
.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-surface-1);
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/checkbox.css
+48 -1
View File
@@ -1 +1,48 @@
.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}
.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/components.css
+744 -1
View File
File diff suppressed because one or more lines are too long
packages/canon/css/container.css
+5 -1
View File
@@ -1 +1,5 @@
.canon-Container{max-width:75rem;margin:0 auto;padding:0 1rem}
.canon-Container {
max-width: 75rem;
margin: 0 auto;
padding: 0 1rem;
}
packages/canon/css/core.css
+9199 -1
View File
File diff suppressed because one or more lines are too long
packages/canon/css/field.css
+37 -1
View File
@@ -1 +1,37 @@
.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}
.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/flex.css
+3 -1
View File
@@ -1 +1,3 @@
.canon-Flex{display:flex}
.canon-Flex {
display: flex;
}
packages/canon/css/grid.css
+3 -1
View File
@@ -1 +1,3 @@
.canon-Grid{display:grid}
.canon-Grid {
display: grid;
}
packages/canon/css/heading.css
+37 -1
View File
@@ -1 +1,37 @@
.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)}
.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/icon.css
+4 -1
View File
@@ -1 +1,4 @@
.canon-Icon{width:1rem;height:1rem}
.canon-Icon {
width: 1rem;
height: 1rem;
}
packages/canon/css/iconbutton.css
+89 -1
View File
@@ -1 +1,89 @@
.canon-IconButton{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-IconButton--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-IconButton--variant-secondary{background-color:var(--canon-bg-surface-1);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-IconButton--size-medium{font-size:var(--canon-font-size-4);width:40px;height:40px}.canon-IconButton--size-small{font-size:var(--canon-font-size-3);width:32px;height:32px}.canon-IconButton--size-small .canon-IconButton--icon{width:1rem;height:1rem}.canon-IconButton--size-medium .canon-IconButton--icon{width:1.5rem;height:1.5rem}
.canon-IconButton {
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-IconButton--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-IconButton--variant-secondary {
background-color: var(--canon-bg-surface-1);
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-IconButton--size-medium {
font-size: var(--canon-font-size-4);
width: 40px;
height: 40px;
}
.canon-IconButton--size-small {
font-size: var(--canon-font-size-3);
width: 32px;
height: 32px;
}
.canon-IconButton--size-small .canon-IconButton--icon {
width: 1rem;
height: 1rem;
}
.canon-IconButton--size-medium .canon-IconButton--icon {
width: 1.5rem;
height: 1.5rem;
}
packages/canon/css/input.css
+38 -1
View File
@@ -1 +1,38 @@
.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-surface-1);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}
.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-surface-1);
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/link.css
+45 -1
View File
@@ -1 +1,45 @@
.canon-Link{font-family:var(--canon-font-regular);color:var(--canon-fg-link);cursor:pointer;margin:0;padding:0;text-decoration-line:none;&:hover{color:var(--canon-fg-link-hover);text-underline-offset:calc(.025em + 2px);text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:min(2px,max(1px,.05em));text-decoration-color:color-mix(in srgb,var(--canon-fg-link-hover)30%,transparent)}}.canon-Link--variant-body{font-size:var(--canon-font-size-3);line-height:140%}.canon-Link--variant-subtitle{font-size:var(--canon-font-size-4);line-height:140%}.canon-Link--variant-caption{font-size:var(--canon-font-size-2);line-height:140%}.canon-Link--variant-label{font-size:var(--canon-font-size-1);line-height:140%}.canon-Link--weight-regular{font-weight:var(--canon-font-weight-regular)}.canon-Link--weight-bold{font-weight:var(--canon-font-weight-bold)}
.canon-Link {
font-family: var(--canon-font-regular);
color: var(--canon-fg-link);
cursor: pointer;
margin: 0;
padding: 0;
text-decoration-line: none;
&:hover {
color: var(--canon-fg-link-hover);
text-underline-offset: calc(.025em + 2px);
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: min(2px, max(1px, .05em));
text-decoration-color: color-mix(in srgb, var(--canon-fg-link-hover) 30%, transparent);
}
}
.canon-Link--variant-body {
font-size: var(--canon-font-size-3);
line-height: 140%;
}
.canon-Link--variant-subtitle {
font-size: var(--canon-font-size-4);
line-height: 140%;
}
.canon-Link--variant-caption {
font-size: var(--canon-font-size-2);
line-height: 140%;
}
.canon-Link--variant-label {
font-size: var(--canon-font-size-1);
line-height: 140%;
}
.canon-Link--weight-regular {
font-weight: var(--canon-font-weight-regular);
}
.canon-Link--weight-bold {
font-weight: var(--canon-font-weight-bold);
}
packages/canon/css/menu.css
+102 -1
View File
@@ -1 +1,102 @@
.canon-MenuTrigger{box-sizing:border-box;border:1px solid var(--color-gray-200);background-color:var(--color-gray-50);height:2.5rem;color:var(--color-gray-900);user-select:none;border-radius:.375rem;outline:0;justify-content:center;align-items:center;gap:.375rem;margin:0;padding:0 .875rem;font-family:inherit;font-size:1rem;font-weight:500;line-height:1.5rem;display:flex;@media (hover:hover){&:hover{background-color:var(--color-gray-100)}}&:active,&[data-popup-open]{background-color:var(--color-gray-100)}&:focus-visible{outline:2px solid var(--color-blue);outline-offset:-1px}}.canon-MenuPositioner{outline:0}.canon-MenuPopup{box-sizing:border-box;background-color:var(--canon-bg-elevated);color:var(--color-fg-primary);transform-origin:var(--transform-origin);border-radius:.375rem;padding-block:.25rem;transition:transform .15s,opacity .15s;&[data-starting-style],&[data-ending-style]{opacity:0;transform:scale(.9)}@media (prefers-color-scheme:light){&{outline:1px solid var(--color-gray-200);box-shadow:0px 10px 15px -3px var(--color-gray-200),0px 4px 6px -4px var(--color-gray-200)}}@media (prefers-color-scheme:dark){&{outline:1px solid var(--color-gray-300);outline-offset:-1px}}}.canon-MenuItem{cursor:default;user-select:none;padding-block:.5rem;outline:0;padding-left:1rem;padding-right:2rem;font-size:.875rem;line-height:1rem;display:flex;&[data-highlighted]{z-index:0;color:var(--color-gray-50);position:relative}&[data-highlighted]:before{content:"";z-index:-1;background-color:var(--color-gray-900);border-radius:.25rem;position:absolute;inset-block:0;inset-inline:.25rem}}.canon-MenuSeparator{background-color:var(--color-gray-200);height:1px;margin:.375rem 1rem}
.canon-MenuTrigger {
box-sizing: border-box;
border: 1px solid var(--color-gray-200);
background-color: var(--color-gray-50);
height: 2.5rem;
color: var(--color-gray-900);
user-select: none;
border-radius: .375rem;
outline: 0;
justify-content: center;
align-items: center;
gap: .375rem;
margin: 0;
padding: 0 .875rem;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
line-height: 1.5rem;
display: flex;
@media (hover: hover) {
&:hover {
background-color: var(--color-gray-100);
}
}
&:active, &[data-popup-open] {
background-color: var(--color-gray-100);
}
&:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: -1px;
}
}
.canon-MenuPositioner {
outline: 0;
}
.canon-MenuPopup {
box-sizing: border-box;
background-color: var(--canon-bg-elevated);
color: var(--color-fg-primary);
transform-origin: var(--transform-origin);
border-radius: .375rem;
padding-block: .25rem;
transition: transform .15s, opacity .15s;
&[data-starting-style], &[data-ending-style] {
opacity: 0;
transform: scale(.9);
}
@media (prefers-color-scheme: light) {
& {
outline: 1px solid var(--color-gray-200);
box-shadow: 0px 10px 15px -3px var(--color-gray-200), 0px 4px 6px -4px var(--color-gray-200);
}
}
@media (prefers-color-scheme: dark) {
& {
outline: 1px solid var(--color-gray-300);
outline-offset: -1px;
}
}
}
.canon-MenuItem {
cursor: default;
user-select: none;
padding-block: .5rem;
outline: 0;
padding-left: 1rem;
padding-right: 2rem;
font-size: .875rem;
line-height: 1rem;
display: flex;
&[data-highlighted] {
z-index: 0;
color: var(--color-gray-50);
position: relative;
}
&[data-highlighted]:before {
content: "";
z-index: -1;
background-color: var(--color-gray-900);
border-radius: .25rem;
position: absolute;
inset-block: 0;
inset-inline: .25rem;
}
}
.canon-MenuSeparator {
background-color: var(--color-gray-200);
height: 1px;
margin: .375rem 1rem;
}
packages/canon/css/scrollarea.css
+50 -1
View File
@@ -1 +1,50 @@
.canon-ScrollAreaRoot{box-sizing:border-box;width:24rem;max-width:calc(100vw - 8rem);height:8.5rem}.canon-ScrollAreaViewport{overscroll-behavior:contain;height:100%}.canon-ScrollAreaContent{padding-block:.75rem;flex-direction:column;gap:1rem;padding-left:1rem;padding-right:1.5rem;display:flex}.canon-ScrollAreaScrollbar{background-color:var(--canon-scrollbar);opacity:0;border-radius:.375rem;justify-content:center;width:.25rem;margin:.5rem;transition:opacity .15s .3s;display:flex;&[data-hovering],&[data-scrolling]{opacity:1;transition-duration:75ms;transition-delay:0s}&:before{content:"";width:1.25rem;height:100%;position:absolute}}.canon-ScrollAreaThumb{border-radius:inherit;background-color:var(--canon-scrollbar-thumb);width:100%}
.canon-ScrollAreaRoot {
box-sizing: border-box;
width: 24rem;
max-width: calc(100vw - 8rem);
height: 8.5rem;
}
.canon-ScrollAreaViewport {
overscroll-behavior: contain;
height: 100%;
}
.canon-ScrollAreaContent {
padding-block: .75rem;
flex-direction: column;
gap: 1rem;
padding-left: 1rem;
padding-right: 1.5rem;
display: flex;
}
.canon-ScrollAreaScrollbar {
background-color: var(--canon-scrollbar);
opacity: 0;
border-radius: .375rem;
justify-content: center;
width: .25rem;
margin: .5rem;
transition: opacity .15s .3s;
display: flex;
&[data-hovering], &[data-scrolling] {
opacity: 1;
transition-duration: 75ms;
transition-delay: 0s;
}
&:before {
content: "";
width: 1.25rem;
height: 100%;
position: absolute;
}
}
.canon-ScrollAreaThumb {
border-radius: inherit;
background-color: var(--canon-scrollbar-thumb);
width: 100%;
}
packages/canon/css/styles.css
+9944 -1
View File
File diff suppressed because one or more lines are too long
packages/canon/css/table.css
+58 -1
View File
@@ -1 +1,58 @@
.table{background-color:var(--canon-bg-surface-1);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-surface-1),inset 4px -2px 0 0 var(--canon-bg-surface-1);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-surface-1),inset -4px -2px 0 0 var(--canon-bg-surface-1);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-surface-1),inset 0px -2px 0 0 var(--canon-bg-surface-1)}
.table {
background-color: var(--canon-bg-surface-1);
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-surface-1), inset 4px -2px 0 0 var(--canon-bg-surface-1);
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-surface-1), inset -4px -2px 0 0 var(--canon-bg-surface-1);
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-surface-1), inset 0px -2px 0 0 var(--canon-bg-surface-1);
}
packages/canon/css/text.css
+54 -1
View File
@@ -1 +1,54 @@
.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)}.canon-Text--color-primary{color:var(--canon-fg-primary)}.canon-Text--color-secondary{color:var(--canon-fg-secondary)}.canon-Text--color-danger{color:var(--canon-fg-danger)}.canon-Text--color-warning{color:var(--canon-fg-warning)}.canon-Text--color-success{color:var(--canon-fg-success)}
.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);
}
.canon-Text--color-primary {
color: var(--canon-fg-primary);
}
.canon-Text--color-secondary {
color: var(--canon-fg-secondary);
}
.canon-Text--color-danger {
color: var(--canon-fg-danger);
}
.canon-Text--color-warning {
color: var(--canon-fg-warning);
}
.canon-Text--color-success {
color: var(--canon-fg-success);
}
packages/canon/css/tooltip.css
+61 -1
View File
@@ -1 +1,61 @@
.canon-TooltipPopup{box-sizing:border-box;transform-origin:var(--transform-origin);background-color:canvas;background-color:var(--canon-bg-surface-1);color:var(--canon-fg-primary);outline:1px solid var(--canon-border);box-shadow:0 10px 15px -3px var(--canon-border),0 4px 6px -4px var(--canon-border);border-radius:.375rem;flex-direction:column;padding:.25rem .5rem;font-size:.875rem;line-height:1.25rem;transition:transform .15s,opacity .15s;display:flex;&[data-starting-style],&[data-ending-style]{opacity:0;transform:scale(.9)}&[data-instant]{transition-duration:0s}}.canon-TooltipArrow{display:flex;&[data-side=top]{bottom:-8px;rotate:180deg}&[data-side=bottom]{top:-8px;rotate:none}&[data-side=left]{right:-13px;rotate:90deg}&[data-side=right]{left:-13px;rotate:-90deg}}.canon-TooltipArrow-fill{fill:var(--canon-bg-surface-1)}.canon-TooltipArrow-outer-stroke{@media (prefers-color-scheme:light){&{fill:var(--canon-border)}}}
.canon-TooltipPopup {
box-sizing: border-box;
transform-origin: var(--transform-origin);
background-color: canvas;
background-color: var(--canon-bg-surface-1);
color: var(--canon-fg-primary);
outline: 1px solid var(--canon-border);
box-shadow: 0 10px 15px -3px var(--canon-border), 0 4px 6px -4px var(--canon-border);
border-radius: .375rem;
flex-direction: column;
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.25rem;
transition: transform .15s, opacity .15s;
display: flex;
&[data-starting-style], &[data-ending-style] {
opacity: 0;
transform: scale(.9);
}
&[data-instant] {
transition-duration: 0s;
}
}
.canon-TooltipArrow {
display: flex;
&[data-side="top"] {
bottom: -8px;
rotate: 180deg;
}
&[data-side="bottom"] {
top: -8px;
rotate: none;
}
&[data-side="left"] {
right: -13px;
rotate: 90deg;
}
&[data-side="right"] {
left: -13px;
rotate: -90deg;
}
}
.canon-TooltipArrow-fill {
fill: var(--canon-bg-surface-1);
}
.canon-TooltipArrow-outer-stroke {
@media (prefers-color-scheme: light) {
& {
fill: var(--canon-border);
}
}
}
packages/canon/scripts/build-css.mjs
-1
View File
@@ -72,7 +72,6 @@ async function buildCSS(logs = true) {
let { code } = transform({
filename: `${distDir}/${file.newName}`,
code: bundleCode,
minify: true,
});
fs.writeFileSync(`${distDir}/${file.newName}`, code);