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

Merge pull request #420 from picocss/ll/v2-css-var-prefix

Browse source 
refactor: css var prefix
This commit is contained in:
Lucas Larroche 2023-12-28 13:25:00 +07:00 • committed by GitHub
commit f6ad4e2be4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
41 changed files with 866 additions and 759 deletions
Download patch file Download diff file Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

5
scss/_settings.scss
View file

@ -4,7 +4,7 @@
// –––––––––––––––––––– // ––––––––––––––––––––
// Prefix for CSS variables // Prefix for CSS variables
$css-var-prefix: "pico-" !default; $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
@ -137,6 +137,3 @@ $modules: map.merge(
), ),
$modules $modules
); );
// Shortcut for CSS vars prefix
$✨: --#{$css-var-prefix};

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

@ -12,13 +12,13 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@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"));
} }
@ -40,7 +40,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@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);
} }
@ -57,7 +57,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
{ {
$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);
} }

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

@ -20,7 +20,7 @@
// 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);
} }
@ -35,7 +35,7 @@
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);
} }

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

@ -19,7 +19,7 @@
@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
@ -27,7 +27,7 @@
index(map.get(settings.$palette, "shades"), $shade) and 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)};
} }
} }
} }
@ -35,16 +35,16 @@
// 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")
)}; )};
} }

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

@ -1,9 +1,19 @@
@use "sass:map"; @use "sass:map";
@use "../../settings" as pico-settings; @use "../../settings" as pico-settings;
// String replace function
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
// Prefix for CSS variables // Prefix for CSS variables
$css-var-prefix: pico-settings.$css-var-prefix !default; $css-var-prefix: pico-settings.$css-var-prefix !default;
$css-class-prefix: pico-settings.$css-var-prefix !default; $css-class-prefix: str-replace(pico-settings.$css-var-prefix, "--", "") !default;
// Palette // Palette
$palette: () !default; $palette: () !default;

26
scss/components/_accordion.scss
View file

@ -8,7 +8,7 @@
details { details {
display: block; display: block;
margin-bottom: var(#{$✨}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
summary { summary {
line-height: 1rem; line-height: 1rem;
@ -16,11 +16,11 @@
cursor: pointer; cursor: pointer;
&:not([role]) { &:not([role]) {
color: var(#{$✨}accordion-close-summary-color); color: var(#{$css-var-prefix}accordion-close-summary-color);
} }
@if $enable-transitions { @if $enable-transitions {
transition: color var(#{$✨}transition); transition: color var(#{$css-var-prefix}transition);
} }
// Reset marker // Reset marker
@ -41,17 +41,17 @@
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-inline-start: calc(var(#{$✨}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(#{$✨}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(#{$✨}transition); transition: transform var(#{$css-var-prefix}transition);
} }
} }
@ -59,15 +59,15 @@
outline: none; outline: none;
&:not([role]) { &:not([role]) {
color: var(#{$✨}accordion-active-summary-color); color: var(#{$css-var-prefix}accordion-active-summary-color);
} }
} }
&:focus-visible { &:focus-visible {
&:not([role]) { &:not([role]) {
outline: var(#{$✨}outline-width) solid var(#{$✨}primary-focus); outline: var(#{$css-var-prefix}outline-width) solid var(#{$css-var-prefix}primary-focus);
outline-offset: calc(var(#{$✨}spacing, 1rem) * 0.5); outline-offset: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
color: var(#{$✨}primary); color: var(#{$css-var-prefix}primary);
} }
} }
@ -78,7 +78,7 @@
// Marker // Marker
&::after { &::after {
height: calc(1rem * var(#{$✨}line-height, 1.5)); height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
} }
} }
} }
@ -86,11 +86,11 @@
// Open // Open
&[open] { &[open] {
> summary { > summary {
margin-bottom: var(#{$✨}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
&:not([role]) { &:not([role]) {
&:not(:focus) { &:not(:focus) {
color: var(#{$✨}accordion-open-summary-color); color: var(#{$css-var-prefix}accordion-open-summary-color);
} }
} }

44
scss/components/_card.scss
View file

@ -7,34 +7,40 @@
*/ */
article { article {
margin-bottom: var(#{$✨}block-spacing-vertical); margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal); padding: var(#{$css-var-prefix}block-spacing-vertical)
border-radius: var(#{$✨}border-radius); var(#{$css-var-prefix}block-spacing-horizontal);
background: var(#{$✨}card-background-color); border-radius: var(#{$css-var-prefix}border-radius);
box-shadow: var(#{$✨}card-box-shadow); background: var(#{$css-var-prefix}card-background-color);
box-shadow: var(#{$css-var-prefix}card-box-shadow);
> header, > header,
> footer { > footer {
margin-right: calc(var(#{$✨}block-spacing-horizontal) * -1); margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
margin-left: calc(var(#{$✨}block-spacing-horizontal) * -1); margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
padding: calc(var(#{$✨}block-spacing-vertical) * 0.66) var(#{$✨}block-spacing-horizontal); padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
background-color: var(#{$✨}card-sectioning-background-color); var(#{$css-var-prefix}block-spacing-horizontal);
background-color: var(#{$css-var-prefix}card-sectioning-background-color);
} }
> header { > header {
margin-top: calc(var(#{$✨}block-spacing-vertical) * -1); margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
margin-bottom: var(#{$✨}block-spacing-vertical); margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
border-bottom: var(#{$✨}border-width) solid var(#{$✨}card-border-color); border-bottom: var(#{$css-var-prefix}border-width)
border-top-right-radius: var(#{$✨}border-radius); solid
border-top-left-radius: var(#{$✨}border-radius); var(#{$css-var-prefix}card-border-color);
border-top-right-radius: var(#{$css-var-prefix}border-radius);
border-top-left-radius: var(#{$css-var-prefix}border-radius);
} }
> footer { > footer {
margin-top: var(#{$✨}block-spacing-vertical); margin-top: var(#{$css-var-prefix}block-spacing-vertical);
margin-bottom: calc(var(#{$✨}block-spacing-vertical) * -1); margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
border-top: var(#{$✨}border-width) solid var(#{$✨}card-border-color); border-top: var(#{$css-var-prefix}border-width)
border-bottom-right-radius: var(#{$✨}border-radius); solid
border-bottom-left-radius: var(#{$✨}border-radius); var(#{$css-var-prefix}card-border-color);
border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
} }
} }
} }

119
scss/components/_dropdown.scss
View file

@ -20,13 +20,13 @@
&::after { &::after {
display: block; display: block;
width: 1rem; width: 1rem;
height: calc(1rem * var(#{$✨}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);
background-image: var(#{$✨}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;
@ -49,37 +49,44 @@
details.dropdown summary:not([role]) { details.dropdown summary:not([role]) {
height: calc( height: calc(
1rem * 1rem *
var(#{$✨}line-height) + var(#{$css-var-prefix}line-height) +
var(#{$✨}form-element-spacing-vertical) * var(#{$css-var-prefix}form-element-spacing-vertical) *
2 + 2 +
var(#{$✨}border-width) * var(#{$css-var-prefix}border-width) *
2 2
); );
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal); padding: var(#{$css-var-prefix}form-element-spacing-vertical)
border: var(#{$✨}border-width) solid var(#{$✨}form-element-border-color); var(#{$css-var-prefix}form-element-spacing-horizontal);
border-radius: var(#{$✨}border-radius); border: var(#{$css-var-prefix}border-width)
background-color: var(#{$✨}form-element-background-color); solid
color: var(#{$✨}form-element-placeholder-color); var(#{$css-var-prefix}form-element-border-color);
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}form-element-background-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(#{$✨}transition), background-color var(#{$css-var-prefix}transition),
border-color var(#{$✨}transition), border-color var(#{$css-var-prefix}transition),
color var(#{$✨}transition), color var(#{$css-var-prefix}transition),
box-shadow var(#{$✨}transition); box-shadow var(#{$css-var-prefix}transition);
} }
&:active, &:active,
&:focus { &:focus {
border-color: var(#{$✨}form-element-active-border-color); border-color: var(#{$css-var-prefix}form-element-active-border-color);
background-color: var(#{$✨}form-element-active-background-color); background-color: var(#{$css-var-prefix}form-element-active-background-color);
} }
&:focus { &:focus {
box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color); box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-focus-color);
} }
// Reset focus visible from accordion component // Reset focus visible from accordion component
@ -89,15 +96,27 @@
// Aria-invalid // Aria-invalid
&[aria-invalid="false"] { &[aria-invalid="false"] {
#{$✨}form-element-border-color: var(#{$✨}form-element-valid-border-color); #{$css-var-prefix}form-element-border-color: var(
#{$✨}form-element-active-border-color: var(#{$✨}form-element-valid-focus-color); #{$css-var-prefix}form-element-valid-border-color
#{$✨}form-element-focus-color: var(#{$✨}form-element-valid-focus-color); );
#{$css-var-prefix}form-element-active-border-color: var(
#{$css-var-prefix}form-element-valid-focus-color
);
#{$css-var-prefix}form-element-focus-color: var(
#{$css-var-prefix}form-element-valid-focus-color
);
} }
&[aria-invalid="true"] { &[aria-invalid="true"] {
#{$✨}form-element-border-color: var(#{$✨}form-element-invalid-border-color); #{$css-var-prefix}form-element-border-color: var(
#{$✨}form-element-active-border-color: var(#{$✨}form-element-invalid-focus-color); #{$css-var-prefix}form-element-invalid-border-color
#{$✨}form-element-focus-color: var(#{$✨}form-element-invalid-focus-color); );
#{$css-var-prefix}form-element-active-border-color: var(
#{$css-var-prefix}form-element-invalid-focus-color
);
#{$css-var-prefix}form-element-focus-color: var(
#{$css-var-prefix}form-element-invalid-focus-color
);
} }
} }
@ -105,16 +124,22 @@
// –––––––––––––––––––– // ––––––––––––––––––––
nav details.dropdown { nav details.dropdown {
display: inline; display: inline;
margin: calc(var(#{$✨}nav-element-spacing-vertical) * -1) 0; margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
summary:not([role]) { summary:not([role]) {
// Override height // Override height
height: calc((1rem * var(#{$✨}line-height)) + (var(#{$✨}nav-link-spacing-vertical) * 2)); height: calc(
padding: calc(var(#{$✨}nav-link-spacing-vertical) - (var(#{$✨}border-width) * 2)) (1rem * var(#{$css-var-prefix}line-height)) +
var(#{$✨}nav-link-spacing-horizontal); (var(#{$css-var-prefix}nav-link-spacing-vertical) * 2)
);
padding: calc(
var(#{$css-var-prefix}nav-link-spacing-vertical) -
(var(#{$css-var-prefix}border-width) * 2)
)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
&:focus-visible { &:focus-visible {
box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus); box-shadow: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
} }
} }
} }
@ -130,19 +155,19 @@
width: 100%; width: 100%;
min-width: fit-content; min-width: fit-content;
margin: 0; margin: 0;
margin-top: var(#{$✨}outline-width); margin-top: var(#{$css-var-prefix}outline-width);
padding: 0; padding: 0;
border: var(#{$✨}border-width) solid var(#{$✨}dropdown-border-color); border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}dropdown-border-color);
border-radius: var(#{$✨}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$✨}dropdown-background-color); background-color: var(#{$css-var-prefix}dropdown-background-color);
box-shadow: var(#{$✨}dropdown-box-shadow); box-shadow: var(#{$css-var-prefix}dropdown-box-shadow);
color: var(#{$✨}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(--pico-transition), opacity var(#{$css-var-prefix}transition),
transform 0s ease-in-out 1s; transform 0s ease-in-out 1s;
} }
@ -154,27 +179,27 @@
li { li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$✨}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(#{$✨}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(#{$✨}form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
} }
a { a {
display: block; display: block;
margin: calc(var(#{$✨}form-element-spacing-vertical) * -0.5) margin: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * -0.5)
calc(var(#{$✨}form-element-spacing-horizontal) * -1); calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * -1);
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$✨}form-element-spacing-horizontal); var(#{$css-var-prefix}form-element-spacing-horizontal);
overflow: hidden; overflow: hidden;
border-radius: 0; border-radius: 0;
color: var(#{$✨}dropdown-color); color: var(#{$css-var-prefix}dropdown-color);
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -183,7 +208,7 @@
&:active, &:active,
&:focus-visible, &:focus-visible,
&[aria-current]:not([aria-current="false"]) { &[aria-current]:not([aria-current="false"]) {
background-color: var(#{$✨}dropdown-hover-background-color); background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
} }
} }
@ -193,7 +218,7 @@
// 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(#{$✨}dropdown-hover-background-color); background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
} }
} }
} }
@ -240,6 +265,6 @@
// Label // Label
// –––––––––––––––––––– // ––––––––––––––––––––
label > details.dropdown { label > details.dropdown {
margin-top: calc(var(#{$✨}spacing) * 0.25); margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
} }
} }

25
scss/components/_group.scss
View file

@ -31,11 +31,11 @@
[role="group"] { [role="group"] {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
margin-bottom: var(#{$✨}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
border-radius: var(#{$✨}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
box-shadow: var(#{$✨}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(#{$✨}transition); transition: box-shadow var(#{$css-var-prefix}transition);
> *, > *,
input:not([type="checkbox"], [type="radio"]), input:not([type="checkbox"], [type="radio"]),
@ -68,7 +68,7 @@
input:not([type="checkbox"], [type="radio"]), input:not([type="checkbox"], [type="radio"]),
select { select {
&:not(:first-child) { &:not(:first-child) {
margin-left: calc(var(#{$✨}border-width) * -1); margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
} }
} }
@ -83,7 +83,9 @@
@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) {
#{$✨}group-box-shadow: var(#{$✨}group-box-shadow-focus-with-button); #{$css-var-prefix}group-box-shadow: var(
#{$css-var-prefix}group-box-shadow-focus-with-button
);
input:not([type="checkbox"], [type="radio"]), input:not([type="checkbox"], [type="radio"]),
select { select {
@ -93,16 +95,19 @@
// 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) {
#{$✨}group-box-shadow: var(#{$✨}group-box-shadow-focus-with-input); #{$css-var-prefix}group-box-shadow: var(
#{$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"] {
#{$✨}button-box-shadow: 0 0 0 var(#{$✨}border-width) var(#{$✨}primary-border); #{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
#{$✨}button-hover-box-shadow: 0 0 0 var(#{$✨}border-width) var(#{$css-var-prefix}primary-border);
var(#{$✨}primary-hover-border); #{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
var(#{$css-var-prefix}primary-hover-border);
} }
} }

4
scss/components/_loading.scss
View file

@ -14,7 +14,7 @@
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
background-image: var(#{$✨}icon-loading); background-image: var(#{$css-var-prefix}icon-loading);
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
content: ""; content: "";
@ -23,7 +23,7 @@
&:not(:empty) { &:not(:empty) {
&::before { &::before {
margin-inline-end: calc(var(#{$✨}spacing) * 0.5); margin-inline-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
} }
} }

29
scss/components/_modal.scss
View file

@ -7,7 +7,7 @@
*/ */
:root { :root {
#{$✨}scrollbar-width: 0px; #{$css-var-prefix}scrollbar-width: 0px;
} }
dialog { dialog {
@ -25,15 +25,15 @@
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
border: 0; border: 0;
backdrop-filter: var(#{$✨}modal-overlay-backdrop-filter); backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
background-color: var(#{$✨}modal-overlay-background-color); background-color: var(#{$css-var-prefix}modal-overlay-background-color);
color: var(#{$✨}color); color: var(#{$css-var-prefix}color);
// Content // Content
article { article {
width: 100%; width: 100%;
max-height: calc(100vh - var(#{$✨}spacing) * 2); max-height: calc(100vh - var(#{$css-var-prefix}spacing) * 2);
margin: var(#{$✨}spacing); margin: var(#{$css-var-prefix}spacing);
overflow: auto; overflow: auto;
@if map.get($breakpoints, "sm") { @if map.get($breakpoints, "sm") {
@ -50,13 +50,14 @@
> header, > header,
> footer { > footer {
padding: calc(var(#{$✨}block-spacing-vertical) * 0.5) var(#{$✨}block-spacing-horizontal); padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.5)
var(#{$css-var-prefix}block-spacing-horizontal);
} }
> header { > header {
.close { .close {
margin: 0; margin: 0;
margin-left: var(#{$✨}spacing); margin-left: var(#{$css-var-prefix}spacing);
float: right; float: right;
} }
} }
@ -69,7 +70,7 @@
margin-bottom: 0; margin-bottom: 0;
&:not(:first-of-type) { &:not(:first-of-type) {
margin-left: calc(var(#{$✨}spacing) * 0.5); margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5);
} }
} }
} }
@ -80,17 +81,17 @@
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(#{$✨}spacing) * -1); margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
margin-bottom: var(#{$✨}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
margin-left: auto; margin-left: auto;
background-image: var(#{$✨}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;
opacity: 0.5; opacity: 0.5;
@if $enable-transitions { @if $enable-transitions {
transition: opacity var(#{$✨}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) {
@ -110,7 +111,7 @@
// Utilities // Utilities
@if $enable-classes { @if $enable-classes {
.modal-is-open { .modal-is-open {
padding-right: var(#{$✨}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;

41
scss/components/_nav.scss
View file

@ -34,24 +34,26 @@
list-style: none; list-style: none;
&:first-of-type { &:first-of-type {
margin-left: calc(var(#{$✨}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(#{$✨}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(#{$✨}nav-element-spacing-vertical) var(#{$✨}nav-element-spacing-horizontal); padding: var(#{$css-var-prefix}nav-element-spacing-vertical)
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(#{$✨}nav-link-spacing-vertical) * -1) margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1)
calc(var(#{$✨}nav-link-spacing-horizontal) * -1); calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal); padding: var(#{$css-var-prefix}nav-link-spacing-vertical)
border-radius: var(#{$✨}border-radius); var(#{$css-var-prefix}nav-link-spacing-horizontal);
border-radius: var(#{$css-var-prefix}border-radius);
&:not(:hover) { &:not(:hover) {
text-decoration: none; text-decoration: none;
@ -67,8 +69,11 @@
margin-right: inherit; margin-right: inherit;
margin-bottom: 0; margin-bottom: 0;
margin-left: inherit; margin-left: inherit;
padding: calc(var(#{$✨}nav-link-spacing-vertical) - (var(#{$✨}border-width) * 2)) padding: calc(
var(#{$✨}nav-link-spacing-horizontal); var(#{$css-var-prefix}nav-link-spacing-vertical) -
(var(#{$css-var-prefix}border-width) * 2)
)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
} }
} }
@ -79,22 +84,22 @@
& ul li { & ul li {
&:not(:first-child) { &:not(:first-child) {
margin-inline-start: var(#{$✨}nav-link-spacing-horizontal); margin-inline-start: var(#{$css-var-prefix}nav-link-spacing-horizontal);
} }
a { a {
margin: calc(var(#{$✨}nav-link-spacing-vertical) * -1) 0; margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1) 0;
margin-inline-start: calc(var(#{$✨}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(#{$✨}nav-link-spacing-horizontal) * 4); width: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 4);
margin: 0 calc(var(#{$✨}nav-link-spacing-horizontal) * -1); margin: 0 calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
content: var(#{$✨}nav-breadcrumb-divider); content: var(#{$css-var-prefix}nav-breadcrumb-divider);
color: var(#{$✨}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;
@ -122,8 +127,8 @@
} }
li { li {
padding: calc(var(#{$✨}nav-element-spacing-vertical) * 0.5) padding: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * 0.5)
var(#{$✨}nav-element-spacing-horizontal); var(#{$css-var-prefix}nav-element-spacing-horizontal);
a { a {
display: block; display: block;

22
scss/components/_progress.scss
View file

@ -31,42 +31,42 @@
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(#{$✨}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(#{$✨}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$✨}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(#{$✨}progress-color); color: var(#{$css-var-prefix}progress-color);
&::-webkit-progress-bar { &::-webkit-progress-bar {
border-radius: var(#{$✨}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(#{$✨}progress-color); background-color: var(#{$css-var-prefix}progress-color);
@if $enable-transitions { @if $enable-transitions {
transition: inline-size var(#{$✨}transition); transition: inline-size var(#{$css-var-prefix}transition);
} }
} }
&::-moz-progress-bar { &::-moz-progress-bar {
background-color: var(#{$✨}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(#{$✨}progress-background-color) background: var(#{$css-var-prefix}progress-background-color)
linear-gradient( linear-gradient(
to right, to right,
var(#{$✨}progress-color) 30%, var(#{$css-var-prefix}progress-color) 30%,
var(#{$✨}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;

30
scss/components/_tooltip.scss
View file

@ -27,12 +27,12 @@
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(#{$✨}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$✨}tooltip-background-color); background: var(#{$css-var-prefix}tooltip-background-color);
content: attr(data-tooltip); content: attr(data-tooltip);
color: var(#{$✨}tooltip-color); color: var(#{$css-var-prefix}tooltip-color);
font-style: normal; font-style: normal;
font-weight: var(#{$✨}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
font-size: 0.875rem; font-size: 0.875rem;
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -52,7 +52,7 @@
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(#{$✨}tooltip-background-color); color: var(#{$css-var-prefix}tooltip-background-color);
} }
&[data-placement="bottom"] { &[data-placement="bottom"] {
@ -121,7 +121,7 @@
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
#{$✨}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;
@ -130,7 +130,7 @@
} }
&::after { &::after {
#{$✨}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;
} }
@ -142,13 +142,13 @@
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
#{$✨}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 {
#{$✨}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;
} }
@ -161,13 +161,13 @@
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
#{$✨}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 {
#{$✨}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;
} }
@ -180,13 +180,13 @@
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
#{$✨}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 {
#{$✨}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;
} }
@ -196,7 +196,7 @@
@keyframes tooltip-slide { @keyframes tooltip-slide {
to { to {
transform: var(#{$✨}tooltip-slide-to); transform: var(#{$css-var-prefix}tooltip-slide-to);
opacity: 1; opacity: 1;
} }
} }
@ -206,7 +206,7 @@
opacity: 0; opacity: 0;
} }
to { to {
transform: var(#{$✨}tooltip-caret-slide-to); transform: var(#{$css-var-prefix}tooltip-caret-slide-to);
opacity: 1; opacity: 1;
} }
} }

124
scss/content/_button.scss
View file

@ -38,20 +38,21 @@
[type="button"], [type="button"],
[type="file"]::file-selector-button, [type="file"]::file-selector-button,
[role="button"] { [role="button"] {
#{$✨}background-color: var(#{$✨}primary-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
#{$✨}border-color: var(#{$✨}primary-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
#{$✨}color: var(#{$✨}primary-inverse); #{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
#{$✨}box-shadow: var(#{$✨}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(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal); padding: var(#{$css-var-prefix}form-element-spacing-vertical)
border: var(#{$✨}border-width) solid var(#{$✨}border-color); var(#{$css-var-prefix}form-element-spacing-horizontal);
border-radius: var(#{$✨}border-radius); border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: var(#{$css-var-prefix}border-radius);
outline: none; outline: none;
background-color: var(#{$✨}background-color); background-color: var(#{$css-var-prefix}background-color);
box-shadow: var(#{$✨}box-shadow); box-shadow: var(#{$css-var-prefix}box-shadow);
color: var(#{$✨}color); color: var(#{$css-var-prefix}color);
font-weight: var(#{$✨}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
font-size: 1rem; font-size: 1rem;
line-height: var(#{$✨}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;
@ -59,30 +60,33 @@
@if $enable-transitions { @if $enable-transitions {
transition: transition:
background-color var(#{$✨}transition), background-color var(#{$css-var-prefix}transition),
border-color var(#{$✨}transition), border-color var(#{$css-var-prefix}transition),
color var(#{$✨}transition), color var(#{$css-var-prefix}transition),
box-shadow var(#{$✨}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) {
#{$✨}background-color: var(#{$✨}primary-hover-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
#{$✨}border-color: var(#{$✨}primary-hover-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); #{$css-var-prefix}box-shadow: var(
#{$✨}color: var(#{$✨}primary-inverse); #{$css-var-prefix}button-hover-box-shadow,
0 0 0 rgba(0, 0, 0, 0)
);
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
} }
&:focus { &:focus {
#{$✨}box-shadow: #{$css-var-prefix}box-shadow:
var(#{$✨}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(#{$✨}outline-width) var(#{$✨}primary-focus); 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
} }
} }
[type="submit"], [type="submit"],
[type="reset"], [type="reset"],
[type="button"] { [type="button"] {
margin-bottom: var(#{$✨}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
} }
// .secondary, .contrast & .outline // .secondary, .contrast & .outline
@ -91,93 +95,93 @@
:is(button, [type="submit"], [type="button"], [role="button"]).secondary, :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
[type="reset"], [type="reset"],
[type="file"]::file-selector-button { [type="file"]::file-selector-button {
#{$✨}background-color: var(#{$✨}secondary-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
#{$✨}border-color: var(#{$✨}secondary-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
#{$✨}color: var(#{$✨}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) {
#{$✨}background-color: var(#{$✨}secondary-hover-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
#{$✨}border-color: var(#{$✨}secondary-hover-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
#{$✨}color: var(#{$✨}secondary-inverse); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
} }
&:focus { &:focus {
#{$✨}box-shadow: #{$css-var-prefix}box-shadow:
var(#{$✨}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(#{$✨}outline-width) var(#{$✨}secondary-focus); 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
} }
} }
// Contrast // Contrast
:is(button, [type="submit"], [type="button"], [role="button"]).contrast { :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
#{$✨}background-color: var(#{$✨}contrast-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
#{$✨}border-color: var(#{$✨}contrast-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
#{$✨}color: var(#{$✨}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) {
#{$✨}background-color: var(#{$✨}contrast-hover-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-hover-background);
#{$✨}border-color: var(#{$✨}contrast-hover-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover-border);
#{$✨}color: var(#{$✨}contrast-inverse); #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
} }
&:focus { &:focus {
#{$✨}box-shadow: #{$css-var-prefix}box-shadow:
var(#{$✨}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(#{$✨}outline-width) var(#{$✨}contrast-focus); 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
} }
} }
// Outline (primary) // Outline (primary)
:is(button, [type="submit"], [type="button"], [role="button"]).outline, :is(button, [type="submit"], [type="button"], [role="button"]).outline,
[type="reset"].outline { [type="reset"].outline {
#{$✨}background-color: transparent; #{$css-var-prefix}background-color: transparent;
#{$✨}color: var(#{$✨}primary); #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
#{$✨}border-color: currentColor; #{$css-var-prefix}border-color: currentColor;
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$✨}background-color: transparent; #{$css-var-prefix}background-color: transparent;
#{$✨}color: var(#{$✨}primary-hover); #{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
} }
} }
// Outline (secondary) // Outline (secondary)
: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 {
#{$✨}color: var(#{$✨}secondary); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
#{$✨}border-color: currentColor; #{$css-var-prefix}border-color: currentColor;
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$✨}color: var(#{$✨}secondary-hover); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
} }
} }
// Outline (contrast) // Outline (contrast)
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast { :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
#{$✨}color: var(#{$✨}contrast); #{$css-var-prefix}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) {
#{$✨}color: var(#{$✨}contrast-hover); #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
} }
} }
} @else { } @else {
// Secondary button without .class // Secondary button without .class
[type="reset"], [type="reset"],
[type="file"]::file-selector-button { [type="file"]::file-selector-button {
#{$✨}background-color: var(#{$✨}secondary); #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary);
#{$✨}border-color: var(#{$✨}secondary); #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
#{$✨}color: var(#{$✨}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) {
#{$✨}background-color: var(#{$✨}secondary-hover); #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover);
#{$✨}border-color: var(#{$✨}secondary-hover); #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
} }
&:focus { &:focus {
#{$✨}box-shadow: #{$css-var-prefix}box-shadow:
var(#{$✨}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(#{$✨}outline-width) var(#{$✨}secondary-focus); 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
} }
} }
} }

20
scss/content/_code.scss
View file

@ -18,7 +18,7 @@
kbd, kbd,
samp { samp {
font-size: 0.875em; // 2 font-size: 0.875em; // 2
font-family: var(#{$✨}font-family); // 1 font-family: var(#{$css-var-prefix}font-family); // 1
} }
pre code { pre code {
@ -38,10 +38,10 @@
pre, pre,
code, code,
kbd { kbd {
border-radius: var(#{$✨}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$✨}code-background-color); background: var(#{$css-var-prefix}code-background-color);
color: var(#{$✨}code-color); color: var(#{$css-var-prefix}code-color);
font-weight: var(#{$✨}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
line-height: initial; line-height: initial;
} }
@ -53,21 +53,21 @@
pre { pre {
display: block; display: block;
margin-bottom: var(#{$✨}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
overflow-x: auto; overflow-x: auto;
> code { > code {
display: block; display: block;
padding: var(#{$✨}spacing); padding: var(#{$css-var-prefix}spacing);
background: none; background: none;
line-height: var(#{$✨}line-height); line-height: var(#{$css-var-prefix}line-height);
} }
} }
// kbd // kbd
kbd { kbd {
background-color: var(#{$✨}code-kbd-background-color); background-color: var(#{$css-var-prefix}code-kbd-background-color);
color: var(#{$✨}code-kbd-color); color: var(#{$css-var-prefix}code-kbd-color);
vertical-align: baseline; vertical-align: baseline;
} }
} }

46
scss/content/_link.scss
View file

@ -8,54 +8,54 @@
a, a,
[role="link"] { [role="link"] {
#{$✨}color: var(#{$✨}primary); #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
#{$✨}background-color: transparent; #{$css-var-prefix}background-color: transparent;
#{$✨}underline: var(#{$✨}primary-underline); #{$css-var-prefix}underline: var(#{$css-var-prefix}primary-underline);
outline: none; outline: none;
background-color: var(#{$✨}background-color); // 1 background-color: var(#{$css-var-prefix}background-color); // 1
color: var(#{$✨}color); color: var(#{$css-var-prefix}color);
text-decoration: var(#{$✨}text-decoration); text-decoration: var(#{$css-var-prefix}text-decoration);
text-decoration-color: var(#{$✨}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(#{$✨}transition), background-color var(#{$css-var-prefix}transition),
color var(#{$✨}transition), color var(#{$css-var-prefix}transition),
text-decoration var(#{$✨}transition), text-decoration var(#{$css-var-prefix}transition),
box-shadow var(#{$✨}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) {
#{$✨}color: var(#{$✨}primary-hover); #{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
#{$✨}underline: var(#{$✨}primary-hover-underline); #{$css-var-prefix}underline: var(#{$css-var-prefix}primary-hover-underline);
#{$✨}text-decoration: underline; #{$css-var-prefix}text-decoration: underline;
} }
&:focus-visible { &:focus-visible {
box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}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 {
#{$✨}color: var(#{$✨}secondary); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
#{$✨}underline: var(#{$✨}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) {
#{$✨}color: var(#{$✨}secondary-hover); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
#{$✨}underline: var(#{$✨}secondary-hover-underline); #{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-hover-underline);
} }
} }
// Contrast // Contrast
&.contrast { &.contrast {
#{$✨}color: var(#{$✨}contrast); #{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
#{$✨}underline: var(#{$✨}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) {
#{$✨}color: var(#{$✨}contrast-hover); #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
#{$✨}underline: var(#{$✨}contrast-hover-underline); #{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-hover-underline);
} }
} }
} }

4
scss/content/_miscs.scss
View file

@ -15,9 +15,9 @@
// 2. Add the correct box sizing in Firefox // 2. Add the correct box sizing in Firefox
hr { hr {
height: 0; // 2 height: 0; // 2
margin: var(#{$✨}typography-spacing-vertical) 0; margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(#{$✨}muted-border-color); border-top: 1px solid var(#{$css-var-prefix}muted-border-color);
color: inherit; // 1 color: inherit; // 1
} }

18
scss/content/_table.scss
View file

@ -26,11 +26,13 @@
// Cells // Cells
th, th,
td { td {
padding: calc(var(#{$✨}spacing) / 2) var(#{$✨}spacing); padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
border-bottom: var(#{$✨}border-width) solid var(#{$✨}table-border-color); border-bottom: var(#{$css-var-prefix}border-width)
background-color: var(#{$✨}background-color); solid
color: var(#{$✨}color); var(#{$css-var-prefix}table-border-color);
font-weight: var(#{$✨}font-weight); background-color: var(#{$css-var-prefix}background-color);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight);
text-align: left; text-align: left;
text-align: start; text-align: start;
} }
@ -39,7 +41,9 @@
tfoot { tfoot {
th, th,
td { td {
border-top: var(#{$✨}border-width) solid var(#{$✨}table-border-color); border-top: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}table-border-color);
border-bottom: 0; border-bottom: 0;
} }
} }
@ -50,7 +54,7 @@
&.striped { &.striped {
tbody tr:nth-child(odd) th, tbody tr:nth-child(odd) th,
tbody tr:nth-child(odd) td { tbody tr:nth-child(odd) td {
background-color: var(#{$✨}table-row-stripped-background-color); background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
} }
} }
} }

66
scss/content/_typography.scss
View file

@ -44,10 +44,10 @@
table, table,
ul { ul {
margin-top: 0; margin-top: 0;
margin-bottom: var(#{$✨}typography-spacing-vertical); margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
color: var(#{$✨}color); color: var(#{$css-var-prefix}color);
font-style: normal; font-style: normal;
font-weight: var(#{$✨}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
} }
// Headings // Headings
@ -58,48 +58,48 @@
h5, h5,
h6 { h6 {
margin-top: 0; margin-top: 0;
margin-bottom: var(#{$✨}typography-spacing-vertical); margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
color: var(#{$✨}color); color: var(#{$css-var-prefix}color);
font-weight: var(#{$✨}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$✨}font-size); font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$✨}line-height); line-height: var(#{$css-var-prefix}line-height);
font-family: var(#{$✨}font-family); font-family: var(#{$css-var-prefix}font-family);
} }
h1 { h1 {
#{$✨}color: var(#{$✨}h1-color); #{$css-var-prefix}color: var(#{$css-var-prefix}h1-color);
} }
h2 { h2 {
#{$✨}color: var(#{$✨}h2-color); #{$css-var-prefix}color: var(#{$css-var-prefix}h2-color);
} }
h3 { h3 {
#{$✨}color: var(#{$✨}h3-color); #{$css-var-prefix}color: var(#{$css-var-prefix}h3-color);
} }
h4 { h4 {
#{$✨}color: var(#{$✨}h4-color); #{$css-var-prefix}color: var(#{$css-var-prefix}h4-color);
} }
h5 { h5 {
#{$✨}color: var(#{$✨}h5-color); #{$css-var-prefix}color: var(#{$css-var-prefix}h5-color);
} }
h6 { h6 {
#{$✨}color: var(#{$✨}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
: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(#{$✨}typography-spacing-top); margin-top: var(#{$css-var-prefix}typography-spacing-top);
} }
} }
// Paragraphs // Paragraphs
p { p {
margin-bottom: var(#{$✨}typography-spacing-vertical); margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
} }
// Heading group // Heading group
hgroup { hgroup {
margin-bottom: var(#{$✨}typography-spacing-vertical); margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
> * { > * {
margin-top: 0; margin-top: 0;
@ -107,8 +107,8 @@
} }
> *:not(:first-child):last-child { > *:not(:first-child):last-child {
#{$✨}color: var(#{$✨}muted-color); #{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
#{$✨}font-weight: unset; #{$css-var-prefix}font-weight: unset;
font-size: 1rem; font-size: 1rem;
font-family: unset; font-family: unset;
} }
@ -117,7 +117,7 @@
// Lists // Lists
:where(ol, ul) { :where(ol, ul) {
li { li {
margin-bottom: calc(var(#{$✨}typography-spacing-vertical) * 0.25); margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
} }
} }
@ -125,7 +125,7 @@
// 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
:where(dl, ol, ul) :where(dl, ol, ul) { :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; // 1 margin: 0; // 1
margin-top: calc(var(#{$✨}typography-spacing-vertical) * 0.25); margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
} }
ul li { ul li {
@ -135,24 +135,24 @@
// Highlighted text // Highlighted text
mark { mark {
padding: 0.125rem 0.25rem; padding: 0.125rem 0.25rem;
background-color: var(#{$✨}mark-background-color); background-color: var(#{$css-var-prefix}mark-background-color);
color: var(#{$✨}mark-color); color: var(#{$css-var-prefix}mark-color);
vertical-align: baseline; vertical-align: baseline;
} }
// Blockquote // Blockquote
blockquote { blockquote {
display: block; display: block;
margin: var(#{$✨}typography-spacing-vertical) 0; margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
padding: var(#{$✨}spacing); padding: var(#{$css-var-prefix}spacing);
border-right: none; border-right: none;
border-left: 0.25rem solid var(#{$✨}blockquote-border-color); border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
border-inline-start: 0.25rem solid var(#{$✨}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(#{$✨}typography-spacing-vertical) * 0.5); margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
color: var(#{$✨}blockquote-footer-color); color: var(#{$css-var-prefix}blockquote-footer-color);
} }
} }
@ -166,17 +166,17 @@
// Ins // Ins
ins { ins {
color: var(#{$✨}ins-color); color: var(#{$css-var-prefix}ins-color);
text-decoration: none; text-decoration: none;
} }
// del // del
del { del {
color: var(#{$✨}del-color); color: var(#{$css-var-prefix}del-color);
} }
// selection // selection
::selection { ::selection {
background-color: var(#{$✨}text-selection-color); background-color: var(#{$css-var-prefix}text-selection-color);
} }
} }

173
scss/forms/_basics.scss
View file

@ -21,7 +21,7 @@
textarea { textarea {
margin: 0; // 2 margin: 0; // 2
font-size: 1rem; // 1 font-size: 1rem; // 1
line-height: var(#{$✨}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
} }
@ -117,16 +117,16 @@
// Force height for alternatives input types // Force height for alternatives input types
input:not([type="checkbox"], [type="radio"], [type="range"]) { input:not([type="checkbox"], [type="radio"], [type="range"]) {
height: calc( height: calc(
(1rem * var(#{$✨}line-height)) + (1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$✨}form-element-spacing-vertical) * 2) + (var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
(var(#{$✨}border-width) * 2) (var(#{$css-var-prefix}border-width) * 2)
); );
} }
// Fieldset // Fieldset
fieldset { fieldset {
margin: 0; margin: 0;
margin-bottom: var(#{$✨}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -135,12 +135,12 @@
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(#{$✨}spacing) * 0.375); margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
font-weight: var(#{$✨}form-label-font-weight, var(#{$✨}font-weight)); font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
} }
fieldset legend { fieldset legend {
margin-bottom: calc(var(#{$✨}spacing) * 0.5); margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
} }
// Blocks, 100% // Blocks, 100%
@ -156,31 +156,32 @@
select, select,
textarea { textarea {
appearance: none; appearance: none;
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal); padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal);
} }
// Commons styles // Commons styles
input, input,
select, select,
textarea { textarea {
#{$✨}background-color: var(#{$✨}form-element-background-color); #{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-background-color);
#{$✨}border-color: var(#{$✨}form-element-border-color); #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-border-color);
#{$✨}color: var(#{$✨}form-element-color); #{$css-var-prefix}color: var(#{$css-var-prefix}form-element-color);
#{$✨}box-shadow: none; #{$css-var-prefix}box-shadow: none;
border: var(#{$✨}border-width) solid var(#{$✨}border-color); border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: var(#{$✨}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
outline: none; outline: none;
background-color: var(#{$✨}background-color); background-color: var(#{$css-var-prefix}background-color);
box-shadow: var(#{$✨}box-shadow); box-shadow: var(#{$css-var-prefix}box-shadow);
color: var(#{$✨}color); color: var(#{$css-var-prefix}color);
font-weight: var(#{$✨}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
@if $enable-transitions { @if $enable-transitions {
transition: transition:
background-color var(#{$✨}transition), background-color var(#{$css-var-prefix}transition),
border-color var(#{$✨}transition), border-color var(#{$css-var-prefix}transition),
color var(#{$✨}transition), color var(#{$css-var-prefix}transition),
box-shadow var(#{$✨}transition); box-shadow var(#{$css-var-prefix}transition);
} }
} }
@ -195,7 +196,9 @@
), ),
:where(select, textarea) { :where(select, textarea) {
&:is(:active, :focus) { &:is(:active, :focus) {
#{$✨}background-color: var(#{$✨}form-element-active-background-color); #{$css-var-prefix}background-color: var(
#{$css-var-prefix}form-element-active-background-color
);
} }
} }
@ -203,7 +206,7 @@
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]), input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
:where(select, textarea) { :where(select, textarea) {
&:is(:active, :focus) { &:is(:active, :focus) {
#{$✨}border-color: var(#{$✨}form-element-active-border-color); #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-active-border-color);
} }
} }
@ -218,7 +221,11 @@
), ),
:where(select, textarea) { :where(select, textarea) {
&:focus { &:focus {
#{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color); #{$css-var-prefix}box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-focus-color);
} }
} }
@ -229,9 +236,11 @@
label[aria-disabled="true"], label[aria-disabled="true"],
: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) {
#{$✨}background-color: var(#{$✨}form-element-disabled-background-color); #{$css-var-prefix}background-color: var(
#{$✨}border-color: var(#{$✨}form-element-disabled-border-color); #{$css-var-prefix}form-element-disabled-background-color
opacity: var(#{$✨}form-element-disabled-opacity); );
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-disabled-border-color);
opacity: var(#{$css-var-prefix}form-element-disabled-opacity);
pointer-events: none; pointer-events: none;
} }
@ -253,15 +262,19 @@
) { ) {
&[aria-invalid] { &[aria-invalid] {
@if $enable-important { @if $enable-important {
padding-right: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem) !important; padding-right: calc(
padding-left: var(#{$✨}form-element-spacing-horizontal); var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
padding-inline-start: var(#{$✨}form-element-spacing-horizontal) !important; ) !important;
padding-inline-end: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem) !important; padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
padding-inline-end: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
) !important;
} @else { } @else {
padding-right: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$✨}form-element-spacing-horizontal); padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$✨}form-element-spacing-horizontal); padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-end: calc(var(#{$✨}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;
@ -269,65 +282,73 @@
} }
&[aria-invalid="false"]:not(select) { &[aria-invalid="false"]:not(select) {
background-image: var(#{$✨}icon-valid); background-image: var(#{$css-var-prefix}icon-valid);
} }
&[aria-invalid="true"]:not(select) { &[aria-invalid="true"]:not(select) {
background-image: var(#{$✨}icon-invalid); background-image: var(#{$css-var-prefix}icon-invalid);
} }
} }
&[aria-invalid="false"] { &[aria-invalid="false"] {
#{$✨}border-color: var(#{$✨}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 {
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color) !important; #{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
) !important;
&:not([type="checkbox"], [type="radio"]) { &:not([type="checkbox"], [type="radio"]) {
#{$✨}box-shadow: 0 #{$css-var-prefix}box-shadow: 0
0 0
0 0
var(#{$✨}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$✨}form-element-valid-focus-color) !important; var(#{$css-var-prefix}form-element-valid-focus-color) !important;
} }
} @else { } @else {
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color); #{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);
&:not([type="checkbox"], [type="radio"]) { &:not([type="checkbox"], [type="radio"]) {
#{$✨}box-shadow: 0 #{$css-var-prefix}box-shadow: 0
0 0
0 0
var(#{$✨}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$✨}form-element-valid-focus-color); var(#{$css-var-prefix}form-element-valid-focus-color);
} }
} }
} }
} }
&[aria-invalid="true"] { &[aria-invalid="true"] {
#{$✨}border-color: var(#{$✨}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 {
#{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color) !important; #{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
) !important;
&:not([type="checkbox"], [type="radio"]) { &:not([type="checkbox"], [type="radio"]) {
#{$✨}box-shadow: 0 #{$css-var-prefix}box-shadow: 0
0 0
0 0
var(#{$✨}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$✨}form-element-invalid-focus-color) !important; var(#{$css-var-prefix}form-element-invalid-focus-color) !important;
} }
} @else { } @else {
#{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color); #{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
);
&:not([type="checkbox"], [type="radio"]) { &:not([type="checkbox"], [type="radio"]) {
#{$✨}box-shadow: 0 #{$css-var-prefix}box-shadow: 0
0 0
0 0
var(#{$✨}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$✨}form-element-invalid-focus-color); var(#{$css-var-prefix}form-element-invalid-focus-color);
} }
} }
} }
@ -350,7 +371,7 @@
textarea::placeholder, textarea::placeholder,
textarea::-webkit-input-placeholder, textarea::-webkit-input-placeholder,
select:invalid { select:invalid {
color: var(#{$✨}form-element-placeholder-color); color: var(#{$css-var-prefix}form-element-placeholder-color);
opacity: 1; opacity: 1;
} }
@ -358,7 +379,7 @@
input:not([type="checkbox"], [type="radio"]), input:not([type="checkbox"], [type="radio"]),
select, select,
textarea { textarea {
margin-bottom: var(#{$✨}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
} }
// Select // Select
@ -370,11 +391,11 @@
} }
&:not([multiple], [size]) { &:not([multiple], [size]) {
padding-right: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$✨}form-element-spacing-horizontal); padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$✨}form-element-spacing-horizontal); padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-end: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
background-image: var(#{$✨}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;
@ -383,7 +404,7 @@
&[multiple] { &[multiple] {
option { option {
&:checked { &:checked {
background: var(#{$✨}form-element-selected-background-color); background: var(#{$css-var-prefix}form-element-selected-background-color);
} }
} }
} }
@ -404,13 +425,13 @@
&[aria-invalid] { &[aria-invalid] {
@if $enable-important { @if $enable-important {
#{$✨}icon-height: calc( #{$css-var-prefix}icon-height: calc(
(1rem * var(#{$✨}line-height)) + (1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$✨}form-element-spacing-vertical) * 2) + (var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
(var(#{$✨}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(#{$✨}icon-height) !important; background-size: 1rem var(#{$css-var-prefix}icon-height) !important;
} }
} }
} }
@ -422,18 +443,18 @@
+ small { + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(#{$✨}spacing) * -0.75); margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75);
margin-bottom: var(#{$✨}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
color: var(#{$✨}muted-color); color: var(#{$css-var-prefix}muted-color);
} }
&[aria-invalid="false"] { &[aria-invalid="false"] {
+ small { + small {
color: var(#{$✨}ins-color); color: var(#{$css-var-prefix}ins-color);
} }
} }
&[aria-invalid="true"] { &[aria-invalid="true"] {
+ small { + small {
color: var(#{$✨}del-color); color: var(#{$css-var-prefix}del-color);
} }
} }
} }
@ -441,7 +462,7 @@
// Styles for Input inside a label // Styles for Input inside a label
label { label {
> :where(input, select, textarea) { > :where(input, select, textarea) {
margin-top: calc(var(#{$✨}spacing) * 0.25); margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
} }
} }
} }

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

@ -24,7 +24,7 @@
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(#{$✨}border-width); border-width: var(#{$css-var-prefix}border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -35,9 +35,9 @@
&:checked, &:checked,
&:checked:active, &:checked:active,
&:checked:focus { &:checked:focus {
#{$✨}background-color: var(#{$✨}primary-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
#{$✨}border-color: var(#{$✨}primary-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
background-image: var(#{$✨}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;
@ -57,9 +57,9 @@
// Checkboxes // Checkboxes
[type="checkbox"] { [type="checkbox"] {
&:indeterminate { &:indeterminate {
#{$✨}background-color: var(#{$✨}primary-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
#{$✨}border-color: var(#{$✨}primary-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
background-image: var(#{$✨}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;
@ -73,7 +73,7 @@
&:checked, &:checked,
&:checked:active, &:checked:active,
&:checked:focus { &:checked:focus {
#{$✨}background-color: var(#{$✨}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;
} }
@ -81,8 +81,8 @@
// Switchs // Switchs
[type="checkbox"][role="switch"] { [type="checkbox"][role="switch"] {
#{$✨}background-color: var(#{$✨}switch-background-color); #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
#{$✨}color: var(#{$✨}switch-color); #{$css-var-prefix}color: var(#{$css-var-prefix}switch-color);
// Config // Config
$switch-height: 1.25em; $switch-height: 1.25em;
@ -92,21 +92,21 @@
// Styles // Styles
width: $switch-width; width: $switch-width;
height: $switch-height; height: $switch-height;
border: var(#{$✨}border-width) solid var(#{$✨}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(#{$✨}background-color); background-color: var(#{$css-var-prefix}background-color);
line-height: $switch-height; line-height: $switch-height;
&:not([aria-invalid]) { &:not([aria-invalid]) {
#{$✨}border-color: var(#{$✨}switch-background-color); #{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
} }
&:before { &:before {
display: block; display: block;
width: calc(#{$switch-height} - (var(#{$✨}border-width) * 2)); width: calc(#{$switch-height} - (var(#{$css-var-prefix}border-width) * 2));
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
background-color: var(#{$✨}color); background-color: var(#{$css-var-prefix}color);
content: ""; content: "";
@if $enable-transitions { @if $enable-transitions {
@ -115,22 +115,22 @@
} }
&:focus { &:focus {
#{$✨}background-color: var(#{$✨}switch-background-color); #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
#{$✨}border-color: var(#{$✨}switch-background-color); #{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
} }
&:checked { &:checked {
#{$✨}background-color: var(#{$✨}switch-checked-background-color); #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-checked-background-color);
#{$✨}border-color: var(#{$✨}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 * 0.5} - var(#{$✨}border-width)); margin-inline-start: calc(#{$switch-width * 0.5} - var(#{$css-var-prefix}border-width));
} }
} }
&[disabled] { &[disabled] {
#{$✨}background-color: var(#{$✨}border-color); #{$css-var-prefix}background-color: var(#{$css-var-prefix}border-color);
} }
} }
@ -141,14 +141,16 @@
&:checked, &:checked,
&:checked:active, &:checked:active,
&:checked:focus { &:checked:focus {
#{$✨}background-color: var(#{$✨}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"] {
#{$✨}background-color: var(#{$✨}form-element-invalid-border-color); #{$css-var-prefix}background-color: var(
#{$css-var-prefix}form-element-invalid-border-color
);
} }
} }
} }
@ -160,14 +162,14 @@
&:checked, &:checked,
&:checked:active, &:checked:active,
&:checked:focus { &:checked:focus {
#{$✨}border-color: var(#{$✨}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"] {
#{$✨}border-color: var(#{$✨}form-element-invalid-border-color); #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
} }
} }
} }

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

@ -9,7 +9,7 @@
// Swatch // Swatch
@mixin color-swatch { @mixin color-swatch {
border: 0; border: 0;
border-radius: calc(var(#{$✨}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") {

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

@ -9,18 +9,18 @@
// :not() are needed to add Specificity and avoid !important on padding // :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) { 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"]) {
#{$✨}icon-position: 0.75rem; #{$css-var-prefix}icon-position: 0.75rem;
#{$✨}icon-width: 1rem; #{$css-var-prefix}icon-width: 1rem;
padding-right: calc(var(#{$✨}icon-width) + var(#{$✨}icon-position)); padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
background-image: var(#{$✨}icon-date); background-image: var(#{$css-var-prefix}icon-date);
background-position: center right var(#{$✨}icon-position); background-position: center right var(#{$css-var-prefix}icon-position);
background-size: var(#{$✨}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(#{$✨}icon-time); background-image: var(#{$css-var-prefix}icon-time);
} }
} }
@ -31,9 +31,9 @@
[type="time"], [type="time"],
[type="week"] { [type="week"] {
&::-webkit-calendar-picker-indicator { &::-webkit-calendar-picker-indicator {
width: var(#{$✨}icon-width); width: var(#{$css-var-prefix}icon-width);
margin-right: calc(var(#{$✨}icon-width) * -1); margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
margin-left: var(#{$✨}icon-position); margin-left: var(#{$css-var-prefix}icon-position);
opacity: 0; opacity: 0;
} }
} }
@ -46,7 +46,7 @@
[type="month"], [type="month"],
[type="time"], [type="time"],
[type="week"] { [type="week"] {
padding-right: var(#{$✨}form-element-spacing-horizontal) !important; padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
background-image: none !important; background-image: none !important;
} }
} }

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

@ -9,32 +9,32 @@
// 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.
[type="file"] { [type="file"] {
#{$✨}color: var(#{$✨}muted-color); #{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
margin-left: calc(var(#{$✨}outline-width) * -1); // 1 margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0; padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0;
padding-left: var(#{$✨}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(#{$✨}spacing) / 2); margin-right: calc(var(#{$css-var-prefix}spacing) / 2);
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$✨}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 {
#{$✨}background-color: var(#{$✨}secondary-hover-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
#{$✨}border-color: var(#{$✨}secondary-hover-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
} }
} }
&:focus { &:focus {
&::file-selector-button { &::file-selector-button {
#{$✨}box-shadow: #{$css-var-prefix}box-shadow:
var(#{$✨}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(#{$✨}outline-width) var(#{$✨}secondary-focus); 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
} }
} }
} }

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

@ -10,13 +10,13 @@ $border-thumb: 2px;
@mixin slider-track { @mixin slider-track {
width: 100%; width: 100%;
height: $height-track; height: $height-track;
border-radius: var(#{$✨}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$✨}range-border-color); background-color: var(#{$css-var-prefix}range-border-color);
@if $enable-transitions { @if $enable-transitions {
transition: transition:
background-color var(#{$✨}transition), background-color var(#{$css-var-prefix}transition),
box-shadow var(#{$✨}transition); box-shadow var(#{$css-var-prefix}transition);
} }
} }
@ -26,15 +26,15 @@ $border-thumb: 2px;
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(#{$✨}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(#{$✨}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(#{$✨}transition), background-color var(#{$css-var-prefix}transition),
transform var(#{$✨}transition); transform var(#{$css-var-prefix}transition);
} }
} }
@ -78,8 +78,8 @@ $border-thumb: 2px;
&:active, &:active,
&:focus-within { &:focus-within {
#{$✨}range-border-color: var(#{$✨}range-active-border-color); #{$css-var-prefix}range-border-color: var(#{$css-var-prefix}range-active-border-color);
#{$✨}range-thumb-color: var(#{$✨}range-thumb-active-color); #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}range-thumb-active-color);
} }
&:active { &:active {

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

@ -9,8 +9,8 @@
// :not() are needed to add Specificity and avoid !important on padding // :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) { input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] { &[type="search"] {
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem); padding-inline-start: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem);
background-image: var(#{$✨}icon-search); background-image: var(#{$css-var-prefix}icon-search);
background-position: center left 1.125rem; background-position: center left 1.125rem;
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -18,10 +18,12 @@
&[aria-invalid] { &[aria-invalid] {
@if $enable-important { @if $enable-important {
padding-inline-start: calc( padding-inline-start: calc(
var(#{$✨}form-element-spacing-horizontal) + 1.75rem var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
) !important; ) !important;
} @else { } @else {
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem); padding-inline-start: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
);
} }
background-position: background-position:
center left 1.125rem, center left 1.125rem,
@ -29,11 +31,11 @@
} }
&[aria-invalid="false"] { &[aria-invalid="false"] {
background-image: var(#{$✨}icon-search), var(#{$✨}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(#{$✨}icon-search), var(#{$✨}icon-invalid); background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-invalid);
} }
} }
} }

4
scss/layout/_container.scss
View file

@ -11,8 +11,8 @@
width: 100%; width: 100%;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
padding-right: var(#{$✨}spacing); padding-right: var(#{$css-var-prefix}spacing);
padding-left: var(#{$✨}spacing); padding-left: var(#{$css-var-prefix}spacing);
} }
.container { .container {

14
scss/layout/_document.scss
View file

@ -39,13 +39,13 @@
-webkit-tap-highlight-color: transparent; // 5 -webkit-tap-highlight-color: transparent; // 5
-webkit-text-size-adjust: 100%; // 6 -webkit-text-size-adjust: 100%; // 6
text-size-adjust: 100%; // 6 text-size-adjust: 100%; // 6
background-color: var(#{$✨}background-color); background-color: var(#{$css-var-prefix}background-color);
color: var(#{$✨}color); color: var(#{$css-var-prefix}color);
font-weight: var(#{$✨}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$✨}font-size); font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$✨}line-height); // 2 line-height: var(#{$css-var-prefix}line-height); // 2
font-family: var(#{$✨}font-family); font-family: var(#{$css-var-prefix}font-family);
text-underline-offset: var(#{$✨}text-underline-offset); text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
overflow-wrap: break-word; // 3 overflow-wrap: break-word; // 3
cursor: default; // 1 cursor: default; // 1

4
scss/layout/_grid.scss
View file

@ -8,8 +8,8 @@
*/ */
.grid { .grid {
grid-column-gap: var(#{$✨}grid-column-gap); grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
grid-row-gap: var(#{$✨}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;
margin: 0; margin: 0;

5
scss/layout/_landmarks.scss
View file

@ -34,7 +34,8 @@
width: 100%; width: 100%;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal); padding: var(#{$css-var-prefix}block-spacing-vertical)
var(#{$css-var-prefix}block-spacing-horizontal);
@if $enable-viewport { @if $enable-viewport {
@each $key, $values in $breakpoints { @each $key, $values in $breakpoints {
@ -54,7 +55,7 @@
// Regular vertical spacings for <header>, <main>, <footer> // Regular vertical spacings for <header>, <main>, <footer>
@else { @else {
padding: var(#{$✨}block-spacing-vertical) 0; padding: var(#{$css-var-prefix}block-spacing-vertical) 0;
} }
} }
} }

4
scss/layout/_scroller.scss
View file

@ -14,8 +14,8 @@
overflow-x: auto; overflow-x: auto;
figcaption { figcaption {
padding: calc(var(#{$✨}spacing) * 0.5) 0; padding: calc(var(#{$css-var-prefix}spacing) * 0.5) 0;
color: var(#{$✨}muted-color); color: var(#{$css-var-prefix}muted-color);
} }
} }
} }

2
scss/layout/_section.scss
View file

@ -7,6 +7,6 @@
*/ */
section { section {
margin-bottom: var(#{$✨}block-spacing-vertical); margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
} }
} }

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

@ -6,121 +6,129 @@
// Default: Dark theme // Default: Dark theme
@mixin theme { @mixin theme {
#{$✨}background-color: #{mix($slate-950, $slate-900)}; #{$css-var-prefix}background-color: #{mix($slate-950, $slate-900)};
// Text color // Text color
#{$✨}color: #{$zinc-200}; #{$css-var-prefix}color: #{$zinc-200};
// Text selection color // Text selection color
#{$✨}text-selection-color: #{rgba($azure-350, 0.1875)}; #{$css-var-prefix}text-selection-color: #{rgba($azure-350, 0.1875)};
// Muted colors // Muted colors
#{$✨}muted-color: #{$zinc-450}; #{$css-var-prefix}muted-color: #{$zinc-450};
#{$✨}muted-border-color: #{$slate-850}; #{$css-var-prefix}muted-border-color: #{$slate-850};
// Primary colors // Primary colors
#{$✨}primary: #{$azure-350}; #{$css-var-prefix}primary: #{$azure-350};
#{$✨}primary-background: #{$azure-550}; #{$css-var-prefix}primary-background: #{$azure-550};
#{$✨}primary-border: var(#{$✨}primary-background); #{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
#{$✨}primary-underline: #{rgba($azure-350, 0.5)}; #{$css-var-prefix}primary-underline: #{rgba($azure-350, 0.5)};
#{$✨}primary-hover: #{$azure-250}; #{$css-var-prefix}primary-hover: #{$azure-250};
#{$✨}primary-hover-background: #{$azure-500}; #{$css-var-prefix}primary-hover-background: #{$azure-500};
#{$✨}primary-hover-border: var(#{$✨}primary-hover-background); #{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
#{$✨}primary-hover-underline: var(#{$✨}primary-hover); #{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
#{$✨}primary-focus: #{rgba($azure-350, 0.375)}; #{$css-var-prefix}primary-focus: #{rgba($azure-350, 0.375)};
#{$✨}primary-inverse: #{$white}; #{$css-var-prefix}primary-inverse: #{$white};
// Secondary colors // Secondary colors
#{$✨}secondary: #{$zinc-350}; #{$css-var-prefix}secondary: #{$zinc-350};
#{$✨}secondary-background: #{$slate-600}; #{$css-var-prefix}secondary-background: #{$slate-600};
#{$✨}secondary-border: var(#{$✨}secondary-background); #{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
#{$✨}secondary-underline: #{rgba($zinc-350, 0.5)}; #{$css-var-prefix}secondary-underline: #{rgba($zinc-350, 0.5)};
#{$✨}secondary-hover: #{$zinc-250}; #{$css-var-prefix}secondary-hover: #{$zinc-250};
#{$✨}secondary-hover-background: #{$slate-550}; #{$css-var-prefix}secondary-hover-background: #{$slate-550};
#{$✨}secondary-hover-border: var(#{$✨}secondary-hover-background); #{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
#{$✨}secondary-hover-underline: var(#{$✨}secondary-hover); #{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
#{$✨}secondary-focus: #{rgba($slate-350, 0.25)}; #{$css-var-prefix}secondary-focus: #{rgba($slate-350, 0.25)};
#{$✨}secondary-inverse: #{$white}; #{$css-var-prefix}secondary-inverse: #{$white};
// Contrast colors // Contrast colors
#{$✨}contrast: #{$slate-100}; #{$css-var-prefix}contrast: #{$slate-100};
#{$✨}contrast-background: #{$slate-50}; #{$css-var-prefix}contrast-background: #{$slate-50};
#{$✨}contrast-border: var(#{$✨}contrast-background); #{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
#{$✨}contrast-underline: #{rgba($slate-100, 0.5)}; #{$css-var-prefix}contrast-underline: #{rgba($slate-100, 0.5)};
#{$✨}contrast-hover: #{$white}; #{$css-var-prefix}contrast-hover: #{$white};
#{$✨}contrast-hover-background: #{$white}; #{$css-var-prefix}contrast-hover-background: #{$white};
#{$✨}contrast-hover-border: var(#{$✨}contrast-hover-background); #{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
#{$✨}contrast-hover-underline: var(#{$✨}contrast-hover); #{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}contrast-hover);
#{$✨}contrast-focus: #{rgba($slate-150, 0.25)}; #{$css-var-prefix}contrast-focus: #{rgba($slate-150, 0.25)};
#{$✨}contrast-inverse: #{$black}; #{$css-var-prefix}contrast-inverse: #{$black};
// Box shadow // Box shadow
#{$✨}box-shadow: box-shadow.shadow($black); #{$css-var-prefix}box-shadow: box-shadow.shadow($black);
// Typography // Typography
@if map.get($modules, "content/typography") { @if map.get($modules, "content/typography") {
// Headings colors // Headings colors
#{$✨}h1-color: #{$zinc-50}; #{$css-var-prefix}h1-color: #{$zinc-50};
#{$✨}h2-color: #{$zinc-100}; #{$css-var-prefix}h2-color: #{$zinc-100};
#{$✨}h3-color: #{$zinc-200}; #{$css-var-prefix}h3-color: #{$zinc-200};
#{$✨}h4-color: #{$zinc-250}; #{$css-var-prefix}h4-color: #{$zinc-250};
#{$✨}h5-color: #{$zinc-300}; #{$css-var-prefix}h5-color: #{$zinc-300};
#{$✨}h6-color: #{$zinc-400}; #{$css-var-prefix}h6-color: #{$zinc-400};
// Highlighted text (<mark>) // Highlighted text (<mark>)
#{$✨}mark-background-color: #{$azure-750}; #{$css-var-prefix}mark-background-color: #{$azure-750};
#{$✨}mark-color: #{$white}; #{$css-var-prefix}mark-color: #{$white};
// Inserted (<ins>) & Deleted (<del>) // Inserted (<ins>) & Deleted (<del>)
#{$✨}ins-color: #{mix($jade-450, $zinc-200)}; #{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-200)};
#{$✨}del-color: #{mix($red-500, $zinc-200)}; #{$css-var-prefix}del-color: #{mix($red-500, $zinc-200)};
// Blockquote // Blockquote
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color); #{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
#{$✨}blockquote-footer-color: var(#{$✨}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.
#{$✨}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);
#{$✨}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") {
#{$✨}table-border-color: var(#{$✨}muted-border-color); #{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
#{$✨}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") {
#{$✨}code-background-color: #{mix($slate-900, $slate-850, 75%)}; #{$css-var-prefix}code-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$✨}code-color: #{$zinc-400}; #{$css-var-prefix}code-color: #{$zinc-400};
#{$✨}code-kbd-background-color: var(#{$✨}color); #{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
#{$✨}code-kbd-color: var(#{$✨}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") {
#{$✨}form-element-background-color: #{mix($slate-900, $slate-850)}; #{$css-var-prefix}form-element-background-color: #{mix($slate-900, $slate-850)};
#{$✨}form-element-selected-background-color: #{$slate-800}; #{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
#{$✨}form-element-border-color: #{$slate-800}; #{$css-var-prefix}form-element-border-color: #{$slate-800};
#{$✨}form-element-color: #{$zinc-100}; #{$css-var-prefix}form-element-color: #{$zinc-100};
#{$✨}form-element-placeholder-color: #{$zinc-400}; #{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
#{$✨}form-element-active-background-color: #{mix($slate-900, $slate-850, 75%)}; #{$css-var-prefix}form-element-active-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$✨}form-element-active-border-color: var(#{$✨}primary-border); #{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
#{$✨}form-element-focus-color: var(#{$✨}primary-border); #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
#{$✨}form-element-disabled-background-color: var(#{$✨}form-element-background-color); #{$css-var-prefix}form-element-disabled-background-color: var(
#{$✨}form-element-disabled-border-color: var(#{$✨}form-element-border-color); #{$css-var-prefix}form-element-background-color
#{$✨}form-element-disabled-opacity: 0.5; );
#{$✨}form-element-invalid-border-color: #{mix($red-500, $slate-600)}; #{$css-var-prefix}form-element-disabled-border-color: var(
#{$✨}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)}; #{$css-var-prefix}form-element-border-color
#{$✨}form-element-invalid-focus-color: var(#{$✨}form-element-invalid-active-border-color); );
#{$✨}form-element-valid-border-color: #{mix($jade-450, $slate-600)}; #{$css-var-prefix}form-element-disabled-opacity: 0.5;
#{$✨}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)}; #{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $slate-600)};
#{$✨}form-element-valid-focus-color: var(#{$✨}form-element-valid-active-border-color); #{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)};
#{$css-var-prefix}form-element-invalid-focus-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
);
#{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $slate-600)};
#{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)};
#{$css-var-prefix}form-element-valid-focus-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);
// Focus for buttons, radio and select // Focus for buttons, radio and select
input:is( input:is(
@ -131,71 +139,71 @@
[type="radio"], [type="radio"],
[type="file"] [type="file"]
) { ) {
#{$✨}form-element-focus-color: var(#{$✨}primary-focus); #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
} }
} }
// Switch (input[type="checkbox"][role="switch"]) // Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") { @if map.get($modules, "forms/checkbox-radio-switch") {
#{$✨}switch-background-color: #{$slate-750}; #{$css-var-prefix}switch-background-color: #{$slate-750};
#{$✨}switch-color: var(#{$✨}primary-inverse); #{$css-var-prefix}switch-color: var(#{$css-var-prefix}primary-inverse);
#{$✨}switch-checked-background-color: var(#{$✨}primary-background); #{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
} }
// Range (input[type="range"]) // Range (input[type="range"])
@if map.get($modules, "forms/input-range") { @if map.get($modules, "forms/input-range") {
#{$✨}range-border-color: #{$slate-850}; #{$css-var-prefix}range-border-color: #{$slate-850};
#{$✨}range-active-border-color: #{$slate-800}; #{$css-var-prefix}range-active-border-color: #{$slate-800};
#{$✨}range-thumb-border-color: var(#{$✨}background-color); #{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
#{$✨}range-thumb-color: var(#{$✨}secondary-background); #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
#{$✨}range-thumb-active-color: var(#{$✨}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") {
#{$✨}accordion-border-color: var(#{$✨}muted-border-color); #{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
#{$✨}accordion-active-summary-color: var(#{$✨}primary-hover); #{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
#{$✨}accordion-close-summary-color: var(#{$✨}color); #{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
#{$✨}accordion-open-summary-color: var(#{$✨}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") {
#{$✨}card-background-color: #{$slate-900}; #{$css-var-prefix}card-background-color: #{$slate-900};
#{$✨}card-border-color: var(#{$✨}card-background-color); #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}card-background-color);
#{$✨}card-box-shadow: var(#{$✨}box-shadow); #{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$✨}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)}; #{$css-var-prefix}card-sectioning-background-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 {
#{$✨}dropdown-background-color: #{$slate-900}; #{$css-var-prefix}dropdown-background-color: #{$slate-900};
#{$✨}dropdown-border-color: #{$slate-850}; #{$css-var-prefix}dropdown-border-color: #{$slate-850};
#{$✨}dropdown-box-shadow: var(#{$✨}box-shadow); #{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$✨}dropdown-color: var(#{$✨}color); #{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
#{$✨}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") {
#{$✨}loading-spinner-opacity: 0.5; #{$css-var-prefix}loading-spinner-opacity: 0.5;
} }
// Modal (<dialog>) // Modal (<dialog>)
@if map.get($modules, "components/modal") { @if map.get($modules, "components/modal") {
#{$✨}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.75)}; #{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.75)};
} }
// Progress // Progress
@if map.get($modules, "components/progress") { @if map.get($modules, "components/progress") {
#{$✨}progress-background-color: #{$slate-850}; #{$css-var-prefix}progress-background-color: #{$slate-850};
#{$✨}progress-color: var(#{$✨}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") {
#{$✨}tooltip-background-color: var(#{$✨}contrast-background); #{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
#{$✨}tooltip-color: var(#{$✨}contrast-inverse); #{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
} }
// Chevron icons // Chevron icons
@ -216,8 +224,8 @@
// Form validation icons // Form validation icons
@if map.get($modules, "forms/basics") { @if map.get($modules, "forms/basics") {
#{$✨}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(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(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");
#{$✨}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(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(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");
} }
// Loading icon (animated) // Loading icon (animated)

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

@ -6,121 +6,129 @@
// Default: Light theme // Default: Light theme
@mixin theme { @mixin theme {
#{$✨}background-color: #{$white}; #{$css-var-prefix}background-color: #{$white};
// Text color // Text color
#{$✨}color: #{$zinc-750}; #{$css-var-prefix}color: #{$zinc-750};
// Text selection color // Text selection color
#{$✨}text-selection-color: #{rgba($azure-400, 0.25)}; #{$css-var-prefix}text-selection-color: #{rgba($azure-400, 0.25)};
// Muted colors // Muted colors
#{$✨}muted-color: #{$zinc-550}; #{$css-var-prefix}muted-color: #{$zinc-550};
#{$✨}muted-border-color: #{mix($slate-100, $slate-50)}; #{$css-var-prefix}muted-border-color: #{mix($slate-100, $slate-50)};
// Primary colors // Primary colors
#{$✨}primary: #{$azure-550}; #{$css-var-prefix}primary: #{$azure-550};
#{$✨}primary-background: #{$azure-550}; #{$css-var-prefix}primary-background: #{$azure-550};
#{$✨}primary-border: var(#{$✨}primary-background); #{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
#{$✨}primary-underline: #{rgba($azure-550, 0.5)}; #{$css-var-prefix}primary-underline: #{rgba($azure-550, 0.5)};
#{$✨}primary-hover: #{$azure-650}; #{$css-var-prefix}primary-hover: #{$azure-650};
#{$✨}primary-hover-background: #{$azure-600}; #{$css-var-prefix}primary-hover-background: #{$azure-600};
#{$✨}primary-hover-border: var(#{$✨}primary-hover-background); #{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
#{$✨}primary-hover-underline: var(#{$✨}primary-hover); #{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
#{$✨}primary-focus: #{rgba($azure-400, 0.5)}; #{$css-var-prefix}primary-focus: #{rgba($azure-400, 0.5)};
#{$✨}primary-inverse: #{$white}; #{$css-var-prefix}primary-inverse: #{$white};
// Secondary colors // Secondary colors
#{$✨}secondary: #{$slate-550}; #{$css-var-prefix}secondary: #{$slate-550};
#{$✨}secondary-background: #{$slate-600}; #{$css-var-prefix}secondary-background: #{$slate-600};
#{$✨}secondary-border: var(#{$✨}secondary-background); #{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
#{$✨}secondary-underline: #{rgba($slate-550, 0.5)}; #{$css-var-prefix}secondary-underline: #{rgba($slate-550, 0.5)};
#{$✨}secondary-hover: #{$slate-650}; #{$css-var-prefix}secondary-hover: #{$slate-650};
#{$✨}secondary-hover-background: #{$slate-650}; #{$css-var-prefix}secondary-hover-background: #{$slate-650};
#{$✨}secondary-hover-border: var(#{$✨}secondary-hover-background); #{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
#{$✨}secondary-hover-underline: var(#{$✨}secondary-hover); #{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
#{$✨}secondary-focus: #{rgba($slate-550, 0.25)}; #{$css-var-prefix}secondary-focus: #{rgba($slate-550, 0.25)};
#{$✨}secondary-inverse: #{$white}; #{$css-var-prefix}secondary-inverse: #{$white};
// Contrast colors // Contrast colors
#{$✨}contrast: #{$slate-900}; #{$css-var-prefix}contrast: #{$slate-900};
#{$✨}contrast-background: #{$slate-900}; #{$css-var-prefix}contrast-background: #{$slate-900};
#{$✨}contrast-border: var(#{$✨}contrast-background); #{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
#{$✨}contrast-underline: #{rgba($slate-900, 0.5)}; #{$css-var-prefix}contrast-underline: #{rgba($slate-900, 0.5)};
#{$✨}contrast-hover: #{$black}; #{$css-var-prefix}contrast-hover: #{$black};
#{$✨}contrast-hover-background: #{$black}; #{$css-var-prefix}contrast-hover-background: #{$black};
#{$✨}contrast-hover-border: var(#{$✨}contrast-hover-background); #{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
#{$✨}contrast-hover-underline: var(#{$✨}secondary-hover); #{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}secondary-hover);
#{$✨}contrast-focus: #{rgba($slate-550, 0.25)}; #{$css-var-prefix}contrast-focus: #{rgba($slate-550, 0.25)};
#{$✨}contrast-inverse: #{$white}; #{$css-var-prefix}contrast-inverse: #{$white};
// Box shadow // Box shadow
#{$✨}box-shadow: box-shadow.shadow($slate-500); #{$css-var-prefix}box-shadow: box-shadow.shadow($slate-500);
// Typography // Typography
@if map.get($modules, "content/typography") { @if map.get($modules, "content/typography") {
// Headings colors // Headings colors
#{$✨}h1-color: #{$zinc-800}; #{$css-var-prefix}h1-color: #{$zinc-800};
#{$✨}h2-color: #{$zinc-750}; #{$css-var-prefix}h2-color: #{$zinc-750};
#{$✨}h3-color: #{$zinc-700}; #{$css-var-prefix}h3-color: #{$zinc-700};
#{$✨}h4-color: #{$zinc-650}; #{$css-var-prefix}h4-color: #{$zinc-650};
#{$✨}h5-color: #{$zinc-600}; #{$css-var-prefix}h5-color: #{$zinc-600};
#{$✨}h6-color: #{$zinc-550}; #{$css-var-prefix}h6-color: #{$zinc-550};
// Highlighted text (<mark>) // Highlighted text (<mark>)
#{$✨}mark-background-color: #{mix($amber-100, $amber-50)}; #{$css-var-prefix}mark-background-color: #{mix($amber-100, $amber-50)};
#{$✨}mark-color: #{$zinc-950}; #{$css-var-prefix}mark-color: #{$zinc-950};
// Inserted (<ins>) & Deleted (<del>) // Inserted (<ins>) & Deleted (<del>)
#{$✨}ins-color: #{mix($jade-450, $zinc-750)}; #{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-750)};
#{$✨}del-color: #{mix($red-500, $zinc-750)}; #{$css-var-prefix}del-color: #{mix($red-500, $zinc-750)};
// Blockquote // Blockquote
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color); #{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
#{$✨}blockquote-footer-color: var(#{$✨}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.
#{$✨}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);
#{$✨}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") {
#{$✨}table-border-color: var(#{$✨}muted-border-color); #{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
#{$✨}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") {
#{$✨}code-background-color: #{mix($slate-50, $white, 75%)}; #{$css-var-prefix}code-background-color: #{mix($slate-50, $white, 75%)};
#{$✨}code-color: #{$zinc-550}; #{$css-var-prefix}code-color: #{$zinc-550};
#{$✨}code-kbd-background-color: var(#{$✨}color); #{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
#{$✨}code-kbd-color: var(#{$✨}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") {
#{$✨}form-element-background-color: #{mix($slate-50, $white, 25%)}; #{$css-var-prefix}form-element-background-color: #{mix($slate-50, $white, 25%)};
#{$✨}form-element-selected-background-color: #{$slate-100}; #{$css-var-prefix}form-element-selected-background-color: #{$slate-100};
#{$✨}form-element-border-color: #{$slate-150}; #{$css-var-prefix}form-element-border-color: #{$slate-150};
#{$✨}form-element-color: #{$zinc-850}; #{$css-var-prefix}form-element-color: #{$zinc-850};
#{$✨}form-element-placeholder-color: var(#{$✨}muted-color); #{$css-var-prefix}form-element-placeholder-color: var(#{$css-var-prefix}muted-color);
#{$✨}form-element-active-background-color: #{$white}; #{$css-var-prefix}form-element-active-background-color: #{$white};
#{$✨}form-element-active-border-color: var(#{$✨}primary-border); #{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
#{$✨}form-element-focus-color: var(#{$✨}primary-border); #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
#{$✨}form-element-disabled-background-color: var(#{$✨}form-element-background-color); #{$css-var-prefix}form-element-disabled-background-color: var(
#{$✨}form-element-disabled-border-color: var(#{$✨}form-element-border-color); #{$css-var-prefix}form-element-background-color
#{$✨}form-element-disabled-opacity: 0.5; );
#{$✨}form-element-invalid-border-color: #{mix($red-500, $zinc-350)}; #{$css-var-prefix}form-element-disabled-border-color: var(
#{$✨}form-element-invalid-active-border-color: #{mix($red-500, $zinc-350, 75%)}; #{$css-var-prefix}form-element-border-color
#{$✨}form-element-invalid-focus-color: var(#{$✨}form-element-invalid-active-border-color); );
#{$✨}form-element-valid-border-color: #{mix($jade-450, $zinc-350)}; #{$css-var-prefix}form-element-disabled-opacity: 0.5;
#{$✨}form-element-valid-active-border-color: #{mix($jade-450, $zinc-350, 75%)}; #{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $zinc-350)};
#{$✨}form-element-valid-focus-color: var(#{$✨}form-element-valid-active-border-color); #{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $zinc-350, 75%)};
#{$css-var-prefix}form-element-invalid-focus-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
);
#{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $zinc-350)};
#{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $zinc-350, 75%)};
#{$css-var-prefix}form-element-valid-focus-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);
// Focus for buttons, radio and select // Focus for buttons, radio and select
input:is( input:is(
@ -131,77 +139,77 @@
[type="radio"], [type="radio"],
[type="file"] [type="file"]
) { ) {
#{$✨}form-element-focus-color: var(#{$✨}primary-focus); #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
} }
} }
// Switch (input[type="checkbox"][role="switch"]) // Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") { @if map.get($modules, "forms/checkbox-radio-switch") {
#{$✨}switch-background-color: #{$slate-200}; #{$css-var-prefix}switch-background-color: #{$slate-200};
#{$✨}switch-color: var(#{$✨}primary-inverse); #{$css-var-prefix}switch-color: var(#{$css-var-prefix}primary-inverse);
#{$✨}switch-checked-background-color: var(#{$✨}primary-background); #{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
} }
// Range (input[type="range"]) // Range (input[type="range"])
@if map.get($modules, "forms/input-range") { @if map.get($modules, "forms/input-range") {
#{$✨}range-border-color: #{$slate-100}; #{$css-var-prefix}range-border-color: #{$slate-100};
#{$✨}range-active-border-color: #{$slate-200}; #{$css-var-prefix}range-active-border-color: #{$slate-200};
#{$✨}range-thumb-border-color: var(#{$✨}background-color); #{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
#{$✨}range-thumb-color: var(#{$✨}secondary-background); #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
#{$✨}range-thumb-active-color: var(#{$✨}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") {
#{$✨}accordion-border-color: var(#{$✨}muted-border-color); #{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
#{$✨}accordion-active-summary-color: var(#{$✨}primary-hover); #{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
#{$✨}accordion-close-summary-color: var(#{$✨}color); #{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
#{$✨}accordion-open-summary-color: var(#{$✨}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") {
#{$✨}card-background-color: var(#{$✨}background-color); #{$css-var-prefix}card-background-color: var(#{$css-var-prefix}background-color);
#{$✨}card-border-color: var(#{$✨}muted-border-color); #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color);
#{$✨}card-box-shadow: var(#{$✨}box-shadow); #{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$✨}card-sectioning-background-color: #{mix($slate-50, $white, 25%)}; #{$css-var-prefix}card-sectioning-background-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 {
#{$✨}dropdown-background-color: #{$white}; #{$css-var-prefix}dropdown-background-color: #{$white};
#{$✨}dropdown-border-color: #{$slate-50}; #{$css-var-prefix}dropdown-border-color: #{$slate-50};
#{$✨}dropdown-box-shadow: var(#{$✨}box-shadow); #{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$✨}dropdown-color: var(#{$✨}color); #{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
#{$✨}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") {
#{$✨}loading-spinner-opacity: 0.5; #{$css-var-prefix}loading-spinner-opacity: 0.5;
} }
// Modal (<dialog>) // Modal (<dialog>)
@if map.get($modules, "components/modal") { @if map.get($modules, "components/modal") {
#{$✨}modal-overlay-background-color: #{rgba(mix($zinc-100, $zinc-50), 0.75)}; #{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($zinc-100, $zinc-50), 0.75)};
} }
// Progress // Progress
@if map.get($modules, "components/progress") { @if map.get($modules, "components/progress") {
#{$✨}progress-background-color: #{$slate-100}; #{$css-var-prefix}progress-background-color: #{$slate-100};
#{$✨}progress-color: var(#{$✨}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") {
#{$✨}tooltip-background-color: var(#{$✨}contrast-background); #{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
#{$✨}tooltip-color: var(#{$✨}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") {
#{$✨}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(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(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");
#{$✨}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(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(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");
} }
// Document // Document

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

@ -34,6 +34,6 @@
[type="checkbox"], [type="checkbox"],
[type="radio"], [type="radio"],
[type="range"] { [type="range"] {
accent-color: var(#{$✨}primary); accent-color: var(#{$css-var-prefix}primary);
} }
} }

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

@ -10,43 +10,43 @@
:root { :root {
// Typography // Typography
#{$✨}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";
#{$✨}font-family-sans-serif: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, #{$css-var-prefix}font-family-sans-serif: system-ui, "Segoe UI", Roboto, Helvetica, Arial,
var(#{$✨}font-family-emoji); sans-serif, var(#{$css-var-prefix}font-family-emoji);
#{$✨}font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, #{$css-var-prefix}font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
"Liberation Mono", monospace, var(#{$✨}font-family-emoji); Consolas, "Liberation Mono", monospace, var(#{$css-var-prefix}font-family-emoji);
#{$✨}font-family: var(#{$✨}font-family-sans-serif); #{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-sans-serif);
#{$✨}line-height: 1.5; #{$css-var-prefix}line-height: 1.5;
#{$✨}font-weight: 400; #{$css-var-prefix}font-weight: 400;
#{$✨}font-size: 100%; #{$css-var-prefix}font-size: 100%;
#{$✨}text-underline-offset: 0.1rem; #{$css-var-prefix}text-underline-offset: 0.1rem;
// 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")) {
#{$✨}font-size: map.get($values, "root-font-size"); #{$css-var-prefix}font-size: map.get($values, "root-font-size");
} }
} }
} }
} }
// Borders // Borders
#{$✨}border-radius: 0.25rem; #{$css-var-prefix}border-radius: 0.25rem;
#{$✨}border-width: 0.0625rem; #{$css-var-prefix}border-width: 0.0625rem;
#{$✨}outline-width: 0.125rem; #{$css-var-prefix}outline-width: 0.125rem;
// Transitions // Transitions
#{$✨}transition: 0.2s ease-in-out; #{$css-var-prefix}transition: 0.2s ease-in-out;
// Spacings // Spacings
#{$✨}spacing: 1rem; #{$css-var-prefix}spacing: 1rem;
// Spacings for typography elements // Spacings for typography elements
@if map.get($modules, "content/typography") { @if map.get($modules, "content/typography") {
#{$✨}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
@ -55,55 +55,59 @@
map.get($modules, "components/card") or map.get($modules, "components/card") or
map.get($modules, "components/modal") map.get($modules, "components/modal")
{ {
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2); #{$css-var-prefix}block-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * 2);
#{$✨}block-spacing-horizontal: var(#{$✨}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 {
#{$✨}grid-column-gap: var(#{$✨}spacing); #{$css-var-prefix}grid-column-gap: var(#{$css-var-prefix}spacing);
#{$✨}grid-row-gap: var(#{$✨}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") {
#{$✨}form-element-spacing-vertical: 0.75rem; #{$css-var-prefix}form-element-spacing-vertical: 0.75rem;
#{$✨}form-element-spacing-horizontal: 1rem; #{$css-var-prefix}form-element-spacing-horizontal: 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") {
#{$✨}form-label-font-weight: var(#{$✨}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") {
#{$✨}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);
#{$✨}group-box-shadow-focus-with-button: 0 #{$css-var-prefix}group-box-shadow-focus-with-button: 0
0 0
0 0
var(#{$✨}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$✨}primary-focus); var(#{$css-var-prefix}primary-focus);
#{$✨}group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(#{$✨}form-element-border-color); #{$css-var-prefix}group-box-shadow-focus-with-input: 0
0
0
0.0625rem
var(#{$css-var-prefix}form-element-border-color);
} }
// Modal (<dialog>) // Modal (<dialog>)
@if map.get($modules, "components/modal") { @if map.get($modules, "components/modal") {
#{$✨}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") {
#{$✨}nav-element-spacing-vertical: 1rem; #{$css-var-prefix}nav-element-spacing-vertical: 1rem;
#{$✨}nav-element-spacing-horizontal: 0.5rem; #{$css-var-prefix}nav-element-spacing-horizontal: 0.5rem;
#{$✨}nav-link-spacing-vertical: 0.5rem; #{$css-var-prefix}nav-link-spacing-vertical: 0.5rem;
#{$✨}nav-link-spacing-horizontal: 0.5rem; #{$css-var-prefix}nav-link-spacing-horizontal: 0.5rem;
#{$✨}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") {
#{$✨}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");
#{$✨}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
@ -111,7 +115,7 @@
map.get($modules, "components/accordion") or map.get($modules, "components/accordion") or
map.get($modules, "components/dropdown") map.get($modules, "components/dropdown")
{ {
#{$✨}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($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");
} }
// Chevron icons // Chevron icons
@ -134,24 +138,24 @@
// Datetime icons // Datetime icons
@if map.get($modules, "forms/input-date") { @if map.get($modules, "forms/input-date") {
#{$✨}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($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");
#{$✨}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") {
#{$✨}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") {
#{$✨}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
#{$✨}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");
// Change the icon color to white for buttons // Change the icon color to white for buttons
[aria-busy="true"]:not(input, select, textarea) { [aria-busy="true"]:not(input, select, textarea) {
@ -192,7 +196,9 @@
$multiplier: 4.5; $multiplier: 4.5;
} }
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * $multiplier); #{$css-var-prefix}block-spacing-vertical: calc(
var(#{$css-var-prefix}spacing) * $multiplier
);
} }
} }
} }
@ -218,7 +224,9 @@
$multiplier: 2.25; $multiplier: 2.25;
} }
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * $multiplier); #{$css-var-prefix}block-spacing-horizontal: calc(
var(#{$css-var-prefix}spacing) * $multiplier
);
} }
} }
} }
@ -228,20 +236,20 @@
// Modal // Modal
@if map.get($modules, "components/modal") { @if map.get($modules, "components/modal") {
dialog > article { dialog > article {
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2); #{$css-var-prefix}block-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * 2);
#{$✨}block-spacing-horizontal: var(#{$✨}spacing); #{$css-var-prefix}block-spacing-horizontal: var(#{$css-var-prefix}spacing);
@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")) {
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2.5); #{$css-var-prefix}block-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * 2.5);
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.25); #{$css-var-prefix}block-spacing-horizontal: calc(var(#{$css-var-prefix}spacing) * 1.25);
} }
} }
@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")) {
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3); #{$css-var-prefix}block-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * 3);
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.5); #{$css-var-prefix}block-spacing-horizontal: calc(var(#{$css-var-prefix}spacing) * 1.5);
} }
} }
} }
@ -251,13 +259,13 @@
// Link // Link
@if map.get($modules, "content/link") { @if map.get($modules, "content/link") {
a { a {
#{$✨}text-decoration: underline; #{$css-var-prefix}text-decoration: underline;
// Secondary & Contrast // Secondary & Contrast
@if enable-classes { @if enable-classes {
&.secondary, &.secondary,
&.contrast { &.contrast {
#{$✨}text-decoration: underline; #{$css-var-prefix}text-decoration: underline;
} }
} }
} }
@ -267,7 +275,7 @@
@if map.get($modules, "content/typography") { @if map.get($modules, "content/typography") {
// Small // Small
small { small {
#{$✨}font-size: 0.875em; #{$css-var-prefix}font-size: 0.875em;
} }
// Headings // Headings
@ -277,42 +285,42 @@
h4, h4,
h5, h5,
h6 { h6 {
#{$✨}font-weight: 700; #{$css-var-prefix}font-weight: 700;
} }
h1 { h1 {
#{$✨}font-size: 2rem; #{$css-var-prefix}font-size: 2rem;
#{$✨}line-height: 1.25; #{$css-var-prefix}line-height: 1.25;
#{$✨}typography-spacing-top: 3rem; #{$css-var-prefix}typography-spacing-top: 3rem;
} }
h2 { h2 {
#{$✨}font-size: 1.75rem; #{$css-var-prefix}font-size: 1.75rem;
#{$✨}line-height: 1.3; #{$css-var-prefix}line-height: 1.3;
#{$✨}typography-spacing-top: 2.625rem; #{$css-var-prefix}typography-spacing-top: 2.625rem;
} }
h3 { h3 {
#{$✨}font-size: 1.5rem; #{$css-var-prefix}font-size: 1.5rem;
#{$✨}line-height: 1.35; #{$css-var-prefix}line-height: 1.35;
#{$✨}typography-spacing-top: 2.25rem; #{$css-var-prefix}typography-spacing-top: 2.25rem;
} }
h4 { h4 {
#{$✨}font-size: 1.25rem; #{$css-var-prefix}font-size: 1.25rem;
#{$✨}line-height: 1.4; #{$css-var-prefix}line-height: 1.4;
#{$✨}typography-spacing-top: 1.874rem; #{$css-var-prefix}typography-spacing-top: 1.874rem;
} }
h5 { h5 {
#{$✨}font-size: 1.125rem; #{$css-var-prefix}font-size: 1.125rem;
#{$✨}line-height: 1.45; #{$css-var-prefix}line-height: 1.45;
#{$✨}typography-spacing-top: 1.6875rem; #{$css-var-prefix}typography-spacing-top: 1.6875rem;
} }
h6 { h6 {
#{$✨}font-size: 1rem; #{$css-var-prefix}font-size: 1rem;
#{$✨}typography-spacing-top: 1.5rem; #{$css-var-prefix}typography-spacing-top: 1.5rem;
} }
} }
@ -322,8 +330,8 @@
tfoot { tfoot {
th, th,
td { td {
#{$✨}font-weight: 600; #{$css-var-prefix}font-weight: 600;
#{$✨}border-width: 0.1875rem; #{$css-var-prefix}border-width: 0.1875rem;
} }
} }
} }
@ -334,11 +342,11 @@
code, code,
kbd, kbd,
samp { samp {
#{$✨}font-family: var(#{$✨}font-family-monospace); #{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-monospace);
} }
kbd { kbd {
#{$✨}font-weight: bolder; #{$css-var-prefix}font-weight: bolder;
} }
} }
@ -352,22 +360,22 @@
[type="file"] [type="file"]
), ),
:where(select, textarea) { :where(select, textarea) {
#{$✨}outline-width: 0.0625rem; #{$css-var-prefix}outline-width: 0.0625rem;
} }
[type="search"] { [type="search"] {
#{$✨}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"] {
#{$✨}border-width: 0.125rem; #{$css-var-prefix}border-width: 0.125rem;
} }
[type="checkbox"][role="switch"] { [type="checkbox"][role="switch"] {
#{$✨}border-width: 0.1875rem; #{$css-var-prefix}border-width: 0.1875rem;
} }
} }
@ -375,13 +383,13 @@
@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"]) {
#{$✨}outline-width: 0.0625rem; #{$css-var-prefix}outline-width: 0.0625rem;
} }
} }
nav { nav {
details.dropdown { details.dropdown {
summary:focus-visible { summary:focus-visible {
#{$✨}outline-width: 0.125rem; #{$css-var-prefix}outline-width: 0.125rem;
} }
} }
} }
@ -390,7 +398,7 @@
// Group (role="group") // Group (role="group")
@if map.get($modules, "components/group") { @if map.get($modules, "components/group") {
[role="search"] { [role="search"] {
#{$✨}border-radius: 5rem; #{$css-var-prefix}border-radius: 5rem;
} }
[role="search"], [role="search"],
@ -402,11 +410,11 @@
[type="button"].secondary:focus, [type="button"].secondary:focus,
[role="button"].secondary:focus [role="button"].secondary:focus
) { ) {
#{$✨}group-box-shadow-focus-with-button: 0 #{$css-var-prefix}group-box-shadow-focus-with-button: 0
0 0
0 0
var(#{$✨}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$✨}secondary-focus); var(#{$css-var-prefix}secondary-focus);
} }
&:has( &:has(
@ -415,11 +423,11 @@
[type="button"].contrast:focus, [type="button"].contrast:focus,
[role="button"].contrast:focus [role="button"].contrast:focus
) { ) {
#{$✨}group-box-shadow-focus-with-button: 0 #{$css-var-prefix}group-box-shadow-focus-with-button: 0
0 0
0 0
var(#{$✨}outline-width) var(#{$css-var-prefix}outline-width)
var(#{$✨}contrast-focus); var(#{$css-var-prefix}contrast-focus);
} }
} }
@ -427,7 +435,7 @@
[type="submit"], [type="submit"],
[type="button"], [type="button"],
[role="button"] { [role="button"] {
#{$✨}form-element-spacing-horizontal: 2rem; #{$css-var-prefix}form-element-spacing-horizontal: 2rem;
} }
} }
} }