@ons/design-system 57.0.1 → 58.0.0

package/components/autosuggest/_autosuggest.scss

@@ -11,7 +11,7 @@
   }
 
   &__results {
-    border: 1px solid $color-input-border;
+    border: 1px solid var(--ons-color-input-border);
     border-radius: $input-radius;
     display: none;
     margin: 0.5rem 0 0;
@@ -21,18 +21,18 @@
   }
 
   &__group {
-    color: $color-text-link;
+    color: var(--ons-color-text-link);
     text-decoration: underline;
   }
 
   &__results-title {
-    background: $color-grey-15;
-    border-bottom: 1px solid $color-input-border;
+    background: var(--ons-color-grey-15);
+    border-bottom: 1px solid var(--ons-color-input-border);
     padding: 0.25rem 0.5rem;
   }
 
   &__listbox {
-    background: $color-white;
+    background: var(--ons-color-white);
     list-style: none;
     margin: 0;
     padding: 0;
@@ -48,34 +48,34 @@
     padding: $input-padding-horizontal;
 
     &:not(:last-child) {
-      border-bottom: 1px solid $color-input-border;
+      border-bottom: 1px solid var(--ons-color-input-border);
     }
 
     &:not(&--no-results):not(&--more-results):hover,
     &--focused:not(&--no-results) {
-      background: $color-text-link-hover;
-      border-color: $color-text-link-hover;
-      color: $color-white;
+      background: var(--ons-color-text-link-hover);
+      border-color: var(--ons-color-text-link-hover);
+      color: var(--ons-color-white);
 
       .ons-autosuggest-input__group,
       .ons-autosuggest-input__category {
-        color: $color-white;
+        color: var(--ons-color-white);
       }
     }
 
     &:active:not(&--no-results):not(&--more-results) {
-      background: $color-focus;
-      color: $color-text-link-focus;
+      background: var(--ons-color-focus);
+      color: var(--ons-color-text-link-focus);
 
       .ons-autosuggest-input__group,
       .ons-autosuggest-input__category {
-        color: $color-text-link-focus;
+        color: var(--ons-color-text-link-focus);
       }
     }
 
     &--no-results,
     &--more-results {
-      background: $color-grey-15;
+      background: var(--ons-color-grey-15);
       cursor: not-allowed;
       padding: 0.25rem 0.5rem;
     }
@@ -87,7 +87,7 @@
     padding-left: 0.5rem;
 
     &:not(:last-child) {
-      border-bottom: 1px solid $color-input-border;
+      border-bottom: 1px solid var(--ons-color-input-border);
     }
   }
 
@@ -128,7 +128,7 @@
   &--header {
     .ons-autosuggest-input__results {
       border: none;
-      box-shadow: 0 0 5px 0 rgba($color-black, 0.6);
+      box-shadow: 0 0 5px 0 rgba(var(--ons-color-black), 0.6);
       left: 0;
       position: absolute;
       z-index: 10;

package/components/breadcrumbs/_breadcrumbs.scss

@@ -74,11 +74,11 @@ $breadcrumb-chevron-height: 0.65rem;
   }
 
   &__link {
-    color: $color-text;
+    color: var(--ons-color-text);
     text-decoration: underline;
 
     &:hover {
-      color: $color-text;
+      color: var(--ons-color-text);
     }
   }
 }

package/components/browser-banner/_browser-banner.scss

@@ -1,12 +1,12 @@
 .ons-browser-banner {
-  background-color: $color-banner-browser-bg;
+  background-color: var(--ons-color-banner-browser-bg);
   display: none; // Hides unsupported browser banner unless targeted below
   padding: 0.8rem 0;
 
   &__content {
     @extend .ons-u-fs-s;
 
-    color: $color-text-inverse;
+    color: var(--ons-color-text-inverse);
     margin: 0;
   }
 
@@ -15,11 +15,11 @@
   }
 
   &__link {
-    color: $color-text-inverse-link;
+    color: var(--ons-color-text-inverse-link);
 
     &:hover {
-      color: $color-text-inverse-link-hover;
-      text-decoration: underline solid $color-text-inverse-link-hover 2px;
+      color: var(--ons-color-text-inverse-link-hover);
+      text-decoration: underline solid var(--ons-color-text-inverse-link-hover) 2px;
     }
   }
 }

package/components/button/_button.scss

@@ -39,10 +39,10 @@ $button-shadow-size: 3px;
   }
 
   &__inner {
-    background: $color-button;
+    background: var(--ons-color-button);
     border-radius: $input-radius;
-    box-shadow: 0 ems($button-shadow-size) 0 darken($color-button, 15%);
-    color: $color-text-inverse;
+    box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-shadow);
+    color: var(--ons-color-text-inverse);
     display: inherit;
     padding: 0.7em 1em 0.8em;
     // Required for Google Tag Manager
@@ -50,7 +50,7 @@ $button-shadow-size: 3px;
     position: relative;
 
     .ons-svg-icon {
-      fill: $color-text-inverse;
+      fill: var(--ons-color-text-inverse);
       height: 18px;
       margin-top: -$button-shadow-size;
       vertical-align: middle;
@@ -72,29 +72,29 @@ $button-shadow-size: 3px;
   }
 
   &:focus &__inner {
-    background: $color-focus;
-    box-shadow: 0 ems($button-shadow-size) 0 $color-text-link-focus;
-    color: $color-text-link-focus;
+    background: var(--ons-color-focus);
+    box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-text-link-focus);
+    color: var(--ons-color-text-link-focus);
 
     .ons-svg-icon {
-      fill: $color-text-link-focus;
+      fill: var(--ons-color-text-link-focus);
     }
   }
 
   &:focus:hover:not(:active) &__inner {
-    background: darken($color-focus, 5%);
+    background: var(--ons-color-focus-dark);
   }
 
   // When down
   &:active &,
   &:active:focus & {
     &__inner {
-      background: $color-button;
+      background: var(--ons-color-button);
       box-shadow: none;
-      color: $color-text-inverse;
+      color: var(--ons-color-text-inverse);
 
       .ons-svg-icon {
-        fill: $color-text-inverse;
+        fill: var(--ons-color-text-inverse);
       }
     }
   }
@@ -129,7 +129,7 @@ $button-shadow-size: 3px;
   // Secondary button style
   &--secondary & {
     &__inner {
-      box-shadow: 0 ems($button-shadow-size) 0 darken($color-button-secondary, 50%);
+      box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-secondary-shadow);
     }
   }
 
@@ -137,12 +137,12 @@ $button-shadow-size: 3px;
   &--secondary:active &,
   &--secondary:active:focus & {
     &__inner {
-      background: $color-button-secondary;
-      color: $color-text;
+      background: var(--ons-color-button-secondary);
+      color: var(--ons-color-text);
       font-weight: normal;
 
       .ons-svg-icon {
-        fill: $color-text;
+        fill: var(--ons-color-text);
       }
     }
   }
@@ -150,13 +150,13 @@ $button-shadow-size: 3px;
   // When hovered
   &:hover & {
     &__inner {
-      background: darken($color-button, 5%);
+      background: var(--ons-color-button-hover);
     }
   }
 
   &--secondary:hover & {
     &__inner {
-      background: darken($color-button-secondary, 5%);
+      background: var(--ons-color-button-secondary-hover);
     }
   }
 
@@ -171,7 +171,7 @@ $button-shadow-size: 3px;
 
     &__inner {
       .ons-svg-icon {
-        fill: $color-text;
+        fill: var(--ons-color-text);
       }
     }
   }
@@ -186,20 +186,20 @@ $button-shadow-size: 3px;
       border: none;
       border-radius: 0;
       box-shadow: none;
-      color: $color-text-link;
+      color: var(--ons-color-text-link);
       font-weight: normal;
       padding: 0;
       .ons-svg-icon {
-        fill: $color-text-link;
+        fill: var(--ons-color-text-link);
       }
     }
   }
 
   &--text-link-inverse & {
     &__inner {
-      color: $color-text-inverse-link;
+      color: var(--ons-color-text-inverse-link);
       .ons-svg-icon {
-        fill: $color-text-inverse-link;
+        fill: var(--ons-color-text-inverse-link);
       }
     }
   }
@@ -209,9 +209,9 @@ $button-shadow-size: 3px;
   &--text-link.active & {
     &__inner {
       background: none;
-      color: $color-text-link-hover;
+      color: var(--ons-color-text-link-hover);
       .ons-svg-icon {
-        fill: $color-text-link-hover;
+        fill: var(--ons-color-text-link-hover);
       }
     }
   }
@@ -220,16 +220,16 @@ $button-shadow-size: 3px;
   &--text-link-inverse:active &,
   &--text-link-inverse.active & {
     &__inner {
-      color: $color-text-inverse-link-hover;
+      color: var(--ons-color-text-inverse-link-hover);
       .ons-svg-icon {
-        fill: $color-text-inverse-link-hover;
+        fill: var(--ons-color-text-inverse-link-hover);
       }
     }
   }
 
   &--text-link:focus:hover & {
     &__inner {
-      color: $color-black;
+      color: var(--ons-color-black);
     }
   }
 
@@ -237,11 +237,11 @@ $button-shadow-size: 3px;
   &--text-link.active:focus &,
   &--text-link:active:focus & {
     &__inner {
-      background-color: $color-focus;
-      box-shadow: 0 -2px $color-focus, 0 4px $color-text-link-focus !important;
-      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) !important;
+      color: var(--ons-color-text-link-focus);
       .ons-svg-icon {
-        fill: $color-text-link-focus;
+        fill: var(--ons-color-text-link-focus);
       }
     }
   }
@@ -251,9 +251,9 @@ $button-shadow-size: 3px;
       background: transparent;
       border: 2px solid rgba(255, 255, 255, 0.6);
       box-shadow: none;
-      color: $color-text-inverse;
+      color: var(--ons-color-text-inverse);
       .ons-svg-icon {
-        fill: $color-text-inverse;
+        fill: var(--ons-color-text-inverse);
       }
     }
   }
@@ -261,11 +261,11 @@ $button-shadow-size: 3px;
   &--ghost-dark & {
     &__inner {
       background: transparent;
-      border: 2px solid $color-black;
+      border: 2px solid var(--ons-color-black);
       box-shadow: none;
-      color: $color-text;
+      color: var(--ons-color-text);
       .ons-svg-icon {
-        fill: $color-text;
+        fill: var(--ons-color-text);
       }
     }
   }
@@ -296,9 +296,9 @@ $button-shadow-size: 3px;
   &--ghost-dark:focus:hover &,
   &--dropdown:focus:hover & {
     &__inner {
-      color: $color-text;
+      color: var(--ons-color-text);
       .ons-svg-icon {
-        fill: $color-text;
+        fill: var(--ons-color-text);
       }
     }
   }
@@ -306,7 +306,7 @@ $button-shadow-size: 3px;
   &--ghost:hover & {
     &__inner {
       background: rgba(0, 0, 0, 0.1);
-      border-color: $color-white;
+      border-color: var(--ons-color-white);
     }
   }
 
@@ -316,9 +316,9 @@ $button-shadow-size: 3px;
     &__inner {
       background: rgba(0, 0, 0, 0.2);
       border-color: rgba(255, 255, 255, 0.6);
-      color: $color-text-inverse;
+      color: var(--ons-color-text-inverse);
       .ons-svg-icon {
-        fill: $color-text-inverse;
+        fill: var(--ons-color-text-inverse);
       }
     }
   }
@@ -328,11 +328,11 @@ $button-shadow-size: 3px;
   &--ghost-dark:active:focus &,
   &--ghost-dark.active & {
     &__inner {
-      background: $color-black;
-      border-color: $color-black;
-      color: $color-white;
+      background: var(--ons-color-black);
+      border-color: var(--ons-color-black);
+      color: var(--ons-color-white);
       .ons-svg-icon {
-        fill: $color-white;
+        fill: var(--ons-color-white);
       }
     }
   }
@@ -341,10 +341,10 @@ $button-shadow-size: 3px;
   &--ghost-dark.active:focus &,
   &--dropdown.active:focus & {
     &__inner {
-      background: $color-focus;
-      color: $color-text-link-focus;
+      background: var(--ons-color-focus);
+      color: var(--ons-color-text-link-focus);
       .ons-svg-icon {
-        fill: $color-text-link-focus;
+        fill: var(--ons-color-text-link-focus);
       }
     }
   }
@@ -353,10 +353,10 @@ $button-shadow-size: 3px;
   &--ghost-dark:focus &,
   &--dropdown:focus & {
     &__inner {
-      border-color: $color-text-link-focus;
-      box-shadow: 0 0 0 1px $color-text-link-focus;
+      border-color: var(--ons-color-text-link-focus);
+      box-shadow: 0 0 0 1px var(--ons-color-text-link-focus);
       .ons-svg-icon {
-        fill: $color-black;
+        fill: var(--ons-color-black);
       }
     }
   }
@@ -394,7 +394,7 @@ $button-shadow-size: 3px;
 
   &--dropdown:focus & {
     &__inner {
-      box-shadow: inset 0 -4px 0 0 $color-text-link-focus;
+      box-shadow: inset 0 -4px 0 0 var(--ons-color-text-link-focus);
     }
   }
 
@@ -438,11 +438,11 @@ $button-shadow-size: 3px;
     width: 100%;
 
     &__inner {
-      background: $color-branded-tint;
+      background: var(--ons-color-branded-tint);
       border: none;
       border-radius: 0;
       box-shadow: none;
-      color: $color-branded-text;
+      color: var(--ons-color-branded-text);
       display: block;
       font-size: 1rem;
       font-weight: normal;
@@ -450,7 +450,7 @@ $button-shadow-size: 3px;
       text-align: left;
 
       .ons-svg-icon {
-        fill: $color-branded-text;
+        fill: var(--ons-color-branded-text);
         float: right;
         margin-top: 3px;
       }
@@ -459,10 +459,10 @@ $button-shadow-size: 3px;
 
   &--dropdown:hover & {
     &__inner {
-      background: $color-branded-secondary;
-      color: $color-white;
+      background: var(--ons-color-branded-secondary);
+      color: var(--ons-color-white);
       .ons-svg-icon {
-        fill: $color-white;
+        fill: var(--ons-color-white);
       }
     }
   }
@@ -470,10 +470,10 @@ $button-shadow-size: 3px;
   &--dropdown:active &,
   &--dropdown:active:focus & {
     &__inner {
-      background: $color-branded-secondary;
-      color: $color-white;
+      background: var(--ons-color-branded-secondary);
+      color: var(--ons-color-white);
       .ons-svg-icon {
-        fill: $color-white;
+        fill: var(--ons-color-white);
       }
     }
   }

package/components/call-to-action/_call-to-action.scss

@@ -1,5 +1,5 @@
 .ons-call-to-action {
-  background: $color-cta-bg;
+  background: var(--ons-color-cta-bg);
   padding: 0.85rem 0;
 
   &__heading {

package/components/checkboxes/_checkbox.scss

@@ -9,8 +9,8 @@ $checkbox-padding: 11px;
 
   &__input {
     appearance: none;
-    background-color: $color-input-bg;
-    border: 2px solid $color-input-border;
+    background-color: var(--ons-color-input-bg);
+    border: 2px solid var(--ons-color-input-border);
     border-radius: 0.2rem;
     box-sizing: border-box;
     cursor: pointer;
@@ -23,9 +23,9 @@ $checkbox-padding: 11px;
 
     // Check icon
     &::after {
-      border: solid $color-input-border;
+      border: solid var(--ons-color-input-border);
       border-radius: 1px;
-      border-top-color: $color-input-bg;
+      border-top-color: var(--ons-color-input-bg);
       border-width: 0 0 3px 3px;
       box-sizing: border-box;
       content: '';
@@ -48,27 +48,27 @@ $checkbox-padding: 11px;
     }
 
     &:disabled {
-      border: 2px solid $color-border-disabled;
+      border: 2px solid var(--ons-color-border-disabled);
       cursor: not-allowed;
     }
 
     &:disabled:checked::after {
-      border-color: $color-border-disabled;
+      border-color: var(--ons-color-border-disabled);
     }
 
     &:disabled + .ons-checkbox__label,
     &:disabled:checked + .ons-checkbox__label {
-      color: $color-border-disabled;
+      color: var(--ons-color-border-disabled);
       cursor: not-allowed;
 
       &::before {
-        border: 1px solid $color-border-disabled;
+        border: 1px solid var(--ons-color-border-disabled);
       }
     }
 
     &:disabled:checked + .ons-checkbox__label {
       &::before {
-        box-shadow: 0 0 0 1px $color-border-disabled;
+        box-shadow: 0 0 0 1px var(--ons-color-border-disabled);
       }
     }
   }
@@ -153,8 +153,8 @@ $checkbox-padding: 11px;
     }
 
     &::before {
-      background: $color-white;
-      border: 1px solid $color-input-border;
+      background: var(--ons-color-white);
+      border: 1px solid var(--ons-color-input-border);
       border-radius: 3px;
       bottom: 0;
       content: '';
@@ -176,21 +176,21 @@ $checkbox-padding: 11px;
   }
 
   &__other {
-    border-left: 4px solid $color-borders-indent;
+    border-left: 4px solid var(--ons-color-borders-indent);
     display: block;
     margin: 0 1rem 0.5rem 1.1rem;
     padding: 0 $checkbox-padding $checkbox-padding $checkbox-padding * 2 - 1;
   }
 
   &__input:checked + &__label::before {
-    background: $color-grey-5;
-    box-shadow: 0 0 0 1px $color-input-border;
+    background: var(--ons-color-grey-5);
+    box-shadow: 0 0 0 1px var(--ons-color-input-border);
     outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
   }
 
   .ons-panel--error .ons-radio__input:checked ~ &__other > .ons-input--text:required:not(:focus) {
-    border: 1px solid $color-ruby-red;
-    outline: 1px solid $color-ruby-red;
+    border: 1px solid var(--ons-color-ruby-red);
+    outline: 1px solid var(--ons-color-ruby-red);
     outline-offset: -2px;
   }
 

package/components/collapsible/_collapsible.scss

@@ -2,7 +2,7 @@ $collapsible-caret-width: 1.5rem;
 
 .ons-collapsible {
   &__heading {
-    color: $color-text-link;
+    color: var(--ons-color-text-link);
     cursor: pointer;
     display: inline-block;
     outline: none;
@@ -23,24 +23,24 @@ $collapsible-caret-width: 1.5rem;
         padding-left: $collapsible-caret-width;
       }
       .ons-collapsible__icon .ons-svg-icon {
-        fill: $color-text-link-focus;
+        fill: var(--ons-color-text-link-focus);
       }
     }
 
     &:hover:not(:focus) {
-      color: $color-text-link-hover;
+      color: var(--ons-color-text-link-hover);
       .ons-collapsible__icon {
-        fill: $color-text-link-hover;
+        fill: var(--ons-color-text-link-hover);
       }
       .ons-collapsible__title {
-        text-decoration: underline solid $color-text-link-hover 2px;
+        text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
       }
     }
   }
 
   &__icon {
     display: inline-block;
-    fill: $color-text-link;
+    fill: var(--ons-color-text-link);
     height: $collapsible-caret-width;
     left: -0.15rem;
     position: absolute;
@@ -58,7 +58,7 @@ $collapsible-caret-width: 1.5rem;
   }
 
   &__content {
-    border-left: 4px solid $color-borders-indent;
+    border-left: 4px solid var(--ons-color-borders-indent);
     display: block;
     margin: 1rem 0 0;
     padding: 0 0 0 1.3em;
@@ -74,7 +74,7 @@ $collapsible-caret-width: 1.5rem;
 
   &--accordion & {
     &__heading {
-      border-top: 1px solid $color-borders;
+      border-top: 1px solid var(--ons-color-borders);
       margin: 0;
       padding-bottom: 0.9rem;
       padding-top: 1rem;

package/components/content-pagination/_content-pagination.scss

@@ -19,7 +19,7 @@
     &:hover {
       text-decoration: none;
       .ons-content-pagination__link-label {
-        text-decoration: underline solid $color-text-link-hover 2px;
+        text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
       }
     }
 

package/components/cookies-banner/_cookies-banner.scss

@@ -1,14 +1,14 @@
 .ons-cookies-banner {
-  background: $color-banner-bg;
+  background: var(--ons-color-banner-bg);
   display: none;
   padding: 1rem 0 1.5rem;
 
   &__title {
-    color: $color-text;
+    color: var(--ons-color-text);
   }
 
   &__statement {
-    color: $color-text;
+    color: var(--ons-color-text);
     word-break: break-word;
     p {
       margin: 0 0 0.5rem;