vanilla-framework 4.13.0 → 4.15.0

package/scss/_patterns_navigation-reduced.scss

@@ -0,0 +1,121 @@
+@mixin vf-p-navigation-reduced {
+  .p-navigation--reduced {
+    // height of reduced navigation calculated from line height and padding
+    $reduced-nav-height: calc(map-get($line-heights, x-small) + 2 * $spv--small);
+
+    background-color: $colors--theme--background-alt;
+    position: relative;
+    z-index: 99; // display above sticky top navigation, but below modals/overlays
+
+    // LOGO OVERRIDES FOR REDUCED NAVIGATION
+
+    // orange logo tag is hidden in reduced navigation
+    .p-navigation__tagged-logo {
+      .p-navigation__logo-tag {
+        display: none;
+      }
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        // on large screens align the logo with the grid start
+        .p-navigation__link {
+          padding-left: 0;
+        }
+      }
+    }
+
+    // reduced nav logo text uses default font size (on small screens)
+    .p-navigation__logo-title {
+      color: $colors--theme--text-muted;
+      font-size: #{map-get($font-sizes, default)}rem;
+      font-weight: $font-weight-regular-text;
+    }
+
+    // reduced padding on small screens
+    .p-navigation__link {
+      padding-bottom: $spv--medium;
+      padding-top: $spv--medium;
+    }
+
+    // links in the banner (Menu toggle, search toggle) use muted text colour
+    .p-navigation__banner .p-navigation__link {
+      color: $colors--theme--text-muted;
+    }
+
+    // REDUCED SIZE OF NAVIGATION ON LARGE SCREENS
+    @media (min-width: $breakpoint-navigation-threshold) {
+      // adjust font size for reduced nav on large screens
+      .p-navigation__link,
+      .p-navigation__logo-title {
+        color: $colors--theme--text-muted;
+        font-size: #{map-get($font-sizes, small)}rem;
+        line-height: map-get($line-heights, x-small);
+      }
+
+      .p-navigation__link {
+        padding-bottom: $spv--small;
+        padding-top: $spv--small;
+      }
+
+      .p-navigation__item--dropdown-toggle .p-navigation__link {
+        &::after {
+          @include vf-icon-chevron-muted;
+          top: $spv--small;
+        }
+      }
+
+      .p-navigation__item--dropdown-toggle.is-active {
+        background-color: $colors--theme--background-default;
+
+        .p-navigation__link {
+          color: $colors--theme--text-default;
+        }
+
+        .p-navigation__link::after {
+          @include vf-icon-chevron-themed;
+        }
+      }
+
+      .p-navigation__link--search-toggle {
+        &::after {
+          @include vf-icon-search-muted;
+        }
+      }
+    }
+
+    // SEARCH IN REDUCED NAVIGATION
+
+    .p-navigation__link--search-toggle {
+      // use muted icon to align with text colour
+      &::after {
+        @include vf-icon-search-muted;
+        top: calc($spv--medium + map-get($nudges, x-small));
+      }
+
+      // search label is always hidden in reduced navigation
+      .p-navigation__search-label {
+        display: none;
+      }
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        &::after {
+          top: $spv--small;
+        }
+      }
+    }
+
+    @media (min-width: $breakpoint-navigation-threshold) {
+      &.has-search-open {
+        // make sure reduced navigation items remain visible when search is open
+        // both classes needed for specificity
+        .p-navigation__nav .p-navigation__items {
+          display: inline-flex;
+        }
+
+        // position the search under the reduced navigation
+        .p-navigation__search {
+          top: $reduced-nav-height;
+        }
+      }
+    }
+  }
+}

package/scss/_patterns_navigation.scss

@@ -1,15 +1,14 @@
 @import 'settings';
 
 $lightness-threshold: 70;
-$navigation-logo-tag-width: 1.313rem; // 21px when 1rem is 16px
-$navigation-logo-tag-height: 2rem;
-$navigation-logo-tag-height-desktop: 2.3rem;
-$navigation-logo-banner-height: 3rem; // legacy logo height (small and medium screens)
-$navigation-logo-banner-height-desktop: 3.5rem; // legacy logo height (on large screens)
+$navigation-logo-tag-width: 1.375rem; // 22px when 1rem is 16px
+$navigation-logo-tag-height: 2.375rem; // 38px when 1rem is 16px
+$navigation-logo-banner-height: 3.5rem; // legacy logo height (on large screens)
 $navigation-logo-size: 1rem;
-$navigation-logo-padding: calc(1.5rem + 0.19rem); // ~27px to align better with logos as originally designed in SVG
+$navigation-logo-padding: calc(1.5rem + 0.1rem); // ~25.6px to align better with logos as originally designed in SVG
 $sph-navigation-link: 0.3rem;
-$spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
+$spv-navigation-logo-bottom-position: 0.25rem; // 4px when 1rem is 16px
+$navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large); // navigation bar height based on line height and paddings
 
 @mixin vf-p-navigation {
   // placeholders
@@ -140,8 +139,10 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   }
 
   .p-navigation,
-  .p-navigation--sliding {
+  .p-navigation--sliding,
+  .p-navigation--reduced {
     background-color: $colors--theme--background-default;
+    color: $colors--theme--text-default;
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
@@ -154,6 +155,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
     // p-search-box overrides
     .p-search-box {
+      background-color: $colors--theme--background-default;
       flex: 1 0 auto;
       margin-left: map-get($grid-margin-widths, small);
       margin-right: map-get($grid-margin-widths, small);
@@ -228,6 +230,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       // shift navigation items by the size of grid margin to align with grid
       .p-navigation__items:first-child {
         margin-left: calc(-1 * $sph--large);
+        width: calc(100% + $sph--large);
       }
 
       // on medium screen sizes (6 columns) use 2/4 column split
@@ -261,12 +264,33 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
       max-width: $nav-link-max-width;
     }
+
+    &.is-right-shifted {
+      margin-left: auto;
+    }
   }
 
   .p-navigation__link {
     @extend %navigation-link;
   }
 
+  .p-navigation__link--menu-toggle {
+    @extend %navigation-link;
+
+    &::after {
+      @extend %icon;
+      @include vf-icon-chevron-themed;
+      content: '';
+      display: inline-block;
+      height: 1rem;
+      width: 1rem;
+    }
+
+    .has-menu-open &::after {
+      transform: rotate(180deg);
+    }
+  }
+
   // navigation logo
   .p-navigation__banner {
     @extend %navigation-link-responsive-padding-left;
@@ -276,10 +300,12 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     justify-content: space-between;
     padding-right: 0;
 
-    .p-navigation__link {
+    .p-navigation__link,
+    .p-navigation__link--menu-toggle {
       // reset padding for navigation links in the navigation banner
       @extend %navigation-link-responsive-padding-horizontal;
-      @extend %navigation-link-responsive-padding-vertical;
+      padding-bottom: $spv--large;
+      padding-top: $spv--large;
 
       // remove navigation separator for navigation links in the navigation banner
       &::before {
@@ -300,10 +326,6 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     height: $navigation-logo-banner-height;
     margin: 0 $sph--large 0 0;
 
-    @media (min-width: $breakpoint-navigation-threshold) {
-      height: $navigation-logo-banner-height-desktop;
-    }
-
     .p-navigation__item {
       @include vf-focus;
 
@@ -320,24 +342,20 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     .p-navigation__logo-tag {
+      align-items: flex-end;
       background-color: $color-ubuntu;
+      display: flex;
       height: $navigation-logo-tag-height;
+      justify-content: center;
       left: 0;
+      padding-bottom: $spv-navigation-logo-bottom-position;
       position: absolute;
       top: 0;
       width: $navigation-logo-tag-width;
-
-      @media (min-width: $breakpoint-navigation-threshold) {
-        height: $navigation-logo-tag-height-desktop;
-      }
     }
 
     .p-navigation__logo-icon {
-      bottom: $spv-navigation-logo-bottom-position;
       height: $navigation-logo-size;
-      left: 50%;
-      position: absolute;
-      transform: translate(-50%, 0);
       width: $navigation-logo-size;
     }
 
@@ -391,6 +409,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       display: flex;
       flex-wrap: wrap;
       margin-top: 0; // prevents bottom border of nav from moving 1px
+      position: static;
     }
   }
 
@@ -494,6 +513,15 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
   }
 
+  // STICKY NAVIGATION
+  .p-navigation.is-sticky,
+  // cover both --sticky and --reduced navigation
+  [class^='p-navigation--'].is-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 98; // show it above all other content, but below modal/overlays and reduced navigation
+  }
+
   // SEARCH
 
   // on mobile screens search box is visible inside of the mobile navigation dropdown
@@ -524,10 +552,9 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
     // show both label and icon on large screens
     @media (min-width: $breakpoint-large) {
-      padding-left: $sph--large;
-
       .p-navigation__search-label {
         display: initial;
+        padding-left: $sph--large;
       }
     }
 
@@ -544,12 +571,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       position: absolute;
       right: calc($sph--large / 2);
       text-indent: calc(100% + 10rem);
-      top: calc($spv--medium + map-get($nudges, x-small));
+      top: calc($spv--large + map-get($nudges, x-small));
       width: map-get($icon-sizes, default);
-
-      @media (min-width: $breakpoint-navigation-threshold) {
-        top: calc($spv--large + map-get($nudges, x-small));
-      }
     }
   }
 
@@ -589,10 +612,12 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
   // when navigation search is expanded
   .p-navigation.has-search-open,
-  .p-navigation--sliding.has-search-open {
+  .p-navigation--sliding.has-search-open,
+  .p-navigation--reduced.has-search-open {
     // make sure search in navigation renders on top of the overlay
     .p-navigation__nav {
       display: flex;
+      position: relative;
       z-index: 60;
     }
 
@@ -603,7 +628,14 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
     // show expanded search box
     .p-navigation__search {
+      background-color: $colors--theme--background-default;
       display: flex;
+      position: absolute;
+      width: 100%;
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        background-color: transparent;
+      }
     }
 
     // fade in search overlay
@@ -611,6 +643,11 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       opacity: 0.5;
       pointer-events: all;
     }
+
+    // change search toggle icon to close icon
+    .p-navigation__link--search-toggle::after {
+      @include vf-icon-close-themed;
+    }
   }
 
   .p-navigation.has-menu-open {
@@ -692,6 +729,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     &.is-active {
+      background: $colors--theme--background-active;
+
       &::after {
         transform: rotate(0deg);
 
@@ -710,9 +749,56 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       // increase padding to accommodate chevron icon
       padding-right: calc(2 * $sph--small + map-get($icon-sizes, default));
     }
+  }
 
-    &:first-child .p-navigation__link::before {
-      content: none;
+  .p-navigation--reduced .p-navigation__dropdown.is-full-width,
+  .p-navigation--sliding .p-navigation__dropdown.is-full-width {
+    .p-navigation__dropdown-content--full-width {
+      @extend %vf-has-box-shadow;
+      @include vf-transition(transform, snap);
+      background-color: $colors--theme--background-default;
+      border-top: 1px solid $colors--theme--border-default;
+      display: none; // hide on small screens
+    }
+
+    // on desktop display full width meganav dropdowns
+    @media (min-width: $breakpoint-navigation-threshold) {
+      background-color: $color-transparent;
+      box-shadow: none;
+      left: 0;
+      overflow: hidden;
+      position: absolute;
+      right: 0;
+
+      // hide mobile sliding menu on full width view
+      .p-navigation__dropdown-content--sliding {
+        display: none;
+      }
+
+      .p-navigation__dropdown-content--full-width {
+        display: block;
+        transform: translateY(0);
+      }
+    }
+
+    // collapsed dropdowns are animated off-screen
+    &.is-collapsed .p-navigation__dropdown-content--full-width {
+      transform: translateY(-101%);
+    }
+
+    // rows think they are nested (because they are inside of navigation row)
+    // we need to reset them back to original state
+    .row,
+    [class*='row--'] {
+      @extend %fixed-width-container--common-properties;
+    }
+  }
+
+  .p-navigation__dropdown-container {
+    display: none;
+
+    .p-navigation__item--dropdown-toggle.is-active & {
+      display: block;
     }
   }
 
@@ -749,13 +835,19 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
   $sliding-nav-animation-settings: map-get($animation-duration, brisk) ease;
 
-  .p-navigation--sliding.has-menu-open {
+  .p-navigation--sliding.has-menu-open,
+  .p-navigation--reduced.has-menu-open {
+    box-shadow: $colors--theme--background-overlay 0px 0px 0px 100vh;
     height: 100vh;
     overflow-y: hidden;
+    position: fixed;
+    width: 100vw;
 
     @media (min-width: $breakpoint-navigation-threshold) {
       height: auto;
       overflow-y: visible;
+      position: relative;
+      width: auto;
     }
 
     .p-navigation__banner .p-navigation__items {
@@ -768,7 +860,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
     .p-navigation__nav {
       display: block;
-      height: 100vh;
+      height: calc(100vh - $navigation-height);
       overflow-x: hidden;
 
       .p-navigation__items {
@@ -792,14 +884,20 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   }
 
   /* stylelint-disable max-nesting-depth -- allow deep nesting for sliding navigation */
-  .p-navigation--sliding .p-navigation__dropdown {
+  .p-navigation--sliding .p-navigation__dropdown,
+  .p-navigation--reduced .p-navigation__dropdown {
     display: block;
-    height: 100vh;
+    height: calc(100vh - $navigation-height);
     left: 100vw;
     position: absolute;
     top: 0;
     transition: transform $sliding-nav-animation-settings;
 
+    // set background of child elements to properly cover parent dropdown levels when scrolling
+    & > * {
+      background: $colors--theme--background-default;
+    }
+
     @media (min-width: $breakpoint-navigation-threshold) {
       display: none;
       height: auto;
@@ -808,8 +906,9 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       top: unset;
     }
 
+    // overlay to create fade out effect on parent level
     &::before {
-      box-shadow: -100vw 15px 0 15px black;
+      box-shadow: -100vw 0 0 0 $colors--light-theme--background-overlay;
       content: '';
       height: 100%;
       opacity: 0;
@@ -822,10 +921,14 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       }
     }
 
+    &[aria-hidden='true'] {
+      overflow: hidden; // prevent scrolling when dropdown is off screen
+    }
+
     &[aria-hidden='false'],
     &:not([aria-hidden]) {
       &::before {
-        @include vf-themed-property(opacity, 0.33, 0.75);
+        opacity: 1;
       }
 
       display: block;
@@ -847,7 +950,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
   }
 
-  .p-navigation--sliding .p-navigation__items {
+  .p-navigation--sliding .p-navigation__items,
+  .p-navigation--reduced .p-navigation__items {
     transition: transform $sliding-nav-animation-settings;
 
     &.is-active {
@@ -878,7 +982,32 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   }
   /* stylelint-enable max-nesting-depth */
 
-  .p-navigation--sliding {
+  .p-navigation--sliding,
+  .p-navigation--reduced {
+    // FIXME
+    // We want to add some additional spacing on the bottom of the sliding dropdowns
+    // so that the last item is not directly at the bottom of the screen when scrolling,
+    // but because of the way it's currently implemented, the only way to achieve this
+    // is to add padding to the last item in the dropdown.
+    // This is a temporary solution until we can find a better way to implement this, but
+    // it may require bigger restructuring of the sliding navigation.
+
+    // top (1st) level navigation dropdown
+    .p-navigation__nav .p-navigation__items,
+    // 2nd level navigation dropdown (that has separate mobile and desktop versions)
+    .p-navigation__dropdown-content--sliding,
+    // further nested levels
+    // (because of some weird style combination we have to select last child instead of adding padding on dropdown container itself)
+    .p-navigation__dropdown > :last-child {
+      // should be enough to make some space at the bottom
+      // and workaround the issues of 100vh not taking address toolbar into account
+      padding-bottom: 3rem;
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        padding-bottom: 0;
+      }
+    }
+
     // Default positioning for nested dropdown buttons. Overridden by subsequent styles.
     .p-navigation__item--dropdown-toggle {
       position: initial;

package/scss/_patterns_switch.scss

@@ -13,7 +13,7 @@ $knob-size: $sp-unit * 2;
     position: absolute;
 
     &:checked + .p-switch__slider::before {
-      border: $input-border-thickness solid $color-link;
+      border: $input-border-thickness solid $colors--theme--link-default;
       left: 50%;
     }
 
@@ -22,22 +22,22 @@ $knob-size: $sp-unit * 2;
     }
 
     &:checked + .p-switch__slider {
-      background: $color-link;
+      background: $colors--theme--link-default;
     }
 
     &:focus {
       outline: none;
 
       + .p-switch__slider {
-        outline: $bar-thickness solid $color-focus;
+        outline: $bar-thickness solid $colors--theme--focus;
       }
     }
   }
 
   .p-switch__slider {
-    background: $color-mid-light;
+    background: $colors--theme--background-neutral-default;
     border-radius: $knob-size;
-    box-shadow: inset 0 2px 5px 0 transparentize($color-dark, 0.8);
+    box-shadow: inset 0 2px 5px 0 transparentize($color-x-dark, 0.8);
     display: inline-block;
     height: $knob-size;
     margin: 0;
@@ -48,8 +48,8 @@ $knob-size: $sp-unit * 2;
       @extend %vf-has-box-shadow;
       @include vf-transition($duration: slow);
 
-      background: $color-x-light;
-      border: $input-border-thickness solid $color-mid-dark;
+      background: $colors--theme--background-default;
+      border: $input-border-thickness solid $colors--theme--background-neutral-default;
       border-radius: 50%;
       content: '';
       height: $knob-size;

package/scss/_settings_colors.scss

@@ -29,18 +29,19 @@ $disabled-element-opacity: 0.33;
 
 $shadow-opacity: 0.2;
 
-// Link colors
+// Link and focus colors
 $color-link: #06c !default;
 $color-link-visited: #7d42b8 !default;
 $color-focus: #2e96ff !default;
 
 $color-link-dark: #69c !default;
 $color-link-visited-dark: #a679d2 !default;
+$color-focus-dark: #9cf !default;
 
 // Focus modifications to meet AA 3:1 contrast ratio against
-// button background for positive/negative buttons
+// button background for positive buttons
 $color-focus-positive: #003008 !default;
-$color-focus-negative: #3b0006 !default;
+$color-focus-positive-dark: #9cf !default;
 
 // Button background color changes
 $input-background-opacity-amount: 0.04;
@@ -88,9 +89,11 @@ $states: (
 // --text-disabled   - dimmed version of default text color, to be used on disabled controls
 // --text-muted      - muted version of default text color, to be used on elements with less prominence
 //
-// Link colors:
+// Link and focus colors:
 // --link-default    - default link color
 // --link-visited    - visited link color
+// --focus           - focus highlight/outline color
+// --positive-focus  - focus highlight/outline color for positive buttons
 //
 // Background colors:
 // --background           - default background color
@@ -111,6 +114,8 @@ $colors--light-theme--text-inactive: rgba($color-x-dark, $inactive-text-opacity-
 
 $colors--light-theme--link-default: $color-link !default;
 $colors--light-theme--link-visited: $color-link-visited !default;
+$colors--light-theme--focus: $color-focus !default;
+$colors--light-theme--positive-focus: $color-focus-positive !default;
 
 $colors--light-theme--background-default: #fff !default;
 $colors--light-theme--background-alt: #f7f7f7 !default;
@@ -170,6 +175,8 @@ $colors--dark-theme--text-inactive: rgba($colors--dark-theme--text-default, $ina
 
 $colors--dark-theme--link-default: $color-link-dark !default;
 $colors--dark-theme--link-visited: $color-link-visited-dark !default;
+$colors--dark-theme--focus: $color-focus-dark !default;
+$colors--dark-theme--positive-focus: $color-focus-positive-dark !default;
 
 $colors--dark-theme--background-default: #262626 !default;
 $colors--dark-theme--background-alt: #202020 !default;
@@ -236,6 +243,8 @@ $colors--theme--text-inactive: var(--vf-color-text-inactive);
 
 $colors--theme--link-default: var(--vf-color-link-default);
 $colors--theme--link-visited: var(--vf-color-link-visited);
+$colors--theme--focus: var(--vf-color-focus);
+$colors--theme--positive-focus: var(--vf-color-positive-focus);
 
 $colors--theme--background-default: var(--vf-color-background-default);
 $colors--theme--background-alt: var(--vf-color-background-alt);
@@ -290,6 +299,8 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
 
   --vf-color-link-default: #{$colors--light-theme--link-default};
   --vf-color-link-visited: #{$colors--light-theme--link-visited};
+  --vf-color-focus: #{$colors--light-theme--focus};
+  --vf-color-positive-focus: #{$colors--light-theme--positive-focus};
 
   --vf-color-background-default: #{$colors--light-theme--background-default};
   --vf-color-background-alt: #{$colors--light-theme--background-alt};
@@ -344,6 +355,8 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
 
   --vf-color-link-default: #{$colors--dark-theme--link-default};
   --vf-color-link-visited: #{$colors--dark-theme--link-visited};
+  --vf-color-focus: #{$colors--dark-theme--focus};
+  --vf-color-positive-focus: #{$colors--dark-theme--positive-focus};
 
   --vf-color-background-default: #{$colors--dark-theme--background-default};
   --vf-color-background-alt: #{$colors--dark-theme--background-alt};
@@ -396,7 +409,7 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
 
   // SCSS variables need to be interpolated to work in CSS custom properties
   --vf-color-background-default: #{$color-paper};
-  --vf-color-background-alt: #{$color-x-light};
+  --vf-color-background-alt: #{#ebebeb};
 
   --vf-color-background-inputs: #{$colors--paper-theme--background-inputs};
   --vf-color-background-active: #{$colors--paper-theme--background-active};

package/scss/_settings_spacing.scss

@@ -18,6 +18,7 @@ $font-sizes: (
   h3-mobile: 1.5,
   h4: 1.5,
   h4-mobile: 1.5,
+  default: 1,
   small: 0.875,
   x-small: 0.75,
 ) !default;