@unlk/keymaster 1.0.1 → 1.0.3

package/scss/assets/bootstrap5/_variables.scss

@@ -67,8 +67,8 @@ $colors: (
 ) !default;
 // scss-docs-end colors-map
 
-// 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
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.2 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG/#contrast-minimum
 $min-contrast-ratio:   4.5 !default;
 
 // Customize the light and dark text colors for use in our color contrast function.
@@ -1091,7 +1091,7 @@ $form-feedback-valid-color:         $success !default;
 $form-feedback-invalid-color:       $danger !default;
 
 $form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
-$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
+$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>") !default;
 $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
 // scss-docs-end form-feedback-variables
@@ -1302,7 +1302,7 @@ $pagination-color:                  var(--#{$prefix}link-color) !default;
 $pagination-bg:                     var(--#{$prefix}body-bg) !default;
 $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
 $pagination-border-width:           var(--#{$prefix}border-width) !default;
-$pagination-margin-start:           calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
+$pagination-margin-start:           calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list
 $pagination-border-color:           var(--#{$prefix}border-color) !default;
 
 $pagination-focus-color:            var(--#{$prefix}link-hover-color) !default;
@@ -1394,8 +1394,8 @@ $accordion-icon-active-color:             $primary-text-emphasis !default;
 $accordion-icon-transition:               transform .2s ease-in-out !default;
 $accordion-icon-transform:                rotate(-180deg) !default;
 
-$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;
-$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;
+$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
+$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
 // scss-docs-end accordion-variables
 
 // Tooltips
@@ -1507,7 +1507,7 @@ $modal-dialog-margin-y-sm-up:       1.75rem !default;
 
 $modal-title-line-height:           $line-height-base !default;
 
-$modal-content-color:               null !default;
+$modal-content-color:               var(--#{$prefix}body-color) !default;
 $modal-content-bg:                  var(--#{$prefix}body-bg) !default;
 $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
@@ -1652,6 +1652,7 @@ $carousel-control-width:             15% !default;
 $carousel-control-opacity:           .5 !default;
 $carousel-control-hover-opacity:     .9 !default;
 $carousel-control-transition:        opacity .15s ease !default;
+$carousel-control-icon-filter:       null !default;
 
 $carousel-indicator-width:           30px !default;
 $carousel-indicator-height:          3px !default;
@@ -1669,17 +1670,17 @@ $carousel-caption-spacer:            1.25rem !default;
 
 $carousel-control-icon-width:        2rem !default;
 
-$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
-$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>") !default;
+$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>") !default;
 
 $carousel-transition-duration:       .6s !default;
 $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
 // scss-docs-end carousel-variables
 
 // scss-docs-start carousel-dark-variables
-$carousel-dark-indicator-active-bg:  $black !default;
-$carousel-dark-caption-color:        $black !default;
-$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;
+$carousel-dark-indicator-active-bg:  $black !default; // Deprecated in v5.3.4
+$carousel-dark-caption-color:        $black !default; // Deprecated in v5.3.4
+$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default; // Deprecated in v5.3.4
 // scss-docs-end carousel-dark-variables
 
 
@@ -1706,13 +1707,14 @@ $btn-close-height:           $btn-close-width !default;
 $btn-close-padding-x:        .25em !default;
 $btn-close-padding-y:        $btn-close-padding-x !default;
 $btn-close-color:            $black !default;
-$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
+$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !default;
 $btn-close-focus-shadow:     $focus-ring-box-shadow !default;
 $btn-close-opacity:          .5 !default;
 $btn-close-hover-opacity:    .75 !default;
 $btn-close-focus-opacity:    1 !default;
 $btn-close-disabled-opacity: .25 !default;
-$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;
+$btn-close-filter:           null !default;
+$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
 // scss-docs-end close-variables
 
 
@@ -1749,5 +1751,3 @@ $nested-kbd-font-weight:            null !default; // Deprecated in v5.2.0, remo
 $pre-color:                         null !default;
 
 @import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3
-
-

package/scss/assets/bootstrap5/forms/_floating-labels.scss

@@ -14,9 +14,11 @@
     top: 0;
     left: 0;
     z-index: 2;
+    max-width: 100%;
     height: 100%; // allow textareas
     padding: $form-floating-padding-y $form-floating-padding-x;
     overflow: hidden;
+    color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
     text-align: start;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -49,6 +51,7 @@
   > .form-select {
     padding-top: $form-floating-input-padding-t;
     padding-bottom: $form-floating-input-padding-b;
+    padding-left: $form-floating-padding-x;
   }
 
   > .form-control:focus,
@@ -56,27 +59,30 @@
   > .form-control-plaintext,
   > .form-select {
     ~ label {
-      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
       transform: $form-floating-label-transform;
-
-      &::after {
-        position: absolute;
-        inset: $form-floating-padding-y ($form-floating-padding-x * .5);
-        z-index: -1;
-        height: $form-floating-label-height;
-        content: "";
-        background-color: $input-bg;
-        @include border-radius($input-border-radius);
-      }
     }
   }
   // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
   > .form-control:-webkit-autofill {
     ~ label {
-      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
       transform: $form-floating-label-transform;
     }
   }
+  > textarea:focus,
+  > textarea:not(:placeholder-shown) {
+    ~ label::after {
+      position: absolute;
+      inset: $form-floating-padding-y ($form-floating-padding-x * .5);
+      z-index: -1;
+      height: $form-floating-label-height;
+      content: "";
+      background-color: $input-bg;
+      @include border-radius($input-border-radius);
+    }
+  }
+  > textarea:disabled ~ label::after {
+    background-color: $input-disabled-bg;
+  }
 
   > .form-control-plaintext {
     ~ label {
@@ -87,9 +93,5 @@
   > :disabled ~ label,
   > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
     color: $form-floating-label-disabled-color;
-
-    &::after {
-      background-color: $input-disabled-bg;
-    }
   }
 }

package/scss/assets/bootstrap5/forms/_input-group.scss

@@ -121,7 +121,7 @@
   }
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
     @include border-start-radius(0);
   }
 

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

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

package/scss/assets/bootstrap5/mixins/_grid.scss

@@ -72,7 +72,7 @@
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .col#{$infix} {
-        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+        flex: 1 0 0;
       }
 
       .row-cols#{$infix}-auto > * {

package/scss/assets/bootstrap5/mixins/_visually-hidden.scss

@@ -24,7 +24,7 @@
 // Use to only display content when it's focused, or one of its child elements is focused
 // (i.e. when focus is within the element/container that the class was applied to)
 //
-// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Useful for "Skip to main content" links; see https://www.w3.org/WAI/WCAG22/Techniques/general/G1.html
 
 @mixin visually-hidden-focusable() {
   &:not(:focus):not(:focus-within) {

package/scss/keymaster.scss

@@ -29,3 +29,6 @@
 @import "theme/alert";
 @import "theme/badge";
 @import "theme/carousel";
+@import "theme/spinners";
+@import "theme/modal";
+@import "theme/close";

package/scss/theme/_accordion.scss

@@ -10,35 +10,43 @@
   --#{$prefix}accordion-alt-btn-icon: #{escape-svg($accordion-alt-button-icon)};
   --#{$prefix}accordion-alt-btn-active-icon: #{escape-svg($accordion-alt-button-active-icon)};
   --#{$prefix}accordion-alt-active-color: #{$accordion-alt-button-active-color};
+
   .accordion-button {
-    background-color: var(--#{$prefix}accordion-alt-btn-bg);
     margin-bottom: 0;
+    background-color: var(--#{$prefix}accordion-alt-btn-bg);
+
     i {
-      margin-right: $spacer * .5;
       width: var(--#{$prefix}accordion-alt-btn-icon-width);
       height: var(--#{$prefix}accordion-alt-btn-icon-width);
+      margin-right: $spacer * .5;
     }
+
     &:not(.collapsed) {
       color: var(--#{$prefix}accordion-alt-active-color);
       @include box-shadow(none);
+
       &::after {
         background-image: var(--#{$prefix}accordion-alt-btn-active-icon);
         transform: var(--#{$prefix}accordion-btn-icon-transform);
       }
     }
+
     &::after {
       width: var(--#{$prefix}accordion-btn-icon-width);
       height: var(--#{$prefix}accordion-btn-icon-width);
       background-image: var(--#{$prefix}accordion-alt-btn-icon);
     }
   }
+
   > .accordion-item {
     background-color: var(--#{$prefix}accordion-alt-bg);
-    border: none;
+    border: 0;
     @include border-radius(var(--#{$prefix}accordion-alt-border-radius));
+
     &:not(:last-child) {
       @include margin-bottom($spacer);
     }
+
     // stylelint-disable selector-max-class
     > .accordion-header .accordion-button {
       &,
@@ -46,6 +54,7 @@
         @include border-radius(var(--#{$prefix}accordion-alt-border-radius));
       }
     }
+
     // stylelint-enable selector-max-class
 
     > .accordion-collapse {
@@ -54,6 +63,7 @@
 
     .accordion-body {
       padding-top: 0;
+
       &.has-icon {
         padding-left: $spacer * 3.125;
       }

package/scss/theme/_alert.scss

@@ -1,12 +1,14 @@
 .alert {
   position: relative;
   display: flex;
+
   i {
     margin-top: $spacer * .25;
     margin-right: $spacer * .5;
     font-size: $font-size-base;
   }
 }
+
 @each $state, $value in $theme-colors {
   $alert-border: var(--#{$prefix}#{$state}-border-subtle);
   $alert-color: var(--#{$prefix}#{$state}-text-emphasis);

package/scss/theme/_badge.scss

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

package/scss/theme/_buttons.scss

@@ -16,7 +16,7 @@
   .btn-link-#{$color} {
     @if $color == "primary" or $color == "blueprint" {
       @include button-link-variant(
-          $value,
+        $value,
         $active-background: $blueprint-700,
       );
     }
@@ -26,8 +26,8 @@
 @each $color, $value in $theme-colors {
   .btn-#{$color} {
     @include button-variant(
-        $value,
-        $value,
+      $value,
+      $value,
       $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
       $hover-border: shade-color($value, $btn-hover-border-shade-amount),
       $active-background: shade-color($value, $btn-active-bg-shade-amount),
@@ -41,9 +41,9 @@
   .btn-outline-#{$color} {
     @if $color == "light" {
       @include button-outline-variant(
-          $value,
+        $value,
         $color-hover: $value,
-        $active-background: rgba($blueprint-500, 0.25),
+        $active-background: rgba($blueprint-500, .25),
         $active-border: $value,
         $active-color: $value,
       );

package/scss/theme/_carousel.scss

@@ -5,8 +5,8 @@
   .carousel-caption {
     padding-bottom: ($spacer * .75);
     h6 {
-      color: $white;
       margin-bottom: 0;
+      color: $white;
     }
   }
 }
@@ -25,6 +25,8 @@
 .carousel-control-prev,
 .carousel-control-next {
   position: unset;
+  width: fit-content;
+  padding: rfs-value(6px);
 }
 .carousel-indicators {
   position: unset;
@@ -35,8 +37,3 @@
     @extend .rounded-circle;
   }
 }
-
-.carousel-control-prev, .carousel-control-next {
-  width: fit-content;
-  padding: rfs-value(6px);
-}

package/scss/theme/_close.scss

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

package/scss/theme/_modal.scss

@@ -0,0 +1,35 @@
+.modal-dialog-media {
+  --#{$prefix}modal-close-zindex: #{$zindex-media-modal-close};
+  .modal-header {
+    position: relative;
+    padding: 0;
+    border-bottom: none;
+    .btn-close {
+      position: absolute;
+      right: -1em;
+      z-index: var(--#{$prefix}modal-close-zindex);
+      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 {
+        opacity: 1;
+      }
+      .cls-2 {
+        &:hover {
+          fill: $foundation-500;
+        }
+      }
+      @include media-breakpoint-down(xl) {
+        right: 0;
+        width: rfs-value(10px);
+        height: rfs-value(10px);
+      }
+    }
+  }
+  @include media-breakpoint-down(sm) {
+    @include margin-right($spacer * 1.25);
+    @include margin-left($spacer * 1.25);
+  }
+}

package/scss/theme/_spinners.scss

@@ -0,0 +1,9 @@
+.spinner-border {
+  position: relative;
+  background: none;
+  border: 0;
+  .spinner-border-svg {
+    width: 100%;
+    height: 100%;
+  }
+}

package/scss/theme/_typography.scss

@@ -1,36 +1,31 @@
 @font-face {
   font-family: "Wix MadeFor Display";
-  src: url('#{$font-path}/WixMadeforDisplay-Regular.woff2') format('woff2'),
-    url('#{$font-path}/WixMadeforDisplay-Regular.ttf') format('truetype');
   font-weight: 400;
+  src: url("#{$font-path}/WixMadeforDisplay-Regular.woff2") format("woff2"), url("#{$font-path}/WixMadeforDisplay-Regular.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Wix MadeFor Display";
-  src: url('#{$font-path}/WixMadeforDisplay-Bold.woff2') format('woff2'),
-    url('#{$font-path}/WixMadeforDisplay-Bold.ttf') format('truetype');
   font-weight: 700;
+  src: url("#{$font-path}/WixMadeforDisplay-Bold.woff2") format("woff2"), url("#{$font-path}/WixMadeforDisplay-Bold.ttf") format("truetype");
 }
 
 @font-face {
-  font-family: "STIXTwoText";
-  src: url('#{$font-path}/STIXTwoText-Italic.woff2') format('woff2'),
-    url('#{$font-path}/STIXTwoText-Italic.ttf') format('truetype');
-  font-weight: 400;
+  font-family: STIXTwoText;
   font-style: italic;
+  font-weight: 400;
+  src: url("#{$font-path}/STIXTwoText-Italic.woff2") format("woff2"), url("#{$font-path}/STIXTwoText-Italic.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Neulis Neue";
-  src: url('#{$font-path}/NeulisNeue-Medium.woff2') format('woff2'),
-  url('#{$font-path}/NeulisNeue-Medium.woff') format('woff');
   font-weight: 500;
+  src: url("#{$font-path}/NeulisNeue-Medium.woff2") format("woff2"), url("#{$font-path}/NeulisNeue-Medium.woff") format("woff");
 }
 
 @font-face {
   font-family: "Neulis Neue";
-  src: url('#{$font-path}/NeulisNeue-MediumItalic.woff2') format('woff2'),
-  url('#{$font-path}/NeulisNeue-MediumItalic.woff') format('woff');
-  font-weight: 500;
   font-style: italic;
+  font-weight: 500;
+  src: url("#{$font-path}/NeulisNeue-MediumItalic.woff2") format("woff2"), url("#{$font-path}/NeulisNeue-MediumItalic.woff") format("woff");
 }

package/scss/theme/_utilities-overrides.scss

@@ -7,49 +7,49 @@
 $box-shadow-sm: 0 rfs-value(1px) rfs-value(4px) rgba($foundation-500, .1);
 $box-shadow: 0 rfs-value(4px) rfs-value(10px) rgba($foundation-500, .12);
 $box-shadow-lg: 0 rfs-value(8px) rfs-value(35px) rgba($foundation-500, .16);
-$box-shadow-inset: inset 0 rfs-value(8px) rfs-value(35px) rgba($foundation-500, .16);
+$box-shadow-inset: 0 rfs-value(1px) rfs-value(2px) rgba($foundation-500, .1) inset;
 
 $all-colors: map-merge-multiple($foundations, $blueprints, $entryways, $turnkeys, $sunglows, $warnings, $grays, $successs, $dangers);
 
 $utilities: map-merge(
-    $utilities,
-    (
-      "shadow": map-merge(
-          map-get($utilities, "shadow"),
+  $utilities,
+  (
+    "shadow": map-merge(
+      map-get($utilities, "shadow"),
+      (
+        class: box-shadow,
+        values: map-merge(
+          map-get(map-get($utilities, "shadow"), "values"),
           (
-            class: box-shadow,
-            values: map-merge(
-                map-get(map-get($utilities, "shadow"), "values"),
-                (
-                  null: --#{$prefix}box-shadow,
-                  sm: --#{$prefix}box-shadow-sm,
-                  lg: --#{$prefix}box-shadow-lg,
-                  inset: --#{$prefix}box-shadow-insethom
-                )
-            )
+            null: var(--#{$prefix}box-shadow),
+            sm: var(--#{$prefix}box-shadow-sm),
+            lg: var(--#{$prefix}box-shadow-lg),
+            inset: var(--#{$prefix}box-shadow-inset)
           )
-      ),
-      "color": map-merge(
-          map-get($utilities, "color"),
+        )
+      )
+    ),
+    "color": map-merge(
+      map-get($utilities, "color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "color"), "values"),
           (
-            values: map-merge(
-                map-get(map-get($utilities, "color"), "values"),
-                  (
-                    $all-colors
-                  ),
-            ),
+            $all-colors
           ),
+        ),
       ),
-      "background-color": map-merge(
-          map-get($utilities, "background-color"),
+    ),
+    "background-color": map-merge(
+      map-get($utilities, "background-color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "background-color"), "values"),
           (
-            values: map-merge(
-                map-get(map-get($utilities, "background-color"), "values"),
-                  (
-                    $all-colors
-                  ),
-            ),
+            $all-colors
           ),
+        ),
       ),
-    )
+    ),
+  )
 );

package/scss/theme/_variables-overrides.scss

@@ -16,12 +16,12 @@ $font-family-base: "Wix MadeFor Display";
 $font-family-code: "Wix MadeFor Display";
 
 // Colors
-$foundation: #1D1F50;
-$blueprint: #3E51A2;
-$entryway: #3B7BBF;
-$skylight: #CDECF9;
-$turnkey: #6346D3;
-$sunglow: #FBCD2F;
+$foundation: #1d1f50;
+$blueprint: #3e51a2;
+$entryway: #3b7bbf;
+$skylight: #cdecf9;
+$turnkey: #6346d3;
+$sunglow: #fbcd2f;
 $green: #027a48;
 $red: #b42318;
 $gray: #c1c5cc;
@@ -342,7 +342,7 @@ $headings-font-weight: $font-weight-medium;
 // Display Headings
 $display-font-family: "Neulis Neue";
 $display-font-weight: $font-weight-medium;
-$display-line-height: 1.1 !default;
+$display-line-height: 1.1;
 
 $font-sizes: (
   1: $font-size-base * 1.25,
@@ -354,7 +354,7 @@ $font-sizes: (
 );
 
 // Tables
-$table-bg-scale: -80% !default;
+$table-bg-scale: -80%;
 
 $table-variants: (
   "primary": shift-color($primary, $table-bg-scale),
@@ -407,6 +407,10 @@ $accordion-button-focus-box-shadow: none;
 $badge-font-size: .9375em;
 $badge-border-radius: var(--#{$prefix}border-radius-pill);
 
+// Modal
+$modal-backdrop-bg: $foundation;
+$modal-backdrop-opacity: .7;
+
 // Carousel
 $carousel-control-color: $black;
 $carousel-control-icon-width: .75rem;
@@ -415,3 +419,6 @@ $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>");
+
+// Tooltips
+$tooltip-bg: var(--#{$prefix}primary);

package/scss/theme/_variables.scss

@@ -31,3 +31,15 @@ $badge-font-size-lg: 1.125em;
 $badge-dot-padding: .5em;
 $badge-dot-size: 1rem;
 // scss-docs-end badge-variables
+
+// Modals
+// scss-docs-start modal-variables
+$zindex-media-modal-close: 1060;
+$btn-close-media-bg-color: $white;
+$btn-close-media-top-color: $foundation;
+$btn-close-media-stroke-width: rfs-value(1px);
+$btn-close-media-stroke-color: $gray-400;
+$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>");
+$btn-close-media-width: rfs-value(35px);
+$btn-close-media-height: $btn-close-media-width;
+// scss-docs-end modal-variables