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

CSS Vars refactoring

Browse source
This commit is contained in:
Lucas Larroche 2021-07-02 16:54:41 +07:00
parent 14460576bf
commit d12af72cab
64 changed files with 4878 additions and 4948 deletions
Download patch file Download diff file Expand all files Collapse all files

2
LICENSE.md
View file

@ -1,6 +1,6 @@
MIT License MIT License
Copyright (c) 2019-2020 Pico Copyright (c) 2019-2021 Pico
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

1581
css/pico.classless.css
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

1902
css/pico.css
View file

File diff suppressed because it is too large Load diff

1607
css/pico.fluid.classless.css
View file

File diff suppressed because it is too large Load diff

4
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

1215
css/pico.slim.css
View file

File diff suppressed because it is too large Load diff

4
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

625
css/themes/default.css
View file

@ -2,228 +2,433 @@
* Theme: default * Theme: default
*/ */
:root { :root {
--text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--titles-font: var(--text-font); --line-height: 1.5;
--code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-weight: 400;
--line-height: 1.5; --font-size: 16px;
--text-weight: 400; --border-radius: .25rem;
--titles-weight: 700; --border-width: 1px;
--form-element-weight: var(--text-weight); --outline-width: 3px;
--buttons-weight: var(--text-weight); --spacing: 1rem;
--code-weight: var(--text-weight); --typography-spacing-vertical: 1.5rem;
--base-font-xs: 16px; --block-spacing-vertical: calc(var(--spacing) * 2);
--base-font-sm: 17px; --block-spacing-horizontal: var(--spacing);
--base-font-md: 18px; --grid-spacing-vertical: 0;
--base-font-lg: 19px; --grid-spacing-horizontal: var(--spacing);
--base-font-xl: 20px; --form-element-spacing-vertical: .75rem;
--h1-size: 2rem;
--h2-size: 1.75rem;
--h3-size: 1.5rem;
--h4-size: 1.25rem;
--h5-size: 1.125rem;
--h6-size: 1rem;
--block-round: .25rem;
--form-element-border-width: 1px;
--form-element-outline-width: 3px;
--checkbox-radio-border-width: 2px;
--switch-border-width: 3px;
--form-element-spacing-vertical: .75rem;
--form-element-spacing-horizontal: 1rem; --form-element-spacing-horizontal: 1rem;
--button-round: var(--block-round); --transition: .2s ease-in-out;
--button-border-width: var(--form-element-border-width);
--button-outline-width: var(--form-element-outline-width);
--button-spacing-vertical: var(--form-element-spacing-vertical);
--button-spacing-horizontal: var(--form-element-spacing-horizontal);
--spacing-gutter: 1rem;
--spacing-block: 2rem;
--spacing-factor-xs: 1;
--spacing-factor-sm: 1.25;
--spacing-factor-md: 1.5;
--spacing-factor-lg: 1.75;
--spacing-factor-xl: 2;
--spacing-typography: 1.5rem;
--spacing-form-element: .25rem;
--transition: .2s ease-in-out;
} }
:root { @media (min-width: 576px) {
--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='rgba(115, 130, 140, 0.999)' opacity='0.66' 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"); :root {
--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='rgba(115, 130, 140, 0.999)' opacity='0.66' 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"); --font-size: 17px;
--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='rgba(115, 130, 140, 0.999)' opacity='0.66' 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-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='rgba(115, 130, 140, 0.999)' opacity='0.66' 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-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='%23FFF' 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");
--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='%23FFF' 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"); @media (min-width: 768px) {
--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='rgba(40, 138, 106, 0.999)' 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"); :root {
--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='rgba(185, 70, 70, 0.999)' 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"); --font-size: 18px;
}
}
@media (min-width: 992px) {
:root {
--font-size: 19px;
}
}
@media (min-width: 1200px) {
:root {
--font-size: 20px;
}
}
@media (min-width: 576px) {
body > header,
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
}
}
@media (min-width: 768px) {
body > header,
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 3);
}
}
@media (min-width: 992px) {
body > header,
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 3.5);
}
}
@media (min-width: 1200px) {
body > header,
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 4);
}
}
@media (min-width: 576px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
}
}
@media (min-width: 768px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
@media (min-width: 992px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
}
}
@media (min-width: 1200px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
a {
--text-decoration: none;
}
a.secondary, a.contrast {
--text-decoration: underline;
}
small {
--font-size: 0.875rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
--font-weight: 700;
}
h1 {
--font-size: 2rem;
--typography-spacing-vertical: 3rem;
}
h2 {
--font-size: 1.75rem;
--typography-spacing-vertical: 2.625rem;
}
h3 {
--font-size: 1.5rem;
--typography-spacing-vertical: 2.25rem;
}
h4 {
--font-size: 1.25rem;
--typography-spacing-vertical: 1.874rem;
}
h5 {
--font-size: 1.125rem;
--typography-spacing-vertical: 1.6875rem;
}
[type="checkbox"],
[type="radio"] {
--border-width: 2px;
}
[type="checkbox"][role="switch"] {
--border-width: 3px;
}
table thead th,
table thead td {
--border-width: 3px;
}
table :not(thead) td {
--font-size: 0.875rem;
}
pre,
code,
kbd,
samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
kbd {
--font-weight: bolder;
} }
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
--background: #FFF; color-scheme: light;
--text: #415462; --background-color: #FFF;
--h1: #1b2832; --color: #415462;
--h2: #2c3d49; --h1-color: #1b2832;
--h3: #415462; --h2-color: #23333e;
--h4: #596b78; --h3-color: #2c3d49;
--h5: #73828c; --h4-color: #374956;
--h6: #8a99a3; --h5-color: #415462;
--primary: #1095c1; --h6-color: #4d606d;
--primary-border: var(--primary); --muted-color: #73828c;
--primary-hover: #08769b; --muted-border-color: #edf0f3;
--primary-hover-border: var(--primary-hover); --primary: #1095c1;
--primary-focus: rgba(16, 149, 193, 0.125); --primary-hover: #08769b;
--primary-inverse: #FFF; --primary-focus: rgba(16, 149, 193, 0.125);
--secondary: #73828c; --primary-inverse: #FFF;
--secondary-border: var(--secondary); --secondary: #596b78;
--secondary-hover: #415462; --secondary-hover: #415462;
--secondary-hover-border: var(--secondary-hover); --secondary-focus: rgba(89, 107, 120, 0.125);
--secondary-focus: rgba(115, 130, 140, 0.125); --secondary-inverse: #FFF;
--secondary-inverse: #FFF; --contrast: #1b2832;
--contrast: #2c3d49; --contrast-hover: #000;
--contrast-border: var(--contrast); --contrast-focus: rgba(89, 107, 120, 0.125);
--contrast-hover: #0d1419; --contrast-inverse: #FFF;
--contrast-hover-border: var(--contrast-hover); --mark-background-color: #fff2ca;
--contrast-focus: rgba(115, 130, 140, 0.125); --mark-color: #543a25;
--contrast-inverse: #FFF; --ins-color: #388E3C;
--input-background: #FFF; --del-color: #C62828;
--input-border: #c8d1d8; --blockquote-border-color: var(--muted-border-color);
--input-hover-background: var(--input-background); --blockquote-footer-color: var(--muted-color);
--input-hover-border: var(--primary); --form-element-background-color: transparent;
--input-focus: var(--primary-focus); --form-element-border-color: #a2afb9;
--input-inverse: var(--primary-inverse); --form-element-color: var(--color);
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --form-element-placeholder-color: var(--muted-color);
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --form-element-active-background-color: transparent;
--valid: #288a6a; --form-element-active-border-color: var(--primary);
--invalid: #b94646; --form-element-focus: var(--primary-focus);
--mark: rgba(255, 223, 128, 0.33); --form-element-disabled-background-color: #d5dce2;
--mark-text: #2c3d49; --form-element-disabled-border-color: #a2afb9;
--muted-text: #7e8d98; --form-element-invalid-border-color: #C62828;
--muted-background: #edf0f3; --form-element-invalid-active-border-color: #B71C1C;
--muted-border: #edf0f3; --form-element-valid-border-color: #388E3C;
--card-background: #FFF; --form-element-valid-active-border-color: #2E7D32;
--card-sections: #f3f5f7; --switch-background-color: #bbc6ce;
--card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); --switch-color: var(--primary-inverse);
--code-background: #f3f5f7; --switch-checked-background-color: var(--primary);
--code-inlined: #edf0f3; --range-border-color: #d5dce2;
--code-color-1: #73828c; --range-active-border-color: #bbc6ce;
--code-color-2: #b34d80; --range-thumb-border-color: var(--background-color);
--code-color-3: #3d888f; --range-thumb-color: var(--secondary);
--code-color-4: #998866; --range-thumb-hover-color: var(--secondary-hover);
--code-color-5: #96a4ae; --range-thumb-active-color: var(--primary);
--table-border: rgba(237, 240, 243, 0.75); --table-border-color: var(--muted-border-color);
--table-stripping: rgba(115, 130, 140, 0.075); --table-row-stripped-background-color:#f6f8f9;
--code-background-color: #edf0f3;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #b34d80;
--code-property-color: #3d888f;
--code-value-color: #998866;
--code-comment-color: #a2afb9;
--accordion-border-color: var(--muted-border-color);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fafbfc;
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--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='rgba(65, 84, 98, 0.999)' 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-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='rgba(65, 84, 98, 0.999)' 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='rgba(65, 84, 98, 0.999)' 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-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='rgba(65, 84, 98, 0.999)' 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-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='%23FFF' 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");
--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='%23FFF' 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");
--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='rgba(56, 142, 60, 0.999)' 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-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='rgba(198, 40, 40, 0.999)' 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");
} }
@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"]) {
--background: #10181e; color-scheme: dark;
--text: #a2afb9; --background-color: #11191f;
--h1: #edf0f3; --color: #bbc6ce;
--h2: #d5dce2; --h1-color: #edf0f3;
--h3: #bbc6ce; --h2-color: #e1e6ea;
--h4: #a2afb9; --h3-color: #d5dce2;
--h5: #8a99a3; --h4-color: #c8d1d8;
--h6: #73828c; --h5-color: #bbc6ce;
--primary: #1095c1; --h6-color: #aebbc3;
--primary-border: var(--primary); --muted-color: #73828c;
--primary-hover: #1ab3e6; --muted-border-color: #1f2d38;
--primary-hover-border: var(--primary-hover); --primary: #1095c1;
--primary-focus: rgba(16, 149, 193, 0.25); --primary-hover: #1ab3e6;
--primary-inverse: #FFF; --primary-focus: rgba(16, 149, 193, 0.25);
--secondary: #596b78; --primary-inverse: #FFF;
--secondary-border: var(--secondary); --secondary: #596b78;
--secondary-hover: #73828c; --secondary-hover: #73828c;
--secondary-hover-border: var(--secondary-hover); --secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-focus: rgba(89, 107, 120, 0.25); --secondary-inverse: #FFF;
--secondary-inverse: #FFF; --contrast: #edf0f3;
--contrast: #d5dce2; --contrast-hover: #FFF;
--contrast-border: var(--contrast); --contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-hover: #FFF; --contrast-inverse: #000;
--contrast-hover-border: var(--contrast-hover); --mark-background-color: #d0c284;
--contrast-focus: rgba(89, 107, 120, 0.25); --mark-color: #11191f;
--contrast-inverse: #10181e; --ins-color: #388E3C;
--input-background: #10181e; --del-color: #C62828;
--input-border: #374956; --blockquote-border-color: var(--muted-border-color);
--input-hover-background: var(--input-background); --blockquote-footer-color: var(--muted-color);
--input-hover-border: var(--primary); --form-element-background-color: #11191f;
--input-focus: var(--primary-focus); --form-element-border-color: #374956;
--input-inverse: var(--primary-inverse); --form-element-color: var(--color);
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --form-element-placeholder-color: var(--muted-color);
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --form-element-active-background-color: var(--form-element-background-color);
--valid: #1f7a5c; --form-element-active-border-color: var(--primary);
--invalid: #943838; --form-element-focus: var(--primary-focus);
--mark: rgba(255, 223, 128, 0.1875); --form-element-disabled-background-color: #2c3d49;
--mark-text: #FFF; --form-element-disabled-border-color: #415462;
--muted-text: #73828c; --form-element-invalid-border-color: #B71C1C;
--muted-background: #23333e; --form-element-invalid-active-border-color: #C62828;
--muted-border: #23333e; --form-element-valid-border-color: #2E7D32;
--card-background: #17232b; --form-element-valid-active-border-color: #388E3C;
--card-sections: #141d24; --switch-background-color: #374956;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); --switch-color: var(--primary-inverse);
--code-background: #141d24; --switch-checked-background-color: var(--primary);
--code-inlined: rgba(65, 84, 98, 0.25); --range-border-color: #23333e;
--code-color-1: #73828c; --range-active-border-color: #2c3d49;
--code-color-2: #a65980; --range-thumb-border-color: var(--background-color);
--code-color-3: #599fa6; --range-thumb-color: var(--secondary);
--code-color-4: #8c8473; --range-thumb-hover-color: var(--secondary-hover);
--code-color-5: #4d606d; --range-thumb-active-color: var(--primary);
--table-border: rgba(115, 130, 140, 0.075); --table-border-color: var(--muted-border-color);
--table-stripping: rgba(115, 130, 140, 0.05); --table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--code-background-color: #17232c;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #a65980;
--code-property-color: #599fa6;
--code-value-color: #8c8473;
--code-comment-color: #4d606d;
--accordion-border-color: var(--muted-border-color);
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e25;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--progress-color: var(--primary);
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--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='rgba(162, 175, 185, 0.999)' 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-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='rgba(162, 175, 185, 0.999)' 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='rgba(162, 175, 185, 0.999)' 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-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='rgba(162, 175, 185, 0.999)' 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-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='%23FFF' 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");
--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='%23FFF' 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");
--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='rgba(46, 125, 50, 0.999)' 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-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='rgba(183, 28, 28, 0.999)' 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");
} }
} }
[data-theme="dark"] { [data-theme="dark"] :root:not([data-theme="light"]) {
--background: #10181e; color-scheme: dark;
--text: #a2afb9; --background-color: #11191f;
--h1: #edf0f3; --color: #bbc6ce;
--h2: #d5dce2; --h1-color: #edf0f3;
--h3: #bbc6ce; --h2-color: #e1e6ea;
--h4: #a2afb9; --h3-color: #d5dce2;
--h5: #8a99a3; --h4-color: #c8d1d8;
--h6: #73828c; --h5-color: #bbc6ce;
--primary: #1095c1; --h6-color: #aebbc3;
--primary-border: var(--primary); --muted-color: #73828c;
--primary-hover: #1ab3e6; --muted-border-color: #1f2d38;
--primary-hover-border: var(--primary-hover); --primary: #1095c1;
--primary-focus: rgba(16, 149, 193, 0.25); --primary-hover: #1ab3e6;
--primary-inverse: #FFF; --primary-focus: rgba(16, 149, 193, 0.25);
--secondary: #596b78; --primary-inverse: #FFF;
--secondary-border: var(--secondary); --secondary: #596b78;
--secondary-hover: #73828c; --secondary-hover: #73828c;
--secondary-hover-border: var(--secondary-hover); --secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-focus: rgba(89, 107, 120, 0.25); --secondary-inverse: #FFF;
--secondary-inverse: #FFF; --contrast: #edf0f3;
--contrast: #d5dce2; --contrast-hover: #FFF;
--contrast-border: var(--contrast); --contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-hover: #FFF; --contrast-inverse: #000;
--contrast-hover-border: var(--contrast-hover); --mark-background-color: #d0c284;
--contrast-focus: rgba(89, 107, 120, 0.25); --mark-color: #11191f;
--contrast-inverse: #10181e; --ins-color: #388E3C;
--input-background: #10181e; --del-color: #C62828;
--input-border: #374956; --blockquote-border-color: var(--muted-border-color);
--input-hover-background: var(--input-background); --blockquote-footer-color: var(--muted-color);
--input-hover-border: var(--primary); --form-element-background-color: #11191f;
--input-focus: var(--primary-focus); --form-element-border-color: #374956;
--input-inverse: var(--primary-inverse); --form-element-color: var(--color);
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --form-element-placeholder-color: var(--muted-color);
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --form-element-active-background-color: var(--form-element-background-color);
--valid: #1f7a5c; --form-element-active-border-color: var(--primary);
--invalid: #943838; --form-element-focus: var(--primary-focus);
--mark: rgba(255, 223, 128, 0.1875); --form-element-disabled-background-color: #2c3d49;
--mark-text: #FFF; --form-element-disabled-border-color: #415462;
--muted-text: #73828c; --form-element-invalid-border-color: #B71C1C;
--muted-background: #23333e; --form-element-invalid-active-border-color: #C62828;
--muted-border: #23333e; --form-element-valid-border-color: #2E7D32;
--card-background: #17232b; --form-element-valid-active-border-color: #388E3C;
--card-sections: #141d24; --switch-background-color: #374956;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); --switch-color: var(--primary-inverse);
--code-background: #141d24; --switch-checked-background-color: var(--primary);
--code-inlined: rgba(65, 84, 98, 0.25); --range-border-color: #23333e;
--code-color-1: #73828c; --range-active-border-color: #2c3d49;
--code-color-2: #a65980; --range-thumb-border-color: var(--background-color);
--code-color-3: #599fa6; --range-thumb-color: var(--secondary);
--code-color-4: #8c8473; --range-thumb-hover-color: var(--secondary-hover);
--code-color-5: #4d606d; --range-thumb-active-color: var(--primary);
--table-border: rgba(115, 130, 140, 0.075); --table-border-color: var(--muted-border-color);
--table-stripping: rgba(115, 130, 140, 0.05); --table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--code-background-color: #17232c;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #a65980;
--code-property-color: #599fa6;
--code-value-color: #8c8473;
--code-comment-color: #4d606d;
--accordion-border-color: var(--muted-border-color);
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e25;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--progress-color: var(--primary);
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--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='rgba(162, 175, 185, 0.999)' 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-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='rgba(162, 175, 185, 0.999)' 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='rgba(162, 175, 185, 0.999)' 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-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='rgba(162, 175, 185, 0.999)' 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-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='%23FFF' 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");
--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='%23FFF' 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");
--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='rgba(46, 125, 50, 0.999)' 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-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='rgba(183, 28, 28, 0.999)' 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");
} }

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

160
docs/css/pico.docs.css
View file

@ -12,20 +12,29 @@
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
--nav-background: rgba(255, 255, 255, 0.7); --invalid-color: #C62828;
--nav-border: rgba(115, 130, 140, 0.2); --valid-color: #388E3C;
--nav-background-color: rgba(255, 255, 255, 0.7);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #FFF;
} }
@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"]) {
--nav-background: rgba(16, 24, 30, 0.8); --invalid-color: rgba(183, 28, 28, 0.5);
--nav-border: rgba(115, 130, 140, 0.2); --valid-color: rgba(46, 125, 50, 0.5);
--nav-background-color: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
} }
} }
[data-theme="dark"] { [data-theme="dark"] {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background: rgba(16, 24, 30, 0.8); --nav-background: rgba(16, 24, 30, 0.8);
--nav-border: rgba(115, 130, 140, 0.2); --nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
} }
/** /**
@ -39,72 +48,61 @@ html {
* Docs: Main (Grid) * Docs: Main (Grid)
*/ */
body > main { body > main {
padding-top: calc(1rem * var(--spacing-factor-xs) + 3.5rem); padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
}
@media (min-width: 576px) {
body > main {
padding-top: calc(1rem * var(--spacing-factor-sm) + 3.5rem);
}
}
@media (min-width: 768px) {
body > main {
padding-top: calc(1rem * var(--spacing-factor-md) + 3.5rem);
}
} }
@media (min-width: 992px) { @media (min-width: 992px) {
body > main { body > main {
grid-column-gap: calc(var(--spacing-gutter) * 4); --block-spacing-horizontal: calc(var(--spacing) * 1.75);
grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
display: grid; display: grid;
grid-template-columns: 200px auto; grid-template-columns: 200px auto;
padding-top: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
body > main { body > main {
padding-top: calc(1rem * var(--spacing-factor-xl) + 3.5rem); --block-spacing-horizontal: calc(var(--spacing) * 2);
} }
} }
body > main > * { body > main > aside,
body > main div[role="document"] {
min-width: 0; min-width: 0;
} }
div[role="document"] > section::before { div[role="document"] > section::before {
display: block; display: block;
height: calc(1rem * var(--spacing-factor-xs) + 3.5rem); height: calc(2rem + 3.5rem - .5rem);
margin-top: calc(-1rem * var(--spacing-factor-xs) - 3.5rem); margin-top: calc(-2rem - 3.5rem + .5rem);
content: ''; content: '';
} }
@media (min-width: 576px) { @media (min-width: 576px) {
div[role="document"] > section::before { div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-sm) + 3.5rem); height: calc(2.5rem + 3.5rem - .5rem);
margin-top: calc(-1rem * var(--spacing-factor-sm) - 3.5rem); height: calc(-2.5rem - 3.5rem + .5rem);
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
div[role="document"] > section::before { div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-md) + 3.5rem); height: calc(3rem + 3.5rem - .5rem);
margin-top: calc(-1rem * var(--spacing-factor-md) - 3.5rem); margin-top: calc(-3rem - 3.5rem + .5rem);
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
div[role="document"] > section::before { div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-lg) + 3.5rem); height: calc(3.5rem + 3.5rem - .5rem);
margin-top: calc(-1rem * var(--spacing-factor-lg) - 3.5rem); margin-top: calc(-3.5rem - 3.5rem + .5rem);
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
div[role="document"] > section::before { div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-xl) + 3.5rem); height: calc(4rem + 3.5rem - .5rem);
margin-top: calc(-1rem * var(--spacing-factor-xl) - 3.5rem); margin-top: calc(-4rem - 3.5rem + .5rem);
} }
} }
@ -119,11 +117,6 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
content: ''; content: '';
} }
form.grid > input:not([type=checkbox]):not([type=radio]),
form.grid > button {
margin-bottom: 0;
}
svg { svg {
height: 1rem; height: 1rem;
} }
@ -133,11 +126,11 @@ svg {
*/ */
main > aside nav { main > aside nav {
width: 100%; width: 100%;
margin-bottom: var(--spacing-block); margin-bottom: var(--block-spacing-vertical);
} }
main > aside nav h1 { main > aside nav h1 {
margin-bottom: var(--spacing-typography); margin-bottom: calc(var(--typography-spacing-vertical) / 2);
} }
@media (min-width: 992px) { @media (min-width: 992px) {
@ -184,7 +177,7 @@ main > aside details {
} }
main > aside details summary { main > aside details summary {
color: var(--h3); color: var(--h3-color);
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
text-transform: uppercase; text-transform: uppercase;
@ -195,7 +188,7 @@ main > aside details summary::after {
} }
main > aside details[open] summary { main > aside details[open] summary {
color: var(--h3); color: var(--h3-color);
} }
/** /**
@ -217,8 +210,8 @@ main > aside details[open] summary {
#customization figure { #customization figure {
grid-template-columns: repeat(18, 1fr); grid-template-columns: repeat(18, 1fr);
grid-template-rows: 1fr; grid-template-rows: 1fr;
border-top-right-radius: var(--block-round); border-top-right-radius: var(--border-radius);
border-top-left-radius: var(--block-round); border-top-left-radius: var(--border-radius);
} }
} }
@ -260,10 +253,14 @@ main > aside details[open] summary {
border-color: var(--primary); border-color: var(--primary);
} }
#grids {
--grid-spacing-vertical: 1rem;
}
#grids button { #grids button {
display: block; display: block;
width: 100%; width: 100%;
margin-bottom: calc(var(--spacing-typography) / 2); margin-bottom: var(--spacing);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -283,13 +280,15 @@ main > aside details[open] summary {
} }
#grids .grid > * { #grids .grid > * {
padding: calc(var(--spacing-gutter) / 2) 0; padding: calc(var(--spacing) / 2) 0;
background: var(--code-background); background: var(--secondary);
color: var(--secondary-inverse);
text-align: center; text-align: center;
opacity: .5;
} }
#grids details { #grids details {
margin-top: calc(var(--spacing-typography) * 2); margin-top: calc(var(--typography-spacing-vertical) * 2);
} }
#grids details svg { #grids details svg {
@ -304,12 +303,12 @@ main > aside details[open] summary {
* Docs: Typography * Docs: Typography
*/ */
section > hgroup { section > hgroup {
margin-bottom: calc(var(--spacing-typography) * 2); margin-bottom: calc(var(--typography-spacing-vertical) * 2);
} }
a[role=button] { a[role=button] {
margin-right: calc(var(--spacing-typography) / 4); margin-right: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: var(--spacing-typography); margin-bottom: var(--typography-spacing-vertical);
} }
[role=document] section > h1, [role=document] section > h1,
@ -321,28 +320,15 @@ a[role=button] {
/** /**
* Docs: Code * Docs: Code
*/ */
@media (min-width: 576px) { code {
pre { --font-weight: 400;
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
}
} }
@media (min-width: 768px) { section > pre {
pre { margin: var(--block-spacing-vertical) 0;
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md)); padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
} background-color: var(--card-sectionning-background-color);
} box-shadow: var(--card-box-shadow);
@media (min-width: 992px) {
pre {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@media (min-width: 1200px) {
pre {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
}
} }
[data-theme="invalid"], [data-theme="invalid"],
@ -367,8 +353,8 @@ a[role=button] {
@media (min-width: 992px) { @media (min-width: 992px) {
[data-theme="invalid"]:before, [data-theme="invalid"]:before,
[data-theme="valid"]:before { [data-theme="valid"]:before {
top: var(--spacing-gutter); top: var(--spacing);
right: var(--spacing-gutter); right: var(--spacing);
} }
} }
@ -378,12 +364,12 @@ a[role=button] {
} }
[data-theme="invalid"]:before { [data-theme="invalid"]:before {
background: var(--invalid); background: var(--invalid-color);
content: 'Not so great'; content: 'Not so great';
} }
[data-theme="valid"]:before { [data-theme="valid"]:before {
background: var(--valid); background: var(--valid-color);
content: 'Great'; content: 'Great';
} }
@ -398,8 +384,8 @@ body > nav {
right: 0; right: 0;
left: 0; left: 0;
backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
background-color: var(--nav-background); background-color: var(--nav-background-color);
box-shadow: 0px 1px 0 var(--nav-border); box-shadow: 0px 1px 0 var(--nav-border-color);
} }
body > nav a { body > nav a {
@ -413,10 +399,10 @@ body > nav svg {
body > nav ul:first-of-type li:first-of-type a { body > nav ul:first-of-type li:first-of-type a {
width: 3.5rem; width: 3.5rem;
height: 3.5rem; height: 3.5rem;
margin-left: calc(var(--spacing-gutter) * -1); margin-left: calc(var(--spacing) * -1);
padding: 0; padding: 0;
background: var(--h1); background: var(--h1-color);
color: var(--background); color: var(--nav-logo-color);
} }
body > nav ul:first-of-type li:first-of-type a svg { body > nav ul:first-of-type li:first-of-type a svg {
@ -425,8 +411,8 @@ body > nav ul:first-of-type li:first-of-type a svg {
body > nav ul:first-of-type li:nth-of-type(2) { body > nav ul:first-of-type li:nth-of-type(2) {
display: none; display: none;
margin-left: var(--spacing-gutter); margin-left: var(--spacing);
color: var(--h1); color: var(--h1-color);
} }
@media (min-width: 992px) { @media (min-width: 992px) {
@ -440,13 +426,13 @@ body > nav ul:first-of-type li:nth-of-type(2) {
*/ */
.switcher { .switcher {
position: fixed; position: fixed;
right: calc(var(--spacing-gutter) / 2); right: calc(var(--spacing) / 2);
bottom: var(--spacing-gutter); bottom: var(--spacing);
width: auto; width: auto;
margin-bottom: 0; margin-bottom: 0;
padding: .75rem; padding: .75rem;
border-radius: 2rem; border-radius: 2rem;
box-shadow: var(--card-shadow); box-shadow: var(--card-box-shadow);
line-height: 1; line-height: 1;
text-align: right; text-align: right;
} }
@ -484,16 +470,16 @@ body > nav ul:first-of-type li:nth-of-type(2) {
.switcher:hover i { .switcher:hover i {
max-width: 100%; max-width: 100%;
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4); padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
transition: max-width var(--transition), padding var(--transition); transition: max-width var(--transition), padding var(--transition);
} }
.switcher:focus { .switcher:focus {
box-shadow: var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus); box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.switcher { .switcher {
right: var(--spacing-gutter); right: var(--spacing);
} }
} }

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

File diff suppressed because one or more lines are too long

35
docs/css/themes/docs.css Normal file
View file

@ -0,0 +1,35 @@
/**
* Theme: Additions for docs
*/
:root {
--icon-external: 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='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: 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='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-check-dark: 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='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme="light"],
:root:not([data-theme="dark"]) {
--invalid-color: #C62828;
--valid-color: #388E3C;
--nav-background-color: rgba(255, 255, 255, 0.7);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #FFF;
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background-color: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
}
}
[data-theme="dark"] {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
}

188
docs/index.html
View file

@ -191,9 +191,61 @@
</label> </label>
</fieldset> </fieldset>
</form> </form>
<pre><code><em>// Simplified example</em>
<b>:root</b> {
<i>--primary</i>: <u class="c500">...</u>;
}
</code></pre>
</article> </article>
<p>There are 2 ways to customize your version of Pico.css:</p> <p>There are 2 ways to customize your version of Pico.css:</p>
<h4>Importing SASS</h4> <h4>Overriding CSS variables</h4>
<p>All Pico's styles and colors are set with <em>CSS custom properties</em> (variables). Just override the CSS variables to customize your version of Pico.</p>
<pre><code><em>/* <span class="name"></span>Light scheme (Default) */
/* Can be forced with data-theme="light" */</em>
<b>[data-theme=<u>"light"</u>]</b>,
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c700">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-light">...</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>;
}
<em>/* <span class="name"></span>Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */</em>
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
<b>:root:not([data-theme=<u>"light"</u>])</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c500">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>;
}
}
<em>/* <span class="name"></span>Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */</em>
<b>[data-theme=<u>"dark"</u>]</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c500">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>;
}
<em>/* <span class="name"></span>(Common styles) */</em>
<b>:root</b> {
<i>--form-element-active-border-color</i>: <u>var</u>(<i>--primary</i>);
<i>--form-element-focus:</i>: <u>var</u>(<i>--primary-focus</i>);
<i>--switch-color</i>: <u>var</u>(<i>--primary-inverse</i>);
<i>--switch-checked-background-color:</i>: <u>var</u>(<i>--primary</i>);
}
</code></pre>
<p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/themes/default.css</a></p>
<h4>Importing Pico SASS library</h4>
<p>It is recommended to customize Pico by importing SASS source files in your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p> <p>It is recommended to customize Pico by importing SASS source files in your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
<p>Compile the SASS file to CSS to get a custom version of Pico.</p> <p>Compile the SASS file to CSS to get a custom version of Pico.</p>
@ -221,50 +273,6 @@
</code></pre> </code></pre>
<p>This allows to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p> <p>This allows to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
<h4>Overriding CSS variables</h4>
<p>All Pico's styles and colors are set with <em>CSS custom properties</em> (variables). Just override the CSS variables to customize your version of Pico.</p>
<pre><code><em>/* <span class="name"></span>Light scheme (Default) */
/* Can be forced with data-theme="light" */</em>
<b>[data-theme=<u>"light"</u>]</b>,
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c700">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-light">...</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>;
}
<em>/* <span class="name"></span>Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */</em>
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
<b>:root:not([data-theme=<u>"light"</u>])</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c500">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>;
}
}
<em>/* <span class="name"></span>Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */</em>
<b>[data-theme=<u>"dark"</u>]</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c500">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>;
}
<em>/* <span class="name"></span>(Common styles) */</em>
<b>:root</b> {
<i>--primary-border</i>: <u>var</u>(<i>--primary</i>);
<i>--primary-hover-border</i>: <u>var</u>(<i>--primary-hover</i>);
<i>--input-hover-border</i>: <u>var</u>(<i>--primary</i>);
<i>--input-focus</i>: <u>var</u>(<i>--primary-focus</i>);
<i>--input-inverse</i>: <u>var</u>(<i>--primary-inverse</i>);
}
</code></pre>
<p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/default.css</a></p>
</section><!-- ./ Docs: Customization --> </section><!-- ./ Docs: Customization -->
@ -313,19 +321,19 @@
<tbody> <tbody>
<tr> <tr>
<th>Breakpoint</th> <th>Breakpoint</th>
<td>&lt;576<small>px</small></td> <td>&lt;576px</td>
<td>≥576<small>px</small></td> <td>≥576px</td>
<td>≥768<small>px</small></td> <td>≥768px</td>
<td>≥992<small>px</small></td> <td>≥992px</td>
<td>≥1200<small>px</small></td> <td>≥1200px</td>
</tr> </tr>
<tr> <tr>
<th>Viewport</th> <th>Viewport</th>
<td>None&nbsp;<small>(auto)</small></td> <td>None&nbsp;<small>(auto)</small></td>
<td>540<small>px</small></td> <td>540px</td>
<td>720<small>px</small></td> <td>720px</td>
<td>960<small>px</small></td> <td>960px</td>
<td>1140<small>px</small></td> <td>1140px</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -469,59 +477,59 @@
<tbody> <tbody>
<tr> <tr>
<th>Base&nbsp;font</th> <th>Base&nbsp;font</th>
<td>16<small>px</small></td> <td>16px</td>
<td>17<small>px</small></td> <td>17px</td>
<td>18<small>px</small></td> <td>18px</td>
<td>19<small>px</small></td> <td>19px</td>
<td>20<small>px</small></td> <td>20px</td>
</tr> </tr>
<tr> <tr>
<th>h1</th> <th>h1</th>
<td>32<small>px</small></td> <td>32px</td>
<td>34<small>px</small></td> <td>34px</td>
<td>36<small>px</small></td> <td>36px</td>
<td>38<small>px</small></td> <td>38px</td>
<td>40<small>px</small></td> <td>40px</td>
</tr> </tr>
<tr> <tr>
<th>h2</th> <th>h2</th>
<td>28<small>px</small></td> <td>28px</td>
<td>29<small>px</small></td> <td>29px</td>
<td>31.5<small>px</small></td> <td>31.5px</td>
<td>33.25<small>px</small></td> <td>33.25px</td>
<td>35<small>px</small></td> <td>35px</td>
</tr> </tr>
<tr> <tr>
<th>h3</th> <th>h3</th>
<td>24<small>px</small></td> <td>24px</td>
<td>25.5<small>px</small></td> <td>25.5px</td>
<td>27<small>px</small></td> <td>27px</td>
<td>28.5<small>px</small></td> <td>28.5px</td>
<td>30<small>px</small></td> <td>30px</td>
</tr> </tr>
<tr> <tr>
<th>h4</th> <th>h4</th>
<td>20<small>px</small></td> <td>20px</td>
<td>21.25<small>px</small></td> <td>21.25px</td>
<td>22.5<small>px</small></td> <td>22.5px</td>
<td>23.75<small>px</small></td> <td>23.75px</td>
<td>25<small>px</small></td> <td>25px</td>
</tr> </tr>
<tr> <tr>
<th>h5</th> <th>h5</th>
<td>18<small>px</small></td> <td>18px</td>
<td>19.125<small>px</small></td> <td>19.125px</td>
<td>20.25<small>px</small></td> <td>20.25px</td>
<td>21.375<small>px</small></td> <td>21.375px</td>
<td>22.5<small>px</small></td> <td>22.5px</td>
</tr> </tr>
<tr> <tr>
<th>h6</th> <th>h6</th>
<td>16<small>px</small></td> <td>16px</td>
<td>17<small>px</small></td> <td>17px</td>
<td>18<small>px</small></td> <td>18px</td>
<td>19<small>px</small></td> <td>19px</td>
<td>20<small>px</small></td> <td>20px</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -543,7 +551,7 @@
&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre> &lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre>
</article> </article>
<p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is styled.</p> <p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
<article aria-label="Hgroup example"> <article aria-label="Hgroup example">
<hgroup> <hgroup>
<h2>Heading 2</h2> <h2>Heading 2</h2>

2
docs/js/pico.docs.js
View file

@ -2,7 +2,7 @@
* Add some magic to Pico docs * Add some magic to Pico docs
* *
* Pico.css - https://picocss.com * Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
// @append src/aside.js // @append src/aside.js

2
docs/js/pico.docs.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
docs/js/src/aside.js
View file

@ -2,7 +2,7 @@
* Aside adjustment * Aside adjustment
* *
* Pico.css - https://picocss.com * Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
(function() { (function() {

30
docs/js/src/color-picker.js
View file

@ -2,7 +2,7 @@
* Color Picker * Color Picker
* *
* Pico.css - https://picocss.com * Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
(function() { (function() {
@ -291,19 +291,6 @@
"a700": "#dd2c00", "a700": "#dd2c00",
"inverse": "#FFF" "inverse": "#FFF"
}, },
/*"brown": {
"50": "#efebe9",
"100": "#d7ccc8",
"200": "#bcaaa4",
"300": "#a1887f",
"400": "#8d6e63",
"500": "#795548",
"600": "#6d4c41",
"700": "#5d4037",
"800": "#4e342e",
"900": "#3e2723",
"inverse": "#FFF"
},*/
"grey": { "grey": {
"50": "#fafafa", "50": "#fafafa",
"100": "#f5f5f5", "100": "#f5f5f5",
@ -458,7 +445,7 @@
// Update CSS Style // Update CSS Style
var generatedStyles = '[data-theme="generated"] {' var generatedStyles = '[data-theme="generated"] {'
+ '--h4:' + data[700] + ';' + '--h4-color:' + data[700] + ';'
+ '--primary:' + data[600] + ';' + '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[700] + ';' + '--primary-hover:' + data[700] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .125) + ';' + '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
@ -467,7 +454,7 @@
+ '@media only screen and (prefers-color-scheme: dark) {' + '@media only screen and (prefers-color-scheme: dark) {'
+ ':root:not([data-theme="light"]) [data-theme="generated"] {' + ':root:not([data-theme="light"]) [data-theme="generated"] {'
+ '--h4:' + data[400] + ';' + '--h4-color:' + data[400] + ';'
+ '--primary:' + data[600] + ';' + '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[500] + ';' + '--primary-hover:' + data[500] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';' + '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
@ -476,7 +463,7 @@
+ '}' + '}'
+ '[data-theme="dark"] [data-theme="generated"] {' + '[data-theme="dark"] [data-theme="generated"] {'
+ '--h4:' + data[500] + ';' + '--h4-color:' + data[500] + ';'
+ '--primary:' + data[600] + ';' + '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[500] + ';' + '--primary-hover:' + data[500] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';' + '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
@ -484,11 +471,10 @@
+ '}' + '}'
+ '[data-theme="generated"] {' + '[data-theme="generated"] {'
+ '--primary-border: var(--primary);' + '--form-element-active-border-color: var(--primary);'
+ '--primary-hover-border: var(--primary-hover);' + '--form-element-focus: var(--primary-focus);'
+ '--input-hover-border: var(--primary);' + '--switch-color: var(--primary-inverse);'
+ '--input-focus: var(--primary-focus);' + '--switch-checked-background-color: var(--primary);'
+ '--input-inverse: var(--primary-inverse);'
+ '}'; + '}';
// Insert CSS Styles // Insert CSS Styles

2
docs/js/src/grid.js
View file

@ -2,7 +2,7 @@
* Grid Interaction * Grid Interaction
* *
* Pico.css - https://picocss.com * Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
(function() { (function() {

2
docs/js/src/scrollspy.js
View file

@ -5,7 +5,7 @@
* Require `most-visible.js` from https://github.com/andyexeter/most-visible * Require `most-visible.js` from https://github.com/andyexeter/most-visible
* *
* Pico.css - https://picocss.com * Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
(function() { (function() {

2
docs/js/src/theme-switcher.js
View file

@ -2,7 +2,7 @@
* Theme Switcher * Theme Switcher
* *
* Pico.css - https://picocss.com * Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
(function() { (function() {

14
docs/scss/components/_nav.scss
View file

@ -10,8 +10,8 @@ body > nav {
right: 0; right: 0;
left: 0; left: 0;
backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
background-color: var(--nav-background); background-color: var(--nav-background-color);
box-shadow: 0px 1px 0 var(--nav-border); box-shadow: 0px 1px 0 var(--nav-border-color);
a { a {
border-radius: 0; border-radius: 0;
@ -29,10 +29,10 @@ body > nav {
a { a {
width: 3.5rem; width: 3.5rem;
height: 3.5rem; height: 3.5rem;
margin-left: calc(var(--spacing-gutter) * -1); margin-left: calc(var(--spacing) * -1);
padding: 0; padding: 0;
background: var(--h1); background: var(--h1-color);
color: var(--background); color: var(--nav-logo-color);
svg { svg {
height: 3.5rem; height: 3.5rem;
@ -43,8 +43,8 @@ body > nav {
// Title // Title
&:nth-of-type(2) { &:nth-of-type(2) {
display: none; display: none;
margin-left: var(--spacing-gutter); margin-left: var(--spacing);
color: var(--h1); color: var(--h1-color);
@media (min-width: map-get($breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
display: inline; display: inline;

13
docs/scss/components/_theme-switcher.scss
View file

@ -4,13 +4,13 @@
.switcher { .switcher {
position: fixed; position: fixed;
right: calc(var(--spacing-gutter) / 2); right: calc(var(--spacing) / 2);
bottom: var(--spacing-gutter); bottom: var(--spacing);
width: auto; width: auto;
margin-bottom: 0; margin-bottom: 0;
padding: .75rem; padding: .75rem;
border-radius: 2rem; border-radius: 2rem;
box-shadow: var(--card-shadow); box-shadow: var(--card-box-shadow);
line-height: 1; line-height: 1;
text-align: right; text-align: right;
@ -53,18 +53,17 @@
i { i {
max-width: 100%; max-width: 100%;
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4); padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
transition: max-width var(--transition), transition: max-width var(--transition),
padding var(--transition); padding var(--transition);
} }
} }
&:focus { &:focus {
box-shadow: var(--card-shadow), box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
0 0 0 0.2rem var(--secondary-focus);
} }
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
right: var(--spacing-gutter); right: var(--spacing);
} }
} }

50
docs/scss/content/_code.scss
View file

@ -2,40 +2,16 @@
* Docs: Code * Docs: Code
*/ */
// Custom spacings for <pre> (vertically aligned with <article> content) code {
pre { --font-weight: 400;
}
@if map-get($breakpoints, "sm") and // Custom spacings for <pre> (Horizontally aligned with <article> content)
$enable-responsive-spacings { section > pre {
margin: var(--block-spacing-vertical) 0;
@media (min-width: map-get($breakpoints, "sm")) { padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm)); background-color: var( --card-sectionning-background-color);
} box-shadow: var(--card-box-shadow);
}
@if map-get($breakpoints, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
}
}
} }
// Badge for Valid & Invalid code // Badge for Valid & Invalid code
@ -57,8 +33,8 @@ pre {
line-height: 1; line-height: 1;
@media (min-width: map-get($breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
top: var(--spacing-gutter); top: var(--spacing);
right: var(--spacing-gutter); right: var(--spacing);
} }
} }
@ -71,14 +47,14 @@ pre {
// Color for Valid & Invalid code // Color for Valid & Invalid code
[data-theme="invalid"] { [data-theme="invalid"] {
&:before { &:before {
background: var(--invalid); background: var(--invalid-color);
content: 'Not so great'; content: 'Not so great';
} }
} }
[data-theme="valid"] { [data-theme="valid"] {
&:before { &:before {
background: var(--valid); background: var(--valid-color);
content: 'Great'; content: 'Great';
} }
} }

6
docs/scss/content/_typography.scss
View file

@ -3,12 +3,12 @@
*/ */
section > hgroup { section > hgroup {
margin-bottom: calc(var(--spacing-typography) * 2); margin-bottom: calc(var(--typography-spacing-vertical) * 2);
} }
a[role=button] { a[role=button] {
margin-right: calc(var(--spacing-typography) / 4); margin-right: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: var(--spacing-typography); margin-bottom: var(--typography-spacing-vertical);
} }
[role=document] { [role=document] {

8
docs/scss/layout/_aside.scss
View file

@ -6,10 +6,10 @@ main > aside {
nav { nav {
width: 100%; width: 100%;
margin-bottom: var(--spacing-block); margin-bottom: var(--block-spacing-vertical);
h1 { h1 {
margin-bottom: var(--spacing-typography); margin-bottom: calc(var(--typography-spacing-vertical) / 2);
} }
@media (min-width: map-get($breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
@ -55,7 +55,7 @@ main > aside {
border-bottom: none; border-bottom: none;
summary { summary {
color: var(--h3); color: var(--h3-color);
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
text-transform: uppercase; text-transform: uppercase;
@ -66,7 +66,7 @@ main > aside {
} }
&[open] summary { &[open] summary {
color: var(--h3); color: var(--h3-color);
} }
} }
} }

30
docs/scss/layout/_documentation.scss
View file

@ -3,8 +3,6 @@
*/ */
// Docs: Themes // Docs: Themes
// ––––––––––––––––––––
#themes { #themes {
button i { button i {
font-style: normal; font-style: normal;
@ -12,8 +10,6 @@
} }
// Docs: Customization // Docs: Customization
// ––––––––––––––––––––
#customization { #customization {
figure { figure {
@ -26,8 +22,8 @@
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
grid-template-columns: repeat(18, 1fr); grid-template-columns: repeat(18, 1fr);
grid-template-rows: 1fr; grid-template-rows: 1fr;
border-top-right-radius: var(--block-round); border-top-right-radius: var(--border-radius);
border-top-left-radius: var(--block-round); border-top-left-radius: var(--border-radius);
} }
~ article { ~ article {
@ -75,14 +71,14 @@
// Docs: Grids // Docs: Grids
// ––––––––––––––––––––
#grids { #grids {
--grid-spacing-vertical: 1rem;
button { button {
display: block; display: block;
width: 100%; width: 100%;
margin-bottom: calc(var(--spacing-typography) / 2); margin-bottom: var(--spacing);
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
display: inline-block; display: inline-block;
@ -99,14 +95,18 @@
} }
} }
.grid > * { .grid {
padding: calc(var(--spacing-gutter) / 2) 0; > * {
background: var(--code-background); padding: calc(var(--spacing) / 2) 0;
text-align: center; background: var(--secondary);
color: var(--secondary-inverse);
text-align: center;
opacity: .5;
}
} }
details { details {
margin-top: calc(var(--spacing-typography) * 2); margin-top: calc(var(--typography-spacing-vertical) * 2);
svg { svg {
vertical-align: bottom; vertical-align: bottom;
@ -115,8 +115,6 @@
} }
// Docs: Forms // Docs: Forms
// ––––––––––––––––––––
#forms div.grid { #forms div.grid {
grid-row-gap: 0; grid-row-gap: 0;
} }

93
docs/scss/layout/_main.scss
View file

@ -2,71 +2,73 @@
* Docs: Main (Grid) * Docs: Main (Grid)
*/ */
// Config
$navHeight: 3.5rem; $navHeight: 3.5rem;
// Main grid
body > main { body > main {
padding-top: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
@media (min-width: map-get($breakpoints, "sm")) { padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
padding-top: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
display: grid;
grid-template-columns: 200px auto;
}
} }
@media (min-width: map-get($breakpoints, "md")) { @if map-get($breakpoints, "xl") {
padding-top: calc(1rem * var(--spacing-factor-md) + #{$navHeight}); @media (min-width: map-get($breakpoints, "xl")) {
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
} }
@media (min-width: map-get($breakpoints, "lg")) { > aside,
grid-column-gap: calc(var(--spacing-gutter) * 4); div[role="document"] {
display: grid; min-width: 0;
grid-template-columns: 200px auto;
padding-top: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
}
@media (min-width: map-get($breakpoints, "xl")) {
padding-top: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
}
> * {
min-width: 0; // HACK for childs in overflow
} }
} }
// Anchors hacks for internal links // Anchors hacks for internal links
// ––––––––––––––––––––
div[role="document"] > section::before { div[role="document"] > section::before {
display: block; display: block;
height: calc(1rem * var(--spacing-factor-xs) + #{$navHeight}); height: calc(2rem + #{$navHeight} - .5rem);
margin-top: calc(-1rem * var(--spacing-factor-xs) - #{$navHeight}); margin-top: calc(-2rem - #{$navHeight} + .5rem);
content: ''; content: '';
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
height: calc(1rem * var(--spacing-factor-sm) + #{$navHeight}); height: calc(2.5rem + #{$navHeight} - .5rem);
margin-top: calc(-1rem * var(--spacing-factor-sm) - #{$navHeight}); height: calc(-2.5rem - #{$navHeight} + .5rem);
}
} }
@media (min-width: map-get($breakpoints, "md")) { @if map-get($breakpoints, "md") {
height: calc(1rem * var(--spacing-factor-md) + #{$navHeight}); @media (min-width: map-get($breakpoints, "md")) {
margin-top: calc(-1rem * var(--spacing-factor-md) - #{$navHeight}); height: calc(3rem + #{$navHeight} - .5rem);
margin-top: calc(-3rem - #{$navHeight} + .5rem);
}
} }
@media (min-width: map-get($breakpoints, "lg")) { @if map-get($breakpoints, "lg") {
height: calc(1rem * var(--spacing-factor-lg) + #{$navHeight}); @media (min-width: map-get($breakpoints, "lg")) {
margin-top: calc(-1rem * var(--spacing-factor-lg) - #{$navHeight}); height: calc(3.5rem + #{$navHeight} - .5rem);
margin-top: calc(-3.5rem - #{$navHeight} + .5rem);
}
} }
@media (min-width: map-get($breakpoints, "xl")) { @if map-get($breakpoints, "xl") {
height: calc(1rem * var(--spacing-factor-xl) + #{$navHeight}); @media (min-width: map-get($breakpoints, "xl")) {
margin-top: calc(-1rem * var(--spacing-factor-xl) - #{$navHeight}); height: calc(4rem + #{$navHeight} - .5rem);
margin-top: calc(-4rem - #{$navHeight} + .5rem);
}
} }
} }
// External links // External links
// ––––––––––––––––––––
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after { div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
display: inline-block; display: inline-block;
width: 1rem; width: 1rem;
@ -78,20 +80,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
content: ''; content: '';
} }
// Form grid
// ––––––––––––––––––––
form.grid {
> input:not([type=checkbox]):not([type=radio]),
> button {
margin-bottom: 0;
}
}
// Embedded SVG // Embedded SVG
// ––––––––––––––––––––
svg { svg {
height: 1rem; height: 1rem;
} }

12
docs/scss/themes/docs/_dark.scss
View file

@ -2,8 +2,11 @@
// Automatically enabled if user has Dark mode enabled // Automatically enabled if user has Dark mode enabled
@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"]) {
--nav-background: #{rgba(darken($grey-900, 6%), .8)}; --invalid-color: #{rgba($red-900, .5)};
--nav-border: #{rgba($grey-500, .2)}; --valid-color: #{rgba($green-800, .5)};
--nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{mix($black, $grey-900)};
} }
} }
@ -12,6 +15,9 @@
// Dark theme (Forced) [Additions for docs] // Dark theme (Forced) [Additions for docs]
// Enabled if forced with data-theme="dark" // Enabled if forced with data-theme="dark"
[data-theme="dark"] { [data-theme="dark"] {
--invalid-color: #{rgba($red-900, .5)};
--valid-color: #{rgba($green-800, .5)};
--nav-background: #{rgba(darken($grey-900, 6%), .8)}; --nav-background: #{rgba(darken($grey-900, 6%), .8)};
--nav-border: #{rgba($grey-500, .2)}; --nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{mix($black, $grey-900)};
} }

1
docs/scss/themes/docs/_icons.scss
View file

@ -1,6 +1,5 @@
// Icons // Icons
// Source: https://feathericons.com/ // Source: https://feathericons.com/
:root { :root {
--icon-external: 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='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); --icon-external: 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='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: 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='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --icon-check: 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='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");

7
docs/scss/themes/docs/_light.scss
View file

@ -2,6 +2,9 @@
// Can be forced with data-theme="light" // Can be forced with data-theme="light"
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
--nav-background: #{rgba($white, .7)}; --invalid-color: #{$red-800};
--nav-border: #{rgba($grey-500, .2)}; --valid-color: #{$green-700};
--nav-background-color: #{rgba($white, .7)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{$white};
} }

11
scss/_variables.scss
View file

@ -7,7 +7,7 @@ $enable-semantic-container: false !default;
// Enable .container and .container-fluid // Enable .container and .container-fluid
$enable-class-container: true !default; $enable-class-container: true !default;
// Enable a centered viewport // Enable a centered viewport for <header>, <main>, <footer> inside <body>
// Fluid layout if disabled // Fluid layout if disabled
$enable-viewport: true !default; $enable-viewport: true !default;
@ -16,20 +16,17 @@ $enable-viewport: true !default;
$enable-responsive-spacings: true !default; $enable-responsive-spacings: true !default;
// Enable responsive typography // Enable responsive typography
// Fixed base font if disabled // Fixed root element size if disabled
$enable-responsive-typography: true !default; $enable-responsive-typography: true !default;
// Enable .classes // Enable .classes
// .classless version if disabled // .classless version if disabled
$enable-classes: true !default; $enable-classes: true !default;
// Enable validation states for <input> // Enable transitions
$enable-input-states: true !default;
// Enable transitions for <a>, <button>, <input>
$enable-transitions: true !default; $enable-transitions: true !default;
// Enable overriding with !important (used for <article>, `reduce-motion`, [type="search"]) // Enable overriding with !important
$enable-important: true !default; $enable-important: true !default;

21
scss/components/_accordion.scss
View file

@ -5,15 +5,20 @@
details { details {
display: block; display: block;
margin-bottom: var(--spacing-typography); margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing-typography) / 2); padding-bottom: calc(var(--spacing) / 2);
border-bottom: 1px solid var(--muted-border); border-bottom: var(--border-width) solid var(--accordion-border-color);
summary { summary {
color: var(--accordion-close-summary-color);
line-height: 1rem; line-height: 1rem;
list-style-type: none; list-style-type: none;
cursor: pointer; cursor: pointer;
@if $enable-transitions {
transition: color var(--transition);
}
// Reset marker // Reset marker
&::-webkit-details-marker { &::-webkit-details-marker {
display: none; display: none;
@ -44,11 +49,12 @@ details {
} }
&:focus { &:focus {
color: var(--accordion-active-summary-color);
outline: none; outline: none;
} }
~ * { ~ * {
margin-top: calc(var(--spacing-typography) / 2); margin-top: calc(var(--spacing) / 2);
~ * { ~ * {
margin-top: 0; margin-top: 0;
@ -60,8 +66,11 @@ details {
&[open] { &[open] {
> summary { > summary {
margin-bottom: calc(var(--spacing-typography) / 4); margin-bottom: calc(var(--spacing) / 4);
color: var(--muted-text);
&:not(:focus) {
color: var(--accordion-open-summary-color);
}
&::after { &::after {
transform: rotate(0); transform: rotate(0);

133
scss/components/_card-sectioning.scss
View file

@ -1,133 +0,0 @@
/**
* Card sectionning (<article> > header, footer, pre)
*/
article {
> header,
> footer {
background-color: var(--card-sections);
}
> header,
> footer,
> pre {
margin: calc(var(--spacing-gutter) * -1);
padding: var(--spacing-block) var(--spacing-gutter);
@if map-get($breakpoints, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
}
}
@if map-get($breakpoints, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
}
}
}
> header {
margin-top: calc(var(--spacing-gutter) * -2);
margin-bottom: var(--spacing-block);
@if map-get($breakpoints, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm));
}
}
@if map-get($breakpoints, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md));
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl));
}
}
}
> footer,
> pre {
margin-top: var(--spacing-block);
margin-bottom: calc(var(--spacing-gutter) * -2);
@if map-get($breakpoints, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm));
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
}
}
@if map-get($breakpoints, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-md));
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg));
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl));
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
}
}
}
}

67
scss/components/_card.scss
View file

@ -3,57 +3,32 @@
*/ */
article { article {
margin: var(--spacing-block) 0; margin: var(--block-spacing-vertical) 0;
padding: var(--spacing-block) var(--spacing-gutter); padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
overflow: hidden; overflow: hidden;
border-radius: var(--block-round); border-radius: var(--border-radius);
background: var(--card-background); background: var(--card-background-color);
box-shadow: var(--card-shadow); box-shadow: var(--card-box-shadow);
@if map-get($breakpoints, "sm") { > header,
@media (min-width: map-get($breakpoints, "sm")) { > footer,
@if $enable-responsive-spacings { > pre {
margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0; margin-right: calc(var(--block-spacing-horizontal) * -1);
padding: calc(var(--spacing-block) * var(--spacing-factor-sm)); margin-left: calc(var(--block-spacing-horizontal) * -1);
} padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
@else { background-color: var(--card-sectionning-background-color);
margin: var(--spacing-block) 0;
padding: var(--spacing-block);
}
}
} }
@if map-get($breakpoints, "md") and > header {
$enable-responsive-spacings { margin-top: calc(var(--block-spacing-vertical) * -1);
margin-bottom: var(--block-spacing-vertical);
@media (min-width: map-get($breakpoints, "md")) { border-bottom: var(--border-width) solid var(--card-border-color);
margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0;
padding: calc(var(--spacing-block) * var(--spacing-factor-md));
}
} }
@if map-get($breakpoints, "lg") and > footer,
$enable-responsive-spacings { > pre {
margin-top: var(--block-spacing-vertical);
@media (min-width: map-get($breakpoints, "lg")) { margin-bottom: calc(var(--block-spacing-vertical) * -1);
margin: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0; border-top: var(--border-width) solid var(--card-border-color);
padding: calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;
padding: calc(var(--spacing-block) * var(--spacing-factor-xl));
}
}
// Remove last-child margin bottom
@if $enable-important {
> *:not(header):not(footer):not(pre):last-child {
margin-bottom: 0 !important;
}
} }
} }

35
scss/components/_nav.scss
View file

@ -2,7 +2,7 @@
* Nav * Nav
*/ */
// Inline // Horizontal Nav
nav, nav,
nav ul { nav ul {
display: flex; display: flex;
@ -19,17 +19,17 @@ nav {
list-style: none; list-style: none;
&:first-of-type { &:first-of-type {
margin-left: calc(var(--spacing-gutter) * -0.5); margin-left: calc(var(--spacing) * -0.5);
} }
&:last-of-type { &:last-of-type {
margin-right: calc(var(--spacing-gutter) * -0.5); margin-right: calc(var(--spacing) * -0.5);
} }
} }
li { li {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); padding: var(--spacing) calc(var(--spacing) / 2);
// HACK: Input & Button inside Nav // HACK: Input & Button inside Nav
> *, > *,
@ -40,26 +40,15 @@ nav {
a { a {
display: block; display: block;
margin: calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5); margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); padding: var(--spacing) calc(var(--spacing) / 2);
border-radius: var(--block-round); border-radius: var(--border-radius);
text-decoration: none;
@if $enable-important {
text-decoration: none !important;
}
@else {
text-decoration: none;
}
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
@if $enable-important { text-decoration: none;
text-decoration: none !important;
}
@else {
text-decoration: none;
}
} }
} }
} }
@ -75,11 +64,11 @@ aside {
} }
li { li {
padding: calc(var(--spacing-gutter) / 2); padding: calc(var(--spacing) / 2);
a { a {
margin: calc(var(--spacing-gutter) * -0.5); margin: calc(var(--spacing) * -0.5);
padding: calc(var(--spacing-gutter) / 2); padding: calc(var(--spacing) / 2);
} }
} }
} }

17
scss/components/_progress.scss
View file

@ -18,6 +18,7 @@ progress {
// Pico // Pico
// –––––––––––––––––––– // ––––––––––––––––––––
progress { progress {
// Reset the default appearance // Reset the default appearance
@ -29,30 +30,30 @@ progress {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: .5rem; height: .5rem;
margin-bottom: calc(var(--spacing-typography) / 2); margin-bottom: calc(var(--spacing) / 2);
overflow: hidden; overflow: hidden;
// Remove Firefox and Opera border // Remove Firefox and Opera border
border: 0; border: 0;
border-radius: var(--block-round); border-radius: var(--border-radius);
background-color: var(--muted-background); background-color: var(--progress-background-color);
// IE10 uses `color` to set the bar background-color // IE10 uses `color` to set the bar background-color
color: var(--primary); color: var(--progress-color);
&::-webkit-progress-bar { &::-webkit-progress-bar {
border-radius: var(--block-round); border-radius: var(--border-radius);
background: transparent; background: transparent;
} }
&[value]::-webkit-progress-value { &[value]::-webkit-progress-value {
background-color: var(--primary); background-color: var(--progress-color);
} }
&::-moz-progress-bar { &::-moz-progress-bar {
background-color: var(--primary); background-color: var(--progress-color);
} }
&:indeterminate { &:indeterminate {
background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left / 150% 150% no-repeat; background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left / 150% 150% no-repeat;
animation: progress-indeterminate 1s linear infinite; animation: progress-indeterminate 1s linear infinite;
&[value]::-webkit-progress-value { &[value]::-webkit-progress-value {

11
scss/components/_tooltip.scss
View file

@ -21,12 +21,12 @@
padding: .25rem .5rem; padding: .25rem .5rem;
overflow: hidden; overflow: hidden;
transform: translate(-50%, -.25rem); transform: translate(-50%, -.25rem);
border-radius: var(--block-round); border-radius: var(--border-radius);
background: var(--contrast); background: var(--tooltip-background-color);
color: var(--contrast-inverse); color: var(--tooltip-color);
font-size: .85rem; font-size: .85rem;
font-style: normal; font-style: normal;
font-weight: var(--text-weight); font-weight: var(--font-weight);
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -44,9 +44,8 @@
border-left: .3rem solid transparent; border-left: .3rem solid transparent;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
color: var(--contrast); color: var(--tooltip-background-color);
content: ''; content: '';
} }
&:focus, &:focus,

2
scss/content/_accessibility.scss
View file

@ -3,7 +3,7 @@
*/ */
// Reboot based on : // Based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––

133
scss/content/_button-styles.scss
View file

@ -1,133 +0,0 @@
@if $enable-classes {
/**
* Button Styles
*/
// Button .secondary
button.secondary,
input[type="submit"].secondary,
input[type="reset"],
a[role="button"].secondary {
border: var(--button-border-width) solid var(--secondary-border);
background-color: var(--secondary);
color: var(--secondary-inverse);
&:hover,
&:active,
&:focus {
border-color: var(--secondary-hover-border);
background-color: var(--secondary-hover);
}
&:focus {
@if $enable-important {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
}
@else {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
}
}
}
// Button .contrast
button.contrast,
input[type="submit"].contrast,
input[type="reset"].contrast,
a[role="button"].contrast {
border: var(--button-border-width) solid var(--contrast-border);
background-color: var(--contrast);
color: var(--contrast-inverse);
&:hover,
&:active,
&:focus {
border-color: var(--contrast-hover-border);
background-color: var(--contrast-hover);
}
&:focus {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus);
}
}
// Button .outline
button.outline,
input[type="submit"].outline,
a[role="button"].outline {
border: var(--button-border-width) solid var(--primary-border);
background-color: transparent;
color: var(--primary);
&:hover,
&:active,
&:focus {
border: var(--button-border-width) solid var(--primary-hover-border);
color: var(--primary-hover);
}
}
// Button .outline.secondary
button.outline.secondary,
input[type="submit"].outline.secondary,
input[type="reset"].outline,
a[role="button"].outline.secondary {
border: var(--button-border-width) solid var(--secondary-border);
background-color: transparent;
color: var(--secondary);
&:hover,
&:active,
&:focus {
border: var(--button-border-width)solid var(--secondary-hover-border);
color: var(--secondary-hover);
}
}
// Button .outline.contrast
button.outline.contrast,
input[type="submit"].outline.contrast,
input[type="reset"].outline.contrast,
a[role="button"].outline.contrast {
border: var(--button-border-width) solid var(--contrast-border);
background-color: transparent;
color: var(--contrast);
&:hover,
&:active,
&:focus {
border: var(--button-border-width) solid var(--contrast-hover-border);
color: var(--contrast-hover);
}
}
}
@else {
// Button reset only for classless version
input[type="reset"] {
border: var(--button-border-width) solid var(--secondary-border);
background-color: var(--secondary);
color: var(--secondary-inverse);
&:hover,
&:active,
&:focus {
border-color: var(--secondary-hover-border);
background-color: var(--secondary-hover);
}
&:focus {
@if $enable-important {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
}
@else {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
}
}
}
}

130
scss/content/_button.scss
View file

@ -31,8 +31,8 @@ button::-moz-focus-inner,
[type="button"]::-moz-focus-inner, [type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { [type="submit"]::-moz-focus-inner {
padding: 0; padding: 0;
border-style: none; border-style: none;
} }
@ -42,7 +42,7 @@ button::-moz-focus-inner,
button { button {
display: block; display: block;
width: 100%; width: 100%;
margin-bottom: var(--spacing-typography); margin-bottom: var(--spacing);
} }
a[role="button"] { a[role="button"] {
@ -54,17 +54,20 @@ button,
input[type="submit"], input[type="submit"],
input[type="button"], input[type="button"],
input[type="reset"], input[type="reset"],
[type="file"]::-webkit-file-upload-button,
a[role="button"] { a[role="button"] {
padding: var(--button-spacing-vertical) var(--button-spacing-horizontal); --background-color: var(--primary);
border: var(--button-border-width) solid var(--primary-border); --border-color: var(--primary);
border-radius: var(--button-round); --color: var(--primary-inverse);
--box-shadow: none;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none; outline: none;
background-color: var(--primary); background-color: var(--background-color);
box-shadow: var(--button-shadow); box-shadow: var(--box-shadow);
color: var(--primary-inverse); color: var(--color);
font-size: 1rem; font-size: 1rem;
font-weight: var(--buttons-weight); font-weight: var(--font-weight);
line-height: var(--line-height); line-height: var(--line-height);
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -80,19 +83,114 @@ a[role="button"] {
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
border-color: var(--primary-hover-border); --background-color: var(--primary-hover);
background-color: var(--primary-hover); --border-color: var(--primary-hover);
box-shadow: var(--button-hover-shadow);
} }
&:focus { &:focus {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus); --box-shadow: 0 0 0 var(--outline-width) var(--primary-focus);
} }
} }
// Input [type="reset"] // Secondary button without .class
input[type="reset"] { input[type="reset"] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer; cursor: pointer;
&:hover,
&:active,
&:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
&:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
}
}
// .secondary, .contrast & .outline
@if $enable-classes {
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a[role="button"] {
// Secondary
&.secondary {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
&:hover,
&:active,
&:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
&:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
}
}
// Contrast
&.contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
&:hover,
&:active,
&:focus {
--background-color: var(--contrast-hover);
--border-color: var(--contrast-hover);
}
&:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--contrast-focus);
}
}
// Outline (primary)
&.outline {
--background-color: transparent;
--color: var(--primary);
&:hover,
&:active,
&:focus {
--background-color: transparent;
--color: var(--primary-hover);
}
}
// Outline (secondary)
&.outline.secondary {
--color: var(--secondary);
&:hover,
&:active,
&:focus {
--color: var(--secondary-hover);
}
}
// Outline (contrast)
&.outline.contrast {
--color: var(--contrast);
&:hover,
&:active,
&:focus {
--color: var(--contrast-hover);
}
}
}
} }
// Button [disabled] // Button [disabled]

60
scss/content/_code.scss
View file

@ -14,8 +14,8 @@ pre,
code, code,
kbd, kbd,
samp { samp {
font-family: var(--code-font); // 1 font-family: var(--font-family); // 1
font-size: 1rem; // 2 font-size: .875rem; // 2
} }
// Prevent overflow of the container in all browsers (opinionated) // Prevent overflow of the container in all browsers (opinionated)
@ -31,49 +31,25 @@ pre {
pre, pre,
code, code,
kbd { kbd {
background: var(--code-inlined); background: var(--code-background-color);
color: var(--code-color-1); color: var(--code-color);
font-size: 85%; font-weight: var(--font-weight);
font-weight: var(--code-weight);
line-height: initial; line-height: initial;
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "sm")) {
font-size: 83%;
}
}
@if map-get($breakpoints, "md") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "md")) {
font-size: 81%;
}
}
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "lg")) {
font-size: 79%;
}
}
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "xl")) {
font-size: 77%;
}
}
} }
code, code,
kbd { kbd {
display: inline-block; display: inline-block;
padding: .375rem .5rem; padding: .375rem .5rem;
border-radius: var(--block-round); border-radius: var(--border-radius);
} }
pre { pre {
display: block; display: block;
margin-bottom: var(--spacing-block); margin-bottom: var(--spacing);
padding: var(--spacing-block) var(--spacing-gutter); padding: var(--spacing);
overflow-x: auto; overflow-x: auto;
background: var(--code-background); background: var(--code-background-color);
> code { > code {
display: block; display: block;
@ -84,37 +60,37 @@ pre {
} }
} }
// Code Syntax highlighting // Code Syntax
code { code {
// Tags // Tags
b { b {
color: var(--code-color-2); color: var(--code-tag-color);
font-weight: var(--code-weight); font-weight: var(--font-weight);
} }
// Properties // Properties
i { i {
color: var(--code-color-3); color: var(--code-property-color);
font-style: normal; font-style: normal;
} }
// Values // Values
u { u {
color: var(--code-color-4); color: var(--code-value-color);
text-decoration: none; text-decoration: none;
} }
// Comments // Comments
em { em {
color: var(--code-color-5); color: var(--code-comment-color);
font-style: normal; font-style: normal;
} }
} }
// kbd // kbd
kbd { kbd {
background-color: var(--secondary); background-color: var(--code-kbd-background-color);
color: var(--secondary-inverse); color: var(--code-kbd-color);
font-weight: bolder; vertical-align: middle;
} }

115
scss/content/_form-alt-input-types.scss
View file

@ -10,6 +10,7 @@
&::-webkit-color-swatch-wrapper { &::-webkit-color-swatch-wrapper {
padding: 0; padding: 0;
} }
&::-moz-focus-inner { &::-moz-focus-inner {
padding: 0; padding: 0;
} }
@ -17,11 +18,12 @@
// Swatch // Swatch
&::-webkit-color-swatch { &::-webkit-color-swatch {
border: none; border: none;
border-radius: calc(var(--block-round)/2); border-radius: calc(var(--border-radius) / 2);
} }
&::-moz-color-swatch { &::-moz-color-swatch {
border: none; border: none;
border-radius: calc(var(--block-round)/2); border-radius: calc(var(--border-radius) / 2);
} }
} }
@ -48,17 +50,29 @@
// File // File
[type="file"] { [type="file"] {
--color: var(--muted-color);
padding: calc(var(--form-element-spacing-vertical)/2) 0; padding: calc(var(--form-element-spacing-vertical)/2) 0;
border: none; border: none;
border-radius: 0; border-radius: 0;
background: none; background: none;
&::-webkit-file-upload-button { &::-webkit-file-upload-button {
padding: calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2); --background-color: var(--secondary);
border: var(--button-border-width) solid var(--secondary-border); --border-color: var(--secondary);
background-color: var(--secondary); --color: var(--secondary-inverse);
box-shadow: var(--button-shadow); margin-right: calc(var(--spacing) / 2);
color: var(--secondary-inverse); padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-size: 1rem;
font-weight: var(--font-weight);
line-height: var(--line-height);
text-align: center;
cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
transition: transition:
@ -74,22 +88,17 @@
&:focus { &:focus {
border: none; border: none;
background: none; background: none;
--color: var(--color);
&::-webkit-file-upload-button { &::-webkit-file-upload-button {
border-color: var(--secondary-hover-border); --background-color: var(--secondary-hover);
background-color: var(--secondary-hover); --border-color: var(--secondary-hover);
}
}
&:focus {
&::-webkit-file-upload-button {
box-shadow: none;
} }
} }
} }
// Range // Range
[type="range"]{ [type="range"] {
// Config // Config
$height-track: .25rem; $height-track: .25rem;
$height-thumb: 1.25rem; $height-thumb: 1.25rem;
@ -108,8 +117,8 @@
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
width: 100%; width: 100%;
height: $height-track; height: $height-track;
border-radius: var(--block-round); border-radius: var(--border-radius);
background-color: var(--input-border); background-color: var(--range-border-color);
@if $enable-transitions { @if $enable-transitions {
transition: transition:
@ -121,8 +130,8 @@
&::-moz-range-track { &::-moz-range-track {
width: 100%; width: 100%;
height:$height-track; height:$height-track;
border-radius: var(--block-round); border-radius: var(--border-radius);
background-color: var(--input-border); background-color: var(--range-border-color);
@if $enable-transitions { @if $enable-transitions {
transition: transition:
@ -134,8 +143,8 @@
&::-ms-track { &::-ms-track {
width: 100%; width: 100%;
height: $height-track; height: $height-track;
border-radius: var(--block-round); border-radius: var(--border-radius);
background-color: var(--input-border); background-color: var(--range-border-color);
@if $enable-transitions { @if $enable-transitions {
transition: transition:
@ -145,7 +154,7 @@
} }
&::-ms-fill-lower { &::-ms-fill-lower {
background-color: var(--input-border); background-color: var(--border-radius);
} }
// Slider Thumb // Slider Thumb
@ -154,9 +163,9 @@
width: $height-thumb; width: $height-thumb;
height: $height-thumb; height: $height-thumb;
margin-top: #{(-($height-thumb/2) + ($height-track/2))}; margin-top: #{(-($height-thumb/2) + ($height-track/2))};
border: $border-thumb solid var(--input-background); border: $border-thumb solid var(--range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--text); background-color: var(--range-thumb-color);
cursor: pointer; cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
@ -171,9 +180,9 @@
width: $height-thumb; width: $height-thumb;
height: $height-thumb; height: $height-thumb;
margin-top: #{(-($height-thumb/2) + ($height-track/2))}; margin-top: #{(-($height-thumb/2) + ($height-track/2))};
border: $border-thumb solid var(--input-background); border: $border-thumb solid var(--range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--text); background-color: var(--range-thumb-color);
cursor: pointer; cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
@ -188,9 +197,9 @@
width: $height-thumb; width: $height-thumb;
height: $height-thumb; height: $height-thumb;
margin-top: #{(-($height-thumb/2) + ($height-track/2))}; margin-top: #{(-($height-thumb/2) + ($height-track/2))};
border: $border-thumb solid var(--input-background); border: $border-thumb solid var(--range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--text); background-color: var(--range-thumb-color);
cursor: pointer; cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
@ -200,62 +209,28 @@
} }
} }
&:hover,
&:focus { &:focus {
--range-border-color: var(--range-active-border-color);
@if $enable-important { --range-thumb-color: var(--range-thumb-hover-color);
background: transparent !important;
}
@else {
background: transparent;
}
// Slider Track
&::-webkit-slider-runnable-track {
box-shadow: 0 0 0 0.1rem var(--input-focus);
}
&::-moz-range-track {
box-shadow: 0 0 0 0.1rem var(--input-focus);
}
&::-ms-track {
box-shadow: 0 0 0 0.1rem var(--input-focus);
}
&::-ms-fill-lower {
box-shadow: 0 0 0 0.1rem var(--input-focus);
}
} }
&:active { &:active {
--range-thumb-color: var(--range-thumb-active-color);
@if $enable-important {
background: transparent !important;
}
@else {
background: transparent;
}
// Slider Thumb // Slider Thumb
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
transform: scale(1.25); transform: scale(1.25);
background-color: var(--primary);
} }
&::-moz-range-thumb { &::-moz-range-thumb {
transform: scale(1.25); transform: scale(1.25);
background-color: var(--primary);
} }
&::-ms-thumb { &::-ms-thumb {
transform: scale(1.25); transform: scale(1.25);
background-color: var(--primary);
} }
} }
&:focus {
box-shadow: none;
}
} }
// Search // Search
@ -263,15 +238,15 @@
border-radius: 5rem; border-radius: 5rem;
@if $enable-important { @if $enable-important {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search); background-image: var(--icon-search);
background-position: center left .75rem; background-position: center left 1.125rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
} }
// Cancel button // Cancel button
&::-webkit-search-cancel-button{ &::-webkit-search-cancel-button {
-webkit-appearance: none; -webkit-appearance: none;
display: none; display: none;
} }

59
scss/content/_form-checkbox-radio.scss
View file

@ -13,7 +13,7 @@
height: 1.25rem; height: 1.25rem;
margin-top: -.125rem; margin-top: -.125rem;
margin-right: .375rem; margin-right: .375rem;
border-width: var(--checkbox-radio-border-width); border-width: var(--border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -22,19 +22,16 @@
} }
&:checked, &:checked,
&:indeterminate { &:checked:active,
border-color: var(--input-hover-border); &:checked:focus {
background-color: var(--input-hover-border); --background-color: var(--primary);
--border-color: var(--primary);
background-image: var(--icon-checkbox); background-image: var(--icon-checkbox);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: .75rem auto; background-size: .75rem auto;
} }
&:indeterminate {
background-image: var(--icon-minus);
}
& ~ label { & ~ label {
display: inline-block; display: inline-block;
margin-right: .375rem; margin-right: .375rem;
@ -43,20 +40,36 @@
} }
} }
// Checkboxes
[type="checkbox"] {
&:indeterminate {
--background-color: var(--primary);
--border-color: var(--primary);
background-image: var(--icon-minus);
background-position: center;
background-repeat: no-repeat;
background-size: .75rem auto;
}
}
// Radios // Radios
[type="radio"] { [type="radio"] {
border-radius: 50%; border-radius: 50%;
&:checked { &:checked,
border-width: .33rem; &:checked:active,
border-color: var(--input-hover-border); &:checked:focus{
background-color: var(--input-inverse); --background-color: var(--primary-inverse);
border-width: .35rem;
background-image: none; background-image: none;
} }
} }
// Switchs // Switchs
[type="checkbox"][role="switch"] { [type="checkbox"][role="switch"] {
--background-color: var(--switch-background-color);
--border-color: var(--switch-background-color);
--color: var(--switch-color);
// Config // Config
$switch-height: 1.25rem; $switch-height: 1.25rem;
@ -66,17 +79,27 @@
// Styles // Styles
width: $switch-width; width: $switch-width;
height: $switch-height; height: $switch-height;
border: var(--switch-border-width) solid var(--input-border); border: var(--border-width) solid var(--border-color);
border-radius: $switch-height; border-radius: $switch-height;
background-color: var(--input-border); background-color: var(--background-color);
line-height: $switch-height; line-height: $switch-height;
&:focus {
--background-color: var(--switch-background-color);
--border-color: var(--switch-background-color);
}
&:checked {
--background-color: var(--switch-checked-background-color);
--border-color: var(--switch-checked-background-color);
}
&:before { &:before {
display: block; display: block;
width: calc(#{$switch-height} - (var(--switch-border-width)*2)); width: calc(#{$switch-height} - (var(--border-width) * 2));
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
background-color: var(--input-inverse); background-color: var(--color);
content: ''; content: '';
@if $enable-transitions { @if $enable-transitions {
@ -85,13 +108,11 @@
} }
&:checked { &:checked {
border-color: var(--input-hover-border);
background-color: var(--input-hover-border);
background-image: none; background-image: none;
&::before { &::before {
margin-right: 0; margin-right: 0;
margin-left: calc(#{$switch-width/2} - var(--switch-border-width)); margin-left: calc(#{$switch-width / 2} - var(--border-width));
} }
} }
} }

194
scss/content/_form.scss
View file

@ -89,9 +89,9 @@ textarea {
border-style: none; border-style: none;
} }
// Restore the focus outline styles unset by the previous rule in Firefox // Remove the focus outline in Firefox
:-moz-focusring { :-moz-focusring {
outline: 1px dotted ButtonText; outline: none;
} }
// Remove the additional :invalid styles in Firefox // Remove the additional :invalid styles in Firefox
@ -120,14 +120,14 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
height: calc( height: calc(
(1rem * var(--line-height)) + (1rem * var(--line-height)) +
(var(--form-element-spacing-vertical) * 2) + (var(--form-element-spacing-vertical) * 2) +
(var(--form-element-border-width) * 2) (var(--border-width) * 2)
); );
} }
// Fieldset // Fieldset
fieldset { fieldset {
margin: 0; margin: 0;
margin-bottom: var(--spacing-typography); margin-bottom: var(--spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -136,15 +136,14 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: var(--spacing-form-element); margin-bottom: calc(var(--spacing) / 4);
vertical-align: middle; vertical-align: middle;
} }
// Global layout // Blocks, 100%
input:not([type="checkbox"]):not([type="radio"]), input:not([type="checkbox"]):not([type="radio"]),
select, select,
textarea, textarea {
form small {
display: block; display: block;
width: 100%; width: 100%;
} }
@ -164,13 +163,17 @@ textarea {
input, input,
select, select,
textarea { textarea {
border: var(--form-element-border-width) solid var(--input-border); --background-color: var(--form-element-background-color);
border-radius: var(--block-round); --border-color: var(--form-element-border-color);
--color: var(--form-element-color);
--box-shadow: none;
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none; outline: none;
background-color: var(--input-background); background-color: var(--background-color);
color: var(--text); box-shadow: var(--box-shadow);
font-weight: var(--form-element-weight); color: var(--color);
font-weight: var(--font-weight);
@if $enable-transitions { @if $enable-transitions {
transition: transition:
@ -179,102 +182,106 @@ textarea {
color var(--transition), color var(--transition),
box-shadow var(--transition); box-shadow var(--transition);
} }
}
&::placeholder, // Active & Focus
&::-webkit-input-placeholder { input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
color: var(--muted-text); select,
opacity: 1; textarea {
}
&:active, &:active,
&:focus { &:focus {
border-color: var(--input-hover-border); --background-color: var(--form-element-active-background-color);
background-color: var(--input-hover-background); }
}
// Active & Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
select,
textarea {
&:active,
&:focus {
--border-color: var(--form-element-active-border-color);
}
}
// Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]),
select,
textarea {
&:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus);
}
}
// Disabled
input:not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
&[disabled] {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: .375;
}
}
// Aria-valid
input,
select,
textarea {
&[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
} }
&[readonly], &[aria-invalid="false"] {
&[disabled] { --border-color: var(--form-element-valid-border-color);
border-color: var(--muted-border); background-image: var(--icon-valid);
box-shadow: none;
& ~ label {
color: var(--muted-text);
}
&:active, &:active,
&:focus { &:focus {
@if $enable-important { @if $enable-important {
box-shadow: none !important; --border-color: var(--form-element-valid-active-border-color) !important;
} }
@else { @else {
box-shadow: none; --border-color: var(--form-element-valid-active-border-color);
} }
} }
} }
&[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) { &[aria-invalid="true"] {
background-color: var(--muted-background); --border-color: var(--form-element-invalid-border-color);
} background-image: var(--icon-invalid);
&[disabled] { &:active,
opacity: .66; &:focus {
} @if $enable-important {
--border-color: var(--form-element-invalid-active-border-color) !important;
// Validation states: with aria-invalid only }
@if $enable-classes { @else {
.valid, --border-color: var(--form-element-invalid-active-border-color);
.invalid, }
&[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
.valid,
&[aria-invalid="false"] {
background-image: var(--icon-valid);
}
.invalid,
&[aria-invalid="true"]{
background-image: var(--icon-invalid);
}
}
// Validation states: with aria-invalid and classes (.valid & .invalid)
@else {
&[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
&[aria-invalid="false"] {
background-image: var(--icon-valid);
}
&[aria-invalid="true"]{
background-image: var(--icon-invalid);
} }
} }
} }
// Margin bottom (Not Checkboxes andRadios) // Placeholder
input::placeholder,
input::-webkit-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder,
select:invalid {
color: var(--form-element-placeholder-color);
opacity: 1;
}
// Margin bottom (Not Checkboxes and Radios)
input:not([type="checkbox"]):not([type="radio"]), input:not([type="checkbox"]):not([type="radio"]),
select, select,
textarea { textarea {
margin-bottom: var(--spacing-typography); margin-bottom: var(--spacing);
}
// Focus styles (Not Range and File)
input:not([type="range"]):not([type="file"]),
select,
textarea {
&:focus {
box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
}
} }
// Select // Select
@ -296,16 +303,15 @@ select {
} }
// Helper // Helper
form small {
color: var(--muted-text);
}
input, input,
select, select,
textarea { textarea {
+ small { + small {
margin-top: calc(var(--spacing-typography) * -0.75); display: block;
margin-bottom: var(--spacing-typography); width: 100%;
margin-top: calc(var(--spacing) * -0.75);
margin-bottom: var(--spacing);
color: var(--muted-color);
} }
} }
@ -314,6 +320,6 @@ label {
& > input, & > input,
& > select, & > select,
& > textarea { & > textarea {
margin-top: var(--spacing-form-element); margin-top: calc(var(--spacing) / 4);
} }
} }

2
scss/content/_miscs.scss
View file

@ -15,7 +15,7 @@ hr {
height: 0; // 1 height: 0; // 1
overflow: visible; // 2 overflow: visible; // 2
border: none; border: none;
border-top: 1px solid var(--muted-border); border-top: 1px solid var(--muted-border-color);
} }
// Add the correct display in IE 10+ // Add the correct display in IE 10+

36
scss/content/_table.scss
View file

@ -26,32 +26,24 @@ table {
// Cells // Cells
th, th,
td { td {
padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter); padding: calc(var(--spacing) / 2) var(--spacing);
border-bottom: 1px solid var(--table-border); border-bottom: var(--border-width) solid var(--table-border-color);
color: var(--muted-text); color: var(--color);
font-size: 0.875rem; font-size: var(--font-size);
font-weight: var(--text-weight); font-weight: var(--font-weight);
text-align: left; text-align: left;
} }
// Titles // Rows
th, tr {
thead td { background-color: var(--background-color);
color: var(--text);
font-size: 1rem;
} }
// First row // Striped
thead { table {
th, &[role="grid"] {
td { tbody tr:nth-child(odd) {
border-bottom: 3px solid var(--table-border); --background-color: var(--table-row-stripped-background-color);
} }
}
// Striping
table[role="grid"] {
tbody tr:nth-child(odd) {
background-color: var(--table-stripping);
} }
} }

199
scss/content/_typography.scss
View file

@ -61,8 +61,8 @@ pre,
table, table,
ul { ul {
margin-top: 0; margin-top: 0;
margin-bottom: var(--spacing-typography); margin-bottom: var(--typography-spacing-vertical);
color: var(--text); color: var(--color);
font-size: 1rem; font-size: 1rem;
font-style: normal; font-style: normal;
} }
@ -70,9 +70,12 @@ ul {
// Links // Links
// 1. Remove the gray background on active links in IE 10 // 1. Remove the gray background on active links in IE 10
a { a {
background-color: transparent; // 1 --color: var(--primary);
color: var(--primary); --background-color: transparent;
text-decoration: none; outline: none;
background-color: var(--background-color); // 1
color: var(--color);
text-decoration: var(--text-decoration);
@if $enable-transitions { @if $enable-transitions {
transition: transition:
@ -85,54 +88,49 @@ a {
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: var(--primary-hover); --color: var(--primary-hover);
text-decoration: underline; --text-decoration: underline;
} }
&:focus { &:focus {
outline: none; --background-color: var(--primary-focus);
background-color: var(--primary-focus);
} }
}
// Link .secondary @if $enable-classes {
@if $enable-classes {
a.secondary {
color: var(--secondary);
text-decoration: underline;
&:hover, // Secondary
&:active, &.secondary {
&:focus { --color: var(--secondary);
color: var(--secondary-hover);
&:hover,
&:active,
&:focus {
--color: var(--secondary-hover);
}
&:focus {
--background-color: var(--secondary-focus);
}
} }
&:focus { // Contrast
background-color: var(--secondary-focus); &.contrast {
} --color: var(--contrast);
}
}
// Link .contrast &:hover,
@if $enable-classes { &:active,
a.contrast { &:focus {
color: var(--contrast); --color: var(--contrast-hover);
text-decoration: underline; }
&:hover, &:focus {
&:active, --background-color: var(--contrast-focus);
&:focus { }
color: var(--contrast-hover);
}
&:focus {
background-color: var(--contrast-focus);
} }
} }
} }
// Headings // Headings
// Because vertical margins can collapse, we avoid `margin-top`
h1, h1,
h2, h2,
h3, h3,
@ -140,44 +138,30 @@ h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-top: 0;
margin-bottom: var(--spacing-typography); margin-bottom: var(--typography-spacing-vertical);
font-family: var(--titles-font); color: var(--color);
font-weight: var(--titles-weight); font-family: var(--font-family);
font-size: var(--font-size);
font-weight: var(--font-weight);
} }
h1 { h1 {
margin-bottom: calc(var(--spacing-typography) * 2); --color: var(--h1-color);
color: var(--h1);
font-size: var(--h1-size);
} }
h2 { h2 {
margin-bottom: calc(var(--spacing-typography) * 1.75); --color: var(--h2-color);
color: var(--h2);
font-size: var(--h2-size);
} }
h3 { h3 {
margin-bottom: calc(var(--spacing-typography) * 1.5); --color: var(--h3-color);
color: var(--h3);
font-size: var(--h3-size);
} }
h4 { h4 {
margin-bottom: calc(var(--spacing-typography) * 1.25); --color: var(--h4-color);
color: var(--h4);
font-size: var(--h4-size);
} }
h5 { h5 {
margin-bottom: calc(var(--spacing-typography) * 1.125); --color: var(--h5-color);
color: var(--h5);
font-size: var(--h5-size);
} }
h6 { h6 {
color: var(--h6); --color: var(--h6-color);
font-size: var(--h6-size);
} }
// Margin-top for headings after a typography block // Margin-top for headings after a typography block
@ -191,88 +175,49 @@ p,
pre, pre,
table, table,
ul { ul {
& ~ h1 { & ~ h1,
margin-top: calc(var(--spacing-typography) * 2); & ~ h2,
} & ~ h3,
& ~ h4,
& ~ h2 { & ~ h5,
margin-top: calc(var(--spacing-typography) * 1.75);
}
& ~ h3 {
margin-top: calc(var(--spacing-typography) * 1.5);
}
& ~ h4 {
margin-top: calc(var(--spacing-typography) * 1.25);
}
& ~ h5 {
margin-top: calc(var(--spacing-typography) * 1.125);
}
& ~ h6 { & ~ h6 {
margin-top: calc(var(--spacing-typography)); margin-top: var(--typography-spacing-vertical);
} }
} }
// Heading group
// Multi-level heading
hgroup { hgroup {
margin-bottom: var(--spacing-typography); margin-bottom: var(--typography-spacing-vertical);
*{ > * {
margin-bottom: 0; margin-bottom: 0;
} }
> *:last-child { > *:last-child {
color: var(--muted-text); --color: var(--muted-color);
font-family: unset; font-family: unset;
font-size: 1.125rem; font-size: 1rem;
font-weight: unset; font-weight: unset;
} }
} }
// Paragraphs // Paragraphs
p { p {
margin-bottom: var(--spacing-typography); margin-bottom: var(--typography-spacing-vertical);
} }
// Small // Small
small { small {
font-size: 85%; font-size: var(--font-size);
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "sm")) {
font-size: 83%;
}
}
@if map-get($breakpoints, "md") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "md")) {
font-size: 81%;
}
}
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "lg")) {
font-size: 79%;
}
}
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "xl")) {
font-size: 77%;
}
}
} }
// Lists // Lists
ul, ul,
ol { ol {
padding-left: var(--spacing-typography); padding-left: var(--spacing);
li { li {
margin-bottom: calc(var(--spacing-typography) / 4); margin-bottom: calc(var(--typography-spacing-vertical) / 4);
} }
} }
@ -280,24 +225,24 @@ ul li {
list-style: square; list-style: square;
} }
// Marked text // Highlighted text
mark { mark {
padding: .125rem .25rem; padding: .125rem .25rem;
background: var(--mark); background-color: var(--mark-background-color);
color: var(--mark-text); color: var(--mark-color);
vertical-align: middle; vertical-align: middle;
} }
// Blockquote // Blockquote
blockquote { blockquote {
display: block; display: block;
margin: var(--spacing-typography) 0; margin: var(--typography-spacing-vertical) 0;
padding: var(--spacing-gutter); padding: var(--spacing);
border-left: .25rem solid var(--muted-border); border-left: .25rem solid var(--blockquote-border-color);
footer { footer {
margin-top: calc(var(--spacing-typography) / 2); margin-top: calc(var(--typography-spacing-vertical) / 2);
color: var(--muted-text); color: var(--blockquote-footer-color);
} }
} }
@ -311,13 +256,13 @@ abbr[title] {
// Ins // Ins
ins { ins {
color: var(--valid); color: var(--ins-color);
text-decoration: none; text-decoration: none;
} }
// del // del
del { del {
color: var(--invalid); color: var(--del-color);
} }
// selection // selection

12
scss/layout/_container.scss
View file

@ -9,13 +9,13 @@
width: 100%; width: 100%;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
padding-right: var(--spacing-gutter); padding-right: var(--spacing);
padding-left: var(--spacing-gutter); padding-left: var(--spacing);
} }
.container { .container {
@if map-get($breakpoints, "sm") and $enable-viewport { @if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm"); max-width: map-get($viewports, "sm");
padding-right: 0; padding-right: 0;
@ -23,19 +23,19 @@
} }
} }
@if map-get($breakpoints, "md") and $enable-viewport { @if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) { @media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md"); max-width: map-get($viewports, "md");
} }
} }
@if map-get($breakpoints, "lg") and $enable-viewport { @if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
max-width: map-get($viewports, "lg"); max-width: map-get($viewports, "lg");
} }
} }
@if map-get($breakpoints, "xl") and $enable-viewport { @if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) { @media (min-width: map-get($breakpoints, "xl")) {
max-width: map-get($viewports, "xl"); max-width: map-get($viewports, "xl");
} }

42
scss/layout/_document.scss
View file

@ -36,44 +36,12 @@ html {
-moz-tab-size: 4; // 5 -moz-tab-size: 4; // 5
-ms-text-size-adjust: 100%; // 6 -ms-text-size-adjust: 100%; // 6
-webkit-text-size-adjust: 100%; // 6 -webkit-text-size-adjust: 100%; // 6
background: var(--background); background-color: var(--background-color);
color: var(--text); color: var(--color);
font-family: var(--text-font); font-family: var(--font-family);
font-size: var(--base-font-xs); font-size: var(--font-size);
font-weight: var(--text-weight); font-weight: var(--font-weight);
line-height: var(--line-height); // 1 line-height: var(--line-height); // 1
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
cursor: default; // 4 cursor: default; // 4
@if map-get($breakpoints, "sm") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "sm")) {
font-size: var(--base-font-sm);
}
}
@if map-get($breakpoints, "md") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "md")) {
font-size: var(--base-font-md);
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "lg")) {
font-size: var(--base-font-lg);
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "xl")) {
font-size: var(--base-font-xl);
}
}
} }

4
scss/layout/_grid.scss
View file

@ -6,8 +6,8 @@
*/ */
.grid { .grid {
grid-column-gap: var(--spacing-gutter); grid-column-gap: var(--grid-spacing-horizontal);
grid-row-gap: var(--spacing-gutter); grid-row-gap: var(--grid-spacing-vertical);
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
margin: 0; margin: 0;

4
scss/layout/_scroller.scss
View file

@ -10,7 +10,7 @@ figure {
overflow-x: auto; overflow-x: auto;
figcaption { figcaption {
padding: calc(var(--spacing-gutter) / 2) 0; padding: calc(var(--spacing) / 2) 0;
color: var(--muted-text); color: var(--muted-color);
} }
} }

34
scss/layout/_section.scss
View file

@ -4,37 +4,5 @@
*/ */
section { section {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2); margin-bottom: var(--block-spacing-vertical);
@if map-get($breakpoints, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * 2);
}
}
@if map-get($breakpoints, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * 2);
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * 2);
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * 2);
}
}
} }

95
scss/layout/_sectioning.scss
View file

@ -25,87 +25,48 @@ body {
> header, > header,
> main, > main,
> footer { > footer {
$padding-horizontal: var(--spacing-gutter) !default;
$spacing-vertical: var(--spacing-block) !default;
width: 100%; width: 100%;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
// xs // Semantic container
@if $enable-semantic-container == false { @if $enable-semantic-container {
$padding-horizontal: 0; padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
}
padding: $spacing-vertical $padding-horizontal;
// sm // Centered viewport
@if map-get($breakpoints, "sm") @if $enable-viewport {
and ($enable-responsive-spacings or $enable-semantic-container) {
@media (min-width: map-get($breakpoints, "sm")) { @if map-get($breakpoints, "sm") and $enable-viewport {
@if $enable-viewport and $enable-semantic-container { @media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm"); max-width: map-get($viewports, "sm");
padding-right: 0;
padding-left: 0;
}
} }
@if $enable-responsive-spacings or $enable-viewport {
@if $enable-viewport or $enable-semantic-container == false { @if map-get($breakpoints, "md") and $enable-viewport {
$padding-horizontal: 0; @media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
} }
@else { }
$padding-horizontal: var(--spacing-gutter);
@if map-get($breakpoints, "lg") and $enable-viewport {
@media (min-width: map-get($breakpoints, "lg")) {
max-width: map-get($viewports, "lg");
} }
@if $enable-responsive-spacings { }
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-sm));
@if map-get($breakpoints, "xl") and $enable-viewport {
@media (min-width: map-get($breakpoints, "xl")) {
max-width: map-get($viewports, "xl");
} }
@else {
$spacing-vertical: var(--spacing-block);
}
padding: $spacing-vertical $padding-horizontal;
} }
} }
} }
// md // Semantic container
@if map-get($breakpoints, "md") @else {
and ($enable-responsive-spacings or $enable-semantic-container) { padding: var(--block-spacing-vertical) 0;
@media (min-width: map-get($breakpoints, "md")) {
@if $enable-viewport and $enable-semantic-container {
max-width: map-get($viewports, "md");
}
@if $enable-responsive-spacings {
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-md));
padding: $spacing-vertical $padding-horizontal;
}
}
}
// lg
@if map-get($breakpoints, "lg")
and ($enable-responsive-spacings or $enable-semantic-container) {
@media (min-width: map-get($breakpoints, "lg")) {
@if $enable-viewport and $enable-semantic-container {
max-width: map-get($viewports, "lg");
}
@if $enable-responsive-spacings {
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-lg));
padding: $spacing-vertical $padding-horizontal;
}
}
}
// xl
@if map-get($breakpoints, "xl")
and ($enable-responsive-spacings or $enable-semantic-container) {
@media (min-width: map-get($breakpoints, "xl")) {
@if $enable-viewport and $enable-semantic-container {
max-width: map-get($viewports, "xl");
}
@if $enable-responsive-spacings {
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-xl));
padding: $spacing-vertical $padding-horizontal;
}
}
} }
} }
} }

2
scss/pico.fluid.classless.scss
View file

@ -4,7 +4,7 @@
// Enable <header>, <main>, <footer> inside <body> as a container // Enable <header>, <main>, <footer> inside <body> as a container
$enable-semantic-container: true; $enable-semantic-container: true;
// Enable a centered viewport // Enable a centered viewport for <header>, <main>, <footer> inside <body>
$enable-viewport: false; $enable-viewport: false;
// Enable .classes // Enable .classes

4
scss/pico.scss
View file

@ -1,6 +1,6 @@
/*! /*!
* Pico.css v1.2.1 (https://picocss.com) * Pico.css v1.2.1 (https://picocss.com)
* Copyright 2020 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
// Config // Config
@ -21,7 +21,6 @@
@import "content/typography"; // a, headings, p, ul, blockquote, ... @import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video @import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit ... @import "content/button"; // button, a[role=button], type=button, type=submit ...
@import "content/button-styles"; // .secondary, .contrast, .outline
@import "content/form"; // input, select, textarea, label, fieldset, legend @import "content/form"; // input, select, textarea, label, fieldset, legend
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
@import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ... @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@ -33,7 +32,6 @@
// Components // Components
@import "components/accordion"; // details, summary @import "components/accordion"; // details, summary
@import "components/card"; // article @import "components/card"; // article
@import "components/card-sectioning"; // article > header, footer, pre
@import "components/nav"; // nav @import "components/nav"; // nav
@import "components/progress"; // progress @import "components/progress"; // progress
@import "components/tooltip"; // data-tooltip @import "components/tooltip"; // data-tooltip

13
scss/pico.slim.scss
View file

@ -1,6 +1,6 @@
/*! /*!
* Pico.css v1.2.1 (https://picocss.com) * Pico.css v1.2.1 (https://picocss.com)
* Copyright 2020 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
* *
* Slim version example * Slim version example
* You can export only the modules you need * You can export only the modules you need
@ -13,13 +13,10 @@
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article> // Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
$enable-responsive-spacings: false; $enable-responsive-spacings: false;
// Enable validation states for <input> // Enable transitions
$enable-input-states: false;
// Enable transitions for <a>, <button>, <input>, <details>
$enable-transitions: false; $enable-transitions: false;
// Enable overriding with !important (used for <article>, `reduce-motion`, [type="search"]) // Enable overriding with !important
$enable-important: false; $enable-important: false;
@ -36,7 +33,7 @@ $enable-important: false;
@import "layout/document"; // html @import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer @import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid @import "layout/container"; // .container, .container-fluid
// @import "layout/section"; // section @import "layout/section"; // section
@import "layout/grid"; // .grid @import "layout/grid"; // .grid
@import "layout/scroller"; // figure @import "layout/scroller"; // figure
@ -44,7 +41,6 @@ $enable-important: false;
@import "content/typography"; // a, headings, p, ul, blockquote, ... @import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video @import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit, ... @import "content/button"; // button, a[role=button], type=button, type=submit, ...
// @import "content/button-styles"; // .secondary, .contrast, .outline
@import "content/form"; // input, select, textarea, label, fieldset, legend @import "content/form"; // input, select, textarea, label, fieldset, legend
// @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch // @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
// @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ... // @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@ -56,7 +52,6 @@ $enable-important: false;
// Components // Components
// @import "components/accordion"; // details, summary // @import "components/accordion"; // details, summary
// @import "components/card"; // article // @import "components/card"; // article
// @import "components/card-sectioning"; // article > header, footer, pre
// @import "components/nav"; // nav // @import "components/nav"; // nav
// @import "components/progress"; // progress // @import "components/progress"; // progress
// @import "components/tooltip"; // data-tooltip // @import "components/tooltip"; // data-tooltip

21
scss/themes/default.scss
View file

@ -2,8 +2,25 @@
* Theme: default * Theme: default
*/ */
// Variables
@import "../variables";
@import "default/colors"; @import "default/colors";
// Commons styles
@import "default/styles"; @import "default/styles";
@import "default/icons";
// Light theme (Default)
// Can be forced with data-theme="light"
@import "default/light"; @import "default/light";
@import "default/dark";
// Dark theme (Auto)
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
@import "default/dark";
}
// Dark theme (Forced)
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
@import "default/dark";
}

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

@ -12,7 +12,7 @@ $grey-800: hsl($grey-hue, 25%, 23%) !default;
$grey-900: hsl($grey-hue, 30%, 15%) !default; $grey-900: hsl($grey-hue, 30%, 15%) !default;
// Light Blue // Light Blue
$primary-hue: 195; $primary-hue: 195 !default;
$primary-50: hsl($primary-hue, 90%, 94%) !default; $primary-50: hsl($primary-hue, 90%, 94%) !default;
$primary-100: hsl($primary-hue, 88%, 86%) !default; $primary-100: hsl($primary-hue, 88%, 86%) !default;
$primary-200: hsl($primary-hue, 86%, 77%) !default; $primary-200: hsl($primary-hue, 86%, 77%) !default;
@ -28,10 +28,38 @@ $primary-900: hsl($primary-hue, 100%, 15%) !default;
$black: #000 !default; $black: #000 !default;
$white: #FFF !default; $white: #FFF !default;
// Miscs // Amber
$amber-200: hsl(45, 100%, 75%) !default; $amber-50: #FFF8E1 !default;
$green-500: hsl(160, 50%, 40%) !default; $amber-100: #FFECB3 !default;
$green-600: hsl(160, 55%, 35%) !default; $amber-200: #FFE082 !default;
$green-700: hsl(160, 60%, 30%) !default; $amber-300: #FFD54F !default;
$red-700: hsl(0, 45%, 50%) !default; $amber-400: #FFCA28 !default;
$red-900: hsl(0, 45%, 40%) !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;

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

@ -1,164 +1,122 @@
// Dark theme (Auto) // Default: Dark theme
// Automatically enabled if user has Dark mode enabled :root:not([data-theme="light"]) {
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
// Document
--background: #{darken($grey-900, 6%)};
// Typography
--text: #{$grey-300};
--h1: #{$grey-50};
--h2: #{$grey-100};
--h3: #{$grey-200};
--h4: #{$grey-300};
--h5: #{$grey-400};
--h6: #{$grey-500};
// Primary Call-to-Action and links
--primary: #{$primary-600};
--primary-border: var(--primary);
--primary-hover: #{$primary-500};
--primary-hover-border: var(--primary-hover);
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
// Secondary Call-to-Action, links and kbd
--secondary: #{$grey-600};
--secondary-border: var(--secondary);
--secondary-hover: #{$grey-500};
--secondary-hover-border: var(--secondary-hover);
--secondary-focus: #{rgba($grey-600, .25)};
--secondary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips
--contrast: #{$grey-100};
--contrast-border: var(--contrast);
--contrast-hover: #{$white};
--contrast-hover-border: var(--contrast-hover);
--contrast-focus: #{rgba($grey-600, .25)};
--contrast-inverse: #{darken($grey-900, 6%)};
// Form elements
--input-background: #{darken($grey-900, 6%)};
--input-border: #{mix($grey-800, $grey-700)};
--input-hover-background: var(--input-background);
--input-hover-border: var(--primary);
--input-focus: var(--primary-focus);
--input-inverse: var(--primary-inverse);
// Button
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
--mark: #{rgba($amber-200, .1875)};
--mark-text: #{$white};
--muted-text: #{$grey-500};
--muted-background: #{mix($grey-800, $grey-900)};
--muted-border: #{mix($grey-800, $grey-900)};
// Card
--card-background: #{darken($grey-900, 2%)};
--card-sections: #{darken($grey-900, 4%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
// Code
--code-background: #{darken($grey-900, 4%)};
--code-inlined: #{rgba($grey-700, .25)};
--code-color-1: #{$grey-500};
--code-color-2: #{hsl(330, 30%, 50%)};
--code-color-3: #{hsl(185, 30%, 50%)};
--code-color-4: #{hsl(40, 10%, 50%)};
--code-color-5: #{mix($grey-600, $grey-700)};
// Table
--table-border: #{rgba($grey-500, .075)};
--table-stripping: #{rgba($grey-500, .05)};
}
}
// Dark theme (Forced)
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
// Document // Document
--background: #{darken($grey-900, 6%)}; color-scheme: dark;
--background-color: #{mix($black, $grey-900, 37.5%)};
// Typography // Texts colors
--text: #{$grey-300}; --color: #{$grey-200};
--h1: #{$grey-50}; --h1-color: #{$grey-50};
--h2: #{$grey-100}; --h2-color: #{mix($grey-50, $grey-100)};
--h3: #{$grey-200}; --h3-color: #{$grey-100};
--h4: #{$grey-300}; --h4-color: #{mix($grey-100, $grey-200)};
--h5: #{$grey-400}; --h5-color: #{$grey-200};
--h6: #{$grey-500}; --h6-color: #{mix($grey-200, $grey-300)};
// Primary Call-to-Action and links // Muted colors
--primary: #{$primary-600}; --muted-color: #{$grey-500};
--primary-border: var(--primary); --muted-border-color: #{mix($grey-900, $grey-800, 75%)};
--primary-hover: #{$primary-500};
--primary-hover-border: var(--primary-hover);
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
// Secondary Call-to-Action, links and kbd // Primary colors
--secondary: #{$grey-600}; --primary: #{$primary-600};
--secondary-border: var(--secondary); --primary-hover: #{$primary-500};
--secondary-hover: #{$grey-500}; --primary-focus: #{rgba($primary-600, .25)};
--secondary-hover-border: var(--secondary-hover); --primary-inverse: #{$white};
--secondary-focus: #{rgba($grey-600, .25)};
--secondary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips // Secondary colors
--contrast: #{$grey-100}; --secondary: #{$grey-600};
--contrast-border: var(--contrast); --secondary-hover: #{$grey-500};
--contrast-hover: #{$white}; --secondary-focus: #{rgba($grey-500, .25)};
--contrast-hover-border: var(--contrast-hover); --secondary-inverse: #{$white};
--contrast-focus: #{rgba($grey-600, .25)};
--contrast-inverse: #{darken($grey-900, 6%)}; // Contrast colors
--contrast: #{$grey-50};
--contrast-hover: #{$white};
--contrast-focus: #{rgba($grey-500, .25)};
--contrast-inverse: #{$black};
// Highlighted text (<mark>)
--mark-background-color: #{mix($grey-300, $amber-300)};
--mark-color: #{mix($black, $grey-900, 37.5%)};
// Inserted (<ins>) & Deleted (<ins>)
--ins-color: #{$green-700};
--del-color: #{$red-800};
// Blockquote
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
// Form elements // Form elements
--input-background: #{darken($grey-900, 6%)}; --form-element-background-color: #{mix($black, $grey-900, 37.5%)};
--input-border: #{mix($grey-800, $grey-700)}; --form-element-border-color: #{mix($grey-800, $grey-700)};
--input-hover-background: var(--input-background); --form-element-color: var(--color);
--input-hover-border: var(--primary); --form-element-placeholder-color: var(--muted-color);
--input-focus: var(--primary-focus); --form-element-active-background-color: var(--form-element-background-color);
--input-inverse: var(--primary-inverse); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus);
--form-element-disabled-background-color: #{$grey-800};
--form-element-disabled-border-color: #{$grey-700};
--form-element-invalid-border-color: #{$red-900};
--form-element-invalid-active-border-color: #{$red-800};
--form-element-valid-border-color: #{$green-800};
--form-element-valid-active-border-color: #{$green-700};
// Button // Switch (input[type="checkbox"][role="switch"])
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --switch-background-color: #{mix($grey-800, $grey-700)};
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
// Utilities states // Range (input[type="range"])
--valid: #{$green-700}; --range-border-color: #{mix($grey-900, $grey-800)};
--invalid: #{$red-900}; --range-active-border-color: #{$grey-800};
--mark: #{rgba($amber-200, .1875)}; --range-thumb-border-color: var(--background-color);
--mark-text: #{$white}; --range-thumb-color: var(--secondary);
--muted-text: #{$grey-500}; --range-thumb-hover-color: var(--secondary-hover);
--muted-background: #{mix($grey-800, $grey-900)}; --range-thumb-active-color: var(--primary);
--muted-border: #{mix($grey-800, $grey-900)};
// Card
--card-background: #{darken($grey-900, 2%)};
--card-sections: #{darken($grey-900, 4%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
// Code
--code-background: #{darken($grey-900, 4%)};
--code-inlined: #{rgba($grey-700, .25)};
--code-color-1: #{$grey-500};
--code-color-2: #{hsl(330, 30%, 50%)};
--code-color-3: #{hsl(185, 30%, 50%)};
--code-color-4: #{hsl(40, 10%, 50%)};
--code-color-5: #{mix($grey-600, $grey-700)};
// Table // Table
--table-border: #{rgba($grey-500, .075)}; --table-border-color: var(--muted-border-color);
--table-stripping: #{rgba($grey-500, .05)}; --table-row-stripped-background-color: #{rgba($grey-500, .05)};
// Code
--code-background-color: #{mix($black, $grey-900, 12.5%)};
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--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-600, $grey-700)};
// Accordion (<details>)
--accordion-border-color: var(--muted-border-color);
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
// Card (<article>)
--card-background-color: #{mix($black, $grey-900, 25%)};
--card-border-color: #{mix($black, $grey-900, 37.5%)};
--card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.036)};
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
// Progress
--progress-background-color: #{mix($grey-900, $grey-800)};
--progress-color: var(--primary);
// Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
// Icons
--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='#{rgba($grey-300, .999)}' 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-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='#{rgba($grey-300, .999)}' 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='#{rgba($grey-300, .999)}' 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-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='#{rgba($grey-300, .999)}' 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-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='%23FFF' 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");
--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='%23FFF' 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");
--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='#{rgba($green-800, .999)}' 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-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='#{rgba($red-900, .999)}' 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");
} }

13
scss/themes/default/_icons.scss
View file

@ -1,13 +0,0 @@
// Icons
// Source: https://feathericons.com/
:root {
--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='#{rgba($grey-500, .999)}' opacity='0.66' 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-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='#{rgba($grey-500, .999)}' opacity='0.66' 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='#{rgba($grey-500, .999)}' opacity='0.66' 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-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='#{rgba($grey-500, .999)}' opacity='0.66' 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-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='%23FFF' 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");
--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='%23FFF' 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");
--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='#{rgba($green-600, .999)}' 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-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='#{rgba($red-700, .999)}' 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");
}

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

@ -1,81 +1,122 @@
// Light theme (Default) // Default: Light theme
// Can be forced with data-theme="light"
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
// Document // Document
--background: #{$white}; color-scheme: light;
--background-color: #{$white};
// Typography // Texts colors
--text: #{$grey-700}; --color: #{$grey-700};
--h1: #{$grey-900}; --h1-color: #{$grey-900};
--h2: #{$grey-800}; --h2-color: #{mix($grey-900, $grey-800)};
--h3: #{$grey-700}; --h3-color: #{$grey-800};
--h4: #{$grey-600}; --h4-color: #{mix($grey-800, $grey-700)};
--h5: #{$grey-500}; --h5-color: #{$grey-700};
--h6: #{$grey-400}; --h6-color: #{mix($grey-700, $grey-600)};
// Primary Call-to-Action and links // Muted colors
--primary: #{$primary-600}; --muted-color: #{$grey-500};
--primary-border: var(--primary); --muted-border-color: #{$grey-50};
--primary-hover: #{$primary-700};
--primary-hover-border: var(--primary-hover);
--primary-focus: #{rgba($primary-600, .125)};
--primary-inverse: #{$white};
// Secondary Call-to-Action, links and kbd // Primary colors
--secondary: #{$grey-500}; --primary: #{$primary-600};
--secondary-border: var(--secondary); --primary-hover: #{$primary-700};
--secondary-hover: #{$grey-700}; --primary-focus: #{rgba($primary-600, .125)};
--secondary-hover-border: var(--secondary-hover); --primary-inverse: #{$white};
--secondary-focus: #{rgba($grey-500, .125)};
--secondary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips // Secondary colors
--contrast: #{$grey-800}; --secondary: #{$grey-600};
--contrast-border: var(--contrast); --secondary-hover: #{$grey-700};
--contrast-hover: #{mix($grey-900, $black)}; --secondary-focus: #{rgba($grey-600, .125)};
--contrast-hover-border: var(--contrast-hover); --secondary-inverse: #{$white};
--contrast-focus: #{rgba($grey-500, .125)};
--contrast-inverse: #{$white}; // Contrast colors
--contrast: #{$grey-900};
--contrast-hover: #{$black};
--contrast-focus: #{rgba($grey-600, .125)};
--contrast-inverse: #{$white};
// Highlighted text (<mark>)
--mark-background-color: #{mix($amber-50, $amber-100)};
--mark-color: #{mix($grey-900, $amber-900, 75%)};
// Inserted (<ins>) & Deleted (<ins>)
--ins-color: #{$green-700};
--del-color: #{$red-800};
// Blockquote
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
// Form elements // Form elements
--input-background: #{$white}; --form-element-background-color: transparent;
--input-border: #{mix($grey-100, $grey-200)}; --form-element-border-color: #{$grey-300};
--input-hover-background: var(--input-background); --form-element-color: var(--color);
--input-hover-border: var(--primary); --form-element-placeholder-color: var(--muted-color);
--input-focus: var(--primary-focus); --form-element-active-background-color: transparent;
--input-inverse: var(--primary-inverse); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus);
--form-element-disabled-background-color: #{$grey-100};
--form-element-disabled-border-color: #{$grey-300};
--form-element-invalid-border-color: #{$red-800};
--form-element-invalid-active-border-color: #{$red-900};
--form-element-valid-border-color: #{$green-700};
--form-element-valid-active-border-color: #{$green-800};
// Button // Switch (input[type="checkbox"][role="switch"])
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --switch-background-color: #{$grey-200};
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
// Utilities states // Range (input[type="range"])
--valid: #{$green-600}; --range-border-color: #{$grey-100};
--invalid: #{$red-700}; --range-active-border-color: #{$grey-200};
--mark: #{rgba($amber-200, .33)}; --range-thumb-border-color: var(--background-color);
--mark-text: #{$grey-800}; --range-thumb-color: var(--secondary);
--muted-text: #{mix($grey-400, $grey-500)}; --range-thumb-hover-color: var(--secondary-hover);
--muted-background: #{$grey-50}; --range-thumb-active-color: var(--primary);
--muted-border: #{$grey-50};
// Card
--card-background: #{$white};
--card-sections: #{lighten($grey-50, 2%)};
--card-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
// Code
--code-background: #{lighten($grey-50, 2%)};
--code-inlined: #{$grey-50};
--code-color-1: #{$grey-500};
--code-color-2: #{hsl(330, 40%, 50%)};
--code-color-3: #{hsl(185, 40%, 40%)};
--code-color-4: #{hsl(40, 20%, 50%)};
--code-color-5: #{mix($grey-300, $grey-400)};
// Table // Table
--table-border: #{rgba($grey-50, .75)}; --table-border-color: var(--muted-border-color);
--table-stripping: #{rgba($grey-500, .075)}; --table-row-stripped-background-color:#{mix($white, $grey-50)};
// Code
--code-background-color: #{$grey-50};
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--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};
// Accordion (<details>)
--accordion-border-color: var(--muted-border-color);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
// Card (<article>)
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
--card-sectionning-background-color: #{mix($white, $grey-50, 75%)};
// Progress
--progress-background-color: #{$grey-100};
--progress-color: var(--primary);
// Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
// Icons
--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='#{rgba($grey-700, .999)}' 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-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='#{rgba($grey-700, .999)}' 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='#{rgba($grey-700, .999)}' 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-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='#{rgba($grey-700, .999)}' 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-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='%23FFF' 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");
--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='%23FFF' 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");
--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='#{rgba($green-700, .999)}' 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-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='#{rgba($red-800, .999)}' 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");
} }

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

@ -1,93 +1,214 @@
// Commons Styles // Commons Styles
:root { :root {
// Typography // Typography
// –––––––––––––––––––– --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5;
--font-weight: 400;
--font-size: 16px;
// Fonts family // Responsive typography
// Source: github.com/csstools/sanitize.css/blob/master/typography.css @if $enable-responsive-typography {
--text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--titles-font: var(--text-font);
--code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
// Typography styles @if map-get($breakpoints, "sm") {
--line-height: 1.5; @media (min-width: map-get($breakpoints, "sm")) {
--text-weight: 400; --font-size: 17px;
--titles-weight: 700; }
--form-element-weight: var(--text-weight); }
--buttons-weight: var(--text-weight);
--code-weight: var(--text-weight);
// Base font sizes @if map-get($breakpoints, "md") {
// All the others sizes are relative to this font base sizes (rem) @media (min-width: map-get($breakpoints, "md")) {
--base-font-xs: 16px; --font-size: 18px;
--base-font-sm: 17px; }
--base-font-md: 18px; }
--base-font-lg: 19px;
--base-font-xl: 20px;
// Font sizes @if map-get($breakpoints, "lg") {
// All the others sizes are relative to this sizes @media (min-width: map-get($breakpoints, "lg")) {
--h1-size: 2rem; --font-size: 19px;
--h2-size: 1.75rem; }
--h3-size: 1.5rem; }
--h4-size: 1.25rem;
--h5-size: 1.125rem;
--h6-size: 1rem;
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--font-size: 20px;
}
}
}
// Styles // Borders
// –––––––––––––––––––– --border-radius: .25rem;
--border-width: 1px;
// Blocks styles: <form> elements, <article>, inlined <code>, [data-tooltip] --outline-width: 3px;
--block-round: .25rem;
// Form elements
--form-element-border-width: 1px;
--form-element-outline-width: 3px;
--checkbox-radio-border-width: 2px;
--switch-border-width: 3px;
--form-element-spacing-vertical: .75rem;
--form-element-spacing-horizontal: 1rem;
// Buttons
--button-round: var(--block-round);
--button-border-width: var(--form-element-border-width);
--button-outline-width: var(--form-element-outline-width);
--button-spacing-vertical: var(--form-element-spacing-vertical);
--button-spacing-horizontal: var(--form-element-spacing-horizontal);
// Spacings // Spacings
// –––––––––––––––––––– --spacing: 1rem;
// Gutters and horizontals margins // Spacings for typography elements
// For <body>, ,container, .grid, <nav>, <table>, <article>, <pre> --typography-spacing-vertical: 1.5rem;
--spacing-gutter: 1rem;
// Vertical spacing for blocks // Spacings for body > header, body > main, body > footer, section, article
// For <header>, <main>, <footer>, <section>, <article> --block-spacing-vertical: calc(var(--spacing) * 2);
--spacing-block: 2rem; --block-spacing-horizontal: var(--spacing);
// Multiplication factor for --spacing-block // Spacings .grid
// '1' disable spacing factor on a breakpoint --grid-spacing-vertical: 0;
--spacing-factor-xs: 1; --grid-spacing-horizontal: var(--spacing);
--spacing-factor-sm: 1.25;
--spacing-factor-md: 1.5;
--spacing-factor-lg: 1.75;
--spacing-factor-xl: 2;
// Vertical margins for typography elements
--spacing-typography: 1.5rem;
// Spacing between <form> elements
--spacing-form-element: .25rem;
// Spacings for form elements and button
--form-element-spacing-vertical: .75rem;
--form-element-spacing-horizontal: 1rem;
// Transitions // Transitions
// –––––––––––––––––––– --transition: .2s ease-in-out;
}
// Transitions: <a>, <form> elements and <button>
--transition: .2s ease-in-out; // Responsives spacings
@if $enable-responsive-spacings {
// Sectionning
body > header,
body > main,
body > footer,
section {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
--block-spacing-vertical: calc(var(--spacing) * 3);
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--block-spacing-vertical: calc(var(--spacing) * 3.5);
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--block-spacing-vertical: calc(var(--spacing) * 4);
}
}
}
// Card (<article>)
article {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
}
}
// Link
a {
--text-decoration: none;
// Secondary & Contrast
&.secondary,
&.contrast {
--text-decoration: underline;
}
}
// Small
small {
--font-size: 0.875rem;
}
// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
--font-weight: 700;
}
h1 {
--font-size: 2rem;
--typography-spacing-vertical: 3rem;
}
h2 {
--font-size: 1.75rem;
--typography-spacing-vertical: 2.625rem;
}
h3 {
--font-size: 1.5rem;
--typography-spacing-vertical: 2.25rem;
}
h4 {
--font-size: 1.25rem;
--typography-spacing-vertical: 1.874rem;
}
h5 {
--font-size: 1.125rem;
--typography-spacing-vertical: 1.6875rem;
}
// Forms elements
[type="checkbox"],
[type="radio"] {
--border-width: 2px;
}
[type="checkbox"][role="switch"] {
--border-width: 3px;
}
// Table
table {
thead {
th,
td {
--border-width: 3px;
}
}
:not(thead) td {
--font-size: 0.875rem;
}
}
// Code
pre,
code,
kbd,
samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
kbd {
--font-weight: bolder;
} }