@ons/design-system 70.0.7 → 70.0.9

package/scss/utilities/_visibility.scss

@@ -1,45 +1,45 @@
 .ons-u-hidden {
-  display: none !important;
-  visibility: hidden;
+    display: none !important;
+    visibility: hidden;
 }
 
 @include bp-suffix('ons-u-vh', $create-between-breakpoints: true) {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  user-select: none;
-  width: 1px;
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    user-select: none;
+    width: 1px;
 }
 
 .ons-u-visuallyhidden.ons-u-focusable:active,
 .ons-u-vh.ons-u-focusable:active,
 .ons-u-visuallyhidden.ons-u-focusable:focus,
 .ons-u-vh.ons-u-focusable:focus {
-  clip: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  position: static;
-  width: auto;
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
 }
 
 .ons-u-invisible {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .ons-u-ir {
-  background-color: transparent;
-  border: 0;
-  overflow: hidden;
+    background-color: transparent;
+    border: 0;
+    overflow: hidden;
 }
 
 .ons-u-ir::before {
-  content: '';
-  display: block;
-  height: 150%;
-  width: 0;
+    content: '';
+    display: block;
+    height: 150%;
+    width: 0;
 }

package/scss/vars/_colors.scss

@@ -4,133 +4,133 @@
 // =============================================================================
 
 :root {
-  // Grey palette
-  --ons-color-black: #222;
-  --ons-color-grey-100: #414042;
-  --ons-color-grey-75: #707071;
-  --ons-color-grey-35: #bcbcbd;
-  --ons-color-grey-25: #d5d5d6;
-  --ons-color-grey-15: #e2e2e3;
-  --ons-color-grey-5: #f5f5f6;
-  --ons-color-white: #fff;
+    // Grey palette
+    --ons-color-black: #222;
+    --ons-color-grey-100: #414042;
+    --ons-color-grey-75: #707071;
+    --ons-color-grey-35: #bcbcbd;
+    --ons-color-grey-25: #d5d5d6;
+    --ons-color-grey-15: #e2e2e3;
+    --ons-color-grey-5: #f5f5f6;
+    --ons-color-white: #fff;
 
-  // Primary brand palette
-  --ons-color-night-blue: #003c57; // ONS logo primary
-  --ons-color-spring-green: #a8bd3a; // ONS logo accent
-  --ons-color-ocean-blue: #206095;
-  --ons-color-sky-blue: #27a0cc;
-  --ons-color-aqua-teal: #00a3a6;
+    // Primary brand palette
+    --ons-color-night-blue: #003c57; // ONS logo primary
+    --ons-color-spring-green: #a8bd3a; // ONS logo accent
+    --ons-color-ocean-blue: #206095;
+    --ons-color-sky-blue: #27a0cc;
+    --ons-color-aqua-teal: #00a3a6;
 
-  // Supporting palette
-  --ons-color-leaf-green: #0f8243;
-  --ons-color-ruby-red: #d0021b;
-  --ons-color-jaffa-orange: #fa6401;
-  --ons-color-sun-yellow: #fbc900;
-  --ons-color-neon-yellow: #f0f762;
+    // Supporting palette
+    --ons-color-leaf-green: #0f8243;
+    --ons-color-ruby-red: #d0021b;
+    --ons-color-jaffa-orange: #fa6401;
+    --ons-color-sun-yellow: #fbc900;
+    --ons-color-neon-yellow: #f0f762;
 
-  // Core colour adjustments - tints
-  --ons-color-ocean-blue-tint: #e9eff4;
-  --ons-color-ocean-blue-vibrant: #1f8fd8;
-  --ons-color-spring-green-tint: #c3c5b8;
-  --ons-color-leaf-green-tint: #e7f3ec;
-  --ons-color-leaf-green-vibrant: #10ca64;
-  --ons-color-leaf-green-dark-10: #073d20;
-  --ons-color-leaf-green-dark-5: #0c6b37;
-  --ons-color-ruby-red-tint: #fae6e8;
-  --ons-color-ruby-red-vibrant: #fd112d;
-  --ons-color-jaffa-orange-tint: #fff0e6;
-  --ons-color-jaffa-orange-vibrant: #ff7b24;
-  --ons-color-sun-yellow-dark: #e2b500;
+    // Core colour adjustments - tints
+    --ons-color-ocean-blue-tint: #e9eff4;
+    --ons-color-ocean-blue-vibrant: #1f8fd8;
+    --ons-color-spring-green-tint: #c3c5b8;
+    --ons-color-leaf-green-tint: #e7f3ec;
+    --ons-color-leaf-green-vibrant: #10ca64;
+    --ons-color-leaf-green-dark-10: #073d20;
+    --ons-color-leaf-green-dark-5: #0c6b37;
+    --ons-color-ruby-red-tint: #fae6e8;
+    --ons-color-ruby-red-vibrant: #fd112d;
+    --ons-color-jaffa-orange-tint: #fff0e6;
+    --ons-color-jaffa-orange-vibrant: #ff7b24;
+    --ons-color-sun-yellow-dark: #e2b500;
 
-  // Theme branding
-  --ons-color-branded: var(--ons-color-ocean-blue);
-  --ons-color-branded-text: var(--ons-color-ocean-blue);
-  --ons-color-branded-tint: var(--ons-color-ocean-blue-tint);
-  --ons-color-branded-secondary: var(--ons-color-night-blue);
-  --ons-color-branded-tertiary: var(--ons-color-aqua-teal);
-  --ons-color-branded-supporting: var(--ons-color-spring-green);
-  --ons-color-branded-supporting-tint: var(--ons-color-branded-supporting);
+    // Theme branding
+    --ons-color-branded: var(--ons-color-ocean-blue);
+    --ons-color-branded-text: var(--ons-color-ocean-blue);
+    --ons-color-branded-tint: var(--ons-color-ocean-blue-tint);
+    --ons-color-branded-secondary: var(--ons-color-night-blue);
+    --ons-color-branded-tertiary: var(--ons-color-aqua-teal);
+    --ons-color-branded-supporting: var(--ons-color-spring-green);
+    --ons-color-branded-supporting-tint: var(--ons-color-branded-supporting);
 
-  // =============================================================================
-  // Assignment
-  // =============================================================================
+    // =============================================================================
+    // Assignment
+    // =============================================================================
 
-  // Header
-  --ons-color-header: var(--ons-color-branded);
-  --ons-color-header-neutral: var(--ons-color-white);
-  --ons-color-header-masthead: var(--ons-color-white);
-  --ons-color-header-masthead-internal: var(--ons-color-branded-secondary);
-  --ons-color-header-masthead-neutral: var(--ons-color-black);
-  --ons-color-header-title: var(--ons-color-text);
-  --ons-color-header-navigation-links: var(--ons-color-text);
-  --ons-color-service-links: var(--ons-color-white);
+    // Header
+    --ons-color-header: var(--ons-color-branded);
+    --ons-color-header-neutral: var(--ons-color-grey-75);
+    --ons-color-header-masthead: var(--ons-color-white);
+    --ons-color-header-masthead-internal: var(--ons-color-branded-secondary);
+    --ons-color-header-masthead-neutral: var(--ons-color-black);
+    --ons-color-header-title: var(--ons-color-text);
+    --ons-color-header-navigation-links: var(--ons-color-text);
+    --ons-color-service-links: var(--ons-color-white);
 
-  // Banners, page
-  --ons-color-cta-bg: var(--ons-color-branded-tint);
-  --ons-color-banner-bg: var(--ons-color-grey-5);
-  --ons-color-banner-bg-dark: var(--ons-color-grey-15);
-  --ons-color-page-light: var(--ons-color-white);
-  --ons-color-banner-browser-bg: var(--ons-color-black);
-  --ons-color-hero-bg: var(--ons-color-branded-tint);
-  --ons-color-hero-bg-dark: var(--ons-color-branded);
+    // Banners, page
+    --ons-color-cta-bg: var(--ons-color-branded-tint);
+    --ons-color-banner-bg: var(--ons-color-grey-5);
+    --ons-color-banner-bg-dark: var(--ons-color-grey-15);
+    --ons-color-page-light: var(--ons-color-white);
+    --ons-color-banner-browser-bg: var(--ons-color-black);
+    --ons-color-hero-bg: var(--ons-color-branded-tint);
+    --ons-color-hero-bg-dark: var(--ons-color-branded);
 
-  // Typography
-  --ons-color-text: var(--ons-color-black);
-  --ons-color-text-light: var(--ons-color-grey-75);
-  --ons-color-text-inverse: var(--ons-color-white);
-  --ons-color-text-banner: var(--ons-color-black);
-  --ons-color-text-link: var(--ons-color-ocean-blue);
-  --ons-color-text-link-hover: var(--ons-color-night-blue);
-  --ons-color-text-link-active: var(--ons-color-night-blue);
-  --ons-color-text-link-focus: var(--ons-color-black);
-  --ons-color-text-inverse-link: var(--ons-color-white);
-  --ons-color-text-inverse-link-hover: var(--ons-color-grey-5);
-  --ons-color-text-banner-link: var(--ons-color-grey-100);
-  --ons-color-text-banner-link-hover: var(--ons-color-black);
-  --ons-color-text-metadata: var(--ons-color-black);
+    // Typography
+    --ons-color-text: var(--ons-color-black);
+    --ons-color-text-light: var(--ons-color-grey-75);
+    --ons-color-text-inverse: var(--ons-color-white);
+    --ons-color-text-banner: var(--ons-color-black);
+    --ons-color-text-link: var(--ons-color-ocean-blue);
+    --ons-color-text-link-hover: var(--ons-color-night-blue);
+    --ons-color-text-link-active: var(--ons-color-night-blue);
+    --ons-color-text-link-focus: var(--ons-color-black);
+    --ons-color-text-inverse-link: var(--ons-color-white);
+    --ons-color-text-inverse-link-hover: var(--ons-color-grey-5);
+    --ons-color-text-banner-link: var(--ons-color-grey-100);
+    --ons-color-text-banner-link-hover: var(--ons-color-black);
+    --ons-color-text-metadata: var(--ons-color-black);
 
-  // Foundations
-  --ons-color-focus: var(--ons-color-sun-yellow);
-  --ons-color-focus-dark: var(--ons-color-sun-yellow-dark);
-  --ons-color-highlight: var(--ons-color-neon-yellow);
+    // Foundations
+    --ons-color-focus: var(--ons-color-sun-yellow);
+    --ons-color-focus-dark: var(--ons-color-sun-yellow-dark);
+    --ons-color-highlight: var(--ons-color-neon-yellow);
 
-  // Borders
-  --ons-color-borders: var(--ons-color-grey-75);
-  --ons-color-borders-indent: var(--ons-color-grey-35);
-  --ons-color-borders-light: var(--ons-color-grey-35);
-  --ons-color-borders-document-image: var(--ons-color-grey-15);
-  --ons-color-borders-document-image-focus: var(--ons-color-black);
+    // Borders
+    --ons-color-borders: var(--ons-color-grey-75);
+    --ons-color-borders-indent: var(--ons-color-grey-35);
+    --ons-color-borders-light: var(--ons-color-grey-35);
+    --ons-color-borders-document-image: var(--ons-color-grey-15);
+    --ons-color-borders-document-image-focus: var(--ons-color-black);
 
-  // Placeholders
-  --ons-color-text-placeholder: var(--ons-color-grey-75);
-  --ons-color-image-placeholder: var(--ons-color-grey-15);
+    // Placeholders
+    --ons-color-text-placeholder: var(--ons-color-grey-75);
+    --ons-color-image-placeholder: var(--ons-color-grey-15);
 
-  // Form elements
-  --ons-color-button: var(--ons-color-leaf-green);
-  --ons-color-button-secondary: var(--ons-color-grey-15);
-  --ons-color-button-shadow: var(--ons-color-leaf-green-dark-10);
-  --ons-color-button-hover: var(--ons-color-leaf-green-dark-5);
-  --ons-color-button-secondary-shadow: var(--ons-color-grey-75);
-  --ons-color-button-secondary-hover: var(--ons-color-grey-25);
-  --ons-color-input-border: var(--ons-color-black);
-  --ons-color-input-bg: var(--ons-color-white);
+    // Form elements
+    --ons-color-button: var(--ons-color-leaf-green);
+    --ons-color-button-secondary: var(--ons-color-grey-15);
+    --ons-color-button-shadow: var(--ons-color-leaf-green-dark-10);
+    --ons-color-button-hover: var(--ons-color-leaf-green-dark-5);
+    --ons-color-button-secondary-shadow: var(--ons-color-grey-75);
+    --ons-color-button-secondary-hover: var(--ons-color-grey-25);
+    --ons-color-input-border: var(--ons-color-black);
+    --ons-color-input-bg: var(--ons-color-white);
 
-  // // Panels and status
-  --ons-color-info: var(--ons-color-ocean-blue);
-  --ons-color-info-tint: var(--ons-color-ocean-blue-tint);
-  --ons-color-info-vibrant: var(--ons-color-ocean-blue-vibrant);
-  --ons-color-success: var(--ons-color-leaf-green);
-  --ons-color-success-tint: var(--ons-color-leaf-green-tint);
-  --ons-color-success-vibrant: var(--ons-color-leaf-green-vibrant);
-  --ons-color-errors: var(--ons-color-ruby-red);
-  --ons-color-errors-tint: var(--ons-color-ruby-red-tint);
-  --ons-color-errors-vibrant: var(--ons-color-ruby-red-vibrant);
-  --ons-color-pending: var(--ons-color-jaffa-orange);
-  --ons-color-pending-tint: var(--ons-color-jaffa-orange-tint);
-  --ons-color-pending-vibrant: var(--ons-color-jaffa-orange-vibrant);
-  --ons-color-dead: var(--ons-color-grey-75);
-  --ons-color-instruction: var(--ons-color-jaffa-orange);
-  --ons-color-instruction-tint: var(--ons-color-jaffa-orange-tint);
-  --ons-color-text-disabled: var(--ons-color-grey-35);
-  --ons-color-border-disabled: var(--ons-color-grey-35);
+    // Panels and status
+    --ons-color-info: var(--ons-color-ocean-blue);
+    --ons-color-info-tint: var(--ons-color-ocean-blue-tint);
+    --ons-color-info-vibrant: var(--ons-color-ocean-blue-vibrant);
+    --ons-color-success: var(--ons-color-leaf-green);
+    --ons-color-success-tint: var(--ons-color-leaf-green-tint);
+    --ons-color-success-vibrant: var(--ons-color-leaf-green-vibrant);
+    --ons-color-errors: var(--ons-color-ruby-red);
+    --ons-color-errors-tint: var(--ons-color-ruby-red-tint);
+    --ons-color-errors-vibrant: var(--ons-color-ruby-red-vibrant);
+    --ons-color-pending: var(--ons-color-jaffa-orange);
+    --ons-color-pending-tint: var(--ons-color-jaffa-orange-tint);
+    --ons-color-pending-vibrant: var(--ons-color-jaffa-orange-vibrant);
+    --ons-color-dead: var(--ons-color-grey-75);
+    --ons-color-instruction: var(--ons-color-jaffa-orange);
+    --ons-color-instruction-tint: var(--ons-color-jaffa-orange-tint);
+    --ons-color-text-disabled: var(--ons-color-grey-35);
+    --ons-color-border-disabled: var(--ons-color-grey-35);
 }

package/scss/vars/_forms.scss

@@ -16,35 +16,35 @@ $char-space-width: 0.029rem;
 $nbsp-width: 0.256rem;
 
 @mixin input-width($class-name, $char-width: $char-max-width) {
-  @each $width in $input-widths {
-    .#{str-replace($class-name, '{x}', $width)} {
-      max-width: input-width-calc($width, $char-width);
-      width: 100%;
+    @each $width in $input-widths {
+        .#{str-replace($class-name, '{x}', $width)} {
+            max-width: input-width-calc($width, $char-width);
+            width: 100%;
 
-      .ons-field__group & {
-        width: input-width-calc($width, $char-width);
-      }
+            .ons-field__group & {
+                width: input-width-calc($width, $char-width);
+            }
 
-      @if $width <= 10 {
-        .ons-input-type & {
-          width: input-width-calc($width, $char-width);
+            @if $width <= 10 {
+                .ons-input-type & {
+                    width: input-width-calc($width, $char-width);
+                }
+            }
         }
-      }
     }
-  }
 }
 
 @function input-width-calc($chars: 1, $char-width: $char-max-width, $spaces: 0, $num-chars: 0) {
-  // Space between characters is 0.029rem wide
-  // Extra 2 pixels are to prevent clipping when the cursor is visible (2px is needed for iOS)
+    // Space between characters is 0.029rem wide
+    // Extra 2 pixels are to prevent clipping when the cursor is visible (2px is needed for iOS)
 
-  $padding-width: $input-padding-horizontal * 2;
-  $chars-width: $char-width * $chars;
-  $num-chars-width: $num-max-width * $num-chars;
-  $chars-space-width: $char-space-width * ($chars + $num-chars - 1);
-  $spaces-width: $spaces * $nbsp-width;
+    $padding-width: $input-padding-horizontal * 2;
+    $chars-width: $char-width * $chars;
+    $num-chars-width: $num-max-width * $num-chars;
+    $chars-space-width: $char-space-width * ($chars + $num-chars - 1);
+    $spaces-width: $spaces * $nbsp-width;
 
-  @return calc(
-    #{$padding-width + $chars-width + $num-chars-width + $chars-space-width + $spaces-width} + #{($input-border-width * 2) + 2px}
-  );
+    @return calc(
+        #{$padding-width + $chars-width + $num-chars-width + $chars-space-width + $spaces-width} + #{($input-border-width * 2) + 2px}
+    );
 }

package/scss/vars/_grid.scss

@@ -1,17 +1,19 @@
+@use 'sass:map';
+
 $grid-bp: (
-  xxs: 300px,
-  xs: 400px,
-  s: 500px,
-  m: 740px,
-  l: 980px,
-  xl: 1300px,
-  xxl: 1600px
+    xxs: 300px,
+    xs: 400px,
+    s: 500px,
+    m: 740px,
+    l: 980px,
+    xl: 1300px,
+    xxl: 1600px,
 ) !default;
 
 $grid-max-width: 57.445rem !default;
-$grid-max-1280: 71.111111rem !default;
+$grid-max-1280: 71.1111rem !default;
 $grid-cols: 12 !default;
 $grid-cols-mobile: 4 !default;
 $grid-gutters: 1rem !default;
-$grid-bp-fixed: map-get($grid-bp, m) !default;
+$grid-bp-fixed: map.get($grid-bp, m) !default;
 $grid-baseline: 16px;

package/scss/vars/_typography.scss

@@ -10,58 +10,58 @@ $font-weight-bold: 700;
 $base: 18px;
 
 $type-matrix: (
-  ons-u-fs-xxxl: (
-    small: 32px,
-    large: 48px,
-    weight: $font-weight-bold,
-    line-height: 1.3
-  ),
-  ons-u-fs-xxl: (
-    small: 28px,
-    large: 36px,
-    weight: $font-weight-bold,
-    line-height: 1.4
-  ),
-  ons-u-fs-xl: (
-    small: 26px,
-    large: 30px,
-    weight: $font-weight-bold,
-    line-height: 1.4
-  ),
-  ons-u-fs-l: (
-    small: 24px,
-    large: 26px,
-    weight: $font-weight-bold,
-    line-height: 1.4
-  ),
-  ons-u-fs-m: (
-    small: 20px,
-    large: 22px,
-    weight: $font-weight-bold,
-    line-height: 1.4
-  ),
-  ons-u-fs-r--b: (
-    small: $base,
-    large: $base,
-    weight: $font-weight-bold,
-    line-height: 1.4
-  ),
-  ons-u-fs-r: (
-    small: $base,
-    large: $base,
-    weight: $font-weight-regular,
-    line-height: 1.4
-  ),
-  ons-u-fs-s--b: (
-    small: 14px,
-    large: 14px,
-    weight: $font-weight-bold,
-    line-height: 1.4
-  ),
-  ons-u-fs-s: (
-    small: 14px,
-    large: 14px,
-    weight: $font-weight-regular,
-    line-height: 1.4
-  )
+    ons-u-fs-xxxl: (
+        small: 32px,
+        large: 48px,
+        weight: $font-weight-bold,
+        line-height: 1.3,
+    ),
+    ons-u-fs-xxl: (
+        small: 28px,
+        large: 36px,
+        weight: $font-weight-bold,
+        line-height: 1.4,
+    ),
+    ons-u-fs-xl: (
+        small: 26px,
+        large: 30px,
+        weight: $font-weight-bold,
+        line-height: 1.4,
+    ),
+    ons-u-fs-l: (
+        small: 24px,
+        large: 26px,
+        weight: $font-weight-bold,
+        line-height: 1.4,
+    ),
+    ons-u-fs-m: (
+        small: 20px,
+        large: 22px,
+        weight: $font-weight-bold,
+        line-height: 1.4,
+    ),
+    ons-u-fs-r--b: (
+        small: $base,
+        large: $base,
+        weight: $font-weight-bold,
+        line-height: 1.4,
+    ),
+    ons-u-fs-r: (
+        small: $base,
+        large: $base,
+        weight: $font-weight-regular,
+        line-height: 1.4,
+    ),
+    ons-u-fs-s--b: (
+        small: 14px,
+        large: 14px,
+        weight: $font-weight-bold,
+        line-height: 1.4,
+    ),
+    ons-u-fs-s: (
+        small: 14px,
+        large: 14px,
+        weight: $font-weight-regular,
+        line-height: 1.4,
+    ),
 );