@unlk/keymaster 1.0.5 → 1.0.7

package/scss/theme/_variables-overrides.scss

@@ -1,43 +1,44 @@
 @import "../assets/bootstrap5/functions";
 
-$prefix: bs-;
-$enable-validation-icons: false;
+$prefix: bs- !default;
+$enable-shadows: true !default;
+$enable-validation-icons: false !default;
 
 // Fontawesome
-$font-path: "../../fonts";
-$fa-font-path: "../../../fonts";
+$font-path: "../../fonts" !default;
+$fa-font-path: "../../../fonts" !default;
 
 // Font
-$font-size-base: 1rem;
-$font-size-lg: $font-size-base * 1.125;
+$font-size-base: 1rem !default;
+$font-size-lg: $font-size-base * 1.125 !default;
 
-$font-family-base: "Wix MadeFor Display";
-$font-family-code: "Wix MadeFor Display";
+$font-family-base: "Wix MadeFor Display" !default;
+$font-family-code: "Wix MadeFor Display" !default;
 
 // Colors
-$foundation: #1d1f50;
-$blueprint: #3e51a2;
-$entryway: #3b7bbf;
-$skylight: #cdecf9;
-$turnkey: #6346d3;
-$sunglow: #fbcd2f;
-$green: #027a48;
-$red: #b42318;
-$gray: #c1c5cc;
-
-$white: #fff;
-$gray-25: tint-color($gray, 95%);
-$gray-50: tint-color($gray, 90%);
-$gray-100: tint-color($gray, 80%);
-$gray-200: tint-color($gray, 60%);
-$gray-300: tint-color($gray, 40%);
-$gray-400: tint-color($gray, 20%);
-$gray-500: $gray;
-$gray-600: shade-color($gray, 20%);
-$gray-700: shade-color($gray, 40%);
-$gray-800: shade-color($gray, 60%);
-$gray-900: shade-color($gray, 80%);
-$black: #000;
+$foundation: #1d1f50 !default;
+$blueprint: #3e51a2 !default;
+$entryway: #3b7bbf !default;
+$skylight: #cdecf9 !default;
+$turnkey: #6346d3 !default;
+$sunglow: #fbcd2f !default;
+$green: #027a48 !default;
+$red: #b42318 !default;
+$gray: #c1c5cc !default;
+
+$white: #fff !default;
+$gray-25: tint-color($gray, 95%) !default;
+$gray-50: tint-color($gray, 90%) !default;
+$gray-100: tint-color($gray, 80%) !default;
+$gray-200: tint-color($gray, 60%) !default;
+$gray-300: tint-color($gray, 40%) !default;
+$gray-400: tint-color($gray, 20%) !default;
+$gray-500: $gray !default;
+$gray-600: shade-color($gray, 20%) !default;
+$gray-700: shade-color($gray, 40%) !default;
+$gray-800: shade-color($gray, 60%) !default;
+$gray-900: shade-color($gray, 80%) !default;
+$black: #000 !default;
 
 $grays: (
   "25": $gray-25,
@@ -51,7 +52,7 @@ $grays: (
   "700": $gray-700,
   "800": $gray-800,
   "900": $gray-900
-);
+) !default;
 
 $colors: (
   "foundation": $foundation,
@@ -62,106 +63,116 @@ $colors: (
   "turnkey": $turnkey,
   "red": $red,
   "gray": $gray-600,
-);
+) !default;
 
 // Color variants
-$foundation-25: tint-color($foundation, 95%);
-$foundation-100: tint-color($foundation, 80%);
-$foundation-200: tint-color($foundation, 60%);
-$foundation-300: tint-color($foundation, 40%);
-$foundation-400: tint-color($foundation, 20%);
-$foundation-450: tint-color($foundation, 10%);
-$foundation-500: $foundation;
-$foundation-600: shade-color($foundation, 20%);
-$foundation-700: shade-color($foundation, 40%);
-$foundation-800: shade-color($foundation, 60%);
-$foundation-900: shade-color($foundation, 80%);
-
-$blueprint-25: tint-color($blueprint, 95%);
-$blueprint-100: tint-color($blueprint, 80%);
-$blueprint-200: tint-color($blueprint, 60%);
-$blueprint-300: tint-color($blueprint, 40%);
-$blueprint-400: tint-color($blueprint, 20%);
-$blueprint-450: tint-color($blueprint, 10%);
-$blueprint-500: $blueprint;
-$blueprint-600: shade-color($blueprint, 20%);
-$blueprint-700: shade-color($blueprint, 40%);
-$blueprint-800: shade-color($blueprint, 60%);
-$blueprint-900: shade-color($blueprint, 80%);
-
-$entryway-25: tint-color($entryway, 95%);
-$entryway-100: tint-color($entryway, 80%);
-$entryway-200: tint-color($entryway, 60%);
-$entryway-300: tint-color($entryway, 40%);
-$entryway-400: tint-color($entryway, 20%);
-$entryway-450: tint-color($entryway, 10%);
-$entryway-500: $entryway;
-$entryway-600: shade-color($entryway, 20%);
-$entryway-700: shade-color($entryway, 40%);
-$entryway-800: shade-color($entryway, 60%);
-$entryway-900: shade-color($entryway, 80%);
-
-$skylight-25: tint-color($skylight, 95%);
-$skylight-100: tint-color($skylight, 80%);
-$skylight-200: tint-color($skylight, 60%);
-$skylight-300: tint-color($skylight, 40%);
-$skylight-400: tint-color($skylight, 20%);
-$skylight-450: tint-color($skylight, 10%);
-$skylight-500: $skylight;
-$skylight-600: shade-color($skylight, 20%);
-$skylight-700: shade-color($skylight, 40%);
-$skylight-800: shade-color($skylight, 60%);
-$skylight-900: shade-color($skylight, 80%);
-
-$sunglow-25: tint-color($sunglow, 95%);
-$sunglow-100: tint-color($sunglow, 80%);
-$sunglow-200: tint-color($sunglow, 60%);
-$sunglow-300: tint-color($sunglow, 40%);
-$sunglow-400: tint-color($sunglow, 20%);
-$sunglow-450: tint-color($sunglow, 10%);
-$sunglow-500: $sunglow;
-$sunglow-600: shade-color($sunglow, 20%);
-$sunglow-700: shade-color($sunglow, 40%);
-$sunglow-800: shade-color($sunglow, 60%);
-$sunglow-900: shade-color($sunglow, 80%);
-
-$turnkey-25: tint-color($turnkey, 95%);
-$turnkey-100: tint-color($turnkey, 80%);
-$turnkey-200: tint-color($turnkey, 60%);
-$turnkey-300: tint-color($turnkey, 40%);
-$turnkey-400: tint-color($turnkey, 20%);
-$turnkey-450: tint-color($turnkey, 10%);
-$turnkey-500: $turnkey;
-$turnkey-600: shade-color($turnkey, 20%);
-$turnkey-700: shade-color($turnkey, 40%);
-$turnkey-800: shade-color($turnkey, 60%);
-$turnkey-900: shade-color($turnkey, 80%);
-
-$success-25: tint-color($green, 95%);
-$success-100: tint-color($green, 80%);
-$success-200: tint-color($green, 60%);
-$success-300: tint-color($green, 40%);
-$success-400: tint-color($green, 20%);
-$success-450: tint-color($green, 10%);
-$success-500: $green;
-$success-600: shade-color($green, 20%);
-$success-700: shade-color($green, 40%);
-$success-800: shade-color($green, 60%);
-$success-900: shade-color($green, 80%);
-
-$danger-25: tint-color($red, 95%);
-$danger-100: tint-color($red, 80%);
-$danger-200: tint-color($red, 60%);
-$danger-300: tint-color($red, 40%);
-$danger-400: tint-color($red, 20%);
-$danger-450: tint-color($red, 10%);
-$danger-500: $red;
-$danger-600: shade-color($red, 20%);
-$danger-700: shade-color($red, 40%);
-$danger-800: shade-color($red, 60%);
-$danger-900: shade-color($red, 80%);
+$foundation-25: tint-color($foundation, 95%) !default;
+$foundation-50: tint-color($foundation, 90%) !default;
+$foundation-100: tint-color($foundation, 80%) !default;
+$foundation-200: tint-color($foundation, 60%) !default;
+$foundation-300: tint-color($foundation, 40%) !default;
+$foundation-400: tint-color($foundation, 20%) !default;
+$foundation-450: tint-color($foundation, 10%) !default;
+$foundation-500: $foundation !default;
+$foundation-600: shade-color($foundation, 20%) !default;
+$foundation-700: shade-color($foundation, 40%) !default;
+$foundation-800: shade-color($foundation, 60%) !default;
+$foundation-900: shade-color($foundation, 80%) !default;
+
+$blueprint-25: tint-color($blueprint, 95%) !default;
+$blueprint-50: tint-color($blueprint, 90%) !default;
+$blueprint-100: tint-color($blueprint, 80%) !default;
+$blueprint-200: tint-color($blueprint, 60%) !default;
+$blueprint-300: tint-color($blueprint, 40%) !default;
+$blueprint-400: tint-color($blueprint, 20%) !default;
+$blueprint-450: tint-color($blueprint, 10%) !default;
+$blueprint-500: $blueprint !default;
+$blueprint-600: shade-color($blueprint, 20%) !default;
+$blueprint-700: shade-color($blueprint, 40%) !default;
+$blueprint-800: shade-color($blueprint, 60%) !default;
+$blueprint-900: shade-color($blueprint, 80%) !default;
+
+$entryway-25: tint-color($entryway, 95%) !default;
+$entryway-50: tint-color($entryway, 90%) !default;
+$entryway-100: tint-color($entryway, 80%) !default;
+$entryway-200: tint-color($entryway, 60%) !default;
+$entryway-300: tint-color($entryway, 40%) !default;
+$entryway-400: tint-color($entryway, 20%) !default;
+$entryway-450: tint-color($entryway, 10%) !default;
+$entryway-500: $entryway !default;
+$entryway-600: shade-color($entryway, 20%) !default;
+$entryway-700: shade-color($entryway, 40%) !default;
+$entryway-800: shade-color($entryway, 60%) !default;
+$entryway-900: shade-color($entryway, 80%) !default;
+
+$skylight-25: tint-color($skylight, 95%) !default;
+$skylight-50: tint-color($skylight, 90%) !default;
+$skylight-100: tint-color($skylight, 80%) !default;
+$skylight-200: tint-color($skylight, 60%) !default;
+$skylight-300: tint-color($skylight, 40%) !default;
+$skylight-400: tint-color($skylight, 20%) !default;
+$skylight-450: tint-color($skylight, 10%) !default;
+$skylight-500: $skylight !default;
+$skylight-600: shade-color($skylight, 20%) !default;
+$skylight-700: shade-color($skylight, 40%) !default;
+$skylight-800: shade-color($skylight, 60%) !default;
+$skylight-900: shade-color($skylight, 80%) !default;
+
+$sunglow-25: tint-color($sunglow, 95%) !default;
+$sunglow-50: tint-color($sunglow, 90%) !default;
+$sunglow-100: tint-color($sunglow, 80%) !default;
+$sunglow-200: tint-color($sunglow, 60%) !default;
+$sunglow-300: tint-color($sunglow, 40%) !default;
+$sunglow-400: tint-color($sunglow, 20%) !default;
+$sunglow-450: tint-color($sunglow, 10%) !default;
+$sunglow-500: $sunglow !default;
+$sunglow-600: shade-color($sunglow, 20%) !default;
+$sunglow-700: shade-color($sunglow, 40%) !default;
+$sunglow-800: shade-color($sunglow, 60%) !default;
+$sunglow-900: shade-color($sunglow, 80%) !default;
+
+$turnkey-25: tint-color($turnkey, 95%) !default;
+$turnkey-50: tint-color($turnkey, 90%) !default;
+$turnkey-100: tint-color($turnkey, 80%) !default;
+$turnkey-200: tint-color($turnkey, 60%) !default;
+$turnkey-300: tint-color($turnkey, 40%) !default;
+$turnkey-400: tint-color($turnkey, 20%) !default;
+$turnkey-450: tint-color($turnkey, 10%) !default;
+$turnkey-500: $turnkey !default;
+$turnkey-600: shade-color($turnkey, 20%) !default;
+$turnkey-700: shade-color($turnkey, 40%) !default;
+$turnkey-800: shade-color($turnkey, 60%) !default;
+$turnkey-900: shade-color($turnkey, 80%) !default;
+
+$success-25: tint-color($green, 95%) !default;
+$success-50: tint-color($green, 90%) !default;
+$success-100: tint-color($green, 80%) !default;
+$success-200: tint-color($green, 60%) !default;
+$success-300: tint-color($green, 40%) !default;
+$success-400: tint-color($green, 20%) !default;
+$success-450: tint-color($green, 10%) !default;
+$success-500: $green !default;
+$success-600: shade-color($green, 20%) !default;
+$success-700: shade-color($green, 40%) !default;
+$success-800: shade-color($green, 60%) !default;
+$success-900: shade-color($green, 80%) !default;
+
+$danger-25: tint-color($red, 95%) !default;
+$danger-50: tint-color($red, 90%) !default;
+$danger-100: tint-color($red, 80%) !default;
+$danger-200: tint-color($red, 60%) !default;
+$danger-300: tint-color($red, 40%) !default;
+$danger-400: tint-color($red, 20%) !default;
+$danger-450: tint-color($red, 10%) !default;
+$danger-500: $red !default;
+$danger-600: shade-color($red, 20%) !default;
+$danger-700: shade-color($red, 40%) !default;
+$danger-800: shade-color($red, 60%) !default;
+$danger-900: shade-color($red, 80%) !default;
 
 $foundations: (
+  "foundation-25": $foundation-25,
+  "foundation-50": $foundation-50,
   "foundation-100": $foundation-100,
   "foundation-200": $foundation-200,
   "foundation-300": $foundation-300,
@@ -172,9 +183,11 @@ $foundations: (
   "foundation-700": $foundation-700,
   "foundation-800": $foundation-800,
   "foundation-900": $foundation-900
-);
+) !default;
 
 $blueprints: (
+  "blueprint-25": $blueprint-25,
+  "blueprint-50": $blueprint-50,
   "blueprint-100": $blueprint-100,
   "blueprint-200": $blueprint-200,
   "blueprint-300": $blueprint-300,
@@ -185,9 +198,11 @@ $blueprints: (
   "blueprint-700": $blueprint-700,
   "blueprint-800": $blueprint-800,
   "blueprint-900": $blueprint-900
-);
+) !default;
 
 $entryways: (
+  "entryway-25": $entryway-25,
+  "entryway-50": $entryway-50,
   "entryway-100": $entryway-100,
   "entryway-200": $entryway-200,
   "entryway-300": $entryway-300,
@@ -198,9 +213,26 @@ $entryways: (
   "entryway-700": $entryway-700,
   "entryway-800": $entryway-800,
   "entryway-900": $entryway-900
-);
+) !default;
+
+$skylights: (
+  "skylight-25": $skylight-25,
+  "skylight-50": $skylight-50,
+  "skylight-100": $skylight-100,
+  "skylight-200": $skylight-200,
+  "skylight-300": $skylight-300,
+  "skylight-400": $skylight-400,
+  "skylight-450": $skylight-450,
+  "skylight-500": $skylight-500,
+  "skylight-600": $skylight-600,
+  "skylight-700": $skylight-700,
+  "skylight-800": $skylight-800,
+  "skylight-900": $skylight-900
+) !default;
 
 $sunglows: (
+  "sunglow-25": $sunglow-25,
+  "sunglow-50": $sunglow-50,
   "sunglow-100": $sunglow-100,
   "sunglow-200": $sunglow-200,
   "sunglow-300": $sunglow-300,
@@ -211,9 +243,11 @@ $sunglows: (
   "sunglow-700": $sunglow-700,
   "sunglow-800": $sunglow-800,
   "sunglow-900": $sunglow-900
-);
+) !default;
 
 $warnings: (
+  "warning-25": $sunglow-25,
+  "warning-50": $sunglow-50,
   "warning-100": $sunglow-100,
   "warning-200": $sunglow-200,
   "warning-300": $sunglow-300,
@@ -224,9 +258,11 @@ $warnings: (
   "warning-700": $sunglow-700,
   "warning-800": $sunglow-800,
   "warning-900": $sunglow-900
-);
+) !default;
 
 $turnkeys: (
+  "turnkey-25": $turnkey-25,
+  "turnkey-50": $turnkey-50,
   "turnkey-100": $turnkey-100,
   "turnkey-200": $turnkey-200,
   "turnkey-300": $turnkey-300,
@@ -237,10 +273,11 @@ $turnkeys: (
   "turnkey-700": $turnkey-700,
   "turnkey-800": $turnkey-800,
   "turnkey-900": $turnkey-900
-);
+) !default;
 
 $dangers: (
   "danger-25": $danger-25,
+  "danger-50": $danger-50,
   "danger-100": $danger-100,
   "danger-200": $danger-200,
   "danger-300": $danger-300,
@@ -251,10 +288,11 @@ $dangers: (
   "danger-700": $danger-700,
   "danger-800": $danger-800,
   "danger-900": $danger-900
-);
+) !default;
 
 $successs: (
   "success-25": $success-25,
+  "success-50": $success-50,
   "success-100": $success-100,
   "success-200": $success-200,
   "success-300": $success-300,
@@ -264,18 +302,18 @@ $successs: (
   "success-600": $success-600,
   "success-700": $success-700,
   "success-800": $success-800,
-  "success-900": $success-900,
-);
-
-$primary: $blueprint;
-$secondary: $entryway;
-$tertiary: $skylight;
-$success: $green;
-$action: $turnkey;
-$warning: $sunglow;
-$danger: $red;
-$light: $white;
-$dark: $gray-900;
+  "success-900": $success-900
+) !default;
+
+$primary: $blueprint !default;
+$secondary: $entryway !default;
+$tertiary: $skylight !default;
+$success: $green !default;
+$action: $turnkey !default;
+$warning: $sunglow !default;
+$danger: $red !default;
+$light: $white !default;
+$dark: $gray-900 !default;
 
 $theme-colors: (
   "primary": $primary,
@@ -287,26 +325,26 @@ $theme-colors: (
   "danger": $danger,
   "light": $light,
   "dark": $dark,
-);
+) !default;
 
 // scss-docs-start theme-text-variables
-$tertiary-text-emphasis: shade-color($tertiary, 60%);
-$action-text-emphasis: shade-color($action, 60%);
+$tertiary-text-emphasis: shade-color($tertiary, 60%) !default;
+$action-text-emphasis: shade-color($action, 60%) !default;
 // scss-docs-end theme-text-variables
 
 // scss-docs-start theme-bg-subtle-variables
-$tertiary-bg-subtle: tint-color($tertiary, 0%);
-$action-bg-subtle: tint-color($action, 80%);
+$tertiary-bg-subtle: tint-color($tertiary, 0%) !default;
+$action-bg-subtle: tint-color($action, 80%) !default;
 // scss-docs-end theme-bg-subtle-variables
 
 // scss-docs-start theme-border-subtle-variables
-$tertiary-border-subtle: tint-color($tertiary, 60%);
-$action-border-subtle: tint-color($action, 60%);
+$tertiary-border-subtle: tint-color($tertiary, 60%) !default;
+$action-border-subtle: tint-color($action, 60%) !default;
 // scss-docs-end theme-border-subtle-variables
 
 
 // Body
-$body-color: $gray-900;
+$body-color: $gray-900 !default;
 
 // Grid breakpoints
 $grid-breakpoints: (
@@ -317,7 +355,7 @@ $grid-breakpoints: (
   xl: 1200px,
   xxl: 1400px,
   xxxl: 1600px
-);
+) !default;
 
 // Grid containers
 $container-max-widths: (
@@ -328,20 +366,20 @@ $container-max-widths: (
   xl: 1140px,
   xxl: 1320px,
   xxxl: 1510px
-);
+) !default;
 
 // Body
-$body-color: $foundation-500;
+$body-color: $foundation-500 !default;
 
 // Headings
-$headings-color: $foundation-500;
-$headings-font-family: "Neulis Neue";
-$headings-font-weight: var(--#{$prefix}font-weight-medium);
+$headings-color: $foundation-500 !default;
+$headings-font-family: "Neulis Neue" !default;
+$headings-font-weight: var(--#{$prefix}font-weight-medium) !default;
 
 // Display Headings
-$display-font-family: "Neulis Neue";
-$display-font-weight: var(--#{$prefix}font-weight-medium);
-$display-line-height: 1.1;
+$display-font-family: "Neulis Neue" !default;
+$display-font-weight: var(--#{$prefix}font-weight-medium) !default;
+$display-line-height: 1.1 !default;
 
 $font-sizes: (
   1: $font-size-base * 1.25,
@@ -350,10 +388,10 @@ $font-sizes: (
   4: $font-size-base * .875,
   5: $font-size-base * .75,
   6: $font-size-base * .625,
-);
+) !default;
 
 // Tables
-$table-bg-scale: -80%;
+$table-bg-scale: -80% !default;
 
 $table-variants: (
   "primary": shift-color($primary, $table-bg-scale),
@@ -365,72 +403,73 @@ $table-variants: (
   "danger": shift-color($danger, $table-bg-scale),
   "light": $light,
   "dark": $dark,
-);
+) !default;
 
 // Borders
-$border-width: 2px;
-$border-color: $gray-400;
+$border-width: 2px !default;
+$border-color: $gray-400 !default;
 
 // Buttons + Forms
-$input-btn-border-width: .125rem;
+$input-btn-border-width: .125rem !default;
 
 // Buttons
-$btn-hover-bg-shade-amount: 20%;
-$btn-hover-bg-tint-amount: 10%;
-$btn-hover-border-shade-amount: 20%;
-$btn-hover-border-tint-amount: 10%;
-$btn-active-bg-shade-amount: 40%;
-$btn-active-bg-tint-amount: 20%;
-$btn-active-border-shade-amount: 40%;
-$btn-active-border-tint-amount: 10%;
+$btn-hover-bg-shade-amount: 20% !default;
+$btn-hover-bg-tint-amount: 10% !default;
+$btn-hover-border-shade-amount: 20% !default;
+$btn-hover-border-tint-amount: 10% !default;
+$btn-active-bg-shade-amount: 40% !default;
+$btn-active-bg-tint-amount: 20% !default;
+$btn-active-border-shade-amount: 40% !default;
+$btn-active-border-tint-amount: 10% !default;
 
 // Border Radius
-$border-radius: .5rem;
-$border-radius-sm: .375rem;
-$border-radius-lg: .625rem;
-$border-radius-xl: 1rem;
-$border-radius-xxl: 1.5rem;
+$border-radius: .5rem !default;
+$border-radius-sm: .375rem !default;
+$border-radius-lg: .625rem !default;
+$border-radius-xl: 1rem !default;
+$border-radius-xxl: 1.5rem !default;
 
-$blockquote-font-size: $font-size-base * 3.5;
+$blockquote-font-size: $font-size-base * 3.5 !default;
 
 // Accordion
-$accordion-border-radius: var(--#{$prefix}border-radius-sm);
-$accordion-button-active-bg: var(--#{$prefix}primary);
-$accordion-button-active-color: var(--#{$prefix}light);
-$accordion-icon-color: $body-color;
-$accordion-icon-active-color: $light;
-$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' fill='#{$accordion-icon-color}'><path d='M11.1,18.3c0.5,0.5,1.4,0.5,1.9,0L23.6,7.6c0.5-0.5,0.5-1.4,0-1.9c-0.5-0.5-1.4-0.5-1.9,0L12,15.5L2.3,5.7c-0.5-0.5-1.4-0.5-1.9,0s-0.5,1.4,0,1.9L11.1,18.3z'/></svg>");
-$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' fill='#{$accordion-icon-active-color}'><path d='M11.1,18.3c0.5,0.5,1.4,0.5,1.9,0L23.6,7.6c0.5-0.5,0.5-1.4,0-1.9c-0.5-0.5-1.4-0.5-1.9,0L12,15.5L2.3,5.7c-0.5-0.5-1.4-0.5-1.9,0s-0.5,1.4,0,1.9L11.1,18.3z'/></svg>");
-$accordion-button-focus-box-shadow: none;
+$accordion-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$accordion-button-active-bg: var(--#{$prefix}primary) !default;
+$accordion-button-active-color: var(--#{$prefix}light) !default;
+$accordion-icon-color: $body-color !default;
+$accordion-icon-active-color: $light !default;
+$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' fill='#{$accordion-icon-color}'><path d='M11.1,18.3c0.5,0.5,1.4,0.5,1.9,0L23.6,7.6c0.5-0.5,0.5-1.4,0-1.9c-0.5-0.5-1.4-0.5-1.9,0L12,15.5L2.3,5.7c-0.5-0.5-1.4-0.5-1.9,0s-0.5,1.4,0,1.9L11.1,18.3z'/></svg>") !default;
+$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' fill='#{$accordion-icon-active-color}'><path d='M11.1,18.3c0.5,0.5,1.4,0.5,1.9,0L23.6,7.6c0.5-0.5,0.5-1.4,0-1.9c-0.5-0.5-1.4-0.5-1.9,0L12,15.5L2.3,5.7c-0.5-0.5-1.4-0.5-1.9,0s-0.5,1.4,0,1.9L11.1,18.3z'/></svg>") !default;
+$accordion-button-focus-box-shadow: none !default;
 
 // Badges
-$badge-font-size: .9375em;
-$badge-border-radius: var(--#{$prefix}border-radius-pill);
+$badge-font-size: .9375em !default;
+$badge-border-radius: var(--#{$prefix}border-radius-pill) !default;
 
 // Modal
-$modal-backdrop-bg: $foundation;
-$modal-backdrop-opacity: .7;
+$modal-backdrop-bg: $foundation !default;
+$modal-backdrop-opacity: .7 !default;
 
 // Carousel
-$carousel-control-color: $black;
-$carousel-control-icon-width: .75rem;
-$carousel-indicator-width: 6px;
-$carousel-indicator-height: 6px;
-$carousel-indicator-active-bg: $foundation-500;
-$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='#{$carousel-control-color}'><path d='M0.251787 5.38204C-0.083034 5.72383 -0.083034 6.27891 0.251787 6.62071L4.5375 10.9957C4.87232 11.3375 5.41607 11.3375 5.75089 10.9957C6.08572 10.6539 6.08572 10.0988 5.75089 9.75704L2.925 6.87501H11.1429C11.617 6.87501 12 6.48399 12 6.00001C12 5.51602 11.617 5.12501 11.1429 5.12501H2.92768L5.74822 2.24297C6.08304 1.90118 6.08304 1.3461 5.74822 1.0043C5.41339 0.662506 4.86964 0.662506 4.53482 1.0043L0.249109 5.3793L0.251787 5.38204Z'/></svg>");
-$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='#{$carousel-control-color}'><path d='M11.7482 5.87002C12.083 5.52822 12.083 4.97314 11.7482 4.63135L7.4625 0.256348C7.12768 -0.0854492 6.58393 -0.0854492 6.24911 0.256348C5.91429 0.598145 5.91429 1.15322 6.24911 1.49502L9.075 4.37705H0.857143C0.383036 4.37705 0 4.76807 0 5.25205C0 5.73604 0.383036 6.12705 0.857143 6.12705H9.07232L6.25179 9.00908C5.91696 9.35088 5.91696 9.90596 6.25179 10.2478C6.58661 10.5896 7.13036 10.5896 7.46518 10.2478L11.7509 5.87275L11.7482 5.87002Z'/></svg>");
+$carousel-control-color: $black !default;
+$carousel-control-icon-width: .75rem !default;
+$carousel-indicator-width: 6px !default;
+$carousel-indicator-height: 6px !default;
+$carousel-indicator-active-bg: $foundation-500 !default;
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='#{$carousel-control-color}'><path d='M0.251787 5.38204C-0.083034 5.72383 -0.083034 6.27891 0.251787 6.62071L4.5375 10.9957C4.87232 11.3375 5.41607 11.3375 5.75089 10.9957C6.08572 10.6539 6.08572 10.0988 5.75089 9.75704L2.925 6.87501H11.1429C11.617 6.87501 12 6.48399 12 6.00001C12 5.51602 11.617 5.12501 11.1429 5.12501H2.92768L5.74822 2.24297C6.08304 1.90118 6.08304 1.3461 5.74822 1.0043C5.41339 0.662506 4.86964 0.662506 4.53482 1.0043L0.249109 5.3793L0.251787 5.38204Z'/></svg>") !default;
+$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='#{$carousel-control-color}'><path d='M11.7482 5.87002C12.083 5.52822 12.083 4.97314 11.7482 4.63135L7.4625 0.256348C7.12768 -0.0854492 6.58393 -0.0854492 6.24911 0.256348C5.91429 0.598145 5.91429 1.15322 6.24911 1.49502L9.075 4.37705H0.857143C0.383036 4.37705 0 4.76807 0 5.25205C0 5.73604 0.383036 6.12705 0.857143 6.12705H9.07232L6.25179 9.00908C5.91696 9.35088 5.91696 9.90596 6.25179 10.2478C6.58661 10.5896 7.13036 10.5896 7.46518 10.2478L11.7509 5.87275L11.7482 5.87002Z'/></svg>") !default;
 
 // Tooltips
-$tooltip-bg: var(--#{$prefix}primary);
+$tooltip-border-radius: var(--#{$prefix}border-radius-xs) !default;
+$tooltip-bg: var(--#{$prefix}primary) !default;
 
 // Progress
-$progress-border-radius: var(--#{$prefix}border-radius-xs);
+$progress-border-radius: var(--#{$prefix}border-radius-xs) !default;
 
 // Inputs
-$input-border-color: $gray-600;
-$input-placeholder-color: $gray-600;
-$input-focus-border-color: $tertiary;
-$input-focus-box-shadow: 0 0 0 .25rem rgba($tertiary, .75);
-$input-border-radius: var(--#{$prefix}border-radius-xs);
-$input-border-radius-sm: var(--#{$prefix}border-radius-xs);
-$input-border-radius-lg: var(--#{$prefix}border-radius-sm);
+$input-border-color: $gray-600 !default;
+$input-placeholder-color: $gray-600 !default;
+$input-focus-border-color: $tertiary !default;
+$input-focus-box-shadow: 0 0 0 .25rem rgba($tertiary, .75) !default;
+$input-border-radius: var(--#{$prefix}border-radius-xs) !default;
+$input-border-radius-sm: var(--#{$prefix}border-radius-xs) !default;
+$input-border-radius-lg: var(--#{$prefix}border-radius-sm) !default;