claritas-web-framework 6.2.72 → 6.3.1

package/sass/_variables.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "sass:color";
+@use "sass:math";
 
 $enable-rounded: true !default;
 $enable-shadows: false !default;
@@ -7,12 +8,9 @@ $enable-gradients: false !default;
 $enable-transitions: true !default;
 $enable-reduced-motion: true !default;
 $enable-button-pointers: true !default;
-$enable-rfs: true !default;
 $enable-smooth-scroll: true !default;
 $enable-margins: true !default;
 
-$prefix: "" !default;
-
 // Color system
 $white: #fff !default;
 $gray-1: #f6f6f7 !default;
@@ -25,7 +23,6 @@ $gray-7: #4d5055 !default;
 $gray-8: #30353a !default;
 $gray-9: #14191f !default;
 $black: #000 !default;
-
 $grays: (
   "gray-1": $gray-1,
   "gray-2": $gray-2,
@@ -37,7 +34,6 @@ $grays: (
   "gray-8": $gray-8,
   "gray-9": $gray-9,
 ) !default;
-
 $blue: #0d6efd !default;
 $indigo: #6610f2 !default;
 $purple: #6f42c1 !default;
@@ -48,7 +44,6 @@ $yellow: #ffc107 !default;
 $green: #198754 !default;
 $teal: #20c997 !default;
 $cyan: #0dcaf0 !default;
-
 $colors: (
   "blue": $blue,
   "indigo": $indigo,
@@ -64,7 +59,6 @@ $colors: (
   "gray": $gray-6,
   "gray-dark": $gray-8,
 ) !default;
-
 $primary: $blue !default;
 $secondary: $gray-6 !default;
 $success: $green !default;
@@ -74,7 +68,6 @@ $danger: $red !default;
 $light: $gray-1 !default;
 $medium: $gray-6 !default;
 $dark: $gray-8 !default;
-
 $theme-colors: (
   "primary": $primary,
   "secondary": $secondary,
@@ -90,235 +83,14 @@ $theme-colors: (
 // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
 // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
 $min-contrast-ratio: 2 !default;
+$lightness-value: 55% !default;
 
 // Customize the light and dark text colors for use in our color contrast function.
 $color-contrast-dark: $dark !default;
 $color-contrast-light: $light !default;
 
-$blue-1: color.mix(white, $blue, 80%) !default;
-$blue-2: color.mix(white, $blue, 60%) !default;
-$blue-3: color.mix(white, $blue, 40%) !default;
-$blue-4: color.mix(white, $blue, 20%) !default;
-$blue-5: $blue !default;
-$blue-6: color.mix(black, $blue, 20%) !default;
-$blue-7: color.mix(black, $blue, 40%) !default;
-$blue-8: color.mix(black, $blue, 60%) !default;
-$blue-9: color.mix(black, $blue, 80%) !default;
-
-$indigo-1: color.mix(white, $indigo, 80%) !default;
-$indigo-2: color.mix(white, $indigo, 60%) !default;
-$indigo-3: color.mix(white, $indigo, 40%) !default;
-$indigo-4: color.mix(white, $indigo, 20%) !default;
-$indigo-5: $indigo !default;
-$indigo-6: color.mix(black, $indigo, 20%) !default;
-$indigo-7: color.mix(black, $indigo, 40%) !default;
-$indigo-8: color.mix(black, $indigo, 60%) !default;
-$indigo-9: color.mix(black, $indigo, 80%) !default;
-
-$purple-1: color.mix(white, $purple, 80%) !default;
-$purple-2: color.mix(white, $purple, 60%) !default;
-$purple-3: color.mix(white, $purple, 40%) !default;
-$purple-4: color.mix(white, $purple, 20%) !default;
-$purple-5: $purple !default;
-$purple-6: color.mix(black, $purple, 20%) !default;
-$purple-7: color.mix(black, $purple, 40%) !default;
-$purple-8: color.mix(black, $purple, 60%) !default;
-$purple-9: color.mix(black, $purple, 80%) !default;
-
-$pink-1: color.mix(white, $pink, 80%) !default;
-$pink-2: color.mix(white, $pink, 60%) !default;
-$pink-3: color.mix(white, $pink, 40%) !default;
-$pink-4: color.mix(white, $pink, 20%) !default;
-$pink-5: $pink !default;
-$pink-6: color.mix(black, $pink, 20%) !default;
-$pink-7: color.mix(black, $pink, 40%) !default;
-$pink-8: color.mix(black, $pink, 60%) !default;
-$pink-9: color.mix(black, $pink, 80%) !default;
-
-$red-1: color.mix(white, $red, 80%) !default;
-$red-2: color.mix(white, $red, 60%) !default;
-$red-3: color.mix(white, $red, 40%) !default;
-$red-4: color.mix(white, $red, 20%) !default;
-$red-5: $red !default;
-$red-6: color.mix(black, $red, 20%) !default;
-$red-7: color.mix(black, $red, 40%) !default;
-$red-8: color.mix(black, $red, 60%) !default;
-$red-9: color.mix(black, $red, 80%) !default;
-
-$orange-1: color.mix(white, $orange, 80%) !default;
-$orange-2: color.mix(white, $orange, 60%) !default;
-$orange-3: color.mix(white, $orange, 40%) !default;
-$orange-4: color.mix(white, $orange, 20%) !default;
-$orange-5: $orange !default;
-$orange-6: color.mix(black, $orange, 20%) !default;
-$orange-7: color.mix(black, $orange, 40%) !default;
-$orange-8: color.mix(black, $orange, 60%) !default;
-$orange-9: color.mix(black, $orange, 80%) !default;
-
-$yellow-1: color.mix(white, $yellow, 80%) !default;
-$yellow-2: color.mix(white, $yellow, 60%) !default;
-$yellow-3: color.mix(white, $yellow, 40%) !default;
-$yellow-4: color.mix(white, $yellow, 20%) !default;
-$yellow-5: $yellow !default;
-$yellow-6: color.mix(black, $yellow, 20%) !default;
-$yellow-7: color.mix(black, $yellow, 40%) !default;
-$yellow-8: color.mix(black, $yellow, 60%) !default;
-$yellow-9: color.mix(black, $yellow, 80%) !default;
-
-$green-1: color.mix(white, $green, 80%) !default;
-$green-2: color.mix(white, $green, 60%) !default;
-$green-3: color.mix(white, $green, 40%) !default;
-$green-4: color.mix(white, $green, 20%) !default;
-$green-5: $green !default;
-$green-6: color.mix(black, $green, 20%) !default;
-$green-7: color.mix(black, $green, 40%) !default;
-$green-8: color.mix(black, $green, 60%) !default;
-$green-9: color.mix(black, $green, 80%) !default;
-
-$teal-1: color.mix(white, $teal, 80%) !default;
-$teal-2: color.mix(white, $teal, 60%) !default;
-$teal-3: color.mix(white, $teal, 40%) !default;
-$teal-4: color.mix(white, $teal, 20%) !default;
-$teal-5: $teal !default;
-$teal-6: color.mix(black, $teal, 20%) !default;
-$teal-7: color.mix(black, $teal, 40%) !default;
-$teal-8: color.mix(black, $teal, 60%) !default;
-$teal-9: color.mix(black, $teal, 80%) !default;
-
-$cyan-1: color.mix(white, $cyan, 80%) !default;
-$cyan-2: color.mix(white, $cyan, 60%) !default;
-$cyan-3: color.mix(white, $cyan, 40%) !default;
-$cyan-4: color.mix(white, $cyan, 20%) !default;
-$cyan-5: $cyan !default;
-$cyan-6: color.mix(black, $cyan, 20%) !default;
-$cyan-7: color.mix(black, $cyan, 40%) !default;
-$cyan-8: color.mix(black, $cyan, 60%) !default;
-$cyan-9: color.mix(black, $cyan, 80%) !default;
-
-$blues: (
-  "blue-1": $blue-1,
-  "blue-2": $blue-2,
-  "blue-3": $blue-3,
-  "blue-4": $blue-4,
-  "blue-5": $blue-5,
-  "blue-6": $blue-6,
-  "blue-7": $blue-7,
-  "blue-8": $blue-8,
-  "blue-9": $blue-9,
-) !default;
-
-$indigos: (
-  "indigo-1": $indigo-1,
-  "indigo-2": $indigo-2,
-  "indigo-3": $indigo-3,
-  "indigo-4": $indigo-4,
-  "indigo-5": $indigo-5,
-  "indigo-6": $indigo-6,
-  "indigo-7": $indigo-7,
-  "indigo-8": $indigo-8,
-  "indigo-9": $indigo-9,
-) !default;
-
-$purples: (
-  "purple-1": $purple-2,
-  "purple-2": $purple-1,
-  "purple-3": $purple-3,
-  "purple-4": $purple-4,
-  "purple-5": $purple-5,
-  "purple-6": $purple-6,
-  "purple-7": $purple-7,
-  "purple-8": $purple-8,
-  "purple-9": $purple-9,
-) !default;
-
-$pinks: (
-  "pink-1": $pink-1,
-  "pink-2": $pink-2,
-  "pink-3": $pink-3,
-  "pink-4": $pink-4,
-  "pink-5": $pink-5,
-  "pink-6": $pink-6,
-  "pink-7": $pink-7,
-  "pink-8": $pink-8,
-  "pink-9": $pink-9,
-) !default;
-
-$reds: (
-  "red-1": $red-1,
-  "red-2": $red-2,
-  "red-3": $red-3,
-  "red-4": $red-4,
-  "red-5": $red-5,
-  "red-6": $red-6,
-  "red-7": $red-7,
-  "red-8": $red-8,
-  "red-9": $red-9,
-) !default;
-
-$oranges: (
-  "orange-1": $orange-1,
-  "orange-2": $orange-2,
-  "orange-3": $orange-3,
-  "orange-4": $orange-4,
-  "orange-5": $orange-5,
-  "orange-6": $orange-6,
-  "orange-7": $orange-7,
-  "orange-8": $orange-8,
-  "orange-9": $orange-9,
-) !default;
-
-$yellows: (
-  "yellow-1": $yellow-1,
-  "yellow-2": $yellow-2,
-  "yellow-3": $yellow-3,
-  "yellow-4": $yellow-4,
-  "yellow-5": $yellow-5,
-  "yellow-6": $yellow-6,
-  "yellow-7": $yellow-7,
-  "yellow-8": $yellow-8,
-  "yellow-9": $yellow-9,
-) !default;
-
-$greens: (
-  "green-1": $green-1,
-  "green-2": $green-2,
-  "green-3": $green-3,
-  "green-4": $green-4,
-  "green-5": $green-5,
-  "green-6": $green-6,
-  "green-7": $green-7,
-  "green-8": $green-8,
-  "green-9": $green-9,
-) !default;
-
-$teals: (
-  "teal-1": $teal-1,
-  "teal-2": $teal-2,
-  "teal-3": $teal-3,
-  "teal-4": $teal-4,
-  "teal-5": $teal-5,
-  "teal-6": $teal-6,
-  "teal-7": $teal-7,
-  "teal-8": $teal-8,
-  "teal-9": $teal-9,
-) !default;
-
-$cyans: (
-  "cyan-1": $cyan-1,
-  "cyan-2": $cyan-2,
-  "cyan-3": $cyan-3,
-  "cyan-4": $cyan-4,
-  "cyan-5": $cyan-5,
-  "cyan-6": $cyan-6,
-  "cyan-7": $cyan-7,
-  "cyan-8": $cyan-8,
-  "cyan-9": $cyan-9,
-) !default;
-
 $all-colors: map.merge($colors, $theme-colors) !default;
-
 $spacer: 1rem !default;
-
 $spacers: (
   0: 0,
   1: $spacer * 0.25,
@@ -328,25 +100,21 @@ $spacers: (
   5: $spacer * 3,
 ) !default;
 
-$link-color: $primary !default;
 $link-shade-percentage: 20% !default;
-$link-hover-color: color.mix(black, $link-color, $link-shade-percentage) !default;
+$link-shade-value: 0.8 !default;
 $link-decoration: none !default;
 $link-hover-decoration: underline !default;
-
 $body-background: $white !default;
 $body-color: $gray-9 !default;
 $body-text-align: null !default;
-
 $breakpoints: (
-  "<-mobile": 0,
+  "below-mobile": 0,
   "mobile": 576px,
   "tablet": 768px,
   "desktop": 1024px,
   "widescreen": 1216px,
   "fullhd": 1408px,
 ) !default;
-
 $container-max-widths: (
   "mobile": 576px,
   "tablet": 768px,
@@ -354,30 +122,25 @@ $container-max-widths: (
   "widescreen": 1216px,
   "fullhd": 1408px,
 ) !default;
-
 $grid-columns: 12 !default;
 $grid-gutter-x: calc($spacer * 1.5) !default;
 $grid-gutter-y: null !default;
 $grid-margin-x: 0.5 !default;
 $grid-margin-x-tight: 0.25 !default;
-
 $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-size-sub-sup: 0.75em !default;
 $font-size-large: calc($font-size-base * 1.25) !default;
 $font-size-code: $font-size-base !default;
-
 $font-sizes: (
   1: $font-size-1,
   2: $font-size-2,
@@ -393,25 +156,21 @@ $font-sizes: (
   "sub-sup": $font-size-sub-sup,
   "code": $font-size-code,
 ) !default;
-
-$font-family-sans-serif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+$font-family-sans-serif: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial,
   "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$font-family-serif: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times,
+$font-family-serif: cambria, "Hoefler Text", utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", times,
   "Times New Roman", serif !default;
-$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-monospace: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", 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;
-
 $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;
-
 $font-weight-lighter: lighter !default;
 $font-weight-bolder: bolder !default;
 $font-weight-thin: 100 !default;
@@ -422,7 +181,6 @@ $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,
@@ -435,29 +193,36 @@ $font-weights: (
   "heavy": $font-weight-heavy,
   "black": $font-weight-black,
 ) !default;
-
 $font-weight-base: $font-weight-normal !default;
-
 $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-color-main: $black !default;
 $border-unfocus-opacity: 10% !default;
 $border-opacity: 20% !default;
+$border-opacity-value: 0.2 !default;
 $border-hover-opacity: 30% !default;
 $border-active-opacity: 40% !default;
 $border-width: 1px !default;
 $border-style: solid !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-none: 0 !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;
+
 $hr-border-color: $border-color-main !default;
 $hr-border-opacity: $border-opacity !default;
 $hr-border-width: $border-width !default;
@@ -467,22 +232,17 @@ $hr-margin-x: 0 !default;
 $hr-color: transparent !default;
 $hr-background-color: null !default;
 $hr-height: 0 !default;
-
 $legend-margin-bottom: 0.5rem !default;
 $legend-font-size: 1.5rem !default;
 $legend-font-weight: null !default;
-
 $dt-font-weight: $font-weight-bold !default;
-
 $mark-padding: 0.1875em !default;
 $pre-color: null !default;
-
 $kbd-padding-y: 0.1875rem !default;
 $kbd-padding-x: 0.375rem !default;
 $kbd-font-size: $font-size-code !default;
 $kbd-color: var(--body-background) !default;
 $kbd-background: var(--body-color) !default;
-
 $table-cell-padding-y: calc(($spacer * 0.625) - 1px) !default;
 $table-cell-padding-x: calc($spacer * 0.5) !default;
 $table-cell-padding-y-small: calc(($spacer * 0.25) - 1px) !default;
@@ -499,7 +259,6 @@ $table-striped-background-opacity: 4% !default;
 $table-even-background-color: rgba($dark, $table-striped-background-opacity) !default;
 $table-odd-background-color: rgba($light, $table-striped-background-opacity) !default;
 $table-caption-color: $medium !default;
-
 $zindex-static: 0 !default;
 $zindex-relative: 1 !default;
 $zindex-absolute: 1 !default;
@@ -510,7 +269,6 @@ $zindex-modal-backdrop: 1050 !default;
 $zindex-modal: 1060 !default;
 $zindex-popover: 1070 !default;
 $zindex-tooltip: 1080 !default;
-
 $zindexes: (
   "static": $zindex-static,
   "relative": $zindex-relative,
@@ -523,21 +281,17 @@ $zindexes: (
   "popover": $zindex-popover,
   "tooltip": $zindex-tooltip,
 ) !default;
-
 $box-shadow-none: none !default;
 $box-shadow-small: 0 calc($spacer * 0.125) calc($spacer * 0.25) rgba($dark, 7.5%) !default;
 $box-shadow-medium: 0 calc($spacer * 0.5) calc($spacer * 0.75) rgba($dark, 15%) !default;
 $box-shadow-large: 0 $spacer calc($spacer * 2.5) rgba($dark, 17.5%) !default;
-
 $box-shadows: (
   "none": $box-shadow-none,
   "small": $box-shadow-small,
   "medium": $box-shadow-medium,
   "large": $box-shadow-large,
 ) !default;
-
 $component-active-background: $primary !default;
-
 $embeds: (
   "32by9": 28.125%,
   "21by9": 42.8571%,
@@ -545,20 +299,15 @@ $embeds: (
   "4by3": 75%,
   "1by1": 100%,
 ) !default;
-
 $escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"), ("(", "%28"), (")", "%29")) !default;
-
 $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: rgba($body-color, 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: rgba($body-color, 25%) !default;
 $form-file-indicator-hover-color: rgba($body-color, 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;
 
@@ -570,7 +319,6 @@ $label-font-weight: $font-weight-medium !default;
 $label-text-transform: none !default;
 $label-font-size: $font-size-base !default;
 $label-color: $body-color !default;
-
 $input-button-border-width: $border-width !default;
 $input-button-border-style: $border-style !default;
 $input-button-border-color: rgba($border-color-main, $border-opacity) !default;
@@ -579,15 +327,12 @@ $input-button-active-border-color: rgba($border-color-main, $border-active-opaci
 $input-button-border-radius: $border-radius-default !default;
 $input-button-border-radius-large: $border-radius-large !default;
 $input-button-border-radius-small: $border-radius-small !default;
-
 $input-button-background: $white !default;
-
 $input-button-font-size: $font-size-base !default;
 $input-button-font-size-large: $font-size-large !default;
 $input-button-font-size-small: $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-padding-y-large: calc($spacer * 0.5) !default;
@@ -597,13 +342,11 @@ $input-button-padding-x-small: calc($spacer * 0.5) !default;
 
 // $input-button-focus-box-shadow: 0 0 0 calc($spacer * 0.25) $input-button-border-color !default;
 // $input-button-focus-box-shadow:    0 0 $input-button-focus-blur $input-button-focus-width $input-button-focus-color !default;
-
 $input-button-focus-width: 0.25rem !default;
 $input-button-focus-color-opacity: 0.25 !default;
 $input-button-focus-color: rgba($component-active-background, $input-button-focus-color-opacity) !default;
 $input-button-focus-blur: 0 !default;
 $input-button-focus-box-shadow: 0 0 $input-button-focus-blur $input-button-focus-width $input-button-focus-color !default;
-
 $input-button-disabled-opacity: 65% !default;
 $input-button-detail-color: $primary !default;
 
@@ -618,16 +361,13 @@ $input-focus-border-color: $input-button-active-border-color !default;
 $input-border-radius: $input-button-border-radius !default;
 $input-border-radius-large: $input-button-border-radius-large !default;
 $input-border-radius-small: $input-button-border-radius-small !default;
-
 $input-background-color: $input-button-background !default;
-
 $input-padding-y: $input-button-padding-y !default;
 $input-padding-x: $input-button-padding-x !default;
 $input-padding-y-large: $input-button-padding-y-large !default;
 $input-padding-x-large: $input-button-padding-x-large !default;
 $input-padding-y-small: $input-button-padding-y-small !default;
 $input-padding-x-small: $input-button-padding-x-small !default;
-
 $input-font-size: $input-button-font-size !default;
 $input-font-size-large: $input-button-font-size-large !default;
 $input-font-size-small: $input-button-font-size-small !default;
@@ -644,31 +384,24 @@ $button-border-style: $input-button-border-style !default;
 $button-border-color: $input-button-border-color !default;
 $button-hover-border-color: $input-button-hover-border-color !default;
 $button-active-border-color: $input-button-active-border-color !default;
-
 $button-border-radius: $input-button-border-radius !default;
 $button-border-radius-large: $input-button-border-radius-large !default;
 $button-border-radius-small: $input-button-border-radius-small !default;
 $button-white-space: null !default;
 $button-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 !default;
-
 $button-background: $input-button-background !default;
-
 $button-padding-y: $input-button-padding-y !default;
 $button-padding-x: $input-button-padding-x !default;
 $button-padding-y-large: $input-button-padding-y-large !default;
 $button-padding-x-large: $input-button-padding-x-large !default;
 $button-padding-y-small: $input-button-padding-y-small !default;
 $button-padding-x-small: $input-button-padding-x-small !default;
-
 $button-font-size: $input-button-font-size !default;
 $button-font-size-large: $input-button-font-size-large !default;
 $button-font-size-small: $input-button-font-size-small !default;
 $button-font-family: $input-button-font-family !default;
-
 $button-focus-box-shadow: $input-button-focus-box-shadow !default;
-$button-disabled-opacity: $input-button-disabled-opacity !default;
-
 $button-hover-background-shade-amount: 15% !default;
 $button-hover-background-tint-amount: 15% !default;
 $button-hover-border-shade-amount: 20% !default;
@@ -677,13 +410,11 @@ $button-active-background-shade-amount: 20% !default;
 $button-active-background-tint-amount: 20% !default;
 $button-active-border-shade-amount: 25% !default;
 $button-active-border-tint-amount: 10% !default;
-
 $button-font-weight: $font-weight-normal !default;
 $button-box-shadow: inset 0 1px 0 rgba($white, 15%), 0 1px 1px rgba($black, 7.5%) !default;
 $button-focus-box-shadow: $input-button-focus-box-shadow !default;
 $button-disabled-opacity: $input-button-disabled-opacity !default;
 $button-active-box-shadow: inset 0 3px 5px rgba($black, 12.5%) !default;
-
 $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;
@@ -716,19 +447,6 @@ $card-background-color: $white !default;
 $card-header-footer-padding: calc(($spacer * 0.375) - 1px) $spacer !default;
 $card-body-padding: $spacer !default;
 
-// Tag
-$tag-background: $light !default;
-$tag-border-color: rgba($border-color-main, $border-opacity) !default;
-$tag-border-radius: $border-radius-default !default;
-$tag-color: $body-color !default;
-$tag-padding-y: calc(($spacer * 0.25) - 1px) !default;
-$tag-padding-x: calc(($spacer * 0.5) - 1px) !default;
-
-// Pill
-$pill-background: $light !default;
-$pill-border-color: rgba($border-color-main, $border-opacity) !default;
-$pill-color: $body-color !default;
-
 // Nav
 $nav-label-color: $medium !default;
 $nav-label-font-size: $font-size-small !default;
@@ -763,6 +481,46 @@ $details-caret-color: $primary !default;
 $tabs-active-color: $primary !default;
 
 // Dialog
-$modal-background: rgba(#{color.red($dark)} #{color.green($dark)} #{color.blue($dark)} / 0%) !default;
 $modal-open-background: rgba(#{color.red($dark)} #{color.green($dark)} #{color.blue($dark)} / 50%) !default;
 $modal-background-blur: 4px !default;
+
+// Colours
+$color-flip-threshold: 50% !default;
+$color-flip-l: 35% !default;
+$color-variant-border-l: 20% !default;
+$color-variant-border-a: 50% !default;
+$color-variant-hover-border-a: 60% !default;
+
+// Alert
+$alert-color-l: 40% !default;
+$alert-background-l: 90% !default;
+
+// Buttons
+$button-color-flip-threshold: 52.5% !default;
+$button-color-flip-l: 35% !default;
+$button-active-background-l: 95% !default;
+$button-background-l: 10% !default;
+$button-hover-background-l: 5% !default;
+$button-hover-link-background-a: 15% !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-family: $font-family-base !default;
+$pill-font-weight: 600 !default;
+$pill-line-height: 1 !default;
+$pill-white-space: nowrap !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-family: $font-family-base !default;
+$tag-font-weight: 400 !default;
+$tag-line-height: 1 !default;
+$tag-white-space: nowrap !default;
+$tag-font-size: $font-size-small !default;

package/sass/helpers/_grid.scss

@@ -1,5 +1,4 @@
 @use "sass:map";
-
 @use "./../variables" as *;
 @use "./../mixins/breakpoints" as *;
 @use "./../mixins/grid" as *;
@@ -18,13 +17,13 @@
 
     [class*="col-#{$infix}-fit"],
     .col-#{$infix}-fit {
-      --#{$prefix}flex: 1 0 0%;
+      --flex: 1 0 0%;
     }
 
     @for $value from 1 through $grid-columns {
       [class*="col-#{$infix}-#{$value}"],
       .col-#{$infix}-#{$value} {
-        --#{$prefix}width: calc((#{$value} / #{$grid-columns}) * 100%);
+        --width: calc((#{$value} / #{$grid-columns}) * 100%);
       }
     }