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

Build CSS

Browse source
This commit is contained in:
github-actions[bot] 2024-12-31 05:18:39 +00:00
parent ddf41a191a
commit 951aae3801
77 changed files with 7702 additions and 7702 deletions
Download patch file Download diff file Expand all files Collapse all files

42
css/pico.classless.css
View file

@ -199,18 +199,18 @@ input:not([type=submit],
color-scheme: light; color-scheme: light;
--pico-background-color: #fff; --pico-background-color: #fff;
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(71, 164, 23, 0.25); --pico-text-selection-color: rgba(167, 128, 212, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: rgb(231, 234, 239.5); --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #33790f; --pico-primary: #8352c5;
--pico-primary-background: #398712; --pico-primary-background: #7540bf;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(51, 121, 15, 0.5); --pico-primary-underline: rgba(131, 82, 197, 0.5);
--pico-primary-hover: #265e09; --pico-primary-hover: #6935b3;
--pico-primary-hover-background: #33790f; --pico-primary-hover-background: #6935b3;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(71, 164, 23, 0.5); --pico-primary-focus: rgba(167, 128, 212, 0.5);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: #5d6b89; --pico-secondary: #5d6b89;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;
@ -339,18 +339,18 @@ input:not([type=submit],
color-scheme: dark; color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5); --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(78, 179, 27, 0.1875); --pico-text-selection-color: rgba(178, 144, 217, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
--pico-muted-border-color: #202632; --pico-muted-border-color: #202632;
--pico-primary: #4eb31b; --pico-primary: #b290d9;
--pico-primary-background: #398712; --pico-primary-background: #7540bf;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(78, 179, 27, 0.5); --pico-primary-underline: rgba(178, 144, 217, 0.5);
--pico-primary-hover: #5dd121; --pico-primary-hover: #c9afe4;
--pico-primary-hover-background: #409614; --pico-primary-hover-background: #8352c5;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(78, 179, 27, 0.375); --pico-primary-focus: rgba(178, 144, 217, 0.375);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: #969eaf; --pico-secondary: #969eaf;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;
@ -469,18 +469,18 @@ input:not([type=submit],
color-scheme: dark; color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5); --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(78, 179, 27, 0.1875); --pico-text-selection-color: rgba(178, 144, 217, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
--pico-muted-border-color: #202632; --pico-muted-border-color: #202632;
--pico-primary: #4eb31b; --pico-primary: #b290d9;
--pico-primary-background: #398712; --pico-primary-background: #7540bf;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(78, 179, 27, 0.5); --pico-primary-underline: rgba(178, 144, 217, 0.5);
--pico-primary-hover: #5dd121; --pico-primary-hover: #c9afe4;
--pico-primary-hover-background: #409614; --pico-primary-hover-background: #8352c5;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(78, 179, 27, 0.375); --pico-primary-focus: rgba(178, 144, 217, 0.375);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: #969eaf; --pico-secondary: #969eaf;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;

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

File diff suppressed because one or more lines are too long

66
css/pico.conditional.css
View file

@ -232,19 +232,19 @@ nav details.dropdown summary:focus-visible {
color-scheme: light; color-scheme: light;
--pico-background-color: #fff; --pico-background-color: #fff;
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(210, 122, 1, 0.25); --pico-text-selection-color: rgba(0, 166, 110, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: rgb(231, 234, 239.5); --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #9c5900; --pico-primary: #007a50;
--pico-primary-background: #ff9500; --pico-primary-background: #007a50;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(156, 89, 0, 0.5); --pico-primary-underline: rgba(0, 122, 80, 0.5);
--pico-primary-hover: #7a4400; --pico-primary-hover: #005f3d;
--pico-primary-hover-background: #e48500; --pico-primary-hover-background: #006d46;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(210, 122, 1, 0.5); --pico-primary-focus: rgba(0, 166, 110, 0.5);
--pico-primary-inverse: #000; --pico-primary-inverse: #fff;
--pico-secondary: #5d6b89; --pico-secondary: #5d6b89;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;
--pico-secondary-border: var(--pico-secondary-background); --pico-secondary-border: var(--pico-secondary-background);
@ -308,7 +308,7 @@ nav details.dropdown summary:focus-visible {
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
--pico-switch-color: #fff; --pico-switch-color: #fff;
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25); --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-range-border-color: #dfe3eb; --pico-range-border-color: #dfe3eb;
--pico-range-active-border-color: #bfc7d9; --pico-range-active-border-color: #bfc7d9;
--pico-range-thumb-border-color: var(--pico-background-color); --pico-range-thumb-border-color: var(--pico-background-color);
@ -343,7 +343,7 @@ nav details.dropdown summary:focus-visible {
[data-theme=light] .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after, [data-theme=light] .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after,
:root:not([data-theme=dark]) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after, :root:not([data-theme=dark]) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after,
:host(:not([data-theme=dark])) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after { :host(:not([data-theme=dark])) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after {
filter: brightness(100) invert(1); filter: brightness(100) invert(0);
} }
[data-theme=light] .pico details summary.secondary[role=button]::after, [data-theme=light] .pico details summary.secondary[role=button]::after,
:root:not([data-theme=dark]) .pico details summary.secondary[role=button]::after, :root:not([data-theme=dark]) .pico details summary.secondary[role=button]::after,
@ -358,7 +358,7 @@ nav details.dropdown summary:focus-visible {
[data-theme=light] .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before, [data-theme=light] .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
:root:not([data-theme=dark]) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before, :root:not([data-theme=dark]) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
:host(:not([data-theme=dark])) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before { :host(:not([data-theme=dark])) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
filter: brightness(0) invert(1); filter: brightness(100) invert(0);
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -387,19 +387,19 @@ nav details.dropdown summary:focus-visible {
color-scheme: dark; color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5); --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(228, 133, 0, 0.1875); --pico-text-selection-color: rgba(0, 180, 120, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
--pico-muted-border-color: #202632; --pico-muted-border-color: #202632;
--pico-primary: #e48500; --pico-primary: #00b478;
--pico-primary-background: #ff9500; --pico-primary-background: #007a50;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(228, 133, 0, 0.5); --pico-primary-underline: rgba(0, 180, 120, 0.5);
--pico-primary-hover: #ffa23a; --pico-primary-hover: #00cc88;
--pico-primary-hover-background: #ffa23a; --pico-primary-hover-background: #00895a;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(228, 133, 0, 0.375); --pico-primary-focus: rgba(0, 180, 120, 0.375);
--pico-primary-inverse: #000; --pico-primary-inverse: #fff;
--pico-secondary: #969eaf; --pico-secondary: #969eaf;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;
--pico-secondary-border: var(--pico-secondary-background); --pico-secondary-border: var(--pico-secondary-background);
@ -463,7 +463,7 @@ nav details.dropdown summary:focus-visible {
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
--pico-switch-color: #fff; --pico-switch-color: #fff;
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25); --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-range-border-color: #202632; --pico-range-border-color: #202632;
--pico-range-active-border-color: #2a3140; --pico-range-active-border-color: #2a3140;
--pico-range-thumb-border-color: var(--pico-background-color); --pico-range-thumb-border-color: var(--pico-background-color);
@ -523,7 +523,7 @@ nav details.dropdown summary:focus-visible {
} }
:root:not([data-theme]) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after, :root:not([data-theme]) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after,
:host(:not([data-theme])) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after { :host(:not([data-theme])) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after {
filter: brightness(100) invert(1); filter: brightness(100) invert(0);
} }
:root:not([data-theme]) .pico details summary.secondary[role=button]::after, :root:not([data-theme]) .pico details summary.secondary[role=button]::after,
:host(:not([data-theme])) .pico details summary.secondary[role=button]::after { :host(:not([data-theme])) .pico details summary.secondary[role=button]::after {
@ -535,26 +535,26 @@ nav details.dropdown summary:focus-visible {
} }
:root:not([data-theme]) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before, :root:not([data-theme]) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
:host(:not([data-theme])) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before { :host(:not([data-theme])) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
filter: brightness(100) invert(0); filter: brightness(100) invert(1);
} }
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5); --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(228, 133, 0, 0.1875); --pico-text-selection-color: rgba(0, 180, 120, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
--pico-muted-border-color: #202632; --pico-muted-border-color: #202632;
--pico-primary: #e48500; --pico-primary: #00b478;
--pico-primary-background: #ff9500; --pico-primary-background: #007a50;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(228, 133, 0, 0.5); --pico-primary-underline: rgba(0, 180, 120, 0.5);
--pico-primary-hover: #ffa23a; --pico-primary-hover: #00cc88;
--pico-primary-hover-background: #ffa23a; --pico-primary-hover-background: #00895a;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(228, 133, 0, 0.375); --pico-primary-focus: rgba(0, 180, 120, 0.375);
--pico-primary-inverse: #000; --pico-primary-inverse: #fff;
--pico-secondary: #969eaf; --pico-secondary: #969eaf;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;
--pico-secondary-border: var(--pico-secondary-background); --pico-secondary-border: var(--pico-secondary-background);
@ -618,7 +618,7 @@ nav details.dropdown summary:focus-visible {
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
--pico-switch-color: #fff; --pico-switch-color: #fff;
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25); --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-range-border-color: #202632; --pico-range-border-color: #202632;
--pico-range-active-border-color: #2a3140; --pico-range-active-border-color: #2a3140;
--pico-range-thumb-border-color: var(--pico-background-color); --pico-range-thumb-border-color: var(--pico-background-color);
@ -666,7 +666,7 @@ nav details.dropdown summary:focus-visible {
--pico-form-element-focus-color: var(--pico-primary-focus); --pico-form-element-focus-color: var(--pico-primary-focus);
} }
[data-theme=dark] .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after { [data-theme=dark] .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after {
filter: brightness(100) invert(1); filter: brightness(100) invert(0);
} }
[data-theme=dark] .pico details summary.secondary[role=button]::after { [data-theme=dark] .pico details summary.secondary[role=button]::after {
filter: brightness(100) invert(0); filter: brightness(100) invert(0);
@ -675,7 +675,7 @@ nav details.dropdown summary:focus-visible {
filter: brightness(100) invert(1); filter: brightness(100) invert(1);
} }
[data-theme=dark] .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before { [data-theme=dark] .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
filter: brightness(100) invert(0); filter: brightness(100) invert(1);
} }
.pico progress, .pico progress,

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

File diff suppressed because one or more lines are too long

42
css/pico.css
View file

@ -232,18 +232,18 @@ nav details.dropdown summary:focus-visible {
color-scheme: light; color-scheme: light;
--pico-background-color: #fff; --pico-background-color: #fff;
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(205, 104, 224, 0.25); --pico-text-selection-color: rgba(71, 164, 23, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: rgb(231, 234, 239.5); --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #aa40bf; --pico-primary: #33790f;
--pico-primary-background: #9236a4; --pico-primary-background: #398712;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(170, 64, 191, 0.5); --pico-primary-underline: rgba(51, 121, 15, 0.5);
--pico-primary-hover: #802e90; --pico-primary-hover: #265e09;
--pico-primary-hover-background: #802e90; --pico-primary-hover-background: #33790f;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(205, 104, 224, 0.5); --pico-primary-focus: rgba(71, 164, 23, 0.5);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: #5d6b89; --pico-secondary: #5d6b89;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;
@ -387,18 +387,18 @@ nav details.dropdown summary:focus-visible {
color-scheme: dark; color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5); --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(212, 125, 228, 0.1875); --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
--pico-muted-border-color: #202632; --pico-muted-border-color: #202632;
--pico-primary: #d47de4; --pico-primary: #4eb31b;
--pico-primary-background: #9236a4; --pico-primary-background: #398712;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(212, 125, 228, 0.5); --pico-primary-underline: rgba(78, 179, 27, 0.5);
--pico-primary-hover: #e2a3eb; --pico-primary-hover: #5dd121;
--pico-primary-hover-background: #aa40bf; --pico-primary-hover-background: #409614;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(212, 125, 228, 0.375); --pico-primary-focus: rgba(78, 179, 27, 0.375);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: #969eaf; --pico-secondary: #969eaf;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;
@ -542,18 +542,18 @@ nav details.dropdown summary:focus-visible {
color-scheme: dark; color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5); --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(212, 125, 228, 0.1875); --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
--pico-muted-border-color: #202632; --pico-muted-border-color: #202632;
--pico-primary: #d47de4; --pico-primary: #4eb31b;
--pico-primary-background: #9236a4; --pico-primary-background: #398712;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(212, 125, 228, 0.5); --pico-primary-underline: rgba(78, 179, 27, 0.5);
--pico-primary-hover: #e2a3eb; --pico-primary-hover: #5dd121;
--pico-primary-hover-background: #aa40bf; --pico-primary-hover-background: #409614;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(212, 125, 228, 0.375); --pico-primary-focus: rgba(78, 179, 27, 0.375);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: #969eaf; --pico-secondary: #969eaf;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;

42
css/pico.fluid.classless.conditional.css
View file

@ -199,18 +199,18 @@ input:not([type=submit],
color-scheme: light; color-scheme: light;
--pico-background-color: #fff; --pico-background-color: #fff;
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(119, 156, 0, 0.25); --pico-text-selection-color: rgba(158, 146, 0, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: rgb(231, 234, 239.5); --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #577400; --pico-primary: #756b00;
--pico-primary-background: #a5d601; --pico-primary-background: #f2df0d;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(87, 116, 0, 0.5); --pico-primary-underline: rgba(117, 107, 0, 0.5);
--pico-primary-hover: #435a00; --pico-primary-hover: #5b5300;
--pico-primary-hover-background: #99c801; --pico-primary-hover-background: #e8d600;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(119, 156, 0, 0.5); --pico-primary-focus: rgba(158, 146, 0, 0.5);
--pico-primary-inverse: #000; --pico-primary-inverse: #000;
--pico-secondary: #5d6b89; --pico-secondary: #5d6b89;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;
@ -339,18 +339,18 @@ input:not([type=submit],
color-scheme: dark; color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5); --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(130, 171, 0, 0.1875); --pico-text-selection-color: rgba(173, 159, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
--pico-muted-border-color: #202632; --pico-muted-border-color: #202632;
--pico-primary: #82ab00; --pico-primary: #ad9f00;
--pico-primary-background: #a5d601; --pico-primary-background: #f2df0d;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(130, 171, 0, 0.5); --pico-primary-underline: rgba(173, 159, 0, 0.5);
--pico-primary-hover: #99c801; --pico-primary-hover: #caba01;
--pico-primary-hover-background: #b2e51a; --pico-primary-hover-background: rgb(247.5, 232, 96.5);
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(130, 171, 0, 0.375); --pico-primary-focus: rgba(173, 159, 0, 0.375);
--pico-primary-inverse: #000; --pico-primary-inverse: #000;
--pico-secondary: #969eaf; --pico-secondary: #969eaf;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;
@ -469,18 +469,18 @@ input:not([type=submit],
color-scheme: dark; color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5); --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(130, 171, 0, 0.1875); --pico-text-selection-color: rgba(173, 159, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
--pico-muted-border-color: #202632; --pico-muted-border-color: #202632;
--pico-primary: #82ab00; --pico-primary: #ad9f00;
--pico-primary-background: #a5d601; --pico-primary-background: #f2df0d;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(130, 171, 0, 0.5); --pico-primary-underline: rgba(173, 159, 0, 0.5);
--pico-primary-hover: #99c801; --pico-primary-hover: #caba01;
--pico-primary-hover-background: #b2e51a; --pico-primary-hover-background: rgb(247.5, 232, 96.5);
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(130, 171, 0, 0.375); --pico-primary-focus: rgba(173, 159, 0, 0.375);
--pico-primary-inverse: #000; --pico-primary-inverse: #000;
--pico-secondary: #969eaf; --pico-secondary: #969eaf;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;

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

File diff suppressed because one or more lines are too long

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

@ -199,18 +199,18 @@ input:not([type=submit],
color-scheme: light; color-scheme: light;
--pico-background-color: #fff; --pico-background-color: #fff;
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(0, 166, 110, 0.25); --pico-text-selection-color: rgba(246, 84, 126, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: rgb(231, 234, 239.5); --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #007a50; --pico-primary: #c72259;
--pico-primary-background: #007a50; --pico-primary-background: #d92662;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(0, 122, 80, 0.5); --pico-primary-underline: rgba(199, 34, 89, 0.5);
--pico-primary-hover: #005f3d; --pico-primary-hover: #9d1945;
--pico-primary-hover-background: #006d46; --pico-primary-hover-background: #c72259;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(0, 166, 110, 0.5); --pico-primary-focus: rgba(246, 84, 126, 0.5);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: #5d6b89; --pico-secondary: #5d6b89;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;
@ -339,18 +339,18 @@ input:not([type=submit],
color-scheme: dark; color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5); --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(0, 180, 120, 0.1875); --pico-text-selection-color: rgba(247, 112, 142, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
--pico-muted-border-color: #202632; --pico-muted-border-color: #202632;
--pico-primary: #00b478; --pico-primary: #f7708e;
--pico-primary-background: #007a50; --pico-primary-background: #d92662;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(0, 180, 120, 0.5); --pico-primary-underline: rgba(247, 112, 142, 0.5);
--pico-primary-hover: #00cc88; --pico-primary-hover: #f99eae;
--pico-primary-hover-background: #00895a; --pico-primary-hover-background: #f42c6f;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(0, 180, 120, 0.375); --pico-primary-focus: rgba(247, 112, 142, 0.375);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: #969eaf; --pico-secondary: #969eaf;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;
@ -469,18 +469,18 @@ input:not([type=submit],
color-scheme: dark; color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5); --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(0, 180, 120, 0.1875); --pico-text-selection-color: rgba(247, 112, 142, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
--pico-muted-border-color: #202632; --pico-muted-border-color: #202632;
--pico-primary: #00b478; --pico-primary: #f7708e;
--pico-primary-background: #007a50; --pico-primary-background: #d92662;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(0, 180, 120, 0.5); --pico-primary-underline: rgba(247, 112, 142, 0.5);
--pico-primary-hover: #00cc88; --pico-primary-hover: #f99eae;
--pico-primary-hover-background: #00895a; --pico-primary-hover-background: #f42c6f;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(0, 180, 120, 0.375); --pico-primary-focus: rgba(247, 112, 142, 0.375);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: #969eaf; --pico-secondary: #969eaf;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;

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

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

42
docs/pico.css
View file

@ -232,18 +232,18 @@ nav details.dropdown summary:focus-visible {
color-scheme: light; color-scheme: light;
--pico-background-color: #fff; --pico-background-color: #fff;
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(205, 104, 224, 0.25); --pico-text-selection-color: rgba(71, 164, 23, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: rgb(231, 234, 239.5); --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #aa40bf; --pico-primary: #33790f;
--pico-primary-background: #9236a4; --pico-primary-background: #398712;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(170, 64, 191, 0.5); --pico-primary-underline: rgba(51, 121, 15, 0.5);
--pico-primary-hover: #802e90; --pico-primary-hover: #265e09;
--pico-primary-hover-background: #802e90; --pico-primary-hover-background: #33790f;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(205, 104, 224, 0.5); --pico-primary-focus: rgba(71, 164, 23, 0.5);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: #5d6b89; --pico-secondary: #5d6b89;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;
@ -387,18 +387,18 @@ nav details.dropdown summary:focus-visible {
color-scheme: dark; color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5); --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(212, 125, 228, 0.1875); --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
--pico-muted-border-color: #202632; --pico-muted-border-color: #202632;
--pico-primary: #d47de4; --pico-primary: #4eb31b;
--pico-primary-background: #9236a4; --pico-primary-background: #398712;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(212, 125, 228, 0.5); --pico-primary-underline: rgba(78, 179, 27, 0.5);
--pico-primary-hover: #e2a3eb; --pico-primary-hover: #5dd121;
--pico-primary-hover-background: #aa40bf; --pico-primary-hover-background: #409614;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(212, 125, 228, 0.375); --pico-primary-focus: rgba(78, 179, 27, 0.375);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: #969eaf; --pico-secondary: #969eaf;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;
@ -542,18 +542,18 @@ nav details.dropdown summary:focus-visible {
color-scheme: dark; color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5); --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(212, 125, 228, 0.1875); --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
--pico-muted-border-color: #202632; --pico-muted-border-color: #202632;
--pico-primary: #d47de4; --pico-primary: #4eb31b;
--pico-primary-background: #9236a4; --pico-primary-background: #398712;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(212, 125, 228, 0.5); --pico-primary-underline: rgba(78, 179, 27, 0.5);
--pico-primary-hover: #e2a3eb; --pico-primary-hover: #5dd121;
--pico-primary-hover-background: #aa40bf; --pico-primary-hover-background: #409614;
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(212, 125, 228, 0.375); --pico-primary-focus: rgba(78, 179, 27, 0.375);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: #969eaf; --pico-secondary: #969eaf;
--pico-secondary-background: #525f7a; --pico-secondary-background: #525f7a;

2
docs/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

118
scss/_index.scss
View file

@ -1,59 +1,59 @@
@use "helpers/copyright"; @use "helpers/copyright";
// Config // Config
@forward "settings"; @forward "settings";
// Theming // Theming
@use "themes/default"; @use "themes/default";
// Layout // Layout
@use "layout/document"; // html @use "layout/document"; // html
@use "layout/landmarks"; // body, header, main, footer @use "layout/landmarks"; // body, header, main, footer
@use "layout/section"; // section @use "layout/section"; // section
@use "layout/container"; // .container, .container-fluid @use "layout/container"; // .container, .container-fluid
@use "layout/grid"; // .grid @use "layout/grid"; // .grid
@use "layout/row"; // .row, .row-fluid, .offset-*, .span-* @use "layout/row"; // .row, .row-fluid, .offset-*, .span-*
@use "layout/overflow-auto"; // .overflow-auto @use "layout/overflow-auto"; // .overflow-auto
// Content // Content
@use "content/typography"; // headings, p, ul, blockquote, ... @use "content/typography"; // headings, p, ul, blockquote, ...
@use "content/link"; // a, role="link" @use "content/link"; // a, role="link"
@use "content/button"; // button, role="button", type="button", type="submit" ... @use "content/button"; // button, role="button", type="button", type="submit" ...
@use "content/table"; // table, tr, td, ... @use "content/table"; // table, tr, td, ...
@use "content/embedded"; // audio, canvas, iframe, img, svg, video @use "content/embedded"; // audio, canvas, iframe, img, svg, video
@use "content/code"; // pre, code, ... @use "content/code"; // pre, code, ...
@use "content/figure"; // figure, figcaption @use "content/figure"; // figure, figcaption
@use "content/misc"; // hr, template, [hidden], dialog, canvas @use "content/misc"; // hr, template, [hidden], dialog, canvas
// Forms // Forms
@use "forms/basics"; // input, select, textarea, label, fieldset, legend @use "forms/basics"; // input, select, textarea, label, fieldset, legend
@use "forms/checkbox-radio-switch"; // type="checkbox", type="radio", role="switch" @use "forms/checkbox-radio-switch"; // type="checkbox", type="radio", role="switch"
@use "forms/input-color"; // type="color" @use "forms/input-color"; // type="color"
@use "forms/input-date"; // type="date", type="datetime-local", type="month", type="time", type="week" @use "forms/input-date"; // type="date", type="datetime-local", type="month", type="time", type="week"
@use "forms/input-file"; // type="file" @use "forms/input-file"; // type="file"
@use "forms/input-range"; // type="range" @use "forms/input-range"; // type="range"
@use "forms/input-search"; // type="search" @use "forms/input-search"; // type="search"
@use "forms/validation"; // validation for all form elements except select[multiple],select[size], input:not([type="button"], [type="reset"], [type="image"], [type="submit"], [type="checkbox"], [type="radio"] @use "forms/validation"; // validation for all form elements except select[multiple],select[size], input:not([type="button"], [type="reset"], [type="image"], [type="submit"], [type="checkbox"], [type="radio"]
@use "forms/floating"; // floating labels @use "forms/floating"; // floating labels
// Components // Components
@use "components/accordion"; // details, summary @use "components/accordion"; // details, summary
@use "components/card"; // article, role="article" @use "components/card"; // article, role="article"
@use "components/dropdown"; // details.dropdown @use "components/dropdown"; // details.dropdown
@use "components/group"; // role="group" @use "components/group"; // role="group"
@use "components/loading"; // aria-busy=true @use "components/loading"; // aria-busy=true
@use "components/modal"; // dialog @use "components/modal"; // dialog
@use "components/nav"; // nav @use "components/nav"; // nav
@use "components/nav-hamburger"; // role="navigation" for hamburger-menu for the nav component @use "components/nav-hamburger"; // role="navigation" for hamburger-menu for the nav component
@use "components/progress"; // progress @use "components/progress"; // progress
@use "components/tooltip"; // data-tooltip @use "components/tooltip"; // data-tooltip
@use "components/tab"; // [role="tablist"] // classless tabs @use "components/tab"; // [role="tablist"] // classless tabs
@use "components/tab-region"; // section[role="region"] // tabs @use "components/tab-region"; // section[role="region"] // tabs
@use "components/popover"; // dialog[role="alert"] @use "components/popover"; // dialog[role="alert"]
// V3 Remove notification in favor of popovers.. // V3 Remove notification in favor of popovers..
@use "components/notification"; // dialog[role="alert"] @use "components/notification"; // dialog[role="alert"]
@use "components/timeline"; // addition, kind of out of scope but wanted to add @use "components/timeline"; // addition, kind of out of scope but wanted to add
// Utilities // Utilities
@use "utilities/accessibility"; // -ms-touch-action, aria-* @use "utilities/accessibility"; // -ms-touch-action, aria-*
@use "utilities/reduce-motion"; // prefers-reduced-motion @use "utilities/reduce-motion"; // prefers-reduced-motion

406
scss/_settings.scss
View file

@ -1,203 +1,203 @@
@use "sass:map"; @use "sass:map";
@use "sass:math"; @use "sass:math";
@use "sass:list"; @use "sass:list";
// Settings // Settings
// –––––––––––––––––––– // ––––––––––––––––––––
// Theme color // Theme color
$yo-themes: ( $yo-themes: (
"amber", "amber",
"azure", "azure",
"blue", "blue",
"cyan", "cyan",
"fuchsia", "fuchsia",
"green", "green",
"grey", "grey",
"indigo", "indigo",
"jade", "jade",
"lime", "lime",
"orange", "orange",
"pink", "pink",
"pumpkin", "pumpkin",
"purple", "purple",
"red", "red",
"sand", "sand",
"slate", "slate",
"violet", "violet",
"yellow", "yellow",
"zinc" "zinc"
); );
$random: list.nth($yo-themes, math.random(list.length($yo-themes))); $random: list.nth($yo-themes, math.random(list.length($yo-themes)));
// picks a random theme to use as default // picks a random theme to use as default
$theme-color: $random !default; // amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc $theme-color: $random !default; // amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc
// Prefix for CSS variables // Prefix for CSS variables
$css-var-prefix: "--pico-" !default; // Must start with "--" $css-var-prefix: "--pico-" !default; // Must start with "--"
// Define the root element used to target <header>, <main>, <footer> // Define the root element used to target <header>, <main>, <footer>
// with $enable-semantic-container and $enable-responsive-spacings // with $enable-semantic-container and $enable-responsive-spacings
$semantic-root-element: "body" !default; $semantic-root-element: "body" !default;
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers // Enable <header>, <main>, <footer> inside $semantic-root-element as containers
$enable-semantic-container: false !default; $enable-semantic-container: false !default;
// Enable a centered viewport for <header>, <main>, <footer> inside $semantic-root-element // Enable a centered viewport for <header>, <main>, <footer> inside $semantic-root-element
// Fluid layout if disabled // Fluid layout if disabled
$enable-viewport: true !default; $enable-viewport: true !default;
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article> // Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
// Fixed spacings by default // Fixed spacings by default
$enable-responsive-spacings: false !default; $enable-responsive-spacings: false !default;
// Enable responsive typography // Enable responsive typography
// Fixed root element size (rem) if disabled // Fixed root element size (rem) 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 transitions // Enable transitions
$enable-transitions: true !default; $enable-transitions: true !default;
// Enable overriding with !important // Enable overriding with !important
$enable-important: true !default; $enable-important: true !default;
// Optional parent selector // Optional parent selector
// If defined, all HTML tags are wrapped with this selector // If defined, all HTML tags are wrapped with this selector
// :root is not wrapped // :root is not wrapped
$parent-selector: "" !default; $parent-selector: "" !default;
$row-columns: 12 !default; $row-columns: 12 !default;
// Breakpoints, viewports and root font size // Breakpoints, viewports and root font size
$breakpoints: () !default; $breakpoints: () !default;
$breakpoints: map.deep-merge( $breakpoints: map.deep-merge(
( (
// Small (landscape phones) // Small (landscape phones)
// Font size: 17px // Font size: 17px
sm: ( sm: (
breakpoint: 576px, breakpoint: 576px,
viewport: 510px, viewport: 510px,
root-font-size: 106.25%, root-font-size: 106.25%,
), ),
// Medium (tablets) // Medium (tablets)
// Font size: 18px // Font size: 18px
md: ( md: (
breakpoint: 768px, breakpoint: 768px,
viewport: 700px, viewport: 700px,
root-font-size: 112.5%, root-font-size: 112.5%,
), ),
// Large // Large
// Font size: 19px // Font size: 19px
lg: ( lg: (
breakpoint: 1024px, breakpoint: 1024px,
viewport: 950px, viewport: 950px,
root-font-size: 118.75%, root-font-size: 118.75%,
), ),
// Extra large // Extra large
// Font size: 20px // Font size: 20px
xl: ( xl: (
breakpoint: 1280px, breakpoint: 1280px,
viewport: 1200px, viewport: 1200px,
root-font-size: 125%, root-font-size: 125%,
), ),
// Extra extra large // Extra extra large
// Font size: 21px // Font size: 21px
xxl: ( xxl: (
breakpoint: 1536px, breakpoint: 1536px,
viewport: 1450px, viewport: 1450px,
root-font-size: 131.25%, root-font-size: 131.25%,
) )
), ),
$breakpoints $breakpoints
); );
// Modules to export // Modules to export
$modules: () !default; $modules: () !default;
$modules: map.merge( $modules: map.merge(
( (
// Theme // Theme
"themes/default": true, "themes/default": true,
// Layout // Layout
"layout/document": true, "layout/document": true,
"layout/landmarks": true, "layout/landmarks": true,
"layout/container": true, "layout/container": true,
"layout/section": true, "layout/section": true,
// V3 Notes // V3 Notes
// Add <aside> to layout folder, and have it auto build the a grid system // Add <aside> to layout folder, and have it auto build the a grid system
// will add notes someplace about idea on how to enable. // will add notes someplace about idea on how to enable.
// use grid-template // use grid-template
// maybe only then keep the grid and remove the row system. // maybe only then keep the grid and remove the row system.
"layout/grid": true, "layout/grid": true,
"layout/row": true, "layout/row": true,
"layout/overflow-auto": true, "layout/overflow-auto": true,
// Content // Content
"content/link": true, "content/link": true,
"content/typography": true, "content/typography": true,
"content/embedded": true, "content/embedded": true,
"content/button": true, "content/button": true,
"content/table": true, "content/table": true,
"content/code": true, "content/code": true,
"content/figure": true, "content/figure": true,
"content/misc": true, "content/misc": true,
// Forms // Forms
"forms/basics": true, "forms/basics": true,
"forms/checkbox-radio-switch": true, "forms/checkbox-radio-switch": true,
"forms/input-color": true, "forms/input-color": true,
"forms/input-date": true, "forms/input-date": true,
"forms/input-file": true, "forms/input-file": true,
"forms/input-range": true, "forms/input-range": true,
"forms/input-search": true, "forms/input-search": true,
"forms/floating": true, "forms/floating": true,
// V3 Notes // V3 Notes
// Remove original pico validation in favor of :user-[in]valid // Remove original pico validation in favor of :user-[in]valid
"forms/validation": true, "forms/validation": true,
// Components // Components
"components/accordion": true, "components/accordion": true,
"components/card": true, "components/card": true,
// V3 Notes // V3 Notes
// Allow for sub-menus in dropdown // Allow for sub-menus in dropdown
"components/dropdown": true, "components/dropdown": true,
"components/group": true, "components/group": true,
"components/loading": true, "components/loading": true,
"components/modal": true, "components/modal": true,
// V3 Notes // V3 Notes
// incorperate the <menu> tag into navigations. // incorperate the <menu> tag into navigations.
"components/nav": true, "components/nav": true,
"components/progress": true, "components/progress": true,
"components/tab": true, "components/tab": true,
// [role=tablist] // [role=tablist]
// I wish role="tablist|tab|tabpanel" could be used on <details> and <summary> tag. // I wish role="tablist|tab|tabpanel" could be used on <details> and <summary> tag.
"components/tab-region": false, "components/tab-region": false,
// DOES NOT WORK IN CHROME // DOES NOT WORK IN CHROME
"components/tooltip": true, "components/tooltip": true,
// V3 Notes // V3 Notes
// might find a new way to do this, I'll wait to hear feedback on this approach. // might find a new way to do this, I'll wait to hear feedback on this approach.
"components/nav-hamburger": true, "components/nav-hamburger": true,
// V3 Notes // V3 Notes
// Notification should be redone to be more in line with Pico's design // Notification should be redone to be more in line with Pico's design
"components/notification": false, "components/notification": false,
"components/popover": true, "components/popover": true,
// V3 Notes // V3 Notes
// timeline disabled by default because its more out of the scope of this project, // timeline disabled by default because its more out of the scope of this project,
// and should be moved to a separate "extras" repository, to be included. // and should be moved to a separate "extras" repository, to be included.
"components/timeline": true, "components/timeline": true,
// Utilities // Utilities
"utilities/accessibility": true, "utilities/accessibility": true,
"utilities/reduce-motion": true "utilities/reduce-motion": true
), ),
$modules $modules
); );

1772
scss/colors/_index.scss
View file

File diff suppressed because it is too large Load diff

148
scss/colors/utilities/_background-colors.scss
View file

@ -1,74 +1,74 @@
@use "sass:map"; @use "sass:map";
@use "sass:list"; @use "sass:list";
@use "../../colors"; @use "../../colors";
@use "settings"; @use "settings";
@use "utils"; @use "utils";
$enable-css-vars: map.get(settings.$utilities, "css-vars"); $enable-css-vars: map.get(settings.$utilities, "css-vars");
$background-color-property-name: map.get(settings.$properties, "background-color"); $background-color-property-name: map.get(settings.$properties, "background-color");
$color-property-name: map.get(settings.$properties, "color"); $color-property-name: map.get(settings.$properties, "color");
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name}; $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@mixin foreground-color($background-color) { @mixin foreground-color($background-color) {
@if map.get(settings.$utilities, "color-for-background-colors") { @if map.get(settings.$utilities, "color-for-background-colors") {
@if utils.foreground-brightness($background-color) == "light" { @if utils.foreground-brightness($background-color) == "light" {
@if $enable-css-vars { @if $enable-css-vars {
color: var(#{$css-var-color-prefix}-light); color: var(#{$css-var-color-prefix}-light);
} @else { } @else {
color: utils.display-color(map.get(settings.$palette, "light-color")); color: utils.display-color(map.get(settings.$palette, "light-color"));
} }
} @else { } @else {
@if $enable-css-vars { @if $enable-css-vars {
color: var(#{$css-var-color-prefix}-dark); color: var(#{$css-var-color-prefix}-dark);
} @else { } @else {
color: utils.display-color(map.get(settings.$palette, "dark-color")); color: utils.display-color(map.get(settings.$palette, "dark-color"));
} }
} }
} }
} }
@mixin background-colors { @mixin background-colors {
@if map.get(settings.$utilities, "background-colors") { @if map.get(settings.$utilities, "background-colors") {
// Loop through color families // Loop through color families
@each $family, $colors in colors.$colors { @each $family, $colors in colors.$colors {
@if list.index(map.get(settings.$palette, "color-families"), $family) { @if list.index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family}; $css-var-family-name: #{$css-var-color-prefix}-#{$family};
$class-family-name: #{$background-color-property-name}-#{$family}; $class-family-name: #{$background-color-property-name}-#{$family};
// Loop through colors // Loop through colors
@each $shade, $color-value in $colors { @each $shade, $color-value in $colors {
// Main color // Main color
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") { @if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
$value: $color-value; $value: $color-value;
@if $enable-css-vars { @if $enable-css-vars {
$value: var(#{$css-var-family-name}); $value: var(#{$css-var-family-name});
} @else { } @else {
$value: utils.display-color($color-value); $value: utils.display-color($color-value);
} }
.#{settings.$css-class-prefix}#{$class-family-name} { .#{settings.$css-class-prefix}#{$class-family-name} {
background-color: $value; background-color: $value;
@include foreground-color($color-value); @include foreground-color($color-value);
} }
} }
// Shades // Shades
@else if @else if
list.index(map.get(settings.$palette, "shades"), $shade) and list.index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades") map.get(settings.$palette, "enable-shades")
{ {
$value: $color-value; $value: $color-value;
@if $enable-css-vars { @if $enable-css-vars {
$value: var(#{$css-var-family-name}-#{$shade}); $value: var(#{$css-var-family-name}-#{$shade});
} @else { } @else {
$value: utils.display-color($color-value); $value: utils.display-color($color-value);
} }
.#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} { .#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
background-color: $value; background-color: $value;
@include foreground-color($color-value); @include foreground-color($color-value);
} }
} }
} }
} }
} }
} }
} }

102
scss/colors/utilities/_colors.scss
View file

@ -1,51 +1,51 @@
@use "sass:map"; @use "sass:map";
@use "sass:list"; @use "sass:list";
@use "../../colors"; @use "../../colors";
@use "settings"; @use "settings";
@use "utils"; @use "utils";
@mixin colors { @mixin colors {
@if map.get(settings.$utilities, "colors") { @if map.get(settings.$utilities, "colors") {
$enable-css-vars: map.get(settings.$utilities, "css-vars"); $enable-css-vars: map.get(settings.$utilities, "css-vars");
$color-property-name: map.get(settings.$properties, "color"); $color-property-name: map.get(settings.$properties, "color");
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name}; $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
// Loop through color families // Loop through color families
@each $family, $colors in colors.$colors { @each $family, $colors in colors.$colors {
@if list.index(map.get(settings.$palette, "color-families"), $family) { @if list.index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family}; $css-var-family-name: #{$css-var-color-prefix}-#{$family};
$class-family-name: #{$color-property-name}-#{$family}; $class-family-name: #{$color-property-name}-#{$family};
// Loop through colors // Loop through colors
@each $shade, $color-value in $colors { @each $shade, $color-value in $colors {
// Main color // Main color
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") { @if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
@if $enable-css-vars { @if $enable-css-vars {
$color-value: var(#{$css-var-family-name}); $color-value: var(#{$css-var-family-name});
} @else { } @else {
$color-value: utils.display-color($color-value); $color-value: utils.display-color($color-value);
} }
.#{settings.$css-class-prefix}#{$class-family-name} { .#{settings.$css-class-prefix}#{$class-family-name} {
color: $color-value; color: $color-value;
} }
} }
// Shades // Shades
@else if @else if
list.index(map.get(settings.$palette, "shades"), $shade) and list.index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades") map.get(settings.$palette, "enable-shades")
{ {
@if $enable-css-vars { @if $enable-css-vars {
$color-value: var(#{$css-var-family-name}-#{$shade}); $color-value: var(#{$css-var-family-name}-#{$shade});
} @else { } @else {
$color-value: utils.display-color($color-value); $color-value: utils.display-color($color-value);
} }
.#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} { .#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
color: $color-value; color: $color-value;
} }
} }
} }
} }
} }
} }
} }

110
scss/colors/utilities/_css-vars.scss
View file

@ -1,55 +1,55 @@
@use "sass:map"; @use "sass:map";
@use "sass:list"; @use "sass:list";
@use "../../colors"; @use "../../colors";
@use "settings"; @use "settings";
@use "utils"; @use "utils";
@mixin css-vars { @mixin css-vars {
$enable-css-vars: map.get(settings.$utilities, "css-vars"); $enable-css-vars: map.get(settings.$utilities, "css-vars");
$color-property-name: map.get(settings.$properties, "color"); $color-property-name: map.get(settings.$properties, "color");
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name}; $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@if $enable-css-vars { @if $enable-css-vars {
:root, :root,
:host { :host {
// Loop through color families // Loop through color families
@each $family, $colors in colors.$colors { @each $family, $colors in colors.$colors {
@if list.index(map.get(settings.$palette, "color-families"), $family) { @if list.index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family}; $css-var-family-name: #{$css-var-color-prefix}-#{$family};
// Loop through colors // Loop through colors
@each $shade, $color-value in $colors { @each $shade, $color-value in $colors {
// Main color // Main color
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") { @if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
#{$css-var-family-name}: #{utils.display-color($color-value)}; #{$css-var-family-name}: #{utils.display-color($color-value)};
} }
// Shades // Shades
@else if @else if
list.index(map.get(settings.$palette, "shades"), $shade) and list.index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades") map.get(settings.$palette, "enable-shades")
{ {
#{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)}; #{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
} }
} }
} }
} }
// Black & white // Black & white
@if map.get(settings.$palette, "enable-black-and-white") { @if map.get(settings.$palette, "enable-black-and-white") {
#{$css-var-color-prefix}-black: #{utils.display-color(colors.$black)}; #{$css-var-color-prefix}-black: #{utils.display-color(colors.$black)};
#{$css-var-color-prefix}-white: #{utils.display-color(colors.$white)}; #{$css-var-color-prefix}-white: #{utils.display-color(colors.$white)};
} }
// Text color variables // Text color variables
@if map.get(settings.$utilities, "color-for-background-colors") { @if map.get(settings.$utilities, "color-for-background-colors") {
#{$css-var-color-prefix}-light: #{utils.display-color( #{$css-var-color-prefix}-light: #{utils.display-color(
map.get(settings.$palette, "light-color") map.get(settings.$palette, "light-color")
)}; )};
#{$css-var-color-prefix}-dark: #{utils.display-color( #{$css-var-color-prefix}-dark: #{utils.display-color(
map.get(settings.$palette, "dark-color") map.get(settings.$palette, "dark-color")
)}; )};
} }
} }
} }
} }

16
scss/colors/utilities/_index.scss
View file

@ -1,8 +1,8 @@
@forward "settings"; @forward "settings";
@use "css-vars" as *; @use "css-vars" as *;
@use "colors" as *; @use "colors" as *;
@use "background-colors" as *; @use "background-colors" as *;
@include css-vars; @include css-vars;
@include colors; @include colors;
@include background-colors; @include background-colors;

212
scss/colors/utilities/_settings.scss
View file

@ -1,106 +1,106 @@
@use "sass:map"; @use "sass:map";
@use "../../settings" as pico-settings; @use "../../settings" as pico-settings;
// Prefix for CSS variables // Prefix for CSS variables
$css-var-prefix: "--pico-" !default; // Must start with "--" $css-var-prefix: "--pico-" !default; // Must start with "--"
$css-class-prefix: "pico-" !default; $css-class-prefix: "pico-" !default;
// Palette // Palette
$palette: () !default; $palette: () !default;
$palette: map.merge( $palette: map.merge(
( (
// Color families // Color families
"color-families": ( "color-families": (
red, red,
pink, pink,
fuchsia, fuchsia,
purple, purple,
violet, violet,
indigo, indigo,
blue, blue,
azure, azure,
cyan, cyan,
jade, jade,
green, green,
lime, lime,
yellow, yellow,
amber, amber,
pumpkin, pumpkin,
orange, orange,
sand, sand,
grey, grey,
zinc, zinc,
slate slate
), ),
// Shades // Shades
"shades": ( "shades": (
50, 50,
100, 100,
150, 150,
200, 200,
250, 250,
300, 300,
350, 350,
400, 400,
450, 450,
500, 500,
550, 550,
600, 600,
650, 650,
700, 700,
750, 750,
800, 800,
850, 850,
900, 900,
950 950
), ),
// Export main color for each family // Export main color for each family
"enable-main-color": true, "enable-main-color": true,
// Export shades for each family // Export shades for each family
"enable-shades": true, "enable-shades": true,
// Export black and white // Export black and white
"enable-black-and-white": false, "enable-black-and-white": false,
// Light color used for dark backgrounds // Light color used for dark backgrounds
"light-color": #fff, "light-color": #fff,
// Dark color used for light backgrounds // Dark color used for light backgrounds
"dark-color": #000, "dark-color": #000,
// Export as HEX, RGB or HSL values // Export as HEX, RGB or HSL values
"export-as": "hex" // hex | rgb | hsl "export-as": "hex" // hex | rgb | hsl
), ),
$palette $palette
); );
// Properties names used for CSS variables and classes // Properties names used for CSS variables and classes
// Useful if you want to shorten the names // Useful if you want to shorten the names
$properties: () !default; $properties: () !default;
$properties: map.merge( $properties: map.merge(
( (
"color": "color", "color": "color",
"background-color": "background", "background-color": "background",
), ),
$properties $properties
); );
// Utilities to export // Utilities to export
$utilities: () !default; $utilities: () !default;
$utilities: map.merge( $utilities: map.merge(
( (
// CSS Vars // CSS Vars
"css-vars": true, "css-vars": true,
// Colors utility classes // Colors utility classes
"colors": true, "colors": true,
// Background color utility classes // Background color utility classes
"background-colors": true, "background-colors": true,
// Color value for background color utility classes // Color value for background color utility classes
"color-for-background-colors": true "color-for-background-colors": true
), ),
$utilities $utilities
); );

126
scss/colors/utilities/_utils.scss
View file

@ -1,63 +1,63 @@
@use "sass:color"; @use "sass:color";
@use "sass:math"; @use "sass:math";
@use "sass:map"; @use "sass:map";
@use "sass:string"; @use "sass:string";
@use "settings"; @use "settings";
// Determines if the foreground needs to be light or dark // Determines if the foreground needs to be light or dark
// depending on the background color passed. // depending on the background color passed.
// W3C reference: http://www.w3.org/TR/AERT#color-contrast // W3C reference: http://www.w3.org/TR/AERT#color-contrast
// Inspiration: https://codepen.io/davidhalford/pen/ALrbEP // Inspiration: https://codepen.io/davidhalford/pen/ALrbEP
@function foreground-brightness($background-color) { @function foreground-brightness($background-color) {
$background-color-brightness: brightness($background-color); $background-color-brightness: brightness($background-color);
$light-color-brightness: brightness(#ffffff); $light-color-brightness: brightness(#ffffff);
@if math.abs($background-color-brightness) < $light-color-brightness * 0.5 { @if math.abs($background-color-brightness) < $light-color-brightness * 0.5 {
@return "light"; @return "light";
} @else { } @else {
@return "dark"; @return "dark";
} }
} }
// Calculates the color brightness // Calculates the color brightness
// Color brightness is determined by the following formula: // Color brightness is determined by the following formula:
// ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000 // ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
@function brightness($color) { @function brightness($color) {
$color-brightness: round( $color-brightness: round(
math.div( math.div(
(color.channel($color, "red", $space: rgb) * 299) + (color.channel($color, "red", $space: rgb) * 299) +
(color.channel($color, "green", $space: rgb) * 587) + (color.channel($color, "green", $space: rgb) * 587) +
(color.channel($color, "blue", $space: rgb) * 114), (color.channel($color, "blue", $space: rgb) * 114),
1000 1000
) )
); );
@return $color-brightness; @return $color-brightness;
} }
// Returns the color as RGB, HSL or HEX // Returns the color as RGB, HSL or HEX
@function display-color($color) { @function display-color($color) {
@if map.get(settings.$palette, "export-as") == "rgb" { @if map.get(settings.$palette, "export-as") == "rgb" {
@return display-rgb($color); @return display-rgb($color);
} }
@if map.get(settings.$palette, "export-as") == "hsl" { @if map.get(settings.$palette, "export-as") == "hsl" {
@return display-hsl($color); @return display-hsl($color);
} }
@return $color; @return $color;
} }
// Display color as HSL // Display color as HSL
@function display-hsl($color) { @function display-hsl($color) {
@return unquote( @return unquote(
"hsl(#{math.round(hue($color))}, #{math.round(saturation($color))}, #{math.round(lightness($color))})" "hsl(#{math.round(hue($color))}, #{math.round(saturation($color))}, #{math.round(lightness($color))})"
); );
} }
// Display color as RGB // Display color as RGB
@function display-rgb($color) { @function display-rgb($color) {
@return string.unquote( @return string.unquote(
"rgb(" + color.channel($color, "red", $space: rgb) + ", " + "rgb(" + color.channel($color, "red", $space: rgb) + ", " +
color.channel($color, "green", $space: rgb) + ", " + color.channel($color, "green", $space: rgb) + ", " +
color.channel($color, "blue", $space: rgb) + ")" color.channel($color, "blue", $space: rgb) + ")"
); );
} }

252
scss/components/_accordion.scss
View file

@ -1,126 +1,126 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "components/accordion") { @if map.get($modules, "components/accordion") {
/** /**
* Accordion (<details>) * Accordion (<details>)
*/ */
#{$parent-selector} details { #{$parent-selector} details {
display: block; display: block;
margin-bottom: var(#{$css-var-prefix}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
summary { summary {
line-height: 1rem; line-height: 1rem;
list-style-type: none; list-style-type: none;
cursor: pointer; cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
//transition: color var(#{$css-var-prefix}transition); //transition: color var(#{$css-var-prefix}transition);
} }
&:not([role]) { &:not([role]) {
color: var(#{$css-var-prefix}accordion-close-summary-color); color: var(#{$css-var-prefix}accordion-close-summary-color);
} }
// Reset marker // Reset marker
&::-webkit-details-marker { &::-webkit-details-marker {
display: none; display: none;
} }
&::marker { &::marker {
display: none; display: none;
} }
&::-moz-list-bullet { &::-moz-list-bullet {
list-style-type: none; list-style-type: none;
} }
// Marker // Marker
&::after { &::after {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5); margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
float: right; float: right;
transform: rotate(-90deg); transform: rotate(-90deg);
background-image: var(#{$css-var-prefix}icon-chevron); background-image: var(#{$css-var-prefix}icon-chevron);
background-position: right center; background-position: right center;
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
content: ""; content: "";
@if $enable-transitions { @if $enable-transitions {
transition: transform var(#{$css-var-prefix}transition); transition: transform var(#{$css-var-prefix}transition);
} }
} }
&:focus { &:focus {
outline: none; outline: none;
&:not([role]) { &:not([role]) {
color: var(#{$css-var-prefix}accordion-active-summary-color); color: var(#{$css-var-prefix}accordion-active-summary-color);
} }
} }
&:focus-visible { &:focus-visible {
&:not([role]) { &:not([role]) {
outline: var(#{$css-var-prefix}outline-width) solid var(#{$css-var-prefix}primary-focus); outline: var(#{$css-var-prefix}outline-width) solid var(#{$css-var-prefix}primary-focus);
outline-offset: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5); outline-offset: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
color: var(#{$css-var-prefix}primary); color: var(#{$css-var-prefix}primary);
} }
} }
// Type button // Type button
&[role="button"] { &[role="button"] {
width: 100%; width: 100%;
text-align: left; text-align: left;
// Marker // Marker
&::after { &::after {
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5)); height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
} }
} }
} }
//! //!
//! //!
//! //!
// Open // Open
&[open] { &[open] {
> summary { > summary {
margin-bottom: var(#{$css-var-prefix}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
&:not([role]) { &:not([role]) {
&:not(:focus) { &:not(:focus) {
color: var(#{$css-var-prefix}accordion-open-summary-color); color: var(#{$css-var-prefix}accordion-open-summary-color);
} }
} }
&::after { &::after {
transform: rotate(0); transform: rotate(0);
} }
} }
} }
} }
[dir="rtl"] { [dir="rtl"] {
#{$parent-selector} details { #{$parent-selector} details {
summary { summary {
text-align: right; text-align: right;
&::after { &::after {
float: left; float: left;
transform: rotate(90deg); transform: rotate(90deg);
background-position: left center; background-position: left center;
} }
} }
&[open] { &[open] {
> summary { > summary {
&::after { &::after {
transform: rotate(0); transform: rotate(0);
} }
} }
} }
} }
} }
} }

180
scss/components/_card.scss
View file

@ -1,90 +1,90 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "components/card") or map.get($modules, "components/modal") { @if map.get($modules, "components/card") or map.get($modules, "components/modal") {
/** /**
* Card (<article>, role="article") * Card (<article>, role="article")
*/ */
#{$parent-selector} article:not(:has(> form)), #{$parent-selector} article:not(:has(> form)),
#{$parent-selector} [role="article"]:not(:has(> form)), #{$parent-selector} [role="article"]:not(:has(> form)),
#{$parent-selector} article > form, #{$parent-selector} article > form,
#{$parent-selector} [role="article"] > form { #{$parent-selector} [role="article"] > form {
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical); margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
padding: var(#{$css-var-prefix}block-spacing-vertical) padding: var(#{$css-var-prefix}block-spacing-vertical)
var(#{$css-var-prefix}block-spacing-horizontal); var(#{$css-var-prefix}block-spacing-horizontal);
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}card-background-color); background: var(#{$css-var-prefix}card-background-color);
box-shadow: var(#{$css-var-prefix}card-box-shadow); box-shadow: var(#{$css-var-prefix}card-box-shadow);
> header, > header,
> footer { > footer {
margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1); margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1); margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66) padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
var(#{$css-var-prefix}block-spacing-horizontal); var(#{$css-var-prefix}block-spacing-horizontal);
background-color: var(#{$css-var-prefix}card-sectioning-background-color); background-color: var(#{$css-var-prefix}card-sectioning-background-color);
} }
> header { > header {
margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1); margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical); margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
border-bottom: var(#{$css-var-prefix}border-width) border-bottom: var(#{$css-var-prefix}border-width)
solid solid
var(#{$css-var-prefix}card-border-color); var(#{$css-var-prefix}card-border-color);
border-top-right-radius: var(#{$css-var-prefix}border-radius); border-top-right-radius: var(#{$css-var-prefix}border-radius);
border-top-left-radius: var(#{$css-var-prefix}border-radius); border-top-left-radius: var(#{$css-var-prefix}border-radius);
> h1, > h1,
> h2, > h2,
> h3, > h3,
> h4, > h4,
> h5, > h5,
> h6 { > h6 {
margin-bottom: 0; margin-bottom: 0;
} }
> hgroup { > hgroup {
> h1, > h1,
> h2, > h2,
> h3, > h3,
> h4, > h4,
> h5, > h5,
> h6 { > h6 {
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }
> footer { > footer {
margin-top: var(#{$css-var-prefix}block-spacing-vertical); margin-top: var(#{$css-var-prefix}block-spacing-vertical);
margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1); margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
border-top: var(#{$css-var-prefix}border-width) border-top: var(#{$css-var-prefix}border-width)
solid solid
var(#{$css-var-prefix}card-border-color); var(#{$css-var-prefix}card-border-color);
border-bottom-right-radius: var(#{$css-var-prefix}border-radius); border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
border-bottom-left-radius: var(#{$css-var-prefix}border-radius); border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
// https://github.com/picocss/pico/issues/557#issuecomment-2393213110 // https://github.com/picocss/pico/issues/557#issuecomment-2393213110
[type="submit"], [type="submit"],
[type="reset"], [type="reset"],
[type="button"], [type="button"],
[role="group"], [role="group"],
p, p,
nav, nav,
ul, ul,
ol { ol {
margin-bottom: 0px; margin-bottom: 0px;
&:last-child { &:last-child {
margin-bottom: 0px; margin-bottom: 0px;
} }
/* Also remove if next input after button is a hidden input */ /* Also remove if next input after button is a hidden input */
&:has(+ [type="hidden"]) { &:has(+ [type="hidden"]) {
margin-bottom: 0px; margin-bottom: 0px;
} }
} }
} }
} }
} }

590
scss/components/_dropdown.scss
View file

@ -1,295 +1,295 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "components/dropdown") and $enable-classes { @if map.get($modules, "components/dropdown") and $enable-classes {
/** /**
* Dropdown (details.dropdown) * Dropdown (details.dropdown)
*/ */
// Container // Container
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} details.dropdown { #{$parent-selector} details.dropdown {
position: relative; position: relative;
border-bottom: none; border-bottom: none;
@if $enable-transitions { @if $enable-transitions {
&[open] { &[open] {
> summary, > summary,
> button, > button,
> a { > a {
&::after { &::after {
transform: rotate(0deg); transform: rotate(0deg);
} }
} }
} }
} }
// Marker // Marker
// –––––––––––––––––––– // ––––––––––––––––––––
> summary, > summary,
> button, > button,
> a { > a {
&::after { &::after {
display: block; display: block;
width: 1rem; width: 1rem;
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5)); height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
margin-inline-start: 0.25rem; margin-inline-start: 0.25rem;
float: right; float: right;
// TODO: find out why we need this magic number (0.2 rem) // TODO: find out why we need this magic number (0.2 rem)
// for the marker to be aligned with the regular select // for the marker to be aligned with the regular select
//transform: rotate(0deg) translateX(0.2rem); //transform: rotate(0deg) translateX(0.2rem);
transform: rotate(-90deg); transform: rotate(-90deg);
background-image: var(#{$css-var-prefix}icon-chevron); background-image: var(#{$css-var-prefix}icon-chevron);
background-position: right center; background-position: right center;
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
content: ""; content: "";
} }
} }
// Button as a select // Button as a select
// inside container type accordion // inside container type accordion
// –––––––––––––––––––– // ––––––––––––––––––––
> summary { > summary {
&:not([role]) { &:not([role]) {
height: calc( height: calc(
1rem * 1rem *
var(#{$css-var-prefix}line-height) + var(#{$css-var-prefix}line-height) +
var(#{$css-var-prefix}form-element-spacing-vertical) * var(#{$css-var-prefix}form-element-spacing-vertical) *
2 + 2 +
var(#{$css-var-prefix}border-width) * var(#{$css-var-prefix}border-width) *
2 2
); );
padding: var(#{$css-var-prefix}form-element-spacing-vertical) padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal); var(#{$css-var-prefix}form-element-spacing-horizontal);
border: var(#{$css-var-prefix}border-width) border: var(#{$css-var-prefix}border-width)
solid solid
var(#{$css-var-prefix}form-element-border-color); var(#{$css-var-prefix}form-element-border-color);
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}form-element-background-color); background-color: var(#{$css-var-prefix}form-element-background-color);
color: var(#{$css-var-prefix}form-element-placeholder-color); color: var(#{$css-var-prefix}form-element-placeholder-color);
line-height: inherit; line-height: inherit;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@if $enable-transitions { @if $enable-transitions {
transition: transition:
background-color var(#{$css-var-prefix}transition), background-color var(#{$css-var-prefix}transition),
border-color var(#{$css-var-prefix}transition), border-color var(#{$css-var-prefix}transition),
color var(#{$css-var-prefix}transition), color var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition); box-shadow var(#{$css-var-prefix}transition);
} }
&:active, &:active,
&:focus { &:focus {
border-color: var(#{$css-var-prefix}form-element-active-border-color); border-color: var(#{$css-var-prefix}form-element-active-border-color);
background-color: var(#{$css-var-prefix}form-element-active-background-color); background-color: var(#{$css-var-prefix}form-element-active-background-color);
} }
&:focus { &:focus {
box-shadow: 0 box-shadow: 0
0 0
0 0
var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-focus-color); var(#{$css-var-prefix}form-element-focus-color);
} }
// Reset focus visible from accordion component // Reset focus visible from accordion component
&:focus-visible { &:focus-visible {
outline: none; outline: none;
} }
// Aria-invalid // Aria-invalid
&[aria-invalid="false"] { &[aria-invalid="false"] {
#{$css-var-prefix}form-element-border-color: var( #{$css-var-prefix}form-element-border-color: var(
#{$css-var-prefix}form-element-valid-border-color #{$css-var-prefix}form-element-valid-border-color
); );
#{$css-var-prefix}form-element-active-border-color: var( #{$css-var-prefix}form-element-active-border-color: var(
#{$css-var-prefix}form-element-valid-focus-color #{$css-var-prefix}form-element-valid-focus-color
); );
#{$css-var-prefix}form-element-focus-color: var( #{$css-var-prefix}form-element-focus-color: var(
#{$css-var-prefix}form-element-valid-focus-color #{$css-var-prefix}form-element-valid-focus-color
); );
} }
&[aria-invalid="true"] { &[aria-invalid="true"] {
#{$css-var-prefix}form-element-border-color: var( #{$css-var-prefix}form-element-border-color: var(
#{$css-var-prefix}form-element-invalid-border-color #{$css-var-prefix}form-element-invalid-border-color
); );
#{$css-var-prefix}form-element-active-border-color: var( #{$css-var-prefix}form-element-active-border-color: var(
#{$css-var-prefix}form-element-invalid-focus-color #{$css-var-prefix}form-element-invalid-focus-color
); );
#{$css-var-prefix}form-element-focus-color: var( #{$css-var-prefix}form-element-focus-color: var(
#{$css-var-prefix}form-element-invalid-focus-color #{$css-var-prefix}form-element-invalid-focus-color
); );
} }
} }
// Submenu // Submenu
// –––––––––––––––––––– // ––––––––––––––––––––
+ ul { + ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
left: 0; left: 0;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
min-width: fit-content; min-width: fit-content;
margin: 0; margin: 0;
margin-top: var(#{$css-var-prefix}outline-width); margin-top: var(#{$css-var-prefix}outline-width);
padding: 0; padding: 0;
border: var(#{$css-var-prefix}border-width) border: var(#{$css-var-prefix}border-width)
solid solid
var(#{$css-var-prefix}dropdown-border-color); var(#{$css-var-prefix}dropdown-border-color);
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}dropdown-background-color); background-color: var(#{$css-var-prefix}dropdown-background-color);
box-shadow: var(#{$css-var-prefix}dropdown-box-shadow); box-shadow: var(#{$css-var-prefix}dropdown-box-shadow);
color: var(#{$css-var-prefix}dropdown-color); color: var(#{$css-var-prefix}dropdown-color);
white-space: nowrap; white-space: nowrap;
opacity: 0; opacity: 0;
@if $enable-transitions { @if $enable-transitions {
transition: transition:
opacity var(#{$css-var-prefix}transition), opacity var(#{$css-var-prefix}transition),
transform 0s ease-in-out 1s; transform 0s ease-in-out 1s;
} }
&[dir="rtl"] { &[dir="rtl"] {
right: 0; right: 0;
left: auto; left: auto;
} }
li { li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal); var(#{$css-var-prefix}form-element-spacing-horizontal);
list-style: none; list-style: none;
&:first-of-type { &:first-of-type {
margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5); margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
} }
&:last-of-type { &:last-of-type {
margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
} }
details { details {
margin-bottom: 0; margin-bottom: 0;
> summary { > summary {
line-height: var(#{$css-var-prefix}line-height); line-height: var(#{$css-var-prefix}line-height);
} }
} }
a { a {
display: block; display: block;
margin: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * -0.5) margin: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * -0.5)
calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * -1); calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * -1);
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal); var(#{$css-var-prefix}form-element-spacing-horizontal);
overflow: hidden; overflow: hidden;
border-radius: 0; border-radius: 0;
color: var(#{$css-var-prefix}dropdown-color); color: var(#{$css-var-prefix}dropdown-color);
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
&:hover, &:hover,
&:focus, &:focus,
&:active, &:active,
&:focus-visible, &:focus-visible,
&[aria-current]:not([aria-current="false"]) { &[aria-current]:not([aria-current="false"]) {
background-color: var(#{$css-var-prefix}dropdown-hover-background-color); background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
} }
} }
label { label {
width: 100%; width: 100%;
} }
// Not working in Firefox, which doesn't support the `:has()` pseudo-class // Not working in Firefox, which doesn't support the `:has()` pseudo-class
&:has(label):hover { &:has(label):hover {
background-color: var(#{$css-var-prefix}dropdown-hover-background-color); background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
} }
} }
} }
} }
// Menu opened // Menu opened
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Inside container type accordion // 1. Inside container type accordion
&[open] > summary { &[open] > summary {
// Button opened // Button opened
// inside container type accordion // inside container type accordion
// –––––––––––––––––––– // ––––––––––––––––––––
margin-bottom: 0; margin-bottom: 0;
// Close for dropdown // Close for dropdown
// inside container type accordion // inside container type accordion
// –––––––––––––––––––– // ––––––––––––––––––––
&::before { &::before {
display: block; display: block;
z-index: 1; z-index: 1;
position: fixed; position: fixed;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
inset: 0; inset: 0;
background: none; background: none;
content: ""; content: "";
cursor: default; cursor: default;
} }
+ ul { + ul {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
@if $enable-transitions { @if $enable-transitions {
transition: transition:
opacity var(#{$css-var-prefix}transition), opacity var(#{$css-var-prefix}transition),
transform 0s ease-in-out 0s; transform 0s ease-in-out 0s;
} }
} }
} }
} }
// Container type accordion // Container type accordion
// inside a nav // inside a nav
// –––––––––––––––––––– // ––––––––––––––––––––
// Dropdown inside a nav // Dropdown inside a nav
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} nav details.dropdown { #{$parent-selector} nav details.dropdown {
display: inline; display: inline;
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0; margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
// Override height // Override height
margin-bottom: 0; margin-bottom: 0;
> summary { > summary {
&:not([role]) { &:not([role]) {
// Override height // Override height
height: calc( height: calc(
(1rem * var(#{$css-var-prefix}line-height)) + (1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}nav-link-spacing-vertical) * 2) (var(#{$css-var-prefix}nav-link-spacing-vertical) * 2)
); );
padding: calc( padding: calc(
var(#{$css-var-prefix}nav-link-spacing-vertical) - var(#{$css-var-prefix}nav-link-spacing-vertical) -
(var(#{$css-var-prefix}border-width) * 2) (var(#{$css-var-prefix}border-width) * 2)
) )
var(#{$css-var-prefix}nav-link-spacing-horizontal); var(#{$css-var-prefix}nav-link-spacing-horizontal);
&:focus-visible { &:focus-visible {
box-shadow: 0 box-shadow: 0
0 0
0 0
var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}primary-focus); var(#{$css-var-prefix}primary-focus);
} }
} }
} }
} }
// Label // Label
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} label > details.dropdown { #{$parent-selector} label > details.dropdown {
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25); margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
} }
} }

420
scss/components/_group.scss
View file

@ -1,210 +1,210 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "components/group") { @if map.get($modules, "components/group") {
/** /**
* Group ([role="group"], [role="search"]) * Group ([role="group"], [role="search"])
*/ */
#{$parent-selector} fieldset[role="group"] > legend { #{$parent-selector} fieldset[role="group"] > legend {
float: left; float: left;
} }
#{$parent-selector} [role="search"], #{$parent-selector} [role="search"],
#{$parent-selector} [role="group"] { #{$parent-selector} [role="group"] {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(#{$css-var-prefix}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
transition: box-shadow var(#{$css-var-prefix}transition); transition: box-shadow var(#{$css-var-prefix}transition);
> label, > label,
> legend { > legend {
border-color: var(#{$css-var-prefix}secondary-background); border-color: var(#{$css-var-prefix}secondary-background);
background-color: var(#{$css-var-prefix}secondary-background); background-color: var(#{$css-var-prefix}secondary-background);
color: var(#{$css-var-prefix}secondary-inverse); color: var(#{$css-var-prefix}secondary-inverse);
} }
> *, > *,
input:not([type="checkbox"], [type="radio"]), input:not([type="checkbox"], [type="radio"]),
select, select,
> label, > label,
> legend, > legend,
> details { > details {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-bottom: 0;
&:not(:first-child) { &:not(:first-child) {
margin-left: 0; margin-left: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
&:not(:last-child) { &:not(:last-child) {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
&:focus { &:focus {
z-index: 2; z-index: 2;
} }
} }
> details { > details {
&:not(:first-child) > summary { &:not(:first-child) > summary {
margin-left: 0; margin-left: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
&:not(:last-child) > summary { &:not(:last-child) > summary {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
> summary, > summary,
> summary:not([role]) { > summary:not([role]) {
height: 100% !important; height: 100% !important;
} }
} }
button, button,
[type="submit"], [type="submit"],
[type="reset"], [type="reset"],
[type="button"], [type="button"],
[role="button"], [role="button"],
input:not([type="checkbox"], [type="radio"]), input:not([type="checkbox"], [type="radio"]),
select, select,
> label, > label,
> legend, > legend,
> details > summary { > details > summary {
&:not(:first-child) { &:not(:first-child) {
margin-left: calc(var(#{$css-var-prefix}border-width) * -1); margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
} }
} }
button, button,
[type="submit"], [type="submit"],
[type="reset"], [type="reset"],
[type="button"], [type="button"],
[role="button"], [role="button"],
> label, > label,
> legend, > legend,
> details > summary { > details > summary {
width: auto; width: auto;
} }
@supports selector(:has(*)) { @supports selector(:has(*)) {
// Group box shadow when a button is focused // Group box shadow when a button is focused
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) { &:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
#{$css-var-prefix}group-box-shadow: var( #{$css-var-prefix}group-box-shadow: var(
#{$css-var-prefix}group-box-shadow-focus-with-button #{$css-var-prefix}group-box-shadow-focus-with-button
); );
input:not([type="checkbox"], [type="radio"]), input:not([type="checkbox"], [type="radio"]),
select, select,
> label, > label,
> legend, > legend,
> details > summary { > details > summary {
border-color: transparent; border-color: transparent;
} }
} }
// Group box shadow when an input is focused // Group box shadow when an input is focused
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) { &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
#{$css-var-prefix}group-box-shadow: var( #{$css-var-prefix}group-box-shadow: var(
#{$css-var-prefix}group-box-shadow-focus-with-input #{$css-var-prefix}group-box-shadow-focus-with-input
); );
// Adapt box shadow for buttons // Adapt box shadow for buttons
button, button,
[type="submit"], [type="submit"],
[type="button"], [type="button"],
[role="button"], [role="button"],
label, label,
> legend, > legend,
> details > summary { > details > summary {
#{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width) #{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
var(#{$css-var-prefix}primary-border); var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width) #{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
var(#{$css-var-prefix}primary-hover-border); var(#{$css-var-prefix}primary-hover-border);
} }
} }
// Remove button box shadow if we have a group box shadow // Remove button box shadow if we have a group box shadow
button, button,
[type="submit"], [type="submit"],
[type="reset"], [type="reset"],
[type="button"], [type="button"],
[role="button"], [role="button"],
label, label,
> legend, > legend,
> details > summary { > details > summary {
&:focus { &:focus {
box-shadow: none; box-shadow: none;
} }
} }
} }
} }
#{$parent-selector} [role="search"] { #{$parent-selector} [role="search"] {
> * { > * {
&:first-child { &:first-child {
border-top-left-radius: 5rem; border-top-left-radius: 5rem;
border-bottom-left-radius: 5rem; border-bottom-left-radius: 5rem;
} }
&:last-child { &:last-child {
border-top-right-radius: 5rem; border-top-right-radius: 5rem;
border-bottom-right-radius: 5rem; border-bottom-right-radius: 5rem;
} }
} }
} }
[dir="rtl"] { [dir="rtl"] {
#{$parent-selector} [role="search"], #{$parent-selector} [role="search"],
#{$parent-selector} [role="group"] { #{$parent-selector} [role="group"] {
> *, > *,
input:not([type="checkbox"], [type="radio"]), input:not([type="checkbox"], [type="radio"]),
select, select,
label, label,
> legend, > legend,
> details > summary { > details > summary {
&:not(:first-child) { &:not(:first-child) {
margin-right: 0; margin-right: 0;
margin-left: auto; margin-left: auto;
border-top-right-radius: 0; border-top-right-radius: 0;
border-top-left-radius: var(#{$css-var-prefix}border-radius); border-top-left-radius: var(#{$css-var-prefix}border-radius);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: var(#{$css-var-prefix}border-radius); border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
} }
&:not(:last-child) { &:not(:last-child) {
border-top-right-radius: var(#{$css-var-prefix}border-radius); border-top-right-radius: var(#{$css-var-prefix}border-radius);
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-right-radius: var(#{$css-var-prefix}border-radius); border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
} }
} }
button, button,
[type="submit"], [type="submit"],
[type="reset"], [type="reset"],
[type="button"], [type="button"],
[role="button"], [role="button"],
input:not([type="checkbox"], [type="radio"]), input:not([type="checkbox"], [type="radio"]),
select, select,
label, label,
> legend, > legend,
> details > summary { > details > summary {
&:not(:first-child) { &:not(:first-child) {
margin-right: calc(var(#{$css-var-prefix}border-width) * -1); margin-right: calc(var(#{$css-var-prefix}border-width) * -1);
margin-left: auto; margin-left: auto;
} }
} }
} }
} }

92
scss/components/_loading.scss
View file

@ -1,46 +1,46 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "components/loading") { @if map.get($modules, "components/loading") {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
// Everything except form elements // Everything except form elements
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) { #{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
&::before { &::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
background-image: var(#{$css-var-prefix}icon-loading); background-image: var(#{$css-var-prefix}icon-loading);
background-size: 1em auto; background-size: 1em auto;
background-repeat: no-repeat; background-repeat: no-repeat;
content: ""; content: "";
vertical-align: -0.125em; // Visual alignment vertical-align: -0.125em; // Visual alignment
} }
&:not(:empty) { &:not(:empty) {
&::before { &::before {
margin-inline-end: calc(var(#{$css-var-prefix}spacing) * 0.5); margin-inline-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
} }
} }
&:empty { &:empty {
text-align: center; text-align: center;
} }
} }
// Buttons and links // Buttons and links
#{$parent-selector} button, #{$parent-selector} button,
#{$parent-selector} [type="submit"], #{$parent-selector} [type="submit"],
#{$parent-selector} [type="button"], #{$parent-selector} [type="button"],
#{$parent-selector} [type="reset"], #{$parent-selector} [type="reset"],
#{$parent-selector} [role="button"], #{$parent-selector} [role="button"],
#{$parent-selector} a { #{$parent-selector} a {
&[aria-busy="true"] { &[aria-busy="true"] {
pointer-events: none; pointer-events: none;
} }
} }
} }

380
scss/components/_modal.scss
View file

@ -1,190 +1,190 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "components/modal") { @if map.get($modules, "components/modal") {
/** /**
* Modal (<dialog>) * Modal (<dialog>)
*/ */
:root, :root,
:host { :host {
#{$css-var-prefix}scrollbar-width: 0px; #{$css-var-prefix}scrollbar-width: 0px;
} }
#{$parent-selector} dialog { #{$parent-selector} dialog {
display: grid; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: inherit; width: inherit;
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: var(#{$css-var-prefix}spacing); padding: var(#{$css-var-prefix}spacing);
border: 0; border: 0;
backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter); backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
background-color: var(#{$css-var-prefix}modal-overlay-background-color); background-color: var(#{$css-var-prefix}modal-overlay-background-color);
color: var(#{$css-var-prefix}color); color: var(#{$css-var-prefix}color);
@if $enable-transitions { @if $enable-transitions {
transform: scale(1); transform: scale(1);
transition: transform var(#{$css-var-prefix}transition); transition: transform var(#{$css-var-prefix}transition);
} }
// Content // Content
> article:not(:has(> form)), > article:not(:has(> form)),
> article > form { > article > form {
$close-selector: if( $close-selector: if(
$enable-classes, $enable-classes,
".close, :is(a, button)[rel=prev]", ".close, :is(a, button)[rel=prev]",
":is(a, button)[rel=prev]" ":is(a, button)[rel=prev]"
); );
width: 100%; width: 100%;
@if map.get($breakpoints, "sm") { @if map.get($breakpoints, "sm") {
@media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) { @media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
max-width: map.get(map.get($breakpoints, "sm"), "viewport"); max-width: map.get(map.get($breakpoints, "sm"), "viewport");
} }
} }
@if map.get($breakpoints, "md") { @if map.get($breakpoints, "md") {
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) { @media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
max-width: map.get(map.get($breakpoints, "md"), "viewport"); max-width: map.get(map.get($breakpoints, "md"), "viewport");
} }
} }
> header { > header {
> * { > * {
margin-bottom: 0; margin-bottom: 0;
} }
#{$close-selector} { #{$close-selector} {
margin: 0; margin: 0;
margin-left: var(#{$css-var-prefix}spacing); margin-left: var(#{$css-var-prefix}spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
} }
> footer { > footer {
text-align: right; text-align: right;
button, button,
[role="button"] { [role="button"] {
margin-bottom: 0; margin-bottom: 0;
&:not(:first-of-type) { &:not(:first-of-type) {
margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5); margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5);
} }
} }
} }
// Close icon // Close icon
#{$close-selector} { #{$close-selector} {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(#{$css-var-prefix}spacing) * -1); margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
margin-bottom: var(#{$css-var-prefix}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
margin-left: auto; margin-left: auto;
border: none; border: none;
background-image: var(#{$css-var-prefix}icon-close); background-image: var(#{$css-var-prefix}icon-close);
background-position: center; background-position: center;
background-size: auto 1rem; background-size: auto 1rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: transparent; background-color: transparent;
opacity: 0.5; opacity: 0.5;
@if $enable-transitions { @if $enable-transitions {
transition: opacity var(#{$css-var-prefix}transition); transition: opacity var(#{$css-var-prefix}transition);
} }
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
} }
} }
// Closed state // Closed state
&:not([open]), &:not([open]),
&[open="false"] { &[open="false"] {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
& article { & article {
transform: scale(0.7); transform: scale(0.7);
} }
} }
} }
// Utilities // Utilities
@if $enable-classes { @if $enable-classes {
.modal-is-open { .modal-is-open {
padding-right: var(#{$css-var-prefix}scrollbar-width, 0px); padding-right: var(#{$css-var-prefix}scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
dialog { dialog {
pointer-events: auto; pointer-events: auto;
touch-action: auto; touch-action: auto;
} }
} }
} }
// Prevent scrolling body when modal is open // Prevent scrolling body when modal is open
body:has(dialog[open]) { body:has(dialog[open]) {
overflow: hidden; overflow: hidden;
} }
// Animations // Animations
@if $enable-classes and $enable-transitions { @if $enable-classes and $enable-transitions {
$animation-duration: 0.2s; $animation-duration: 0.2s;
:where(.modal-is-opening, .modal-is-closing) { :where(.modal-is-opening, .modal-is-closing) {
dialog, dialog,
dialog > article { dialog > article {
animation-duration: $animation-duration; animation-duration: $animation-duration;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
animation-fill-mode: both; animation-fill-mode: both;
} }
dialog { dialog {
animation-duration: ($animation-duration * 4); animation-duration: ($animation-duration * 4);
animation-name: modal-overlay; animation-name: modal-overlay;
> article { > article {
animation-delay: $animation-duration; animation-delay: $animation-duration;
animation-name: modal; animation-name: modal;
} }
} }
} }
.modal-is-closing { .modal-is-closing {
dialog, dialog,
dialog > article { dialog > article {
animation-delay: 0s; animation-delay: 0s;
animation-direction: reverse; animation-direction: reverse;
} }
} }
@keyframes modal-overlay { @keyframes modal-overlay {
from { from {
backdrop-filter: none; backdrop-filter: none;
background-color: transparent; background-color: transparent;
} }
} }
@keyframes modal { @keyframes modal {
from { from {
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0; opacity: 0;
} }
} }
} }
} }

168
scss/components/_nav-hamburger.scss
View file

@ -1,84 +1,84 @@
@use "sass:string"; @use "sass:string";
@use "sass:map"; @use "sass:map";
@use "sass:math"; @use "sass:math";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "components/nav") { @if map.get($modules, "components/nav") {
/** /**
* Nav hamburger menu * Nav hamburger menu
* modified from https: //codepen.io/brentarias/pen/gOQybod * modified from https: //codepen.io/brentarias/pen/gOQybod
*/ */
#{$parent-selector} nav[role="navigation"] { #{$parent-selector} nav[role="navigation"] {
z-index: 1; z-index: 1;
align-items: center; align-items: center;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
&[data-position="start"] { &[data-position="start"] {
/* remove the 'flex-direction' to move menu to the right */ /* remove the 'flex-direction' to move menu to the right */
flex-direction: row-reverse; flex-direction: row-reverse;
} }
> input[type="checkbox"] { > input[type="checkbox"] {
display: none; display: none;
user-select: none; user-select: none;
} }
> label { > label {
display: none; display: none;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
} }
@each $breakpoint, $values in $breakpoints { @each $breakpoint, $values in $breakpoints {
$databp: 'nav[role="navigation"]'; $databp: 'nav[role="navigation"]';
@if $breakpoint != sm { @if $breakpoint != sm {
$databp: #{$databp} + "[data-breakpoint='" + $breakpoint + "']"; $databp: #{$databp} + "[data-breakpoint='" + $breakpoint + "']";
} }
$viewport: map.get($values, "viewport"); $viewport: map.get($values, "viewport");
@media (max-width: $viewport) { @media (max-width: $viewport) {
#{$parent-selector} #{$databp} { #{$parent-selector} #{$databp} {
flex-wrap: wrap; flex-wrap: wrap;
& label { & label {
display: block; display: block;
} }
& > [role="list"] { & > [role="list"] {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
width: 90vw; width: 90vw;
max-height: 0; max-height: 0;
margin: 0 auto; margin: 0 auto;
background-color: var(--pico-muted-border-color); //muted-border-color); background-color: var(--pico-muted-border-color); //muted-border-color);
box-shadow: var(--pico-box-shadow); box-shadow: var(--pico-box-shadow);
transition: max-height var(--pico-transition); transition: max-height var(--pico-transition);
& li { & li {
width: calc(100% - calc(var(--pico-nav-link-spacing-vertical) * 2)); width: calc(100% - calc(var(--pico-nav-link-spacing-vertical) * 2));
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5)
var(--pico-nav-link-spacing-vertical); var(--pico-nav-link-spacing-vertical);
padding: 0; padding: 0;
} }
& a { & a {
display: block; display: block;
margin: 0; margin: 0;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
border-radius: 0; border-radius: 0;
transition: transition:
border-color var(--pico-transition), border-color var(--pico-transition),
color var(--pico-transition); color var(--pico-transition);
} }
& a:hover { & a:hover {
border-bottom-color: var(--pico-underline); border-bottom-color: var(--pico-underline);
text-decoration: none; text-decoration: none;
//background-color: var(--pico-primary-background) !important; //background-color: var(--pico-primary-background) !important;
//color: var(--pico-primary-inverse); //color: var(--pico-primary-inverse);
} }
} }
& input[type="checkbox"]:checked ~ [role="list"] { & input[type="checkbox"]:checked ~ [role="list"] {
max-height: 100vh; max-height: 100vh;
} }
} }
} }
} }
} }

326
scss/components/_nav.scss
View file

@ -1,163 +1,163 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "components/nav") { @if map.get($modules, "components/nav") {
/** /**
* Nav * Nav
*/ */
// Reboot based on : // Reboot based on :
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated) // Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
// https://github.com/picocss/pico/issues/634#issuecomment-2541600508 // https://github.com/picocss/pico/issues/634#issuecomment-2541600508
:where(nav li)::before { :where(nav li)::before {
float: none; // fixes safari bug in dropdowns. Previously was: left float: none; // fixes safari bug in dropdowns. Previously was: left
content: " "; //\200B"; // makes voice overs realize its a list item content: " "; //\200B"; // makes voice overs realize its a list item
//@use "sass:string"; // if we want to use the original \200B content value, we need to add this line to the top. //@use "sass:string"; // if we want to use the original \200B content value, we need to add this line to the top.
//content: string.unquote('"\\200B"'); // created a big gap between list items //content: string.unquote('"\\200B"'); // created a big gap between list items
} }
// Pico // Pico
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} nav, #{$parent-selector} nav,
#{$parent-selector} nav ul { #{$parent-selector} nav ul {
display: flex; display: flex;
} }
#{$parent-selector} nav { #{$parent-selector} nav {
justify-content: space-between; justify-content: space-between;
overflow: visible; overflow: visible;
ol, ol,
ul { ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-bottom: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
&:first-of-type { &:first-of-type {
margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1); margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
} }
&:last-of-type { &:last-of-type {
margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1); margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
} }
} }
li { li {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: var(#{$css-var-prefix}nav-element-spacing-vertical) padding: var(#{$css-var-prefix}nav-element-spacing-vertical)
var(#{$css-var-prefix}nav-element-spacing-horizontal); var(#{$css-var-prefix}nav-element-spacing-horizontal);
:where(a, [role="link"]) { :where(a, [role="link"]) {
display: inline-block; display: inline-block;
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1) margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1)
calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1); calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
padding: var(#{$css-var-prefix}nav-link-spacing-vertical) padding: var(#{$css-var-prefix}nav-link-spacing-vertical)
var(#{$css-var-prefix}nav-link-spacing-horizontal); var(#{$css-var-prefix}nav-link-spacing-horizontal);
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
&:not(:hover) { &:not(:hover) {
text-decoration: none; text-decoration: none;
} }
} }
// Minimal support for buttons and forms elements // Minimal support for buttons and forms elements
button, button,
[role="button"], [role="button"],
[type="button"], [type="button"],
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select { select {
height: auto; height: auto;
margin-right: inherit; margin-right: inherit;
margin-bottom: 0; margin-bottom: 0;
margin-left: inherit; margin-left: inherit;
padding: calc( padding: calc(
var(#{$css-var-prefix}nav-link-spacing-vertical) - var(#{$css-var-prefix}nav-link-spacing-vertical) -
(var(#{$css-var-prefix}border-width) * 2) (var(#{$css-var-prefix}border-width) * 2)
) )
var(#{$css-var-prefix}nav-link-spacing-horizontal); var(#{$css-var-prefix}nav-link-spacing-horizontal);
} }
} }
// Breadcrumb // Breadcrumb
&[aria-label="breadcrumb"] { &[aria-label="breadcrumb"] {
align-items: center; align-items: center;
justify-content: start; justify-content: start;
& ul li { & ul li {
&:not(:first-child) { &:not(:first-child) {
margin-inline-start: var(#{$css-var-prefix}nav-link-spacing-horizontal); margin-inline-start: var(#{$css-var-prefix}nav-link-spacing-horizontal);
} }
a { a {
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1) 0; margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1) 0;
margin-inline-start: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1); margin-inline-start: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
} }
&:not(:last-child) { &:not(:last-child) {
&::after { &::after {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 4); width: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 4);
margin: 0 calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1); margin: 0 calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
content: var(#{$css-var-prefix}nav-breadcrumb-divider); content: var(#{$css-var-prefix}nav-breadcrumb-divider);
color: var(#{$css-var-prefix}muted-color); color: var(#{$css-var-prefix}muted-color);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
} }
} }
} }
// Minimal support for aria-current // Minimal support for aria-current
& a[aria-current]:not([aria-current="false"]) { & a[aria-current]:not([aria-current="false"]) {
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
pointer-events: none; pointer-events: none;
} }
} }
} }
// Vertical Nav // Vertical Nav
#{$parent-selector} aside { #{$parent-selector} aside {
nav, nav,
ol, ol,
ul, ul,
li { li {
display: block; display: block;
} }
li { li {
padding: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * 0.5) padding: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}nav-element-spacing-horizontal); var(#{$css-var-prefix}nav-element-spacing-horizontal);
a { a {
display: block; display: block;
} }
// Minimal support for links as buttons // Minimal support for links as buttons
[role="button"] { [role="button"] {
margin: inherit; margin: inherit;
} }
} }
} }
// Breadcrumb RTL // Breadcrumb RTL
[dir="rtl"] { [dir="rtl"] {
#{$parent-selector} nav { #{$parent-selector} nav {
&[aria-label="breadcrumb"] { &[aria-label="breadcrumb"] {
& ul li { & ul li {
&:not(:last-child) { &:not(:last-child) {
::after { ::after {
content: "\\"; content: "\\";
} }
} }
} }
} }
} }
} }
} }

102
scss/components/_notification.scss
View file

@ -1,51 +1,51 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "components/notification") { @if map.get($modules, "components/notification") {
/** /**
* Notification (<dialog>) * Notification (<dialog>)
*/ */
#{$parent-selector} dialog[role="alert"] { #{$parent-selector} dialog[role="alert"] {
position: fixed; position: fixed;
top: unset; top: unset;
right: var(#{$css-var-prefix}spacing); right: var(#{$css-var-prefix}spacing);
bottom: var(#{$css-var-prefix}spacing); bottom: var(#{$css-var-prefix}spacing);
left: unset; left: unset;
width: auto; width: auto;
min-width: unset; min-width: unset;
height: auto; height: auto;
min-height: unset; min-height: unset;
padding: var(#{$css-var-prefix}form-element-spacing-vertical) padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal); var(#{$css-var-prefix}form-element-spacing-horizontal);
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color); border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter); backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
background-color: var(#{$css-var-prefix}primary-background); background-color: var(#{$css-var-prefix}primary-background);
box-shadow: var(#{$css-var-prefix}box-shadow); box-shadow: var(#{$css-var-prefix}box-shadow);
color: var(#{$css-var-prefix}primary-inverse); color: var(#{$css-var-prefix}primary-inverse);
font-weight: var(#{$css-var-prefix}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$css-var-prefix}font-size); font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$css-var-prefix}line-height); line-height: var(#{$css-var-prefix}line-height);
opacity: 0; opacity: 0;
transition: opacity var(#{$css-var-prefix}transition); transition: opacity var(#{$css-var-prefix}transition);
user-select: none; user-select: none;
//> p, > h1, > h2, > h3, > h4, > h5, > h6 { //> p, > h1, > h2, > h3, > h4, > h5, > h6 {
* { * {
color: var(#{$css-var-prefix}primary-inverse); color: var(#{$css-var-prefix}primary-inverse);
font-weight: var(#{$css-var-prefix}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$css-var-prefix}font-size); font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$css-var-prefix}line-height); line-height: var(#{$css-var-prefix}line-height);
} }
} }
#{$parent-selector} dialog[data-backdrop="false"][role="alert"]::backdrop { #{$parent-selector} dialog[data-backdrop="false"][role="alert"]::backdrop {
display: none; display: none;
} }
#{$parent-selector} dialog[role="alert"][open] { #{$parent-selector} dialog[role="alert"][open] {
opacity: 1; opacity: 1;
transition: opacity var(#{$css-var-prefix}transition); transition: opacity var(#{$css-var-prefix}transition);
} }
} }

74
scss/components/_popover-toast.scss
View file

@ -1,37 +1,37 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
// TODO: Complete this // TODO: Complete this
// https://mdn.github.io/dom-examples/popover-api/toast-popovers/ // https://mdn.github.io/dom-examples/popover-api/toast-popovers/
// --pico-ins-color // success // --pico-ins-color // success
// --pico-del-color // error // --pico-del-color // error
@if map.get($modules, "components/popover-toast") { @if map.get($modules, "components/popover-toast") {
#{$parent-selector} [popover] { #{$parent-selector} [popover] {
border-color: var(#{$css-var-prefix}primary); border-color: var(#{$css-var-prefix}primary);
&[data-status="success"] { &[data-status="success"] {
border-color: var(--pico-ins-color); border-color: var(--pico-ins-color);
} }
&[data-status="failure"] { &[data-status="failure"] {
border-color: var(--pico-del-color); border-color: var(--pico-del-color);
} }
&:popover-open { &:popover-open {
position: absolute; position: absolute;
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
inset: unset; inset: unset;
} }
&::backdrop { &::backdrop {
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
} }
button { button {
margin-top: -10px; margin-top: -10px;
padding: 0; padding: 0;
border: 0 none; border: 0 none;
background: transparent; background: transparent;
color: var(#{$css-var-prefix}primary); color: var(#{$css-var-prefix}primary);
font-size: 1.5em; font-size: 1.5em;
opacity: 0.8; opacity: 0.8;
} }
} }
} }

52
scss/components/_popover.scss
View file

@ -1,26 +1,26 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "components/popover") { @if map.get($modules, "components/popover") {
#{$parent-selector} [popover] { #{$parent-selector} [popover] {
border-color: var(#{$css-var-prefix}primary); border-color: var(#{$css-var-prefix}primary);
&:popover-open { &:popover-open {
margin: auto auto; margin: auto auto;
} }
&::backdrop { &::backdrop {
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
} }
button { button {
margin-top: -10px; margin-top: -10px;
padding: 0; padding: 0;
border: 0 none; border: 0 none;
background: transparent; background: transparent;
color: var(#{$css-var-prefix}primary); color: var(#{$css-var-prefix}primary);
font-size: 1.5em; font-size: 1.5em;
opacity: 0.8; opacity: 0.8;
} }
} }
} }

204
scss/components/_progress.scss
View file

@ -1,102 +1,102 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "components/progress") { @if map.get($modules, "components/progress") {
/** /**
* Progress * Progress
*/ */
// Reboot based on : // Reboot 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 v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Add the correct display in Edge 18- and IE // 1. Add the correct display in Edge 18- and IE
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox // 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
#{$parent-selector} progress { #{$parent-selector} progress {
display: inline-block; // 1 display: inline-block; // 1
vertical-align: baseline; // 2 vertical-align: baseline; // 2
} }
// Pico // Pico
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} progress { #{$parent-selector} progress {
// Reset the default appearance // Reset the default appearance
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
// Styles // Styles
display: inline-block; display: inline-block;
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5); margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
overflow: hidden; overflow: hidden;
// Remove Firefox and Opera border // Remove Firefox and Opera border
border: 0; border: 0;
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}progress-background-color); background-color: var(#{$css-var-prefix}progress-background-color);
// IE10 uses `color` to set the bar background-color // IE10 uses `color` to set the bar background-color
color: var(#{$css-var-prefix}progress-color); color: var(#{$css-var-prefix}progress-color);
&::-webkit-progress-bar { &::-webkit-progress-bar {
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
background: none; background: none;
} }
&[value]::-webkit-progress-value { &[value]::-webkit-progress-value {
background-color: var(#{$css-var-prefix}progress-color); background-color: var(#{$css-var-prefix}progress-color);
@if $enable-transitions { @if $enable-transitions {
transition: inline-size var(#{$css-var-prefix}transition); transition: inline-size var(#{$css-var-prefix}transition);
} }
} }
&::-moz-progress-bar { &::-moz-progress-bar {
background-color: var(#{$css-var-prefix}progress-color); background-color: var(#{$css-var-prefix}progress-color);
} }
// Indeterminate state // Indeterminate state
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
&:indeterminate { &:indeterminate {
background: var(#{$css-var-prefix}progress-background-color) background: var(#{$css-var-prefix}progress-background-color)
linear-gradient( linear-gradient(
to right, to right,
var(#{$css-var-prefix}progress-color) 30%, var(#{$css-var-prefix}progress-color) 30%,
var(#{$css-var-prefix}progress-background-color) 30% var(#{$css-var-prefix}progress-background-color) 30%
) )
top left / 150% 150% no-repeat; 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 {
background-color: transparent; background-color: transparent;
} }
&::-moz-progress-bar { &::-moz-progress-bar {
background-color: transparent; background-color: transparent;
} }
} }
} }
} }
[dir="rtl"] { [dir="rtl"] {
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
#{$parent-selector} progress:indeterminate { #{$parent-selector} progress:indeterminate {
animation-direction: reverse; animation-direction: reverse;
} }
} }
} }
@keyframes progress-indeterminate { @keyframes progress-indeterminate {
0% { 0% {
background-position: 200% 0; background-position: 200% 0;
} }
100% { 100% {
background-position: -200% 0; background-position: -200% 0;
} }
} }
} }

158
scss/components/_tab-region.scss
View file

@ -1,79 +1,79 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "components/tab-region") { @if map.get($modules, "components/tab-region") {
/** /**
* Tab region * Tab region
* styling help from: https://github.com/picocss/pico/discussions/608 * styling help from: https://github.com/picocss/pico/discussions/608
* and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3 * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
*/ */
#{$parent-selector} section[role="region"] { #{$parent-selector} section[role="region"] {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 0; margin-bottom: 0;
details { details {
display: contents; display: contents;
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 0; padding-bottom: 0;
summary { summary {
flex-grow: 1; flex-grow: 1;
order: 0; order: 0;
margin: 0; margin: 0;
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.75) padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.75)
calc(var(#{$css-var-prefix}block-spacing-horizontal) * 1.5); calc(var(#{$css-var-prefix}block-spacing-horizontal) * 1.5);
border-bottom: 1px solid transparent; //(#{$css-var-prefix}primary-background); border-bottom: 1px solid transparent; //(#{$css-var-prefix}primary-background);
background-color: var(#{$css-var-prefix}card-sectioning-background-color); background-color: var(#{$css-var-prefix}card-sectioning-background-color);
list-style-type: none; list-style-type: none;
touch-action: manipulation; touch-action: manipulation;
transition: all var(#{$css-var-prefix}transition); transition: all var(#{$css-var-prefix}transition);
&:hover { &:hover {
border-bottom-color: var(#{$css-var-prefix}primary-border); border-bottom-color: var(#{$css-var-prefix}primary-border);
background-color: var(#{$css-var-prefix}card-background-color); background-color: var(#{$css-var-prefix}card-background-color);
} }
&::after { &::after {
display: none; display: none;
// with the - icon instead of chevron // with the - icon instead of chevron
//transform: rotate(0deg); //transform: rotate(0deg);
//background-image: var(#{$css-var-prefix}icon-minus); //background-image: var(#{$css-var-prefix}icon-minus);
//background-position: center; //background-position: center;
//background-size: .75em auto; //background-size: .75em auto;
} }
} }
> div { > div {
opacity: 0; opacity: 0;
} }
&[open] { &[open] {
> summary { > summary {
background-color: var(#{$css-var-prefix}primary-background); background-color: var(#{$css-var-prefix}primary-background);
color: var(#{$css-var-prefix}primary-inverse) !important; color: var(#{$css-var-prefix}primary-inverse) !important;
&:hover { &:hover {
background-color: var(#{$css-var-prefix}primary-hover-background); background-color: var(#{$css-var-prefix}primary-hover-background);
} }
//&::after { //&::after {
// black chevron icon // black chevron icon
// background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); // background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
//} //}
} }
// end for summary, keep here // end for summary, keep here
> div { > div {
order: 1; order: 1;
width: 100%; width: 100%;
padding: var(#{$css-var-prefix}spacing); padding: var(#{$css-var-prefix}spacing);
padding-bottom: 0; padding-bottom: 0;
opacity: 1; opacity: 1;
transition: opacity var(#{$css-var-prefix}transition); transition: opacity var(#{$css-var-prefix}transition);
} }
} }
} }
} }
} }

200
scss/components/_tab.scss
View file

@ -1,100 +1,100 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "components/tab") { @if map.get($modules, "components/tab") {
/** /**
* Tabs * Tabs
* styling help from: https://codepen.io/mikestreety/pen/yVNNNm * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
*/ */
@if $enable-transitions { @if $enable-transitions {
@keyframes showTab { @keyframes showTab {
from { from {
//transform: translateY(10px); //transform: translateY(10px);
scale: 0.75; scale: 0.75;
opacity: 0; opacity: 0;
} }
to { to {
//transform: translateY(0); //transform: translateY(0);
scale: 1; scale: 1;
opacity: 1; opacity: 1;
} }
} }
} }
#{$parent-selector} [role="tablist"] { #{$parent-selector} [role="tablist"] {
display: flex; display: flex;
flex-wrap: wrap; // make sure it wraps flex-wrap: wrap; // make sure it wraps
padding-bottom: 0; padding-bottom: 0;
button { button {
flex-grow: 1; flex-grow: 1;
order: 1; // Put the labels first order: 1; // Put the labels first
padding: calc(var(#{$css-var-prefix}spacing) * 0.625); padding: calc(var(#{$css-var-prefix}spacing) * 0.625);
border: 0; border: 0;
border-bottom: 1px solid var(#{$css-var-prefix}primary-background); border-bottom: 1px solid var(#{$css-var-prefix}primary-background);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
background: transparent; background: transparent;
color: var(#{$css-var-prefix}contrast); color: var(#{$css-var-prefix}contrast);
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
transition: background-color var(#{$css-var-prefix}transition); transition: background-color var(#{$css-var-prefix}transition);
} }
&[aria-selected="true"] { &[aria-selected="true"] {
background: var(#{$css-var-prefix}primary-background); background: var(#{$css-var-prefix}primary-background);
color: var(#{$css-var-prefix}primary-inverse); color: var(#{$css-var-prefix}primary-inverse);
} }
&:hover { &:hover {
background: var(#{$css-var-prefix}primary-hover-background); background: var(#{$css-var-prefix}primary-hover-background);
color: var(#{$css-var-prefix}primary-inverse); color: var(#{$css-var-prefix}primary-inverse);
} }
} }
[role="tabpanel"] { [role="tabpanel"] {
flex-grow: 1; flex-grow: 1;
order: 99; // Put the tabs last order: 99; // Put the tabs last
width: 100%; width: 100%;
//calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) //calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 2)
//var(#{$css-var-prefix}form-element-spacing-horizontal); //var(#{$css-var-prefix}form-element-spacing-horizontal);
padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75); padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
background: var( background: var(
#{$css-var-prefix}accent-section-bg-color #{$css-var-prefix}accent-section-bg-color
); //#{$css-var-prefix}card-sectioning-background-color); ); //#{$css-var-prefix}card-sectioning-background-color);
@if $enable-transitions { @if $enable-transitions {
animation: var(#{$css-var-prefix}tab-animation) var(#{$css-var-prefix}transition); animation: var(#{$css-var-prefix}tab-animation) var(#{$css-var-prefix}transition);
} }
&:not([hidden]) { &:not([hidden]) {
display: block; display: block;
} }
&[hidden] { &[hidden] {
display: none; display: none;
} }
> *:last-of-type { > *:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }
@media (max-width: 45em) { @media (max-width: 45em) {
#{$parent-selector} [role="tablist"] { #{$parent-selector} [role="tablist"] {
[role="tabpanel"], [role="tabpanel"],
button, button,
label { label {
order: initial; order: initial;
} }
label, label,
[role="tabpanel"], [role="tabpanel"],
button { button {
width: 100%; width: 100%;
margin-top: 0.2rem; margin-top: 0.2rem;
margin-right: 0; margin-right: 0;
} }
} }
} }
} }

272
scss/components/_timeline.scss
View file

@ -1,136 +1,136 @@
@use "sass:string"; @use "sass:string";
@use "sass:map"; @use "sass:map";
@use "sass:math"; @use "sass:math";
@use "../settings" as *; // for spacing, breakpoints, and if columns are defined. @use "../settings" as *; // for spacing, breakpoints, and if columns are defined.
@if map.get($modules, "components/timeline") { @if map.get($modules, "components/timeline") {
// The actual timeline (the vertical ruler) // The actual timeline (the vertical ruler)
#{$parent-selector} .timeline { #{$parent-selector} .timeline {
position: relative; position: relative;
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
&::after { &::after {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
width: 6px; width: 6px;
margin-left: -3px; margin-left: -3px;
background-color: var(#{$css-var-prefix}timeline-line-color); background-color: var(#{$css-var-prefix}timeline-line-color);
content: ""; content: "";
} }
// Point around content // Point around content
> .point { > .point {
position: relative; position: relative;
width: 50%; width: 50%;
padding: 10px 25px; padding: 10px 25px;
background-color: inherit; background-color: inherit;
// circle // circle
&::after { &::after {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
top: 13px; top: 13px;
right: -13px; right: -13px;
width: 25px; width: 25px;
height: 25px; height: 25px;
border: 4px solid var(#{$css-var-prefix}timeline-dot-border-color); border: 4px solid var(#{$css-var-prefix}timeline-dot-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(#{$css-var-prefix}timeline-dot-background-color); background-color: var(#{$css-var-prefix}timeline-dot-background-color);
content: ""; content: "";
} }
// Place the container to the left // Place the container to the left
&.left { &.left {
left: 0; left: 0;
&::before { &::before {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
top: 15px; top: 15px;
right: 15px; right: 15px;
width: 0; width: 0;
height: 0; height: 0;
border: medium solid var(#{$css-var-prefix}timeline-arrow-color); border: medium solid var(#{$css-var-prefix}timeline-arrow-color);
border-width: 10px 0 10px 10px; border-width: 10px 0 10px 10px;
border-color: transparent border-color: transparent
transparent transparent
transparent transparent
var(#{$css-var-prefix}timeline-arrow-color); var(#{$css-var-prefix}timeline-arrow-color);
content: " "; content: " ";
} }
} }
// Place the container to the right // Place the container to the right
&.right { &.right {
left: 50%; left: 50%;
&::before { &::before {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
top: 15px; top: 15px;
left: 15px; left: 15px;
width: 0; width: 0;
height: 0; height: 0;
border: medium solid var(#{$css-var-prefix}timeline-arrow-color); border: medium solid var(#{$css-var-prefix}timeline-arrow-color);
border-width: 10px 10px 10px 0; border-width: 10px 10px 10px 0;
border-color: transparent border-color: transparent
var(#{$css-var-prefix}timeline-arrow-color) var(#{$css-var-prefix}timeline-arrow-color)
transparent transparent
transparent; transparent;
content: " "; content: " ";
} }
&::after { &::after {
left: -13px; left: -13px;
} }
} }
} }
} }
// Media queries - Responsive timeline on screens less than 600px wide // Media queries - Responsive timeline on screens less than 600px wide
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
// Place the timelime to the left // Place the timelime to the left
#{$parent-selector} .timeline { #{$parent-selector} .timeline {
// the line // the line
&::after { &::after {
left: 13px; left: 13px;
} }
// after = dot // after = dot
// before = arrow // before = arrow
> .point { > .point {
// Full-width containers // Full-width containers
width: 100%; width: 100%;
padding-right: 25px; padding-right: 25px;
padding-left: 40px; padding-left: 40px;
// Make all right containers behave like the left ones // Make all right containers behave like the left ones
&.right { &.right {
left: 0; left: 0;
} }
// after = dot // after = dot
&::after, &::after,
&.left::after, &.left::after,
&.right::after { &.right::after {
left: 0; left: 0;
} }
// before = arrow // before = arrow
// Make sure that all arrows are pointing leftwards // Make sure that all arrows are pointing leftwards
// &::before, // &::before,
&.left::before, &.left::before,
&.right::before { &.right::before {
//left: 60px; //left: 60px;
top: 16px; top: 16px;
left: 30px; left: 30px;
border-width: 10px 10px 10px 0; border-width: 10px 10px 10px 0;
border-color: transparent var(#{$css-var-prefix}timeline-arrow-color) transparent border-color: transparent var(#{$css-var-prefix}timeline-arrow-color) transparent
transparent; transparent;
} }
} }
} }
} }
} }

438
scss/components/_tooltip.scss
View file

@ -1,219 +1,219 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "components/tooltip") { @if map.get($modules, "components/tooltip") {
/** /**
* Tooltip ([data-tooltip]) * Tooltip ([data-tooltip])
*/ */
#{$parent-selector} [data-tooltip] { #{$parent-selector} [data-tooltip] {
position: relative; position: relative;
&:not(:has(a, button, input, [role="button"])):not(a, button, input, [role="button"]) { &:not(:has(a, button, input, [role="button"])):not(a, button, input, [role="button"]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
&[data-placement="top"]::before, &[data-placement="top"]::before,
&[data-placement="top"]::after, &[data-placement="top"]::after,
&::before, &::before,
&::after { &::after {
display: inline-block; display: inline-block;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;
left: 50%; left: 50%;
width: 250px; width: 250px;
max-width: 250px; max-width: 250px;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
overflow: hidden; overflow: hidden;
transform: translate(-50%, -0.25rem); transform: translate(-50%, -0.25rem);
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}tooltip-background-color); background: var(#{$css-var-prefix}tooltip-background-color);
content: attr(data-tooltip); content: attr(data-tooltip);
color: var(#{$css-var-prefix}tooltip-color); color: var(#{$css-var-prefix}tooltip-color);
font-style: normal; font-style: normal;
font-weight: var(#{$css-var-prefix}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
font-size: 0.875rem; font-size: 0.875rem;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: normal; white-space: normal;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
// Caret // Caret
&[data-placement="top"]::after, &[data-placement="top"]::after,
&::after { &::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid; border-top: 0.3rem solid;
border-right: 0.3rem solid transparent; border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent; border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(#{$css-var-prefix}tooltip-background-color); color: var(#{$css-var-prefix}tooltip-background-color);
} }
&[data-placement="bottom"] { &[data-placement="bottom"] {
&::before, &::before,
&::after { &::after {
top: 100%; top: 100%;
bottom: auto; bottom: auto;
transform: translate(-50%, 0.25rem); transform: translate(-50%, 0.25rem);
} }
&:after { &:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-bottom: 0.3rem solid;
} }
} }
&[data-placement="left"] { &[data-placement="left"] {
&::before, &::before,
&::after { &::after {
top: 50%; top: 50%;
right: 100%; right: 100%;
bottom: auto; bottom: auto;
left: auto; left: auto;
transform: translate(-0.25rem, -50%); transform: translate(-0.25rem, -50%);
} }
&:after { &:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-left: 0.3rem solid;
} }
} }
&[data-placement="right"] { &[data-placement="right"] {
&::before, &::before,
&::after { &::after {
top: 50%; top: 50%;
right: auto; right: auto;
bottom: auto; bottom: auto;
left: 100%; left: 100%;
transform: translate(0.25rem, -50%); transform: translate(0.25rem, -50%);
} }
&:after { &:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-right: 0.3rem solid;
} }
} }
// Display // Display
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
opacity: 1; opacity: 1;
} }
} }
@if $enable-transitions { @if $enable-transitions {
// Animations, excluding touch devices // Animations, excluding touch devices
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
// Default (top) // Default (top)
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
#{$css-var-prefix}tooltip-slide-to: translate(-50%, -0.25rem); #{$css-var-prefix}tooltip-slide-to: translate(-50%, -0.25rem);
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
animation-duration: 0.2s; animation-duration: 0.2s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-name: tooltip-slide; animation-name: tooltip-slide;
opacity: 0; opacity: 0;
} }
&::after { &::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, 0rem); #{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, 0rem);
transform: translate(-50%, -0.25rem); transform: translate(-50%, -0.25rem);
animation-name: tooltip-caret-slide; animation-name: tooltip-caret-slide;
} }
} }
// Bottom // Bottom
&[data-placement="bottom"] { &[data-placement="bottom"] {
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
#{$css-var-prefix}tooltip-slide-to: translate(-50%, 0.25rem); #{$css-var-prefix}tooltip-slide-to: translate(-50%, 0.25rem);
transform: translate(-50%, -0.75rem); transform: translate(-50%, -0.75rem);
animation-name: tooltip-slide; animation-name: tooltip-slide;
} }
&::after { &::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, -0.3rem); #{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, -0.3rem);
transform: translate(-50%, -0.5rem); transform: translate(-50%, -0.5rem);
animation-name: tooltip-caret-slide; animation-name: tooltip-caret-slide;
} }
} }
} }
// Left // Left
&[data-placement="left"] { &[data-placement="left"] {
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
#{$css-var-prefix}tooltip-slide-to: translate(-0.25rem, -50%); #{$css-var-prefix}tooltip-slide-to: translate(-0.25rem, -50%);
transform: translate(0.75rem, -50%); transform: translate(0.75rem, -50%);
animation-name: tooltip-slide; animation-name: tooltip-slide;
} }
&::after { &::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(0.3rem, -50%); #{$css-var-prefix}tooltip-caret-slide-to: translate(0.3rem, -50%);
transform: translate(0.05rem, -50%); transform: translate(0.05rem, -50%);
animation-name: tooltip-caret-slide; animation-name: tooltip-caret-slide;
} }
} }
} }
// Right // Right
&[data-placement="right"] { &[data-placement="right"] {
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
#{$css-var-prefix}tooltip-slide-to: translate(0.25rem, -50%); #{$css-var-prefix}tooltip-slide-to: translate(0.25rem, -50%);
transform: translate(-0.75rem, -50%); transform: translate(-0.75rem, -50%);
animation-name: tooltip-slide; animation-name: tooltip-slide;
} }
&::after { &::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(-0.3rem, -50%); #{$css-var-prefix}tooltip-caret-slide-to: translate(-0.3rem, -50%);
transform: translate(-0.05rem, -50%); transform: translate(-0.05rem, -50%);
animation-name: tooltip-caret-slide; animation-name: tooltip-caret-slide;
} }
} }
} }
} }
@keyframes tooltip-slide { @keyframes tooltip-slide {
to { to {
transform: var(#{$css-var-prefix}tooltip-slide-to); transform: var(#{$css-var-prefix}tooltip-slide-to);
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-caret-slide { @keyframes tooltip-caret-slide {
50% { 50% {
opacity: 0; opacity: 0;
} }
to { to {
transform: var(#{$css-var-prefix}tooltip-caret-slide-to); transform: var(#{$css-var-prefix}tooltip-caret-slide-to);
opacity: 1; opacity: 1;
} }
} }
} }
} }
} }

418
scss/content/_button.scss
View file

@ -1,209 +1,209 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "content/button") { @if map.get($modules, "content/button") {
/** /**
* Button * Button
*/ */
// Reboot based on : // Reboot 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 v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Change the font styles in all browsers // 1. Change the font styles in all browsers
// 2. Remove the margin on controls in Safari // 2. Remove the margin on controls in Safari
// 3. Show the overflow in Edge // 3. Show the overflow in Edge
#{$parent-selector} button { #{$parent-selector} button {
margin: 0; // 2 margin: 0; // 2
overflow: visible; // 3 overflow: visible; // 3
font-family: inherit; // 1 font-family: inherit; // 1
text-transform: none; // 1 text-transform: none; // 1
} }
// Correct the inability to style buttons in iOS and Safari // Correct the inability to style buttons in iOS and Safari
#{$parent-selector} button, #{$parent-selector} button,
#{$parent-selector} [type="submit"], #{$parent-selector} [type="submit"],
#{$parent-selector} [type="reset"], #{$parent-selector} [type="reset"],
#{$parent-selector} [type="button"] { #{$parent-selector} [type="button"] {
-webkit-appearance: button; -webkit-appearance: button;
} }
// Pico // Pico
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} button, #{$parent-selector} button,
#{$parent-selector} [type="submit"], #{$parent-selector} [type="submit"],
#{$parent-selector} [type="reset"], #{$parent-selector} [type="reset"],
#{$parent-selector} [type="button"], #{$parent-selector} [type="button"],
#{$parent-selector} [type="file"]::file-selector-button, #{$parent-selector} [type="file"]::file-selector-button,
#{$parent-selector} [role="button"] { #{$parent-selector} [role="button"] {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse); #{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
#{$css-var-prefix}box-shadow: var(#{$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); #{$css-var-prefix}box-shadow: var(#{$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(#{$css-var-prefix}form-element-spacing-vertical) padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal); var(#{$css-var-prefix}form-element-spacing-horizontal);
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color); border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
outline: none; outline: none;
background-color: var(#{$css-var-prefix}background-color); background-color: var(#{$css-var-prefix}background-color);
box-shadow: var(#{$css-var-prefix}box-shadow); box-shadow: var(#{$css-var-prefix}box-shadow);
color: var(#{$css-var-prefix}color); color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
font-size: 1rem; font-size: 1rem;
line-height: var(#{$css-var-prefix}line-height); line-height: var(#{$css-var-prefix}line-height);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@if $enable-transitions { @if $enable-transitions {
transition: transition:
background-color var(#{$css-var-prefix}transition), background-color var(#{$css-var-prefix}transition),
border-color var(#{$css-var-prefix}transition), border-color var(#{$css-var-prefix}transition),
color var(#{$css-var-prefix}transition), color var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition); box-shadow var(#{$css-var-prefix}transition);
} }
&:is([aria-current]:not([aria-current="false"])), &:is([aria-current]:not([aria-current="false"])),
&:is(:hover, :active, :focus) { &:is(:hover, :active, :focus) {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
#{$css-var-prefix}box-shadow: var( #{$css-var-prefix}box-shadow: var(
#{$css-var-prefix}button-hover-box-shadow, #{$css-var-prefix}button-hover-box-shadow,
0 0 0 rgba(0, 0, 0, 0) 0 0 0 rgba(0, 0, 0, 0)
); );
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse); #{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
} }
&:focus, &:focus,
&:is([aria-current]:not([aria-current="false"])):focus { &:is([aria-current]:not([aria-current="false"])):focus {
#{$css-var-prefix}box-shadow: #{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus); 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
} }
} }
#{$parent-selector} [type="submit"], #{$parent-selector} [type="submit"],
#{$parent-selector} [type="reset"], #{$parent-selector} [type="reset"],
#{$parent-selector} [type="button"] { #{$parent-selector} [type="button"] {
margin-bottom: var(#{$css-var-prefix}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
} }
// .secondary, .contrast & .outline // .secondary, .contrast & .outline
@if $enable-classes { @if $enable-classes {
// Secondary // Secondary
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary, #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
#{$parent-selector} [type="reset"], #{$parent-selector} [type="reset"],
#{$parent-selector} [type="file"]::file-selector-button { #{$parent-selector} [type="file"]::file-selector-button {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
cursor: pointer; cursor: pointer;
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
} }
&:focus, &:focus,
&:is([aria-current]:not([aria-current="false"])):focus { &:is([aria-current]:not([aria-current="false"])):focus {
#{$css-var-prefix}box-shadow: #{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus); 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
} }
} }
// Contrast // Contrast
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast { #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse); #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-hover-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse); #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
} }
&:focus, &:focus,
&:is([aria-current]:not([aria-current="false"])):focus { &:is([aria-current]:not([aria-current="false"])):focus {
#{$css-var-prefix}box-shadow: #{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus); 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
} }
} }
// Outline (primary) // Outline (primary)
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline, #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,
[type="reset"].outline { [type="reset"].outline {
#{$css-var-prefix}background-color: transparent; #{$css-var-prefix}background-color: transparent;
#{$css-var-prefix}color: var(#{$css-var-prefix}primary); #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary); #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}background-color: transparent; #{$css-var-prefix}background-color: transparent;
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover); #{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover); #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover);
} }
} }
// Outline (secondary) // Outline (secondary)
#{$parent-selector} #{$parent-selector}
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
[type="reset"].outline { [type="reset"].outline {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary); #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover); #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
} }
} }
// Outline (contrast) // Outline (contrast)
#{$parent-selector} #{$parent-selector}
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast { :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast); #{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast); #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover); #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover); #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover);
} }
} }
} @else { } @else {
// Secondary button without .class // Secondary button without .class
#{$parent-selector} [type="reset"], #{$parent-selector} [type="reset"],
#{$parent-selector} [type="file"]::file-selector-button { #{$parent-selector} [type="file"]::file-selector-button {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
cursor: pointer; cursor: pointer;
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
} }
&:focus { &:focus {
#{$css-var-prefix}box-shadow: #{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus); 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
} }
} }
} }
// Button [disabled] // Button [disabled]
#{$parent-selector} #{$parent-selector}
:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
#{$parent-selector} #{$parent-selector}
:where(fieldset[disabled]) :where(fieldset[disabled])
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }
} }

146
scss/content/_code.scss
View file

@ -1,73 +1,73 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "content/code") { @if map.get($modules, "content/code") {
/** /**
* Code * Code
*/ */
// Reboot based on : // Reboot 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 v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Correct the inheritance and scaling of font size in all browsers // 1. Correct the inheritance and scaling of font size in all browsers
// 2. Correct the odd `em` font sizing in all browsers // 2. Correct the odd `em` font sizing in all browsers
#{$parent-selector} pre, #{$parent-selector} pre,
#{$parent-selector} code, #{$parent-selector} code,
#{$parent-selector} kbd, #{$parent-selector} kbd,
#{$parent-selector} samp { #{$parent-selector} samp {
font-size: 0.875em; // 2 font-size: 0.875em; // 2
font-family: var(#{$css-var-prefix}font-family); // 1 font-family: var(#{$css-var-prefix}font-family); // 1
} }
#{$parent-selector} pre code { #{$parent-selector} pre code {
font-size: inherit; font-size: inherit;
font-family: inherit; font-family: inherit;
} }
// Prevent overflow of the container in all browsers (opinionated) // Prevent overflow of the container in all browsers (opinionated)
#{$parent-selector} pre { #{$parent-selector} pre {
-ms-overflow-style: scrollbar; -ms-overflow-style: scrollbar;
overflow: auto; overflow: auto;
} }
// Pico // Pico
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} pre, #{$parent-selector} pre,
#{$parent-selector} code, #{$parent-selector} code,
#{$parent-selector} kbd { #{$parent-selector} kbd {
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}code-background-color); background: var(#{$css-var-prefix}code-background-color);
color: var(#{$css-var-prefix}code-color); color: var(#{$css-var-prefix}code-color);
font-weight: var(#{$css-var-prefix}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
line-height: initial; line-height: initial;
} }
#{$parent-selector} code, #{$parent-selector} code,
#{$parent-selector} kbd { #{$parent-selector} kbd {
display: inline-block; display: inline-block;
padding: 0.375rem; padding: 0.375rem;
} }
#{$parent-selector} pre { #{$parent-selector} pre {
display: block; display: block;
margin-bottom: var(#{$css-var-prefix}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
overflow-x: auto; overflow-x: auto;
> code { > code {
display: block; display: block;
padding: var(#{$css-var-prefix}spacing); padding: var(#{$css-var-prefix}spacing);
background: none; background: none;
line-height: var(#{$css-var-prefix}line-height); line-height: var(#{$css-var-prefix}line-height);
} }
} }
// kbd // kbd
#{$parent-selector} kbd { #{$parent-selector} kbd {
background-color: var(#{$css-var-prefix}code-kbd-background-color); background-color: var(#{$css-var-prefix}code-kbd-background-color);
color: var(#{$css-var-prefix}code-kbd-color); color: var(#{$css-var-prefix}code-kbd-color);
vertical-align: baseline; vertical-align: baseline;
} }
} }

108
scss/content/_embedded.scss
View file

@ -1,54 +1,54 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "content/embedded") { @if map.get($modules, "content/embedded") {
/** /**
* Embedded content * Embedded content
*/ */
// Reboot based on : // Reboot 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 v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// Change the alignment on media elements in all browsers (opinionated) // Change the alignment on media elements in all browsers (opinionated)
#{$parent-selector} :where(audio, canvas, iframe, img, svg, video) { #{$parent-selector} :where(audio, canvas, iframe, img, svg, video) {
vertical-align: middle; vertical-align: middle;
} }
// Add the correct display in IE 9- // Add the correct display in IE 9-
#{$parent-selector} audio, #{$parent-selector} audio,
#{$parent-selector} video { #{$parent-selector} video {
display: inline-block; display: inline-block;
} }
// Add the correct display in iOS 4-7 // Add the correct display in iOS 4-7
#{$parent-selector} audio:not([controls]) { #{$parent-selector} audio:not([controls]) {
display: none; display: none;
height: 0; height: 0;
} }
// Remove the border on iframes in all browsers (opinionated) // Remove the border on iframes in all browsers (opinionated)
#{$parent-selector} :where(iframe) { #{$parent-selector} :where(iframe) {
border-style: none; border-style: none;
} }
// 1. Remove the border on images inside links in IE 10. // 1. Remove the border on images inside links in IE 10.
// 2. Responsive by default // 2. Responsive by default
#{$parent-selector} img { #{$parent-selector} img {
max-width: 100%; // 2 max-width: 100%; // 2
height: auto; // 2 height: auto; // 2
border-style: none; // 1 border-style: none; // 1
} }
// Change the fill color to match the text color in all browsers (opinionated) // Change the fill color to match the text color in all browsers (opinionated)
#{$parent-selector} :where(svg:not([fill])) { #{$parent-selector} :where(svg:not([fill])) {
fill: currentColor; fill: currentColor;
} }
// Hide the overflow in IE // Hide the overflow in IE
#{$parent-selector} svg:not(:root), #{$parent-selector} svg:not(:root),
#{$parent-selector} svg:not(:host) { #{$parent-selector} svg:not(:host) {
overflow: hidden; overflow: hidden;
} }
} }

38
scss/content/_figure.scss
View file

@ -1,19 +1,19 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "content/figure") { @if map.get($modules, "content/figure") {
/** /**
* Figure * Figure
*/ */
#{$parent-selector} figure { #{$parent-selector} figure {
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
figcaption { figcaption {
padding: calc(var(#{$css-var-prefix}spacing) * 0.5) 0; padding: calc(var(#{$css-var-prefix}spacing) * 0.5) 0;
color: var(#{$css-var-prefix}muted-color); color: var(#{$css-var-prefix}muted-color);
} }
} }
} }

138
scss/content/_link.scss
View file

@ -1,69 +1,69 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "content/link") { @if map.get($modules, "content/link") {
/** /**
* Link * Link
*/ */
#{$parent-selector} :where(a:not([role="button"])), #{$parent-selector} :where(a:not([role="button"])),
#{$parent-selector} [role="link"] { #{$parent-selector} [role="link"] {
#{$css-var-prefix}color: var(#{$css-var-prefix}primary); #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
#{$css-var-prefix}background-color: transparent; #{$css-var-prefix}background-color: transparent;
#{$css-var-prefix}underline: var(#{$css-var-prefix}primary-underline); #{$css-var-prefix}underline: var(#{$css-var-prefix}primary-underline);
outline: none; outline: none;
background-color: var(#{$css-var-prefix}background-color); // 1 background-color: var(#{$css-var-prefix}background-color); // 1
color: var(#{$css-var-prefix}color); color: var(#{$css-var-prefix}color);
text-decoration: var(#{$css-var-prefix}text-decoration); text-decoration: var(#{$css-var-prefix}text-decoration);
text-decoration-color: var(#{$css-var-prefix}underline); text-decoration-color: var(#{$css-var-prefix}underline);
text-underline-offset: 0.125em; text-underline-offset: 0.125em;
@if $enable-transitions { @if $enable-transitions {
transition: transition:
background-color var(#{$css-var-prefix}transition), background-color var(#{$css-var-prefix}transition),
color var(#{$css-var-prefix}transition), color var(#{$css-var-prefix}transition),
text-decoration var(#{$css-var-prefix}transition), text-decoration var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition); box-shadow var(#{$css-var-prefix}transition);
} }
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover); #{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}underline: var(#{$css-var-prefix}primary-hover-underline); #{$css-var-prefix}underline: var(#{$css-var-prefix}primary-hover-underline);
#{$css-var-prefix}text-decoration: underline; #{$css-var-prefix}text-decoration: underline;
} }
&:focus-visible { &:focus-visible {
box-shadow: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus); box-shadow: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
} }
@if $enable-classes { @if $enable-classes {
// Secondary // Secondary
&.secondary { &.secondary {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
#{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-underline); #{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-underline);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-hover-underline); #{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-hover-underline);
} }
} }
// Contrast // Contrast
&.contrast { &.contrast {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast); #{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
#{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-underline); #{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-underline);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover); #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
#{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-hover-underline); #{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-hover-underline);
} }
} }
} }
} }
#{$parent-selector} a { #{$parent-selector} a {
&[role="button"] { &[role="button"] {
display: inline-block; display: inline-block;
} }
} }
} }

76
scss/content/_misc.scss
View file

@ -1,38 +1,38 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "content/misc") { @if map.get($modules, "content/misc") {
/** /**
* Misc * Misc
*/ */
// Reboot based on : // Reboot 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 v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Correct the inheritance of border color in Firefox // 1. Correct the inheritance of border color in Firefox
// 2. Add the correct box sizing in Firefox // 2. Add the correct box sizing in Firefox
#{$parent-selector} hr { #{$parent-selector} hr {
height: 0; // 2 height: 0; // 2
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0; margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(#{$css-var-prefix}muted-border-color); border-top: 1px solid var(#{$css-var-prefix}muted-border-color);
color: inherit; // 1 color: inherit; // 1
} }
// Add the correct display in IE 10+ // Add the correct display in IE 10+
#{$parent-selector} [hidden], #{$parent-selector} [hidden],
#{$parent-selector} template { #{$parent-selector} template {
@if $enable-important { @if $enable-important {
display: none !important; display: none !important;
} @else { } @else {
display: none; display: none;
} }
} }
// Add the correct display in IE 9- // Add the correct display in IE 9-
#{$parent-selector} canvas { #{$parent-selector} canvas {
display: inline-block; display: inline-block;
} }
} }

124
scss/content/_table.scss
View file

@ -1,62 +1,62 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "content/table") { @if map.get($modules, "content/table") {
/** /**
* Table * Table
*/ */
// Reboot based on : // Reboot 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 v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Collapse border spacing in all browsers (opinionated) // 1. Collapse border spacing in all browsers (opinionated)
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari // 2. Remove text indentation from table contents in Chrome, Edge, and Safari
#{$parent-selector} :where(table) { #{$parent-selector} :where(table) {
width: 100%; width: 100%;
border-collapse: collapse; // 1 border-collapse: collapse; // 1
border-spacing: 0; border-spacing: 0;
text-indent: 0; // 2 text-indent: 0; // 2
} }
// Pico // Pico
// –––––––––––––––––––– // ––––––––––––––––––––
// Cells // Cells
#{$parent-selector} th, #{$parent-selector} th,
#{$parent-selector} td { #{$parent-selector} td {
padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing); padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
border-bottom: var(#{$css-var-prefix}border-width) border-bottom: var(#{$css-var-prefix}border-width)
solid solid
var(#{$css-var-prefix}table-border-color); var(#{$css-var-prefix}table-border-color);
background-color: var(#{$css-var-prefix}background-color); background-color: var(#{$css-var-prefix}background-color);
color: var(#{$css-var-prefix}color); color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
text-align: left; text-align: left;
text-align: start; text-align: start;
} }
// Footer // Footer
#{$parent-selector} tfoot { #{$parent-selector} tfoot {
th, th,
td { td {
border-top: var(#{$css-var-prefix}border-width) border-top: var(#{$css-var-prefix}border-width)
solid solid
var(#{$css-var-prefix}table-border-color); var(#{$css-var-prefix}table-border-color);
border-bottom: 0; border-bottom: 0;
} }
} }
// Striped // Striped
@if enable-classes { @if enable-classes {
#{$parent-selector} table { #{$parent-selector} table {
&.striped { &.striped {
tbody tr:nth-child(odd of :not([hidden])) th, tbody tr:nth-child(odd of :not([hidden])) th,
tbody tr:nth-child(odd of :not([hidden])) td { tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(#{$css-var-prefix}table-row-stripped-background-color); background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
} }
} }
} }
} }
} }

364
scss/content/_typography.scss
View file

@ -1,182 +1,182 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "content/typography") { @if map.get($modules, "content/typography") {
/** /**
* Typography * Typography
*/ */
// Reboot based on : // Reboot 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 v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// Add the correct font weight in Chrome, Edge, and Safari // Add the correct font weight in Chrome, Edge, and Safari
#{$parent-selector} b, #{$parent-selector} b,
#{$parent-selector} strong { #{$parent-selector} strong {
font-weight: bolder; font-weight: bolder;
} }
// Prevent `sub` and `sup` elements from affecting the line height in all browsers // Prevent `sub` and `sup` elements from affecting the line height in all browsers
#{$parent-selector} sub, #{$parent-selector} sub,
#{$parent-selector} sup { #{$parent-selector} sup {
position: relative; position: relative;
font-size: 0.75em; font-size: 0.75em;
line-height: 0; line-height: 0;
vertical-align: baseline; vertical-align: baseline;
} }
#{$parent-selector} sub { #{$parent-selector} sub {
bottom: -0.25em; bottom: -0.25em;
} }
#{$parent-selector} sup { #{$parent-selector} sup {
top: -0.5em; top: -0.5em;
} }
// Pico // Pico
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} address, #{$parent-selector} address,
#{$parent-selector} blockquote, #{$parent-selector} blockquote,
#{$parent-selector} dl, #{$parent-selector} dl,
#{$parent-selector} ol, #{$parent-selector} ol,
#{$parent-selector} p, #{$parent-selector} p,
#{$parent-selector} pre, #{$parent-selector} pre,
#{$parent-selector} table, #{$parent-selector} table,
#{$parent-selector} ul { #{$parent-selector} ul {
margin-top: 0; margin-top: 0;
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical); margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
color: var(#{$css-var-prefix}color); color: var(#{$css-var-prefix}color);
font-style: normal; font-style: normal;
font-weight: var(#{$css-var-prefix}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
} }
// Headings // Headings
#{$parent-selector} h1, #{$parent-selector} h1,
#{$parent-selector} h2, #{$parent-selector} h2,
#{$parent-selector} h3, #{$parent-selector} h3,
#{$parent-selector} h4, #{$parent-selector} h4,
#{$parent-selector} h5, #{$parent-selector} h5,
#{$parent-selector} h6 { #{$parent-selector} h6 {
margin-top: 0; margin-top: 0;
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical); margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
color: var(#{$css-var-prefix}color); color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$css-var-prefix}font-size); font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$css-var-prefix}line-height); line-height: var(#{$css-var-prefix}line-height);
font-family: var(#{$css-var-prefix}font-family); font-family: var(#{$css-var-prefix}font-family);
} }
#{$parent-selector} h1 { #{$parent-selector} h1 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h1-color); #{$css-var-prefix}color: var(#{$css-var-prefix}h1-color);
} }
#{$parent-selector} h2 { #{$parent-selector} h2 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h2-color); #{$css-var-prefix}color: var(#{$css-var-prefix}h2-color);
} }
#{$parent-selector} h3 { #{$parent-selector} h3 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h3-color); #{$css-var-prefix}color: var(#{$css-var-prefix}h3-color);
} }
#{$parent-selector} h4 { #{$parent-selector} h4 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h4-color); #{$css-var-prefix}color: var(#{$css-var-prefix}h4-color);
} }
#{$parent-selector} h5 { #{$parent-selector} h5 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h5-color); #{$css-var-prefix}color: var(#{$css-var-prefix}h5-color);
} }
#{$parent-selector} h6 { #{$parent-selector} h6 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h6-color); #{$css-var-prefix}color: var(#{$css-var-prefix}h6-color);
} }
// Margin-top for headings after a block // Margin-top for headings after a block
#{$parent-selector} #{$parent-selector}
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
~ :is(h1, h2, h3, h4, h5, h6) { ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(#{$css-var-prefix}typography-spacing-top); margin-top: var(#{$css-var-prefix}typography-spacing-top);
} }
} }
// Paragraphs // Paragraphs
#{$parent-selector} p { #{$parent-selector} p {
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical); margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
} }
// Heading group // Heading group
#{$parent-selector} hgroup { #{$parent-selector} hgroup {
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical); margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
> * { > * {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
> *:not(:first-child):last-child { > *:not(:first-child):last-child {
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color); #{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
#{$css-var-prefix}font-weight: unset; #{$css-var-prefix}font-weight: unset;
font-size: 1rem; font-size: 1rem;
} }
} }
// Lists // Lists
#{$parent-selector} :where(ol, ul) { #{$parent-selector} :where(ol, ul) {
li { li {
margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25); margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
} }
} }
// Margin-top for nested lists // Margin-top for nested lists
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari // 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
#{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) { #{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; // 1 margin: 0; // 1
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25); margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
} }
#{$parent-selector} ul li { #{$parent-selector} ul li {
list-style: square; list-style: square;
} }
// Highlighted text // Highlighted text
#{$parent-selector} mark { #{$parent-selector} mark {
padding: 0.125rem 0.25rem; padding: 0.125rem 0.25rem;
background-color: var(#{$css-var-prefix}mark-background-color); background-color: var(#{$css-var-prefix}mark-background-color);
color: var(#{$css-var-prefix}mark-color); color: var(#{$css-var-prefix}mark-color);
vertical-align: baseline; vertical-align: baseline;
} }
// Blockquote // Blockquote
#{$parent-selector} blockquote { #{$parent-selector} blockquote {
display: block; display: block;
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0; margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
padding: var(#{$css-var-prefix}spacing); padding: var(#{$css-var-prefix}spacing);
border-right: none; border-right: none;
border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color); border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color); border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
border-inline-end: none; border-inline-end: none;
footer { footer {
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5); margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
color: var(#{$css-var-prefix}blockquote-footer-color); color: var(#{$css-var-prefix}blockquote-footer-color);
} }
} }
// Abbreviations // Abbreviations
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari // 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
#{$parent-selector} abbr[title] { #{$parent-selector} abbr[title] {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; // 1 text-decoration: none; // 1
cursor: help; cursor: help;
} }
// Ins // Ins
#{$parent-selector} ins { #{$parent-selector} ins {
color: var(#{$css-var-prefix}ins-color); color: var(#{$css-var-prefix}ins-color);
text-decoration: none; text-decoration: none;
} }
// del // del
#{$parent-selector} del { #{$parent-selector} del {
color: var(#{$css-var-prefix}del-color); color: var(#{$css-var-prefix}del-color);
} }
// selection // selection
#{$parent-selector} ::selection { #{$parent-selector} ::selection {
background-color: var(#{$css-var-prefix}text-selection-color); background-color: var(#{$css-var-prefix}text-selection-color);
} }
} }

988
scss/forms/_basics.scss
View file

@ -1,494 +1,494 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "forms/basics") { @if map.get($modules, "forms/basics") {
// Helper // Helper
$helper-previous-tags: "input, select, textarea, fieldset"; $helper-previous-tags: "input, select, textarea, fieldset";
/** /**
* Basics form elements * Basics form elements
*/ */
// Reboot based on : // Reboot 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 v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Change the font styles in all browsers // 1. Change the font styles in all browsers
// 2. Remove the margin in Firefox and Safari // 2. Remove the margin in Firefox and Safari
#{$parent-selector} input, #{$parent-selector} input,
#{$parent-selector} optgroup, #{$parent-selector} optgroup,
#{$parent-selector} select, #{$parent-selector} select,
#{$parent-selector} textarea, #{$parent-selector} textarea,
#{$parent-selector} [role="group"] > label, #{$parent-selector} [role="group"] > label,
#{$parent-selector} [role="group"] > legend { #{$parent-selector} [role="group"] > legend {
margin: 0; // 2 margin: 0; // 2
font-size: 1rem; // 1 font-size: 1rem; // 1
line-height: var(#{$css-var-prefix}line-height); // 1 line-height: var(#{$css-var-prefix}line-height); // 1
font-family: inherit; // 1 font-family: inherit; // 1
letter-spacing: inherit; // 2 letter-spacing: inherit; // 2
} }
// Show the overflow in IE. // Show the overflow in IE.
#{$parent-selector} input { #{$parent-selector} input {
overflow: visible; overflow: visible;
} }
// Remove the inheritance of text transform in Edge, Firefox, and IE // Remove the inheritance of text transform in Edge, Firefox, and IE
#{$parent-selector} select { #{$parent-selector} select {
text-transform: none; text-transform: none;
} }
// 1. Correct the text wrapping in Edge and IE // 1. Correct the text wrapping in Edge and IE
// 2. Correct the color inheritance from `fieldset` elements in IE // 2. Correct the color inheritance from `fieldset` elements in IE
// 3. Remove the padding so developers are not caught out when they zero out // 3. Remove the padding so developers are not caught out when they zero out
// `fieldset` elements in all browsers // `fieldset` elements in all browsers
#{$parent-selector} legend { #{$parent-selector} legend {
max-width: 100%; // 1 max-width: 100%; // 1
padding: 0; // 3 padding: 0; // 3
color: inherit; // 2 color: inherit; // 2
white-space: normal; // 1 white-space: normal; // 1
} }
// 1. Remove the default vertical scrollbar in IE // 1. Remove the default vertical scrollbar in IE
#{$parent-selector} textarea { #{$parent-selector} textarea {
overflow: auto; // 1 overflow: auto; // 1
} }
// Remove the padding in IE 10 // Remove the padding in IE 10
#{$parent-selector} [type="checkbox"], #{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="radio"] { #{$parent-selector} [type="radio"] {
padding: 0; padding: 0;
} }
// Correct the cursor style of increment and decrement buttons in Safari // Correct the cursor style of increment and decrement buttons in Safari
#{$parent-selector} ::-webkit-inner-spin-button, #{$parent-selector} ::-webkit-inner-spin-button,
#{$parent-selector} ::-webkit-outer-spin-button { #{$parent-selector} ::-webkit-outer-spin-button {
height: auto; height: auto;
} }
// 1. Correct the odd appearance in Chrome and Safari // 1. Correct the odd appearance in Chrome and Safari
// 2. Correct the outline style in Safari // 2. Correct the outline style in Safari
#{$parent-selector} [type="search"] { #{$parent-selector} [type="search"] {
-webkit-appearance: textfield; // 1 -webkit-appearance: textfield; // 1
outline-offset: -2px; // 2 outline-offset: -2px; // 2
} }
// Remove the inner padding in Chrome and Safari on macOS // Remove the inner padding in Chrome and Safari on macOS
#{$parent-selector} [type="search"]::-webkit-search-decoration { #{$parent-selector} [type="search"]::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
// 1. Correct the inability to style clickable types in iOS and Safari // 1. Correct the inability to style clickable types in iOS and Safari
// 2. Change font properties to `inherit` in Safari // 2. Change font properties to `inherit` in Safari
#{$parent-selector} ::-webkit-file-upload-button { #{$parent-selector} ::-webkit-file-upload-button {
-webkit-appearance: button; // 1 -webkit-appearance: button; // 1
font: inherit; // 2 font: inherit; // 2
} }
// Remove the inner border and padding of focus outlines in Firefox // Remove the inner border and padding of focus outlines in Firefox
#{$parent-selector} ::-moz-focus-inner { #{$parent-selector} ::-moz-focus-inner {
padding: 0; padding: 0;
border-style: none; border-style: none;
} }
// Remove the focus outline in Firefox // Remove the focus outline in Firefox
#{$parent-selector} :-moz-focusring { #{$parent-selector} :-moz-focusring {
outline: none; outline: none;
} }
// Remove the additional :invalid styles in Firefox // Remove the additional :invalid styles in Firefox
#{$parent-selector} :-moz-ui-invalid { #{$parent-selector} :-moz-ui-invalid {
box-shadow: none; box-shadow: none;
} }
// Change the inconsistent appearance in IE (opinionated) // Change the inconsistent appearance in IE (opinionated)
#{$parent-selector} ::-ms-expand { #{$parent-selector} ::-ms-expand {
display: none; display: none;
} }
// Remove the border and padding in all browsers (opinionated) // Remove the border and padding in all browsers (opinionated)
#{$parent-selector} [type="file"], #{$parent-selector} [type="file"],
#{$parent-selector} [type="range"] { #{$parent-selector} [type="range"] {
padding: 0; padding: 0;
border-width: 0; border-width: 0;
} }
// Pico // Pico
// –––––––––––––––––––– // ––––––––––––––––––––
// Force height for alternatives input types // Force height for alternatives input types
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="date"]) { #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="date"]) {
//, //,
//#{$parent-selector} [role="group"] > label, //#{$parent-selector} [role="group"] > label,
//#{$parent-selector} [role="group"] > legend { //#{$parent-selector} [role="group"] > legend {
height: calc( height: calc(
(1rem * var(#{$css-var-prefix}line-height)) + (1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) + (var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
(var(#{$css-var-prefix}border-width) * 2) (var(#{$css-var-prefix}border-width) * 2)
); );
} }
// Fieldset // Fieldset
#{$parent-selector} fieldset { #{$parent-selector} fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(#{$css-var-prefix}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
// Label & legend // Label & legend
#{$parent-selector} label, #{$parent-selector} label,
#{$parent-selector} fieldset legend { #{$parent-selector} fieldset legend {
display: block; display: block;
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375); margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
color: var(#{$css-var-prefix}color); color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight)); font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
} }
#{$parent-selector} fieldset legend { #{$parent-selector} fieldset legend {
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5); margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
} }
// Blocks, 100% // Blocks, 100%
#{$parent-selector} input:not([type="checkbox"], [type="radio"]), #{$parent-selector} input:not([type="checkbox"], [type="radio"]),
#{$parent-selector} button[type="submit"], #{$parent-selector} button[type="submit"],
#{$parent-selector} select, #{$parent-selector} select,
#{$parent-selector} textarea { #{$parent-selector} textarea {
width: 100%; width: 100%;
} }
// Reset appearance (Not Checkboxes, Radios, Range and File) // Reset appearance (Not Checkboxes, Radios, Range and File)
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
#{$parent-selector} select, #{$parent-selector} select,
#{$parent-selector} textarea, #{$parent-selector} textarea,
#{$parent-selector} [role="group"] > label, #{$parent-selector} [role="group"] > label,
#{$parent-selector} [role="group"] > legend { #{$parent-selector} [role="group"] > legend {
appearance: none; appearance: none;
padding: var(#{$css-var-prefix}form-element-spacing-vertical) padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal); var(#{$css-var-prefix}form-element-spacing-horizontal);
} }
// Commons styles // Commons styles
#{$parent-selector} input, #{$parent-selector} input,
#{$parent-selector} select, #{$parent-selector} select,
#{$parent-selector} textarea, #{$parent-selector} textarea,
#{$parent-selector} [role="group"] > label, #{$parent-selector} [role="group"] > label,
#{$parent-selector} [role="group"] > legend { #{$parent-selector} [role="group"] > legend {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-background-color); #{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-background-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-border-color); #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-border-color);
#{$css-var-prefix}color: var(#{$css-var-prefix}form-element-color); #{$css-var-prefix}color: var(#{$css-var-prefix}form-element-color);
#{$css-var-prefix}box-shadow: none; #{$css-var-prefix}box-shadow: none;
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color); border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
outline: none; outline: none;
background-color: var(#{$css-var-prefix}background-color); background-color: var(#{$css-var-prefix}background-color);
box-shadow: var(#{$css-var-prefix}box-shadow); box-shadow: var(#{$css-var-prefix}box-shadow);
color: var(#{$css-var-prefix}color); color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
@if $enable-transitions { @if $enable-transitions {
transition: transition:
background-color var(#{$css-var-prefix}transition), background-color var(#{$css-var-prefix}transition),
border-color var(#{$css-var-prefix}transition), border-color var(#{$css-var-prefix}transition),
color var(#{$css-var-prefix}transition), color var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition); box-shadow var(#{$css-var-prefix}transition);
} }
} }
// Active & Focus // Active & Focus
#{$parent-selector} #{$parent-selector}
input:not( input:not(
[type="submit"], [type="submit"],
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="checkbox"], [type="checkbox"],
[type="radio"], [type="radio"],
[readonly] [readonly]
), ),
#{$parent-selector} :where(select, textarea):not([readonly]) { #{$parent-selector} :where(select, textarea):not([readonly]) {
&:is(:active, :focus) { &:is(:active, :focus) {
#{$css-var-prefix}background-color: var( #{$css-var-prefix}background-color: var(
#{$css-var-prefix}form-element-active-background-color #{$css-var-prefix}form-element-active-background-color
); );
} }
} }
// Active & Focus // Active & Focus
#{$parent-selector} #{$parent-selector}
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]), input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
#{$parent-selector} :where(select, textarea):not([readonly]) { #{$parent-selector} :where(select, textarea):not([readonly]) {
&:is(:active, :focus) { &:is(:active, :focus) {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-active-border-color); #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-active-border-color);
} }
} }
// Focus // Focus
#{$parent-selector} #{$parent-selector}
input:not( input:not(
[type="submit"], [type="submit"],
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="range"], [type="range"],
[type="file"], [type="file"],
[readonly] [readonly]
), ),
#{$parent-selector} :where(select, textarea):not([readonly]) { #{$parent-selector} :where(select, textarea):not([readonly]) {
&:focus { &:focus {
#{$css-var-prefix}box-shadow: 0 #{$css-var-prefix}box-shadow: 0
0 0
0 0
var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-focus-color); var(#{$css-var-prefix}form-element-focus-color);
} }
} }
// Disabled // Disabled
#{$parent-selector} input:not([type="submit"], [type="button"], [type="reset"])[disabled], #{$parent-selector} input:not([type="submit"], [type="button"], [type="reset"])[disabled],
#{$parent-selector} [role="group"] > label, #{$parent-selector} [role="group"] > label,
#{$parent-selector} [role="group"] > legend, #{$parent-selector} [role="group"] > legend,
#{$parent-selector} select[disabled], #{$parent-selector} select[disabled],
#{$parent-selector} textarea[disabled], #{$parent-selector} textarea[disabled],
#{$parent-selector} label[aria-disabled="true"], #{$parent-selector} label[aria-disabled="true"],
#{$parent-selector} #{$parent-selector}
:where(fieldset[disabled]) :where(fieldset[disabled])
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) { :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
opacity: var(#{$css-var-prefix}form-element-disabled-opacity); opacity: var(#{$css-var-prefix}form-element-disabled-opacity);
pointer-events: none; pointer-events: none;
} }
#{$parent-selector} label[aria-disabled="true"] input[disabled], #{$parent-selector} label[aria-disabled="true"] input[disabled],
#{$parent-selector} [role="group"] > label, #{$parent-selector} [role="group"] > label,
#{$parent-selector} [role="group"] > legend { #{$parent-selector} [role="group"] > legend {
opacity: 1; opacity: 1;
} }
// Aria-invalid // Aria-invalid
#{$parent-selector} :not([novalidate]) :where(input, select, textarea) { #{$parent-selector} :not([novalidate]) :where(input, select, textarea) {
&:not( &:not(
[type="checkbox"], [type="checkbox"],
[type="radio"], [type="radio"],
[type="date"], [type="date"],
[type="datetime-local"], [type="datetime-local"],
[type="month"], [type="month"],
[type="time"], [type="time"],
[type="week"], [type="week"],
[type="range"] [type="range"]
) { ) {
&[aria-invalid] { &[aria-invalid] {
@if $enable-important { @if $enable-important {
padding-right: calc( padding-right: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
) !important; ) !important;
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal); padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important; padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
padding-inline-end: calc( padding-inline-end: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
) !important; ) !important;
} @else { } @else {
padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal); padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal); padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
} }
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
&[aria-invalid="false"]:not(select) { &[aria-invalid="false"]:not(select) {
background-image: var(#{$css-var-prefix}icon-valid); background-image: var(#{$css-var-prefix}icon-valid);
} }
&[aria-invalid="true"]:not(select) { &[aria-invalid="true"]:not(select) {
background-image: var(#{$css-var-prefix}icon-invalid); background-image: var(#{$css-var-prefix}icon-invalid);
} }
} }
&[aria-invalid="false"] { &[aria-invalid="false"] {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color); #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
&:is(:active, :focus) { &:is(:active, :focus) {
@if $enable-important { @if $enable-important {
#{$css-var-prefix}border-color: var( #{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-valid-active-border-color #{$css-var-prefix}form-element-valid-active-border-color
) !important; ) !important;
&:not([type="checkbox"], [type="radio"]) { &:not([type="checkbox"], [type="radio"]) {
#{$css-var-prefix}box-shadow: 0 #{$css-var-prefix}box-shadow: 0
0 0
0 0
var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-valid-focus-color) !important; var(#{$css-var-prefix}form-element-valid-focus-color) !important;
} }
} @else { } @else {
#{$css-var-prefix}border-color: var( #{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-valid-active-border-color #{$css-var-prefix}form-element-valid-active-border-color
); );
&:not([type="checkbox"], [type="radio"]) { &:not([type="checkbox"], [type="radio"]) {
#{$css-var-prefix}box-shadow: 0 #{$css-var-prefix}box-shadow: 0
0 0
0 0
var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-valid-focus-color); var(#{$css-var-prefix}form-element-valid-focus-color);
} }
} }
} }
} }
&[aria-invalid="true"] { &[aria-invalid="true"] {
// --pico-form-element-invalid-border-color // --pico-form-element-invalid-border-color
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color); #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
&:is(:active, :focus) { &:is(:active, :focus) {
@if $enable-important { @if $enable-important {
#{$css-var-prefix}border-color: var( #{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color #{$css-var-prefix}form-element-invalid-active-border-color
) !important; ) !important;
&:not([type="checkbox"], [type="radio"]) { &:not([type="checkbox"], [type="radio"]) {
#{$css-var-prefix}box-shadow: 0 #{$css-var-prefix}box-shadow: 0
0 0
0 0
var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-invalid-focus-color) !important; var(#{$css-var-prefix}form-element-invalid-focus-color) !important;
} }
} @else { } @else {
#{$css-var-prefix}border-color: var( #{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color #{$css-var-prefix}form-element-invalid-active-border-color
); );
&:not([type="checkbox"], [type="radio"]) { &:not([type="checkbox"], [type="radio"]) {
#{$css-var-prefix}box-shadow: 0 #{$css-var-prefix}box-shadow: 0
0 0
0 0
var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-invalid-focus-color); var(#{$css-var-prefix}form-element-invalid-focus-color);
} }
} }
} }
} }
} }
[dir="rtl"] { [dir="rtl"] {
#{$parent-selector} :where(input, select, textarea) { #{$parent-selector} :where(input, select, textarea) {
&:not([type="checkbox"], [type="radio"]) { &:not([type="checkbox"], [type="radio"]) {
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) { &:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
background-position: center left 0.75rem; background-position: center left 0.75rem;
} }
} }
} }
} }
// Placeholder // Placeholder
#{$parent-selector} input::placeholder, #{$parent-selector} input::placeholder,
#{$parent-selector} input::-webkit-input-placeholder, #{$parent-selector} input::-webkit-input-placeholder,
#{$parent-selector} textarea::placeholder, #{$parent-selector} textarea::placeholder,
#{$parent-selector} textarea::-webkit-input-placeholder, #{$parent-selector} textarea::-webkit-input-placeholder,
#{$parent-selector} select:invalid, #{$parent-selector} select:invalid,
#{$parent-selector} [role="group"] > label, #{$parent-selector} [role="group"] > label,
#{$parent-selector} [role="group"] > legend { #{$parent-selector} [role="group"] > legend {
color: var(#{$css-var-prefix}form-element-placeholder-color); color: var(#{$css-var-prefix}form-element-placeholder-color);
opacity: 1; opacity: 1;
} }
// Margin bottom (Not Checkboxes and Radios) // Margin bottom (Not Checkboxes and Radios)
#{$parent-selector} input:not([type="checkbox"], [type="radio"]), #{$parent-selector} input:not([type="checkbox"], [type="radio"]),
#{$parent-selector} select, #{$parent-selector} select,
#{$parent-selector} textarea, #{$parent-selector} textarea,
#{$parent-selector} [role="group"] > label, #{$parent-selector} [role="group"] > label,
#{$parent-selector} [role="group"] > legend { #{$parent-selector} [role="group"] > legend {
margin-bottom: var(#{$css-var-prefix}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
} }
// Select // Select
#{$parent-selector} select { #{$parent-selector} select {
// Unstyle the caret on `<select>`s in IE10+. // Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand { &::-ms-expand {
border: 0; border: 0;
background-color: transparent; background-color: transparent;
} }
&:not([multiple], [size]) { &:not([multiple], [size]) {
padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal); padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal); padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
background-image: var(#{$css-var-prefix}icon-chevron); background-image: var(#{$css-var-prefix}icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
&[multiple] { &[multiple] {
option { option {
&:checked { &:checked {
background: var(#{$css-var-prefix}form-element-selected-background-color); background: var(#{$css-var-prefix}form-element-selected-background-color);
color: var(#{$css-var-prefix}form-element-color); color: var(#{$css-var-prefix}form-element-color);
} }
} }
} }
} }
[dir="rtl"] { [dir="rtl"] {
#{$parent-selector} select { #{$parent-selector} select {
&:not([multiple], [size]) { &:not([multiple], [size]) {
background-position: center left 0.75rem; background-position: center left 0.75rem;
} }
} }
} }
// Textarea // Textarea
#{$parent-selector} textarea { #{$parent-selector} textarea {
display: block; display: block;
resize: vertical; resize: vertical;
&[aria-invalid] { &[aria-invalid] {
@if $enable-important { @if $enable-important {
#{$css-var-prefix}icon-height: calc( #{$css-var-prefix}icon-height: calc(
(1rem * var(#{$css-var-prefix}line-height)) + (1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) + (var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
(var(#{$css-var-prefix}border-width) * 2) (var(#{$css-var-prefix}border-width) * 2)
); );
background-position: top right 0.75rem !important; background-position: top right 0.75rem !important;
background-size: 1rem var(#{$css-var-prefix}icon-height) !important; background-size: 1rem var(#{$css-var-prefix}icon-height) !important;
} }
} }
} }
@if map.get($modules, "layout/grid") and $enable-classes { @if map.get($modules, "layout/grid") and $enable-classes {
$helper-previous-tags: $helper-previous-tags + ", .grid"; $helper-previous-tags: $helper-previous-tags + ", .grid";
} }
@if map.get($modules, "components/dropdown") and $enable-classes { @if map.get($modules, "components/dropdown") and $enable-classes {
$helper-previous-tags: $helper-previous-tags + ", .dropdown"; $helper-previous-tags: $helper-previous-tags + ", .dropdown";
} }
#{$parent-selector} :where(#{$helper-previous-tags}) { #{$parent-selector} :where(#{$helper-previous-tags}) {
+ small { + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75); margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75);
margin-bottom: var(#{$css-var-prefix}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
color: var(#{$css-var-prefix}muted-color); color: var(#{$css-var-prefix}muted-color);
} }
&[aria-invalid="false"] { &[aria-invalid="false"] {
+ small { + small {
color: var(#{$css-var-prefix}ins-color); color: var(#{$css-var-prefix}ins-color);
} }
} }
&[aria-invalid="true"] { &[aria-invalid="true"] {
+ small { + small {
color: var(#{$css-var-prefix}del-color); color: var(#{$css-var-prefix}del-color);
} }
} }
} }
// Styles for Input inside a label // Styles for Input inside a label
#{$parent-selector} label { #{$parent-selector} label {
> :where(input, select, textarea) { > :where(input, select, textarea) {
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25); margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
} }
} }
} }

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

@ -1,177 +1,177 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "forms/checkbox-radio-switch") { @if map.get($modules, "forms/checkbox-radio-switch") {
/** /**
* Checkboxes, Radios and Switches * Checkboxes, Radios and Switches
*/ */
// Labels // Labels
// Not working in Firefox, which doesn't support the `:has()` pseudo-class // Not working in Firefox, which doesn't support the `:has()` pseudo-class
#{$parent-selector} label { #{$parent-selector} label {
&:has([type="checkbox"], [type="radio"]) { &:has([type="checkbox"], [type="radio"]) {
width: fit-content; width: fit-content;
cursor: pointer; cursor: pointer;
} }
} }
#{$parent-selector} [type="checkbox"], #{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="radio"] { #{$parent-selector} [type="radio"] {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em; margin-top: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
border-width: var(#{$css-var-prefix}border-width); border-width: var(#{$css-var-prefix}border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
&::-ms-check { &::-ms-check {
display: none; // unstyle IE checkboxes display: none; // unstyle IE checkboxes
} }
&:checked, &:checked,
&:checked:active, &:checked:active,
&:checked:focus { &:checked:focus {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
background-image: var(#{$css-var-prefix}icon-checkbox); background-image: var(#{$css-var-prefix}icon-checkbox);
background-position: center; background-position: center;
background-size: 0.75em auto; background-size: 0.75em auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
& ~ label { & ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
cursor: pointer; cursor: pointer;
&:not(:last-of-type) { &:not(:last-of-type) {
margin-inline-end: 1em; margin-inline-end: 1em;
} }
} }
} }
// Checkboxes // Checkboxes
#{$parent-selector} [type="checkbox"] { #{$parent-selector} [type="checkbox"] {
&:indeterminate { &:indeterminate {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
background-image: var(#{$css-var-prefix}icon-minus); background-image: var(#{$css-var-prefix}icon-minus);
background-position: center; background-position: center;
background-size: 0.75em auto; background-size: 0.75em auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
} }
// Radios // Radios
#{$parent-selector} [type="radio"] { #{$parent-selector} [type="radio"] {
border-radius: 50%; border-radius: 50%;
&:checked, &:checked,
&:checked:active, &:checked:active,
&:checked:focus { &:checked:focus {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-inverse); #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-inverse);
border-width: 0.35em; border-width: 0.35em;
background-image: none; background-image: none;
} }
} }
// Switches // Switches
#{$parent-selector} [type="checkbox"][role="switch"] { #{$parent-selector} [type="checkbox"][role="switch"] {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color); #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
#{$css-var-prefix}color: var(#{$css-var-prefix}switch-color); #{$css-var-prefix}color: var(#{$css-var-prefix}switch-color);
// Config // Config
$switch-height: 1.25em; $switch-height: 1.25em;
$switch-width: 2.25em; $switch-width: 2.25em;
$switch-transition: 0.1s ease-in-out; $switch-transition: 0.1s ease-in-out;
// Styles // Styles
width: $switch-width; width: $switch-width;
height: $switch-height; height: $switch-height;
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color); border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: $switch-height; border-radius: $switch-height;
background-color: var(#{$css-var-prefix}background-color); background-color: var(#{$css-var-prefix}background-color);
line-height: $switch-height; line-height: $switch-height;
&:not([aria-invalid]) { &:not([aria-invalid]) {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color); #{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
} }
&:before { &:before {
display: block; display: block;
aspect-ratio: 1; aspect-ratio: 1;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
background-color: var(#{$css-var-prefix}color); background-color: var(#{$css-var-prefix}color);
box-shadow: var(#{$css-var-prefix}switch-thumb-box-shadow); box-shadow: var(#{$css-var-prefix}switch-thumb-box-shadow);
content: ""; content: "";
@if $enable-transitions { @if $enable-transitions {
transition: margin $switch-transition; transition: margin $switch-transition;
} }
} }
&:focus { &:focus {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color); #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color); #{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
} }
&:checked { &:checked {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-checked-background-color); #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-checked-background-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-checked-background-color); #{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-checked-background-color);
background-image: none; background-image: none;
&::before { &::before {
margin-inline-start: calc(#{$switch-width} - #{$switch-height}); margin-inline-start: calc(#{$switch-width} - #{$switch-height});
} }
} }
&[disabled] { &[disabled] {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}border-color); #{$css-var-prefix}background-color: var(#{$css-var-prefix}border-color);
} }
} }
// Aria-invalid // Aria-invalid
#{$parent-selector} :not([novalidate]) [type="checkbox"], #{$parent-selector} :not([novalidate]) [type="checkbox"],
#{$parent-selector} :not([novalidate]) [type="checkbox"][role="switch"] { #{$parent-selector} :not([novalidate]) [type="checkbox"][role="switch"] {
&[aria-invalid="false"] { &[aria-invalid="false"] {
&:checked, &:checked,
&:checked:active, &:checked:active,
&:checked:focus { &:checked:focus {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-valid-border-color); #{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-valid-border-color);
} }
} }
&:checked, &:checked,
&:checked:active, &:checked:active,
&:checked:focus { &:checked:focus {
&[aria-invalid="true"] { &[aria-invalid="true"] {
#{$css-var-prefix}background-color: var( #{$css-var-prefix}background-color: var(
#{$css-var-prefix}form-element-invalid-border-color #{$css-var-prefix}form-element-invalid-border-color
); );
} }
} }
} }
#{$parent-selector} :not([novalidate]) [type="checkbox"], #{$parent-selector} :not([novalidate]) [type="checkbox"],
#{$parent-selector} :not([novalidate]) [type="radio"], #{$parent-selector} :not([novalidate]) [type="radio"],
#{$parent-selector} :not([novalidate]) [type="checkbox"][role="switch"] { #{$parent-selector} :not([novalidate]) [type="checkbox"][role="switch"] {
&[aria-invalid="false"] { &[aria-invalid="false"] {
&:checked, &:checked,
&:checked:active, &:checked:active,
&:checked:focus { &:checked:focus {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color); #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
} }
} }
&:checked, &:checked,
&:checked:active, &:checked:active,
&:checked:focus { &:checked:focus {
&[aria-invalid="true"] { &[aria-invalid="true"] {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color); #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
} }
} }
} }
} }

148
scss/forms/_floating.scss
View file

@ -1,74 +1,74 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "forms/floating") { @if map.get($modules, "forms/floating") {
// and $enable-classes { // and $enable-classes {
$transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); $transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
#{$parent-selector} section[role="form"] { #{$parent-selector} section[role="form"] {
position: relative; position: relative;
margin-bottom: 0; margin-bottom: 0;
> input::placeholder, > input::placeholder,
> textarea::placeholder { > textarea::placeholder {
color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0);
transition: color $transition-fast; transition: color $transition-fast;
} }
> input:focus::placeholder, > input:focus::placeholder,
> textarea:focus::placeholder { > textarea:focus::placeholder {
color: var(--pico-form-element-placeholder-color); color: var(--pico-form-element-placeholder-color);
} }
> input + label, > input + label,
> textarea + label, > textarea + label,
> select + label { > select + label {
position: absolute; position: absolute;
top: 35%; top: 35%;
left: 0.8rem; left: 0.8rem;
transform: translateY(-50%); transform: translateY(-50%);
background: var(#{$css-var-prefix}form-element-background-color); background: var(#{$css-var-prefix}form-element-background-color);
color: var(#{$css-var-prefix}form-element-placeholder-color); color: var(#{$css-var-prefix}form-element-placeholder-color);
cursor: text; cursor: text;
transition: 0.3s ease; transition: 0.3s ease;
} }
// Used this before I tried: >select:has(option:checked:not([disabled]))~label // Used this before I tried: >select:has(option:checked:not([disabled]))~label
//> select + label { //> select + label {
// position: absolute; // position: absolute;
// top: -5%; // top: -5%;
// left: 0.8rem; // left: 0.8rem;
// padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5); // padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
// transform: translateY(-50%) scale(0.85); // transform: translateY(-50%) scale(0.85);
// background: var(#{$css-var-prefix}form-element-background-color); // background: var(#{$css-var-prefix}form-element-background-color);
// cursor: text; // cursor: text;
//} //}
> input:not(:placeholder-shown) + label, > input:not(:placeholder-shown) + label,
> input:focus + label, > input:focus + label,
> textarea:not(:placeholder-shown) + label, > textarea:not(:placeholder-shown) + label,
> textarea:focus + label, > textarea:focus + label,
> select:focus + label, > select:focus + label,
> select:has(option:checked:not([disabled])) ~ label { > select:has(option:checked:not([disabled])) ~ label {
top: -5%; top: -5%;
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5); padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
transform: translateY(-50%) scale(0.85); transform: translateY(-50%) scale(0.85);
color: var(--pico-form-element-active-border-color); color: var(--pico-form-element-active-border-color);
font-size: calc(var(--pico-font-size) * 0.85); font-size: calc(var(--pico-font-size) * 0.85);
line-height: 1.25; line-height: 1.25;
transition: all $transition-fast; transition: all $transition-fast;
} }
@if map.get($modules, "forms/validation") { @if map.get($modules, "forms/validation") {
> input:user-invalid:not(:placeholder-shown) + label, > input:user-invalid:not(:placeholder-shown) + label,
> textarea:user-invalid:not(:placeholder-shown) + label { > textarea:user-invalid:not(:placeholder-shown) + label {
color: var(#{$css-var-prefix}form-element-invalid-border-color); color: var(#{$css-var-prefix}form-element-invalid-border-color);
} }
> input:user-valid:not(:placeholder-shown) + label, > input:user-valid:not(:placeholder-shown) + label,
> textarea:user-valid:not(:placeholder-shown) + label { > textarea:user-valid:not(:placeholder-shown) + label {
color: var(#{$css-var-prefix}form-element-valid-border-color); color: var(#{$css-var-prefix}form-element-valid-border-color);
} }
} }
} }
} }

74
scss/forms/_input-color.scss
View file

@ -1,37 +1,37 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
// Wrapper // Wrapper
@mixin color-wrapper { @mixin color-wrapper {
padding: 0; padding: 0;
} }
// Swatch // Swatch
@mixin color-swatch { @mixin color-swatch {
border: 0; border: 0;
border-radius: calc(var(#{$css-var-prefix}border-radius) * 0.5); border-radius: calc(var(#{$css-var-prefix}border-radius) * 0.5);
} }
@if map.get($modules, "forms/input-color") { @if map.get($modules, "forms/input-color") {
/** /**
* Input type color * Input type color
*/ */
#{$parent-selector} [type="color"] { #{$parent-selector} [type="color"] {
&::-webkit-color-swatch-wrapper { &::-webkit-color-swatch-wrapper {
@include color-wrapper; @include color-wrapper;
} }
&::-moz-focus-inner { &::-moz-focus-inner {
@include color-wrapper; @include color-wrapper;
} }
&::-webkit-color-swatch { &::-webkit-color-swatch {
@include color-swatch; @include color-swatch;
} }
&::-moz-color-swatch { &::-moz-color-swatch {
@include color-swatch; @include color-swatch;
} }
} }
} }

120
scss/forms/_input-date.scss
View file

@ -1,60 +1,60 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "forms/input-date") { @if map.get($modules, "forms/input-date") {
/** /**
* Input type datetime * Input type datetime
*/ */
// :not() are needed to add Specificity and avoid !important on padding // :not() are needed to add Specificity and avoid !important on padding
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) { #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) { &:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
#{$css-var-prefix}icon-position: 0.75rem; #{$css-var-prefix}icon-position: 0.75rem;
#{$css-var-prefix}icon-width: 1rem; #{$css-var-prefix}icon-width: 1rem;
padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position)); padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
background-image: var(#{$css-var-prefix}icon-date); background-image: var(#{$css-var-prefix}icon-date);
background-position: center right var(#{$css-var-prefix}icon-position); background-position: center right var(#{$css-var-prefix}icon-position);
background-size: var(#{$css-var-prefix}icon-width) auto; background-size: var(#{$css-var-prefix}icon-width) auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
// Time // Time
&[type="time"] { &[type="time"] {
background-image: var(#{$css-var-prefix}icon-time); background-image: var(#{$css-var-prefix}icon-time);
} }
} }
// Calendar picker // Calendar picker
#{$parent-selector} [type="date"], #{$parent-selector} [type="date"],
#{$parent-selector} [type="datetime-local"], #{$parent-selector} [type="datetime-local"],
#{$parent-selector} [type="month"], #{$parent-selector} [type="month"],
#{$parent-selector} [type="time"], #{$parent-selector} [type="time"],
#{$parent-selector} [type="week"] { #{$parent-selector} [type="week"] {
&::-webkit-calendar-picker-indicator { &::-webkit-calendar-picker-indicator {
width: var(#{$css-var-prefix}icon-width); width: var(#{$css-var-prefix}icon-width);
margin-right: calc(var(#{$css-var-prefix}icon-width) * -1); margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
margin-left: var(#{$css-var-prefix}icon-position); margin-left: var(#{$css-var-prefix}icon-position);
opacity: 0; opacity: 0;
} }
} }
// Calendar icons are hidden in Firefox // Calendar icons are hidden in Firefox
@if $enable-important { @if $enable-important {
@-moz-document url-prefix() { @-moz-document url-prefix() {
#{$parent-selector} [type="date"], #{$parent-selector} [type="date"],
#{$parent-selector} [type="datetime-local"], #{$parent-selector} [type="datetime-local"],
#{$parent-selector} [type="month"], #{$parent-selector} [type="month"],
#{$parent-selector} [type="time"], #{$parent-selector} [type="time"],
#{$parent-selector} [type="week"] { #{$parent-selector} [type="week"] {
padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important; padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }
} }
[dir="rtl"] [dir="rtl"]
#{$parent-selector} #{$parent-selector}
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) { :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
text-align: right; text-align: right;
} }
} }

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

@ -1,41 +1,41 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "forms/input-file") { @if map.get($modules, "forms/input-file") {
/** /**
* Input type file * Input type file
*/ */
// 1. Hack to display the outline on the focused file selector button // 1. Hack to display the outline on the focused file selector button
// with the forced overflow hidden on the input[type="file"] element. // with the forced overflow hidden on the input[type="file"] element.
#{$parent-selector} [type="file"] { #{$parent-selector} [type="file"] {
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color); #{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1 margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0; padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0;
padding-left: var(#{$css-var-prefix}outline-width); // 1 padding-left: var(#{$css-var-prefix}outline-width); // 1
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
&::file-selector-button { &::file-selector-button {
margin-right: calc(var(#{$css-var-prefix}spacing) / 2); margin-right: calc(var(#{$css-var-prefix}spacing) / 2);
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal); var(#{$css-var-prefix}form-element-spacing-horizontal);
} }
&:is(:hover, :active, :focus) { &:is(:hover, :active, :focus) {
&::file-selector-button { &::file-selector-button {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
} }
} }
&:focus { &:focus {
&::file-selector-button { &::file-selector-button {
#{$css-var-prefix}box-shadow: #{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus); 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
} }
} }
} }
} }

200
scss/forms/_input-range.scss
View file

@ -1,100 +1,100 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
// Config // Config
$height-track: 0.375rem; $height-track: 0.375rem;
$height-thumb: 1.25rem; $height-thumb: 1.25rem;
$border-thumb: 2px; $border-thumb: 2px;
// Slider Track // Slider Track
@mixin slider-track { @mixin slider-track {
width: 100%; width: 100%;
height: $height-track; height: $height-track;
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}range-border-color); background-color: var(#{$css-var-prefix}range-border-color);
@if $enable-transitions { @if $enable-transitions {
transition: transition:
background-color var(#{$css-var-prefix}transition), background-color var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition); box-shadow var(#{$css-var-prefix}transition);
} }
} }
// Slider Thumb // Slider Thumb
@mixin slider-thumb { @mixin slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width: $height-thumb; width: $height-thumb;
height: $height-thumb; height: $height-thumb;
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))}; margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
border: $border-thumb solid var(#{$css-var-prefix}range-thumb-border-color); border: $border-thumb solid var(#{$css-var-prefix}range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(#{$css-var-prefix}range-thumb-color); background-color: var(#{$css-var-prefix}range-thumb-color);
cursor: pointer; cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
transition: transition:
background-color var(#{$css-var-prefix}transition), background-color var(#{$css-var-prefix}transition),
transform var(#{$css-var-prefix}transition); transform var(#{$css-var-prefix}transition);
} }
} }
@if map.get($modules, "forms/input-range") { @if map.get($modules, "forms/input-range") {
/** /**
* Input type range * Input type range
*/ */
#{$parent-selector} [type="range"] { #{$parent-selector} [type="range"] {
// Styles // Styles
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
width: 100%; width: 100%;
height: $height-thumb; height: $height-thumb;
background: none; background: none;
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
@include slider-track; @include slider-track;
} }
&::-moz-range-track { &::-moz-range-track {
@include slider-track; @include slider-track;
} }
&::-ms-track { &::-ms-track {
@include slider-track; @include slider-track;
} }
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
@include slider-thumb; @include slider-thumb;
} }
&::-moz-range-thumb { &::-moz-range-thumb {
@include slider-thumb; @include slider-thumb;
} }
&::-ms-thumb { &::-ms-thumb {
@include slider-thumb; @include slider-thumb;
} }
&:active, &:active,
&:focus-within { &:focus-within {
#{$css-var-prefix}range-border-color: var(#{$css-var-prefix}range-active-border-color); #{$css-var-prefix}range-border-color: var(#{$css-var-prefix}range-active-border-color);
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}range-thumb-active-color); #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}range-thumb-active-color);
} }
&:active { &:active {
// Slider Thumb // Slider Thumb
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
transform: scale(1.25); transform: scale(1.25);
} }
&::-moz-range-thumb { &::-moz-range-thumb {
transform: scale(1.25); transform: scale(1.25);
} }
&::-ms-thumb { &::-ms-thumb {
transform: scale(1.25); transform: scale(1.25);
} }
} }
} }
} }

120
scss/forms/_input-search.scss
View file

@ -1,60 +1,60 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "forms/input-search") { @if map.get($modules, "forms/input-search") {
/** /**
* Input type search * Input type search
*/ */
// :not() are needed to add Specificity and avoid !important on padding // :not() are needed to add Specificity and avoid !important on padding
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) { #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] { &[type="search"] {
padding-inline-start: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem); padding-inline-start: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem);
background-image: var(#{$css-var-prefix}icon-search); background-image: var(#{$css-var-prefix}icon-search);
background-position: center background-position: center
left left
calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 0.125rem); calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 0.125rem);
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
&[aria-invalid] { &[aria-invalid] {
@if $enable-important { @if $enable-important {
padding-inline-start: calc( padding-inline-start: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
) !important; ) !important;
} @else { } @else {
padding-inline-start: calc( padding-inline-start: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
); );
} }
background-position: background-position:
center left 1.125rem, center left 1.125rem,
center right 0.75rem; center right 0.75rem;
} }
&[aria-invalid="false"] { &[aria-invalid="false"] {
background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-valid); background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-valid);
} }
&[aria-invalid="true"] { &[aria-invalid="true"] {
background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-invalid); background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-invalid);
} }
} }
} }
[dir="rtl"] { [dir="rtl"] {
#{$parent-selector} :where(input) { #{$parent-selector} :where(input) {
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) { &:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] { &[type="search"] {
background-position: center right 1.125rem; background-position: center right 1.125rem;
&[aria-invalid] { &[aria-invalid] {
background-position: background-position:
center right 1.125rem, center right 1.125rem,
center left 0.75rem; center left 0.75rem;
} }
} }
} }
} }
} }
} }

488
scss/forms/_validation.scss
View file

@ -1,244 +1,244 @@
@use "sass:map"; @use "sass:map";
@use "../colors/index" as *; @use "../colors/index" as *;
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "forms/validation") { @if map.get($modules, "forms/validation") {
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
input:user-valid:not( input:user-valid:not(
:placeholder-shown, :placeholder-shown,
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="image"], [type="image"],
[type="submit"], [type="submit"],
[type="checkbox"], [type="checkbox"],
[type="radio"] [type="radio"]
), ),
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
input:user-invalid:not( input:user-invalid:not(
:placeholder-shown, :placeholder-shown,
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="image"], [type="image"],
[type="submit"], [type="submit"],
[type="checkbox"], [type="checkbox"],
[type="radio"] [type="radio"]
) { ) {
padding-right: calc(1.5em + 0.75rem); padding-right: calc(1.5em + 0.75rem);
background-position: right calc(0.375em + 0.1875rem) center; background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#{$parent-selector} form:not([novalidate]) select:user-valid:not([multiple], [size]), #{$parent-selector} form:not([novalidate]) select:user-valid:not([multiple], [size]),
#{$parent-selector} form:not([novalidate]) select:user-invalid:not([multiple], [size]) { #{$parent-selector} form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
padding-right: calc(1.5em + 0.75rem); padding-right: calc(1.5em + 0.75rem);
padding-right: 4.2rem; padding-right: 4.2rem;
background-position: background-position:
right 0.75rem center, right 0.75rem center,
center right 2.25rem; center right 2.25rem;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#{$parent-selector} form:not([novalidate]) select:user-invalid:not([multiple], [size]) { #{$parent-selector} form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-invalid); background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-invalid);
} }
#{$parent-selector} form:not([novalidate]) select:user-valid:not([multiple], [size]) { #{$parent-selector} form:not([novalidate]) select:user-valid:not([multiple], [size]) {
background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-valid); background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-valid);
} }
#{$parent-selector} form:not([novalidate]) textarea:user-valid:not(:placeholder-shown), #{$parent-selector} form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
#{$parent-selector} form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) { #{$parent-selector} form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
padding-right: calc(1.5em + 0.75rem); padding-right: calc(1.5em + 0.75rem);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
input:user-invalid:not( input:user-invalid:not(
:placeholder-shown, :placeholder-shown,
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="image"], [type="image"],
[type="submit"], [type="submit"],
[type="checkbox"], [type="checkbox"],
[type="radio"] [type="radio"]
), ),
#{$parent-selector} form:not([novalidate]) select:user-invalid:not([multiple], [size]), #{$parent-selector} form:not([novalidate]) select:user-invalid:not([multiple], [size]),
#{$parent-selector} form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) { #{$parent-selector} form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
border-color: var(#{$css-var-prefix}form-element-invalid-border-color); border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
background-image: var(#{$css-var-prefix}icon-invalid); background-image: var(#{$css-var-prefix}icon-invalid);
&:focus { &:focus {
border-color: var(#{$css-var-prefix}form-element-invalid-active-border-color); border-color: var(#{$css-var-prefix}form-element-invalid-active-border-color);
} }
} }
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
input:user-valid:not( input:user-valid:not(
:placeholder-shown, :placeholder-shown,
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="image"], [type="image"],
[type="submit"], [type="submit"],
[type="checkbox"], [type="checkbox"],
[type="radio"] [type="radio"]
), ),
#{$parent-selector} form:not([novalidate]) select:user-valid:not([multiple], [size]), #{$parent-selector} form:not([novalidate]) select:user-valid:not([multiple], [size]),
#{$parent-selector} form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) { #{$parent-selector} form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
border-color: var(#{$css-var-prefix}form-element-valid-border-color); border-color: var(#{$css-var-prefix}form-element-valid-border-color);
background-image: var(#{$css-var-prefix}icon-valid); background-image: var(#{$css-var-prefix}icon-valid);
&:focus { &:focus {
border-color: var(#{$css-var-prefix}form-element-valid-active-border-color); border-color: var(#{$css-var-prefix}form-element-valid-active-border-color);
} }
} }
#{$parent-selector} form:not([novalidate]) input:required:user-invalid:is([type="checkbox"]) { #{$parent-selector} form:not([novalidate]) input:required:user-invalid:is([type="checkbox"]) {
border-color: var(#{$css-var-prefix}form-element-invalid-border-color); border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
} }
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
input:user-valid:not( input:user-valid:not(
:placeholder-shown, :placeholder-shown,
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="image"], [type="image"],
[type="submit"], [type="submit"],
[type="checkbox"], [type="checkbox"],
[type="radio"] [type="radio"]
) )
+ small[data-valid]::after, + small[data-valid]::after,
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
select:user-valid:not([multiple], [size]) select:user-valid:not([multiple], [size])
+ small[data-valid]::after, + small[data-valid]::after,
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
textarea:user-valid:not(:placeholder-shown) textarea:user-valid:not(:placeholder-shown)
+ small[data-valid]::after { + small[data-valid]::after {
content: attr(data-valid); content: attr(data-valid);
color: var(#{$css-var-prefix}form-element-valid-border-color); color: var(#{$css-var-prefix}form-element-valid-border-color);
} }
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
textarea:user-invalid:not(:placeholder-shown) textarea:user-invalid:not(:placeholder-shown)
+ small[data-invalid]::after, + small[data-invalid]::after,
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
select:user-invalid:not([multiple], [size]) select:user-invalid:not([multiple], [size])
+ small[data-invalid]::after, + small[data-invalid]::after,
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
input:user-invalid:not( input:user-invalid:not(
:placeholder-shown, :placeholder-shown,
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="image"], [type="image"],
[type="submit"], [type="submit"],
[type="checkbox"], [type="checkbox"],
[type="radio"] [type="radio"]
) )
+ [data-invalid]::after, + [data-invalid]::after,
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
input[type="file"]:user-invalid input[type="file"]:user-invalid
+ ul + ul
+ [data-invalid]::after { + [data-invalid]::after {
content: attr(data-invalid); content: attr(data-invalid);
color: var(#{$css-var-prefix}form-element-invalid-border-color); color: var(#{$css-var-prefix}form-element-invalid-border-color);
} }
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
input:user-valid:not( input:user-valid:not(
:placeholder-shown, :placeholder-shown,
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="image"], [type="image"],
[type="submit"], [type="submit"],
[type="checkbox"], [type="checkbox"],
[type="radio"] [type="radio"]
) )
+ [data-valid]::after, + [data-valid]::after,
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
input:user-invalid:not( input:user-invalid:not(
:placeholder-shown, :placeholder-shown,
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="submit"], [type="submit"],
[type="checkbox"], [type="checkbox"],
[type="radio"] [type="radio"]
) )
+ [data-invalid]::after, + [data-invalid]::after,
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
textarea:user-valid:not(:placeholder-shown) textarea:user-valid:not(:placeholder-shown)
+ [data-valid]::after, + [data-valid]::after,
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
input[type="file"]:user-invalid input[type="file"]:user-invalid
+ [data-invalid]::after, + [data-invalid]::after,
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
input[type="file"]:user-invalid input[type="file"]:user-invalid
+ ul + ul
+ [data-invalid]::after { + [data-invalid]::after {
display: block; display: block;
} }
#{$parent-selector} #{$parent-selector}
form:not([novalidate]) form:not([novalidate])
input[type="file"]:user-invalid input[type="file"]:user-invalid
+ ul + ul
+ [data-invalid]::after { + [data-invalid]::after {
position: relative; position: relative;
top: -2rem; top: -2rem;
} }
// the file btn // the file btn
#{$parent-selector} form:not([novalidate]) input[type="file"]:user-invalid::file-selector-button { #{$parent-selector} form:not([novalidate]) input[type="file"]:user-invalid::file-selector-button {
border-color: var(#{$css-var-prefix}form-element-invalid-border-color); border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
background-color: var(#{$css-var-prefix}form-element-invalid-border-color); background-color: var(#{$css-var-prefix}form-element-invalid-border-color);
} }
/* File list when selected from the file input */ /* File list when selected from the file input */
#{$parent-selector} .file-list { #{$parent-selector} .file-list {
padding-left: 0; padding-left: 0;
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
list-style-type: none; list-style-type: none;
text-align: center; text-align: center;
&:nth-child(2n) { &:nth-child(2n) {
background-color: $grey-900; background-color: $grey-900;
} }
&:hover { &:hover {
background-color: var(#{$css-var-prefix}muted-border-color); background-color: var(#{$css-var-prefix}muted-border-color);
} }
.btn-file-rm { .btn-file-rm {
display: inline-block; display: inline-block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-right: 10px; margin-right: 10px;
padding: 0; padding: 0;
padding-top: calc(var(#{$css-var-prefix}spacing) * 0.25); padding-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
border: none; border: none;
background-image: var(#{$css-var-prefix}icon-red-close); background-image: var(#{$css-var-prefix}icon-red-close);
background-position: center; background-position: center;
background-size: 1rem; background-size: 1rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: transparent; background-color: transparent;
color: var(#{$css-var-prefix}element-invalid-border-color); color: var(#{$css-var-prefix}element-invalid-border-color);
opacity: 0.5; opacity: 0.5;
transition: opacity var(#{$css-var-prefix}transition); transition: opacity var(#{$css-var-prefix}transition);
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
} }
} }
} }
} }

8
scss/helpers/_copyright.scss
View file

@ -1,4 +1,4 @@
/*! /*!
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS) * Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
* Copyright 2019-2024 - Licensed under MIT * Copyright 2019-2024 - Licensed under MIT
*/ */

148
scss/helpers/_functions.scss
View file

@ -1,74 +1,74 @@
@use "sass:color"; @use "sass:color";
@use "sass:string"; @use "sass:string";
// Display color as RGB // Display color as RGB
@function display-rgb($color) { @function display-rgb($color) {
@return string.unquote( @return string.unquote(
"rgb(" + color.channel($color, "red", $space: rgb) + ", " + "rgb(" + color.channel($color, "red", $space: rgb) + ", " +
color.channel($color, "green", $space: rgb) + ", " + color.channel($color, "green", $space: rgb) + ", " +
color.channel($color, "blue", $space: rgb) + ")" color.channel($color, "blue", $space: rgb) + ")"
); );
} }
// Generate a shadow layer // Generate a shadow layer
@function shadow-layer($elevation, $blur, $opacity, $color) { @function shadow-layer($elevation, $blur, $opacity, $color) {
@return #{($elevation * 0.5)} #{$elevation} #{$blur} #{rgba($color, $opacity)}; @return #{($elevation * 0.5)} #{$elevation} #{$blur} #{rgba($color, $opacity)};
} }
// Generate a shadow with 7 layers // Generate a shadow with 7 layers
@function shadow($color) { @function shadow($color) {
$box-shadow-elevation: 1rem; $box-shadow-elevation: 1rem;
$box-shadow-blur-strength: 6rem; $box-shadow-blur-strength: 6rem;
$box-shadow-opacity: 0.06; $box-shadow-opacity: 0.06;
@return shadow-layer( @return shadow-layer(
$box-shadow-elevation * 0.029, $box-shadow-elevation * 0.029,
$box-shadow-blur-strength * 0.029, $box-shadow-blur-strength * 0.029,
$box-shadow-opacity * 0.283, $box-shadow-opacity * 0.283,
$color $color
), ),
shadow-layer( shadow-layer(
$box-shadow-elevation * 0.067, $box-shadow-elevation * 0.067,
$box-shadow-blur-strength * 0.067, $box-shadow-blur-strength * 0.067,
$box-shadow-opacity * 0.4, $box-shadow-opacity * 0.4,
$color $color
), ),
shadow-layer( shadow-layer(
$box-shadow-elevation * 0.125, $box-shadow-elevation * 0.125,
$box-shadow-blur-strength * 0.125, $box-shadow-blur-strength * 0.125,
$box-shadow-opacity * 0.5, $box-shadow-opacity * 0.5,
$color $color
), ),
shadow-layer( shadow-layer(
$box-shadow-elevation * 0.225, $box-shadow-elevation * 0.225,
$box-shadow-blur-strength * 0.225, $box-shadow-blur-strength * 0.225,
$box-shadow-opacity * 0.6, $box-shadow-opacity * 0.6,
$color $color
), ),
shadow-layer( shadow-layer(
$box-shadow-elevation * 0.417, $box-shadow-elevation * 0.417,
$box-shadow-blur-strength * 0.417, $box-shadow-blur-strength * 0.417,
$box-shadow-opacity * 0.717, $box-shadow-opacity * 0.717,
$color $color
), ),
shadow-layer($box-shadow-elevation, $box-shadow-blur-strength, $box-shadow-opacity, $color), shadow-layer($box-shadow-elevation, $box-shadow-blur-strength, $box-shadow-opacity, $color),
0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))}; 0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))};
} }
// tint-color, shade-color, and shift-color // tint-color, shade-color, and shift-color
// borrowed from Bootstrap 5.3.3 // borrowed from Bootstrap 5.3.3
// MIT License github.com/twbs/bootstrap // MIT License github.com/twbs/bootstrap
// Tint a color: mix a color with white // Tint a color: mix a color with white
@function tint-color($color, $weight) { @function tint-color($color, $weight) {
@return mix(white, $color, $weight); @return mix(white, $color, $weight);
} }
// Shade a color: mix a color with black // Shade a color: mix a color with black
@function shade-color($color, $weight) { @function shade-color($color, $weight) {
@return mix(black, $color, $weight); @return mix(black, $color, $weight);
} }
// Shade the color if the weight is positive, else tint it // Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) { @function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight)); @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
} }

66
scss/layout/_container.scss
View file

@ -1,33 +1,33 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "layout/container") and $enable-classes { @if map.get($modules, "layout/container") and $enable-classes {
/** /**
* Container * Container
*/ */
#{$parent-selector} .container, #{$parent-selector} .container,
#{$parent-selector} .container-fluid { #{$parent-selector} .container-fluid {
width: 100%; width: 100%;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
padding-right: var(#{$css-var-prefix}spacing); padding-right: var(#{$css-var-prefix}spacing);
padding-left: var(#{$css-var-prefix}spacing); padding-left: var(#{$css-var-prefix}spacing);
} }
#{$parent-selector} .container { #{$parent-selector} .container {
$first-breakpoint: true; $first-breakpoint: true;
@each $key, $values in $breakpoints { @each $key, $values in $breakpoints {
@if $values { @if $values {
@media (min-width: map.get($values, "breakpoint")) { @media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport"); max-width: map.get($values, "viewport");
@if $first-breakpoint { @if $first-breakpoint {
$first-breakpoint: false; $first-breakpoint: false;
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
} }
} }
} }
} }
} }
} }

106
scss/layout/_document.scss
View file

@ -1,53 +1,53 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "layout/document") { @if map.get($modules, "layout/document") {
/** /**
* Document * Document
* Content-box & Responsive typography * Content-box & Responsive typography
*/ */
// Reboot based on : // Reboot 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 v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Add border box sizing in all browsers (opinionated) // 1. Add border box sizing in all browsers (opinionated)
// 2. Backgrounds do not repeat by default (opinionated) // 2. Backgrounds do not repeat by default (opinionated)
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: border-box; // 1 box-sizing: border-box; // 1
background-repeat: no-repeat; // 2 background-repeat: no-repeat; // 2
} }
// 1. Add text decoration inheritance in all browsers (opinionated) // 1. Add text decoration inheritance in all browsers (opinionated)
// 2. Add vertical alignment inheritance in all browsers (opinionated) // 2. Add vertical alignment inheritance in all browsers (opinionated)
::before, ::before,
::after { ::after {
text-decoration: inherit; // 1 text-decoration: inherit; // 1
vertical-align: inherit; // 2 vertical-align: inherit; // 2
} }
// 1. Change the line height in all browsers (opinionated) // 1. Change the line height in all browsers (opinionated)
// 2. Breaks words to prevent overflow in all browsers (opinionated) // 2. Breaks words to prevent overflow in all browsers (opinionated)
// 3. Use a 4-space tab width in all browsers (opinionated) // 3. Use a 4-space tab width in all browsers (opinionated)
// 4. Remove the grey highlight on links in iOS (opinionated) // 4. Remove the grey highlight on links in iOS (opinionated)
// 5. Prevent adjustments of font size after orientation changes in iOS // 5. Prevent adjustments of font size after orientation changes in iOS
:where(:root), :where(:root),
:where(:host) { :where(:host) {
-webkit-tap-highlight-color: transparent; // 4 -webkit-tap-highlight-color: transparent; // 4
-webkit-text-size-adjust: 100%; // 5 -webkit-text-size-adjust: 100%; // 5
text-size-adjust: 100%; // 5 text-size-adjust: 100%; // 5
background-color: var(#{$css-var-prefix}background-color); background-color: var(#{$css-var-prefix}background-color);
color: var(#{$css-var-prefix}color); color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$css-var-prefix}font-size); font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$css-var-prefix}line-height); // 1 line-height: var(#{$css-var-prefix}line-height); // 1
font-family: var(#{$css-var-prefix}font-family); font-family: var(#{$css-var-prefix}font-family);
text-underline-offset: var(#{$css-var-prefix}text-underline-offset); text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
overflow-wrap: break-word; // 2 overflow-wrap: break-word; // 2
tab-size: 2; // 3 tab-size: 2; // 3
} }
} }

52
scss/layout/_grid.scss
View file

@ -1,26 +1,26 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "layout/grid") and $enable-classes { @if map.get($modules, "layout/grid") and $enable-classes {
/** /**
* Grid * Grid
* Minimal grid system with auto-layout columns * Minimal grid system with auto-layout columns
*/ */
#{$parent-selector} .grid { #{$parent-selector} .grid {
grid-column-gap: var(#{$css-var-prefix}grid-column-gap); grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
grid-row-gap: var(#{$css-var-prefix}grid-row-gap); grid-row-gap: var(#{$css-var-prefix}grid-row-gap);
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@if map.get($breakpoints, "md") { @if map.get($breakpoints, "md") {
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) { @media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
} }
} }
& > * { & > * {
min-width: 0; // HACK for children in overflow min-width: 0; // HACK for children in overflow
} }
} }
} }

134
scss/layout/_landmarks.scss
View file

@ -1,67 +1,67 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "layout/landmarks") { @if map.get($modules, "layout/landmarks") {
/** /**
* Landmarks * Landmarks
*/ */
// Reboot based on : // Reboot 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 v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// add smooth scrolling // add smooth scrolling
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
// 1. Remove the margin in all browsers (opinionated) // 1. Remove the margin in all browsers (opinionated)
body { body {
width: 100%; width: 100%;
margin: 0; // 1 margin: 0; // 1
} }
// Render the `main` element consistently in IE // Render the `main` element consistently in IE
main { main {
display: block; display: block;
} }
// Pico // Pico
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} #{$semantic-root-element} { #{$parent-selector} #{$semantic-root-element} {
> header, > header,
> main, > main,
> footer { > footer {
// <header>, <main>, <footer> as containers // <header>, <main>, <footer> as containers
@if $enable-semantic-container { @if $enable-semantic-container {
$first-breakpoint: true; $first-breakpoint: true;
width: 100%; width: 100%;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
padding: var(#{$css-var-prefix}block-spacing-vertical) padding: var(#{$css-var-prefix}block-spacing-vertical)
var(#{$css-var-prefix}block-spacing-horizontal); var(#{$css-var-prefix}block-spacing-horizontal);
@if $enable-viewport { @if $enable-viewport {
@each $key, $values in $breakpoints { @each $key, $values in $breakpoints {
@if $values { @if $values {
@media (min-width: map.get($values, "breakpoint")) { @media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport"); max-width: map.get($values, "viewport");
@if $first-breakpoint { @if $first-breakpoint {
$first-breakpoint: false; $first-breakpoint: false;
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
} }
} }
} }
} }
} }
} }
// Regular vertical spacings for <header>, <main>, <footer> // Regular vertical spacings for <header>, <main>, <footer>
@else { @else {
padding-block: var(#{$css-var-prefix}block-spacing-vertical); padding-block: var(#{$css-var-prefix}block-spacing-vertical);
} }
} }
} }
} }

24
scss/layout/_overflow-auto.scss
View file

@ -1,12 +1,12 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "layout/overflow-auto") and $enable-classes { @if map.get($modules, "layout/overflow-auto") and $enable-classes {
/** /**
* Overflow auto * Overflow auto
*/ */
#{$parent-selector} .overflow-auto { #{$parent-selector} .overflow-auto {
overflow: auto; overflow: auto;
} }
} }

210
scss/layout/_row.scss
View file

@ -1,105 +1,105 @@
@use "sass:string"; @use "sass:string";
@use "sass:map"; @use "sass:map";
@use "sass:math"; @use "sass:math";
@use "../settings" as *; // for spacing, breakpoints, and if columns are defined. @use "../settings" as *; // for spacing, breakpoints, and if columns are defined.
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */ /* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
@if map.get($modules, "layout/row") and $enable-classes { @if map.get($modules, "layout/row") and $enable-classes {
$helper-cols: ""; $helper-cols: "";
$helper-offset: ""; $helper-offset: "";
/*--- CSS Grid ---*/ /*--- CSS Grid ---*/
#{$parent-selector} .row-fluid, #{$parent-selector} .row-fluid,
#{$parent-selector} .row { #{$parent-selector} .row {
display: grid; display: grid;
grid-template-columns: repeat($row-columns, 1fr); grid-template-columns: repeat($row-columns, 1fr);
gap: var(#{$css-var-prefix}grid-row-gap) var(#{$css-var-prefix}grid-column-gap); gap: var(#{$css-var-prefix}grid-row-gap) var(#{$css-var-prefix}grid-column-gap);
&.align-center { &.align-center {
align-items: center; align-items: center;
} }
&.align-start { &.align-start {
align-items: start; align-items: start;
} }
&.align-end { &.align-end {
align-items: end; align-items: end;
} }
> [class*="col"] > *, > [class*="col"] > *,
> [class|="col"] > *, > [class|="col"] > *,
> [class~="col"] > * { > [class~="col"] > * {
margin: var(#{$css-var-prefix}block-spacing-vertical) auto; margin: var(#{$css-var-prefix}block-spacing-vertical) auto;
} }
} }
#{$parent-selector} .row { #{$parent-selector} .row {
max-width: map.get(map.get($breakpoints, "xl"), "viewport"); max-width: map.get(map.get($breakpoints, "xl"), "viewport");
margin: 0 auto; margin: 0 auto;
} }
/* Defining columns spans and offsets */ /* Defining columns spans and offsets */
// Loop through all column spans and define the .grid-column-end number // Loop through all column spans and define the .grid-column-end number
@for $col from 1 through $row-columns { @for $col from 1 through $row-columns {
#{$parent-selector} .col-#{$col} { #{$parent-selector} .col-#{$col} {
grid-column-end: span $col; grid-column-end: span $col;
} }
@if $col == 1 { @if $col == 1 {
$helper-cols: ".col-1"; $helper-cols: ".col-1";
} @else { } @else {
$helper-cols: #{$helper-cols} + ", #{$parent-selector} .col-" + #{$col}; $helper-cols: #{$helper-cols} + ", #{$parent-selector} .col-" + #{$col};
} }
} }
// Loop through all column offsets and define the .grid-column-start number // Loop through all column offsets and define the .grid-column-start number
@for $offset from 0 through $row-columns - 1 { @for $offset from 0 through $row-columns - 1 {
#{$parent-selector} .offset-#{$offset} { #{$parent-selector} .offset-#{$offset} {
grid-column-start: $offset + 1; grid-column-start: $offset + 1;
} }
@if $offset == 0 { @if $offset == 0 {
$helper-offset: ".offset-0"; $helper-offset: ".offset-0";
} @else { } @else {
$helper-offset: #{$helper-offset} + ", .offset-" + #{$offset}; $helper-offset: #{$helper-offset} + ", .offset-" + #{$offset};
} }
} }
// Defines media queries for each breakpoint and loops through both spans // Defines media queries for each breakpoint and loops through both spans
// and offsets to set grid-column-end and grid-column-start // and offsets to set grid-column-end and grid-column-start
// Loop through breakpoints and generate media queries // Loop through breakpoints and generate media queries
@each $breakpoint, $values in $breakpoints { @each $breakpoint, $values in $breakpoints {
@if $values { @if $values {
@media (min-width: map.get($values, "viewport")) { @media (min-width: map.get($values, "viewport")) {
@for $col from 1 through $row-columns { @for $col from 1 through $row-columns {
#{$parent-selector} .col-#{$breakpoint}-#{$col} { #{$parent-selector} .col-#{$breakpoint}-#{$col} {
grid-column-end: span $col; grid-column-end: span $col;
} }
@if ($breakpoint != "sm") { @if ($breakpoint != "sm") {
$helper-cols: #{$helper-cols} + $helper-cols: #{$helper-cols} +
", #{$parent-selector} .col-" + ", #{$parent-selector} .col-" +
#{$breakpoint} + #{$breakpoint} +
"-" + "-" +
#{$col}; #{$col};
} }
} }
@for $offset from 0 through $row-columns - 1 { @for $offset from 0 through $row-columns - 1 {
#{$parent-selector} .offset-#{$breakpoint}-#{$offset} { #{$parent-selector} .offset-#{$breakpoint}-#{$offset} {
grid-column-start: $offset + 1; grid-column-start: $offset + 1;
} }
@if ($breakpoint != "sm") { @if ($breakpoint != "sm") {
$helper-offset: #{$helper-offset} + ", .offset-" + #{$breakpoint} + "-" + #{$offset}; $helper-offset: #{$helper-offset} + ", .offset-" + #{$breakpoint} + "-" + #{$offset};
} }
} }
} }
} }
} }
/* CSS Grid Media Queries */ /* CSS Grid Media Queries */
// Sets the columns to be col-12 with a starting column of 1 // Sets the columns to be col-12 with a starting column of 1
$sm-size: map.get(map.get($breakpoints, "sm"), "viewport"); $sm-size: map.get(map.get($breakpoints, "sm"), "viewport");
@media (max-width: $sm-size) { @media (max-width: $sm-size) {
//[class*="col-"] { //[class*="col-"] {
#{$helper-cols} { #{$helper-cols} {
grid-column-end: span $row-columns; grid-column-end: span $row-columns;
} }
//[class*="offset-"] { //[class*="offset-"] {
#{$helper-offset} { #{$helper-offset} {
grid-column-start: 1; grid-column-start: 1;
} }
} }
} }

24
scss/layout/_section.scss
View file

@ -1,12 +1,12 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "layout/section") { @if map.get($modules, "layout/section") {
/** /**
* Section * Section
*/ */
#{$parent-selector} section { #{$parent-selector} section {
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical); margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
} }
} }

10
scss/pico.classless.scss
View file

@ -1,5 +1,5 @@
// Pico classless version // Pico classless version
@use "index" with ( @use "index" with (
$enable-semantic-container: true, $enable-semantic-container: true,
$enable-classes: false $enable-classes: false
); );

4
scss/pico.colors.scss
View file

@ -1,2 +1,2 @@
@use "helpers/copyright"; @use "helpers/copyright";
@use "colors/utilities"; @use "colors/utilities";

8
scss/pico.conditional.scss
View file

@ -1,4 +1,4 @@
// Pico conditional version // Pico conditional version
@use "index" with ( @use "index" with (
$parent-selector: ".pico" $parent-selector: ".pico"
); );

14
scss/pico.fluid.classless.conditional.scss
View file

@ -1,7 +1,7 @@
// Pico fluid classless conditional version // Pico fluid classless conditional version
@use "../scss" with ( @use "../scss" with (
$enable-semantic-container: true, $enable-semantic-container: true,
$enable-viewport: false, $enable-viewport: false,
$enable-classes: false, $enable-classes: false,
$parent-selector: ".pico" $parent-selector: ".pico"
); );

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

@ -1,6 +1,6 @@
// Pico fluid classless version // Pico fluid classless version
@use "index" with ( @use "index" with (
$enable-semantic-container: true, $enable-semantic-container: true,
$enable-viewport: false, $enable-viewport: false,
$enable-classes: false $enable-classes: false
); );

4
scss/pico.scss
View file

@ -1,2 +1,2 @@
@forward "settings"; @forward "settings";
@use "index"; @use "index";

10
scss/themes/_default.scss
View file

@ -1,5 +1,5 @@
// Styles // Styles
@use "default/styles"; @use "default/styles";
// Colors schemes // Colors schemes
@use "default/schemes"; @use "default/schemes";

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

@ -1,331 +1,331 @@
@use "sass:map"; @use "sass:map";
@use "sass:color"; @use "sass:color";
@use "../../colors" as *; @use "../../colors" as *;
@use "../../settings" as *; @use "../../settings" as *;
@use "../../helpers/functions"; @use "../../helpers/functions";
@use "theme-colors"; @use "theme-colors";
// Default: Dark theme // Default: Dark theme
@mixin theme { @mixin theme {
color-scheme: dark; color-scheme: dark;
#{$css-var-prefix}background-color: #{color.mix($slate-950, $slate-900)}; #{$css-var-prefix}background-color: #{color.mix($slate-950, $slate-900)};
// Text color // Text color
#{$css-var-prefix}color: #{$zinc-200}; #{$css-var-prefix}color: #{$zinc-200};
// Text selection color // Text selection color
#{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "dark"); #{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "dark");
// Muted colors // Muted colors
#{$css-var-prefix}muted-color: #{$zinc-450}; #{$css-var-prefix}muted-color: #{$zinc-450};
#{$css-var-prefix}muted-border-color: #{$slate-850}; #{$css-var-prefix}muted-border-color: #{$slate-850};
// Primary colors // Primary colors
#{$css-var-prefix}primary: theme-colors.get("primary", "dark"); #{$css-var-prefix}primary: theme-colors.get("primary", "dark");
#{$css-var-prefix}primary-background: theme-colors.get("primary-background", "dark"); #{$css-var-prefix}primary-background: theme-colors.get("primary-background", "dark");
#{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background); #{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "dark"); #{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "dark");
#{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "dark"); #{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "dark");
#{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "dark"); #{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "dark");
#{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background); #{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
#{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover); #{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "dark"); #{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "dark");
#{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "dark"); #{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "dark");
// Secondary colors // Secondary colors
#{$css-var-prefix}secondary: #{$zinc-350}; #{$css-var-prefix}secondary: #{$zinc-350};
#{$css-var-prefix}secondary-background: #{$slate-600}; #{$css-var-prefix}secondary-background: #{$slate-600};
#{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background); #{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}secondary-underline: #{rgba($zinc-350, 0.5)}; #{$css-var-prefix}secondary-underline: #{rgba($zinc-350, 0.5)};
#{$css-var-prefix}secondary-hover: #{$zinc-250}; #{$css-var-prefix}secondary-hover: #{$zinc-250};
#{$css-var-prefix}secondary-hover-background: #{$slate-550}; #{$css-var-prefix}secondary-hover-background: #{$slate-550};
#{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background); #{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover); #{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}secondary-focus: #{rgba($slate-350, 0.25)}; #{$css-var-prefix}secondary-focus: #{rgba($slate-350, 0.25)};
#{$css-var-prefix}secondary-inverse: #{$white}; #{$css-var-prefix}secondary-inverse: #{$white};
// Contrast colors // Contrast colors
#{$css-var-prefix}contrast: #{$slate-100}; #{$css-var-prefix}contrast: #{$slate-100};
#{$css-var-prefix}contrast-background: #{$slate-50}; #{$css-var-prefix}contrast-background: #{$slate-50};
#{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background); #{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}contrast-underline: #{rgba($slate-100, 0.5)}; #{$css-var-prefix}contrast-underline: #{rgba($slate-100, 0.5)};
#{$css-var-prefix}contrast-hover: #{$white}; #{$css-var-prefix}contrast-hover: #{$white};
#{$css-var-prefix}contrast-hover-background: #{$white}; #{$css-var-prefix}contrast-hover-background: #{$white};
#{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background); #{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
#{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}contrast-hover); #{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}contrast-hover);
#{$css-var-prefix}contrast-focus: #{rgba($slate-150, 0.25)}; #{$css-var-prefix}contrast-focus: #{rgba($slate-150, 0.25)};
#{$css-var-prefix}contrast-inverse: #{$black}; #{$css-var-prefix}contrast-inverse: #{$black};
// Box shadow // Box shadow
#{$css-var-prefix}box-shadow: functions.shadow(color.mix($black, $slate-950)); #{$css-var-prefix}box-shadow: functions.shadow(color.mix($black, $slate-950));
// Make Accent Colors // Make Accent Colors
// colors used in: dropdowns, modals, cards, // colors used in: dropdowns, modals, cards,
// blockquote, tabs, timeline, ect // blockquote, tabs, timeline, ect
#{$css-var-prefix}accent-bg-color: #{$slate-900}; #{$css-var-prefix}accent-bg-color: #{$slate-900};
#{$css-var-prefix}accent-section-bg-color: #{color.mix($slate-900, $slate-850, 75%)}; #{$css-var-prefix}accent-section-bg-color: #{color.mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}accent-border-color: var(#{$css-var-prefix}muted-border-color); #{$css-var-prefix}accent-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}accent-box-shadow: var(#{$css-var-prefix}box-shadow); #{$css-var-prefix}accent-box-shadow: var(#{$css-var-prefix}box-shadow);
// Typography // Typography
@if map.get($modules, "content/typography") { @if map.get($modules, "content/typography") {
// Headings colors // Headings colors
#{$css-var-prefix}h1-color: #{$zinc-50}; #{$css-var-prefix}h1-color: #{$zinc-50};
#{$css-var-prefix}h2-color: #{$zinc-100}; #{$css-var-prefix}h2-color: #{$zinc-100};
#{$css-var-prefix}h3-color: #{$zinc-200}; #{$css-var-prefix}h3-color: #{$zinc-200};
#{$css-var-prefix}h4-color: #{$zinc-250}; #{$css-var-prefix}h4-color: #{$zinc-250};
#{$css-var-prefix}h5-color: #{$zinc-300}; #{$css-var-prefix}h5-color: #{$zinc-300};
#{$css-var-prefix}h6-color: #{$zinc-400}; #{$css-var-prefix}h6-color: #{$zinc-400};
// Highlighted text (<mark>) // Highlighted text (<mark>)
#{$css-var-prefix}mark-background-color: #{$azure-750}; #{$css-var-prefix}mark-background-color: #{$azure-750};
#{$css-var-prefix}mark-color: #{$white}; #{$css-var-prefix}mark-color: #{$white};
// Inserted (<ins>) & Deleted (<del>) // Inserted (<ins>) & Deleted (<del>)
#{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-200)}; #{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-200)};
#{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-200)}; #{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-200)};
// Blockquote // Blockquote
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color); #{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color); #{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
} }
// Button // Button
@if map.get($modules, "content/button") { @if map.get($modules, "content/button") {
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)' // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc. // Don't use, 'none, 'false, 'null', '0', etc.
#{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); #{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); #{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
} }
// Table // Table
@if map.get($modules, "content/table") { @if map.get($modules, "content/table") {
#{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color); #{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)}; #{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
} }
// Code // Code
@if map.get($modules, "content/code") { @if map.get($modules, "content/code") {
#{$css-var-prefix}code-background-color: #{color.mix($slate-900, $slate-850, 75%)}; #{$css-var-prefix}code-background-color: #{color.mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}code-color: #{$zinc-400}; #{$css-var-prefix}code-color: #{$zinc-400};
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color); #{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color); #{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
} }
// Form elements // Form elements
@if map.get($modules, "forms/basics") { @if map.get($modules, "forms/basics") {
#{$css-var-prefix}form-element-background-color: #{color.mix($slate-900, $slate-850)}; #{$css-var-prefix}form-element-background-color: #{color.mix($slate-900, $slate-850)};
#{$css-var-prefix}form-element-selected-background-color: #{$slate-800}; #{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
#{$css-var-prefix}form-element-border-color: #{$slate-800}; #{$css-var-prefix}form-element-border-color: #{$slate-800};
#{$css-var-prefix}form-element-color: #{$zinc-100}; #{$css-var-prefix}form-element-color: #{$zinc-100};
#{$css-var-prefix}form-element-placeholder-color: #{$zinc-400}; #{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
#{$css-var-prefix}form-element-active-background-color: #{color.mix( #{$css-var-prefix}form-element-active-background-color: #{color.mix(
$slate-900, $slate-900,
$slate-850, $slate-850,
75% 75%
)}; )};
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border); #{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border); #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-disabled-opacity: 0.5; #{$css-var-prefix}form-element-disabled-opacity: 0.5;
#{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $slate-600)}; #{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $slate-600)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix( #{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix(
$red-500, $red-500,
$slate-600, $slate-600,
75% 75%
)}; )};
#{$css-var-prefix}form-element-invalid-focus-color: var( #{$css-var-prefix}form-element-invalid-focus-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color #{$css-var-prefix}form-element-invalid-active-border-color
); );
#{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $slate-600)}; #{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $slate-600)};
#{$css-var-prefix}form-element-valid-active-border-color: #{color.mix( #{$css-var-prefix}form-element-valid-active-border-color: #{color.mix(
$jade-450, $jade-450,
$slate-600, $slate-600,
75% 75%
)}; )};
#{$css-var-prefix}form-element-valid-focus-color: var( #{$css-var-prefix}form-element-valid-focus-color: var(
#{$css-var-prefix}form-element-valid-active-border-color #{$css-var-prefix}form-element-valid-active-border-color
); );
} }
// Switch (input[type="checkbox"][role="switch"]) // Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") { @if map.get($modules, "forms/checkbox-radio-switch") {
#{$css-var-prefix}switch-background-color: #{$slate-750}; #{$css-var-prefix}switch-background-color: #{$slate-750};
#{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background); #{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}switch-color: #{$white}; #{$css-var-prefix}switch-color: #{$white};
#{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "dark"); #{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "dark");
} }
// Range (input[type="range"]) // Range (input[type="range"])
@if map.get($modules, "forms/input-range") { @if map.get($modules, "forms/input-range") {
#{$css-var-prefix}range-border-color: #{$slate-850}; #{$css-var-prefix}range-border-color: #{$slate-850};
#{$css-var-prefix}range-active-border-color: #{$slate-800}; #{$css-var-prefix}range-active-border-color: #{$slate-800};
#{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color); #{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background); #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background); #{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
} }
// Accordion (<details>) // Accordion (<details>)
@if map.get($modules, "components/accordion") { @if map.get($modules, "components/accordion") {
#{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color); #{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover); #{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color); #{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color); #{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
} }
// Card (<article>) // Card (<article>)
@if map.get($modules, "components/card") { @if map.get($modules, "components/card") {
#{$css-var-prefix}card-background-color: #{$slate-900}; #{$css-var-prefix}card-background-color: #{$slate-900};
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color); #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow); #{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}card-sectioning-background-color: #{color.mix($slate-900, $slate-850, 75%)}; #{$css-var-prefix}card-sectioning-background-color: #{color.mix($slate-900, $slate-850, 75%)};
} }
// Dropdown (details.dropdown) // Dropdown (details.dropdown)
@if map.get($modules, "components/dropdown") and $enable-classes { @if map.get($modules, "components/dropdown") and $enable-classes {
#{$css-var-prefix}dropdown-background-color: #{$slate-900}; #{$css-var-prefix}dropdown-background-color: #{$slate-900};
#{$css-var-prefix}dropdown-border-color: #{$slate-850}; #{$css-var-prefix}dropdown-border-color: #{$slate-850};
#{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow); #{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color); #{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}dropdown-hover-background-color: #{$slate-850}; #{$css-var-prefix}dropdown-hover-background-color: #{$slate-850};
} }
// Loading ([aria-busy=true]) // Loading ([aria-busy=true])
@if map.get($modules, "components/loading") { @if map.get($modules, "components/loading") {
#{$css-var-prefix}loading-spinner-opacity: 0.5; #{$css-var-prefix}loading-spinner-opacity: 0.5;
// Loading icon (animated) // Loading icon (animated)
// Change the icon color to black for .contrast buttons // Change the icon color to black for .contrast buttons
@if $enable-classes { @if $enable-classes {
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea) { #{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
&.contrast:is( &.contrast:is(
button, button,
[type="submit"], [type="submit"],
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[role="button"] [role="button"]
):not(.outline) { ):not(.outline) {
&::before { &::before {
filter: brightness(0); filter: brightness(0);
} }
} }
} }
} }
} }
// Modal (<dialog>) // Modal (<dialog>)
@if map.get($modules, "components/modal") { @if map.get($modules, "components/modal") {
#{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($black, $zinc-950), 0.75)}; #{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($black, $zinc-950), 0.75)};
} }
// Progress // Progress
@if map.get($modules, "components/progress") { @if map.get($modules, "components/progress") {
#{$css-var-prefix}progress-background-color: #{$slate-850}; #{$css-var-prefix}progress-background-color: #{$slate-850};
#{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background); #{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
} }
// Tooltip ([data-tooltip]) // Tooltip ([data-tooltip])
@if map.get($modules, "components/tooltip") { @if map.get($modules, "components/tooltip") {
#{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-inverse); #{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-inverse);
#{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-background); #{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-background);
} }
// Form validation icons // Form validation icons
@if map.get($modules, "forms/basics") { @if map.get($modules, "forms/basics") {
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); #{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); #{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
// Focus for buttons, radio and select // Focus for buttons, radio and select
@if map.get($modules, "forms/basics") { @if map.get($modules, "forms/basics") {
input:is( input:is(
[type="submit"], [type="submit"],
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="checkbox"], [type="checkbox"],
[type="radio"], [type="radio"],
[type="file"] [type="file"]
) { ) {
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus); #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
} }
} }
// Yohn, I think I took care of this in the _styles.scss // Yohn, I think I took care of this in the _styles.scss
// Chevron icons // Chevron icons
//@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") { //@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
// // Change the icon color to black for accordion and dropdown .contrast buttons // // Change the icon color to black for accordion and dropdown .contrast buttons
// @if $enable-classes { // @if $enable-classes {
// #{$parent-selector} details { // #{$parent-selector} details {
// summary { // summary {
// &[role="button"].contrast:not(.outline) { // &[role="button"].contrast:not(.outline) {
// &::after { // &::after {
// filter: brightness(0); // filter: brightness(0);
// } // }
// } // }
// } // }
// } // }
// } // }
//} //}
// Chevron icons // Chevron icons
// Change the icon color to white for accordion and dropdown buttons // Change the icon color to white for accordion and dropdown buttons
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") { @if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
#{$parent-selector} details { #{$parent-selector} details {
summary { summary {
$selector: '&[role="button"]'; $selector: '&[role="button"]';
@if $enable-classes { @if $enable-classes {
$selector: "#{$selector}:not(.outline,.contrast,.secondary)"; $selector: "#{$selector}:not(.outline,.contrast,.secondary)";
} }
#{$selector} { #{$selector} {
&::after { &::after {
@if theme-colors.get("primary-inverse", "dark") == $black { @if theme-colors.get("primary-inverse", "dark") == $black {
filter: brightness(100) invert(1); filter: brightness(100) invert(1);
} @else { } @else {
filter: brightness(100) invert(0); filter: brightness(100) invert(0);
} }
} }
} }
@if $enable-classes { @if $enable-classes {
&.secondary[role="button"]::after { &.secondary[role="button"]::after {
filter: brightness(100) invert(0); filter: brightness(100) invert(0);
} }
&.contrast[role="button"]::after { &.contrast[role="button"]::after {
filter: brightness(100) invert(1); filter: brightness(100) invert(1);
} }
} }
} }
} }
} }
// Loading icon (animated) // Loading icon (animated)
@if map.get($modules, "components/loading") { @if map.get($modules, "components/loading") {
// Change the icon color to white for buttons // Change the icon color to white for buttons
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) { #{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) {
$selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])'; $selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
@if $enable-classes { @if $enable-classes {
$selector: "#{$selector}:not(.outline)"; $selector: "#{$selector}:not(.outline)";
} }
#{$selector} { #{$selector} {
&::before { &::before {
@if theme-colors.get("primary-inverse", "dark") == $white { @if theme-colors.get("primary-inverse", "dark") == $white {
filter: brightness(100) invert(1); filter: brightness(100) invert(1);
} @else { } @else {
filter: brightness(100) invert(0); filter: brightness(100) invert(0);
} }
} }
} }
} }
} }
// Timeline // Timeline
@if map.get($modules, "components/timeline") { @if map.get($modules, "components/timeline") {
#{$css-var-prefix}timeline-line-color: var(#{$css-var-prefix}primary-background); #{$css-var-prefix}timeline-line-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}timeline-dot-background-color: var(#{$css-var-prefix}primary-inverse); #{$css-var-prefix}timeline-dot-background-color: var(#{$css-var-prefix}primary-inverse);
#{$css-var-prefix}timeline-dot-border-color: var(#{$css-var-prefix}primary-background); #{$css-var-prefix}timeline-dot-border-color: var(#{$css-var-prefix}primary-background);
@if map.get($modules, "components/card") { @if map.get($modules, "components/card") {
#{$css-var-prefix}timeline-arrow-color: var( #{$css-var-prefix}timeline-arrow-color: var(
#{$css-var-prefix}card-sectioning-background-color #{$css-var-prefix}card-sectioning-background-color
); );
} @else { } @else {
#{$css-var-prefix}timeline-arrow-color: #{color.mix($slate-900, $slate-850, 75%)}; #{$css-var-prefix}timeline-arrow-color: #{color.mix($slate-900, $slate-850, 75%)};
} }
} }
} }

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

@ -1,312 +1,312 @@
@use "sass:map"; @use "sass:map";
@use "sass:color"; @use "sass:color";
@use "../../colors" as *; @use "../../colors" as *;
@use "../../settings" as *; @use "../../settings" as *;
@use "../../helpers/functions"; @use "../../helpers/functions";
@use "theme-colors"; @use "theme-colors";
// Default: Light theme // Default: Light theme
@mixin theme { @mixin theme {
color-scheme: light; color-scheme: light;
#{$css-var-prefix}background-color: #{$white}; #{$css-var-prefix}background-color: #{$white};
// Text color // Text color
#{$css-var-prefix}color: #{$zinc-750}; #{$css-var-prefix}color: #{$zinc-750};
// Text selection color // Text selection color
#{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "light"); #{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "light");
// Muted colors // Muted colors
#{$css-var-prefix}muted-color: #{$zinc-550}; #{$css-var-prefix}muted-color: #{$zinc-550};
#{$css-var-prefix}muted-border-color: #{color.mix($slate-100, $slate-50)}; #{$css-var-prefix}muted-border-color: #{color.mix($slate-100, $slate-50)};
// Primary colors // Primary colors
#{$css-var-prefix}primary: theme-colors.get("primary", "light"); #{$css-var-prefix}primary: theme-colors.get("primary", "light");
#{$css-var-prefix}primary-background: theme-colors.get("primary-background", "light"); #{$css-var-prefix}primary-background: theme-colors.get("primary-background", "light");
#{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background); #{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "light"); #{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "light");
#{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "light"); #{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "light");
#{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "light"); #{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "light");
#{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background); #{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
#{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover); #{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "light"); #{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "light");
#{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "light"); #{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "light");
// Secondary colors // Secondary colors
#{$css-var-prefix}secondary: #{$slate-550}; #{$css-var-prefix}secondary: #{$slate-550};
#{$css-var-prefix}secondary-background: #{$slate-600}; #{$css-var-prefix}secondary-background: #{$slate-600};
#{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background); #{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}secondary-underline: #{rgba($slate-550, 0.5)}; #{$css-var-prefix}secondary-underline: #{rgba($slate-550, 0.5)};
#{$css-var-prefix}secondary-hover: #{$slate-650}; #{$css-var-prefix}secondary-hover: #{$slate-650};
#{$css-var-prefix}secondary-hover-background: #{$slate-650}; #{$css-var-prefix}secondary-hover-background: #{$slate-650};
#{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background); #{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover); #{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}secondary-focus: #{rgba($slate-550, 0.25)}; #{$css-var-prefix}secondary-focus: #{rgba($slate-550, 0.25)};
#{$css-var-prefix}secondary-inverse: #{$white}; #{$css-var-prefix}secondary-inverse: #{$white};
// Contrast colors // Contrast colors
#{$css-var-prefix}contrast: #{$slate-900}; #{$css-var-prefix}contrast: #{$slate-900};
#{$css-var-prefix}contrast-background: #{$slate-900}; #{$css-var-prefix}contrast-background: #{$slate-900};
#{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background); #{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}contrast-underline: #{rgba($slate-900, 0.5)}; #{$css-var-prefix}contrast-underline: #{rgba($slate-900, 0.5)};
#{$css-var-prefix}contrast-hover: #{$black}; #{$css-var-prefix}contrast-hover: #{$black};
#{$css-var-prefix}contrast-hover-background: #{$black}; #{$css-var-prefix}contrast-hover-background: #{$black};
#{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background); #{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
#{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}secondary-hover); #{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}contrast-focus: #{rgba($slate-550, 0.25)}; #{$css-var-prefix}contrast-focus: #{rgba($slate-550, 0.25)};
#{$css-var-prefix}contrast-inverse: #{$white}; #{$css-var-prefix}contrast-inverse: #{$white};
// Box shadow // Box shadow
#{$css-var-prefix}box-shadow: functions.shadow($slate-400); #{$css-var-prefix}box-shadow: functions.shadow($slate-400);
// Make Accent Colors // Make Accent Colors
// colors used in: dropdowns, modals, cards, // colors used in: dropdowns, modals, cards,
// blockquote, tabs, timeline, ect // blockquote, tabs, timeline, ect
#{$css-var-prefix}accent-bg-color: var(#{$css-var-prefix}background-color); #{$css-var-prefix}accent-bg-color: var(#{$css-var-prefix}background-color);
#{$css-var-prefix}accent-section-bg-color: #{color.mix($slate-50, $white, 25%)}; #{$css-var-prefix}accent-section-bg-color: #{color.mix($slate-50, $white, 25%)};
#{$css-var-prefix}accent-border-color: var(#{$css-var-prefix}muted-border-color); #{$css-var-prefix}accent-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}accent-box-shadow: var(#{$css-var-prefix}box-shadow); #{$css-var-prefix}accent-box-shadow: var(#{$css-var-prefix}box-shadow);
// Typography // Typography
@if map.get($modules, "content/typography") { @if map.get($modules, "content/typography") {
// Headings colors // Headings colors
#{$css-var-prefix}h1-color: #{$zinc-800}; #{$css-var-prefix}h1-color: #{$zinc-800};
#{$css-var-prefix}h2-color: #{$zinc-750}; #{$css-var-prefix}h2-color: #{$zinc-750};
#{$css-var-prefix}h3-color: #{$zinc-700}; #{$css-var-prefix}h3-color: #{$zinc-700};
#{$css-var-prefix}h4-color: #{$zinc-650}; #{$css-var-prefix}h4-color: #{$zinc-650};
#{$css-var-prefix}h5-color: #{$zinc-600}; #{$css-var-prefix}h5-color: #{$zinc-600};
#{$css-var-prefix}h6-color: #{$zinc-550}; #{$css-var-prefix}h6-color: #{$zinc-550};
// Highlighted text (<mark>) // Highlighted text (<mark>)
#{$css-var-prefix}mark-background-color: #{color.mix($amber-100, $amber-50)}; #{$css-var-prefix}mark-background-color: #{color.mix($amber-100, $amber-50)};
#{$css-var-prefix}mark-color: #{$zinc-950}; #{$css-var-prefix}mark-color: #{$zinc-950};
// Inserted (<ins>) & Deleted (<del>) // Inserted (<ins>) & Deleted (<del>)
#{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-750)}; #{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-750)};
#{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-750)}; #{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-750)};
// Blockquote // Blockquote
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color); #{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color); #{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
} }
// Button // Button
@if map.get($modules, "content/button") { @if map.get($modules, "content/button") {
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)' // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc. // Don't use, 'none, 'false, 'null', '0', etc.
#{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); #{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); #{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
} }
// Table // Table
@if map.get($modules, "content/table") { @if map.get($modules, "content/table") {
#{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color); #{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)}; #{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
} }
// Code // Code
@if map.get($modules, "content/code") { @if map.get($modules, "content/code") {
#{$css-var-prefix}code-background-color: #{color.mix($slate-50, $white, 75%)}; #{$css-var-prefix}code-background-color: #{color.mix($slate-50, $white, 75%)};
#{$css-var-prefix}code-color: #{$zinc-550}; #{$css-var-prefix}code-color: #{$zinc-550};
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color); #{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color); #{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
} }
// Form elements // Form elements
@if map.get($modules, "forms/basics") { @if map.get($modules, "forms/basics") {
#{$css-var-prefix}form-element-background-color: #{color.mix($slate-50, $white, 25%)}; #{$css-var-prefix}form-element-background-color: #{color.mix($slate-50, $white, 25%)};
#{$css-var-prefix}form-element-selected-background-color: #{$slate-100}; #{$css-var-prefix}form-element-selected-background-color: #{$slate-100};
#{$css-var-prefix}form-element-border-color: #{$slate-150}; #{$css-var-prefix}form-element-border-color: #{$slate-150};
#{$css-var-prefix}form-element-color: #{$zinc-850}; #{$css-var-prefix}form-element-color: #{$zinc-850};
#{$css-var-prefix}form-element-placeholder-color: var(#{$css-var-prefix}muted-color); #{$css-var-prefix}form-element-placeholder-color: var(#{$css-var-prefix}muted-color);
#{$css-var-prefix}form-element-active-background-color: #{$white}; #{$css-var-prefix}form-element-active-background-color: #{$white};
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border); #{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border); #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-disabled-opacity: 0.5; #{$css-var-prefix}form-element-disabled-opacity: 0.5;
#{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $zinc-350)}; #{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $zinc-350)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix( #{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix(
$red-500, $red-500,
$zinc-350, $zinc-350,
75% 75%
)}; )};
#{$css-var-prefix}form-element-invalid-focus-color: var( #{$css-var-prefix}form-element-invalid-focus-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color #{$css-var-prefix}form-element-invalid-active-border-color
); );
#{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $zinc-350)}; #{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $zinc-350)};
#{$css-var-prefix}form-element-valid-active-border-color: #{color.mix( #{$css-var-prefix}form-element-valid-active-border-color: #{color.mix(
$jade-450, $jade-450,
$zinc-350, $zinc-350,
75% 75%
)}; )};
#{$css-var-prefix}form-element-valid-focus-color: var( #{$css-var-prefix}form-element-valid-focus-color: var(
#{$css-var-prefix}form-element-valid-active-border-color #{$css-var-prefix}form-element-valid-active-border-color
); );
} }
// Switch (input[type="checkbox"][role="switch"]) // Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") { @if map.get($modules, "forms/checkbox-radio-switch") {
#{$css-var-prefix}switch-background-color: #{$slate-200}; #{$css-var-prefix}switch-background-color: #{$slate-200};
#{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background); #{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}switch-color: #{$white}; #{$css-var-prefix}switch-color: #{$white};
#{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "light"); #{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "light");
} }
// Range (input[type="range"]) // Range (input[type="range"])
@if map.get($modules, "forms/input-range") { @if map.get($modules, "forms/input-range") {
#{$css-var-prefix}range-border-color: #{$slate-100}; #{$css-var-prefix}range-border-color: #{$slate-100};
#{$css-var-prefix}range-active-border-color: #{$slate-200}; #{$css-var-prefix}range-active-border-color: #{$slate-200};
#{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color); #{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background); #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background); #{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
} }
// Accordion (<details>) // Accordion (<details>)
@if map.get($modules, "components/accordion") { @if map.get($modules, "components/accordion") {
#{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color); #{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover); #{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color); #{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color); #{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
} }
// Card (<article>) // Card (<article>)
@if map.get($modules, "components/card") { @if map.get($modules, "components/card") {
#{$css-var-prefix}card-background-color: var(#{$css-var-prefix}background-color); #{$css-var-prefix}card-background-color: var(#{$css-var-prefix}background-color);
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color); #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow); #{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}card-sectioning-background-color: #{color.mix($slate-50, $white, 25%)}; #{$css-var-prefix}card-sectioning-background-color: #{color.mix($slate-50, $white, 25%)};
} }
// Dropdown (details.dropdown) // Dropdown (details.dropdown)
@if map.get($modules, "components/dropdown") and $enable-classes { @if map.get($modules, "components/dropdown") and $enable-classes {
#{$css-var-prefix}dropdown-background-color: #{$white}; #{$css-var-prefix}dropdown-background-color: #{$white};
#{$css-var-prefix}dropdown-border-color: #{$slate-50}; #{$css-var-prefix}dropdown-border-color: #{$slate-50};
#{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow); #{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color); #{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}dropdown-hover-background-color: #{$slate-50}; #{$css-var-prefix}dropdown-hover-background-color: #{$slate-50};
} }
// Loading ([aria-busy=true]) // Loading ([aria-busy=true])
@if map.get($modules, "components/loading") { @if map.get($modules, "components/loading") {
#{$css-var-prefix}loading-spinner-opacity: 0.5; #{$css-var-prefix}loading-spinner-opacity: 0.5;
// Loading icon (animated) // Loading icon (animated)
// Yohn, I think I took care of this in the _styles.scss // Yohn, I think I took care of this in the _styles.scss
// Change the icon color to white for .contrast buttons // Change the icon color to white for .contrast buttons
//@if $enable-classes { //@if $enable-classes {
// #{$parent-selector} [aria-busy="true"]:not(input, select, textarea) { // #{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
// &.contrast:is( // &.contrast:is(
// button, // button,
// [type="submit"], // [type="submit"],
// [type="button"], // [type="button"],
// [type="reset"], // [type="reset"],
// [role="button"] // [role="button"]
// ):not(.outline) { // ):not(.outline) {
// &::before { // &::before {
// filter: invert(1) !important; // filter: invert(1) !important;
// } // }
// } // }
// } // }
//} //}
} // } //
// Chevron icons // Chevron icons
// Change the icon color to white for accordion and dropdown buttons // Change the icon color to white for accordion and dropdown buttons
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") { @if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
#{$parent-selector} details { #{$parent-selector} details {
summary { summary {
$selector: '&[role="button"]'; $selector: '&[role="button"]';
@if $enable-classes { @if $enable-classes {
$selector: "#{$selector}:not(.outline,.contrast,.secondary)"; $selector: "#{$selector}:not(.outline,.contrast,.secondary)";
} }
#{$selector} { #{$selector} {
&::after { &::after {
@if theme-colors.get("primary-inverse", "light") == $white { @if theme-colors.get("primary-inverse", "light") == $white {
filter: brightness(100) invert(0); filter: brightness(100) invert(0);
} @else { } @else {
filter: brightness(100) invert(1); filter: brightness(100) invert(1);
} }
} }
} }
@if $enable-classes { @if $enable-classes {
&.secondary[role="button"]::after { &.secondary[role="button"]::after {
filter: brightness(100) invert(1); filter: brightness(100) invert(1);
} }
&.contrast[role="button"]::after { &.contrast[role="button"]::after {
filter: brightness(100) invert(0); filter: brightness(100) invert(0);
} }
} }
} }
} }
} }
// Loading icon (animated) // Loading icon (animated)
@if map.get($modules, "components/loading") { @if map.get($modules, "components/loading") {
// Change the icon color to white for buttons // Change the icon color to white for buttons
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) { #{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) {
$selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])'; $selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
@if $enable-classes { @if $enable-classes {
$selector: "#{$selector}:not(.outline)"; $selector: "#{$selector}:not(.outline)";
} }
#{$selector} { #{$selector} {
&::before { &::before {
@if theme-colors.get("primary-inverse", "light") == $black { @if theme-colors.get("primary-inverse", "light") == $black {
filter: brightness(0) invert(1); filter: brightness(0) invert(1);
} @else { } @else {
filter: brightness(100) invert(0); filter: brightness(100) invert(0);
} }
} }
} }
} }
} }
// Modal (<dialog>) // Modal (<dialog>)
@if map.get($modules, "components/modal") { @if map.get($modules, "components/modal") {
#{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($zinc-100, $zinc-50), 0.75)}; #{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($zinc-100, $zinc-50), 0.75)};
} }
// Progress // Progress
@if map.get($modules, "components/progress") { @if map.get($modules, "components/progress") {
#{$css-var-prefix}progress-background-color: #{$slate-100}; #{$css-var-prefix}progress-background-color: #{$slate-100};
#{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background); #{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
} }
// Tooltip ([data-tooltip]) // Tooltip ([data-tooltip])
@if map.get($modules, "components/tooltip") { @if map.get($modules, "components/tooltip") {
#{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background); #{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse); #{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
} }
// Form validation icons // Form validation icons
@if map.get($modules, "forms/basics") { @if map.get($modules, "forms/basics") {
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); #{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $zinc-350, 75%))}' 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"); #{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $zinc-350, 75%))}' 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");
} }
// Focus for buttons, radio and select // Focus for buttons, radio and select
@if map.get($modules, "forms/basics") { @if map.get($modules, "forms/basics") {
input:is( input:is(
[type="submit"], [type="submit"],
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="checkbox"], [type="checkbox"],
[type="radio"], [type="radio"],
[type="file"] [type="file"]
) { ) {
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus); #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
} }
} }
// Timeline // Timeline
@if map.get($modules, "components/timeline") { @if map.get($modules, "components/timeline") {
#{$css-var-prefix}timeline-line-color: var(#{$css-var-prefix}primary-background); #{$css-var-prefix}timeline-line-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}timeline-dot-background-color: var(#{$css-var-prefix}primary-inverse); #{$css-var-prefix}timeline-dot-background-color: var(#{$css-var-prefix}primary-inverse);
#{$css-var-prefix}timeline-dot-border-color: var(#{$css-var-prefix}primary-background); #{$css-var-prefix}timeline-dot-border-color: var(#{$css-var-prefix}primary-background);
@if map.get($modules, "components/card") { @if map.get($modules, "components/card") {
#{$css-var-prefix}timeline-arrow-color: var( #{$css-var-prefix}timeline-arrow-color: var(
#{$css-var-prefix}card-sectioning-background-color #{$css-var-prefix}card-sectioning-background-color
); );
} @else { } @else {
#{$css-var-prefix}timeline-arrow-color: #{color.mix($slate-50, $white, 25%)}; #{$css-var-prefix}timeline-arrow-color: #{color.mix($slate-50, $white, 25%)};
} }
} }
} }

82
scss/themes/default/_schemes.scss
View file

@ -1,41 +1,41 @@
@use "sass:map"; @use "sass:map";
@use "../../settings" as *; @use "../../settings" as *;
@use "light"; @use "light";
@use "dark"; @use "dark";
@if map.get($modules, "themes/default") { @if map.get($modules, "themes/default") {
/** /**
* Color schemes * Color schemes
*/ */
// Light color scheme (Default) // Light color scheme (Default)
// 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"]),
:host(:not([data-theme="dark"])) { :host(:not([data-theme="dark"])) {
@include light.theme; @include light.theme;
} }
// Dark color scheme (Auto) // Dark color scheme (Auto)
// 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]), :root:not([data-theme]),
:host(:not([data-theme])) { :host(:not([data-theme])) {
@include dark.theme; @include dark.theme;
} }
} }
// Dark color scheme (Forced) // Dark color scheme (Forced)
// Enabled if forced with data-theme="dark" // Enabled if forced with data-theme="dark"
[data-theme="dark"] { [data-theme="dark"] {
@include dark.theme; @include dark.theme;
} }
#{$parent-selector} progress, #{$parent-selector} progress,
#{$parent-selector} [type="checkbox"], #{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="radio"], #{$parent-selector} [type="radio"],
#{$parent-selector} [type="range"] { #{$parent-selector} [type="range"] {
accent-color: var(#{$css-var-prefix}primary); accent-color: var(#{$css-var-prefix}primary);
} }
} }

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

@ -1,427 +1,427 @@
@use "sass:map"; @use "sass:map";
@use "sass:math"; @use "sass:math";
@use "../../colors" as *; @use "../../colors" as *;
@use "../../settings" as *; @use "../../settings" as *;
@use "../../helpers/functions"; @use "../../helpers/functions";
@use "theme-colors"; @use "theme-colors";
@if map.get($modules, "themes/default") { @if map.get($modules, "themes/default") {
/** /**
* Styles * Styles
*/ */
:root, :root,
:host { :host {
// Typography // Typography
#{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", #{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji"; "Noto Color Emoji";
#{$css-var-prefix}font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, #{$css-var-prefix}font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu,
Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif,
var(#{$css-var-prefix}font-family-emoji); var(#{$css-var-prefix}font-family-emoji);
#{$css-var-prefix}font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, #{$css-var-prefix}font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
Consolas, "Liberation Mono", monospace, var(#{$css-var-prefix}font-family-emoji); Consolas, "Liberation Mono", monospace, var(#{$css-var-prefix}font-family-emoji);
#{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-sans-serif); #{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-sans-serif);
#{$css-var-prefix}line-height: 1.5; #{$css-var-prefix}line-height: 1.5;
#{$css-var-prefix}font-weight: 400; #{$css-var-prefix}font-weight: 400;
#{$css-var-prefix}font-size: 100%; #{$css-var-prefix}font-size: 100%;
#{$css-var-prefix}text-underline-offset: 0.1rem; #{$css-var-prefix}text-underline-offset: 0.1rem;
#{$css-var-prefix}border-radius: 0.25rem; #{$css-var-prefix}border-radius: 0.25rem;
#{$css-var-prefix}border-width: 0.0625rem; #{$css-var-prefix}border-width: 0.0625rem;
#{$css-var-prefix}outline-width: 0.125rem; #{$css-var-prefix}outline-width: 0.125rem;
// Transitions // Transitions
#{$css-var-prefix}transition: 0.2s ease-in-out; #{$css-var-prefix}transition: 0.2s ease-in-out;
// Spacings // Spacings
#{$css-var-prefix}spacing: 1rem; #{$css-var-prefix}spacing: 1rem;
#{$css-var-prefix}icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); #{$css-var-prefix}icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
// Spacings for typography elements // Spacings for typography elements
@if map.get($modules, "content/typography") { @if map.get($modules, "content/typography") {
#{$css-var-prefix}typography-spacing-vertical: 1rem; #{$css-var-prefix}typography-spacing-vertical: 1rem;
} }
// Spacings for body > header, body > main, body > footer, section, article // Spacings for body > header, body > main, body > footer, section, article
@if map.get($modules, "layout/landmarks") or @if map.get($modules, "layout/landmarks") or
map.get($modules, "layout/section") or map.get($modules, "layout/section") or
map.get($modules, "components/card") or map.get($modules, "components/card") or
map.get($modules, "components/modal") map.get($modules, "components/modal")
{ {
#{$css-var-prefix}block-spacing-vertical: var(#{$css-var-prefix}spacing); #{$css-var-prefix}block-spacing-vertical: var(#{$css-var-prefix}spacing);
#{$css-var-prefix}block-spacing-horizontal: var(#{$css-var-prefix}spacing); #{$css-var-prefix}block-spacing-horizontal: var(#{$css-var-prefix}spacing);
} }
@if map.get($modules, "layout/grid") and $enable-classes { @if map.get($modules, "layout/grid") and $enable-classes {
#{$css-var-prefix}grid-column-gap: var(#{$css-var-prefix}spacing); #{$css-var-prefix}grid-column-gap: var(#{$css-var-prefix}spacing);
#{$css-var-prefix}grid-row-gap: var(#{$css-var-prefix}spacing); #{$css-var-prefix}grid-row-gap: var(#{$css-var-prefix}spacing);
} }
// Spacings for form elements and button // Spacings for form elements and button
@if map.get($modules, "content/button") or map.get($modules, "forms/basic") { @if map.get($modules, "content/button") or map.get($modules, "forms/basic") {
#{$css-var-prefix}form-element-spacing-vertical: calc( #{$css-var-prefix}form-element-spacing-vertical: calc(
var(#{$css-var-prefix}spacing) * 0.5 var(#{$css-var-prefix}spacing) * 0.5
); // 0.75rem ); // 0.75rem
#{$css-var-prefix}form-element-spacing-horizontal: calc( #{$css-var-prefix}form-element-spacing-horizontal: calc(
var(#{$css-var-prefix}spacing) * 0.75 var(#{$css-var-prefix}spacing) * 0.75
); // 1rem ); // 1rem
} }
// Font weight for form labels & fieldsets legend // Font weight for form labels & fieldsets legend
@if map.get($modules, "forms/basic") { @if map.get($modules, "forms/basic") {
#{$css-var-prefix}form-label-font-weight: var(#{$css-var-prefix}font-weight); #{$css-var-prefix}form-label-font-weight: var(#{$css-var-prefix}font-weight);
} }
// Group (role="group") // Group (role="group")
@if map.get($modules, "components/group") { @if map.get($modules, "components/group") {
#{$css-var-prefix}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0); #{$css-var-prefix}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$css-var-prefix}group-box-shadow-focus-with-button: 0 #{$css-var-prefix}group-box-shadow-focus-with-button: 0
0 0
0 0
var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}primary-focus); var(#{$css-var-prefix}primary-focus);
#{$css-var-prefix}group-box-shadow-focus-with-input: 0 #{$css-var-prefix}group-box-shadow-focus-with-input: 0
0 0
0 0
0.0625rem 0.0625rem
var(#{$css-var-prefix}form-element-border-color); var(#{$css-var-prefix}form-element-border-color);
} }
// Modal (<dialog>) // Modal (<dialog>)
@if map.get($modules, "components/modal") { @if map.get($modules, "components/modal") {
#{$css-var-prefix}modal-overlay-backdrop-filter: blur(0.375rem); #{$css-var-prefix}modal-overlay-backdrop-filter: blur(0.375rem);
} }
// Spacings for nav component // Spacings for nav component
@if map.get($modules, "components/nav") { @if map.get($modules, "components/nav") {
#{$css-var-prefix}nav-element-spacing-vertical: 1rem; #{$css-var-prefix}nav-element-spacing-vertical: 1rem;
#{$css-var-prefix}nav-element-spacing-horizontal: 0.5rem; #{$css-var-prefix}nav-element-spacing-horizontal: 0.5rem;
#{$css-var-prefix}nav-link-spacing-vertical: 0.5rem; #{$css-var-prefix}nav-link-spacing-vertical: 0.5rem;
#{$css-var-prefix}nav-link-spacing-horizontal: 0.5rem; #{$css-var-prefix}nav-link-spacing-horizontal: 0.5rem;
#{$css-var-prefix}nav-breadcrumb-divider: ">"; #{$css-var-prefix}nav-breadcrumb-divider: ">";
} }
// Checkboxes icons // Checkboxes icons
@if map.get($modules, "forms/checkbox-radio-switch") { @if map.get($modules, "forms/checkbox-radio-switch") {
#{$css-var-prefix}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='#{functions.display-rgb($white)}' 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"); #{$css-var-prefix}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='#{functions.display-rgb($white)}' 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");
#{$css-var-prefix}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='#{functions.display-rgb($white)}' 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"); #{$css-var-prefix}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='#{functions.display-rgb($white)}' 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");
} }
// Chevron icons // Chevron icons
@if map.get($modules, "forms/basics") or @if map.get($modules, "forms/basics") or
map.get($modules, "components/accordion") or map.get($modules, "components/accordion") or
map.get($modules, "components/dropdown") map.get($modules, "components/dropdown")
{ {
#{$css-var-prefix}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); #{$css-var-prefix}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
} }
// Datetime icons // Datetime icons
@if map.get($modules, "forms/input-date") { @if map.get($modules, "forms/input-date") {
#{$css-var-prefix}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); #{$css-var-prefix}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
#{$css-var-prefix}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); #{$css-var-prefix}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
} }
// Search icon // Search icon
@if map.get($modules, "forms/input-search") { @if map.get($modules, "forms/input-search") {
#{$css-var-prefix}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); #{$css-var-prefix}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
} }
// Close icon // Close icon
@if map.get($modules, "components/modal") { @if map.get($modules, "components/modal") {
#{$css-var-prefix}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); #{$css-var-prefix}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
} }
// Loading icon (animated) // Loading icon (animated)
@if map.get($modules, "components/loading") { @if map.get($modules, "components/loading") {
// Inspired by https://codepen.io/aleksander351/pen/KzgKPo // Inspired by https://codepen.io/aleksander351/pen/KzgKPo
#{$css-var-prefix}icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E"); #{$css-var-prefix}icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
} }
// Responsive root font size // Responsive root font size
@if $enable-responsive-typography { @if $enable-responsive-typography {
@each $key, $values in $breakpoints { @each $key, $values in $breakpoints {
@if $values { @if $values {
@media (min-width: map.get($values, "breakpoint")) { @media (min-width: map.get($values, "breakpoint")) {
#{$css-var-prefix}font-size: map.get($values, "root-font-size"); #{$css-var-prefix}font-size: map.get($values, "root-font-size");
} }
} }
} }
} }
} }
// Responsive spacings // Responsive spacings
@if $enable-responsive-spacings { @if $enable-responsive-spacings {
// Landmarks and section // Landmarks and section
@if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") { @if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") {
#{$semantic-root-element} > header, #{$semantic-root-element} > header,
#{$semantic-root-element} > main, #{$semantic-root-element} > main,
#{$semantic-root-element} > footer, #{$semantic-root-element} > footer,
section { section {
@each $key, $values in $breakpoints { @each $key, $values in $breakpoints {
@if $values { @if $values {
@media (min-width: map.get($values, "breakpoint")) { @media (min-width: map.get($values, "breakpoint")) {
$multiplier: 1; $multiplier: 1;
@if $key == "sm" { @if $key == "sm" {
$multiplier: 1.25; $multiplier: 1.25;
} @else if $key == "md" { } @else if $key == "md" {
$multiplier: 1.5; $multiplier: 1.5;
} @else if $key == "lg" { } @else if $key == "lg" {
$multiplier: 1.75; $multiplier: 1.75;
} @else if $key == "xl" { } @else if $key == "xl" {
$multiplier: 2; $multiplier: 2;
} @else if $key == "xxl" { } @else if $key == "xxl" {
$multiplier: 2.25; $multiplier: 2.25;
} }
#{$css-var-prefix}block-spacing-vertical: calc( #{$css-var-prefix}block-spacing-vertical: calc(
var(#{$css-var-prefix}spacing) * $multiplier var(#{$css-var-prefix}spacing) * $multiplier
); );
} }
} }
} }
} }
} }
// Card (<article>) // Card (<article>)
@if map.get($modules, "components/card") { @if map.get($modules, "components/card") {
article { article {
@each $key, $values in $breakpoints { @each $key, $values in $breakpoints {
@if $values { @if $values {
@media (min-width: map.get($values, "breakpoint")) { @media (min-width: map.get($values, "breakpoint")) {
$multiplier: 1; $multiplier: 1;
@if $key == "sm" { @if $key == "sm" {
$multiplier: 1.25; $multiplier: 1.25;
} @else if $key == "md" { } @else if $key == "md" {
$multiplier: 1.5; $multiplier: 1.5;
} @else if $key == "lg" { } @else if $key == "lg" {
$multiplier: 1.75; $multiplier: 1.75;
} @else if $key == "xl" { } @else if $key == "xl" {
$multiplier: 2; $multiplier: 2;
} @else if $key == "xxl" { } @else if $key == "xxl" {
$multiplier: 2.25; $multiplier: 2.25;
} }
#{$css-var-prefix}block-spacing-vertical: calc( #{$css-var-prefix}block-spacing-vertical: calc(
var(#{$css-var-prefix}spacing) * $multiplier var(#{$css-var-prefix}spacing) * $multiplier
); );
#{$css-var-prefix}block-spacing-horizontal: calc( #{$css-var-prefix}block-spacing-horizontal: calc(
var(#{$css-var-prefix}spacing) * $multiplier var(#{$css-var-prefix}spacing) * $multiplier
); );
} }
} }
} }
} }
} }
} }
// Link // Link
@if map.get($modules, "content/link") { @if map.get($modules, "content/link") {
a { a {
#{$css-var-prefix}text-decoration: underline; #{$css-var-prefix}text-decoration: underline;
// Secondary & Contrast // Secondary & Contrast
@if $enable-classes { @if $enable-classes {
&.secondary, &.secondary,
&.contrast { &.contrast {
#{$css-var-prefix}text-decoration: underline; #{$css-var-prefix}text-decoration: underline;
} }
} }
} }
} }
// Typography // Typography
@if map.get($modules, "content/typography") { @if map.get($modules, "content/typography") {
// Small // Small
small { small {
#{$css-var-prefix}font-size: 0.875em; #{$css-var-prefix}font-size: 0.875em;
} }
// Headings // Headings
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
#{$css-var-prefix}font-weight: 700; #{$css-var-prefix}font-weight: 700;
} }
h1 { h1 {
#{$css-var-prefix}font-size: 2rem; #{$css-var-prefix}font-size: 2rem;
#{$css-var-prefix}line-height: 1.125; #{$css-var-prefix}line-height: 1.125;
#{$css-var-prefix}typography-spacing-top: 3rem; #{$css-var-prefix}typography-spacing-top: 3rem;
} }
h2 { h2 {
#{$css-var-prefix}font-size: 1.75rem; #{$css-var-prefix}font-size: 1.75rem;
#{$css-var-prefix}line-height: 1.15; #{$css-var-prefix}line-height: 1.15;
#{$css-var-prefix}typography-spacing-top: 2.625rem; #{$css-var-prefix}typography-spacing-top: 2.625rem;
} }
h3 { h3 {
#{$css-var-prefix}font-size: 1.5rem; #{$css-var-prefix}font-size: 1.5rem;
#{$css-var-prefix}line-height: 1.175; #{$css-var-prefix}line-height: 1.175;
#{$css-var-prefix}typography-spacing-top: 2.25rem; #{$css-var-prefix}typography-spacing-top: 2.25rem;
} }
h4 { h4 {
#{$css-var-prefix}font-size: 1.25rem; #{$css-var-prefix}font-size: 1.25rem;
#{$css-var-prefix}line-height: 1.2; #{$css-var-prefix}line-height: 1.2;
#{$css-var-prefix}typography-spacing-top: 1.874rem; #{$css-var-prefix}typography-spacing-top: 1.874rem;
} }
h5 { h5 {
#{$css-var-prefix}font-size: 1.125rem; #{$css-var-prefix}font-size: 1.125rem;
#{$css-var-prefix}line-height: 1.225; #{$css-var-prefix}line-height: 1.225;
#{$css-var-prefix}typography-spacing-top: 1.6875rem; #{$css-var-prefix}typography-spacing-top: 1.6875rem;
} }
h6 { h6 {
#{$css-var-prefix}font-size: 1rem; #{$css-var-prefix}font-size: 1rem;
#{$css-var-prefix}line-height: 1.25; #{$css-var-prefix}line-height: 1.25;
#{$css-var-prefix}typography-spacing-top: 1.5rem; #{$css-var-prefix}typography-spacing-top: 1.5rem;
} }
} }
// Table // Table
@if map.get($modules, "content/table") { @if map.get($modules, "content/table") {
thead, thead,
tfoot { tfoot {
th, th,
td { td {
#{$css-var-prefix}font-weight: 600; #{$css-var-prefix}font-weight: 600;
#{$css-var-prefix}border-width: 0.1875rem; #{$css-var-prefix}border-width: 0.1875rem;
} }
} }
} }
// Code // Code
@if map.get($modules, "content/code") { @if map.get($modules, "content/code") {
pre, pre,
code, code,
kbd, kbd,
samp { samp {
#{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-monospace); #{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-monospace);
} }
kbd { kbd {
#{$css-var-prefix}font-weight: bolder; #{$css-var-prefix}font-weight: bolder;
} }
} }
// Inputs and Selects // Inputs and Selects
input:not( input:not(
[type="submit"], [type="submit"],
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="checkbox"], [type="checkbox"],
[type="radio"], [type="radio"],
[type="file"] [type="file"]
), ),
:where(select, textarea) { :where(select, textarea) {
#{$css-var-prefix}outline-width: 0.0625rem; #{$css-var-prefix}outline-width: 0.0625rem;
} }
[type="search"] { [type="search"] {
#{$css-var-prefix}border-radius: 5rem; #{$css-var-prefix}border-radius: 5rem;
} }
// Checkboxes, Radios and Switches // Checkboxes, Radios and Switches
@if map.get($modules, "forms/checkbox-radio-switch") { @if map.get($modules, "forms/checkbox-radio-switch") {
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
#{$css-var-prefix}border-width: 0.125rem; #{$css-var-prefix}border-width: 0.125rem;
} }
[type="checkbox"][role="switch"] { [type="checkbox"][role="switch"] {
#{$css-var-prefix}border-width: 0.1875rem; #{$css-var-prefix}border-width: 0.1875rem;
} }
} }
// Dropdown (details.dropdown) // Dropdown (details.dropdown)
@if map.get($modules, "components/dropdown") and $enable-classes { @if map.get($modules, "components/dropdown") and $enable-classes {
details.dropdown { details.dropdown {
summary:not([role="button"]) { summary:not([role="button"]) {
#{$css-var-prefix}outline-width: 0.0625rem; #{$css-var-prefix}outline-width: 0.0625rem;
} }
} }
nav { nav {
details.dropdown { details.dropdown {
summary:focus-visible { summary:focus-visible {
#{$css-var-prefix}outline-width: 0.125rem; #{$css-var-prefix}outline-width: 0.125rem;
} }
} }
} }
} }
// Group (role="group") // Group (role="group")
@if map.get($modules, "components/group") { @if map.get($modules, "components/group") {
[role="search"] { [role="search"] {
#{$css-var-prefix}border-radius: 5rem; #{$css-var-prefix}border-radius: 5rem;
} }
[role="search"], [role="search"],
[role="group"] { [role="group"] {
@if $enable-classes { @if $enable-classes {
&:has( &:has(
button.secondary:focus, button.secondary:focus,
[type="submit"].secondary:focus, [type="submit"].secondary:focus,
[type="button"].secondary:focus, [type="button"].secondary:focus,
[role="button"].secondary:focus [role="button"].secondary:focus
) { ) {
#{$css-var-prefix}group-box-shadow-focus-with-button: 0 #{$css-var-prefix}group-box-shadow-focus-with-button: 0
0 0
0 0
var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}secondary-focus); var(#{$css-var-prefix}secondary-focus);
} }
&:has( &:has(
button.contrast:focus, button.contrast:focus,
[type="submit"].contrast:focus, [type="submit"].contrast:focus,
[type="button"].contrast:focus, [type="button"].contrast:focus,
[role="button"].contrast:focus [role="button"].contrast:focus
) { ) {
#{$css-var-prefix}group-box-shadow-focus-with-button: 0 #{$css-var-prefix}group-box-shadow-focus-with-button: 0
0 0
0 0
var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}contrast-focus); var(#{$css-var-prefix}contrast-focus);
} }
} }
button, button,
[type="submit"], [type="submit"],
[type="button"], [type="button"],
[role="button"] { [role="button"] {
#{$css-var-prefix}form-element-spacing-horizontal: 2rem; #{$css-var-prefix}form-element-spacing-horizontal: 2rem;
} }
} }
} }
@if map.get($modules, "components/tab") { @if map.get($modules, "components/tab") {
[role="tablist"] { [role="tablist"] {
#{$css-var-prefix}tab-animation: showTab; #{$css-var-prefix}tab-animation: showTab;
// will fine tune these next release // will fine tune these next release
//button { //button {
// #{$css-var-prefix}form-element-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * 0.5); // 0.75rem // #{$css-var-prefix}form-element-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * 0.5); // 0.75rem
// #{$css-var-prefix}form-element-spacing-horizontal: calc(var(#{$css-var-prefix}spacing) * 0.75); // 1rem // #{$css-var-prefix}form-element-spacing-horizontal: calc(var(#{$css-var-prefix}spacing) * 0.75); // 1rem
// #{$css-var-prefix}tab-padding-vertical: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 1.25); // #{$css-var-prefix}tab-padding-vertical: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 1.25);
// #{$css-var-prefix}tab-padding-horizontal: var(#{$css-var-prefix}form-element-spacing-horizontal); // #{$css-var-prefix}tab-padding-horizontal: var(#{$css-var-prefix}form-element-spacing-horizontal);
// #{$css-var-prefix}tab-border-color: var(#{$css-var-prefix}primary-background); // #{$css-var-prefix}tab-border-color: var(#{$css-var-prefix}primary-background);
// #{$css-var-prefix}tab-background: transparent; // #{$css-var-prefix}tab-background: transparent;
// #{$css-var-prefix}tab-color: var(#{$css-var-prefix}contrast); // #{$css-var-prefix}tab-color: var(#{$css-var-prefix}contrast);
// &[aria-selected="true"] { // &[aria-selected="true"] {
// #{$css-var-prefix}tab-selected-background: var(#{$css-var-prefix}primary-background); // #{$css-var-prefix}tab-selected-background: var(#{$css-var-prefix}primary-background);
// #{$css-var-prefix}tab-selected-color: var(#{$css-var-prefix}primary-inverse); // #{$css-var-prefix}tab-selected-color: var(#{$css-var-prefix}primary-inverse);
// } // }
// &:hover { // &:hover {
// #{$css-var-prefix}tab-hover-background: var(#{$css-var-prefix}primary-hover-background); // #{$css-var-prefix}tab-hover-background: var(#{$css-var-prefix}primary-hover-background);
// #{$css-var-prefix}tab-hover-color: var(#{$css-var-prefix}primary-inverse); // #{$css-var-prefix}tab-hover-color: var(#{$css-var-prefix}primary-inverse);
// } // }
//} //}
} }
} }
} }

982
scss/themes/default/_theme-colors.scss
View file

@ -1,491 +1,491 @@
@use "sass:map"; @use "sass:map";
@use "sass:color"; @use "sass:color";
@use "../../colors" as *; @use "../../colors" as *;
@use "../../settings" as *; @use "../../settings" as *;
$color-mappings: ( $color-mappings: (
"amber": ( "amber": (
"dark": ( "dark": (
"text-selection-color": rgba($amber-350, 0.1875), "text-selection-color": rgba($amber-350, 0.1875),
"primary": $amber-350, "primary": $amber-350,
"primary-background": $amber-200, "primary-background": $amber-200,
"primary-underline": rgba($amber-350, 0.5), "primary-underline": rgba($amber-350, 0.5),
"primary-hover": $amber-250, "primary-hover": $amber-250,
"primary-hover-background": $amber-150, "primary-hover-background": $amber-150,
"primary-focus": rgba($amber-350, 0.375), "primary-focus": rgba($amber-350, 0.375),
"primary-inverse": $black, "primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25), "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
), ),
"light": ( "light": (
"text-selection-color": rgba($amber-400, 0.25), "text-selection-color": rgba($amber-400, 0.25),
"primary": $amber-550, "primary": $amber-550,
"primary-background": $amber-200, "primary-background": $amber-200,
"primary-underline": rgba($amber-550, 0.5), "primary-underline": rgba($amber-550, 0.5),
"primary-hover": $amber-650, "primary-hover": $amber-650,
"primary-hover-background": $amber-250, "primary-hover-background": $amber-250,
"primary-focus": rgba($amber-400, 0.5), "primary-focus": rgba($amber-400, 0.5),
"primary-inverse": $black, "primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25), "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
), ),
), ),
"azure": ( "azure": (
"dark": ( "dark": (
"text-selection-color": rgba($azure-350, 0.1875), "text-selection-color": rgba($azure-350, 0.1875),
"primary": $azure-350, "primary": $azure-350,
"primary-background": $azure-550, "primary-background": $azure-550,
"primary-underline": rgba($azure-350, 0.5), "primary-underline": rgba($azure-350, 0.5),
"primary-hover": $azure-250, "primary-hover": $azure-250,
"primary-hover-background": $azure-500, "primary-hover-background": $azure-500,
"primary-focus": rgba($azure-350, 0.375), "primary-focus": rgba($azure-350, 0.375),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
"light": ( "light": (
"text-selection-color": rgba($azure-400, 0.25), "text-selection-color": rgba($azure-400, 0.25),
"primary": $azure-550, "primary": $azure-550,
"primary-background": $azure-550, "primary-background": $azure-550,
"primary-underline": rgba($azure-550, 0.5), "primary-underline": rgba($azure-550, 0.5),
"primary-hover": $azure-650, "primary-hover": $azure-650,
"primary-hover-background": $azure-600, "primary-hover-background": $azure-600,
"primary-focus": rgba($azure-400, 0.5), "primary-focus": rgba($azure-400, 0.5),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
), ),
"blue": ( "blue": (
"dark": ( "dark": (
"text-selection-color": rgba($blue-350, 0.1875), "text-selection-color": rgba($blue-350, 0.1875),
"primary": $blue-350, "primary": $blue-350,
"primary-background": $blue-550, "primary-background": $blue-550,
"primary-underline": rgba($blue-350, 0.5), "primary-underline": rgba($blue-350, 0.5),
"primary-hover": $blue-250, "primary-hover": $blue-250,
"primary-hover-background": $blue-500, "primary-hover-background": $blue-500,
"primary-focus": rgba($blue-350, 0.375), "primary-focus": rgba($blue-350, 0.375),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
"light": ( "light": (
"text-selection-color": rgba($blue-400, 0.25), "text-selection-color": rgba($blue-400, 0.25),
"primary": $blue-550, "primary": $blue-550,
"primary-background": $blue-550, "primary-background": $blue-550,
"primary-underline": rgba($blue-550, 0.5), "primary-underline": rgba($blue-550, 0.5),
"primary-hover": $blue-650, "primary-hover": $blue-650,
"primary-hover-background": $blue-600, "primary-hover-background": $blue-600,
"primary-focus": rgba($blue-400, 0.5), "primary-focus": rgba($blue-400, 0.5),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
), ),
"cyan": ( "cyan": (
"dark": ( "dark": (
"text-selection-color": rgba($cyan-350, 0.1875), "text-selection-color": rgba($cyan-350, 0.1875),
"primary": $cyan-350, "primary": $cyan-350,
"primary-background": $cyan-550, "primary-background": $cyan-550,
"primary-underline": rgba($cyan-350, 0.5), "primary-underline": rgba($cyan-350, 0.5),
"primary-hover": $cyan-250, "primary-hover": $cyan-250,
"primary-hover-background": $cyan-500, "primary-hover-background": $cyan-500,
"primary-focus": rgba($cyan-350, 0.375), "primary-focus": rgba($cyan-350, 0.375),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
"light": ( "light": (
"text-selection-color": rgba($cyan-400, 0.25), "text-selection-color": rgba($cyan-400, 0.25),
"primary": $cyan-550, "primary": $cyan-550,
"primary-background": $cyan-550, "primary-background": $cyan-550,
"primary-underline": rgba($cyan-550, 0.5), "primary-underline": rgba($cyan-550, 0.5),
"primary-hover": $cyan-650, "primary-hover": $cyan-650,
"primary-hover-background": $cyan-600, "primary-hover-background": $cyan-600,
"primary-focus": rgba($cyan-400, 0.5), "primary-focus": rgba($cyan-400, 0.5),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
), ),
"fuchsia": ( "fuchsia": (
"dark": ( "dark": (
"text-selection-color": rgba($fuchsia-350, 0.1875), "text-selection-color": rgba($fuchsia-350, 0.1875),
"primary": $fuchsia-350, "primary": $fuchsia-350,
"primary-background": $fuchsia-550, "primary-background": $fuchsia-550,
"primary-underline": rgba($fuchsia-350, 0.5), "primary-underline": rgba($fuchsia-350, 0.5),
"primary-hover": $fuchsia-250, "primary-hover": $fuchsia-250,
"primary-hover-background": $fuchsia-500, "primary-hover-background": $fuchsia-500,
"primary-focus": rgba($fuchsia-350, 0.375), "primary-focus": rgba($fuchsia-350, 0.375),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
"light": ( "light": (
"text-selection-color": rgba($fuchsia-400, 0.25), "text-selection-color": rgba($fuchsia-400, 0.25),
"primary": $fuchsia-550, "primary": $fuchsia-550,
"primary-background": $fuchsia-550, "primary-background": $fuchsia-550,
"primary-underline": rgba($fuchsia-550, 0.5), "primary-underline": rgba($fuchsia-550, 0.5),
"primary-hover": $fuchsia-650, "primary-hover": $fuchsia-650,
"primary-hover-background": $fuchsia-600, "primary-hover-background": $fuchsia-600,
"primary-focus": rgba($fuchsia-400, 0.5), "primary-focus": rgba($fuchsia-400, 0.5),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
), ),
"green": ( "green": (
"dark": ( "dark": (
"text-selection-color": rgba($green-350, 0.1875), "text-selection-color": rgba($green-350, 0.1875),
"primary": $green-350, "primary": $green-350,
"primary-background": $green-500, "primary-background": $green-500,
"primary-underline": rgba($green-350, 0.5), "primary-underline": rgba($green-350, 0.5),
"primary-hover": $green-250, "primary-hover": $green-250,
"primary-hover-background": $green-450, "primary-hover-background": $green-450,
"primary-focus": rgba($green-350, 0.375), "primary-focus": rgba($green-350, 0.375),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
"light": ( "light": (
"text-selection-color": rgba($green-400, 0.25), "text-selection-color": rgba($green-400, 0.25),
"primary": $green-550, "primary": $green-550,
"primary-background": $green-500, "primary-background": $green-500,
"primary-underline": rgba($green-550, 0.5), "primary-underline": rgba($green-550, 0.5),
"primary-hover": $green-650, "primary-hover": $green-650,
"primary-hover-background": $green-550, "primary-hover-background": $green-550,
"primary-focus": rgba($green-400, 0.5), "primary-focus": rgba($green-400, 0.5),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
), ),
"grey": ( "grey": (
"dark": ( "dark": (
"text-selection-color": rgba($grey-350, 0.1875), "text-selection-color": rgba($grey-350, 0.1875),
"primary": $grey-350, "primary": $grey-350,
"primary-background": $grey-300, "primary-background": $grey-300,
"primary-underline": rgba($grey-350, 0.5), "primary-underline": rgba($grey-350, 0.5),
"primary-hover": $grey-250, "primary-hover": $grey-250,
"primary-hover-background": $grey-250, "primary-hover-background": $grey-250,
"primary-focus": rgba($grey-350, 0.375), "primary-focus": rgba($grey-350, 0.375),
"primary-inverse": $black, "primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25), "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
), ),
"light": ( "light": (
"text-selection-color": rgba($grey-400, 0.25), "text-selection-color": rgba($grey-400, 0.25),
"primary": $grey-550, "primary": $grey-550,
"primary-background": $grey-300, "primary-background": $grey-300,
"primary-underline": rgba($grey-550, 0.5), "primary-underline": rgba($grey-550, 0.5),
"primary-hover": $grey-650, "primary-hover": $grey-650,
"primary-hover-background": $grey-350, "primary-hover-background": $grey-350,
"primary-focus": rgba($grey-400, 0.5), "primary-focus": rgba($grey-400, 0.5),
"primary-inverse": $black, "primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25), "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
), ),
), ),
"indigo": ( "indigo": (
"dark": ( "dark": (
"text-selection-color": rgba($indigo-350, 0.1875), "text-selection-color": rgba($indigo-350, 0.1875),
"primary": $indigo-350, "primary": $indigo-350,
"primary-background": $indigo-600, "primary-background": $indigo-600,
"primary-underline": rgba($indigo-350, 0.5), "primary-underline": rgba($indigo-350, 0.5),
"primary-hover": $indigo-250, "primary-hover": $indigo-250,
"primary-hover-background": $indigo-550, "primary-hover-background": $indigo-550,
"primary-focus": rgba($indigo-350, 0.375), "primary-focus": rgba($indigo-350, 0.375),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
"light": ( "light": (
"text-selection-color": rgba($indigo-400, 0.25), "text-selection-color": rgba($indigo-400, 0.25),
"primary": $indigo-550, "primary": $indigo-550,
"primary-background": $indigo-600, "primary-background": $indigo-600,
"primary-underline": rgba($indigo-550, 0.5), "primary-underline": rgba($indigo-550, 0.5),
"primary-hover": $indigo-650, "primary-hover": $indigo-650,
"primary-hover-background": $indigo-650, "primary-hover-background": $indigo-650,
"primary-focus": rgba($indigo-400, 0.5), "primary-focus": rgba($indigo-400, 0.5),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
), ),
"jade": ( "jade": (
"dark": ( "dark": (
"text-selection-color": rgba($jade-350, 0.1875), "text-selection-color": rgba($jade-350, 0.1875),
"primary": $jade-350, "primary": $jade-350,
"primary-background": $jade-550, "primary-background": $jade-550,
"primary-underline": rgba($jade-350, 0.5), "primary-underline": rgba($jade-350, 0.5),
"primary-hover": $jade-250, "primary-hover": $jade-250,
"primary-hover-background": $jade-500, "primary-hover-background": $jade-500,
"primary-focus": rgba($jade-350, 0.375), "primary-focus": rgba($jade-350, 0.375),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
"light": ( "light": (
"text-selection-color": rgba($jade-400, 0.25), "text-selection-color": rgba($jade-400, 0.25),
"primary": $jade-550, "primary": $jade-550,
"primary-background": $jade-550, "primary-background": $jade-550,
"primary-underline": rgba($jade-550, 0.5), "primary-underline": rgba($jade-550, 0.5),
"primary-hover": $jade-650, "primary-hover": $jade-650,
"primary-hover-background": $jade-600, "primary-hover-background": $jade-600,
"primary-focus": rgba($jade-400, 0.5), "primary-focus": rgba($jade-400, 0.5),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
), ),
"lime": ( "lime": (
"dark": ( "dark": (
"text-selection-color": rgba($lime-350, 0.1875), "text-selection-color": rgba($lime-350, 0.1875),
"primary": $lime-350, "primary": $lime-350,
"primary-background": $lime-200, "primary-background": $lime-200,
"primary-underline": rgba($lime-350, 0.5), "primary-underline": rgba($lime-350, 0.5),
"primary-hover": $lime-250, "primary-hover": $lime-250,
"primary-hover-background": $lime-150, "primary-hover-background": $lime-150,
"primary-focus": rgba($lime-350, 0.375), "primary-focus": rgba($lime-350, 0.375),
"primary-inverse": $black, "primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25), "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
), ),
"light": ( "light": (
"text-selection-color": rgba($lime-400, 0.25), "text-selection-color": rgba($lime-400, 0.25),
"primary": $lime-550, "primary": $lime-550,
"primary-background": $lime-200, "primary-background": $lime-200,
"primary-underline": rgba($lime-550, 0.5), "primary-underline": rgba($lime-550, 0.5),
"primary-hover": $lime-650, "primary-hover": $lime-650,
"primary-hover-background": $lime-250, "primary-hover-background": $lime-250,
"primary-focus": rgba($lime-400, 0.5), "primary-focus": rgba($lime-400, 0.5),
"primary-inverse": $black, "primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25), "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
), ),
), ),
"orange": ( "orange": (
"dark": ( "dark": (
"text-selection-color": rgba($orange-350, 0.1875), "text-selection-color": rgba($orange-350, 0.1875),
"primary": $orange-350, "primary": $orange-350,
"primary-background": $orange-500, "primary-background": $orange-500,
"primary-underline": rgba($orange-350, 0.5), "primary-underline": rgba($orange-350, 0.5),
"primary-hover": $orange-250, "primary-hover": $orange-250,
"primary-hover-background": $orange-450, "primary-hover-background": $orange-450,
"primary-focus": rgba($orange-350, 0.375), "primary-focus": rgba($orange-350, 0.375),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
"light": ( "light": (
"text-selection-color": rgba($orange-400, 0.25), "text-selection-color": rgba($orange-400, 0.25),
"primary": $orange-550, "primary": $orange-550,
"primary-background": $orange-500, "primary-background": $orange-500,
"primary-underline": rgba($orange-550, 0.5), "primary-underline": rgba($orange-550, 0.5),
"primary-hover": $orange-650, "primary-hover": $orange-650,
"primary-hover-background": $orange-550, "primary-hover-background": $orange-550,
"primary-focus": rgba($orange-400, 0.5), "primary-focus": rgba($orange-400, 0.5),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
), ),
"pink": ( "pink": (
"dark": ( "dark": (
"text-selection-color": rgba($pink-350, 0.1875), "text-selection-color": rgba($pink-350, 0.1875),
"primary": $pink-350, "primary": $pink-350,
"primary-background": $pink-500, "primary-background": $pink-500,
"primary-underline": rgba($pink-350, 0.5), "primary-underline": rgba($pink-350, 0.5),
"primary-hover": $pink-250, "primary-hover": $pink-250,
"primary-hover-background": $pink-450, "primary-hover-background": $pink-450,
"primary-focus": rgba($pink-350, 0.375), "primary-focus": rgba($pink-350, 0.375),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
"light": ( "light": (
"text-selection-color": rgba($pink-400, 0.25), "text-selection-color": rgba($pink-400, 0.25),
"primary": $pink-550, "primary": $pink-550,
"primary-background": $pink-500, "primary-background": $pink-500,
"primary-underline": rgba($pink-550, 0.5), "primary-underline": rgba($pink-550, 0.5),
"primary-hover": $pink-650, "primary-hover": $pink-650,
"primary-hover-background": $pink-550, "primary-hover-background": $pink-550,
"primary-focus": rgba($pink-400, 0.5), "primary-focus": rgba($pink-400, 0.5),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
), ),
"pumpkin": ( "pumpkin": (
"dark": ( "dark": (
"text-selection-color": rgba($pumpkin-350, 0.1875), "text-selection-color": rgba($pumpkin-350, 0.1875),
"primary": $pumpkin-350, "primary": $pumpkin-350,
"primary-background": $pumpkin-300, "primary-background": $pumpkin-300,
"primary-underline": rgba($pumpkin-350, 0.5), "primary-underline": rgba($pumpkin-350, 0.5),
"primary-hover": $pumpkin-250, "primary-hover": $pumpkin-250,
"primary-hover-background": $pumpkin-250, "primary-hover-background": $pumpkin-250,
"primary-focus": rgba($pumpkin-350, 0.375), "primary-focus": rgba($pumpkin-350, 0.375),
"primary-inverse": $black, "primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25), "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
), ),
"light": ( "light": (
"text-selection-color": rgba($pumpkin-400, 0.25), "text-selection-color": rgba($pumpkin-400, 0.25),
"primary": $pumpkin-550, "primary": $pumpkin-550,
"primary-background": $pumpkin-300, "primary-background": $pumpkin-300,
"primary-underline": rgba($pumpkin-550, 0.5), "primary-underline": rgba($pumpkin-550, 0.5),
"primary-hover": $pumpkin-650, "primary-hover": $pumpkin-650,
"primary-hover-background": $pumpkin-350, "primary-hover-background": $pumpkin-350,
"primary-focus": rgba($pumpkin-400, 0.5), "primary-focus": rgba($pumpkin-400, 0.5),
"primary-inverse": $black, "primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25), "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
), ),
), ),
"purple": ( "purple": (
"dark": ( "dark": (
"text-selection-color": rgba($purple-350, 0.1875), "text-selection-color": rgba($purple-350, 0.1875),
"primary": $purple-350, "primary": $purple-350,
"primary-background": $purple-600, "primary-background": $purple-600,
"primary-underline": rgba($purple-350, 0.5), "primary-underline": rgba($purple-350, 0.5),
"primary-hover": $purple-250, "primary-hover": $purple-250,
"primary-hover-background": $purple-550, "primary-hover-background": $purple-550,
"primary-focus": rgba($purple-350, 0.375), "primary-focus": rgba($purple-350, 0.375),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
"light": ( "light": (
"text-selection-color": rgba($purple-400, 0.25), "text-selection-color": rgba($purple-400, 0.25),
"primary": $purple-550, "primary": $purple-550,
"primary-background": $purple-600, "primary-background": $purple-600,
"primary-underline": rgba($purple-550, 0.5), "primary-underline": rgba($purple-550, 0.5),
"primary-hover": $purple-650, "primary-hover": $purple-650,
"primary-hover-background": $purple-650, "primary-hover-background": $purple-650,
"primary-focus": rgba($purple-400, 0.5), "primary-focus": rgba($purple-400, 0.5),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
), ),
"red": ( "red": (
"dark": ( "dark": (
"text-selection-color": rgba($red-350, 0.1875), "text-selection-color": rgba($red-350, 0.1875),
"primary": $red-350, "primary": $red-350,
"primary-background": $red-550, "primary-background": $red-550,
"primary-underline": rgba($red-350, 0.5), "primary-underline": rgba($red-350, 0.5),
"primary-hover": $red-250, "primary-hover": $red-250,
"primary-hover-background": $red-500, "primary-hover-background": $red-500,
"primary-focus": rgba($red-350, 0.375), "primary-focus": rgba($red-350, 0.375),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
"light": ( "light": (
"text-selection-color": rgba($red-400, 0.25), "text-selection-color": rgba($red-400, 0.25),
"primary": $red-550, "primary": $red-550,
"primary-background": $red-550, "primary-background": $red-550,
"primary-underline": rgba($red-550, 0.5), "primary-underline": rgba($red-550, 0.5),
"primary-hover": $red-650, "primary-hover": $red-650,
"primary-hover-background": $red-600, "primary-hover-background": $red-600,
"primary-focus": rgba($red-400, 0.5), "primary-focus": rgba($red-400, 0.5),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
), ),
"sand": ( "sand": (
"dark": ( "dark": (
"text-selection-color": rgba($sand-350, 0.1875), "text-selection-color": rgba($sand-350, 0.1875),
"primary": $sand-350, "primary": $sand-350,
"primary-background": $sand-200, "primary-background": $sand-200,
"primary-underline": rgba($sand-350, 0.5), "primary-underline": rgba($sand-350, 0.5),
"primary-hover": $sand-250, "primary-hover": $sand-250,
"primary-hover-background": $sand-150, "primary-hover-background": $sand-150,
"primary-focus": rgba($sand-350, 0.375), "primary-focus": rgba($sand-350, 0.375),
"primary-inverse": $black, "primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25), "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
), ),
"light": ( "light": (
"text-selection-color": rgba($sand-400, 0.25), "text-selection-color": rgba($sand-400, 0.25),
"primary": $sand-550, "primary": $sand-550,
"primary-background": $sand-200, "primary-background": $sand-200,
"primary-underline": rgba($sand-550, 0.5), "primary-underline": rgba($sand-550, 0.5),
"primary-hover": $sand-650, "primary-hover": $sand-650,
"primary-hover-background": $sand-250, "primary-hover-background": $sand-250,
"primary-focus": rgba($sand-400, 0.5), "primary-focus": rgba($sand-400, 0.5),
"primary-inverse": $black, "primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25), "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
), ),
), ),
"slate": ( "slate": (
"dark": ( "dark": (
"text-selection-color": rgba($slate-350, 0.1875), "text-selection-color": rgba($slate-350, 0.1875),
"primary": $slate-350, "primary": $slate-350,
"primary-background": $slate-600, "primary-background": $slate-600,
"primary-underline": rgba($slate-350, 0.5), "primary-underline": rgba($slate-350, 0.5),
"primary-hover": $slate-250, "primary-hover": $slate-250,
"primary-hover-background": $slate-550, "primary-hover-background": $slate-550,
"primary-focus": rgba($slate-350, 0.375), "primary-focus": rgba($slate-350, 0.375),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
"light": ( "light": (
"text-selection-color": rgba($slate-400, 0.25), "text-selection-color": rgba($slate-400, 0.25),
"primary": $slate-550, "primary": $slate-550,
"primary-background": $slate-600, "primary-background": $slate-600,
"primary-underline": rgba($slate-550, 0.5), "primary-underline": rgba($slate-550, 0.5),
"primary-hover": $slate-650, "primary-hover": $slate-650,
"primary-hover-background": $slate-650, "primary-hover-background": $slate-650,
"primary-focus": rgba($slate-400, 0.5), "primary-focus": rgba($slate-400, 0.5),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
), ),
"violet": ( "violet": (
"dark": ( "dark": (
"text-selection-color": rgba($violet-350, 0.1875), "text-selection-color": rgba($violet-350, 0.1875),
"primary": $violet-350, "primary": $violet-350,
"primary-background": $violet-600, "primary-background": $violet-600,
"primary-underline": rgba($violet-350, 0.5), "primary-underline": rgba($violet-350, 0.5),
"primary-hover": $violet-250, "primary-hover": $violet-250,
"primary-hover-background": $violet-550, "primary-hover-background": $violet-550,
"primary-focus": rgba($violet-350, 0.375), "primary-focus": rgba($violet-350, 0.375),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
"light": ( "light": (
"text-selection-color": rgba($violet-400, 0.25), "text-selection-color": rgba($violet-400, 0.25),
"primary": $violet-550, "primary": $violet-550,
"primary-background": $violet-600, "primary-background": $violet-600,
"primary-underline": rgba($violet-550, 0.5), "primary-underline": rgba($violet-550, 0.5),
"primary-hover": $violet-650, "primary-hover": $violet-650,
"primary-hover-background": $violet-650, "primary-hover-background": $violet-650,
"primary-focus": rgba($violet-400, 0.5), "primary-focus": rgba($violet-400, 0.5),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
), ),
"yellow": ( "yellow": (
"dark": ( "dark": (
"text-selection-color": rgba($yellow-350, 0.1875), "text-selection-color": rgba($yellow-350, 0.1875),
"primary": $yellow-350, "primary": $yellow-350,
"primary-background": $yellow-100, "primary-background": $yellow-100,
"primary-underline": rgba($yellow-350, 0.5), "primary-underline": rgba($yellow-350, 0.5),
"primary-hover": $yellow-250, "primary-hover": $yellow-250,
"primary-hover-background": color.mix($yellow-100, $yellow-50), "primary-hover-background": color.mix($yellow-100, $yellow-50),
"primary-focus": rgba($yellow-350, 0.375), "primary-focus": rgba($yellow-350, 0.375),
"primary-inverse": $black, "primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25), "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
), ),
"light": ( "light": (
"text-selection-color": rgba($yellow-400, 0.25), "text-selection-color": rgba($yellow-400, 0.25),
"primary": $yellow-550, "primary": $yellow-550,
"primary-background": $yellow-100, "primary-background": $yellow-100,
"primary-underline": rgba($yellow-550, 0.5), "primary-underline": rgba($yellow-550, 0.5),
"primary-hover": $yellow-650, "primary-hover": $yellow-650,
"primary-hover-background": $yellow-150, "primary-hover-background": $yellow-150,
"primary-focus": rgba($yellow-400, 0.5), "primary-focus": rgba($yellow-400, 0.5),
"primary-inverse": $black, "primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25), "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
), ),
), ),
"zinc": ( "zinc": (
"dark": ( "dark": (
"text-selection-color": rgba($zinc-350, 0.1875), "text-selection-color": rgba($zinc-350, 0.1875),
"primary": $zinc-350, "primary": $zinc-350,
"primary-background": $zinc-550, "primary-background": $zinc-550,
"primary-underline": rgba($zinc-350, 0.5), "primary-underline": rgba($zinc-350, 0.5),
"primary-hover": $zinc-250, "primary-hover": $zinc-250,
"primary-hover-background": $zinc-500, "primary-hover-background": $zinc-500,
"primary-focus": rgba($zinc-350, 0.375), "primary-focus": rgba($zinc-350, 0.375),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
"light": ( "light": (
"text-selection-color": rgba($zinc-400, 0.25), "text-selection-color": rgba($zinc-400, 0.25),
"primary": $zinc-550, "primary": $zinc-550,
"primary-background": $zinc-550, "primary-background": $zinc-550,
"primary-underline": rgba($zinc-550, 0.5), "primary-underline": rgba($zinc-550, 0.5),
"primary-hover": $zinc-650, "primary-hover": $zinc-650,
"primary-hover-background": $zinc-600, "primary-hover-background": $zinc-600,
"primary-focus": rgba($zinc-400, 0.5), "primary-focus": rgba($zinc-400, 0.5),
"primary-inverse": $white, "primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0), "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
), ),
), ),
); );
@function get($key, $mode: "light") { @function get($key, $mode: "light") {
@return map.get(map.get(map.get($color-mappings, $theme-color), $mode), $key); @return map.get(map.get(map.get($color-mappings, $theme-color), $mode), $key);
} }

114
scss/utilities/_accessibility.scss
View file

@ -1,57 +1,57 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "utilities/accessibility") { @if map.get($modules, "utilities/accessibility") {
/** /**
* Accessibility & User interaction * Accessibility & User interaction
*/ */
// 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 v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// Accessibility // Accessibility
// Change the cursor on control elements in all browsers (opinionated) // Change the cursor on control elements in all browsers (opinionated)
#{$parent-selector} [aria-controls] { #{$parent-selector} [aria-controls] {
cursor: pointer; cursor: pointer;
} }
// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated) // Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
#{$parent-selector} [aria-disabled="true"], #{$parent-selector} [aria-disabled="true"],
#{$parent-selector} [disabled] { #{$parent-selector} [disabled] {
cursor: not-allowed; cursor: not-allowed;
} }
// Change the display on visually hidden accessible elements in all browsers (opinionated) // Change the display on visually hidden accessible elements in all browsers (opinionated)
#{$parent-selector} [aria-hidden="false"][hidden] { #{$parent-selector} [aria-hidden="false"][hidden] {
display: initial; display: initial;
} }
#{$parent-selector} [aria-hidden="false"][hidden]:not(:focus) { #{$parent-selector} [aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
position: absolute; position: absolute;
} }
// User interaction // User interaction
// Remove the tapping delay in IE 10 // Remove the tapping delay in IE 10
#{$parent-selector} a, #{$parent-selector} a,
#{$parent-selector} area, #{$parent-selector} area,
#{$parent-selector} button, #{$parent-selector} button,
#{$parent-selector} input, #{$parent-selector} input,
#{$parent-selector} label, #{$parent-selector} label,
#{$parent-selector} select, #{$parent-selector} select,
#{$parent-selector} summary, #{$parent-selector} summary,
#{$parent-selector} textarea, #{$parent-selector} textarea,
#{$parent-selector} [tabindex] { #{$parent-selector} [tabindex] {
-ms-touch-action: manipulation; -ms-touch-action: manipulation;
} }
// Pico // Pico
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} [dir="rtl"] { #{$parent-selector} [dir="rtl"] {
direction: rtl; direction: rtl;
} }
} }

60
scss/utilities/_reduce-motion.scss
View file

@ -1,30 +1,30 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "utilities/reduce-motion") and enable-transitions and enable-important { @if map.get($modules, "utilities/reduce-motion") and enable-transitions and enable-important {
/** /**
* Reduce Motion Features * Reduce Motion Features
*/ */
// Based on : // Based on :
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Remove animations when motion is reduced (opinionated) // 1. Remove animations when motion is reduced (opinionated)
// 2. Remove fixed background attachments when motion is reduced (opinionated) // 2. Remove fixed background attachments when motion is reduced (opinionated)
// 3. Remove timed scrolling behaviors when motion is reduced (opinionated) // 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
// 4. Remove transitions when motion is reduced (opinionated) // 4. Remove transitions when motion is reduced (opinionated)
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
#{$parent-selector} *:not([aria-busy="true"]), #{$parent-selector} *:not([aria-busy="true"]),
#{$parent-selector} :not([aria-busy="true"])::before, #{$parent-selector} :not([aria-busy="true"])::before,
#{$parent-selector} :not([aria-busy="true"])::after { #{$parent-selector} :not([aria-busy="true"])::after {
background-attachment: initial !important; // 2 background-attachment: initial !important; // 2
animation-duration: 1ms !important; // 1 animation-duration: 1ms !important; // 1
animation-delay: -1ms !important; // 1 animation-delay: -1ms !important; // 1
animation-iteration-count: 1 !important; // 1 animation-iteration-count: 1 !important; // 1
scroll-behavior: auto !important; // 3 scroll-behavior: auto !important; // 3
transition-delay: 0s !important; // 4 transition-delay: 0s !important; // 4
transition-duration: 0s !important; // 4 transition-duration: 0s !important; // 4
} }
} }
} }