mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-27 11:36:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: update colors

Browse source
This commit is contained in:
Lucas Larroche 2022-12-26 11:35:56 +07:00
parent 52e1072a08
commit 6ade871f3f
20 changed files with 892 additions and 756 deletions
Download patch file Download diff file Expand all files Collapse all files

551
css/pico.classless.css
View file

@ -9,70 +9,84 @@
[data-theme=light], [data-theme=light],
:root:not([data-theme=dark]) { :root:not([data-theme=dark]) {
--pico-background-color: #fff; --pico-background-color: #fff;
--pico-color: hsl(205deg, 20%, 32%); --pico-color: #373c44;
--pico-muted-color: hsl(205deg, 10%, 50%); --pico-muted-color: #646b79;
--pico-muted-border-color: hsl(205deg, 20%, 94%); --pico-muted-border-color: #e7eaf0;
--pico-primary: hsl(195deg, 85%, 41%); --pico-primary: #0172ad;
--pico-primary-hover: hsl(195deg, 90%, 32%); --pico-primary-hover: #02659a;
--pico-primary-focus: rgba(16, 149, 193, 0.125); --pico-primary-underline: rgba(1, 114, 173, 0.5);
--pico-primary-underline-hover: var(--pico-primary);
--pico-primary-background: #0172ad;
--pico-primary-background-hover: #02659a;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-border-hover: var(--pico-primary-background-hover);
--pico-primary-focus: rgba(2, 154, 232, 0.25);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%); --pico-secondary: #5d6b89;
--pico-secondary-hover: hsl(205deg, 20%, 32%); --pico-secondary-hover: #525f7a;
--pico-secondary-focus: rgba(89, 107, 120, 0.125); --pico-secondary-underline: rgba(93, 107, 137, 0.5);
--pico-secondary-underline-hover: var(--pico-secondary);
--pico-secondary-background: #5d6b89;
--pico-secondary-background-hover: #525f7a;
--pico-secondary-border: var(--pico-secondary-background);
--pico-secondary-border-hover: var(--pico-secondary-background-hover);
--pico-secondary-focus: rgba(93, 107, 137, 0.25);
--pico-secondary-inverse: #fff; --pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 30%, 15%); --pico-contrast: #181c25;
--pico-contrast-hover: #000; --pico-contrast-hover: #0e1118;
--pico-contrast-focus: rgba(89, 107, 120, 0.125); --pico-contrast-underline: rgba(24, 28, 37, 0.5);
--pico-contrast-underline-hover: var(--pico-secondary);
--pico-contrast-background: #181c25;
--pico-contrast-background-hover: #000;
--pico-contrast-border: var(--pico-contrast-background);
--pico-contrast-border-hover: var(--pico-contrast-background-hover);
--pico-contrast-focus: rgba(93, 107, 137, 0.25);
--pico-contrast-inverse: #fff; --pico-contrast-inverse: #fff;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302), 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06), 0 0 0 0.0625rem rgba(27, 40, 50, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(104, 120, 153, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(104, 120, 153, 0.024), 0.0625rem 0.125rem 0.75rem rgba(104, 120, 153, 0.03), 0.1125rem 0.225rem 1.35rem rgba(104, 120, 153, 0.036), 0.2085rem 0.417rem 2.502rem rgba(104, 120, 153, 0.04302), 0.5rem 1rem 6rem rgba(104, 120, 153, 0.06), 0 0 0 0.0625rem rgba(104, 120, 153, 0.015);
--pico-h1-color: hsl(205deg, 30%, 15%); --pico-h1-color: #2d3138;
--pico-h2-color: #24333e; --pico-h2-color: #373c44;
--pico-h3-color: hsl(205deg, 25%, 23%); --pico-h3-color: #424751;
--pico-h4-color: #374956; --pico-h4-color: #4d535e;
--pico-h5-color: hsl(205deg, 20%, 32%); --pico-h5-color: #5c6370;
--pico-h6-color: #4d606d; --pico-h6-color: #646b79;
--pico-mark-background-color: #fff2ca; --pico-mark-background-color: #fde7c0;
--pico-mark-color: #543a26; --pico-mark-color: #0f1114;
--pico-ins-color: #388e3c; --pico-ins-color: #006d46;
--pico-del-color: #c62828; --pico-del-color: #9b2318;
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: #f6f8f9; --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: hsl(205deg, 20%, 94%); --pico-code-background-color: #fbfcfc;
--pico-code-color: var(--pico-muted-color); --pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-contrast-inverse); --pico-code-kbd-color: var(--pico-background-color);
--pico-code-tag-color: hsl(330deg, 40%, 50%); --pico-form-element-background-color: #fbfcfc;
--pico-code-property-color: hsl(185deg, 40%, 40%); --pico-form-element-border-color: #cfd5e2;
--pico-code-value-color: hsl(40deg, 20%, 50%); --pico-form-element-color: #23262c;
--pico-code-comment-color: hsl(205deg, 14%, 68%);
--pico-form-element-background-color: transparent;
--pico-form-element-border-color: hsl(205deg, 14%, 68%);
--pico-form-element-color: var(--pico-color);
--pico-form-element-placeholder-color: var(--pico-muted-color); --pico-form-element-placeholder-color: var(--pico-muted-color);
--pico-form-element-active-background-color: transparent; --pico-form-element-active-background-color: #fff;
--pico-form-element-active-border-color: var(--pico-primary); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-focus); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-background-color: hsl(205deg, 18%, 86%); --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
--pico-form-element-disabled-border-color: hsl(205deg, 14%, 68%); --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #c62828; --pico-form-element-invalid-border-color: #af291d;
--pico-form-element-invalid-active-border-color: #d32f2f; --pico-form-element-invalid-active-border-color: #9b2318;
--pico-form-element-invalid-focus-color: rgba(211, 47, 47, 0.125); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #388e3c; --pico-form-element-valid-border-color: #00895a;
--pico-form-element-valid-active-border-color: #43a047; --pico-form-element-valid-active-border-color: #007a50;
--pico-form-element-valid-focus-color: rgba(67, 160, 71, 0.125); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: hsl(205deg, 16%, 77%); --pico-switch-background-color: #bfc7d9;
--pico-switch-color: var(--pico-primary-inverse); --pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary); --pico-switch-checked-background-color: var(--pico-primary-background);
--pico-range-border-color: hsl(205deg, 18%, 86%); --pico-range-border-color: #dfe3eb;
--pico-range-active-border-color: hsl(205deg, 16%, 77%); --pico-range-active-border-color: #bfc7d9;
--pico-range-thumb-border-color: var(--pico-background-color); --pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary); --pico-range-thumb-color: var(--pico-secondary-background);
--pico-range-thumb-hover-color: var(--pico-secondary-hover); --pico-range-thumb-hover-color: var(--pico-secondary-background-hover);
--pico-range-thumb-active-color: var(--pico-primary); --pico-range-thumb-active-color: var(--pico-primary);
--pico-accordion-border-color: var(--pico-muted-border-color); --pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary); --pico-accordion-active-summary-color: var(--pico-primary);
@ -81,220 +95,270 @@
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectionning-background-color: #fbfbfc; --pico-card-sectionning-background-color: #fbfcfc;
--pico-dropdown-background-color: #fbfbfc; --pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: #e1e6eb; --pico-dropdown-border-color: #eff1f4;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: hsl(205deg, 20%, 94%); --pico-dropdown-hover-background-color: #f7f8fa;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(213, 220, 226, 0.7); --pico-modal-overlay-background-color: rgba(239, 241, 244, 0.7);
--pico-progress-background-color: hsl(205deg, 18%, 86%); --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 137, 90)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(175, 41, 29)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: light; color-scheme: light;
} }
[data-theme=light] input:is([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]),
:root:not([data-theme=dark]) input:is([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]) {
--pico-form-element-focus-color: var(--pico-primary-focus);
}
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) { :root:not([data-theme=light]) {
--pico-background-color: #11191f; --pico-background-color: #13171f;
--pico-color: hsl(205deg, 16%, 77%); --pico-color: #c2c7d0;
--pico-muted-color: hsl(205deg, 10%, 50%); --pico-muted-color: #7b8495;
--pico-muted-border-color: #1f2d38; --pico-muted-border-color: #202632;
--pico-primary: hsl(195deg, 85%, 41%); --pico-primary: #01aaff;
--pico-primary-hover: hsl(195deg, 80%, 50%); --pico-primary-hover: #51b4ff;
--pico-primary-focus: rgba(16, 149, 193, 0.25); --pico-primary-underline: rgba(1, 170, 255, 0.5);
--pico-primary-underline-hover: var(--pico-primary);
--pico-primary-background: #02659a;
--pico-primary-background-hover: #0172ad;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-border-hover: var(--pico-primary-background-hover);
--pico-primary-focus: rgba(1, 170, 255, 0.25);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%); --pico-secondary: #969eaf;
--pico-secondary-hover: hsl(205deg, 10%, 50%); --pico-secondary-hover: #a0acc7;
--pico-secondary-focus: rgba(115, 130, 140, 0.25); --pico-secondary-underline: rgba(150, 158, 175, 0.5);
--pico-secondary-underline-hover: var(--pico-secondary);
--pico-secondary-background: #48536b;
--pico-secondary-background-hover: #525f7a;
--pico-secondary-border: var(--pico-secondary-background);
--pico-secondary-border-hover: var(--pico-secondary-background-hover);
--pico-secondary-focus: rgba(144, 158, 190, 0.25);
--pico-secondary-inverse: #fff; --pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 20%, 94%); --pico-contrast: #dfe3eb;
--pico-contrast-hover: #fff; --pico-contrast-hover: #eff1f4;
--pico-contrast-focus: rgba(115, 130, 140, 0.25); --pico-contrast-underline: rgba(223, 227, 235, 0.5);
--pico-contrast-underline-hover: var(--pico-contrast);
--pico-contrast-background: #eff1f4;
--pico-contrast-background-hover: #fff;
--pico-contrast-border: var(--pico-contrast-background);
--pico-contrast-border-hover: var(--pico-contrast-background-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--pico-h1-color: hsl(205deg, 20%, 94%); --pico-h1-color: #f0f1f3;
--pico-h2-color: #e1e6eb; --pico-h2-color: #e0e3e7;
--pico-h3-color: hsl(205deg, 18%, 86%); --pico-h3-color: #c2c7d0;
--pico-h4-color: #c8d1d8; --pico-h4-color: #b3b9c5;
--pico-h5-color: hsl(205deg, 16%, 77%); --pico-h5-color: #a4acba;
--pico-h6-color: #afbbc4; --pico-h6-color: #8891a4;
--pico-mark-background-color: #d1c284; --pico-mark-background-color: #014063;
--pico-mark-color: #11191f; --pico-mark-color: #fff;
--pico-ins-color: #388e3c; --pico-ins-color: #00a66e;
--pico-del-color: #c62828; --pico-del-color: #f06048;
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #18232c; --pico-code-background-color: #1a1f28;
--pico-code-color: var(--pico-muted-color); --pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-contrast-inverse); --pico-code-kbd-color: var(--pico-background-color);
--pico-code-tag-color: hsl(330deg, 30%, 50%); --pico-form-element-background-color: #1c212c;
--pico-code-property-color: hsl(185deg, 30%, 50%); --pico-form-element-border-color: #2a3140;
--pico-code-value-color: hsl(40deg, 10%, 50%); --pico-form-element-color: #e0e3e7;
--pico-code-comment-color: #4d606d; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-background-color: #11191f; --pico-form-element-active-background-color: #1a1f28;
--pico-form-element-border-color: #374956; --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-color: var(--pico-color); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-placeholder-color: var(--pico-muted-color); --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
--pico-form-element-active-background-color: var(--pico-form-element-background-color); --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b71c1c; --pico-form-element-invalid-border-color: #861d13;
--pico-form-element-invalid-active-border-color: #c62828; --pico-form-element-invalid-active-border-color: #9b2318;
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2e7d32; --pico-form-element-valid-border-color: #006d46;
--pico-form-element-valid-active-border-color: #388e3c; --pico-form-element-valid-active-border-color: #007a50;
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #374956; --pico-switch-background-color: #333c4e;
--pico-switch-color: var(--pico-primary-inverse); --pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary); --pico-switch-checked-background-color: var(--pico-primary-background);
--pico-range-border-color: #24333e; --pico-range-border-color: #202632;
--pico-range-active-border-color: hsl(205deg, 25%, 23%); --pico-range-active-border-color: #2a3140;
--pico-range-thumb-border-color: var(--pico-background-color); --pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary); --pico-range-thumb-color: var(--pico-secondary-background);
--pico-range-thumb-hover-color: var(--pico-secondary-hover); --pico-range-thumb-hover-color: var(--pico-secondary-background-hover);
--pico-range-thumb-active-color: var(--pico-primary); --pico-range-thumb-active-color: var(--pico-primary);
--pico-accordion-border-color: var(--pico-muted-border-color); --pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary); --pico-accordion-active-summary-color: var(--pico-primary);
--pico-accordion-close-summary-color: var(--pico-color); --pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color); --pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: #141e26; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectionning-background-color: #18232c; --pico-card-sectionning-background-color: #1a1f28;
--pico-dropdown-background-color: hsl(205deg, 30%, 15%); --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #24333e; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8); --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.85);
--pico-progress-background-color: #24333e; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 109, 70)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(134, 29, 19)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: dark; color-scheme: dark;
} }
:root:not([data-theme=light]) input:is([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]) {
--pico-form-element-focus-color: var(--pico-primary-focus);
}
} }
[data-theme=dark] { [data-theme=dark] {
--pico-background-color: #11191f; --pico-background-color: #13171f;
--pico-color: hsl(205deg, 16%, 77%); --pico-color: #c2c7d0;
--pico-muted-color: hsl(205deg, 10%, 50%); --pico-muted-color: #7b8495;
--pico-muted-border-color: #1f2d38; --pico-muted-border-color: #202632;
--pico-primary: hsl(195deg, 85%, 41%); --pico-primary: #01aaff;
--pico-primary-hover: hsl(195deg, 80%, 50%); --pico-primary-hover: #51b4ff;
--pico-primary-focus: rgba(16, 149, 193, 0.25); --pico-primary-underline: rgba(1, 170, 255, 0.5);
--pico-primary-underline-hover: var(--pico-primary);
--pico-primary-background: #02659a;
--pico-primary-background-hover: #0172ad;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-border-hover: var(--pico-primary-background-hover);
--pico-primary-focus: rgba(1, 170, 255, 0.25);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%); --pico-secondary: #969eaf;
--pico-secondary-hover: hsl(205deg, 10%, 50%); --pico-secondary-hover: #a0acc7;
--pico-secondary-focus: rgba(115, 130, 140, 0.25); --pico-secondary-underline: rgba(150, 158, 175, 0.5);
--pico-secondary-underline-hover: var(--pico-secondary);
--pico-secondary-background: #48536b;
--pico-secondary-background-hover: #525f7a;
--pico-secondary-border: var(--pico-secondary-background);
--pico-secondary-border-hover: var(--pico-secondary-background-hover);
--pico-secondary-focus: rgba(144, 158, 190, 0.25);
--pico-secondary-inverse: #fff; --pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 20%, 94%); --pico-contrast: #dfe3eb;
--pico-contrast-hover: #fff; --pico-contrast-hover: #eff1f4;
--pico-contrast-focus: rgba(115, 130, 140, 0.25); --pico-contrast-underline: rgba(223, 227, 235, 0.5);
--pico-contrast-underline-hover: var(--pico-contrast);
--pico-contrast-background: #eff1f4;
--pico-contrast-background-hover: #fff;
--pico-contrast-border: var(--pico-contrast-background);
--pico-contrast-border-hover: var(--pico-contrast-background-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--pico-h1-color: hsl(205deg, 20%, 94%); --pico-h1-color: #f0f1f3;
--pico-h2-color: #e1e6eb; --pico-h2-color: #e0e3e7;
--pico-h3-color: hsl(205deg, 18%, 86%); --pico-h3-color: #c2c7d0;
--pico-h4-color: #c8d1d8; --pico-h4-color: #b3b9c5;
--pico-h5-color: hsl(205deg, 16%, 77%); --pico-h5-color: #a4acba;
--pico-h6-color: #afbbc4; --pico-h6-color: #8891a4;
--pico-mark-background-color: #d1c284; --pico-mark-background-color: #014063;
--pico-mark-color: #11191f; --pico-mark-color: #fff;
--pico-ins-color: #388e3c; --pico-ins-color: #00a66e;
--pico-del-color: #c62828; --pico-del-color: #f06048;
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #18232c; --pico-code-background-color: #1a1f28;
--pico-code-color: var(--pico-muted-color); --pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-contrast-inverse); --pico-code-kbd-color: var(--pico-background-color);
--pico-code-tag-color: hsl(330deg, 30%, 50%); --pico-form-element-background-color: #1c212c;
--pico-code-property-color: hsl(185deg, 30%, 50%); --pico-form-element-border-color: #2a3140;
--pico-code-value-color: hsl(40deg, 10%, 50%); --pico-form-element-color: #e0e3e7;
--pico-code-comment-color: #4d606d; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-background-color: #11191f; --pico-form-element-active-background-color: #1a1f28;
--pico-form-element-border-color: #374956; --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-color: var(--pico-color); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-placeholder-color: var(--pico-muted-color); --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
--pico-form-element-active-background-color: var(--pico-form-element-background-color); --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b71c1c; --pico-form-element-invalid-border-color: #861d13;
--pico-form-element-invalid-active-border-color: #c62828; --pico-form-element-invalid-active-border-color: #9b2318;
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2e7d32; --pico-form-element-valid-border-color: #006d46;
--pico-form-element-valid-active-border-color: #388e3c; --pico-form-element-valid-active-border-color: #007a50;
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #374956; --pico-switch-background-color: #333c4e;
--pico-switch-color: var(--pico-primary-inverse); --pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary); --pico-switch-checked-background-color: var(--pico-primary-background);
--pico-range-border-color: #24333e; --pico-range-border-color: #202632;
--pico-range-active-border-color: hsl(205deg, 25%, 23%); --pico-range-active-border-color: #2a3140;
--pico-range-thumb-border-color: var(--pico-background-color); --pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary); --pico-range-thumb-color: var(--pico-secondary-background);
--pico-range-thumb-hover-color: var(--pico-secondary-hover); --pico-range-thumb-hover-color: var(--pico-secondary-background-hover);
--pico-range-thumb-active-color: var(--pico-primary); --pico-range-thumb-active-color: var(--pico-primary);
--pico-accordion-border-color: var(--pico-muted-border-color); --pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary); --pico-accordion-active-summary-color: var(--pico-primary);
--pico-accordion-close-summary-color: var(--pico-color); --pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color); --pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: #141e26; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectionning-background-color: #18232c; --pico-card-sectionning-background-color: #1a1f28;
--pico-dropdown-background-color: hsl(205deg, 30%, 15%); --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #24333e; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8); --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.85);
--pico-progress-background-color: #24333e; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 109, 70)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(134, 29, 19)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: dark; color-scheme: dark;
} }
[data-theme=dark] input:is([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]) {
--pico-form-element-focus-color: var(--pico-primary-focus);
}
progress, progress,
[type=checkbox], [type=checkbox],
@ -311,9 +375,10 @@ progress,
--pico-line-height: 1.5; --pico-line-height: 1.5;
--pico-font-weight: 400; --pico-font-weight: 400;
--pico-font-size: 16px; --pico-font-size: 16px;
--pico-text-underline-offset: 0.1rem;
--pico-border-radius: 0.25rem; --pico-border-radius: 0.25rem;
--pico-border-width: 1px; --pico-border-width: 1px;
--pico-outline-width: 3px; --pico-outline-width: 0.1875rem;
--pico-transition: 0.2s ease-in-out; --pico-transition: 0.2s ease-in-out;
--pico-spacing: 1rem; --pico-spacing: 1rem;
--pico-typography-spacing-vertical: 1.5rem; --pico-typography-spacing-vertical: 1.5rem;
@ -321,7 +386,7 @@ progress,
--pico-block-spacing-horizontal: var(--pico-spacing); --pico-block-spacing-horizontal: var(--pico-spacing);
--pico-form-element-spacing-vertical: 0.75rem; --pico-form-element-spacing-vertical: 0.75rem;
--pico-form-element-spacing-horizontal: 1rem; --pico-form-element-spacing-horizontal: 1rem;
--pico-modal-overlay-backdrop-filter: blur(0.25rem); --pico-modal-overlay-backdrop-filter: blur(0.375rem);
--pico-nav-element-spacing-vertical: 1rem; --pico-nav-element-spacing-vertical: 1rem;
--pico-nav-element-spacing-horizontal: 0.5rem; --pico-nav-element-spacing-horizontal: 0.5rem;
--pico-nav-link-spacing-vertical: 0.5rem; --pico-nav-link-spacing-vertical: 0.5rem;
@ -420,7 +485,7 @@ dialog > article {
} }
a { a {
--pico-text-decoration: none; --pico-text-decoration: underline;
} }
a.secondary, a.contrast { a.secondary, a.contrast {
--pico-text-decoration: underline; --pico-text-decoration: underline;
@ -486,13 +551,18 @@ kbd {
--pico-font-weight: bolder; --pico-font-weight: bolder;
} }
input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]),
:where(select, textarea) {
--pico-outline-width: 0.0625rem;
}
[type=checkbox], [type=checkbox],
[type=radio] { [type=radio] {
--pico-border-width: 2px; --pico-border-width: 0.125rem;
} }
[type=checkbox][role=switch] { [type=checkbox][role=switch] {
--pico-border-width: 3px; --pico-border-width: 0.1875rem;
} }
/** /**
@ -523,6 +593,7 @@ kbd {
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
line-height: var(--pico-line-height); line-height: var(--pico-line-height);
font-family: var(--pico-font-family); font-family: var(--pico-font-family);
text-underline-offset: var(--pico-text-underline-offset);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
overflow-wrap: break-word; overflow-wrap: break-word;
cursor: default; cursor: default;
@ -610,11 +681,14 @@ a,
[role=link] { [role=link] {
--pico-color: var(--pico-primary); --pico-color: var(--pico-primary);
--pico-background-color: transparent; --pico-background-color: transparent;
--pico-underline: var(--pico-primary-underline);
outline: none; outline: none;
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
-webkit-text-decoration: var(--pico-text-decoration); -webkit-text-decoration: var(--pico-text-decoration);
text-decoration: var(--pico-text-decoration); text-decoration: var(--pico-text-decoration);
text-decoration-color: var(--pico-underline);
text-underline-offset: 0.125em;
transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition); transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition); transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
@ -622,6 +696,7 @@ a,
a:is([aria-current], :hover, :active, :focus), a:is([aria-current], :hover, :active, :focus),
[role=link]:is([aria-current], :hover, :active, :focus) { [role=link]:is([aria-current], :hover, :active, :focus) {
--pico-color: var(--pico-primary-hover); --pico-color: var(--pico-primary-hover);
--pico-underline: var(--pico-primary-underline-hover);
--pico-text-decoration: underline; --pico-text-decoration: underline;
} }
a:focus, a:focus,
@ -869,8 +944,8 @@ input[type=submit],
input[type=button], input[type=button],
input[type=reset], input[type=reset],
[role=button] { [role=button] {
--pico-background-color: var(--pico-primary); --pico-background-color: var(--pico-primary-background);
--pico-border-color: var(--pico-primary); --pico-border-color: var(--pico-primary-border);
--pico-color: var(--pico-primary-inverse); --pico-color: var(--pico-primary-inverse);
--pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
@ -892,8 +967,8 @@ input[type=submit]:is([aria-current], :hover, :active, :focus),
input[type=button]:is([aria-current], :hover, :active, :focus), input[type=button]:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus), input[type=reset]:is([aria-current], :hover, :active, :focus),
[role=button]:is([aria-current], :hover, :active, :focus) { [role=button]:is([aria-current], :hover, :active, :focus) {
--pico-background-color: var(--pico-primary-hover); --pico-background-color: var(--pico-primary-background-hover);
--pico-border-color: var(--pico-primary-hover); --pico-border-color: var(--pico-primary-border-hover);
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--pico-color: var(--pico-primary-inverse); --pico-color: var(--pico-primary-inverse);
} }
@ -1002,23 +1077,6 @@ pre > code {
line-height: var(--pico-line-height); line-height: var(--pico-line-height);
} }
code b {
color: var(--pico-code-tag-color);
font-weight: var(--pico-font-weight);
}
code i {
color: var(--pico-code-property-color);
font-style: normal;
}
code u {
color: var(--pico-code-value-color);
text-decoration: none;
}
code em {
color: var(--pico-code-comment-color);
font-style: normal;
}
kbd { kbd {
background-color: var(--pico-code-kbd-background-color); background-color: var(--pico-code-kbd-background-color);
color: var(--pico-code-kbd-color); color: var(--pico-code-kbd-color);
@ -1185,8 +1243,7 @@ input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly])
} }
input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus, input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus,
select:focus, :where(select, textarea):focus {
textarea:focus {
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
} }
@ -1314,8 +1371,8 @@ label > :where(input, select, textarea) {
[type=radio]:checked, [type=radio]:checked,
[type=radio]:checked:active, [type=radio]:checked:active,
[type=radio]:checked:focus { [type=radio]:checked:focus {
--pico-background-color: var(--pico-primary); --pico-background-color: var(--pico-primary-background);
--pico-border-color: var(--pico-primary); --pico-border-color: var(--pico-primary-border);
background-image: var(--pico-icon-checkbox); background-image: var(--pico-icon-checkbox);
background-position: center; background-position: center;
background-size: 0.75em auto; background-size: 0.75em auto;
@ -1330,8 +1387,8 @@ label > :where(input, select, textarea) {
} }
[type=checkbox]:indeterminate { [type=checkbox]:indeterminate {
--pico-background-color: var(--pico-primary); --pico-background-color: var(--pico-primary-background);
--pico-border-color: var(--pico-primary); --pico-border-color: var(--pico-primary-border);
background-image: var(--pico-icon-minus); background-image: var(--pico-icon-minus);
background-position: center; background-position: center;
background-size: 0.75em auto; background-size: 0.75em auto;
@ -1455,14 +1512,16 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
z-index: 1;
position: relative;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
--pico-background-color: var(--pico-secondary); --pico-background-color: var(--pico-secondary-background);
--pico-border-color: var(--pico-secondary); --pico-border-color: var(--pico-secondary-border);
--pico-color: var(--pico-secondary-inverse); --pico-color: var(--pico-secondary-inverse);
margin-right: calc(var(--pico-spacing) / 2); margin-right: calc(var(--pico-spacing) / 2);
margin-left: 0; margin-left: 0;
@ -1470,7 +1529,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: calc(var(--pico-spacing) / 2); -webkit-margin-end: calc(var(--pico-spacing) / 2);
margin-inline-end: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-border-color); border: var(--pico-border-width) solid var(--pico-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
outline: none; outline: none;
@ -1485,12 +1544,12 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
[type=file]::file-selector-button:is(:hover, :active, :focus) { [type=file]::file-selector-button:is(:hover, :active, :focus) {
--pico-background-color: var(--pico-secondary-hover); --pico-background-color: var(--pico-secondary-background-hover);
--pico-border-color: var(--pico-secondary-hover); --pico-border-color: var(--pico-secondary-border-hover);
} }
[type=file]::-webkit-file-upload-button { [type=file]::-webkit-file-upload-button {
--pico-background-color: var(--pico-secondary); --pico-background-color: var(--pico-secondary-background);
--pico-border-color: var(--pico-secondary); --pico-border-color: var(--pico-secondary-border);
--pico-color: var(--pico-secondary-inverse); --pico-color: var(--pico-secondary-inverse);
margin-right: calc(var(--pico-spacing) / 2); margin-right: calc(var(--pico-spacing) / 2);
margin-left: 0; margin-left: 0;
@ -1498,7 +1557,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: calc(var(--pico-spacing) / 2); -webkit-margin-end: calc(var(--pico-spacing) / 2);
margin-inline-end: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-border-color); border: var(--pico-border-width) solid var(--pico-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
outline: none; outline: none;
@ -1514,18 +1573,18 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) { [type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {
--pico-background-color: var(--pico-secondary-hover); --pico-background-color: var(--pico-secondary-background-hover);
--pico-border-color: var(--pico-secondary-hover); --pico-border-color: var(--pico-secondary-border-hover);
} }
[type=file]::-ms-browse { [type=file]::-ms-browse {
--pico-background-color: var(--pico-secondary); --pico-background-color: var(--pico-secondary-background);
--pico-border-color: var(--pico-secondary); --pico-border-color: var(--pico-secondary-border);
--pico-color: var(--pico-secondary-inverse); --pico-color: var(--pico-secondary-inverse);
margin-right: calc(var(--pico-spacing) / 2); margin-right: calc(var(--pico-spacing) / 2);
margin-left: 0; margin-left: 0;
margin-inline-start: 0; margin-inline-start: 0;
margin-inline-end: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-border-color); border: var(--pico-border-width) solid var(--pico-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
outline: none; outline: none;
@ -1541,8 +1600,20 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
[type=file]::-ms-browse:is(:hover, :active, :focus) { [type=file]::-ms-browse:is(:hover, :active, :focus) {
--pico-background-color: var(--pico-secondary-hover); --pico-background-color: var(--pico-secondary-background-hover);
--pico-border-color: var(--pico-secondary-hover); --pico-border-color: var(--pico-secondary-border-hover);
}
[type=file]:is(:hover, :active, :focus)::file-selector-button {
--pico-background-color: var(--pico-secondary-background-hover);
--pico-border-color: var(--pico-secondary-border-hover);
}
[type=file]:is(:hover, :active, :focus)::-webkit-file-upload-button {
--pico-background-color: var(--pico-secondary-background-hover);
--pico-border-color: var(--pico-secondary-border-hover);
}
[type=file]:is(:hover, :active, :focus)::-ms-browse {
--pico-background-color: var(--pico-secondary-background-hover);
--pico-border-color: var(--pico-secondary-border-hover);
} }
/** /**
@ -1910,7 +1981,7 @@ nav li[role=list] > ul li a {
nav details[role=list] summary, nav details[role=list] summary,
nav details[role=list] summary:not([role]) { nav details[role=list] summary:not([role]) {
height: auto; height: auto;
padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal); padding: var(--pico-nav-link-spacing-vertical) var(--pico-form-element-spacing-horizontal);
} }
nav details[role=list][open] summary { nav details[role=list][open] summary {
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

573
css/pico.css
View file

@ -9,70 +9,84 @@
[data-theme=light], [data-theme=light],
:root:not([data-theme=dark]) { :root:not([data-theme=dark]) {
--pico-background-color: #fff; --pico-background-color: #fff;
--pico-color: hsl(205deg, 20%, 32%); --pico-color: #373c44;
--pico-muted-color: hsl(205deg, 10%, 50%); --pico-muted-color: #646b79;
--pico-muted-border-color: hsl(205deg, 20%, 94%); --pico-muted-border-color: #e7eaf0;
--pico-primary: hsl(195deg, 85%, 41%); --pico-primary: #0172ad;
--pico-primary-hover: hsl(195deg, 90%, 32%); --pico-primary-hover: #02659a;
--pico-primary-focus: rgba(16, 149, 193, 0.125); --pico-primary-underline: rgba(1, 114, 173, 0.5);
--pico-primary-underline-hover: var(--pico-primary);
--pico-primary-background: #0172ad;
--pico-primary-background-hover: #02659a;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-border-hover: var(--pico-primary-background-hover);
--pico-primary-focus: rgba(2, 154, 232, 0.25);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%); --pico-secondary: #5d6b89;
--pico-secondary-hover: hsl(205deg, 20%, 32%); --pico-secondary-hover: #525f7a;
--pico-secondary-focus: rgba(89, 107, 120, 0.125); --pico-secondary-underline: rgba(93, 107, 137, 0.5);
--pico-secondary-underline-hover: var(--pico-secondary);
--pico-secondary-background: #5d6b89;
--pico-secondary-background-hover: #525f7a;
--pico-secondary-border: var(--pico-secondary-background);
--pico-secondary-border-hover: var(--pico-secondary-background-hover);
--pico-secondary-focus: rgba(93, 107, 137, 0.25);
--pico-secondary-inverse: #fff; --pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 30%, 15%); --pico-contrast: #181c25;
--pico-contrast-hover: #000; --pico-contrast-hover: #0e1118;
--pico-contrast-focus: rgba(89, 107, 120, 0.125); --pico-contrast-underline: rgba(24, 28, 37, 0.5);
--pico-contrast-underline-hover: var(--pico-secondary);
--pico-contrast-background: #181c25;
--pico-contrast-background-hover: #000;
--pico-contrast-border: var(--pico-contrast-background);
--pico-contrast-border-hover: var(--pico-contrast-background-hover);
--pico-contrast-focus: rgba(93, 107, 137, 0.25);
--pico-contrast-inverse: #fff; --pico-contrast-inverse: #fff;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302), 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06), 0 0 0 0.0625rem rgba(27, 40, 50, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(104, 120, 153, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(104, 120, 153, 0.024), 0.0625rem 0.125rem 0.75rem rgba(104, 120, 153, 0.03), 0.1125rem 0.225rem 1.35rem rgba(104, 120, 153, 0.036), 0.2085rem 0.417rem 2.502rem rgba(104, 120, 153, 0.04302), 0.5rem 1rem 6rem rgba(104, 120, 153, 0.06), 0 0 0 0.0625rem rgba(104, 120, 153, 0.015);
--pico-h1-color: hsl(205deg, 30%, 15%); --pico-h1-color: #2d3138;
--pico-h2-color: #24333e; --pico-h2-color: #373c44;
--pico-h3-color: hsl(205deg, 25%, 23%); --pico-h3-color: #424751;
--pico-h4-color: #374956; --pico-h4-color: #4d535e;
--pico-h5-color: hsl(205deg, 20%, 32%); --pico-h5-color: #5c6370;
--pico-h6-color: #4d606d; --pico-h6-color: #646b79;
--pico-mark-background-color: #fff2ca; --pico-mark-background-color: #fde7c0;
--pico-mark-color: #543a26; --pico-mark-color: #0f1114;
--pico-ins-color: #388e3c; --pico-ins-color: #006d46;
--pico-del-color: #c62828; --pico-del-color: #9b2318;
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: #f6f8f9; --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: hsl(205deg, 20%, 94%); --pico-code-background-color: #fbfcfc;
--pico-code-color: var(--pico-muted-color); --pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-contrast-inverse); --pico-code-kbd-color: var(--pico-background-color);
--pico-code-tag-color: hsl(330deg, 40%, 50%); --pico-form-element-background-color: #fbfcfc;
--pico-code-property-color: hsl(185deg, 40%, 40%); --pico-form-element-border-color: #cfd5e2;
--pico-code-value-color: hsl(40deg, 20%, 50%); --pico-form-element-color: #23262c;
--pico-code-comment-color: hsl(205deg, 14%, 68%);
--pico-form-element-background-color: transparent;
--pico-form-element-border-color: hsl(205deg, 14%, 68%);
--pico-form-element-color: var(--pico-color);
--pico-form-element-placeholder-color: var(--pico-muted-color); --pico-form-element-placeholder-color: var(--pico-muted-color);
--pico-form-element-active-background-color: transparent; --pico-form-element-active-background-color: #fff;
--pico-form-element-active-border-color: var(--pico-primary); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-focus); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-background-color: hsl(205deg, 18%, 86%); --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
--pico-form-element-disabled-border-color: hsl(205deg, 14%, 68%); --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #c62828; --pico-form-element-invalid-border-color: #af291d;
--pico-form-element-invalid-active-border-color: #d32f2f; --pico-form-element-invalid-active-border-color: #9b2318;
--pico-form-element-invalid-focus-color: rgba(211, 47, 47, 0.125); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #388e3c; --pico-form-element-valid-border-color: #00895a;
--pico-form-element-valid-active-border-color: #43a047; --pico-form-element-valid-active-border-color: #007a50;
--pico-form-element-valid-focus-color: rgba(67, 160, 71, 0.125); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: hsl(205deg, 16%, 77%); --pico-switch-background-color: #bfc7d9;
--pico-switch-color: var(--pico-primary-inverse); --pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary); --pico-switch-checked-background-color: var(--pico-primary-background);
--pico-range-border-color: hsl(205deg, 18%, 86%); --pico-range-border-color: #dfe3eb;
--pico-range-active-border-color: hsl(205deg, 16%, 77%); --pico-range-active-border-color: #bfc7d9;
--pico-range-thumb-border-color: var(--pico-background-color); --pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary); --pico-range-thumb-color: var(--pico-secondary-background);
--pico-range-thumb-hover-color: var(--pico-secondary-hover); --pico-range-thumb-hover-color: var(--pico-secondary-background-hover);
--pico-range-thumb-active-color: var(--pico-primary); --pico-range-thumb-active-color: var(--pico-primary);
--pico-accordion-border-color: var(--pico-muted-border-color); --pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary); --pico-accordion-active-summary-color: var(--pico-primary);
@ -81,220 +95,270 @@
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectionning-background-color: #fbfbfc; --pico-card-sectionning-background-color: #fbfcfc;
--pico-dropdown-background-color: #fbfbfc; --pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: #e1e6eb; --pico-dropdown-border-color: #eff1f4;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: hsl(205deg, 20%, 94%); --pico-dropdown-hover-background-color: #f7f8fa;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(213, 220, 226, 0.7); --pico-modal-overlay-background-color: rgba(239, 241, 244, 0.7);
--pico-progress-background-color: hsl(205deg, 18%, 86%); --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 137, 90)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(175, 41, 29)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: light; color-scheme: light;
} }
[data-theme=light] input:is([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]),
:root:not([data-theme=dark]) input:is([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]) {
--pico-form-element-focus-color: var(--pico-primary-focus);
}
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) { :root:not([data-theme=light]) {
--pico-background-color: #11191f; --pico-background-color: #13171f;
--pico-color: hsl(205deg, 16%, 77%); --pico-color: #c2c7d0;
--pico-muted-color: hsl(205deg, 10%, 50%); --pico-muted-color: #7b8495;
--pico-muted-border-color: #1f2d38; --pico-muted-border-color: #202632;
--pico-primary: hsl(195deg, 85%, 41%); --pico-primary: #01aaff;
--pico-primary-hover: hsl(195deg, 80%, 50%); --pico-primary-hover: #51b4ff;
--pico-primary-focus: rgba(16, 149, 193, 0.25); --pico-primary-underline: rgba(1, 170, 255, 0.5);
--pico-primary-underline-hover: var(--pico-primary);
--pico-primary-background: #02659a;
--pico-primary-background-hover: #0172ad;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-border-hover: var(--pico-primary-background-hover);
--pico-primary-focus: rgba(1, 170, 255, 0.25);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%); --pico-secondary: #969eaf;
--pico-secondary-hover: hsl(205deg, 10%, 50%); --pico-secondary-hover: #a0acc7;
--pico-secondary-focus: rgba(115, 130, 140, 0.25); --pico-secondary-underline: rgba(150, 158, 175, 0.5);
--pico-secondary-underline-hover: var(--pico-secondary);
--pico-secondary-background: #48536b;
--pico-secondary-background-hover: #525f7a;
--pico-secondary-border: var(--pico-secondary-background);
--pico-secondary-border-hover: var(--pico-secondary-background-hover);
--pico-secondary-focus: rgba(144, 158, 190, 0.25);
--pico-secondary-inverse: #fff; --pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 20%, 94%); --pico-contrast: #dfe3eb;
--pico-contrast-hover: #fff; --pico-contrast-hover: #eff1f4;
--pico-contrast-focus: rgba(115, 130, 140, 0.25); --pico-contrast-underline: rgba(223, 227, 235, 0.5);
--pico-contrast-underline-hover: var(--pico-contrast);
--pico-contrast-background: #eff1f4;
--pico-contrast-background-hover: #fff;
--pico-contrast-border: var(--pico-contrast-background);
--pico-contrast-border-hover: var(--pico-contrast-background-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--pico-h1-color: hsl(205deg, 20%, 94%); --pico-h1-color: #f0f1f3;
--pico-h2-color: #e1e6eb; --pico-h2-color: #e0e3e7;
--pico-h3-color: hsl(205deg, 18%, 86%); --pico-h3-color: #c2c7d0;
--pico-h4-color: #c8d1d8; --pico-h4-color: #b3b9c5;
--pico-h5-color: hsl(205deg, 16%, 77%); --pico-h5-color: #a4acba;
--pico-h6-color: #afbbc4; --pico-h6-color: #8891a4;
--pico-mark-background-color: #d1c284; --pico-mark-background-color: #014063;
--pico-mark-color: #11191f; --pico-mark-color: #fff;
--pico-ins-color: #388e3c; --pico-ins-color: #00a66e;
--pico-del-color: #c62828; --pico-del-color: #f06048;
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #18232c; --pico-code-background-color: #1a1f28;
--pico-code-color: var(--pico-muted-color); --pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-contrast-inverse); --pico-code-kbd-color: var(--pico-background-color);
--pico-code-tag-color: hsl(330deg, 30%, 50%); --pico-form-element-background-color: #1c212c;
--pico-code-property-color: hsl(185deg, 30%, 50%); --pico-form-element-border-color: #2a3140;
--pico-code-value-color: hsl(40deg, 10%, 50%); --pico-form-element-color: #e0e3e7;
--pico-code-comment-color: #4d606d; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-background-color: #11191f; --pico-form-element-active-background-color: #1a1f28;
--pico-form-element-border-color: #374956; --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-color: var(--pico-color); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-placeholder-color: var(--pico-muted-color); --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
--pico-form-element-active-background-color: var(--pico-form-element-background-color); --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b71c1c; --pico-form-element-invalid-border-color: #861d13;
--pico-form-element-invalid-active-border-color: #c62828; --pico-form-element-invalid-active-border-color: #9b2318;
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2e7d32; --pico-form-element-valid-border-color: #006d46;
--pico-form-element-valid-active-border-color: #388e3c; --pico-form-element-valid-active-border-color: #007a50;
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #374956; --pico-switch-background-color: #333c4e;
--pico-switch-color: var(--pico-primary-inverse); --pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary); --pico-switch-checked-background-color: var(--pico-primary-background);
--pico-range-border-color: #24333e; --pico-range-border-color: #202632;
--pico-range-active-border-color: hsl(205deg, 25%, 23%); --pico-range-active-border-color: #2a3140;
--pico-range-thumb-border-color: var(--pico-background-color); --pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary); --pico-range-thumb-color: var(--pico-secondary-background);
--pico-range-thumb-hover-color: var(--pico-secondary-hover); --pico-range-thumb-hover-color: var(--pico-secondary-background-hover);
--pico-range-thumb-active-color: var(--pico-primary); --pico-range-thumb-active-color: var(--pico-primary);
--pico-accordion-border-color: var(--pico-muted-border-color); --pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary); --pico-accordion-active-summary-color: var(--pico-primary);
--pico-accordion-close-summary-color: var(--pico-color); --pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color); --pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: #141e26; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectionning-background-color: #18232c; --pico-card-sectionning-background-color: #1a1f28;
--pico-dropdown-background-color: hsl(205deg, 30%, 15%); --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #24333e; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8); --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.85);
--pico-progress-background-color: #24333e; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 109, 70)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(134, 29, 19)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: dark; color-scheme: dark;
} }
:root:not([data-theme=light]) input:is([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]) {
--pico-form-element-focus-color: var(--pico-primary-focus);
}
} }
[data-theme=dark] { [data-theme=dark] {
--pico-background-color: #11191f; --pico-background-color: #13171f;
--pico-color: hsl(205deg, 16%, 77%); --pico-color: #c2c7d0;
--pico-muted-color: hsl(205deg, 10%, 50%); --pico-muted-color: #7b8495;
--pico-muted-border-color: #1f2d38; --pico-muted-border-color: #202632;
--pico-primary: hsl(195deg, 85%, 41%); --pico-primary: #01aaff;
--pico-primary-hover: hsl(195deg, 80%, 50%); --pico-primary-hover: #51b4ff;
--pico-primary-focus: rgba(16, 149, 193, 0.25); --pico-primary-underline: rgba(1, 170, 255, 0.5);
--pico-primary-underline-hover: var(--pico-primary);
--pico-primary-background: #02659a;
--pico-primary-background-hover: #0172ad;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-border-hover: var(--pico-primary-background-hover);
--pico-primary-focus: rgba(1, 170, 255, 0.25);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%); --pico-secondary: #969eaf;
--pico-secondary-hover: hsl(205deg, 10%, 50%); --pico-secondary-hover: #a0acc7;
--pico-secondary-focus: rgba(115, 130, 140, 0.25); --pico-secondary-underline: rgba(150, 158, 175, 0.5);
--pico-secondary-underline-hover: var(--pico-secondary);
--pico-secondary-background: #48536b;
--pico-secondary-background-hover: #525f7a;
--pico-secondary-border: var(--pico-secondary-background);
--pico-secondary-border-hover: var(--pico-secondary-background-hover);
--pico-secondary-focus: rgba(144, 158, 190, 0.25);
--pico-secondary-inverse: #fff; --pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 20%, 94%); --pico-contrast: #dfe3eb;
--pico-contrast-hover: #fff; --pico-contrast-hover: #eff1f4;
--pico-contrast-focus: rgba(115, 130, 140, 0.25); --pico-contrast-underline: rgba(223, 227, 235, 0.5);
--pico-contrast-underline-hover: var(--pico-contrast);
--pico-contrast-background: #eff1f4;
--pico-contrast-background-hover: #fff;
--pico-contrast-border: var(--pico-contrast-background);
--pico-contrast-border-hover: var(--pico-contrast-background-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--pico-h1-color: hsl(205deg, 20%, 94%); --pico-h1-color: #f0f1f3;
--pico-h2-color: #e1e6eb; --pico-h2-color: #e0e3e7;
--pico-h3-color: hsl(205deg, 18%, 86%); --pico-h3-color: #c2c7d0;
--pico-h4-color: #c8d1d8; --pico-h4-color: #b3b9c5;
--pico-h5-color: hsl(205deg, 16%, 77%); --pico-h5-color: #a4acba;
--pico-h6-color: #afbbc4; --pico-h6-color: #8891a4;
--pico-mark-background-color: #d1c284; --pico-mark-background-color: #014063;
--pico-mark-color: #11191f; --pico-mark-color: #fff;
--pico-ins-color: #388e3c; --pico-ins-color: #00a66e;
--pico-del-color: #c62828; --pico-del-color: #f06048;
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #18232c; --pico-code-background-color: #1a1f28;
--pico-code-color: var(--pico-muted-color); --pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-contrast-inverse); --pico-code-kbd-color: var(--pico-background-color);
--pico-code-tag-color: hsl(330deg, 30%, 50%); --pico-form-element-background-color: #1c212c;
--pico-code-property-color: hsl(185deg, 30%, 50%); --pico-form-element-border-color: #2a3140;
--pico-code-value-color: hsl(40deg, 10%, 50%); --pico-form-element-color: #e0e3e7;
--pico-code-comment-color: #4d606d; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-background-color: #11191f; --pico-form-element-active-background-color: #1a1f28;
--pico-form-element-border-color: #374956; --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-color: var(--pico-color); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-placeholder-color: var(--pico-muted-color); --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
--pico-form-element-active-background-color: var(--pico-form-element-background-color); --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b71c1c; --pico-form-element-invalid-border-color: #861d13;
--pico-form-element-invalid-active-border-color: #c62828; --pico-form-element-invalid-active-border-color: #9b2318;
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2e7d32; --pico-form-element-valid-border-color: #006d46;
--pico-form-element-valid-active-border-color: #388e3c; --pico-form-element-valid-active-border-color: #007a50;
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #374956; --pico-switch-background-color: #333c4e;
--pico-switch-color: var(--pico-primary-inverse); --pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary); --pico-switch-checked-background-color: var(--pico-primary-background);
--pico-range-border-color: #24333e; --pico-range-border-color: #202632;
--pico-range-active-border-color: hsl(205deg, 25%, 23%); --pico-range-active-border-color: #2a3140;
--pico-range-thumb-border-color: var(--pico-background-color); --pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary); --pico-range-thumb-color: var(--pico-secondary-background);
--pico-range-thumb-hover-color: var(--pico-secondary-hover); --pico-range-thumb-hover-color: var(--pico-secondary-background-hover);
--pico-range-thumb-active-color: var(--pico-primary); --pico-range-thumb-active-color: var(--pico-primary);
--pico-accordion-border-color: var(--pico-muted-border-color); --pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary); --pico-accordion-active-summary-color: var(--pico-primary);
--pico-accordion-close-summary-color: var(--pico-color); --pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color); --pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: #141e26; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectionning-background-color: #18232c; --pico-card-sectionning-background-color: #1a1f28;
--pico-dropdown-background-color: hsl(205deg, 30%, 15%); --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #24333e; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8); --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.85);
--pico-progress-background-color: #24333e; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 109, 70)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(134, 29, 19)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: dark; color-scheme: dark;
} }
[data-theme=dark] input:is([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]) {
--pico-form-element-focus-color: var(--pico-primary-focus);
}
progress, progress,
[type=checkbox], [type=checkbox],
@ -311,9 +375,10 @@ progress,
--pico-line-height: 1.5; --pico-line-height: 1.5;
--pico-font-weight: 400; --pico-font-weight: 400;
--pico-font-size: 16px; --pico-font-size: 16px;
--pico-text-underline-offset: 0.1rem;
--pico-border-radius: 0.25rem; --pico-border-radius: 0.25rem;
--pico-border-width: 1px; --pico-border-width: 1px;
--pico-outline-width: 3px; --pico-outline-width: 0.1875rem;
--pico-transition: 0.2s ease-in-out; --pico-transition: 0.2s ease-in-out;
--pico-spacing: 1rem; --pico-spacing: 1rem;
--pico-typography-spacing-vertical: 1.5rem; --pico-typography-spacing-vertical: 1.5rem;
@ -323,7 +388,7 @@ progress,
--pico-grid-spacing-horizontal: var(--pico-spacing); --pico-grid-spacing-horizontal: var(--pico-spacing);
--pico-form-element-spacing-vertical: 0.75rem; --pico-form-element-spacing-vertical: 0.75rem;
--pico-form-element-spacing-horizontal: 1rem; --pico-form-element-spacing-horizontal: 1rem;
--pico-modal-overlay-backdrop-filter: blur(0.25rem); --pico-modal-overlay-backdrop-filter: blur(0.375rem);
--pico-nav-element-spacing-vertical: 1rem; --pico-nav-element-spacing-vertical: 1rem;
--pico-nav-element-spacing-horizontal: 0.5rem; --pico-nav-element-spacing-horizontal: 0.5rem;
--pico-nav-link-spacing-vertical: 0.5rem; --pico-nav-link-spacing-vertical: 0.5rem;
@ -422,7 +487,7 @@ dialog > article {
} }
a { a {
--pico-text-decoration: none; --pico-text-decoration: underline;
} }
a.secondary, a.contrast { a.secondary, a.contrast {
--pico-text-decoration: underline; --pico-text-decoration: underline;
@ -488,13 +553,18 @@ kbd {
--pico-font-weight: bolder; --pico-font-weight: bolder;
} }
input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]),
:where(select, textarea) {
--pico-outline-width: 0.0625rem;
}
[type=checkbox], [type=checkbox],
[type=radio] { [type=radio] {
--pico-border-width: 2px; --pico-border-width: 0.125rem;
} }
[type=checkbox][role=switch] { [type=checkbox][role=switch] {
--pico-border-width: 3px; --pico-border-width: 0.1875rem;
} }
/** /**
@ -525,6 +595,7 @@ kbd {
font-size: var(--pico-font-size); font-size: var(--pico-font-size);
line-height: var(--pico-line-height); line-height: var(--pico-line-height);
font-family: var(--pico-font-family); font-family: var(--pico-font-family);
text-underline-offset: var(--pico-text-underline-offset);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
overflow-wrap: break-word; overflow-wrap: break-word;
cursor: default; cursor: default;
@ -634,11 +705,14 @@ a,
[role=link] { [role=link] {
--pico-color: var(--pico-primary); --pico-color: var(--pico-primary);
--pico-background-color: transparent; --pico-background-color: transparent;
--pico-underline: var(--pico-primary-underline);
outline: none; outline: none;
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
color: var(--pico-color); color: var(--pico-color);
-webkit-text-decoration: var(--pico-text-decoration); -webkit-text-decoration: var(--pico-text-decoration);
text-decoration: var(--pico-text-decoration); text-decoration: var(--pico-text-decoration);
text-decoration-color: var(--pico-underline);
text-underline-offset: 0.125em;
transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition); transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition); transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
@ -646,6 +720,7 @@ a,
a:is([aria-current], :hover, :active, :focus), a:is([aria-current], :hover, :active, :focus),
[role=link]:is([aria-current], :hover, :active, :focus) { [role=link]:is([aria-current], :hover, :active, :focus) {
--pico-color: var(--pico-primary-hover); --pico-color: var(--pico-primary-hover);
--pico-underline: var(--pico-primary-underline-hover);
--pico-text-decoration: underline; --pico-text-decoration: underline;
} }
a:focus, a:focus,
@ -655,10 +730,12 @@ a:focus,
a.secondary, a.secondary,
[role=link].secondary { [role=link].secondary {
--pico-color: var(--pico-secondary); --pico-color: var(--pico-secondary);
--pico-underline: var(--pico-secondary-underline);
} }
a.secondary:is([aria-current], :hover, :active, :focus), a.secondary:is([aria-current], :hover, :active, :focus),
[role=link].secondary:is([aria-current], :hover, :active, :focus) { [role=link].secondary:is([aria-current], :hover, :active, :focus) {
--pico-color: var(--pico-secondary-hover); --pico-color: var(--pico-secondary-hover);
--pico-underline: var(--pico-secondary-underline-hover);
} }
a.secondary:focus, a.secondary:focus,
[role=link].secondary:focus { [role=link].secondary:focus {
@ -667,10 +744,12 @@ a.secondary:focus,
a.contrast, a.contrast,
[role=link].contrast { [role=link].contrast {
--pico-color: var(--pico-contrast); --pico-color: var(--pico-contrast);
--pico-underline: var(--pico-contrast-underline);
} }
a.contrast:is([aria-current], :hover, :active, :focus), a.contrast:is([aria-current], :hover, :active, :focus),
[role=link].contrast:is([aria-current], :hover, :active, :focus) { [role=link].contrast:is([aria-current], :hover, :active, :focus) {
--pico-color: var(--pico-contrast-hover); --pico-color: var(--pico-contrast-hover);
--pico-underline: var(--pico-contrast-underline-hover);
} }
a.contrast:focus, a.contrast:focus,
[role=link].contrast:focus { [role=link].contrast:focus {
@ -920,8 +999,8 @@ input[type=submit],
input[type=button], input[type=button],
input[type=reset], input[type=reset],
[role=button] { [role=button] {
--pico-background-color: var(--pico-primary); --pico-background-color: var(--pico-primary-background);
--pico-border-color: var(--pico-primary); --pico-border-color: var(--pico-primary-border);
--pico-color: var(--pico-primary-inverse); --pico-color: var(--pico-primary-inverse);
--pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
@ -943,8 +1022,8 @@ input[type=submit]:is([aria-current], :hover, :active, :focus),
input[type=button]:is([aria-current], :hover, :active, :focus), input[type=button]:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus), input[type=reset]:is([aria-current], :hover, :active, :focus),
[role=button]:is([aria-current], :hover, :active, :focus) { [role=button]:is([aria-current], :hover, :active, :focus) {
--pico-background-color: var(--pico-primary-hover); --pico-background-color: var(--pico-primary-background-hover);
--pico-border-color: var(--pico-primary-hover); --pico-border-color: var(--pico-primary-border-hover);
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--pico-color: var(--pico-primary-inverse); --pico-color: var(--pico-primary-inverse);
} }
@ -958,15 +1037,15 @@ input[type=reset]:focus,
:is(button, input[type=submit], input[type=button], [role=button]).secondary, :is(button, input[type=submit], input[type=button], [role=button]).secondary,
input[type=reset] { input[type=reset] {
--pico-background-color: var(--pico-secondary); --pico-background-color: var(--pico-secondary-background);
--pico-border-color: var(--pico-secondary); --pico-border-color: var(--pico-secondary-border);
--pico-color: var(--pico-secondary-inverse); --pico-color: var(--pico-secondary-inverse);
cursor: pointer; cursor: pointer;
} }
:is(button, input[type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus), :is(button, input[type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus) { input[type=reset]:is([aria-current], :hover, :active, :focus) {
--pico-background-color: var(--pico-secondary-hover); --pico-background-color: var(--pico-secondary-background-hover);
--pico-border-color: var(--pico-secondary-hover); --pico-border-color: var(--pico-secondary-border-hover);
--pico-color: var(--pico-secondary-inverse); --pico-color: var(--pico-secondary-inverse);
} }
:is(button, input[type=submit], input[type=button], [role=button]).secondary:focus, :is(button, input[type=submit], input[type=button], [role=button]).secondary:focus,
@ -975,13 +1054,13 @@ input[type=reset]:focus {
} }
:is(button, input[type=submit], input[type=button], [role=button]).contrast { :is(button, input[type=submit], input[type=button], [role=button]).contrast {
--pico-background-color: var(--pico-contrast); --pico-background-color: var(--pico-contrast-background);
--pico-border-color: var(--pico-contrast); --pico-border-color: var(--pico-contrast-border);
--pico-color: var(--pico-contrast-inverse); --pico-color: var(--pico-contrast-inverse);
} }
:is(button, input[type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus) { :is(button, input[type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus) {
--pico-background-color: var(--pico-contrast-hover); --pico-background-color: var(--pico-contrast-background-hover);
--pico-border-color: var(--pico-contrast-hover); --pico-border-color: var(--pico-contrast-border-hover);
--pico-color: var(--pico-contrast-inverse); --pico-color: var(--pico-contrast-inverse);
} }
:is(button, input[type=submit], input[type=button], [role=button]).contrast:focus { :is(button, input[type=submit], input[type=button], [role=button]).contrast:focus {
@ -992,6 +1071,7 @@ input[type=reset]:focus {
input[type=reset].outline { input[type=reset].outline {
--pico-background-color: transparent; --pico-background-color: transparent;
--pico-color: var(--pico-primary); --pico-color: var(--pico-primary);
--pico-border-color: currentColor;
} }
:is(button, input[type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus), :is(button, input[type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus),
input[type=reset].outline:is([aria-current], :hover, :active, :focus) { input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
@ -1002,6 +1082,7 @@ input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary, :is(button, input[type=submit], input[type=button], [role=button]).outline.secondary,
input[type=reset].outline { input[type=reset].outline {
--pico-color: var(--pico-secondary); --pico-color: var(--pico-secondary);
--pico-border-color: currentColor;
} }
:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus), :is(button, input[type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus),
input[type=reset].outline:is([aria-current], :hover, :active, :focus) { input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
@ -1098,23 +1179,6 @@ pre > code {
line-height: var(--pico-line-height); line-height: var(--pico-line-height);
} }
code b {
color: var(--pico-code-tag-color);
font-weight: var(--pico-font-weight);
}
code i {
color: var(--pico-code-property-color);
font-style: normal;
}
code u {
color: var(--pico-code-value-color);
text-decoration: none;
}
code em {
color: var(--pico-code-comment-color);
font-style: normal;
}
kbd { kbd {
background-color: var(--pico-code-kbd-background-color); background-color: var(--pico-code-kbd-background-color);
color: var(--pico-code-kbd-color); color: var(--pico-code-kbd-color);
@ -1281,8 +1345,7 @@ input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly])
} }
input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus, input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus,
select:focus, :where(select, textarea):focus {
textarea:focus {
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
} }
@ -1410,8 +1473,8 @@ label > :where(input, select, textarea) {
[type=radio]:checked, [type=radio]:checked,
[type=radio]:checked:active, [type=radio]:checked:active,
[type=radio]:checked:focus { [type=radio]:checked:focus {
--pico-background-color: var(--pico-primary); --pico-background-color: var(--pico-primary-background);
--pico-border-color: var(--pico-primary); --pico-border-color: var(--pico-primary-border);
background-image: var(--pico-icon-checkbox); background-image: var(--pico-icon-checkbox);
background-position: center; background-position: center;
background-size: 0.75em auto; background-size: 0.75em auto;
@ -1426,8 +1489,8 @@ label > :where(input, select, textarea) {
} }
[type=checkbox]:indeterminate { [type=checkbox]:indeterminate {
--pico-background-color: var(--pico-primary); --pico-background-color: var(--pico-primary-background);
--pico-border-color: var(--pico-primary); --pico-border-color: var(--pico-primary-border);
background-image: var(--pico-icon-minus); background-image: var(--pico-icon-minus);
background-position: center; background-position: center;
background-size: 0.75em auto; background-size: 0.75em auto;
@ -1551,14 +1614,16 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
*/ */
[type=file] { [type=file] {
--pico-color: var(--pico-muted-color); --pico-color: var(--pico-muted-color);
z-index: 1;
position: relative;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]::file-selector-button { [type=file]::file-selector-button {
--pico-background-color: var(--pico-secondary); --pico-background-color: var(--pico-secondary-background);
--pico-border-color: var(--pico-secondary); --pico-border-color: var(--pico-secondary-border);
--pico-color: var(--pico-secondary-inverse); --pico-color: var(--pico-secondary-inverse);
margin-right: calc(var(--pico-spacing) / 2); margin-right: calc(var(--pico-spacing) / 2);
margin-left: 0; margin-left: 0;
@ -1566,7 +1631,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: calc(var(--pico-spacing) / 2); -webkit-margin-end: calc(var(--pico-spacing) / 2);
margin-inline-end: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-border-color); border: var(--pico-border-width) solid var(--pico-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
outline: none; outline: none;
@ -1581,12 +1646,12 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
[type=file]::file-selector-button:is(:hover, :active, :focus) { [type=file]::file-selector-button:is(:hover, :active, :focus) {
--pico-background-color: var(--pico-secondary-hover); --pico-background-color: var(--pico-secondary-background-hover);
--pico-border-color: var(--pico-secondary-hover); --pico-border-color: var(--pico-secondary-border-hover);
} }
[type=file]::-webkit-file-upload-button { [type=file]::-webkit-file-upload-button {
--pico-background-color: var(--pico-secondary); --pico-background-color: var(--pico-secondary-background);
--pico-border-color: var(--pico-secondary); --pico-border-color: var(--pico-secondary-border);
--pico-color: var(--pico-secondary-inverse); --pico-color: var(--pico-secondary-inverse);
margin-right: calc(var(--pico-spacing) / 2); margin-right: calc(var(--pico-spacing) / 2);
margin-left: 0; margin-left: 0;
@ -1594,7 +1659,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
margin-inline-start: 0; margin-inline-start: 0;
-webkit-margin-end: calc(var(--pico-spacing) / 2); -webkit-margin-end: calc(var(--pico-spacing) / 2);
margin-inline-end: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-border-color); border: var(--pico-border-width) solid var(--pico-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
outline: none; outline: none;
@ -1610,18 +1675,18 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) { [type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {
--pico-background-color: var(--pico-secondary-hover); --pico-background-color: var(--pico-secondary-background-hover);
--pico-border-color: var(--pico-secondary-hover); --pico-border-color: var(--pico-secondary-border-hover);
} }
[type=file]::-ms-browse { [type=file]::-ms-browse {
--pico-background-color: var(--pico-secondary); --pico-background-color: var(--pico-secondary-background);
--pico-border-color: var(--pico-secondary); --pico-border-color: var(--pico-secondary-border);
--pico-color: var(--pico-secondary-inverse); --pico-color: var(--pico-secondary-inverse);
margin-right: calc(var(--pico-spacing) / 2); margin-right: calc(var(--pico-spacing) / 2);
margin-left: 0; margin-left: 0;
margin-inline-start: 0; margin-inline-start: 0;
margin-inline-end: calc(var(--pico-spacing) / 2); margin-inline-end: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-border-color); border: var(--pico-border-width) solid var(--pico-border-color);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
outline: none; outline: none;
@ -1637,8 +1702,20 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
[type=file]::-ms-browse:is(:hover, :active, :focus) { [type=file]::-ms-browse:is(:hover, :active, :focus) {
--pico-background-color: var(--pico-secondary-hover); --pico-background-color: var(--pico-secondary-background-hover);
--pico-border-color: var(--pico-secondary-hover); --pico-border-color: var(--pico-secondary-border-hover);
}
[type=file]:is(:hover, :active, :focus)::file-selector-button {
--pico-background-color: var(--pico-secondary-background-hover);
--pico-border-color: var(--pico-secondary-border-hover);
}
[type=file]:is(:hover, :active, :focus)::-webkit-file-upload-button {
--pico-background-color: var(--pico-secondary-background-hover);
--pico-border-color: var(--pico-secondary-border-hover);
}
[type=file]:is(:hover, :active, :focus)::-ms-browse {
--pico-background-color: var(--pico-secondary-background-hover);
--pico-border-color: var(--pico-secondary-border-hover);
} }
/** /**
@ -2009,7 +2086,7 @@ nav li[role=list] > ul li a {
nav details[role=list] summary, nav details[role=list] summary,
nav details[role=list] summary:not([role]) { nav details[role=list] summary:not([role]) {
height: auto; height: auto;
padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal); padding: var(--pico-nav-link-spacing-vertical) var(--pico-form-element-spacing-horizontal);
} }
nav details[role=list][open] summary { nav details[role=list][open] summary {
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
package.json
View file

@ -45,6 +45,7 @@
"done": "echo '\\033[32m[@picocss/pico] ✨ Done\\033[0m'" "done": "echo '\\033[32m[@picocss/pico] ✨ Done\\033[0m'"
}, },
"devDependencies": { "devDependencies": {
"@picocss/colors": "github:picocss/colors",
"autoprefixer": "^10.4.12", "autoprefixer": "^10.4.12",
"clean-css-cli": "^5.6.1", "clean-css-cli": "^5.6.1",
"css-declaration-sorter": "^6.3.1", "css-declaration-sorter": "^6.3.1",

2
scss/components/_dropdown.scss
View file

@ -168,7 +168,7 @@
summary, summary,
summary:not([role]) { summary:not([role]) {
height: auto; height: auto;
padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal); padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
} }
&[open] summary { &[open] summary {

26
scss/content/_button.scss
View file

@ -48,8 +48,8 @@
input[type="button"], input[type="button"],
input[type="reset"], input[type="reset"],
[role="button"] { [role="button"] {
#{$✨}background-color: var(#{$✨}primary); #{$✨}background-color: var(#{$✨}primary-background);
#{$✨}border-color: var(#{$✨}primary); #{$✨}border-color: var(#{$✨}primary-border);
#{$✨}color: var(#{$✨}primary-inverse); #{$✨}color: var(#{$✨}primary-inverse);
#{$✨}box-shadow: var(#{$✨}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); #{$✨}box-shadow: var(#{$✨}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal); padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
@ -71,8 +71,8 @@
} }
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: var(#{$✨}primary-hover); #{$✨}background-color: var(#{$✨}primary-background-hover);
#{$✨}border-color: var(#{$✨}primary-hover); #{$✨}border-color: var(#{$✨}primary-border-hover);
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); #{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
#{$✨}color: var(#{$✨}primary-inverse); #{$✨}color: var(#{$✨}primary-inverse);
} }
@ -88,14 +88,14 @@
// Secondary // Secondary
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary, :is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
input[type="reset"] { input[type="reset"] {
#{$✨}background-color: var(#{$✨}secondary); #{$✨}background-color: var(#{$✨}secondary-background);
#{$✨}border-color: var(#{$✨}secondary); #{$✨}border-color: var(#{$✨}secondary-border);
#{$✨}color: var(#{$✨}secondary-inverse); #{$✨}color: var(#{$✨}secondary-inverse);
cursor: pointer; cursor: pointer;
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: var(#{$✨}secondary-hover); #{$✨}background-color: var(#{$✨}secondary-background-hover);
#{$✨}border-color: var(#{$✨}secondary-hover); #{$✨}border-color: var(#{$✨}secondary-border-hover);
#{$✨}color: var(#{$✨}secondary-inverse); #{$✨}color: var(#{$✨}secondary-inverse);
} }
@ -107,13 +107,13 @@
// Contrast // Contrast
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast { :is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
#{$✨}background-color: var(#{$✨}contrast); #{$✨}background-color: var(#{$✨}contrast-background);
#{$✨}border-color: var(#{$✨}contrast); #{$✨}border-color: var(#{$✨}contrast-border);
#{$✨}color: var(#{$✨}contrast-inverse); #{$✨}color: var(#{$✨}contrast-inverse);
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: var(#{$✨}contrast-hover); #{$✨}background-color: var(#{$✨}contrast-background-hover);
#{$✨}border-color: var(#{$✨}contrast-hover); #{$✨}border-color: var(#{$✨}contrast-border-hover);
#{$✨}color: var(#{$✨}contrast-inverse); #{$✨}color: var(#{$✨}contrast-inverse);
} }
@ -128,6 +128,7 @@
input[type="reset"].outline { input[type="reset"].outline {
#{$✨}background-color: transparent; #{$✨}background-color: transparent;
#{$✨}color: var(#{$✨}primary); #{$✨}color: var(#{$✨}primary);
#{$✨}border-color: currentColor;
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: transparent; #{$✨}background-color: transparent;
@ -139,6 +140,7 @@
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary, :is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
input[type="reset"].outline { input[type="reset"].outline {
#{$✨}color: var(#{$✨}secondary); #{$✨}color: var(#{$✨}secondary);
#{$✨}border-color: currentColor;
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}secondary-hover); #{$✨}color: var(#{$✨}secondary-hover);

27
scss/content/_code.scss
View file

@ -60,33 +60,6 @@
} }
} }
// Code Syntax
code {
// Tags
b {
color: var(#{$✨}code-tag-color);
font-weight: var(#{$✨}font-weight);
}
// Properties
i {
color: var(#{$✨}code-property-color);
font-style: normal;
}
// Values
u {
color: var(#{$✨}code-value-color);
text-decoration: none;
}
// Comments
em {
color: var(#{$✨}code-comment-color);
font-style: normal;
}
}
// kbd // kbd
kbd { kbd {
background-color: var(#{$✨}code-kbd-background-color); background-color: var(#{$✨}code-kbd-background-color);

8
scss/content/_link.scss
View file

@ -10,10 +10,13 @@
[role="link"] { [role="link"] {
#{$✨}color: var(#{$✨}primary); #{$✨}color: var(#{$✨}primary);
#{$✨}background-color: transparent; #{$✨}background-color: transparent;
#{$✨}underline: var(#{$✨}primary-underline);
outline: none; outline: none;
background-color: var(#{$✨}background-color); // 1 background-color: var(#{$✨}background-color); // 1
color: var(#{$✨}color); color: var(#{$✨}color);
text-decoration: var(#{$✨}text-decoration); text-decoration: var(#{$✨}text-decoration);
text-decoration-color: var(#{$✨}underline);
text-underline-offset: 0.125em;
@if $enable-transitions { @if $enable-transitions {
transition: background-color var(#{$✨}transition), color var(#{$✨}transition), transition: background-color var(#{$✨}transition), color var(#{$✨}transition),
@ -22,6 +25,7 @@
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}primary-hover); #{$✨}color: var(#{$✨}primary-hover);
#{$✨}underline: var(#{$✨}primary-underline-hover);
#{$✨}text-decoration: underline; #{$✨}text-decoration: underline;
} }
@ -33,9 +37,11 @@
// Secondary // Secondary
&.secondary { &.secondary {
#{$✨}color: var(#{$✨}secondary); #{$✨}color: var(#{$✨}secondary);
#{$✨}underline: var(#{$✨}secondary-underline);
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}secondary-hover); #{$✨}color: var(#{$✨}secondary-hover);
#{$✨}underline: var(#{$✨}secondary-underline-hover);
} }
&:focus { &:focus {
@ -46,9 +52,11 @@
// Contrast // Contrast
&.contrast { &.contrast {
#{$✨}color: var(#{$✨}contrast); #{$✨}color: var(#{$✨}contrast);
#{$✨}underline: var(#{$✨}contrast-underline);
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}contrast-hover); #{$✨}color: var(#{$✨}contrast-hover);
#{$✨}underline: var(#{$✨}contrast-underline-hover);
} }
&:focus { &:focus {

3
scss/forms/_basics.scss
View file

@ -192,8 +192,7 @@
// Focus // Focus
input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]), input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]),
select, :where(select, textarea) {
textarea {
&:focus { &:focus {
#{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color); #{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
} }

8
scss/forms/_checkbox-radio-switch.scss
View file

@ -30,8 +30,8 @@
&:checked, &:checked,
&:checked:active, &:checked:active,
&:checked:focus { &:checked:focus {
#{$✨}background-color: var(#{$✨}primary); #{$✨}background-color: var(#{$✨}primary-background);
#{$✨}border-color: var(#{$✨}primary); #{$✨}border-color: var(#{$✨}primary-border);
background-image: var(#{$✨}icon-checkbox); background-image: var(#{$✨}icon-checkbox);
background-position: center; background-position: center;
background-size: 0.75em auto; background-size: 0.75em auto;
@ -49,8 +49,8 @@
// Checkboxes // Checkboxes
[type="checkbox"] { [type="checkbox"] {
&:indeterminate { &:indeterminate {
#{$✨}background-color: var(#{$✨}primary); #{$✨}background-color: var(#{$✨}primary-background);
#{$✨}border-color: var(#{$✨}primary); #{$✨}border-color: var(#{$✨}primary-border);
background-image: var(#{$✨}icon-minus); background-image: var(#{$✨}icon-minus);
background-position: center; background-position: center;
background-size: 0.75em auto; background-size: 0.75em auto;

30
scss/forms/_input-file.scss
View file

@ -1,16 +1,21 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@mixin file-selector-button-hover {
#{$✨}background-color: var(#{$✨}secondary-background-hover);
#{$✨}border-color: var(#{$✨}secondary-border-hover);
}
@mixin file-selector-button { @mixin file-selector-button {
#{$✨}background-color: var(#{$✨}secondary); #{$✨}background-color: var(#{$✨}secondary-background);
#{$✨}border-color: var(#{$✨}secondary); #{$✨}border-color: var(#{$✨}secondary-border);
#{$✨}color: var(#{$✨}secondary-inverse); #{$✨}color: var(#{$✨}secondary-inverse);
margin-right: calc(var(#{$✨}spacing) / 2); margin-right: calc(var(#{$✨}spacing) / 2);
margin-left: 0; margin-left: 0;
margin-inline-start: 0; margin-inline-start: 0;
margin-inline-end: calc(var(#{$✨}spacing) / 2); margin-inline-end: calc(var(#{$✨}spacing) / 2);
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
calc(var(#{$✨}form-element-spacing-horizontal) * 0.5); var(#{$✨}form-element-spacing-horizontal);
border: var(#{$✨}border-width) solid var(#{$✨}border-color); border: var(#{$✨}border-width) solid var(#{$✨}border-color);
border-radius: var(#{$✨}border-radius); border-radius: var(#{$✨}border-radius);
outline: none; outline: none;
@ -29,8 +34,7 @@
} }
&:is(:hover, :active, :focus) { &:is(:hover, :active, :focus) {
#{$✨}background-color: var(#{$✨}secondary-hover); @include file-selector-button-hover;
#{$✨}border-color: var(#{$✨}secondary-hover);
} }
} }
@ -41,6 +45,8 @@
[type="file"] { [type="file"] {
#{$✨}color: var(#{$✨}muted-color); #{$✨}color: var(#{$✨}muted-color);
z-index: 1;
position: relative;
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0; padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
@ -57,5 +63,19 @@
&::-ms-browse { &::-ms-browse {
@include file-selector-button; @include file-selector-button;
} }
&:is(:hover, :active, :focus) {
&::file-selector-button {
@include file-selector-button-hover;
}
&::-webkit-file-upload-button {
@include file-selector-button-hover;
}
&::-ms-browse {
@include file-selector-button-hover;
}
}
} }
} }

1
scss/layout/_document.scss
View file

@ -45,6 +45,7 @@
font-size: var(#{$✨}font-size); font-size: var(#{$✨}font-size);
line-height: var(#{$✨}line-height); // 2 line-height: var(#{$✨}line-height); // 2
font-family: var(#{$✨}font-family); font-family: var(#{$✨}font-family);
text-underline-offset: var(#{$✨}text-underline-offset);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
overflow-wrap: break-word; // 3 overflow-wrap: break-word; // 3
cursor: default; // 1 cursor: default; // 1

65
scss/themes/default/_colors.scss
View file

@ -1,65 +0,0 @@
// Navy-Grey
$grey-hue: 205 !default;
$grey-50: hsl($grey-hue, 20%, 94%) !default;
$grey-100: hsl($grey-hue, 18%, 86%) !default;
$grey-200: hsl($grey-hue, 16%, 77%) !default;
$grey-300: hsl($grey-hue, 14%, 68%) !default;
$grey-400: hsl($grey-hue, 12%, 59%) !default;
$grey-500: hsl($grey-hue, 10%, 50%) !default;
$grey-600: hsl($grey-hue, 15%, 41%) !default;
$grey-700: hsl($grey-hue, 20%, 32%) !default;
$grey-800: hsl($grey-hue, 25%, 23%) !default;
$grey-900: hsl($grey-hue, 30%, 15%) !default;
// Light Blue
$primary-hue: 195 !default;
$primary-50: hsl($primary-hue, 90%, 94%) !default;
$primary-100: hsl($primary-hue, 88%, 86%) !default;
$primary-200: hsl($primary-hue, 86%, 77%) !default;
$primary-300: hsl($primary-hue, 84%, 68%) !default;
$primary-400: hsl($primary-hue, 82%, 59%) !default;
$primary-500: hsl($primary-hue, 80%, 50%) !default;
$primary-600: hsl($primary-hue, 85%, 41%) !default;
$primary-700: hsl($primary-hue, 90%, 32%) !default;
$primary-800: hsl($primary-hue, 95%, 23%) !default;
$primary-900: hsl($primary-hue, 100%, 15%) !default;
// Black & White
$black: #000 !default;
$white: #fff !default;
// Amber
$amber-50: #fff8e1 !default;
$amber-100: #ffecb3 !default;
$amber-200: #ffe082 !default;
$amber-300: #ffd54f !default;
$amber-400: #ffca28 !default;
$amber-500: #ffc107 !default;
$amber-600: #ffb300 !default;
$amber-700: #ffa000 !default;
$amber-800: #ff8f00 !default;
$amber-900: #ff6f00 !default;
// Green
$green-50: #e8f5e9 !default;
$green-100: #c8e6c9 !default;
$green-200: #a5d6a7 !default;
$green-300: #81c784 !default;
$green-400: #66bb6a !default;
$green-500: #4caf50 !default;
$green-600: #43a047 !default;
$green-700: #388e3c !default;
$green-800: #2e7d32 !default;
$green-900: #1b5e20 !default;
// Red
$red-50: #ffebee !default;
$red-100: #ffcdd2 !default;
$red-200: #ef9a9a !default;
$red-300: #e57373 !default;
$red-400: #ef5350 !default;
$red-500: #f44336 !default;
$red-600: #e53935 !default;
$red-700: #d32f2f !default;
$red-800: #c62828 !default;
$red-900: #b71c1c !default;

163
scss/themes/default/_dark.scss
View file

@ -1,36 +1,54 @@
@use "sass:map"; @use "sass:map";
@use "colors" as *; @use "../../../node_modules/@picocss/colors/scss/colors" as *;
@use "../../settings" as *; @use "../../settings" as *;
@use "../../utils/box-shadow"; @use "../../utils/box-shadow";
@use "../../utils/functions"; @use "../../utils/functions";
// Default: Dark theme // Default: Dark theme
@mixin theme { @mixin theme {
#{$✨}background-color: #{mix($black, $grey-900, 37.5%)}; #{$✨}background-color: #{mix($slate-950, $slate-900)};
// Text color // Text color
#{$✨}color: #{$grey-200}; #{$✨}color: #{$zinc-200};
// Muted colors // Muted colors
#{$✨}muted-color: #{$grey-500}; #{$✨}muted-color: #{$zinc-450};
#{$✨}muted-border-color: #{mix($grey-900, $grey-800, 75%)}; #{$✨}muted-border-color: #{$slate-850};
// Primary colors // Primary colors
#{$✨}primary: #{$primary-600}; #{$✨}primary: #{$azure-350};
#{$✨}primary-hover: #{$primary-500}; #{$✨}primary-hover: #{$azure-300};
#{$✨}primary-focus: #{rgba($primary-600, 0.25)}; #{$✨}primary-underline: #{rgba($azure-350, 0.5)};
#{$✨}primary-underline-hover: var(#{$✨}primary);
#{$✨}primary-background: #{$azure-600};
#{$✨}primary-background-hover: #{$azure-550};
#{$✨}primary-border: var(#{$✨}primary-background);
#{$✨}primary-border-hover: var(#{$✨}primary-background-hover);
#{$✨}primary-focus: #{rgba($azure-350, 0.25)};
#{$✨}primary-inverse: #{$white}; #{$✨}primary-inverse: #{$white};
// Secondary colors // Secondary colors
#{$✨}secondary: #{$grey-600}; #{$✨}secondary: #{$zinc-350};
#{$✨}secondary-hover: #{$grey-500}; #{$✨}secondary-hover: #{$slate-300};
#{$✨}secondary-focus: #{rgba($grey-500, 0.25)}; #{$✨}secondary-underline: #{rgba($zinc-350, 0.5)};
#{$✨}secondary-underline-hover: var(#{$✨}secondary);
#{$✨}secondary-background: #{$slate-650};
#{$✨}secondary-background-hover: #{$slate-600};
#{$✨}secondary-border: var(#{$✨}secondary-background);
#{$✨}secondary-border-hover: var(#{$✨}secondary-background-hover);
#{$✨}secondary-focus: #{rgba($slate-350, 0.25)};
#{$✨}secondary-inverse: #{$white}; #{$✨}secondary-inverse: #{$white};
// Contrast colors // Contrast colors
#{$✨}contrast: #{$grey-50}; #{$✨}contrast: #{$slate-100};
#{$✨}contrast-hover: #{$white}; #{$✨}contrast-hover: #{$slate-50};
#{$✨}contrast-focus: #{rgba($grey-500, 0.25)}; #{$✨}contrast-underline: #{rgba($slate-100, 0.5)};
#{$✨}contrast-underline-hover: var(#{$✨}contrast);
#{$✨}contrast-background: #{$slate-50};
#{$✨}contrast-background-hover: #{$white};
#{$✨}contrast-border: var(#{$✨}contrast-background);
#{$✨}contrast-border-hover: var(#{$✨}contrast-background-hover);
#{$✨}contrast-focus: #{rgba($slate-150, 0.25)};
#{$✨}contrast-inverse: #{$black}; #{$✨}contrast-inverse: #{$black};
// Box shadow // Box shadow
@ -39,20 +57,20 @@
// Typography // Typography
@if map.get($modules, "content/typography") { @if map.get($modules, "content/typography") {
// Headings colors // Headings colors
#{$✨}h1-color: #{$grey-50}; #{$✨}h1-color: #{$zinc-50};
#{$✨}h2-color: #{mix($grey-100, $grey-50)}; #{$✨}h2-color: #{$zinc-100};
#{$✨}h3-color: #{$grey-100}; #{$✨}h3-color: #{$zinc-200};
#{$✨}h4-color: #{mix($grey-200, $grey-100)}; #{$✨}h4-color: #{$zinc-250};
#{$✨}h5-color: #{$grey-200}; #{$✨}h5-color: #{$zinc-300};
#{$✨}h6-color: #{mix($grey-300, $grey-200)}; #{$✨}h6-color: #{$zinc-400};
// Highlighted text (<mark>) // Highlighted text (<mark>)
#{$✨}mark-background-color: #{mix($grey-300, $amber-300)}; #{$✨}mark-background-color: #{$azure-750};
#{$✨}mark-color: #{mix($black, $grey-900, 37.5%)}; #{$✨}mark-color: #{$white};
// Inserted (<ins>) & Deleted (<ins>) // Inserted (<ins>) & Deleted (<ins>)
#{$✨}ins-color: #{$green-700}; #{$✨}ins-color: #{$jade-400};
#{$✨}del-color: #{$red-800}; #{$✨}del-color: #{$red-400};
// Blockquote // Blockquote
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color); #{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
@ -70,55 +88,56 @@
// Table // Table
@if map.get($modules, "content/table") { @if map.get($modules, "content/table") {
#{$✨}table-border-color: var(#{$✨}muted-border-color); #{$✨}table-border-color: var(#{$✨}muted-border-color);
#{$✨}table-row-stripped-background-color: #{rgba($grey-500, 0.05)}; #{$✨}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
} }
// Code // Code
@if map.get($modules, "content/code") { @if map.get($modules, "content/code") {
#{$✨}code-background-color: #{mix($black, $grey-900, 12.5%)}; #{$✨}code-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$✨}code-color: var(#{$✨}muted-color); #{$✨}code-color: var(#{$✨}muted-color);
#{$✨}code-kbd-background-color: var(#{$✨}contrast); #{$✨}code-kbd-background-color: var(#{$✨}color);
#{$✨}code-kbd-color: var(#{$✨}contrast-inverse); #{$✨}code-kbd-color: var(#{$✨}background-color);
#{$✨}code-tag-color: #{hsl(330, 30%, 50%)};
#{$✨}code-property-color: #{hsl(185, 30%, 50%)};
#{$✨}code-value-color: #{hsl(40, 10%, 50%)};
#{$✨}code-comment-color: #{mix($grey-700, $grey-600)};
} }
// Form elements // Form elements
@if map.get($modules, "forms/basics") { @if map.get($modules, "forms/basics") {
#{$✨}form-element-background-color: #{mix($black, $grey-900, 37.5%)}; #{$✨}form-element-background-color: #{mix($slate-900, $slate-850)};
#{$✨}form-element-border-color: #{mix($grey-800, $grey-700)}; #{$✨}form-element-border-color: #{$slate-800};
#{$✨}form-element-color: var(#{$✨}color); #{$✨}form-element-color: #{$zinc-100};
#{$✨}form-element-placeholder-color: var(#{$✨}muted-color); #{$✨}form-element-placeholder-color: #{$zinc-400};
#{$✨}form-element-active-background-color: var(#{$✨}form-element-background-color); #{$✨}form-element-active-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$✨}form-element-active-border-color: var(#{$✨}primary); #{$✨}form-element-active-border-color: var(#{$✨}primary-border);
#{$✨}form-element-focus-color: var(#{$✨}primary-focus); #{$✨}form-element-focus-color: var(#{$✨}primary-border);
#{$✨}form-element-disabled-background-color: #{$grey-800}; #{$✨}form-element-disabled-background-color: var(#{$✨}form-element-background-color);
#{$✨}form-element-disabled-border-color: #{$grey-700}; #{$✨}form-element-disabled-border-color: var(#{$✨}form-element-border-color);
#{$✨}form-element-disabled-opacity: 0.5; #{$✨}form-element-disabled-opacity: 0.5;
#{$✨}form-element-invalid-border-color: #{$red-900}; #{$✨}form-element-invalid-border-color: #{$red-700};
#{$✨}form-element-invalid-active-border-color: #{$red-800}; #{$✨}form-element-invalid-active-border-color: #{$red-650};
#{$✨}form-element-invalid-focus-color: #{rgba($red-800, 0.25)}; #{$✨}form-element-invalid-focus-color: var(#{$✨}form-element-invalid-active-border-color);
#{$✨}form-element-valid-border-color: #{$green-800}; #{$✨}form-element-valid-border-color: #{$jade-600};
#{$✨}form-element-valid-active-border-color: #{$green-700}; #{$✨}form-element-valid-active-border-color: #{$jade-550};
#{$✨}form-element-valid-focus-color: #{rgba($green-700, 0.25)}; #{$✨}form-element-valid-focus-color: var(#{$✨}form-element-valid-active-border-color);
// Focus for buttons, radio and select
input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
#{$✨}form-element-focus-color: var(#{$✨}primary-focus);
}
} }
// Switch (input[type="checkbox"][role="switch"]) // Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") { @if map.get($modules, "forms/checkbox-radio-switch") {
#{$✨}switch-background-color: #{mix($grey-800, $grey-700)}; #{$✨}switch-background-color: #{$slate-750};
#{$✨}switch-color: var(#{$✨}primary-inverse); #{$✨}switch-color: var(#{$✨}primary-inverse);
#{$✨}switch-checked-background-color: var(#{$✨}primary); #{$✨}switch-checked-background-color: var(#{$✨}primary-background);
} }
// Range (input[type="range"]) // Range (input[type="range"])
@if map.get($modules, "forms/input-range") { @if map.get($modules, "forms/input-range") {
#{$✨}range-border-color: #{mix($grey-900, $grey-800)}; #{$✨}range-border-color: #{$slate-850};
#{$✨}range-active-border-color: #{$grey-800}; #{$✨}range-active-border-color: #{$slate-800};
#{$✨}range-thumb-border-color: var(#{$✨}background-color); #{$✨}range-thumb-border-color: var(#{$✨}background-color);
#{$✨}range-thumb-color: var(#{$✨}secondary); #{$✨}range-thumb-color: var(#{$✨}secondary-background);
#{$✨}range-thumb-hover-color: var(#{$✨}secondary-hover); #{$✨}range-thumb-hover-color: var(#{$✨}secondary-background-hover);
#{$✨}range-thumb-active-color: var(#{$✨}primary); #{$✨}range-thumb-active-color: var(#{$✨}primary);
} }
@ -132,19 +151,19 @@
// Card (<article>) // Card (<article>)
@if map.get($modules, "components/card") { @if map.get($modules, "components/card") {
#{$✨}card-background-color: #{mix($black, $grey-900, 25%)}; #{$✨}card-background-color: #{$slate-900};
#{$✨}card-border-color: var(#{$✨}card-background-color); #{$✨}card-border-color: var(#{$✨}card-background-color);
#{$✨}card-box-shadow: var(#{$✨}box-shadow); #{$✨}card-box-shadow: var(#{$✨}box-shadow);
#{$✨}card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)}; #{$✨}card-sectionning-background-color: #{mix($slate-900, $slate-850, 75%)};
} }
// Dropdown (<details role="list">) // Dropdown (<details role="list">)
@if map.get($modules, "components/dropdown") { @if map.get($modules, "components/dropdown") {
#{$✨}dropdown-background-color: #{$grey-900}; #{$✨}dropdown-background-color: #{$slate-900};
#{$✨}dropdown-border-color: #{mix($grey-900, $grey-800)}; #{$✨}dropdown-border-color: #{$slate-850};
#{$✨}dropdown-box-shadow: var(#{$✨}box-shadow); #{$✨}dropdown-box-shadow: var(#{$✨}box-shadow);
#{$✨}dropdown-color: var(#{$✨}color); #{$✨}dropdown-color: var(#{$✨}color);
#{$✨}dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)}; #{$✨}dropdown-hover-background-color: #{$slate-850};
} }
// Loading ([aria-busy=true]) // Loading ([aria-busy=true])
@ -154,18 +173,18 @@
// Modal (<dialog>) // Modal (<dialog>)
@if map.get($modules, "components/modal") { @if map.get($modules, "components/modal") {
#{$✨}modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.8)}; #{$✨}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.85)};
} }
// Progress // Progress
@if map.get($modules, "components/progress") { @if map.get($modules, "components/progress") {
#{$✨}progress-background-color: #{mix($grey-900, $grey-800)}; #{$✨}progress-background-color: #{$slate-850};
#{$✨}progress-color: var(#{$✨}primary); #{$✨}progress-color: var(#{$✨}primary-background);
} }
// Tooltip ([data-tooltip]) // Tooltip ([data-tooltip])
@if map.get($modules, "components/tooltip") { @if map.get($modules, "components/tooltip") {
#{$✨}tooltip-background-color: var(#{$✨}contrast); #{$✨}tooltip-background-color: var(#{$✨}contrast-background);
#{$✨}tooltip-color: var(#{$✨}contrast-inverse); #{$✨}tooltip-color: var(#{$✨}contrast-inverse);
} }
@ -176,35 +195,35 @@
} }
// Chevron icons // Chevron icons
@if map.get($modules, "forms/basic") or @if map.get($modules, "forms/basics") or
map.get($modules, "components/accordion") or map.get($modules, "components/accordion") or
map.get($modules, "components/dropdown") map.get($modules, "components/dropdown")
{ {
#{$✨}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($black)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($black)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
} }
// Datetime icons // Datetime icons
@if map.get($modules, "input-date") { @if map.get($modules, "forms/input-date") {
#{$✨}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
#{$✨}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
} }
// Form validation icons // Form validation icons
@if map.get($modules, "forms/basic") { @if map.get($modules, "forms/basics") {
#{$✨}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($green-800)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($jade-600)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($red-900)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($red-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
// Search icon // Search icon
@if map.get($modules, "forms/input-search") { @if map.get($modules, "forms/input-search") {
#{$✨}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
} }
// Close icon // Close icon
@if map.get($modules, "components/modal") { @if map.get($modules, "components/modal") {
#{$✨}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
} }
// Document // Document

161
scss/themes/default/_light.scss
View file

@ -1,5 +1,5 @@
@use "sass:map"; @use "sass:map";
@use "colors" as *; @use "../../../node_modules/@picocss/colors/scss/colors" as *;
@use "../../settings" as *; @use "../../settings" as *;
@use "../../utils/box-shadow"; @use "../../utils/box-shadow";
@use "../../utils/functions"; @use "../../utils/functions";
@ -9,50 +9,68 @@
#{$✨}background-color: #{$white}; #{$✨}background-color: #{$white};
// Text color // Text color
#{$✨}color: #{$grey-700}; #{$✨}color: #{$zinc-750};
// Muted colors // Muted colors
#{$✨}muted-color: #{$grey-500}; #{$✨}muted-color: #{$zinc-550};
#{$✨}muted-border-color: #{$grey-50}; #{$✨}muted-border-color: #{mix($slate-100, $slate-50)};
// Primary colors // Primary colors
#{$✨}primary: #{$primary-600}; #{$✨}primary: #{$azure-550};
#{$✨}primary-hover: #{$primary-700}; #{$✨}primary-hover: #{$azure-600};
#{$✨}primary-focus: #{rgba($primary-600, 0.125)}; #{$✨}primary-underline: #{rgba($azure-550, 0.5)};
#{$✨}primary-underline-hover: var(#{$✨}primary);
#{$✨}primary-background: #{$azure-550};
#{$✨}primary-background-hover: #{$azure-600};
#{$✨}primary-border: var(#{$✨}primary-background);
#{$✨}primary-border-hover: var(#{$✨}primary-background-hover);
#{$✨}primary-focus: #{rgba($azure-400, 0.25)};
#{$✨}primary-inverse: #{$white}; #{$✨}primary-inverse: #{$white};
// Secondary colors // Secondary colors
#{$✨}secondary: #{$grey-600}; #{$✨}secondary: #{$slate-550};
#{$✨}secondary-hover: #{$grey-700}; #{$✨}secondary-hover: #{$slate-600};
#{$✨}secondary-focus: #{rgba($grey-600, 0.125)}; #{$✨}secondary-underline: #{rgba($slate-550, 0.5)};
#{$✨}secondary-underline-hover: var(#{$✨}secondary);
#{$✨}secondary-background: #{$slate-550};
#{$✨}secondary-background-hover: #{$slate-600};
#{$✨}secondary-border: var(#{$✨}secondary-background);
#{$✨}secondary-border-hover: var(#{$✨}secondary-background-hover);
#{$✨}secondary-focus: #{rgba($slate-550, 0.25)};
#{$✨}secondary-inverse: #{$white}; #{$✨}secondary-inverse: #{$white};
// Contrast colors // Contrast colors
#{$✨}contrast: #{$grey-900}; #{$✨}contrast: #{$slate-900};
#{$✨}contrast-hover: #{$black}; #{$✨}contrast-hover: #{$slate-950};
#{$✨}contrast-focus: #{rgba($grey-600, 0.125)}; #{$✨}contrast-underline: #{rgba($slate-900, 0.5)};
#{$✨}contrast-underline-hover: var(#{$✨}secondary);
#{$✨}contrast-background: #{$slate-900};
#{$✨}contrast-background-hover: #{$black};
#{$✨}contrast-border: var(#{$✨}contrast-background);
#{$✨}contrast-border-hover: var(#{$✨}contrast-background-hover);
#{$✨}contrast-focus: #{rgba($slate-550, 0.25)};
#{$✨}contrast-inverse: #{$white}; #{$✨}contrast-inverse: #{$white};
// Box shadow // Box shadow
#{$✨}box-shadow: box-shadow.shadow($grey-900); #{$✨}box-shadow: box-shadow.shadow($slate-500);
// Typography // Typography
@if map.get($modules, "content/typography") { @if map.get($modules, "content/typography") {
// Headings colors // Headings colors
#{$✨}h1-color: #{$grey-900}; #{$✨}h1-color: #{$zinc-800};
#{$✨}h2-color: #{mix($grey-900, $grey-800)}; #{$✨}h2-color: #{$zinc-750};
#{$✨}h3-color: #{$grey-800}; #{$✨}h3-color: #{$zinc-700};
#{$✨}h4-color: #{mix($grey-800, $grey-700)}; #{$✨}h4-color: #{$zinc-650};
#{$✨}h5-color: #{$grey-700}; #{$✨}h5-color: #{$zinc-600};
#{$✨}h6-color: #{mix($grey-700, $grey-600)}; #{$✨}h6-color: #{$zinc-550};
// Highlighted text (<mark>) // Highlighted text (<mark>)
#{$✨}mark-background-color: #{mix($amber-100, $amber-50)}; #{$✨}mark-background-color: #{mix($amber-100, $amber-50)};
#{$✨}mark-color: #{mix($grey-900, $amber-900, 75%)}; #{$✨}mark-color: #{$zinc-950};
// Inserted (<ins>) & Deleted (<ins>) // Inserted (<ins>) & Deleted (<ins>)
#{$✨}ins-color: #{$green-700}; #{$✨}ins-color: #{$jade-600};
#{$✨}del-color: #{$red-800}; #{$✨}del-color: #{$red-650};
// Blockquote // Blockquote
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color); #{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
@ -70,55 +88,56 @@
// Table // Table
@if map.get($modules, "content/table") { @if map.get($modules, "content/table") {
#{$✨}table-border-color: var(#{$✨}muted-border-color); #{$✨}table-border-color: var(#{$✨}muted-border-color);
#{$✨}table-row-stripped-background-color: #{mix($grey-50, $white)}; #{$✨}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
} }
// Code // Code
@if map.get($modules, "content/code") { @if map.get($modules, "content/code") {
#{$✨}code-background-color: #{$grey-50}; #{$✨}code-background-color: #{mix($slate-50, $white, 25%)};
#{$✨}code-color: var(#{$✨}muted-color); #{$✨}code-color: var(#{$✨}muted-color);
#{$✨}code-kbd-background-color: var(#{$✨}contrast); #{$✨}code-kbd-background-color: var(#{$✨}color);
#{$✨}code-kbd-color: var(#{$✨}contrast-inverse); #{$✨}code-kbd-color: var(#{$✨}background-color);
#{$✨}code-tag-color: #{hsl(330, 40%, 50%)};
#{$✨}code-property-color: #{hsl(185, 40%, 40%)};
#{$✨}code-value-color: #{hsl(40, 20%, 50%)};
#{$✨}code-comment-color: #{$grey-300};
} }
// Form elements // Form elements
@if map.get($modules, "forms/basics") { @if map.get($modules, "forms/basics") {
#{$✨}form-element-background-color: transparent; #{$✨}form-element-background-color: #{mix($slate-50, $white, 25%)};
#{$✨}form-element-border-color: #{$grey-300}; #{$✨}form-element-border-color: #{$slate-150};
#{$✨}form-element-color: var(#{$✨}color); #{$✨}form-element-color: #{$zinc-850};
#{$✨}form-element-placeholder-color: var(#{$✨}muted-color); #{$✨}form-element-placeholder-color: var(#{$✨}muted-color);
#{$✨}form-element-active-background-color: transparent; #{$✨}form-element-active-background-color: #{$white};
#{$✨}form-element-active-border-color: var(#{$✨}primary); #{$✨}form-element-active-border-color: var(#{$✨}primary-border);
#{$✨}form-element-focus-color: var(#{$✨}primary-focus); #{$✨}form-element-focus-color: var(#{$✨}primary-border);
#{$✨}form-element-disabled-background-color: #{$grey-100}; #{$✨}form-element-disabled-background-color: var(#{$✨}form-element-background-color);
#{$✨}form-element-disabled-border-color: #{$grey-300}; #{$✨}form-element-disabled-border-color: var(#{$✨}form-element-border-color);
#{$✨}form-element-disabled-opacity: 0.5; #{$✨}form-element-disabled-opacity: 0.5;
#{$✨}form-element-invalid-border-color: #{$red-800}; #{$✨}form-element-invalid-border-color: #{$red-600};
#{$✨}form-element-invalid-active-border-color: #{$red-700}; #{$✨}form-element-invalid-active-border-color: #{$red-650};
#{$✨}form-element-invalid-focus-color: #{rgba($red-700, 0.125)}; #{$✨}form-element-invalid-focus-color: var(#{$✨}form-element-invalid-active-border-color);
#{$✨}form-element-valid-border-color: #{$green-700}; #{$✨}form-element-valid-border-color: #{$jade-500};
#{$✨}form-element-valid-active-border-color: #{$green-600}; #{$✨}form-element-valid-active-border-color: #{$jade-550};
#{$✨}form-element-valid-focus-color: #{rgba($green-600, 0.125)}; #{$✨}form-element-valid-focus-color: var(#{$✨}form-element-valid-active-border-color);
// Focus for buttons, radio and select
input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
#{$✨}form-element-focus-color: var(#{$✨}primary-focus);
}
} }
// Switch (input[type="checkbox"][role="switch"]) // Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") { @if map.get($modules, "forms/checkbox-radio-switch") {
#{$✨}switch-background-color: #{$grey-200}; #{$✨}switch-background-color: #{$slate-200};
#{$✨}switch-color: var(#{$✨}primary-inverse); #{$✨}switch-color: var(#{$✨}primary-inverse);
#{$✨}switch-checked-background-color: var(#{$✨}primary); #{$✨}switch-checked-background-color: var(#{$✨}primary-background);
} }
// Range (input[type="range"]) // Range (input[type="range"])
@if map.get($modules, "forms/input-range") { @if map.get($modules, "forms/input-range") {
#{$✨}range-border-color: #{$grey-100}; #{$✨}range-border-color: #{$slate-100};
#{$✨}range-active-border-color: #{$grey-200}; #{$✨}range-active-border-color: #{$slate-200};
#{$✨}range-thumb-border-color: var(#{$✨}background-color); #{$✨}range-thumb-border-color: var(#{$✨}background-color);
#{$✨}range-thumb-color: var(#{$✨}secondary); #{$✨}range-thumb-color: var(#{$✨}secondary-background);
#{$✨}range-thumb-hover-color: var(#{$✨}secondary-hover); #{$✨}range-thumb-hover-color: var(#{$✨}secondary-background-hover);
#{$✨}range-thumb-active-color: var(#{$✨}primary); #{$✨}range-thumb-active-color: var(#{$✨}primary);
} }
@ -135,16 +154,16 @@
#{$✨}card-background-color: var(#{$✨}background-color); #{$✨}card-background-color: var(#{$✨}background-color);
#{$✨}card-border-color: var(#{$✨}muted-border-color); #{$✨}card-border-color: var(#{$✨}muted-border-color);
#{$✨}card-box-shadow: var(#{$✨}box-shadow); #{$✨}card-box-shadow: var(#{$✨}box-shadow);
#{$✨}card-sectionning-background-color: #{mix($grey-50, $white, 25%)}; #{$✨}card-sectionning-background-color: #{mix($slate-50, $white, 25%)};
} }
// Dropdown (<details role="list">) // Dropdown (<details role="list">)
@if map.get($modules, "components/dropdown") { @if map.get($modules, "components/dropdown") {
#{$✨}dropdown-background-color: #{mix($grey-50, $white, 25%)}; #{$✨}dropdown-background-color: #{$white};
#{$✨}dropdown-border-color: #{mix($grey-100, $grey-50)}; #{$✨}dropdown-border-color: #{$slate-50};
#{$✨}dropdown-box-shadow: var(#{$✨}box-shadow); #{$✨}dropdown-box-shadow: var(#{$✨}box-shadow);
#{$✨}dropdown-color: var(#{$✨}color); #{$✨}dropdown-color: var(#{$✨}color);
#{$✨}dropdown-hover-background-color: #{$grey-50}; #{$✨}dropdown-hover-background-color: #{mix($slate-50, $white)};
} }
// Loading ([aria-busy=true]) // Loading ([aria-busy=true])
@ -154,18 +173,18 @@
// Modal (<dialog>) // Modal (<dialog>)
@if map.get($modules, "components/modal") { @if map.get($modules, "components/modal") {
#{$✨}modal-overlay-background-color: #{rgba($grey-100, 0.7)}; #{$✨}modal-overlay-background-color: #{rgba($slate-50, 0.7)};
} }
// Progress // Progress
@if map.get($modules, "components/progress") { @if map.get($modules, "components/progress") {
#{$✨}progress-background-color: #{$grey-100}; #{$✨}progress-background-color: #{$slate-100};
#{$✨}progress-color: var(#{$✨}primary); #{$✨}progress-color: var(#{$✨}primary-background);
} }
// Tooltip ([data-tooltip]) // Tooltip ([data-tooltip])
@if map.get($modules, "components/tooltip") { @if map.get($modules, "components/tooltip") {
#{$✨}tooltip-background-color: var(#{$✨}contrast); #{$✨}tooltip-background-color: var(#{$✨}contrast-background);
#{$✨}tooltip-color: var(#{$✨}contrast-inverse); #{$✨}tooltip-color: var(#{$✨}contrast-inverse);
} }
@ -176,35 +195,35 @@
} }
// Chevron icons // Chevron icons
@if map.get($modules, "forms/basic") or @if map.get($modules, "forms/basics") or
map.get($modules, "components/accordion") or map.get($modules, "components/accordion") or
map.get($modules, "components/dropdown") map.get($modules, "components/dropdown")
{ {
#{$✨}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
} }
// Datetime icons // Datetime icons
@if map.get($modules, "input-date") { @if map.get($modules, "forms/input-date") {
#{$✨}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
#{$✨}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
} }
// Form validation icons // Form validation icons
@if map.get($modules, "forms/basic") { @if map.get($modules, "forms/basics") {
#{$✨}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($green-700)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($jade-500)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($red-800)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($red-600)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
// Search icon // Search icon
@if map.get($modules, "forms/input-search") { @if map.get($modules, "forms/input-search") {
#{$✨}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
} }
// Close icon // Close icon
@if map.get($modules, "components/modal") { @if map.get($modules, "components/modal") {
#{$✨}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
} }
// Document // Document

17
scss/themes/default/_styles.scss
View file

@ -14,6 +14,7 @@
#{$✨}line-height: 1.5; #{$✨}line-height: 1.5;
#{$✨}font-weight: 400; #{$✨}font-weight: 400;
#{$✨}font-size: 16px; #{$✨}font-size: 16px;
#{$✨}text-underline-offset: 0.1rem;
// Responsive root font size // Responsive root font size
@if $enable-responsive-typography { @if $enable-responsive-typography {
@ -29,7 +30,7 @@
// Borders // Borders
#{$✨}border-radius: 0.25rem; #{$✨}border-radius: 0.25rem;
#{$✨}border-width: 1px; #{$✨}border-width: 1px;
#{$✨}outline-width: 3px; #{$✨}outline-width: 0.1875rem;
// Transitions // Transitions
#{$✨}transition: 0.2s ease-in-out; #{$✨}transition: 0.2s ease-in-out;
@ -70,7 +71,7 @@
// Modal (<dialog>) // Modal (<dialog>)
@if map.get($modules, "components/modal") { @if map.get($modules, "components/modal") {
#{$✨}modal-overlay-backdrop-filter: blur(0.25rem); #{$✨}modal-overlay-backdrop-filter: blur(0.375rem);
} }
// Spacings for nav component // Spacings for nav component
@ -159,7 +160,7 @@
// Link // Link
@if map.get($modules, "content/link") { @if map.get($modules, "content/link") {
a { a {
#{$✨}text-decoration: none; #{$✨}text-decoration: underline;
// Secondary & Contrast // Secondary & Contrast
@if enable-classes { @if enable-classes {
@ -245,15 +246,21 @@
} }
} }
// Inputs and Selects
input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]),
:where(select, textarea) {
#{$✨}outline-width: 0.0625rem;
}
// Checkboxes, Radios and Switches // Checkboxes, Radios and Switches
@if map.get($modules, "forms/checkbox-radio-switch") { @if map.get($modules, "forms/checkbox-radio-switch") {
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
#{$✨}border-width: 2px; #{$✨}border-width: 0.125rem;
} }
[type="checkbox"][role="switch"] { [type="checkbox"][role="switch"] {
#{$✨}border-width: 3px; #{$✨}border-width: 0.1875rem;
} }
} }
} }

4
yarn.lock
View file

@ -23,6 +23,10 @@
"@nodelib/fs.scandir" "2.1.5" "@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0" fastq "^1.6.0"
"@picocss/colors@github:picocss/colors":
version "0.0.1"
resolved "https://codeload.github.com/picocss/colors/tar.gz/69ef1d99de1eedb8ae36544dbee10bab8e4c62e2"
abbrev@1: abbrev@1:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8" resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"