@unlk/keymaster 1.0.13 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unlk/keymaster",
-  "version": "1.0.13",
+  "version": "1.1.0",
   "publishConfig": {
     "access": "public"
   },

package/scss/assets/bootstrap5/_functions.scss

@@ -157,7 +157,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 
   @each $color in $foregrounds {
     $contrast-ratio: contrast-ratio($background, $color);
-    @if $contrast-ratio > $min-contrast-ratio {
+    @if $contrast-ratio >= $min-contrast-ratio {
       @return $color;
     } @else if $contrast-ratio > $max-ratio {
       $max-ratio: $contrast-ratio;

package/scss/assets/bootstrap5/_reboot.scss

@@ -534,6 +534,12 @@ legend {
 [type="search"] {
   -webkit-appearance: textfield; // 1
   outline-offset: -2px; // 2
+
+  // 3. Better affordance and consistent appearance for search cancel button
+  &::-webkit-search-cancel-button {
+    cursor: pointer;
+    filter: grayscale(1);
+  }
 }
 
 // 1. A few input types should stay LTR

package/scss/assets/bootstrap5/_spinners.scss

@@ -5,6 +5,7 @@
 .spinner-grow,
 .spinner-border {
   display: inline-block;
+  flex-shrink: 0;
   width: var(--#{$prefix}spinner-width);
   height: var(--#{$prefix}spinner-height);
   vertical-align: var(--#{$prefix}spinner-vertical-align);

package/scss/assets/bootstrap5/mixins/_banner.scss

@@ -1,6 +1,6 @@
 @mixin bsBanner($file) {
   /*!
-   * Bootstrap #{$file} v5.3.7 (https://getbootstrap.com/)
+   * Bootstrap #{$file} v5.3.8 (https://getbootstrap.com/)
    * Copyright 2011-2025 The Bootstrap Authors
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    */

package/scss/keymaster.scss

@@ -1,5 +1,5 @@
 // Overrides
-@use "fontawesome";
+@use "theme/fontawesome";
 @import "theme/variables-overrides";
 @import "theme/utilities-overrides";
 @import "theme/maps-overrides";

package/scss/theme/_alert.scss

@@ -13,11 +13,7 @@
   $alert-border: var(--#{$prefix}#{$state}-border-subtle);
   $alert-color: var(--#{$prefix}#{$state}-text-emphasis);
   $alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
-  @if $state == "tertiary" {
-    $alert-border: $gray-400;
-    $alert-color: $foundation-500;
-  }
-  @else if $state == "danger" {
+  @if $state == "danger" {
     $alert-bg: $danger-25;
   } @else if $state == "success" {
     $alert-bg: $success-50;

package/scss/theme/_badge.scss

@@ -1,6 +1,6 @@
 .badge-outline {
-  color: $blueprint;
-  border: rfs-value(2px) solid $blueprint;
+  color: $action;
+  border: rfs-value(2px) solid $action;
 }
 
 .badge-dot {

package/scss/theme/_buttons.scss

@@ -14,10 +14,10 @@
 
 @each $color, $value in $theme-colors {
   .btn-link-#{$color} {
-    @if $color == "primary" or $color == "blueprint" {
+    @if $color == "primary" {
       @include button-link-variant(
         $value,
-        $active-background: $blueprint-700,
+        $active-background: $electric-700,
       );
     }
   }
@@ -36,17 +36,3 @@
     );
   }
 }
-
-@each $color, $value in $theme-colors {
-  .btn-outline-#{$color} {
-    @if $color == "light" {
-      @include button-outline-variant(
-        $value,
-        $color-hover: $value,
-        $active-background: rgba($blueprint-500, .25),
-        $active-border: $value,
-        $active-color: $value,
-      );
-    }
-  }
-}

package/scss/theme/_close.scss

@@ -1,3 +1,4 @@
 .btn-close {
   --#{$prefix}btn-close-media-bg: #{ escape-svg($btn-close-media-bg) };
+  --#{$prefix}btn-close-media-bg-hover: #{ escape-svg($btn-close-media-bg-hover) };
 }

package/scss/theme/_fontawesome-variables.scss

@@ -0,0 +1 @@
+$fa-font-path: "../../../fonts" !default;

package/scss/theme/_fontawesome.scss

@@ -0,0 +1,22 @@
+@use "fontawesome-variables" as *;
+@use "../assets/fontawesome/variables" with (
+  $font-path: $fa-font-path
+);
+@use "../assets/fontawesome/fontawesome";
+@use "../assets/fontawesome/thin";
+@use "../assets/fontawesome/light";
+@use "../assets/fontawesome/regular";
+@use "../assets/fontawesome/solid";
+@use "../assets/fontawesome/sharp-thin";
+@use "../assets/fontawesome/sharp-light";
+@use "../assets/fontawesome/sharp-regular";
+@use "../assets/fontawesome/sharp-solid";
+@use "../assets/fontawesome/duotone";
+@use "../assets/fontawesome/duotone-thin";
+@use "../assets/fontawesome/duotone-light";
+@use "../assets/fontawesome/duotone-regular";
+@use "../assets/fontawesome/sharp-duotone-thin";
+@use "../assets/fontawesome/sharp-duotone-light";
+@use "../assets/fontawesome/sharp-duotone-regular";
+@use "../assets/fontawesome/sharp-duotone-solid";
+@use "../assets/fontawesome/brands";

package/scss/theme/_maps-overrides.scss

@@ -2,7 +2,6 @@
 $theme-colors-text: (
   "primary": $primary-text-emphasis,
   "secondary": $secondary-text-emphasis,
-  "tertiary": $tertiary-text-emphasis,
   "action": $action-text-emphasis,
   "success": $success-text-emphasis,
   "info": $info-text-emphasis,
@@ -17,7 +16,6 @@ $theme-colors-text: (
 $theme-colors-bg-subtle: (
   "primary": $primary-bg-subtle,
   "secondary": $secondary-bg-subtle,
-  "tertiary": $tertiary-bg-subtle,
   "action": $action-bg-subtle,
   "success": $success-bg-subtle,
   "info": $info-bg-subtle,
@@ -32,7 +30,6 @@ $theme-colors-bg-subtle: (
 $theme-colors-border-subtle: (
   "primary": $primary-border-subtle,
   "secondary": $secondary-border-subtle,
-  "tertiary": $tertiary-border-subtle,
   "action": $action-border-subtle,
   "success": $success-border-subtle,
   "info": $info-border-subtle,

package/scss/theme/_modal.scss

@@ -11,15 +11,27 @@
       width: $btn-close-media-width;
       height: $btn-close-media-height;
       text-shadow: 0 0 rfs-value(1px) $gray-400;
-      background: transparent var(--#{$prefix}btn-close-media-bg) center / $btn-close-media-width 100% no-repeat; // include transparent for button elements
       opacity: .97;
-      &:hover {
+      &::before,
+      &::after {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        content: "";
+        background: center / 100% 100% no-repeat;
+      }
+      &::before {
+        background: transparent var(--#{$prefix}btn-close-media-bg) center / $btn-close-media-width 100% no-repeat; // include transparent for button elements
         opacity: 1;
       }
-      .cls-2 {
-        &:hover {
-          fill: $foundation-500;
-        }
+      &::after {
+        background: transparent var(--#{$prefix}btn-close-media-bg-hover) center / $btn-close-media-width 100% no-repeat; // include transparent for button elements
+        opacity: 0;
+        @include transition(opacity .25s ease);
+      }
+      &:hover {
+        opacity: 1;
+        &::after { opacity: 1; }
       }
       @include media-breakpoint-down(xl) {
         right: 0;

package/scss/theme/_utilities-overrides.scss

@@ -9,7 +9,7 @@ $box-shadow: 0 rfs-value(4px) rfs-value(10px) rgba($foundation-500, .12) !defaul
 $box-shadow-lg: 0 rfs-value(8px) rfs-value(35px) rgba($foundation-500, .16) !default;
 $box-shadow-inset: 0 rfs-value(1px) rfs-value(2px) rgba($foundation-500, .1) inset !default;
 
-$all-colors: map-merge-multiple($foundations, $blueprints, $entryways, $turnkeys, $sunglows, $warnings, $grays, $successs, $dangers) !default;
+$all-colors: map-merge-multiple($foundations, $tangerines, $electrics, $sunglows, $warnings, $grays, $successs, $dangers) !default;
 
 $utilities: map-merge(
   $utilities,
@@ -53,3 +53,4 @@ $utilities: map-merge(
     ),
   )
 );
+

package/scss/theme/_variables-overrides.scss

@@ -14,14 +14,13 @@ $font-family-base: "Wix MadeFor Display" !default;
 $font-family-code: "Wix MadeFor Display" !default;
 
 // Colors
-$foundation: #1d1f50 !default;
-$blueprint: #3e51a2 !default;
-$entryway: #3b7bbf !default;
-$skylight: #cdecf9 !default;
-$turnkey: #6346d3 !default;
-$sunglow: #fbcd2f !default;
-$green: #027a48 !default;
-$red: #b42318 !default;
+$foundation: #1f1f4f !default;
+$tangerine: #ff6a1a !default;
+$lavender: #9747fc !default;
+$electric: #02f !default;
+$sunglow: #fbcd18 !default;
+$green: #09cc8b !default;
+$red: #e4263e !default;
 $gray: #c1c5cc !default;
 
 $white: #fff !default;
@@ -36,6 +35,7 @@ $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;
+$gray-950: shade-color($gray, 90%) !default;
 $black: #000 !default;
 
 $grays: (
@@ -49,16 +49,16 @@ $grays: (
   "600": $gray-600,
   "700": $gray-700,
   "800": $gray-800,
-  "900": $gray-900
+  "900": $gray-900,
+  "950": $gray-950
 ) !default;
 
 $colors: (
   "foundation": $foundation,
-  "blueprint": $blueprint,
-  "entryway": $entryway,
+  "tangerine": $tangerine,
   "sunglow": $sunglow,
   "green": $green,
-  "turnkey": $turnkey,
+  "electric": $electric,
   "red": $red,
   "gray": $gray-600,
 ) !default;
@@ -77,44 +77,31 @@ $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;
+$tangerine-25: tint-color($tangerine, 95%) !default;
+$tangerine-50: tint-color($tangerine, 90%) !default;
+$tangerine-100: tint-color($tangerine, 80%) !default;
+$tangerine-200: tint-color($tangerine, 60%) !default;
+$tangerine-300: tint-color($tangerine, 40%) !default;
+$tangerine-400: tint-color($tangerine, 20%) !default;
+$tangerine-450: tint-color($tangerine, 10%) !default;
+$tangerine-500: $tangerine !default;
+$tangerine-600: shade-color($tangerine, 20%) !default;
+$tangerine-700: shade-color($tangerine, 40%) !default;
+$tangerine-800: shade-color($tangerine, 60%) !default;
+$tangerine-900: shade-color($tangerine, 80%) !default;
+
+$lavender-25: tint-color($lavender, 95%) !default;
+$lavender-50: tint-color($lavender, 90%) !default;
+$lavender-100: tint-color($lavender, 80%) !default;
+$lavender-200: tint-color($lavender, 60%) !default;
+$lavender-300: tint-color($lavender, 40%) !default;
+$lavender-400: tint-color($lavender, 20%) !default;
+$lavender-450: tint-color($lavender, 10%) !default;
+$lavender-500: $lavender !default;
+$lavender-600: shade-color($lavender, 20%) !default;
+$lavender-700: shade-color($lavender, 40%) !default;
+$lavender-800: shade-color($lavender, 60%) !default;
+$lavender-900: shade-color($lavender, 80%) !default;
 
 $sunglow-25: tint-color($sunglow, 95%) !default;
 $sunglow-50: tint-color($sunglow, 90%) !default;
@@ -129,18 +116,18 @@ $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;
+$electric-25: tint-color($electric, 95%) !default;
+$electric-50: tint-color($electric, 90%) !default;
+$electric-100: tint-color($electric, 80%) !default;
+$electric-200: tint-color($electric, 60%) !default;
+$electric-300: tint-color($electric, 40%) !default;
+$electric-400: tint-color($electric, 20%) !default;
+$electric-450: tint-color($electric, 10%) !default;
+$electric-500: $electric !default;
+$electric-600: shade-color($electric, 20%) !default;
+$electric-700: shade-color($electric, 40%) !default;
+$electric-800: shade-color($electric, 60%) !default;
+$electric-900: shade-color($electric, 80%) !default;
 
 $success-25: tint-color($green, 95%) !default;
 $success-50: tint-color($green, 90%) !default;
@@ -183,49 +170,34 @@ $foundations: (
   "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,
-  "blueprint-400": $blueprint-400,
-  "blueprint-450": $blueprint-450,
-  "blueprint-500": $blueprint-500,
-  "blueprint-600": $blueprint-600,
-  "blueprint-700": $blueprint-700,
-  "blueprint-800": $blueprint-800,
-  "blueprint-900": $blueprint-900
+$tangerines: (
+  "tangerine-25": $tangerine-25,
+  "tangerine-50": $tangerine-50,
+  "tangerine-100": $tangerine-100,
+  "tangerine-200": $tangerine-200,
+  "tangerine-300": $tangerine-300,
+  "tangerine-400": $tangerine-400,
+  "tangerine-450": $tangerine-450,
+  "tangerine-500": $tangerine-500,
+  "tangerine-600": $tangerine-600,
+  "tangerine-700": $tangerine-700,
+  "tangerine-800": $tangerine-800,
+  "tangerine-900": $tangerine-900
 ) !default;
 
-$entryways: (
-  "entryway-25": $entryway-25,
-  "entryway-50": $entryway-50,
-  "entryway-100": $entryway-100,
-  "entryway-200": $entryway-200,
-  "entryway-300": $entryway-300,
-  "entryway-400": $entryway-400,
-  "entryway-450": $entryway-450,
-  "entryway-500": $entryway-500,
-  "entryway-600": $entryway-600,
-  "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
+$lavenders: (
+  "lavender-25": $lavender-25,
+  "lavender-50": $lavender-50,
+  "lavender-100": $lavender-100,
+  "lavender-200": $lavender-200,
+  "lavender-300": $lavender-300,
+  "lavender-400": $lavender-400,
+  "lavender-450": $lavender-450,
+  "lavender-500": $lavender-500,
+  "lavender-600": $lavender-600,
+  "lavender-700": $lavender-700,
+  "lavender-800": $lavender-800,
+  "lavender-900": $lavender-900
 ) !default;
 
 $sunglows: (
@@ -244,33 +216,33 @@ $sunglows: (
 ) !default;
 
 $warnings: (
-  "warning-25": $sunglow-25,
-  "warning-50": $sunglow-50,
-  "warning-100": $sunglow-100,
-  "warning-200": $sunglow-200,
-  "warning-300": $sunglow-300,
-  "warning-400": $sunglow-400,
-  "warning-450": $sunglow-450,
-  "warning-500": $sunglow-500,
-  "warning-600": $sunglow-600,
-  "warning-700": $sunglow-700,
-  "warning-800": $sunglow-800,
-  "warning-900": $sunglow-900
+  "warning-25": $tangerine-25,
+  "warning-50": $tangerine-50,
+  "warning-100": $tangerine-100,
+  "warning-200": $tangerine-200,
+  "warning-300": $tangerine-300,
+  "warning-400": $tangerine-400,
+  "warning-450": $tangerine-450,
+  "warning-500": $tangerine-500,
+  "warning-600": $tangerine-600,
+  "warning-700": $tangerine-700,
+  "warning-800": $tangerine-800,
+  "warning-900": $tangerine-900
 ) !default;
 
-$turnkeys: (
-  "turnkey-25": $turnkey-25,
-  "turnkey-50": $turnkey-50,
-  "turnkey-100": $turnkey-100,
-  "turnkey-200": $turnkey-200,
-  "turnkey-300": $turnkey-300,
-  "turnkey-400": $turnkey-400,
-  "turnkey-450": $turnkey-450,
-  "turnkey-500": $turnkey-500,
-  "turnkey-600": $turnkey-600,
-  "turnkey-700": $turnkey-700,
-  "turnkey-800": $turnkey-800,
-  "turnkey-900": $turnkey-900
+$electrics: (
+  "electric-25": $electric-25,
+  "electric-50": $electric-50,
+  "electric-100": $electric-100,
+  "electric-200": $electric-200,
+  "electric-300": $electric-300,
+  "electric-400": $electric-400,
+  "electric-450": $electric-450,
+  "electric-500": $electric-500,
+  "electric-600": $electric-600,
+  "electric-700": $electric-700,
+  "electric-800": $electric-800,
+  "electric-900": $electric-900
 ) !default;
 
 $dangers: (
@@ -303,12 +275,11 @@ $successs: (
   "success-900": $success-900
 ) !default;
 
-$primary: $blueprint !default;
-$secondary: $entryway !default;
-$tertiary: $skylight !default;
+$primary: $foundation !default;
+$secondary: $sunglow !default;
 $success: $green !default;
-$action: $turnkey !default;
-$warning: $sunglow !default;
+$action: $electric !default;
+$warning: $tangerine !default;
 $danger: $red !default;
 $light: $white !default;
 $dark: $gray-900 !default;
@@ -316,7 +287,6 @@ $dark: $gray-900 !default;
 $theme-colors: (
   "primary": $primary,
   "secondary": $secondary,
-  "tertiary": $tertiary,
   "success": $success,
   "action": $action,
   "warning": $warning,
@@ -326,23 +296,21 @@ $theme-colors: (
 ) !default;
 
 // scss-docs-start theme-text-variables
-$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%) !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%) !default;
 $action-border-subtle: tint-color($action, 60%) !default;
 // scss-docs-end theme-border-subtle-variables
 
 
 // Body
-$body-color: $gray-900 !default;
+$body-color: $gray-950 !default;
+$headings-color: $gray-900 !default;
 
 // Grid breakpoints
 $grid-breakpoints: (
@@ -394,7 +362,6 @@ $table-bg-scale: -80% !default;
 $table-variants: (
   "primary": shift-color($primary, $table-bg-scale),
   "secondary": shift-color($secondary, $table-bg-scale),
-  "tertiary": shift-color($tertiary, $table-bg-scale),
   "action": shift-color($action, $table-bg-scale),
   "success": shift-color($success, $table-bg-scale),
   "warning": shift-color($warning, $table-bg-scale),
@@ -407,8 +374,13 @@ $table-variants: (
 $border-width: 2px !default;
 $border-color: $gray-400 !default;
 
+$component-active-bg: $action !default;
+$focus-ring-opacity: .25 !default;
+$focus-ring-color: rgba($action, $focus-ring-opacity) !default;
+
 // Buttons + Forms
 $input-btn-border-width: .125rem !default;
+$input-focus-border-color: $component-active-bg !default;
 
 // Buttons
 $btn-hover-bg-shade-amount: 20% !default;
@@ -431,7 +403,7 @@ $blockquote-font-size: $font-size-base * 3.5 !default;
 
 // Accordion
 $accordion-border-radius: var(--#{$prefix}border-radius-sm) !default;
-$accordion-button-active-bg: var(--#{$prefix}primary) !default;
+$accordion-button-active-bg: var(--#{$prefix}action) !default;
 $accordion-button-active-color: var(--#{$prefix}light) !default;
 $accordion-icon-color: $body-color !default;
 $accordion-icon-active-color: $light !default;
@@ -444,15 +416,15 @@ $badge-font-size: .9375em !default;
 $badge-border-radius: var(--#{$prefix}border-radius-pill) !default;
 
 // Modal
-$modal-backdrop-bg: $foundation !default;
-$modal-backdrop-opacity: .7 !default;
+$modal-backdrop-bg: $action !default;
+$modal-backdrop-opacity: .3 !default;
 
 // Carousel
-$carousel-control-color: $black !default;
+$carousel-control-color: $action !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-indicator-active-bg: $action !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;
 
@@ -466,8 +438,6 @@ $progress-border-radius: var(--#{$prefix}border-radius-xs) !default;
 // Inputs
 $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;

package/scss/theme/_variables.scss

@@ -35,10 +35,15 @@ $badge-dot-size: 1rem !default;
 // scss-docs-start modal-variables
 $zindex-media-modal-close: 1060 !default;
 $btn-close-media-bg-color: $white !default;
-$btn-close-media-top-color: $foundation !default;
+$btn-close-media-top-color: $action !default;
 $btn-close-media-stroke-width: rfs-value(1px) !default;
 $btn-close-media-stroke-color: $gray-400 !default;
-$btn-close-media-bg: url("data:image/svg+xml, <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'><style>.cls-1{fill:#{$btn-close-media-stroke-color}}.cls-2{fill:#{$btn-close-media-bg-color}}.cls-3{fill:#{$btn-close-media-top-color}}</style><path class='cls-1' d='M20 1.25C22.4623 1.25 24.9005 1.73498 27.1753 2.67726C29.4502 3.61953 31.5172 5.00065 33.2583 6.74175C34.9994 8.48285 36.3805 10.5498 37.3227 12.8247C38.265 15.0995 38.75 17.5377 38.75 20C38.75 22.4623 38.265 24.9005 37.3227 27.1753C36.3805 29.4502 34.9994 31.5172 33.2583 33.2583C31.5172 34.9994 29.4502 36.3805 27.1753 37.3227C24.9005 38.265 22.4623 38.75 20 38.75C17.5377 38.75 15.0995 38.265 12.8247 37.3227C10.5498 36.3805 8.48285 34.9994 6.74175 33.2583C5.00065 31.5172 3.61953 29.4502 2.67726 27.1753C1.73498 24.9005 1.25 22.4623 1.25 20C1.25 17.5377 1.73498 15.0995 2.67726 12.8247C3.61953 10.5498 5.00065 8.48285 6.74175 6.74175C8.48285 5.00065 10.5498 3.61953 12.8247 2.67726C15.0995 1.73498 17.5377 1.25 20 1.25ZM20 40C25.3043 40 30.3914 37.8929 34.1421 34.1421C37.8929 30.3914 40 25.3043 40 20C40 14.6957 37.8929 9.60859 34.1421 5.85786C30.3914 2.10714 25.3043 0 20 0C14.6957 0 9.60859 2.10714 5.85786 5.85786C2.10714 9.60859 0 14.6957 0 20C0 25.3043 2.10714 30.3914 5.85786 34.1421C9.60859 37.8929 14.6957 40 20 40Z'/><path class='cls-2' d='M1.25 20C1.25 22.4623 1.73498 24.9005 2.67726 27.1753C3.61953 29.4502 5.00065 31.5172 6.74175 33.2583C8.48285 34.9994 10.5498 36.3805 12.8247 37.3227C15.0995 38.265 17.5377 38.75 20 38.75C22.4623 38.75 24.9005 38.265 27.1753 37.3227C29.4502 36.3805 31.5172 34.9994 33.2583 33.2583C34.9994 31.5172 36.3805 29.4502 37.3227 27.1753C38.265 24.9005 38.75 22.4623 38.75 20C38.75 17.5377 38.265 15.0995 37.3227 12.8247C36.3805 10.5498 34.9994 8.48285 33.2583 6.74175C31.5172 5.00065 29.4502 3.61953 27.1753 2.67726C24.9005 1.73498 22.4623 1.25 20 1.25C17.5377 1.25 15.0995 1.73498 12.8247 2.67726C10.5498 3.61953 8.48285 5.00065 6.74175 6.74175C5.00065 8.48285 3.61953 10.5498 2.67726 12.8247C1.73498 15.0995 1.25 17.5377 1.25 20ZM13.9297 13.9297C14.1719 13.6875 14.5703 13.6875 14.8125 13.9297L20 19.1172L25.1797 13.9375C25.4219 13.6953 25.8203 13.6953 26.0625 13.9375C26.3047 14.1797 26.3047 14.5781 26.0625 14.8203L20.8828 20L26.0625 25.1797C26.3047 25.4219 26.3047 25.8203 26.0625 26.0625C25.8203 26.3047 25.4219 26.3047 25.1797 26.0625L20 20.8828L14.8203 26.0625C14.5781 26.3047 14.1797 26.3047 13.9375 26.0625C13.6953 25.8203 13.6953 25.4219 13.9375 25.1797L19.1172 20L13.9375 14.8203C13.6953 14.5781 13.6953 14.1797 13.9375 13.9375L13.9297 13.9297Z'/><path class='cls-3' d='M13.9297 14.8125C13.6875 14.5703 13.6875 14.1719 13.9297 13.9297L13.9375 13.9375C14.1797 13.6953 14.5781 13.6953 14.8203 13.9375L20 19.1172L25.1797 13.9375C25.4219 13.6953 25.8203 13.6953 26.0625 13.9375C26.3047 14.1797 26.3047 14.5781 26.0625 14.8203L20.8828 20L26.0625 25.1797C26.3047 25.4219 26.3047 25.8203 26.0625 26.0625C25.8203 26.3047 25.4219 26.3047 25.1797 26.0625L20 20.8828L14.8203 26.0625C14.5781 26.3047 14.1797 26.3047 13.9375 26.0625C13.6953 25.8203 13.6953 25.4219 13.9375 25.1797L19.1172 20L13.9297 14.8125Z'/></svg>") !default;
+$btn-close-media-bg-color-hover: $action !default;
+$btn-close-media-top-color-hover: $sunglow !default;
+$btn-close-media-stroke-color-hover: $action !default;
+$btn-close-media-bg: url("data:image/svg+xml, <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'><path fill='#{$btn-close-media-stroke-color}' d='M20 1.25C22.4623 1.25 24.9005 1.73498 27.1753 2.67726C29.4502 3.61953 31.5172 5.00065 33.2583 6.74175C34.9994 8.48285 36.3805 10.5498 37.3227 12.8247C38.265 15.0995 38.75 17.5377 38.75 20C38.75 22.4623 38.265 24.9005 37.3227 27.1753C36.3805 29.4502 34.9994 31.5172 33.2583 33.2583C31.5172 34.9994 29.4502 36.3805 27.1753 37.3227C24.9005 38.265 22.4623 38.75 20 38.75C17.5377 38.75 15.0995 38.265 12.8247 37.3227C10.5498 36.3805 8.48285 34.9994 6.74175 33.2583C5.00065 31.5172 3.61953 29.4502 2.67726 27.1753C1.73498 24.9005 1.25 22.4623 1.25 20C1.25 17.5377 1.73498 15.0995 2.67726 12.8247C3.61953 10.5498 5.00065 8.48285 6.74175 6.74175C8.48285 5.00065 10.5498 3.61953 12.8247 2.67726C15.0995 1.73498 17.5377 1.25 20 1.25ZM20 40C25.3043 40 30.3914 37.8929 34.1421 34.1421C37.8929 30.3914 40 25.3043 40 20C40 14.6957 37.8929 9.60859 34.1421 5.85786C30.3914 2.10714 25.3043 0 20 0C14.6957 0 9.60859 2.10714 5.85786 5.85786C2.10714 9.60859 0 14.6957 0 20C0 25.3043 2.10714 30.3914 5.85786 34.1421C9.60859 37.8929 14.6957 40 20 40Z'/><path fill='#{$btn-close-media-bg-color}' d='M1.25 20C1.25 22.4623 1.73498 24.9005 2.67726 27.1753C3.61953 29.4502 5.00065 31.5172 6.74175 33.2583C8.48285 34.9994 10.5498 36.3805 12.8247 37.3227C15.0995 38.265 17.5377 38.75 20 38.75C22.4623 38.75 24.9005 38.265 27.1753 37.3227C29.4502 36.3805 31.5172 34.9994 33.2583 33.2583C34.9994 31.5172 36.3805 29.4502 37.3227 27.1753C38.265 24.9005 38.75 22.4623 38.75 20C38.75 17.5377 38.265 15.0995 37.3227 12.8247C36.3805 10.5498 34.9994 8.48285 33.2583 6.74175C31.5172 5.00065 29.4502 3.61953 27.1753 2.67726C24.9005 1.73498 22.4623 1.25 20 1.25C17.5377 1.25 15.0995 1.73498 12.8247 2.67726C10.5498 3.61953 8.48285 5.00065 6.74175 6.74175C5.00065 8.48285 3.61953 10.5498 2.67726 12.8247C1.73498 15.0995 1.25 17.5377 1.25 20ZM13.9297 13.9297C14.1719 13.6875 14.5703 13.6875 14.8125 13.9297L20 19.1172L25.1797 13.9375C25.4219 13.6953 25.8203 13.6953 26.0625 13.9375C26.3047 14.1797 26.3047 14.5781 26.0625 14.8203L20.8828 20L26.0625 25.1797C26.3047 25.4219 26.3047 25.8203 26.0625 26.0625C25.8203 26.3047 25.4219 26.3047 25.1797 26.0625L20 20.8828L14.8203 26.0625C14.5781 26.3047 14.1797 26.3047 13.9375 26.0625C13.6953 25.8203 13.6953 25.4219 13.9375 25.1797L19.1172 20L13.9375 14.8203C13.6953 14.5781 13.6953 14.1797 13.9375 13.9375L13.9297 13.9297Z'/><path fill='#{$btn-close-media-top-color}' d='M13.9297 14.8125C13.6875 14.5703 13.6875 14.1719 13.9297 13.9297L13.9375 13.9375C14.1797 13.6953 14.5781 13.6953 14.8203 13.9375L20 19.1172L25.1797 13.9375C25.4219 13.6953 25.8203 13.6953 26.0625 13.9375C26.3047 14.1797 26.3047 14.5781 26.0625 14.8203L20.8828 20L26.0625 25.1797C26.3047 25.4219 26.3047 25.8203 26.0625 26.0625C25.8203 26.3047 25.4219 26.3047 25.1797 26.0625L20 20.8828L14.8203 26.0625C14.5781 26.3047 14.1797 26.3047 13.9375 26.0625C13.6953 25.8203 13.6953 25.4219 13.9375 25.1797L19.1172 20L13.9297 14.8125Z'/></svg>") !default;
+$btn-close-media-bg-hover: url("data:image/svg+xml, <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'><path fill='#{$btn-close-media-stroke-color-hover}' d='M20 1.25C22.4623 1.25 24.9005 1.73498 27.1753 2.67726C29.4502 3.61953 31.5172 5.00065 33.2583 6.74175C34.9994 8.48285 36.3805 10.5498 37.3227 12.8247C38.265 15.0995 38.75 17.5377 38.75 20C38.75 22.4623 38.265 24.9005 37.3227 27.1753C36.3805 29.4502 34.9994 31.5172 33.2583 33.2583C31.5172 34.9994 29.4502 36.3805 27.1753 37.3227C24.9005 38.265 22.4623 38.75 20 38.75C17.5377 38.75 15.0995 38.265 12.8247 37.3227C10.5498 36.3805 8.48285 34.9994 6.74175 33.2583C5.00065 31.5172 3.61953 29.4502 2.67726 27.1753C1.73498 24.9005 1.25 22.4623 1.25 20C1.25 17.5377 1.73498 15.0995 2.67726 12.8247C3.61953 10.5498 5.00065 8.48285 6.74175 6.74175C8.48285 5.00065 10.5498 3.61953 12.8247 2.67726C15.0995 1.73498 17.5377 1.25 20 1.25ZM20 40C25.3043 40 30.3914 37.8929 34.1421 34.1421C37.8929 30.3914 40 25.3043 40 20C40 14.6957 37.8929 9.60859 34.1421 5.85786C30.3914 2.10714 25.3043 0 20 0C14.6957 0 9.60859 2.10714 5.85786 5.85786C2.10714 9.60859 0 14.6957 0 20C0 25.3043 2.10714 30.3914 5.85786 34.1421C9.60859 37.8929 14.6957 40 20 40Z'/><path fill='#{$btn-close-media-bg-color-hover}' d='M1.25 20C1.25 22.4623 1.73498 24.9005 2.67726 27.1753C3.61953 29.4502 5.00065 31.5172 6.74175 33.2583C8.48285 34.9994 10.5498 36.3805 12.8247 37.3227C15.0995 38.265 17.5377 38.75 20 38.75C22.4623 38.75 24.9005 38.265 27.1753 37.3227C29.4502 36.3805 31.5172 34.9994 33.2583 33.2583C34.9994 31.5172 36.3805 29.4502 37.3227 27.1753C38.265 24.9005 38.75 22.4623 38.75 20C38.75 17.5377 38.265 15.0995 37.3227 12.8247C36.3805 10.5498 34.9994 8.48285 33.2583 6.74175C31.5172 5.00065 29.4502 3.61953 27.1753 2.67726C24.9005 1.73498 22.4623 1.25 20 1.25C17.5377 1.25 15.0995 1.73498 12.8247 2.67726C10.5498 3.61953 8.48285 5.00065 6.74175 6.74175C5.00065 8.48285 3.61953 10.5498 2.67726 12.8247C1.73498 15.0995 1.25 17.5377 1.25 20ZM13.9297 13.9297C14.1719 13.6875 14.5703 13.6875 14.8125 13.9297L20 19.1172L25.1797 13.9375C25.4219 13.6953 25.8203 13.6953 26.0625 13.9375C26.3047 14.1797 26.3047 14.5781 26.0625 14.8203L20.8828 20L26.0625 25.1797C26.3047 25.4219 26.3047 25.8203 26.0625 26.0625C25.8203 26.3047 25.4219 26.3047 25.1797 26.0625L20 20.8828L14.8203 26.0625C14.5781 26.3047 14.1797 26.3047 13.9375 26.0625C13.6953 25.8203 13.6953 25.4219 13.9375 25.1797L19.1172 20L13.9375 14.8203C13.6953 14.5781 13.6953 14.1797 13.9375 13.9375L13.9297 13.9297Z'/><path fill='#{$btn-close-media-top-color-hover}' d='M13.9297 14.8125C13.6875 14.5703 13.6875 14.1719 13.9297 13.9297L13.9375 13.9375C14.1797 13.6953 14.5781 13.6953 14.8203 13.9375L20 19.1172L25.1797 13.9375C25.4219 13.6953 25.8203 13.6953 26.0625 13.9375C26.3047 14.1797 26.3047 14.5781 26.0625 14.8203L20.8828 20L26.0625 25.1797C26.3047 25.4219 26.3047 25.8203 26.0625 26.0625C25.8203 26.3047 25.4219 26.3047 25.1797 26.0625L20 20.8828L14.8203 26.0625C14.5781 26.3047 14.1797 26.3047 13.9375 26.0625C13.6953 25.8203 13.6953 25.4219 13.9375 25.1797L19.1172 20L13.9297 14.8125Z'/></svg>") !default;
 $btn-close-media-width: rfs-value(35px) !default;
 $btn-close-media-height: $btn-close-media-width !default;
 // scss-docs-end modal-variables
+