claritas-web-framework 8.5.7 → 8.5.9

package/sass/_variables.scss

@@ -1,449 +1,445 @@
-@use "sass:map";
-@use "sass:color";
-@use "sass:math";
-
-/* --------------------------------- options -------------------------------- */
-$enable-margins: true !default;
-$enable-cssgrid: true !default;
-
-/* --------------------------------- colours -------------------------------- */
-$white: #fff !default;
-$gray-1: #f6f6f7 !default;
-$gray-2: #dadadc !default;
-$gray-3: #bebfc1 !default;
-$gray-4: #a1a3a6 !default;
-$gray-5: #85888b !default;
-$gray-6: #696c70 !default;
-$gray-7: #4d5055 !default;
-$gray-8: #30353a !default;
-$gray-9: #14191f !default;
-$black: #000 !default;
-$grays: (
-  "gray-1": $gray-1,
-  "gray-2": $gray-2,
-  "gray-3": $gray-3,
-  "gray-4": $gray-4,
-  "gray-5": $gray-5,
-  "gray-6": $gray-6,
-  "gray-7": $gray-7,
-  "gray-8": $gray-8,
-  "gray-9": $gray-9
-) !default;
-$blue: #0d6efd !default;
-$indigo: #6610f2 !default;
-$purple: #6f42c1 !default;
-$pink: #d63384 !default;
-$red: #dc3545 !default;
-$orange: #fd7e14 !default;
-$yellow: #ffc107 !default;
-$green: #198754 !default;
-$teal: #20c997 !default;
-$cyan: #0dcaf0 !default;
-$colors: (
-  "blue": $blue,
-  "indigo": $indigo,
-  "purple": $purple,
-  "pink": $pink,
-  "red": $red,
-  "orange": $orange,
-  "yellow": $yellow,
-  "green": $green,
-  "teal": $teal,
-  "cyan": $cyan,
-  "white": $white,
-  "black": $black
-) !default;
-$primary: $blue !default;
-$secondary: $gray-6 !default;
-$success: $green !default;
-$info: $cyan !default;
-$warning: $yellow !default;
-$danger: $red !default;
-$light: $gray-1 !default;
-$medium: $gray-6 !default;
-$dark: $gray-8 !default;
-$theme-colors: (
-  "primary": $primary,
-  "secondary": $secondary,
-  "success": $success,
-  "info": $info,
-  "warning": $warning,
-  "danger": $danger,
-  "light": $light,
-  "medium": $medium,
-  "dark": $dark
-) !default;
-$all-colors: map.merge($colors, $theme-colors) !default;
-$color-flip-threshold: 50% !default;
-$color-flip-l: 35% !default;
-$color-disabled-alpha: 65% !default;
-
-/* ---------------------------------- Misc ---------------------------------- */
-$escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"), ("(", "%28"), (")", "%29")) !default;
-
-/* ----------------------------- spacing & size ----------------------------- */
-$spacer: 1rem !default;
-$spacers: (
-  0: 0,
-  1: $spacer * 0.25,
-  2: $spacer * 0.5,
-  3: $spacer,
-  4: $spacer * 1.5,
-  5: $spacer * 3
-) !default;
-$gutters: $spacers !default;
-$sizes: (0, 1, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100) !default;
-
-/* ---------------------------------- links --------------------------------- */
-$link-shade-percentage: 20% !default;
-$link-decoration: none !default;
-$link-hover-decoration: underline !default;
-
-/* ---------------------------------- body ---------------------------------- */
-$body-background: $white !default;
-$body-color: $gray-9 !default;
-$body-text-align: null !default;
-
-/* --------------------------------- layout --------------------------------- */
-$breakpoints: (
-  "none": 0,
-  "smallmobile": 320px,
-  "mobile": 576px,
-  "tablet": 768px,
-  "desktop": 1024px,
-  "widescreen": 1216px,
-  "fullhd": 1408px
-) !default;
-$container-max-widths: (
-  "mobile": 516px,
-  "tablet": 708px,
-  "desktop": 964px,
-  "widescreen": 1156px,
-  "fullhd": 1348px
-) !default;
-$grid-columns: 12 !default;
-$grid-gutter: calc($spacer * 1.5) !default;
-$grid-gutter-tight: calc($spacer * 0.75) !default;
-
-/* -------------------------------- font size ------------------------------- */
-$font-size-root: null !default;
-$font-size-base: $spacer !default;
-$line-height-base: 1.5 !default;
-$font-size-6: $font-size-base !default;
-$font-size-5: calc($font-size-base * 1.125) !default;
-$font-size-4: calc(($font-size-base * 1.275) + 0.3vw) !default;
-$font-size-3: calc(($font-size-base * 1.3) + 0.6vw) !default;
-$font-size-2: calc(($font-size-base * 1.325) + 0.9vw) !default;
-$font-size-1: calc(($font-size-base * 1.375) + 1.5vw) !default;
-$font-size-xsmall: 0.675em !default;
-$font-size-small: 0.875em !default;
-$font-sizes: (
-  1: $font-size-1,
-  2: $font-size-2,
-  3: $font-size-3,
-  4: $font-size-4,
-  5: $font-size-5,
-  6: $font-size-6,
-  "small": $font-size-small,
-  "xsmall": $font-size-xsmall,
-  "smaller": 0.85em,
-  "larger": 1.15em
-) !default;
-
-/* ------------------------------- font family ------------------------------ */
-$font-family-sans-serif:
-  inter,
-  -apple-system,
-  blinkmacsystemfont,
-  "Segoe UI",
-  roboto,
-  sans-serif !default;
-$font-family-serif: cambria, "Hoefler Text", utopia, serif !default;
-$font-family-monospace: sfmono-regular, menlo, monaco, consolas, monospace !default;
-$font-family-base: $font-family-sans-serif !default;
-$font-families: (
-  "sans-serif": $font-family-sans-serif,
-  "serif": $font-family-serif,
-  "monospace": $font-family-monospace
-) !default;
-
-/* ------------------------------- font weight ------------------------------ */
-$font-weight-lighter: lighter !default;
-$font-weight-bolder: bolder !default;
-$font-weight-thin: 100 !default;
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-medium: 500 !default;
-$font-weight-semibold: 600 !default;
-$font-weight-bold: 700 !default;
-$font-weight-heavy: 800 !default;
-$font-weight-black: 900 !default;
-$font-weights: (
-  "lighter": $font-weight-lighter,
-  "bolder": $font-weight-bolder,
-  "thin": $font-weight-thin,
-  "light": $font-weight-light,
-  "normal": $font-weight-normal,
-  "medium": $font-weight-medium,
-  "semibold": $font-weight-semibold,
-  "bold": $font-weight-bold,
-  "heavy": $font-weight-heavy,
-  "black": $font-weight-black,
-  "100": $font-weight-thin,
-  "300": $font-weight-light,
-  "400": $font-weight-normal,
-  "500": $font-weight-medium,
-  "600": $font-weight-semibold,
-  "700": $font-weight-bold,
-  "800": $font-weight-heavy,
-  "900": $font-weight-black
-) !default;
-$font-weight-base: $font-weight-normal !default;
-
-/* ------------------------------- typography ------------------------------- */
-$text-aligns: (left, right, center, justify) !default;
-$text-transforms: (uppercase, lowercase, capitalize, none) !default;
-$text-wraps: (normal, nowrap) !default;
-$font-styles: (italic, oblique, normal) !default;
-
-/* -------------------------------- headings -------------------------------- */
-$headings-font-family: null !default;
-$headings-font-style: null !default;
-$headings-font-weight: $font-weight-bold !default;
-$headings-line-height: 1.2 !default;
-$headings-color: $body-color !default;
-
-/* --------------------------------- border --------------------------------- */
-$border-color-main: $gray-5 !default;
-$border-color-hover-main: $gray-6 !default;
-$border-color-active-main: $gray-6 !default;
-$border-color-focus-main: $gray-6 !default;
-$border-color-disabled-main: $gray-5 !default;
-$border-shade-percentage: 20% !default;
-$border-shade-hover-percentage: 20% !default;
-$border-radius-none: 0 !default;
-$border-radius-small: calc($spacer * 0.15) !default;
-$border-radius-medium: calc($spacer * 0.275) !default;
-$border-radius-large: calc($spacer * 0.5) !default;
-$border-radius-round: calc($spacer * 99) !default;
-$border-radius-default: $border-radius-medium !default;
-$border-radii: (
-  "none": $border-radius-none,
-  "small": $border-radius-small,
-  "medium": $border-radius-medium,
-  "large": $border-radius-large,
-  "round": $border-radius-round,
-  "default": $border-radius-default
-) !default;
-
-/* ---------------------------------- table --------------------------------- */
-$table-cell-padding-y: calc(($spacer * 0.625) - 0.5px) !default;
-$table-cell-padding-x: calc($spacer * 0.5) !default;
-$table-small-cell-padding-y: calc(($spacer * 0.25) - 1px) !default;
-$table-small-cell-padding-x: calc($spacer * 0.5) !default;
-$table-cell-border-style: solid !default;
-$table-cell-border-width: 1px !default;
-$table-cell-valign: top !default;
-$table-th-font-weight: null !default;
-$table-th-border-width: 2px !default;
-$table-background-color: transparent !default;
-$table-head-background-color: $light !default;
-$table-striped-background-opacity: 4% !default;
-$table-caption-color: $medium !default;
-
-/* --------------------------------- z-index -------------------------------- */
-$zindex-static: 0 !default;
-$zindex-relative: 1 !default;
-$zindex-absolute: 1 !default;
-$zindex-sticky: 1020 !default;
-$zindex-fixed: 1030 !default;
-$zindex-dropdown: 1040 !default;
-$zindex-modal-backdrop: 1050 !default;
-$zindex-modal: 1060 !default;
-$zindex-popover: 1070 !default;
-$zindex-tooltip: 1080 !default;
-$zindexes: (
-  "static": $zindex-static,
-  "relative": $zindex-relative,
-  "absolute": $zindex-absolute,
-  "sticky": $zindex-sticky,
-  "fixed": $zindex-fixed,
-  "dropdown": $zindex-dropdown,
-  "modal-backdrop": $zindex-modal-backdrop,
-  "modal": $zindex-modal,
-  "popover": $zindex-popover,
-  "tooltip": $zindex-tooltip
-) !default;
-
-/* --------------------------------- shadow --------------------------------- */
-$box-shadow-small: 0 calc($spacer * 0.125) calc($spacer * 0.25) hsl(from var(--dark) h s l / 7.5%) !default;
-$box-shadow-medium: 0 calc($spacer * 0.5) calc($spacer * 0.75) hsl(from var(--dark) h s l / 15%) !default;
-$box-shadow-large: 0 $spacer calc($spacer * 2.5) hsl(from var(--dark) h s l / 17.5%) !default;
-$box-shadows: (
-  "small": $box-shadow-small,
-  "medium": $box-shadow-medium,
-  "large": $box-shadow-large
-) !default;
-
-/* ---------------------------------- embed --------------------------------- */
-$embeds: (
-  "32by9": 28.125%,
-  "21by9": 42.8571%,
-  "16by9": 56.25%,
-  "4by3": 75%,
-  "1by1": 100%
-) !default;
-
-/* ---------------------------------- forms --------------------------------- */
-$form-select-indicator-color: $body-color !default;
-$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
-$list-nested-indicator-color: hsl(from var(--body-color) h s l / 25%) !default;
-$list-nested-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$list-nested-indicator-color}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z'/></svg>") !default;
-$form-file-indicator-color: hsl(from var(--body-color) h s l / 25%) !default;
-$form-file-indicator-hover-color: hsl(from var(--body-color) h s l / 50%) !default;
-$form-file-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$form-file-indicator-color}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/></svg>") !default;
-$form-file-indicator-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$form-file-indicator-hover-color}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/></svg>") !default;
-$form-transition:
-  color 0.15s ease-in-out,
-  background-color 0.15s ease-in-out,
-  border-color 0.15s ease-in-out,
-  box-shadow 0.15s ease-in-out;
-
-// Labels
-$label-display: block !default;
-$label-padding: 0 0 calc($spacer * 0.25) !default;
-$label-margin: 0 !default;
-$label-font-weight: $font-weight-medium !default;
-$label-text-transform: none !default;
-$label-font-size: $font-size-base !default;
-$label-color: $body-color !default;
-
-// inputs buttons
-$input-button-font-size: $font-size-base !default;
-$input-button-large-font-size: $font-size-4 !default;
-$input-button-small-font-size: $font-size-small !default;
-$input-button-font-family: $font-family-sans-serif !default;
-$input-button-line-height: $line-height-base !default;
-$input-button-padding-y: calc($spacer * 0.375) !default;
-$input-button-padding-x: calc($spacer * 0.75) !default;
-$input-button-large-padding-y: calc($spacer * 0.5) !default;
-$input-button-large-padding-x: calc($spacer * 1.25) !default;
-$input-button-small-padding-y: calc($spacer * 0.25) !default;
-$input-button-small-padding-x: calc($spacer * 0.5) !default;
-$input-button-border-radius: $border-radius-medium !default;
-$input-button-large-border-radius: $border-radius-large !default;
-$input-button-small-border-radius: $border-radius-small !default;
-$input-button-round-border-radius: $border-radius-round !default;
-
-// Input
-$input-font-family: $input-button-font-family !default;
-$input-font-weight: $font-weight-normal !default;
-$input-font-size: $input-button-font-size !default;
-$input-large-font-size: $input-button-large-font-size !default;
-$input-small-font-size: $input-button-small-font-size !default;
-$input-line-height: $input-button-line-height !default;
-$input-padding-y: $input-button-padding-y !default;
-$input-padding-x: $input-button-padding-x !default;
-$input-small-padding-y: $input-button-small-padding-y !default;
-$input-small-padding-x: $input-button-small-padding-x !default;
-$input-large-padding-y: $input-button-large-padding-y !default;
-$input-large-padding-x: $input-button-large-padding-x !default;
-$input-white-space: nowrap !default;
-$input-border-radius: $input-button-border-radius !default;
-$input-large-border-radius: $input-button-large-border-radius !default;
-$input-small-border-radius: $input-button-small-border-radius !default;
-$input-round-border-radius: $input-button-round-border-radius !default;
-
-// Button
-$button-font-family: $input-button-font-family !default;
-$button-font-weight: $font-weight-normal !default;
-$button-font-size: $input-button-font-size !default;
-$button-large-font-size: $input-button-large-font-size !default;
-$button-small-font-size: $input-button-small-font-size !default;
-$button-line-height: $input-button-line-height !default;
-$button-padding-y: $input-button-padding-y !default;
-$button-padding-x: $input-button-padding-x !default;
-$button-large-padding-y: $input-button-large-padding-y !default;
-$button-large-padding-x: $input-button-large-padding-x !default;
-$button-small-padding-y: $input-button-small-padding-y !default;
-$button-small-padding-x: $input-button-small-padding-x !default;
-$button-white-space: nowrap !default;
-$button-border-radius: $input-button-border-radius !default;
-$button-large-border-radius: $input-button-large-border-radius !default;
-$button-small-border-radius: $input-button-small-border-radius !default;
-$button-round-border-radius: $input-button-round-border-radius !default;
-$button-color-flip-threshold: 60% !default;
-$button-color-flip-l: 35% !default;
-$button-disabled-border-alpha: 50% !default;
-$button-hover-background-alpha: 10% !default;
-$button-outline-background: #fff !default;
-
-/* ---------------------------------- close --------------------------------- */
-$close-indicator-color: $white !default;
-$close-indicator-color-light: $dark !default;
-$close-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='#{$close-indicator-color}' d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/></svg>") !default;
-$close-indicator-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='#{$close-indicator-color-light}' d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/></svg>") !default;
-$close-background-color: $gray-5 !default;
-$close-background-color-light: $gray-1 !default;
-$close-hover-indicator-color: $white !default;
-$close-hover-indicator-color-light: $dark !default;
-$close-hover-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='#{$close-hover-indicator-color}' d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/></svg>") !default;
-$close-hover-indicator-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='#{$close-hover-indicator-color-light}' d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/></svg>") !default;
-$close-hover-background-color: $gray-6 !default;
-$close-hover-background-color-light: $gray-2 !default;
-$close-height: calc($spacer * 1.5) !default;
-$close-width: calc($spacer * 1.5) !default;
-$close-small-height: calc($spacer * 1) !default;
-$close-small-width: calc($spacer * 1) !default;
-$close-large-height: calc($spacer * 2) !default;
-$close-large-width: calc($spacer * 2) !default;
-$close-border-radius: $border-radius-round !default;
-
-/* ---------------------------------- card ---------------------------------- */
-$card-header-footer-padding-y: calc($input-button-padding-y - 0.5px) !default;
-$card-header-footer-padding-x: $spacer !default;
-$card-body-padding-y: $spacer !default;
-$card-body-padding-x: $spacer !default;
-
-/* ---------------------------------- tile ---------------------------------- */
-$tile-header-footer-padding-y: calc($input-button-padding-y - 0.5px) !default;
-$tile-header-footer-padding-x: $spacer !default;
-$tile-body-padding-y: $spacer !default;
-$tile-body-padding-x: $spacer !default;
-
-/* ----------------------------------- nav ---------------------------------- */
-$nav-item-padding-y: $input-button-padding-y !default;
-$nav-item-padding-x: $input-button-padding-x !default;
-$nav-item-line-height: $input-button-line-height !default;
-
-/* ------------------------------- breadcrumbs ------------------------------ */
-$breadcrumb-color: $medium !default;
-$breadcrumb-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path fill='#{$breadcrumb-color}' d='M89.45 87.5l143.1 152c4.375 4.625 6.562 10.56 6.562 16.5c0 5.937-2.188 11.87-6.562 16.5l-143.1 152C80.33 434.1 65.14 434.5 55.52 425.4c-9.688-9.125-10.03-24.38-.9375-33.94l128.4-135.5l-128.4-135.5C45.49 110.9 45.83 95.75 55.52 86.56C65.14 77.47 80.33 77.87 89.45 87.5z'/></svg>") !default;
-
-/* ---------------------------------- modal --------------------------------- */
-$modal-open-background: hsl(from var(--dark) h s l / 50%) !default;
-$modal-background-blur: 4px !default;
-
-/* ---------------------------------- alert --------------------------------- */
-$alert-color-l: 20% !default;
-$alert-background-l: 80% !default;
-$alert-border-l: 20% !default;
-
-/* ---------------------------------- pills --------------------------------- */
-$pill-color-flip-threshold: 54% !default;
-$pill-color-flip-l: 35% !default;
-$pill-padding-x: calc($spacer * 0.25) !default;
-$pill-padding-y: calc(($spacer * 0.125) - 1px) !default;
-$pill-font-weight: 600 !default;
-$pill-font-size: $font-size-small !default;
-
-/* ---------------------------------- tags ---------------------------------- */
-$tag-color-flip-threshold: 54% !default;
-$tag-color-flip-l: 60% !default;
-$tag-padding-x: calc($spacer * 0.5) !default;
-$tag-padding-y: calc($spacer * 0.25) !default;
-$tag-font-weight: 400 !default;
-$tag-font-size: $font-size-small !default;
-
-/* --------------------------------- details -------------------------------- */
-$details-transition: height 500ms ease;
+@use "sass:map";
+@use "sass:color";
+@use "sass:math";
+
+/* --------------------------------- options -------------------------------- */
+$enable-margins: true !default;
+$enable-cssgrid: true !default;
+
+/* --------------------------------- colours -------------------------------- */
+$white: #fff !default;
+$gray-1: #f6f6f7 !default;
+$gray-2: #dadadc !default;
+$gray-3: #bebfc1 !default;
+$gray-4: #a1a3a6 !default;
+$gray-5: #85888b !default;
+$gray-6: #696c70 !default;
+$gray-7: #4d5055 !default;
+$gray-8: #30353a !default;
+$gray-9: #14191f !default;
+$black: #000 !default;
+$grays: (
+  "gray-1": $gray-1,
+  "gray-2": $gray-2,
+  "gray-3": $gray-3,
+  "gray-4": $gray-4,
+  "gray-5": $gray-5,
+  "gray-6": $gray-6,
+  "gray-7": $gray-7,
+  "gray-8": $gray-8,
+  "gray-9": $gray-9
+) !default;
+$blue: #0d6efd !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #d63384 !default;
+$red: #dc3545 !default;
+$orange: #fd7e14 !default;
+$yellow: #ffc107 !default;
+$green: #198754 !default;
+$teal: #20c997 !default;
+$cyan: #0dcaf0 !default;
+$colors: (
+  "blue": $blue,
+  "indigo": $indigo,
+  "purple": $purple,
+  "pink": $pink,
+  "red": $red,
+  "orange": $orange,
+  "yellow": $yellow,
+  "green": $green,
+  "teal": $teal,
+  "cyan": $cyan,
+  "white": $white,
+  "black": $black
+) !default;
+$primary: $blue !default;
+$secondary: $gray-6 !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-1 !default;
+$medium: $gray-6 !default;
+$dark: $gray-8 !default;
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "medium": $medium,
+  "dark": $dark
+) !default;
+$all-colors: map.merge($colors, $theme-colors) !default;
+$color-flip-threshold: 50% !default;
+$color-flip-l: 35% !default;
+$color-disabled-alpha: 65% !default;
+
+/* ---------------------------------- Misc ---------------------------------- */
+$escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"), ("(", "%28"), (")", "%29")) !default;
+
+/* ----------------------------- spacing & size ----------------------------- */
+$spacer: 1rem !default;
+$spacers: (
+  0: 0,
+  1: $spacer * 0.25,
+  2: $spacer * 0.5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3
+) !default;
+$gutters: $spacers !default;
+$sizes: (0, 1, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100) !default;
+
+/* ---------------------------------- links --------------------------------- */
+$link-shade-percentage: 20% !default;
+$link-decoration: none !default;
+$link-hover-decoration: underline !default;
+
+/* ---------------------------------- body ---------------------------------- */
+$body-background: $white !default;
+$body-color: $gray-9 !default;
+$body-text-align: null !default;
+
+/* --------------------------------- layout --------------------------------- */
+$breakpoints: (
+  "none": 0,
+  "smallmobile": 320px,
+  "mobile": 576px,
+  "tablet": 768px,
+  "desktop": 1024px,
+  "widescreen": 1216px,
+  "fullhd": 1408px
+) !default;
+$container-max-widths: (
+  "mobile": 516px,
+  "tablet": 708px,
+  "desktop": 964px,
+  "widescreen": 1156px,
+  "fullhd": 1348px
+) !default;
+$grid-columns: 12 !default;
+$grid-gutter: calc($spacer * 1.5) !default;
+$grid-gutter-tight: calc($spacer * 0.75) !default;
+
+/* -------------------------------- font size ------------------------------- */
+$font-size-root: null !default;
+$font-size-base: $spacer !default;
+$line-height-base: 1.5 !default;
+$font-size-6: $font-size-base !default;
+$font-size-5: calc($font-size-base * 1.125) !default;
+$font-size-4: calc(($font-size-base * 1.275) + 0.3vw) !default;
+$font-size-3: calc(($font-size-base * 1.3) + 0.6vw) !default;
+$font-size-2: calc(($font-size-base * 1.325) + 0.9vw) !default;
+$font-size-1: calc(($font-size-base * 1.375) + 1.5vw) !default;
+$font-size-xsmall: 0.675em !default;
+$font-size-small: 0.875em !default;
+$font-sizes: (
+  1: $font-size-1,
+  2: $font-size-2,
+  3: $font-size-3,
+  4: $font-size-4,
+  5: $font-size-5,
+  6: $font-size-6,
+  "small": $font-size-small,
+  "xsmall": $font-size-xsmall,
+  "smaller": 0.85em,
+  "larger": 1.15em
+) !default;
+
+/* ------------------------------- font family ------------------------------ */
+$font-family-sans-serif:
+  inter,
+  -apple-system,
+  blinkmacsystemfont,
+  "Segoe UI",
+  roboto,
+  sans-serif !default;
+$font-family-serif: cambria, "Hoefler Text", utopia, serif !default;
+$font-family-monospace: sfmono-regular, menlo, monaco, consolas, monospace !default;
+$font-family-base: $font-family-sans-serif !default;
+$font-families: (
+  "sans-serif": $font-family-sans-serif,
+  "serif": $font-family-serif,
+  "monospace": $font-family-monospace
+) !default;
+
+/* ------------------------------- font weight ------------------------------ */
+$font-weight-lighter: lighter !default;
+$font-weight-bolder: bolder !default;
+$font-weight-thin: 100 !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-bold: 700 !default;
+$font-weight-heavy: 800 !default;
+$font-weight-black: 900 !default;
+$font-weights: (
+  "lighter": $font-weight-lighter,
+  "bolder": $font-weight-bolder,
+  "thin": $font-weight-thin,
+  "light": $font-weight-light,
+  "normal": $font-weight-normal,
+  "medium": $font-weight-medium,
+  "semibold": $font-weight-semibold,
+  "bold": $font-weight-bold,
+  "heavy": $font-weight-heavy,
+  "black": $font-weight-black,
+  "100": $font-weight-thin,
+  "300": $font-weight-light,
+  "400": $font-weight-normal,
+  "500": $font-weight-medium,
+  "600": $font-weight-semibold,
+  "700": $font-weight-bold,
+  "800": $font-weight-heavy,
+  "900": $font-weight-black
+) !default;
+$font-weight-base: $font-weight-normal !default;
+
+/* ------------------------------- typography ------------------------------- */
+$text-aligns: (left, right, center, justify) !default;
+$text-transforms: (uppercase, lowercase, capitalize, none) !default;
+$text-wraps: (normal, nowrap) !default;
+$font-styles: (italic, oblique, normal) !default;
+
+/* -------------------------------- headings -------------------------------- */
+$headings-font-style: null !default;
+$headings-font-weight: $font-weight-bold !default;
+$headings-line-height: 1.2 !default;
+$headings-color: $body-color !default;
+
+/* --------------------------------- border --------------------------------- */
+$border-color-main: $gray-5 !default;
+$border-color-hover-main: $gray-6 !default;
+$border-color-active-main: $gray-6 !default;
+$border-color-focus-main: $gray-6 !default;
+$border-color-disabled-main: $gray-5 !default;
+$border-shade-percentage: 20% !default;
+$border-shade-hover-percentage: 20% !default;
+$border-radius-none: 0 !default;
+$border-radius-small: calc($spacer * 0.15) !default;
+$border-radius-medium: calc($spacer * 0.275) !default;
+$border-radius-large: calc($spacer * 0.5) !default;
+$border-radius-round: calc($spacer * 99) !default;
+$border-radius-default: $border-radius-medium !default;
+$border-radii: (
+  "none": $border-radius-none,
+  "small": $border-radius-small,
+  "medium": $border-radius-medium,
+  "large": $border-radius-large,
+  "round": $border-radius-round,
+  "default": $border-radius-default
+) !default;
+
+/* ---------------------------------- table --------------------------------- */
+$table-cell-padding-y: calc(($spacer * 0.625) - 0.5px) !default;
+$table-cell-padding-x: calc($spacer * 0.5) !default;
+$table-small-cell-padding-y: calc(($spacer * 0.25) - 1px) !default;
+$table-small-cell-padding-x: calc($spacer * 0.5) !default;
+$table-cell-border-style: solid !default;
+$table-cell-border-width: 1px !default;
+$table-cell-valign: top !default;
+$table-th-font-weight: null !default;
+$table-th-border-width: 2px !default;
+$table-background-color: transparent !default;
+$table-head-background-color: $light !default;
+$table-striped-background-opacity: 4% !default;
+$table-caption-color: $medium !default;
+
+/* --------------------------------- z-index -------------------------------- */
+$zindex-static: 0 !default;
+$zindex-relative: 1 !default;
+$zindex-absolute: 1 !default;
+$zindex-sticky: 1020 !default;
+$zindex-fixed: 1030 !default;
+$zindex-dropdown: 1040 !default;
+$zindex-modal-backdrop: 1050 !default;
+$zindex-modal: 1060 !default;
+$zindex-popover: 1070 !default;
+$zindex-tooltip: 1080 !default;
+$zindexes: (
+  "static": $zindex-static,
+  "relative": $zindex-relative,
+  "absolute": $zindex-absolute,
+  "sticky": $zindex-sticky,
+  "fixed": $zindex-fixed,
+  "dropdown": $zindex-dropdown,
+  "modal-backdrop": $zindex-modal-backdrop,
+  "modal": $zindex-modal,
+  "popover": $zindex-popover,
+  "tooltip": $zindex-tooltip
+) !default;
+
+/* --------------------------------- shadow --------------------------------- */
+$box-shadow-small: 0 calc($spacer * 0.125) calc($spacer * 0.25) hsl(from var(--dark) h s l / 7.5%) !default;
+$box-shadow-medium: 0 calc($spacer * 0.5) calc($spacer * 0.75) hsl(from var(--dark) h s l / 15%) !default;
+$box-shadow-large: 0 $spacer calc($spacer * 2.5) hsl(from var(--dark) h s l / 17.5%) !default;
+$box-shadows: (
+  "small": $box-shadow-small,
+  "medium": $box-shadow-medium,
+  "large": $box-shadow-large
+) !default;
+
+/* ---------------------------------- embed --------------------------------- */
+$embeds: (
+  "32by9": 28.125%,
+  "21by9": 42.8571%,
+  "16by9": 56.25%,
+  "4by3": 75%,
+  "1by1": 100%
+) !default;
+
+/* ---------------------------------- forms --------------------------------- */
+$form-select-indicator-color: $body-color !default;
+$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
+$list-nested-indicator-color: hsl(from var(--body-color) h s l / 25%) !default;
+$list-nested-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$list-nested-indicator-color}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z'/></svg>") !default;
+$form-file-indicator-color: hsl(from var(--body-color) h s l / 25%) !default;
+$form-file-indicator-hover-color: hsl(from var(--body-color) h s l / 50%) !default;
+$form-file-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$form-file-indicator-color}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/></svg>") !default;
+$form-file-indicator-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$form-file-indicator-hover-color}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/></svg>") !default;
+$form-transition:
+  color 0.15s ease-in-out,
+  background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out,
+  box-shadow 0.15s ease-in-out;
+
+// Labels
+$label-display: block !default;
+$label-padding: 0 0 calc($spacer * 0.25) !default;
+$label-margin: 0 !default;
+$label-font-weight: $font-weight-medium !default;
+$label-text-transform: none !default;
+$label-font-size: $font-size-base !default;
+$label-color: $body-color !default;
+
+// inputs buttons
+$input-button-font-size: $font-size-base !default;
+$input-button-large-font-size: $font-size-4 !default;
+$input-button-small-font-size: $font-size-small !default;
+$input-button-line-height: $line-height-base !default;
+$input-button-padding-y: calc($spacer * 0.375) !default;
+$input-button-padding-x: calc($spacer * 0.75) !default;
+$input-button-large-padding-y: calc($spacer * 0.5) !default;
+$input-button-large-padding-x: calc($spacer * 1.25) !default;
+$input-button-small-padding-y: calc($spacer * 0.25) !default;
+$input-button-small-padding-x: calc($spacer * 0.5) !default;
+$input-button-border-radius: $border-radius-medium !default;
+$input-button-large-border-radius: $border-radius-large !default;
+$input-button-small-border-radius: $border-radius-small !default;
+$input-button-round-border-radius: $border-radius-round !default;
+
+// Input
+$input-font-weight: $font-weight-normal !default;
+$input-font-size: $input-button-font-size !default;
+$input-large-font-size: $input-button-large-font-size !default;
+$input-small-font-size: $input-button-small-font-size !default;
+$input-line-height: $input-button-line-height !default;
+$input-padding-y: $input-button-padding-y !default;
+$input-padding-x: $input-button-padding-x !default;
+$input-small-padding-y: $input-button-small-padding-y !default;
+$input-small-padding-x: $input-button-small-padding-x !default;
+$input-large-padding-y: $input-button-large-padding-y !default;
+$input-large-padding-x: $input-button-large-padding-x !default;
+$input-white-space: nowrap !default;
+$input-border-radius: $input-button-border-radius !default;
+$input-large-border-radius: $input-button-large-border-radius !default;
+$input-small-border-radius: $input-button-small-border-radius !default;
+$input-round-border-radius: $input-button-round-border-radius !default;
+
+// Button
+$button-font-weight: $font-weight-normal !default;
+$button-font-size: $input-button-font-size !default;
+$button-large-font-size: $input-button-large-font-size !default;
+$button-small-font-size: $input-button-small-font-size !default;
+$button-line-height: $input-button-line-height !default;
+$button-padding-y: $input-button-padding-y !default;
+$button-padding-x: $input-button-padding-x !default;
+$button-large-padding-y: $input-button-large-padding-y !default;
+$button-large-padding-x: $input-button-large-padding-x !default;
+$button-small-padding-y: $input-button-small-padding-y !default;
+$button-small-padding-x: $input-button-small-padding-x !default;
+$button-white-space: nowrap !default;
+$button-border-radius: $input-button-border-radius !default;
+$button-large-border-radius: $input-button-large-border-radius !default;
+$button-small-border-radius: $input-button-small-border-radius !default;
+$button-round-border-radius: $input-button-round-border-radius !default;
+$button-color-flip-threshold: 60% !default;
+$button-color-flip-l: 35% !default;
+$button-disabled-border-alpha: 50% !default;
+$button-hover-background-alpha: 10% !default;
+$button-outline-background: #fff !default;
+
+/* ---------------------------------- close --------------------------------- */
+$close-indicator-color: $white !default;
+$close-indicator-color-light: $dark !default;
+$close-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='#{$close-indicator-color}' d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/></svg>") !default;
+$close-indicator-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='#{$close-indicator-color-light}' d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/></svg>") !default;
+$close-background-color: $gray-5 !default;
+$close-background-color-light: $gray-1 !default;
+$close-hover-indicator-color: $white !default;
+$close-hover-indicator-color-light: $dark !default;
+$close-hover-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='#{$close-hover-indicator-color}' d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/></svg>") !default;
+$close-hover-indicator-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='#{$close-hover-indicator-color-light}' d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/></svg>") !default;
+$close-hover-background-color: $gray-6 !default;
+$close-hover-background-color-light: $gray-2 !default;
+$close-height: calc($spacer * 1.5) !default;
+$close-width: calc($spacer * 1.5) !default;
+$close-small-height: calc($spacer * 1) !default;
+$close-small-width: calc($spacer * 1) !default;
+$close-large-height: calc($spacer * 2) !default;
+$close-large-width: calc($spacer * 2) !default;
+$close-border-radius: $border-radius-round !default;
+
+/* ---------------------------------- card ---------------------------------- */
+$card-header-footer-padding-y: calc($input-button-padding-y - 0.5px) !default;
+$card-header-footer-padding-x: $spacer !default;
+$card-body-padding-y: $spacer !default;
+$card-body-padding-x: $spacer !default;
+
+/* ---------------------------------- tile ---------------------------------- */
+$tile-header-footer-padding-y: calc($input-button-padding-y - 0.5px) !default;
+$tile-header-footer-padding-x: $spacer !default;
+$tile-body-padding-y: $spacer !default;
+$tile-body-padding-x: $spacer !default;
+
+/* ----------------------------------- nav ---------------------------------- */
+$nav-item-padding-y: $input-button-padding-y !default;
+$nav-item-padding-x: $input-button-padding-x !default;
+$nav-item-line-height: $input-button-line-height !default;
+
+/* ------------------------------- breadcrumbs ------------------------------ */
+$breadcrumb-color: $medium !default;
+$breadcrumb-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path fill='#{$breadcrumb-color}' d='M89.45 87.5l143.1 152c4.375 4.625 6.562 10.56 6.562 16.5c0 5.937-2.188 11.87-6.562 16.5l-143.1 152C80.33 434.1 65.14 434.5 55.52 425.4c-9.688-9.125-10.03-24.38-.9375-33.94l128.4-135.5l-128.4-135.5C45.49 110.9 45.83 95.75 55.52 86.56C65.14 77.47 80.33 77.87 89.45 87.5z'/></svg>") !default;
+
+/* ---------------------------------- modal --------------------------------- */
+$modal-open-background: hsl(from var(--dark) h s l / 50%) !default;
+$modal-background-blur: 4px !default;
+
+/* ---------------------------------- alert --------------------------------- */
+$alert-color-l: 20% !default;
+$alert-background-l: 80% !default;
+$alert-border-l: 20% !default;
+
+/* ---------------------------------- pills --------------------------------- */
+$pill-color-flip-threshold: 54% !default;
+$pill-color-flip-l: 35% !default;
+$pill-padding-x: calc($spacer * 0.25) !default;
+$pill-padding-y: calc(($spacer * 0.125) - 1px) !default;
+$pill-font-weight: 600 !default;
+$pill-font-size: $font-size-small !default;
+
+/* ---------------------------------- tags ---------------------------------- */
+$tag-color-flip-threshold: 54% !default;
+$tag-color-flip-l: 60% !default;
+$tag-padding-x: calc($spacer * 0.5) !default;
+$tag-padding-y: calc($spacer * 0.25) !default;
+$tag-font-weight: 400 !default;
+$tag-font-size: $font-size-small !default;
+
+/* --------------------------------- details -------------------------------- */
+$details-transition: height 500ms ease;