@ons/design-system 57.0.0 → 58.0.0

package/components/document-list/document-list.scss

@@ -4,7 +4,7 @@
   margin-bottom: 0;
 
   &__item {
-    border-bottom: 1px solid $color-borders-list;
+    border-bottom: 1px solid var(--ons-color-borders-list);
     margin: 0 0 1.5rem;
     padding: 0 0 1.5rem;
 
@@ -47,7 +47,7 @@
 
   &__item-image--file & {
     &__image-link {
-      border-color: $color-borders-document-image;
+      border-color: var(--ons-color-borders-document-image);
 
       &--placeholder {
         height: 136px;
@@ -62,16 +62,16 @@
     width: 100%;
 
     &:focus {
-      background-color: $color-placeholder !important;
-      border: 2px solid $color-borders-document-image-focus;
+      background-color: var(--ons-color-placeholder) !important;
+      border: 2px solid var(--ons-color-borders-document-image-focus);
       box-shadow: none;
-      outline: 4px solid $color-focus !important;
+      outline: 4px solid var(--ons-color-focus) !important;
       outline-offset: 0;
     }
 
     &--placeholder {
       background-clip: padding-box;
-      background-color: $color-borders-document-image;
+      background-color: var(--ons-color-borders-document-image);
       background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='%23fff' d='M0 19.39c.49-1 1-2 1.55-2.93A31.59 31.59 0 0 1 0 11.72v7.67ZM3 0S0 0 0 3.7v2a34.85 34.85 0 0 0 2.17 9.76A31.2 31.2 0 0 1 8.3 8.3c4.84-4.16 11.36-7 20.21-8.29Zm28.84 2c-10.11 1-17 3.86-22 8.1a29.78 29.78 0 0 0-6.49 8C7.26 25.65 14.66 31.19 27 32h1.21A3.71 3.71 0 0 0 32 27.91V2a.41.41 0 0 1-.16 0Zm-26 21.49a25.94 25.94 0 0 1-3-4.4A48 48 0 0 0 0 25.71V32h20.23a26.41 26.41 0 0 1-14.39-8.49Z'/%3e%3c/svg%3e");
       background-position: center;
       background-repeat: no-repeat;
@@ -87,7 +87,7 @@
   }
 
   &__item-attribute {
-    color: $color-text-metadata;
+    color: var(--ons-color-text-metadata);
     display: inline-block;
     margin: 0 1rem 0 0;
 
@@ -98,8 +98,8 @@
     color: inherit;
 
     &:hover {
-      color: $color-text-metadata;
-      text-decoration: underline solid $color-text-metadata 2px;
+      color: var(--ons-color-text-metadata);
+      text-decoration: underline solid var(--ons-color-text-metadata) 2px;
     }
   }
 
@@ -117,7 +117,7 @@
 .ons-document-list {
   &__item {
     &--featured {
-      background-color: $color-banner-bg;
+      background-color: var(--ons-color-banner-bg);
       border-bottom: none;
       display: block;
       outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background

package/components/download-resources/_download-resources.scss

@@ -1,6 +1,6 @@
 .ons-adv-filter {
   &__gallery {
-    border-top: 1px solid $color-borders-list;
+    border-top: 1px solid var(--ons-color-borders-list);
     margin-left: 0;
     padding-left: 0;
     padding-top: 1.5rem;
@@ -19,7 +19,7 @@
   }
 
   &__selection {
-    color: $color-grey-100;
+    color: var(--ons-color-grey-100);
     margin-bottom: 0.5rem;
   }
 
@@ -48,7 +48,7 @@
   }
 
   &__panel--is-visible {
-    background-color: $color-white;
+    background-color: var(--ons-color-white);
     bottom: 0;
     display: block;
     height: calc(100% - 76px); // Height of action buttons
@@ -62,9 +62,9 @@
   }
 
   &__actions {
-    background-color: $color-white;
+    background-color: var(--ons-color-white);
     bottom: 0;
-    box-shadow: 0 0 5px 0 rgba($color-black, 0.5), 0 -1px 0 0 rgba($color-grey-100, 0.5);
+    box-shadow: 0 0 5px 0 rgba(var(--ons-color-black), 0.5), 0 -1px 0 0 rgba(var(--ons-color-grey-100), 0.5);
     display: flex;
     left: 0;
     padding: 1rem;

package/components/external-link/_external-link.scss

@@ -4,21 +4,21 @@
     white-space: nowrap;
   }
   .ons-svg-icon {
-    fill: $color-grey-100;
+    fill: var(--ons-color-grey-100);
     margin: 0 0 0 0.25rem;
     padding-bottom: 0.1rem;
     visibility: visible;
   }
   &:focus {
     .ons-svg-icon {
-      fill: $color-black;
+      fill: var(--ons-color-black);
     }
   }
   &:hover {
     .ons-svg-icon {
-      fill: $color-text-link-hover;
+      fill: var(--ons-color-text-link-hover);
       .ons-footer & {
-        fill: $color-black;
+        fill: var(--ons-color-black);
       }
     }
   }

package/components/feedback/_feedback.scss

@@ -1,5 +1,5 @@
 .ons-feedback {
-  border: 3px solid $color-branded;
+  border: 3px solid var(--ons-color-branded);
   margin-bottom: 2rem;
   padding: 1rem;
   position: relative;
@@ -8,9 +8,9 @@
   }
   &::before {
     border-bottom: 15px solid transparent;
-    border-left: 15px solid $color-branded;
+    border-left: 15px solid var(--ons-color-branded);
     border-right: 15px solid transparent;
-    border-top: 15px solid $color-branded;
+    border-top: 15px solid var(--ons-color-branded);
     bottom: -30px;
     content: '';
     height: 0;

package/components/field/_field.scss

@@ -2,7 +2,7 @@
   position: relative;
 
   &__other {
-    background-color: $color-grey-5;
+    background-color: var(--ons-color-grey-5);
     clear: both;
     display: none;
     padding: 0 0.5rem 0.5rem;

package/components/find-a-support-centre/_find-a-support-centre.scss

@@ -1,7 +1,7 @@
 .ons-distance {
   @extend .ons-u-fs-r;
 
-  background-color: $color-tag-bg;
+  background-color: var(--ons-color-tag-bg);
   border: 1px solid transparent; // high contrast mode
   display: inline-block;
   padding: 0.3rem 0.5rem;

package/components/footer/_footer.scss

@@ -1,22 +1,22 @@
 .ons-footer {
   a {
-    color: $color-text-banner-link;
+    color: var(--ons-color-text-banner-link);
     text-decoration: underline;
 
     &:hover {
-      color: $color-text-banner-link-hover;
-      text-decoration: underline solid $color-text-banner-link-hover 2px;
+      color: var(--ons-color-text-banner-link-hover);
+      text-decoration: underline solid var(--ons-color-text-banner-link-hover) 2px;
     }
   }
 
   &__button-container {
     background-clip: border-box;
-    background-color: $color-header;
+    background-color: var(--ons-color-header);
     padding: 1rem;
   }
 
   &__warning {
-    background-color: $color-banner-bg-dark;
+    background-color: var(--ons-color-banner-bg-dark);
     outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
   }
 
@@ -32,11 +32,11 @@
 
   .ons-svg-logo,
   .ons-svg-logo__group {
-    fill: $color-black !important;
+    fill: var(--ons-color-black) !important;
   }
 
   &__body {
-    background-color: $color-banner-bg;
+    background-color: var(--ons-color-banner-bg);
     padding: 2rem 0 4rem;
 
     .ons-list__link {

package/components/header/_header.scss

@@ -8,7 +8,7 @@
 
   // Elements
   &__top {
-    background: $color-header-masthead;
+    background: var(--ons-color-header-masthead);
     width: 100%;
   }
   &__grid-top {
@@ -24,12 +24,12 @@
     }
   }
   &__main {
-    background: $color-header;
+    background: var(--ons-color-header);
     padding: 0.56rem 0;
 
     &--border {
-      border-bottom: 3px solid $color-header;
-      border-top: 3px solid $color-header;
+      border-bottom: 3px solid var(--ons-color-header);
+      border-top: 3px solid var(--ons-color-header);
       padding: 0.934rem 0;
     }
   }
@@ -37,7 +37,7 @@
     @extend .ons-u-fs-r--b;
     @extend .ons-u-fs-xl\@xxs;
 
-    color: $color-white;
+    color: var(--ons-color-white);
 
     @include mq(m) {
       margin-bottom: 1rem;
@@ -49,11 +49,11 @@
       text-decoration: none;
       &:focus {
         .ons-header__title {
-          color: $color-text-link-focus;
+          color: var(--ons-color-text-link-focus);
         }
       }
       &:hover {
-        text-decoration: underline solid $color-text-inverse-link 2px;
+        text-decoration: underline solid var(--ons-color-text-inverse-link) 2px;
       }
     }
   }
@@ -61,7 +61,7 @@
     @extend .ons-u-fs-s;
     @extend .ons-u-fs-r\@s;
 
-    color: $color-white;
+    color: var(--ons-color-white);
     margin: 0;
 
     @include mq(m) {
@@ -83,30 +83,30 @@
   &--internal &,
   &--neutral & {
     &__top {
-      background: $color-header-masthead-internal;
+      background: var(--ons-color-header-masthead-internal);
       .ons-svg-logo {
         display: block;
         .ons-svg-logo__group--text,
         .ons-svg-logo__group--primary {
-          fill: $color-white;
+          fill: var(--ons-color-white);
         }
       }
     }
     &__org-logo-link:focus {
       background-color: transparent;
       box-shadow: none;
-      outline: 3px solid $color-focus;
+      outline: 3px solid var(--ons-color-focus);
       .ons-svg-logo {
-        fill: $color-text-link-focus;
+        fill: var(--ons-color-text-link-focus);
       }
     }
     &__grid-top {
-      color: $color-text-inverse;
+      color: var(--ons-color-text-inverse);
       min-height: 36px;
       a {
-        color: $color-text-inverse;
+        color: var(--ons-color-text-inverse);
         &:hover {
-          text-decoration: underline solid $color-text-inverse-link-hover 3px;
+          text-decoration: underline solid var(--ons-color-text-inverse-link-hover) 3px;
         }
       }
     }
@@ -114,23 +114,23 @@
 
   &--neutral & {
     &__top {
-      background: $color-header-masthead-dark;
+      background: var(--ons-color-header-masthead-dark);
     }
 
     &__main {
-      background: $color-header-light;
+      background: var(--ons-color-header-light);
 
       &--border {
-        border-bottom: 3px solid $color-header-light;
-        border-top: 3px solid $color-header-light;
+        border-bottom: 3px solid var(--ons-color-header-light);
+        border-top: 3px solid var(--ons-color-header-light);
       }
     }
 
     &__title {
-      color: $color-branded-text;
+      color: var(--ons-color-branded-text);
       &-link {
         &:hover {
-          text-decoration: underline solid $color-branded-text 2px;
+          text-decoration: underline solid var(--ons-color-branded-text) 2px;
         }
       }
     }
@@ -145,9 +145,9 @@
     display: block;
     &:focus {
       .ons-svg-logo {
-        fill: $color-black !important;
+        fill: var(--ons-color-black) !important;
         .ons-svg-logo__group {
-          fill: $color-black !important;
+          fill: var(--ons-color-black) !important;
         }
       }
     }
@@ -182,14 +182,14 @@
     display: inline-block;
 
     &--mobile {
-      background: $color-branded-tint;
+      background: var(--ons-color-branded-tint);
       padding: 1rem;
       width: 100%;
     }
 
     .ons-header--neutral & {
       &--mobile {
-        background: $color-grey-5;
+        background: var(--ons-color-grey-5);
       }
     }
 
@@ -216,7 +216,7 @@
     }
 
     .ons-language-links {
-      border-top: 1px solid $color-branded;
+      border-top: 1px solid var(--ons-color-branded);
       margin: 1.5rem 0 0;
       padding: 1rem 0 0;
 

package/components/hero/_hero.scss

@@ -1,6 +1,6 @@
 // Default
 .ons-hero {
-  background-color: $color-banner-bg;
+  background-color: var(--ons-color-banner-bg);
   display: flex;
   overflow: hidden;
   padding: 0;
@@ -43,15 +43,15 @@
 
   &--dark & {
     &__details {
-      color: $color-text-inverse !important;
+      color: var(--ons-color-text-inverse) !important;
 
       a {
         color: inherit;
-        text-decoration: underline solid $color-text-inverse-link 1px;
+        text-decoration: underline solid var(--ons-color-text-inverse-link) 1px;
       }
 
       a:hover {
-        color: $color-text-inverse-link-hover;
+        color: var(--ons-color-text-inverse-link-hover);
         text-decoration-thickness: 2px;
       }
 

package/components/input/_input-type.scss

@@ -21,14 +21,14 @@
 
     // Overide default input error style so it can wrap prefix/suffix too
     &.ons-input--error:not(:focus) {
-      border-right: $input-border-width solid $color-input-border;
+      border-right: $input-border-width solid var(--ons-color-input-border);
       box-shadow: none;
       outline: none;
     }
   }
 
   &__type {
-    background-color: $color-button-secondary;
+    background-color: var(--ons-color-button-secondary);
     display: block;
     flex: 0 0 auto;
     font-size: 1rem;
@@ -45,7 +45,7 @@
 
   &__type,
   &__type[title] {
-    border: 1px solid $color-input-border;
+    border: 1px solid var(--ons-color-input-border);
   }
 
   &__type[title] {
@@ -95,7 +95,7 @@
 .ons-input--error:not(:focus) {
   & + .ons-input-type__type,
   & + .ons-input-type__type[title] {
-    border-color: $color-errors;
+    border-color: var(--ons-color-errors);
   }
 
   & + .ons-input-type__type::after {
@@ -103,7 +103,7 @@
     bottom: 0;
 
     // Style input + prefix/suffix for errors
-    box-shadow: 0 0 0 1px $color-errors;
+    box-shadow: 0 0 0 1px var(--ons-color-errors);
     content: '';
     display: block;
     left: 0;

package/components/input/_input.scss

@@ -1,5 +1,5 @@
 %ons-input-focus {
-  box-shadow: 0 0 0 $input-border-width $color-input-border, 0 0 0 4px $color-focus;
+  box-shadow: 0 0 0 $input-border-width var(--ons-color-input-border), 0 0 0 4px var(--ons-color-focus);
 
   // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
   outline: 3px solid transparent;
@@ -12,7 +12,7 @@
 }
 
 .ons-input {
-  border: $input-border-width solid $color-input-border;
+  border: $input-border-width solid var(--ons-color-input-border);
   border-radius: $input-radius;
   color: inherit;
   display: block;
@@ -48,13 +48,13 @@
   }
 
   &:disabled {
-    border-color: $color-grey-75;
+    border-color: var(--ons-color-grey-75);
     cursor: not-allowed;
   }
 
   &--error:not(:focus) {
-    border: $input-border-width solid $color-errors;
-    box-shadow: 0 0 0 $input-border-width $color-errors;
+    border: $input-border-width solid var(--ons-color-errors);
+    box-shadow: 0 0 0 $input-border-width var(--ons-color-errors);
     outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
   }
 
@@ -82,7 +82,7 @@
 
 .ons-input--select {
   appearance: none;
-  background: $color-input-bg
+  background: var(--ons-color-input-bg)
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.75 7.7'%3E%3Cpath fill='currentColor' d='m1.37.15 4.5 5.1 4.5-5.1a.37.37 0 0 1 .6 0l.7.7a.45.45 0 0 1 0 .5l-5.5 6.2a.37.37 0 0 1-.6 0l-5.5-6.1a.64.64 0 0 1 0-.6l.7-.7a.64.64 0 0 1 .6 0Z'/%3E%3C/svg%3E")
     no-repeat center right 10px;
   background-size: 1rem;
@@ -111,29 +111,29 @@
     color: transparent;
   }
   &:valid:not(:placeholder-shown) {
-    background-color: $color-input-bg;
+    background-color: var(--ons-color-input-bg);
   }
   &:focus {
-    background-color: $color-input-bg;
+    background-color: var(--ons-color-input-bg);
   }
 }
 
 .ons-input--limit-reached:not(:focus) {
-  border: $input-border-width solid $color-ruby-red;
+  border: $input-border-width solid var(--ons-color-ruby-red);
 }
 
 .ons-input__limit {
   display: block;
 
   &--reached {
-    color: $color-ruby-red;
+    color: var(--ons-color-ruby-red);
   }
 }
 
 .ons-input--ghost {
   border: 2px solid rgba(255, 255, 255, 0.6);
   &:focus {
-    border: 2px solid $color-input-border;
+    border: 2px solid var(--ons-color-input-border);
   }
 }
 
@@ -156,12 +156,12 @@
     &:focus,
     &:active {
       background-position: 12px 10px;
-      box-shadow: 0 0 0 3px $color-focus;
+      box-shadow: 0 0 0 3px var(--ons-color-focus);
     }
   }
 
   &--dark {
-    border: 2px solid $color-black;
+    border: 2px solid var(--ons-color-black);
     &.ons-input-search--icon {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z'/%3E%3C/svg%3E");
     }

package/components/label/_label.scss

@@ -25,6 +25,6 @@
   }
 
   &--white {
-    color: $color-white;
+    color: var(--ons-color-white);
   }
 }

package/components/lists/_list.scss

@@ -25,7 +25,7 @@
       margin-left: 25px;
       position: relative;
       &::before {
-        border-top: 1px solid $color-black;
+        border-top: 1px solid var(--ons-color-black);
         content: '';
         left: 0;
         margin-left: -25px;

package/components/message/_message.scss

@@ -6,7 +6,7 @@
   outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
 
   &--sent {
-    background: $color-info-tint;
+    background: var(--ons-color-info-tint);
 
     @include mq(m) {
       margin-left: 4rem;
@@ -14,7 +14,7 @@
   }
 
   &--received {
-    background: $color-success-tint;
+    background: var(--ons-color-success-tint);
 
     @include mq(m) {
       margin-right: 4rem;
@@ -22,7 +22,7 @@
   }
 
   &__head {
-    border-bottom: 1px solid $color-borders;
+    border-bottom: 1px solid var(--ons-color-borders);
     padding: $grid-gutters;
     position: relative;
   }

package/components/message-list/_message-list.scss

@@ -8,7 +8,7 @@
   padding-bottom: 1.5rem;
 
   &:not(:last-child) {
-    border-bottom: 1px solid $color-borders;
+    border-bottom: 1px solid var(--ons-color-borders);
   }
 
   &__subject {

package/components/modal/_modal.scss

@@ -20,7 +20,7 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
   }
 
   &-ie11 & {
-    background: $color-white;
+    background: var(--ons-color-white);
     bottom: 0;
     height: 350px;
     left: 0;

package/components/navigation/_macro.njk

@@ -51,7 +51,7 @@
     </div>
     {% if params.navigation.subNavigation %}
         <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
-            <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}">
+            <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
                 <ul class="ons-navigation__list ons-navigation__list">
                     {% for item in (params.navigation.subNavigation.itemsList if params.navigation.subNavigation.itemsList is iterable else params.navigation.subNavigation.itemsList.items()) %}
                         <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">

package/components/navigation/_macro.spec.js

@@ -102,10 +102,16 @@ describe('macro: navigation', () => {
       expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true);
     });
 
-    it('has the correct container if `wide`', () => {
+    it('has the correct container if `params.wide` is provided', () => {
+      const $ = cheerio.load(renderComponent('navigation', { wide: true, navigation: PARAMS }));
+
+      expect($('.ons-navigation-wrapper .ons-container').hasClass('ons-container--wide')).toBe(true);
+    });
+
+    it('has the correct container if `params.navigation.wide` is provided', () => {
       const $ = cheerio.load(renderComponent('navigation', { navigation: { ...PARAMS, wide: true } }));
 
-      expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
+      expect($('.ons-navigation-wrapper .ons-container').hasClass('ons-container--wide')).toBe(true);
     });
 
     it('has the search autosuggest with correct output', () => {
@@ -218,6 +224,18 @@ describe('macro: navigation', () => {
       });
     });
 
+    it('has the correct container if `params.wide` is provided', () => {
+      const $ = cheerio.load(renderComponent('navigation', { wide: true, navigation: PARAMS }));
+
+      expect($('.ons-navigation--sub .ons-container').hasClass('ons-container--wide')).toBe(true);
+    });
+
+    it('has the correct container if `params.navigation.wide` is provided', () => {
+      const $ = cheerio.load(renderComponent('navigation', { navigation: { ...PARAMS, wide: true } }));
+
+      expect($('.ons-navigation--sub .ons-container').hasClass('ons-container--wide')).toBe(true);
+    });
+
     it('has the provided `id` attribute', () => {
       const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));