@ons/design-system 57.0.1 → 58.0.0

package/components/navigation/_navigation.scss

@@ -1,17 +1,17 @@
 .ons-navigation {
   position: relative;
   &-wrapper {
-    background: $color-header;
+    background: var(--ons-color-header);
     margin-top: -0.03rem;
   }
 
   &--sub {
-    background: $color-branded-tint;
+    background: var(--ons-color-branded-tint);
     padding-top: 0.5rem;
   }
 
   &--sub-mobile {
-    border-bottom: 4px solid $color-branded-tint;
+    border-bottom: 4px solid var(--ons-color-branded-tint);
   }
 
   &-search {
@@ -48,12 +48,12 @@
     display: block;
     margin: 0 0 0.2rem;
     &--active {
-      border-color: $color-white;
+      border-color: var(--ons-color-white);
     }
 
     .ons-navigation--sub-mobile & {
       &--active {
-        border-color: $color-branded;
+        border-color: var(--ons-color-branded);
         li {
           border: 0;
         }
@@ -75,20 +75,20 @@
 
       &--active,
       &:hover {
-        border-color: $color-white;
+        border-color: var(--ons-color-white);
       }
 
       .ons-navigation--sub & {
         &:hover,
         &--active {
-          border-color: $color-branded;
+          border-color: var(--ons-color-branded);
         }
       }
     }
   }
 
   &__link {
-    color: $color-white;
+    color: var(--ons-color-white);
     display: block;
     margin: 0 0.75rem;
     padding: 0.1rem 0;
@@ -101,16 +101,16 @@
 
     &:hover,
     &:focus {
-      color: $color-white;
+      color: var(--ons-color-white);
       text-decoration: none;
     }
 
     .ons-navigation--sub &,
     .ons-navigation--sub-mobile & {
-      color: $color-text-link;
+      color: var(--ons-color-text-link);
       &:hover,
       &:focus {
-        color: $color-text-link-hover;
+        color: var(--ons-color-text-link-hover);
       }
     }
 
@@ -128,14 +128,14 @@
 
   &-wrapper {
     &--neutral {
-      background: $color-header-light;
+      background: var(--ons-color-header-light);
       .ons-navigation__item {
         &--active,
         &:hover {
-          border-color: $color-branded;
+          border-color: var(--ons-color-branded);
         }
         .ons-navigation__link {
-          color: $color-branded-text;
+          color: var(--ons-color-branded-text);
         }
       }
     }

package/components/pagination/_pagination.scss

@@ -43,8 +43,8 @@ $pagination-item-width: 2.5rem;
   }
 
   &__item--current &__link {
-    background: $color-text-link-hover;
-    color: $color-white;
+    background: var(--ons-color-text-link-hover);
+    color: var(--ons-color-white);
     outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show backgrounds
     text-decoration: none;
   }

package/components/panel/_panel.scss

@@ -15,11 +15,11 @@
 }
 
 .ons-branded-warning {
-  background: $color-branded-tertiary;
+  background: var(--ons-color-branded-tertiary);
 }
 
 .ons-announcement {
-  background-color: $color-black;
+  background-color: var(--ons-color-black);
 }
 
 .ons-branded-warning,
@@ -42,12 +42,12 @@
 
   &:focus {
     box-shadow: none;
-    outline: 4px solid $color-focus !important;
+    outline: 4px solid var(--ons-color-focus) !important;
   }
 
   &__header {
     border-radius: 0;
-    color: $color-text-inverse;
+    color: var(--ons-color-text-inverse);
     margin: 0;
     padding: 0.75rem 1rem;
   }
@@ -110,7 +110,7 @@
   }
 
   &__error {
-    color: $color-errors;
+    color: var(--ons-color-errors);
   }
 
   &--warn {
@@ -120,7 +120,7 @@
     padding: 0;
 
     &--footer {
-      background-color: $color-grey-15 !important;
+      background-color: var(--ons-color-grey-15) !important;
       margin-bottom: 0;
       padding: 1rem 0 !important;
     }
@@ -129,13 +129,13 @@
   &--warn-branded,
   &--announcement {
     border: 0 !important;
-    color: $color-white;
+    color: var(--ons-color-white);
     margin-bottom: 0;
     outline: none !important;
     padding: 1rem 0 !important;
     a {
       color: inherit;
-      text-decoration: underline solid $color-white 1px;
+      text-decoration: underline solid var(--ons-color-white) 1px;
     }
     a:hover {
       text-decoration-thickness: 2px;
@@ -144,7 +144,7 @@
 
   &--announcement {
     a:focus {
-      box-shadow: 0 -2px $color-focus, 0 4px $color-text-inverse-link !important; // Override focus style because the black border is not visible on a black background
+      box-shadow: 0 -2px var(--ons-color-focus), 0 4px (--ons-color-text-inverse-link) !important; // Override focus style because the black border is not visible on a black background
     }
   }
 
@@ -177,9 +177,9 @@
       padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
     }
     &__icon {
-      background: $color-black;
+      background: var(--ons-color-black);
       border-radius: 50%;
-      color: $color-white;
+      color: var(--ons-color-white);
       font-size: 1.5rem;
       font-weight: 900;
       line-height: 2rem;
@@ -196,8 +196,8 @@
     }
 
     &__icon {
-      background-color: $color-white;
-      color: $color-black;
+      background-color: var(--ons-color-white);
+      color: var(--ons-color-black);
       display: flex;
       svg {
         margin: auto;
@@ -207,8 +207,8 @@
 
   &--warn-branded & {
     &__icon {
-      background-color: $color-white;
-      color: $color-branded-tertiary;
+      background-color: var(--ons-color-white);
+      color: var(--ons-color-branded-tertiary);
     }
   }
 
@@ -217,7 +217,7 @@
       left: 0;
       padding-left: 1rem;
       .ons-svg-icon {
-        fill: $color-success !important;
+        fill: var(--ons-color-success) !important;
         margin-top: -15% !important;
       }
     }
@@ -249,10 +249,10 @@
   }
 }
 
-@include panel-type(error, $color-errors, $color-errors-tint);
-@include panel-type(success, $color-success, $color-success-tint);
-@include panel-type(info, $color-info, $color-info-tint);
-@include panel-type(branded, $color-branded, $color-branded-tint);
+@include panel-type(error, var(--ons-color-errors), var(--ons-color-errors-tint));
+@include panel-type(success, var(--ons-color-success), var(--ons-color-success-tint));
+@include panel-type(info, var(--ons-color-info), var(--ons-color-info-tint));
+@include panel-type(branded, var(--ons-color-branded), var(--ons-color-branded-tint));
 @include panel-type(warn, transparent, transparent);
-@include panel-type(warn-branded, $color-branded-tertiary, $color-branded-tertiary);
-@include panel-type(announcement, $color-black, $color-black);
+@include panel-type(warn-branded, var(--ons-color-branded-tertiary), var(--ons-color-branded-tertiary));
+@include panel-type(announcement, var(--ons-color-black), var(--ons-color-black));

package/components/phase-banner/_phase-banner.scss

@@ -1,10 +1,10 @@
 .ons-phase-banner {
-  background: $color-grey-5;
+  background: var(--ons-color-grey-5);
   padding: 0.5rem 0;
 
   &__badge {
-    background: $color-black;
-    color: $color-white;
+    background: var(--ons-color-black);
+    color: var(--ons-color-white);
     font-size: 0.85rem;
     line-height: 1em;
     margin: 0 0.5rem 0 0;

package/components/promotional-banner/_promo-banner.scss

@@ -1,6 +1,6 @@
 .ons-promo-banner {
-  background-color: $color-branded;
-  background-image: linear-gradient(46deg, $color-branded-tertiary 0%, $color-branded 100%);
+  background-color: var(--ons-color-branded);
+  background-image: linear-gradient(46deg, var(--ons-color-branded-tertiary) 0%, var(--ons-color-branded) 100%);
   overflow: hidden;
   padding-bottom: 5em;
   padding-top: 3em;
@@ -46,18 +46,18 @@
     li,
     p,
     a {
-      color: $color-white;
+      color: var(--ons-color-white);
     }
 
     a {
       &:hover {
-        text-decoration: underline solid $color-white 2px;
+        text-decoration: underline solid var(--ons-color-white) 2px;
       }
     }
 
     h3 {
       a:hover {
-        text-decoration: underline solid $color-white 3px;
+        text-decoration: underline solid var(--ons-color-white) 3px;
       }
     }
   }

package/components/question/_question.scss

@@ -10,8 +10,8 @@
     }
     mark,
     .ons-instruction {
-      background-color: $color-instruction;
-      color: $color-text-inverse;
+      background-color: var(--ons-color-instruction);
+      color: var(--ons-color-text-inverse);
       margin-right: 0.5rem;
       padding: 0 0.5rem;
     }
@@ -24,8 +24,8 @@
   }
 
   &__instruction {
-    background-color: $color-instruction-tint;
-    border: 5px solid $color-instruction;
+    background-color: var(--ons-color-instruction-tint);
+    border: 5px solid var(--ons-color-instruction);
     display: block;
     font-weight: $font-weight-regular;
     padding: 1rem;

package/components/quote/_quote.scss

@@ -11,14 +11,14 @@
   &__ref {
     @extend .ons-u-fs-s;
 
-    color: $color-text-light;
+    color: var(--ons-color-text-light);
     display: block;
     margin-top: 0.5rem;
     position: relative;
   }
 
   .ons-svg-icon {
-    fill: $color-grey-75 !important;
+    fill: var(--ons-color-grey-75) !important;
     height: 1.85rem;
     left: 0;
     position: absolute;

package/components/radios/_radio.scss

@@ -4,12 +4,12 @@
   &__input {
     @extend .ons-checkbox__input;
 
-    background: $color-grey-5;
+    background: var(--ons-color-grey-5);
     border-radius: 50%;
-    box-shadow: inset 0 0 0 3px $color-input-bg;
+    box-shadow: inset 0 0 0 3px var(--ons-color-input-bg);
 
     &::after {
-      border-color: $color-input-border;
+      border-color: var(--ons-color-input-border);
       border-radius: 50%;
       border-width: 6px;
       height: 0;
@@ -35,7 +35,9 @@
       }
 
       &:focus {
-        box-shadow: inset 0 0 0 3px $color-input-bg, 0 0 0 $input-border-width $color-input-border, 0 0 0 4px $color-focus;
+        box-shadow: inset 0 0 0 3px var(--ons-color-input-bg),
+          0 0 0 $input-border-width var(--ons-color-input-border),
+          0 0 0 4px var(--ons-color-focus);
       }
     }
 

package/components/related-content/_related-content.scss

@@ -1,12 +1,12 @@
 .ons-related-content {
   @extend .ons-u-mt-m;
 
-  border-top: 5px solid $color-branded;
+  border-top: 5px solid var(--ons-color-branded);
   padding-top: 1rem;
 
   &__section {
     & + & {
-      border-top: 1px solid $color-grey-75;
+      border-top: 1px solid var(--ons-color-grey-75);
       margin: 2rem 0 0;
       padding: 2em 0 0;
     }

package/components/relationships/_relationships.scss

@@ -1,7 +1,7 @@
 .ons-relationships {
   &__playback {
-    border-bottom: 1px solid $color-input-border;
-    border-top: 1px solid $color-input-border;
+    border-bottom: 1px solid var(--ons-color-input-border);
+    border-top: 1px solid var(--ons-color-input-border);
     margin: 2rem 0 0;
     padding: 1rem 0;
 

package/components/section-navigation/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsSectionNavigation(params) %}
-  <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %}" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Section menu") }}">
+  <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-label="{{ params.ariaLabel | default("Section menu") }}">
       <ul class="ons-section-nav__list">
         {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
           {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}

package/components/section-navigation/_section-navigation.scss

@@ -1,6 +1,6 @@
 .ons-section-nav {
   &:not(&--vertical) {
-    border-bottom: 1px solid $color-borders;
+    border-bottom: 1px solid var(--ons-color-borders);
   }
 
   &__list {
@@ -12,8 +12,8 @@
   &__link {
     text-decoration: none;
     &: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;
     }
   }
 
@@ -21,12 +21,12 @@
     font-size: 1rem;
     padding: 0;
     &--active {
-      border-left: 4px solid $color-text-link-active;
+      border-left: 4px solid var(--ons-color-text-link-active);
       font-weight: $font-weight-bold;
       margin-left: -18px;
       padding-left: 14px;
       a {
-        color: $color-text-link-active;
+        color: var(--ons-color-text-link-active);
       }
     }
     & & {
@@ -36,7 +36,7 @@
 
   &__sub-items {
     a {
-      color: $color-text-link;
+      color: var(--ons-color-text-link);
       font-weight: $font-weight-regular;
     }
   }
@@ -50,11 +50,11 @@
       text-align: center;
       &--active,
       &:hover {
-        border-color: $color-text-link-active;
+        border-color: var(--ons-color-text-link-active);
         margin: 0 1rem 0 0;
         padding: 0;
         a {
-          color: $color-text-link-active;
+          color: var(--ons-color-text-link-active);
         }
       }
     }

package/components/skip-to-content/_skip.scss

@@ -13,11 +13,11 @@
   width: 1px;
 
   &:focus {
-    background-color: $color-focus;
+    background-color: var(--ons-color-focus);
     box-shadow: 0;
     clip: auto;
     clip-path: none;
-    color: $color-text-link-focus;
+    color: var(--ons-color-text-link-focus);
     height: auto;
     margin: inherit;
     max-height: 20em;
@@ -26,7 +26,7 @@
     overflow: visible;
     padding: 1rem;
     position: static;
-    text-decoration: underline solid $color-text-link-focus 2px;
+    text-decoration: underline solid var(--ons-color-text-link-focus) 2px;
     white-space: inherit;
     width: auto;
   }

package/components/status/_status.scss

@@ -26,18 +26,18 @@
   }
 
   &.ons-status--success::before {
-    @include status-dot($color-success-vibrant);
+    @include status-dot(var(--ons-color-success-vibrant));
   }
   &.ons-status--pending::before {
-    @include status-dot($color-pending-vibrant);
+    @include status-dot(var(--ons-color-pending-vibrant));
   }
   &.ons-status--error::before {
-    @include status-dot($color-errors-vibrant);
+    @include status-dot(var(--ons-color-errors-vibrant));
   }
   &.ons-status--dead::before {
-    @include status-dot($color-dead);
+    @include status-dot(var(--ons-color-dead));
   }
   &.ons-status--info::before {
-    @include status-dot($color-info-vibrant);
+    @include status-dot(var(--ons-color-info-vibrant));
   }
 }

package/components/summary/_summary.scss

@@ -28,7 +28,7 @@ $hub-row-spacing: 1.3rem;
 
     &:not(:last-child),
     &:nth-of-type(1) {
-      border-bottom: 1px solid $color-borders;
+      border-bottom: 1px solid var(--ons-color-borders);
     }
 
     &--total {
@@ -43,8 +43,8 @@ $hub-row-spacing: 1.3rem;
     }
 
     &--error {
-      background: $color-errors-tint;
-      border-left: 8px solid $color-errors;
+      background: var(--ons-color-errors-tint);
+      border-left: 8px solid var(--ons-color-errors);
     }
   }
 
@@ -81,7 +81,7 @@ $hub-row-spacing: 1.3rem;
       position: absolute;
       text-align: center;
       &--check .ons-svg-icon {
-        fill: $color-leaf-green !important;
+        fill: var(--ons-color-leaf-green) !important;
       }
     }
   }
@@ -91,7 +91,7 @@ $hub-row-spacing: 1.3rem;
   }
 
   &__spacer {
-    background: $color-black;
+    background: var(--ons-color-black);
     display: inline-block;
     height: 1rem;
     margin: 0 0.25rem;
@@ -108,7 +108,7 @@ $hub-row-spacing: 1.3rem;
 
   &__item--error & {
     &__row-title--error {
-      color: $color-errors;
+      color: var(--ons-color-errors);
       font-weight: 700;
       padding: $summary-row-spacing $summary-col-spacing;
     }

package/components/table/_table.scss

@@ -5,7 +5,7 @@
   width: 100%;
 
   &__head {
-    border-bottom: 2px solid $color-grey-75;
+    border-bottom: 2px solid var(--ons-color-grey-75);
   }
 
   &__caption {
@@ -17,7 +17,7 @@
   &__cell {
     @include nth-element(1, 0);
 
-    border-bottom: 2px solid $color-grey-75;
+    border-bottom: 2px solid var(--ons-color-grey-75);
     overflow: hidden;
     padding: 0.5rem 0 0.5rem 1rem;
     text-align: left;
@@ -29,11 +29,11 @@
 
   &__cell,
   &__header--row {
-    border-bottom: 1px solid $color-borders;
+    border-bottom: 1px solid var(--ons-color-borders);
   }
 
   &__row--highlight {
-    background: $color-highlight;
+    background: var(--ons-color-highlight);
   }
 
   &:not(.ons-table--responsive) .ons-table__body .ons-table__row:last-child {
@@ -45,7 +45,7 @@
 
   &__foot .ons-table__cell {
     border-bottom: 0;
-    border-top: 1px solid $color-borders;
+    border-top: 1px solid var(--ons-color-borders);
   }
 
   &--compact {
@@ -58,7 +58,7 @@
 
   &--row-hover {
     .ons-table__body .ons-table__row:hover {
-      background: $color-highlight;
+      background: var(--ons-color-highlight);
     }
   }
 
@@ -73,7 +73,7 @@
       }
 
       .ons-table__body .ons-table__row {
-        border-bottom: 2px solid $color-grey-75;
+        border-bottom: 2px solid var(--ons-color-grey-75);
         display: block;
         margin-bottom: 1rem;
       }
@@ -101,7 +101,7 @@
       height: 7px;
     }
     ::-webkit-scrollbar-thumb {
-      background: $color-grey-75;
+      background: var(--ons-color-grey-75);
       border-radius: 20px;
     }
     &--on {
@@ -115,7 +115,7 @@
       overflow-x: scroll;
       width: 100%;
       &:focus {
-        box-shadow: 0 0 0 3px $color-page-light, 0 0 0 5px $color-text-link-focus, 0 0 0 8px $color-focus;
+        box-shadow: 0 0 0 3px var(--ons-color-page-light), 0 0 0 5px var(--ons-color-text-link-focus), 0 0 0 8px var(--ons-color-focus);
         outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
         outline-offset: 1px;
       }
@@ -157,10 +157,10 @@
     [aria-sort='descending'].ons-table__header {
       .ons-svg-icon {
         .ons-topTriangle {
-          fill: $color-grey-35;
+          fill: var(--ons-color-grey-35);
         }
         .ons-bottomTriangle {
-          fill: $color-text;
+          fill: var(--ons-color-text);
         }
       }
       .ons-table__sort-button:focus {
@@ -175,10 +175,10 @@
     [aria-sort='ascending'].ons-table__header {
       .ons-svg-icon {
         .ons-topTriangle {
-          fill: $color-text;
+          fill: var(--ons-color-text);
         }
         .ons-bottomTriangle {
-          fill: $color-grey-35;
+          fill: var(--ons-color-grey-35);
         }
       }
       .ons-table__sort-button:focus {
@@ -195,7 +195,7 @@
         background-color: transparent;
         border: 0;
         box-shadow: none;
-        color: $color-text-link;
+        color: var(--ons-color-text-link);
         display: inline-block;
         font-family: $font-sans;
         font-weight: 700;
@@ -206,13 +206,13 @@
         white-space: nowrap;
 
         &:hover {
-          color: $color-text-link-hover;
+          color: var(--ons-color-text-link-hover);
           cursor: pointer;
-          text-decoration: underline solid $color-text-link-hover 2px;
+          text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
         }
 
         .ons-svg-icon {
-          fill: $color-grey-75;
+          fill: var(--ons-color-grey-75);
           height: 0.8rem;
           padding-bottom: 0.1rem;
           width: 0.8rem;
@@ -221,7 +221,7 @@
         &:focus {
           @extend %a-focus;
           .ons-svg-icon {
-            fill: $color-black;
+            fill: var(--ons-color-black);
           }
         }
       }