@ons/design-system 57.0.1 → 58.0.0

package/scss/base/_global.scss

@@ -25,21 +25,21 @@ img {
 
 hr {
   border: 0;
-  border-top: 1px solid $color-borders;
+  border-top: 1px solid var(--ons-color-borders);
   margin: 2rem 0 0;
 }
 
 %a-focus {
-  background-color: $color-focus;
-  box-shadow: 0 -2px $color-focus, 0 4px $color-text-link-focus;
-  color: $color-text-link-focus;
+  background-color: var(--ons-color-focus);
+  box-shadow: 0 -2px var(--ons-color-focus), 0 4px var(--ons-color-text-link-focus);
+  color: var(--ons-color-text-link-focus);
   outline: 3px solid transparent;
   outline-offset: 1px;
   text-decoration: none;
 }
 
 a {
-  color: $color-text-link;
+  color: var(--ons-color-text-link);
   text-decoration-thickness: 1px;
   text-underline-position: under;
   &:not(.ons-u-fs-r--b):hover {
@@ -57,8 +57,8 @@ a {
     }
   }
   &:hover {
-    color: $color-text-link-hover;
-    text-decoration: underline solid $color-text-link-hover 2px;
+    color: var(--ons-color-text-link-hover);
+    text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
   }
   &:focus:not(.ons-btn--link):not(.ons-btn--ghost):not(.ons-js-clear-btn):not(.ons-download__thumbnail--link):not(.ons-tab--row):not(.ons-skip-link) {
     @extend %a-focus;

package/scss/base/_typography.scss

@@ -6,7 +6,7 @@ html {
 }
 
 body {
-  color: $color-text;
+  color: var(--ons-color-text);
   font-family: $font-sans;
 }
 
@@ -23,7 +23,7 @@ h6 {
   line-height: 1.2;
   margin: 0 0 1rem;
   em {
-    background-color: $color-highlight;
+    background-color: var(--ons-color-highlight);
   }
 }
 

package/scss/census.scss

@@ -1,2 +1,2 @@
-@import './settings/census';
 @import './main';
+@import './settings/census';

package/scss/helpers/_functions.scss

@@ -16,14 +16,6 @@
   @return $num / ($num * 0 + 1);
 }
 
-@function tint($color, $percentage) {
-  @return mix(white, $color, $percentage);
-}
-
-@function shade($color, $percentage) {
-  @return mix(black, $color, $percentage);
-}
-
 @function map-set($map, $key, $value) {
   $new: (
     $key: $value,

package/scss/ids.scss

@@ -1,2 +1,2 @@
-@import './settings/ids';
 @import './main';
+@import './settings/ids';

package/scss/overrides/hcm.scss

@@ -35,7 +35,7 @@
 
   // Select - Overrides custom background image icon
   .ons-input--select {
-    background: $color-input-bg
+    background: var(--ons-color-input-bg)
       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ons-svg-icon' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1.5.3 6 5.4 10.5.3c.2-.2.4-.2.6 0l.7.7c.1.2.1.4 0 .5L6.3 7.7c-.2.2-.4.2-.6 0L.2 1.6C.1 1.4.1 1.2.2 1L.9.3c.2-.1.4-.1.6 0z'/%3E%3C/svg%3E")
       no-repeat center right 10px;
     background-size: 1rem;

package/scss/overrides/rtl.scss

@@ -44,7 +44,7 @@
     border-right: 8px solid transparent;
 
     &--info {
-      border-color: $color-info;
+      border-color: var(--ons-color-info);
     }
 
     &--warn,

package/scss/patternlib.scss

@@ -1,4 +1,5 @@
-@import 'vars/index';
+@import 'vars/grid';
+@import 'vars/vars';
 @import 'helpers/index';
 @import '../views/partials/example/example';
 @import '../foundations/layout/page-template/examples/base-page-template-block-areas/block-areas';
@@ -48,8 +49,8 @@
     }
 
     code:not(.ons-patternlib-example__code) {
-      background: $color-grey-5;
-      color: $color-ruby-red;
+      background: var(--ons-color-grey-5);
+      color: var(--ons-color-ruby-red);
       padding: 0.05rem 0.25rem;
     }
 
@@ -61,7 +62,7 @@
     }
 
     th {
-      border-bottom: 2px solid $color-grey-100;
+      border-bottom: 2px solid var(--ons-color-grey-100);
       padding: 0.5rem 0 0.5rem 1rem;
       text-align: left;
       vertical-align: top;
@@ -78,7 +79,7 @@
 
     td {
       background: transparent;
-      border-bottom: 1px solid $color-borders;
+      border-bottom: 1px solid var(--ons-color-borders);
     }
 
     tr:last-child td {
@@ -130,7 +131,7 @@
 }
 
 .ons-patternlib-hero {
-  background: $color-grey-5;
+  background: var(--ons-color-grey-5);
   padding: 2rem 0 1rem;
   width: 100%;
 
@@ -140,15 +141,15 @@
 }
 
 .ons-pl-grid-col {
-  background: $color-grey-5;
+  background: var(--ons-color-grey-5);
   font-size: 0.8rem;
   margin: 0 0 1rem;
   padding: 1rem;
 }
 
 .ons-pl-experimental-tag {
-  background: $color-info;
-  color: $color-text-inverse;
+  background: var(--ons-color-info);
+  color: var(--ons-color-text-inverse);
   display: inline-block;
   font-size: 0.7rem;
   font-weight: 700;

package/scss/print.scss

@@ -1,4 +1,6 @@
-$color-black: #222;
+html {
+  --ons-color-black: #222;
+}
 
 .ons-btn,
 .ons-summary__actions,
@@ -20,7 +22,7 @@ a::after {
   }
 
   &__title {
-    color: $color-black;
+    color: var(--ons-color-black);
   }
 
   &-nav {
@@ -33,12 +35,12 @@ a::after {
     }
     &__link,
     &__link:hover {
-      color: $color-black;
+      color: var(--ons-color-black);
     }
   }
 
   & &__svg-logo {
-    fill: $color-black;
+    fill: var(--ons-color-black);
   }
 }
 
@@ -49,7 +51,7 @@ a::after {
     }
 
     &__title {
-      color: $color-black;
+      color: var(--ons-color-black);
       margin-bottom: 1rem;
       margin-left: -1.5rem;
       text-decoration: none;

package/scss/settings/_census.scss

@@ -1,31 +1,32 @@
 // Census brand
-$color-white: #fff;
-$color-black: #222;
-$color-white: #fff;
-$color-branded: #902082;
-$color-branded-tint: rgba(144, 32, 130, 0.1); // 10% of brand colour
-$color-branded-secondary: #df0667;
-$color-branded-tertiary: #3c388e;
-$color-branded-supporting: #00a3a6;
-$color-branded-supporting-tint: rgba(#00a3a6, 0.2);
-$color-census-gradient: linear-gradient(to bottom left, #902082 0%, #3c388e 100%);
+:root {
+  --ons-color-black: #222;
+  --ons-color-white: #fff;
+  --ons-color-branded: #902082;
+  --ons-color-branded-tint: rgba(144, 32, 130, 0.1); // 10% of brand colour
+  --ons-color-branded-secondary: #df0667;
+  --ons-color-branded-tertiary: #3c388e;
+  --ons-color-branded-supporting: #00a3a6;
+  --ons-color-branded-supporting-tint: rgba(#00a3a6, 0.2);
+  --ons-color-census-gradient: linear-gradient(to bottom left, #902082 0%, #3c388e 100%);
 
-// Assignment
-$color-tag-bg: $color-branded-supporting-tint;
-$color-text-link-hover: $color-black;
+  // Assignment
+  --ons-color-tag-bg: var(--ons-color-branded-supporting-tint);
+  --ons-color-text-link-hover: var(--ons-color-black);
+}
 
 // Overrides
 
 // Header logo
 .ons-header__title-logo {
   .ons-svg-logo {
-    fill: $color-white;
+    fill: var(--ons-color-white);
   }
 }
 
 // Hero
 .ons-hero--census {
-  background-image: linear-gradient(46deg, $color-branded-tertiary 0%, $color-branded 100%);
+  background-image: linear-gradient(46deg, var(--ons-color-branded-tertiary) 0%, var(--ons-color-branded) 100%);
   display: flex;
   margin-bottom: 2px;
   margin-top: 2px;
@@ -44,7 +45,7 @@ $color-text-link-hover: $color-black;
     position: absolute;
   }
   .ons-hero__circle-image {
-    background-color: $color-white;
+    background-color: var(--ons-color-white);
     border-radius: 50%;
     height: 300px;
     right: -4px;
@@ -59,7 +60,11 @@ $color-text-link-hover: $color-black;
     }
   }
   .ons-hero__circle-gradient {
-    background-image: linear-gradient(-45deg, $color-branded 0%, $color-branded 20%, $color-branded-tertiary 60%, #005489 90%);
+    background-image: linear-gradient(-45deg,
+    var(--ons-color-branded) 0%,
+    var(--ons-color-branded) 20%,
+    var(--ons-color-branded-tertiary) 60%,
+    #005489 90%);
     border-radius: 50%;
     display: block;
     height: 182px;
@@ -69,7 +74,7 @@ $color-text-link-hover: $color-black;
     z-index: 3;
   }
   .ons-hero__circle {
-    background-color: $color-white;
+    background-color: var(--ons-color-white);
     border-radius: 50%;
     display: block;
     height: 990px;
@@ -80,7 +85,7 @@ $color-text-link-hover: $color-black;
     z-index: 1;
   }
   .ons-hero__circle-lined {
-    fill: $color-white;
+    fill: var(--ons-color-white);
     height: 133px;
     opacity: 0.4;
     right: -24px;

package/scss/settings/_ids.scss

@@ -1,11 +1,15 @@
-// IDS brand
-$color-black: #222;
-$color-branded: #4d076b;
-$color-branded-text: $color-black;
-$color-branded-tint: rgba(98, 69, 149, 0.1); // 10% of brand colour
-$color-branded-secondary: #e06c0f;
-// Assignment
-$color-text-link-hover: $color-black;
+:root {
+  --ons-color-black: #222;
+  --ons-color-branded-text: var(--ons-color-black);
+
+  // IDS brand
+  --ons-color-branded: #4d076b;
+  --ons-color-branded-tint: rgba(98, 69, 149, 0.1); // 10% of brand colour
+  --ons-color-branded-secondary: #e06c0f;
+
+  // Assignment
+  --ons-color-text-link-hover: var(--ons-color-black);
+}
 
 // Overrides
 // Hero

package/scss/utilities/_border.scss

@@ -7,6 +7,6 @@ $border: (
 
 @each $abbr, $dec in $border {
   @include bp-suffix(ons-u-#{$abbr}, $create-between-breakpoints: true) {
-    #{$dec}: 1px solid $color-borders !important;
+    #{$dec}: 1px solid var(--ons-color-borders) !important;
   }
 }

package/scss/utilities/_colors.scss

@@ -1,17 +1,8 @@
-@each $label, $color in (blue: $color-night-blue, green: $color-leaf-green) {
+@each $label, $color in (blue: blue, green: green) {
   .ons-u-#{'' + $label} {
     color: $color;
   }
   .ons-u-bg-#{'' + $label} {
     background-color: $color;
   }
-
-  @for $tint from 1 through 10 {
-    .ons-u-#{'' + $label}-#{$tint*10} {
-      color: tint($color, $tint * 10);
-    }
-    .ons-u-bg-#{'' + $label}-#{$tint*10} {
-      background-color: tint($color, $tint * 10);
-    }
-  }
 }

package/scss/utilities/_grid.scss

@@ -112,13 +112,13 @@
 @include bp-suffix(ons-grid--bordered, false) {
   margin-left: 0;
   .ons-grid__col {
-    border-bottom: 1px solid $color-borders;
-    border-top: 1px solid $color-borders;
+    border-bottom: 1px solid var(--ons-color-borders);
+    border-top: 1px solid var(--ons-color-borders);
     flex: 1 1 auto;
     padding-bottom: 1rem;
     padding-top: 1rem;
     &:first-of-type {
-      border-right: 1px solid $color-borders;
+      border-right: 1px solid var(--ons-color-borders);
       padding-left: 0;
     }
   }

package/scss/utilities/_typography.scss

@@ -67,7 +67,7 @@ h4 {
 }
 
 .ons-u-lighter {
-  color: $color-text-light;
+  color: var(--ons-color-text-light);
 }
 
 .ons-u-f-mono {

package/scss/vars/_colors.scss

@@ -1,116 +1,129 @@
-@import '../helpers/functions';
-
 // =============================================================================
 // ONS Brand guidelines for Colour: https://www.notion.so/Colours-9cd14589e0764e33a3b3c5a6762f37ae
 // Tints: If you are using tints of a colour, use either 70%, 40% or 10%. Tints are created by adding white (30%, 60% or 90%), rather than using transparency.
 // =============================================================================
 
-// Grey palette
-$color-black: #222;
-$color-grey-100: #414042;
-$color-grey-75: #707071;
-$color-grey-35: #bcbcbd;
-$color-grey-15: #e2e2e3;
-$color-grey-5: #f5f5f6;
-$color-white: #fff;
+: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;
 
-// Primary brand palette
-$color-night-blue: #003c57; // ONS logo primary
-$color-spring-green: #a8bd3a; // ONS logo accent
-$color-ocean-blue: #206095;
-$color-sky-blue: #27a0cc;
-$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
-$color-leaf-green: #0f8243;
-$color-ruby-red: #d0021b;
-$color-jaffa-orange: #fa6401;
-$color-sun-yellow: #fbc900;
-$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;
 
-// Census 2021
-$color-indigo-blue: #3c388e;
-$color-plum-purple: #902082;
-$color-flamingo-pink: #df0667;
+  // 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
-$color-branded: $color-ocean-blue !default;
-$color-branded-text: $color-ocean-blue !default;
-$color-branded-tint: tint($color-branded, 90%) !default;
-$color-branded-secondary: $color-night-blue !default;
-$color-branded-secondary-tint: tint($color-branded-secondary, 90%) !default;
-$color-branded-tertiary: $color-aqua-teal !default;
-$color-branded-tertiary-tint: tint($color-branded-tertiary, 90%) !default;
-$color-branded-supporting: $color-spring-green !default;
-$color-branded-supporting-tint: tint($color-branded-supporting, 90%) !default;
+  // 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
+  // =============================================================================
 
-// Headers, footers, banners, page
-$color-header: $color-branded !default;
-$color-header-light: $color-white !default;
-$color-header-masthead: $color-white !default;
-$color-header-masthead-dark: $color-black !default;
-$color-header-masthead-internal: $color-branded-secondary !default;
-$color-cta-bg: $color-branded-tint !default;
-$color-banner-bg: $color-grey-5 !default;
-$color-banner-bg-dark: $color-grey-15 !default;
-$color-page-light: $color-white !default;
-$color-banner-browser-bg: $color-black !default;
+  // Headers, footers, banners, page
+  --ons-color-header: var(--ons-color-branded);
+  --ons-color-header-light: var(--ons-color-white);
+  --ons-color-header-masthead: var(--ons-color-white);
+  --ons-color-header-masthead-dark: var(--ons-color-black);
+  --ons-color-header-masthead-internal: var(--ons-color-branded-secondary);
+  --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);
 
-// Typography
-$color-text: $color-black !default;
-$color-text-light: $color-grey-75 !default;
-$color-text-inverse: $color-white !default;
-$color-text-banner: $color-black !default;
-$color-text-link: $color-ocean-blue !default;
-$color-text-link-hover: $color-night-blue !default;
-$color-text-link-active: $color-night-blue !default;
-$color-text-link-focus: $color-black !default;
-$color-text-inverse-link: $color-white !default;
-$color-text-inverse-link-hover: $color-grey-5 !default;
-$color-text-banner-link: $color-grey-100 !default;
-$color-text-banner-link-hover: $color-black !default;
-$color-text-metadata: $color-black !default;
+  // 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
-$color-focus: $color-sun-yellow !default;
-$color-highlight: $color-neon-yellow !default;
+  // 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
-$color-borders: $color-grey-75 !default;
-$color-borders-indent: $color-grey-35 !default;
-$color-borders-list: $color-grey-35 !default;
-$color-borders-document-image: $color-grey-15 !default;
-$color-borders-document-image-focus: $color-black !default;
+  // Borders
+  --ons-color-borders: var(--ons-color-grey-75);
+  --ons-color-borders-indent: var(--ons-color-grey-35);
+  --ons-color-borders-list: 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
-$color-placeholder: $color-grey-15 !default;
+  // Placeholders
+  --ons-color-placeholder: var(--ons-color-grey-15);
 
-// Form elements
-$color-button: $color-leaf-green !default;
-$color-button-secondary: $color-grey-15 !default;
-$color-input-border: $color-black !default;
-$color-input-bg: $color-white !default;
+  // 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
-$color-info: $color-ocean-blue !default;
-$color-info-tint: tint($color-info, 90) !default;
-$color-info-vibrant: scale-color($color-info, $lightness: 20%, $saturation: 30%) !default;
-$color-success: $color-leaf-green !default;
-$color-success-tint: tint($color-success, 90) !default;
-$color-success-vibrant: scale-color($color-success, $lightness: 20%, $saturation: 30%) !default;
-$color-errors: $color-ruby-red !default;
-$color-errors-tint: tint($color-errors, 90) !default;
-$color-errors-vibrant: scale-color($color-errors, $lightness: 20%, $saturation: 30%) !default;
-$color-pending: $color-jaffa-orange !default;
-$color-pending-tint: tint($color-pending, 90) !default;
-$color-pending-vibrant: scale-color($color-pending, $lightness: 20%, $saturation: 30%) !default;
-$color-dead: $color-grey-75 !default;
-$color-instruction: $color-jaffa-orange !default;
-$color-instruction-tint: tint($color-instruction, 90) !default;
-$color-tag-bg: tint($color-leaf-green, 90) !default;
-$color-text-disabled: $color-grey-35;
-$color-border-disabled: $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-tag-bg: var(--ons-color-leaf-green-tint);
+  --ons-color-text-disabled: var(--ons-color-grey-35);
+  --ons-color-border-disabled: var(--ons-color-grey-35);
+}