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

Build CSS

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

118
scss/_index.scss
View file

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

406
scss/_settings.scss
View file

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

1772
scss/colors/_index.scss
View file

File diff suppressed because it is too large Load diff

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

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

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

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

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

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

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

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

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

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

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

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

252
scss/components/_accordion.scss
View file

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

180
scss/components/_card.scss
View file

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

590
scss/components/_dropdown.scss
View file

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

420
scss/components/_group.scss
View file

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

92
scss/components/_loading.scss
View file

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

380
scss/components/_modal.scss
View file

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

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

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

326
scss/components/_nav.scss
View file

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

102
scss/components/_notification.scss
View file

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

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

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

52
scss/components/_popover.scss
View file

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

204
scss/components/_progress.scss
View file

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

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

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

200
scss/components/_tab.scss
View file

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

272
scss/components/_timeline.scss
View file

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

438
scss/components/_tooltip.scss
View file

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

418
scss/content/_button.scss
View file

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

146
scss/content/_code.scss
View file

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

108
scss/content/_embedded.scss
View file

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

38
scss/content/_figure.scss
View file

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

138
scss/content/_link.scss
View file

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

76
scss/content/_misc.scss
View file

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

124
scss/content/_table.scss
View file

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

364
scss/content/_typography.scss
View file

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

988
scss/forms/_basics.scss
View file

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

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

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

148
scss/forms/_floating.scss
View file

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

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

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

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

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

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

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

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

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

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

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

488
scss/forms/_validation.scss
View file

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

8
scss/helpers/_copyright.scss
View file

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

148
scss/helpers/_functions.scss
View file

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

66
scss/layout/_container.scss
View file

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

106
scss/layout/_document.scss
View file

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

52
scss/layout/_grid.scss
View file

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

134
scss/layout/_landmarks.scss
View file

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

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

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

210
scss/layout/_row.scss
View file

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

24
scss/layout/_section.scss
View file

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

10
scss/pico.classless.scss
View file

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

4
scss/pico.colors.scss
View file

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

8
scss/pico.conditional.scss
View file

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

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

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

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

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

4
scss/pico.scss
View file

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

10
scss/themes/_default.scss
View file

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

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

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

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

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

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

@ -1,41 +1,41 @@
@use "sass:map";
@use "../../settings" as *;
@use "light";
@use "dark";
@if map.get($modules, "themes/default") {
/**
* Color schemes
*/
// Light color scheme (Default)
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]),
:host(:not([data-theme="dark"])) {
@include light.theme;
}
// Dark color scheme (Auto)
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]),
:host(:not([data-theme])) {
@include dark.theme;
}
}
// Dark color scheme (Forced)
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
@include dark.theme;
}
#{$parent-selector} progress,
#{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="radio"],
#{$parent-selector} [type="range"] {
accent-color: var(#{$css-var-prefix}primary);
}
}
@use "sass:map";
@use "../../settings" as *;
@use "light";
@use "dark";
@if map.get($modules, "themes/default") {
/**
* Color schemes
*/
// Light color scheme (Default)
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]),
:host(:not([data-theme="dark"])) {
@include light.theme;
}
// Dark color scheme (Auto)
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]),
:host(:not([data-theme])) {
@include dark.theme;
}
}
// Dark color scheme (Forced)
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
@include dark.theme;
}
#{$parent-selector} progress,
#{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="radio"],
#{$parent-selector} [type="range"] {
accent-color: var(#{$css-var-prefix}primary);
}
}

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

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

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

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

114
scss/utilities/_accessibility.scss
View file

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

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

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