mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 11:16:15 -04:00
Build CSS
This commit is contained in:
github-actions[bot]
parent
ddf41a191a
commit
951aae3801
77 changed files with 7702 additions and 7702 deletions
|
|
@ -1,5 +1,5 @@
|
|||
// Styles
|
||||
@use "default/styles";
|
||||
|
||||
// Colors schemes
|
||||
@use "default/schemes";
|
||||
// Styles
|
||||
@use "default/styles";
|
||||
|
||||
// Colors schemes
|
||||
@use "default/schemes";
|
||||
|
|
|
|||
|
|
@ -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%)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
// }
|
||||
//}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue