claritas-web-framework 7.0.1 → 8.0.0

package/sass/_variables.scss

@@ -2,18 +2,12 @@
 @use "sass:color";
 @use "sass:math";
 
-$enable-rounded: true !default;
-$enable-shadows: false !default;
-$enable-gradients: false !default;
-$enable-transitions: true !default;
-$enable-reduced-motion: true !default;
-$enable-button-pointers: true !default;
+/* --------------------------------- options -------------------------------- */
 $enable-smooth-scroll: true !default;
 $enable-margins: true !default;
-$enable-grid-classes: true !default;
 $enable-cssgrid: true !default;
 
-// Color system
+/* --------------------------------- colours -------------------------------- */
 $white: #fff !default;
 $gray-1: #f6f6f7 !default;
 $gray-2: #dadadc !default;
@@ -25,6 +19,7 @@ $gray-7: #4d5055 !default;
 $gray-8: #30353a !default;
 $gray-9: #14191f !default;
 $black: #000 !default;
+
 $grays: (
   "gray-1": $gray-1,
   "gray-2": $gray-2,
@@ -34,8 +29,9 @@ $grays: (
   "gray-6": $gray-6,
   "gray-7": $gray-7,
   "gray-8": $gray-8,
-  "gray-9": $gray-9,
+  "gray-9": $gray-9
 ) !default;
+
 $blue: #0d6efd !default;
 $indigo: #6610f2 !default;
 $purple: #6f42c1 !default;
@@ -46,6 +42,7 @@ $yellow: #ffc107 !default;
 $green: #198754 !default;
 $teal: #20c997 !default;
 $cyan: #0dcaf0 !default;
+
 $colors: (
   "blue": $blue,
   "indigo": $indigo,
@@ -59,8 +56,9 @@ $colors: (
   "cyan": $cyan,
   "white": $white,
   "gray": $gray-6,
-  "gray-dark": $gray-8,
+  "gray-dark": $gray-8
 ) !default;
+
 $primary: $blue !default;
 $secondary: $gray-6 !default;
 $success: $green !default;
@@ -70,6 +68,7 @@ $danger: $red !default;
 $light: $gray-1 !default;
 $medium: $gray-6 !default;
 $dark: $gray-8 !default;
+
 $theme-colors: (
   "primary": $primary,
   "secondary": $secondary,
@@ -79,18 +78,18 @@ $theme-colors: (
   "danger": $danger,
   "light": $light,
   "medium": $medium,
-  "dark": $dark,
+  "dark": $dark
 ) !default;
 
-// 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;
 $all-colors: map.merge($colors, $theme-colors) !default;
+
+$color-flip-threshold: 50% !default;
+$color-flip-l: 35% !default;
+
+/* ---------------------------------- Misc ---------------------------------- */
+$escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"), ("(", "%28"), (")", "%29")) !default;
+
+/* --------------------------------- spacing -------------------------------- */
 $spacer: 1rem !default;
 $spacers: (
   0: 0,
@@ -98,16 +97,22 @@ $spacers: (
   2: $spacer * 0.5,
   3: $spacer,
   4: $spacer * 1.5,
-  5: $spacer * 3,
+  5: $spacer * 3
 ) !default;
 $gutters: $spacers;
+
+/* ---------------------------------- links --------------------------------- */
 $link-shade-percentage: 20% !default;
 $link-shade-value: 0.8 !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,
@@ -115,32 +120,36 @@ $breakpoints: (
   "tablet": 768px,
   "desktop": 1024px,
   "widescreen": 1216px,
-  "fullhd": 1408px,
+  "fullhd": 1408px
 ) !default;
+
 $container-max-widths: (
   "mobile": 576px,
   "tablet": 768px,
   "desktop": 1024px,
   "widescreen": 1216px,
-  "fullhd": 1408px,
+  "fullhd": 1408px
 ) !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-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,
@@ -148,29 +157,31 @@ $font-sizes: (
   4: $font-size-4,
   5: $font-size-5,
   6: $font-size-6,
-  "large": $font-size-large,
   "small": $font-size-small,
   "xsmall": $font-size-xsmall,
   "smaller": 0.85em,
-  "larger": 1.15em,
-  "sub-sup": $font-size-sub-sup,
-  "code": $font-size-code,
+  "larger": 1.15em
 ) !default;
-$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,
-  "Times New Roman", serif !default;
-$font-family-monospace: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace !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,
+  "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 ------------------------------ */
 $font-weight-lighter: lighter !default;
 $font-weight-bolder: bolder !default;
 $font-weight-thin: 100 !default;
@@ -191,22 +202,28 @@ $font-weights: (
   "semibold": $font-weight-semibold,
   "bold": $font-weight-bold,
   "heavy": $font-weight-heavy,
-  "black": $font-weight-black,
+  "black": $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: $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;
@@ -219,44 +236,25 @@ $border-radii: (
   "medium": $border-radius-medium,
   "large": $border-radius-large,
   "round": $border-radius-round,
-  "default": $border-radius-default,
+  "default": $border-radius-default
 ) !default;
-$hr-border-color: $border-color-main !default;
-$hr-border-opacity: $border-opacity !default;
-$hr-border-width: $border-width !default;
-$hr-border-style: $border-style !default;
-$hr-margin-y: $spacer !default;
-$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 --------------------------------- */
 $table-cell-padding-y: calc(($spacer * 0.625) - 0.5px) !default;
 $table-cell-padding-x: calc($spacer * 0.5) !default;
 $table-cell-padding-y-small: calc(($spacer * 0.25) - 1px) !default;
 $table-cell-padding-x-small: calc($spacer * 0.5) !default;
 $table-cell-border-style: solid !default;
 $table-cell-border-width: 1px !default;
-$table-cell-border-color: rgba($border-color-main, $border-opacity) !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-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;
+
+/* --------------------------------- z-index -------------------------------- */
 $zindex-static: 0 !default;
 $zindex-relative: 1 !default;
 $zindex-absolute: 1 !default;
@@ -277,27 +275,29 @@ $zindexes: (
   "modal-backdrop": $zindex-modal-backdrop,
   "modal": $zindex-modal,
   "popover": $zindex-popover,
-  "tooltip": $zindex-tooltip,
+  "tooltip": $zindex-tooltip
 ) !default;
-$box-shadow-none: none !default;
+
+/* --------------------------------- shadow --------------------------------- */
 $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,
+  "large": $box-shadow-large
 ) !default;
-$component-active-background: $primary !default;
+
+/* ---------------------------------- embed --------------------------------- */
 $embeds: (
   "32by9": 28.125%,
   "21by9": 42.8571%,
   "16by9": 56.25%,
   "4by3": 75%,
-  "1by1": 100%,
+  "1by1": 100%
 ) !default;
-$escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"), ("(", "%28"), (")", "%29")) !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: rgba($body-color, 25%) !default;
@@ -306,7 +306,11 @@ $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,
+
+$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
@@ -317,17 +321,10 @@ $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;
-$input-button-hover-border-color: rgba($border-color-main, $border-hover-opacity) !default;
-$input-button-active-border-color: rgba($border-color-main, $border-active-opacity) !default;
-$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;
+
+// inputs buttons
 $input-button-font-size: $font-size-base !default;
-$input-button-font-size-large: $font-size-large !default;
+$input-button-font-size-large: $font-size-4 !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;
@@ -338,81 +335,40 @@ $input-button-padding-x-large: calc($spacer * 1.25) !default;
 $input-button-padding-y-small: calc($spacer * 0.25) !default;
 $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;
-
 // Input
+$input-font-family: $input-button-font-family !default;
 $input-font-weight: $font-weight-normal !default;
-$input-line-height: $input-button-line-height !default;
-$input-border-width: $input-button-border-width !default;
-$input-border-style: $input-button-border-style !default;
-$input-border-color: $input-button-border-color !default;
-$input-hover-border-color: $input-button-hover-border-color !default;
-$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;
-$input-font-family: $input-button-font-family !default;
-$input-focus-box-shadow: $input-button-focus-box-shadow !default;
-$input-size: calc(($font-size-base * $line-height-base + ($input-padding-y * 2)) + 2px) !default;
-$input-detail-color: $input-button-detail-color !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-padding-y-small !default;
+$input-small-padding-x: $input-button-padding-x-small !default;
+$input-large-padding-y: $input-button-padding-y-large !default;
+$input-large-padding-x: $input-button-padding-x-large !default;
+$input-white-space: nowrap !default;
 
 // Button
+$button-font-family: $input-button-font-family !default;
 $button-font-weight: $font-weight-normal !default;
-$button-line-height: $input-button-line-height !default;
-$button-border-width: $input-button-border-width !default;
-$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-hover-background-shade-amount: 15% !default;
-$button-hover-background-tint-amount: 15% !default;
-$button-hover-border-shade-amount: 20% !default;
-$button-hover-border-tint-amount: 10% !default;
-$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;
+$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-padding-y-large !default;
+$button-large-padding-x: $input-button-padding-x-large !default;
+$button-small-padding-y: $input-button-padding-y-small !default;
+$button-small-padding-x: $input-button-padding-x-small !default;
+$button-white-space: nowrap !default;
+
+$button-color-flip-threshold: 60% !default;
+$button-color-flip-l: 35% !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;
@@ -427,98 +383,43 @@ $close-hover-background-color: rgba($border-color-main, $border-hover-opacity) !
 $close-hover-background-color-light: rgba($light, $border-hover-opacity) !default;
 $close-height: calc($spacer * 1.5) !default;
 $close-width: calc($spacer * 1.5) !default;
-$close-height-small: calc($spacer * 1) !default;
-$close-width-small: calc($spacer * 1) !default;
-$close-height-large: calc($spacer * 2) !default;
-$close-width-large: calc($spacer * 2) !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;
 
-// Form
-$form-check-button-check-disabled-opacity: $button-disabled-opacity !default;
-
-// Card
-$card-border-width: $border-width !default;
-$card-border-style: $border-style !default;
-$card-border-color: rgba($border-color-main, $border-opacity) !default;
-$card-border-radius: $border-radius-default !default;
-$card-background-color: $white !default;
-$card-header-footer-padding: calc(($spacer * 0.375) - 0.5px) $spacer !default;
-$card-body-padding: $spacer !default;
-
-// Nav
-$nav-label-color: $medium !default;
-$nav-label-font-size: $font-size-small !default;
-$nav-label-text-transform: uppercase !default;
-$nav-label-font-weight: $font-weight-semibold !default;
-$nav-label-padding-y: $input-button-padding-y !default;
-$nav-label-padding-x: $input-button-padding-x !default;
-$nav-title-font-weight: $font-weight-bold !default;
+/* ---------------------------------- card ---------------------------------- */
+$card-header-footer-padding: calc($input-button-padding-y - 0.5px) $spacer !default;
+
+/* ----------------------------------- nav ---------------------------------- */
 $nav-item-padding-y: $input-button-padding-y !default;
 $nav-item-padding-x: $input-button-padding-x !default;
-$nav-item-color: $body-color !default;
-$nav-item-color-disabled: rgba($nav-item-color, 75%) !default;
-$nav-item-hover-color: color.mix(black, $nav-item-color, $link-shade-percentage) !default;
-$nav-item-active-color: color.mix(black, $nav-item-color, $link-shade-percentage) !default;
-$nav-item-background-color: transparent !default;
-$nav-item-background-color-opacity: 5% !default;
-$nav-item-hover-background-color: rgba($nav-item-color, $nav-item-background-color-opacity) !default;
-$nav-item-active-background-color: rgba($nav-item-color, $nav-item-background-color-opacity) !default;
-$nav-tab-item-padding: calc(($input-button-padding-y) - 1.5px) $input-button-padding-x !default;
-$nav-tab-card-item-padding: calc(($input-button-padding-y) - 1.5px) $input-button-padding-x !default;
-
-// Breadcrumbs
+
+/* ------------------------------- breadcrumbs ------------------------------ */
 $breadcrumb-color: $medium !default;
-$breadcrumb-link-color: $medium !default;
-$breadcrumb-link-hover-color: color.mix(black, $breadcrumb-link-color, $link-shade-percentage) !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;
 
-// Details
-$details-caret-color: $primary !default;
-
-// Tabs
-$tabs-active-color: $primary !default;
-
-// Dialog
+/* ---------------------------------- modal --------------------------------- */
 $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 --------------------------------- */
 $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: 100% !default;
-$button-hover-background-l: 10% !default;
-$button-hover-link-background-a: 15% !default;
-
-// Pills
+/* ---------------------------------- 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
+/* ---------------------------------- 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

@@ -12,20 +12,18 @@
   }
 }
 
-@if $enable-grid-classes {
-  .grid {
-    @include make-row;
-  }
+.grid {
+  @include make-row;
+}
 
-  .grid--tight {
-    @include make-row($grid-gutter-tight);
-  }
+.grid--tight {
+  @include make-row($grid-gutter-tight);
+}
 
-  .grid,
-  .grid--tight {
-    > * {
-      @include make-col-ready;
-    }
+.grid,
+.grid--tight {
+  > * {
+    @include make-col-ready;
   }
 }
 
@@ -50,6 +48,4 @@
 
 // Columns
 // Common styles for small and large grid columns
-@if $enable-grid-classes {
-  @include make-grid-columns;
-}
+@include make-grid-columns;

package/sass/index.scss

@@ -6,3 +6,5 @@
 @forward "./modules";
 @forward "./reboot";
 @forward "./root";
+
+@import "~modern-normalize/modern-normalize.css";