@ons/design-system 65.0.0 → 65.2.0

package/scss/base/_global.scss

@@ -32,7 +32,8 @@ hr {
 %a-focus {
   background-color: var(--ons-color-focus);
   box-decoration-break: clone;
-  box-shadow: 0 -2px var(--ons-color-focus), 0 4px var(--ons-color-text-link-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;
@@ -61,7 +62,7 @@ a {
     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-to-content) {
+  &:focus:not(.ons-btn--link, .ons-btn--ghost, .ons-js-clear-btn, .ons-download__thumbnail--link, .ons-tab--row, .ons-skip-to-content) {
     @extend %a-focus;
   }
 }

package/scss/main.scss

@@ -25,6 +25,7 @@
 @import '../components/fieldset/fieldset';
 @import '../components/footer/footer';
 @import '../components/header/header';
+@import '../components/helpers/grid';
 @import '../components/hero/hero';
 @import '../components/icon/icon';
 @import '../components/image/image';

package/scss/overrides/hcm.scss

@@ -10,22 +10,22 @@
 
   // Panels – add border to replace backgrounds
   .ons-panel {
-    border-color: currentColor;
+    border-color: currentcolor;
     border-left-width: 8px !important;
   }
 
   // Adds some style adjustments to the focused item to make it obvious something is selected
-  .ons-autosuggest-input {
+  .ons-autosuggest {
     &__results {
       border: 1px solid Highlight !important;
     }
 
-    .ons-autosuggest-input__option {
+    .ons-autosuggest__option {
       &:focus,
       &:hover,
-      &:hover .ons-autosuggest-input__category,
+      &:hover .ons-autosuggest__category,
       &--focused,
-      &--focused .ons-autosuggest-input__category {
+      &--focused .ons-autosuggest__category {
         background: Highlight !important;
         color: HighlightText !important;
         forced-color-adjust: none;
@@ -43,7 +43,7 @@
 
   // I would have approached the mark differently, but without changing the existing approach this fixes it
   .ons-timeline__item::before {
-    border: 2px solid currentColor;
+    border: 2px solid currentcolor;
   }
 
   // Element icons – matches icon with the link colour
@@ -54,7 +54,7 @@
   .ons-external-link,
   .ons-list--icons {
     & .ons-icon {
-      fill: currentColor !important;
+      fill: currentcolor !important;
       forced-color-adjust: auto;
     }
   }
@@ -64,7 +64,7 @@
   .ons-header__title-logo,
   .ons-footer {
     & .ons-icon--logo {
-      fill: currentColor !important;
+      fill: currentcolor !important;
       forced-color-adjust: auto;
     }
   }
@@ -122,21 +122,21 @@
   .ons-header__top,
   .ons-hero,
   .ons-phase-banner {
-    border-bottom: 1px solid currentColor;
+    border-bottom: 1px solid currentcolor;
   }
 
   .ons-footer {
-    border-top: 1px solid currentColor;
+    border-top: 1px solid currentcolor;
   }
 
   @include mq(m) {
     .ons-header__main {
-      border-bottom: 1px solid currentColor;
+      border-bottom: 1px solid currentcolor;
     }
   }
 
   .ons-navigation--sub {
-    border-top: 1px solid currentColor;
+    border-top: 1px solid currentcolor;
   }
 
   // Search – override focus state background image
@@ -174,8 +174,8 @@
       }
     }
 
-    &:checked:not(:disabled):not(:visited),
-    &:checked:not(:disabled):not(:visited)::after {
+    &:checked:not(:disabled, :visited),
+    &:checked:not(:disabled, :visited)::after {
       border-color: Highlight;
     }
 

package/scss/print.scss

@@ -51,7 +51,7 @@ details > summary {
 }
 
 .ons-hero {
-  color-adjust: exact;
+  print-color-adjust: exact;
 }
 
 .ons-grid__col {