@ons/design-system 54.0.0 → 55.1.0

package/scss/base/_global.scss

@@ -34,6 +34,7 @@ hr {
   box-shadow: 0 -2px $color-focus, 0 4px $color-text-link-focus;
   color: $color-text-link-focus;
   outline: 3px solid transparent;
+  outline-offset: 1px;
   text-decoration: none;
 }
 

package/scss/overrides/hcm.scss

@@ -2,80 +2,239 @@
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   // Brightness makes all images black, except transparent parts, which remain transparent
   // Then, invert(1) makes the black parts white
-  .ons-header__logo,
   .ons-footer__ogl-img,
   .ons-quote .ons-svg-icon,
-  .ons-collapsible__icon .ons-svg-icon,
   .ons-footer img {
     filter: brightness(0) invert(1);
   }
 
-  // IE11 fallback
-  .ons-collapsible__icon .ons-svg-icon,
-  .ons-breadcrumb__item .ons-svg-icon,
-  .ons-panel .ons-svg-icon,
-  .ons-list--icons .ons-svg-icon {
-    fill: currentColor;
+  // Panels – add border to replace backgrounds
+  .ons-panel {
+    border-color: currentColor;
+    border-left-width: 8px !important;
   }
 
-  // Matches icon with the link colour
-  .ons-external-link {
-    svg {
+  // Adds some style adjustments to the focused item to make it obvious something is selected
+  .ons-autosuggest-input {
+    &__results {
+      border: 1px solid Highlight !important;
+    }
+
+    .ons-autosuggest-input__option {
+      &:focus,
+      &:hover,
+      &:hover .ons-autosuggest-input__category,
+      &--focused,
+      &--focused .ons-autosuggest-input__category {
+        background: Highlight !important;
+        color: HighlightText !important;
+        forced-color-adjust: none;
+      }
+    }
+  }
+
+  // Select - Overrides custom background image icon
+  .ons-input--select {
+    background: $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;
+  }
+
+  // I would have approached the mark differently, but without changing the existing approach this fixes it
+  .ons-timeline__item::before {
+    border: 2px solid currentColor;
+  }
+
+  // Element icons – matches icon with the link colour
+  .ons-collapsible,
+  .ons-breadcrumb__item,
+  .ons-panel,
+  .ons-btn__inner,
+  .ons-external-link,
+  .ons-list--icons {
+    & .ons-svg-icon {
       fill: currentColor !important;
+      forced-color-adjust: auto;
     }
   }
 
-  // Adds a border to container error warning panel
-  .ons-panel--error {
-    border: 1px solid currentColor;
+  // Logos
+  .ons-header__org-logo,
+  .ons-header__title-logo,
+  .ons-footer {
+    & .ons-svg-logo {
+      fill: currentColor !important;
+      forced-color-adjust: auto;
+    }
+  }
+
+  // Hero pre title
+  .ons-hero__pre-title {
+    filter: brightness(0) invert(1);
+  }
+
+  // Buttons - Overrides adjustment to make button shadow selectable
+  .ons-btn {
+    &::after {
+      bottom: 0 !important;
+    }
+  }
+
+  .ons-input,
+  .ons-btn .ons-btn__inner,
+  .ons-tab--row {
+    &:focus,
+    &:focus-visible {
+      // Focus states – To better match the focus states of native controls
+      outline-color: Highlight;
+    }
+  }
+
+  // Tabs – prevent tab border colour change
+  .ons-tabs__list--row::after {
+    bottom: 1px;
+    forced-color-adjust: none;
+  }
+
+  .ons-tab--row[aria-selected='true'] {
+    border-color: ButtonText !important;
+    color: ButtonText;
+  }
+
+  // Navigation and section nav – item border
+  .ons-section-nav:not(.ons-section-nav--vertical) .ons-section-nav__item,
+  .ons-navigation__item {
+    border-color: canvas;
+  }
+
+  .ons-section-nav:not(.ons-section-nav--vertical) .ons-section-nav__item--active,
+  .ons-navigation__item--active {
+    border-color: ButtonText !important;
+    color: ButtonText;
+  }
+
+  // Add borders to separate banners with no backgrounds
+  .ons-skip-link,
+  .ons-browser-banner,
+  .ons-cookies-banner,
+  .ons-header,
+  .ons-header__top,
+  .ons-hero,
+  .ons-phase-banner {
+    border-bottom: 1px solid currentColor;
+  }
+
+  .ons-footer {
+    border-top: 1px solid currentColor;
+  }
 
-    .ons-panel__header {
+  @include mq(m) {
+    .ons-header__main {
       border-bottom: 1px solid currentColor;
     }
   }
 
-  // Adds some style adjustments to the focused item to make it obvious something is selected
-  .ons-js-autosuggest .ons-autosuggest-input__option--focused {
-    padding-left: 1.5rem;
-    text-decoration: underline;
+  .ons-navigation--sub {
+    border-top: 1px solid currentColor;
   }
 
-  .ons-radio__input:checked + .ons-radio__label {
-    position: relative;
+  // Search – override focus state background image
+  .ons-input-search--icon:focus,
+  .ons-input-search--icon:active,
+  .ons-input-search--icon:valid:not(:placeholder-shown) {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23ffffff'%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");
+  }
 
-    // These off pixels are not nice, but due to the way the form controls have been built I have had no choice
-    // I would strongly revisit doing the checkboxes and radios again and fix these non-whole pixel values
-    &::after {
-      border: 6px solid currentColor;
-      border-radius: 50%;
-      content: '';
-      height: 12.5px;
-      left: 16px;
-      position: absolute;
-      top: 18.5px;
-      width: 12.5px;
-      z-index: 1;
+  // Pagination – current page state
+  .ons-pagination {
+    &__item--current &__link {
+      color: ButtonText;
+      outline-color: ButtonText !important;
     }
   }
 
-  // Had to do this without messing with the existing SVG
-  .ons-input--select {
-    background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iY2hldnJvbi1kb3duIiBjbGFzcz0ic3ZnLWljb24iIHZpZXdCb3g9IjAgMCAxMiA4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMS4yIDBMNiA1LjQgMTAuOCAwIDEyIDEuMyA2IDggMCAxLjN6Ii8+Cjwvc3ZnPgo=');
-    background-size: 12px 8px;
+  // Radios and Checkboxes – disabled and checked
+  .ons-checkbox__input {
+    border-color: canvastext;
+
+    &:disabled {
+      border-color: grayText;
+    }
+    &:disabled:checked::after {
+      border-color: grayText;
+    }
+    &:disabled + .ons-checkbox__label,
+    &:disabled:checked + .ons-checkbox__label {
+      color: grayText;
+
+      &::before {
+        border-color: grayText;
+        outline-color: grayText;
+      }
+    }
+
+    &:checked:not(:disabled):not(:visited),
+    &:checked:not(:disabled):not(:visited)::after {
+      border-color: Highlight;
+    }
+
+    &:checked + .ons-checkbox__label {
+      &::before {
+        border-color: Highlight;
+        outline-color: Highlight;
+      }
+    }
   }
 
-  // I would have approached the mark differently, but without changing the existing approach this fixes it
-  .ons-timeline__item::before {
-    border: 2px solid currentColor;
+  // Colour swatch – prevent colour adjustment
+  .ons-patternlib-swatch__color {
+    forced-color-adjust: none;
   }
 
-  // Buttons
-  .ons-btn__inner .ons-svg-icon {
-    fill: currentColor !important;
+  // Highlighting
+  h1 em,
+  .ons-highlight {
+    background-color: mark;
+    color: marktext;
   }
 
-  // Hero pre title
-  .ons-hero__pre-title {
-    filter: brightness(0) invert(1);
+  // Errors
+  .ons-panel--error {
+    border-color: mark;
+    outline-color: mark;
+
+    & .ons-panel__header {
+      border-bottom: 1px solid mark;
+    }
+  }
+
+  .ons-input {
+    &--error:not(:focus) {
+      border-color: mark;
+      outline-color: mark;
+
+      & + .ons-input-type__type,
+      & + .ons-input-type__type[title] {
+        border-color: mark;
+      }
+
+      & + .ons-input-type__type::after {
+        outline-color: mark;
+      }
+    }
+  }
+
+  // Feedback – Remove speech bubble border because hcm doesn't support transparent borders
+  .ons-feedback::before,
+  .ons-feedback::after {
+    content: none;
+  }
+
+  // Message – indicate sent vs received
+  .ons-message {
+    &--sent {
+      outline-color: mark;
+    }
   }
 }

package/scss/patternlib.scss

@@ -86,62 +86,6 @@
     }
   }
 
-  .ons-table-scrollable {
-    position: relative;
-    ::-webkit-scrollbar {
-      height: 7px;
-    }
-    ::-webkit-scrollbar-thumb {
-      background: $color-grey-75;
-      border-radius: 20px;
-    }
-    &--on {
-      th,
-      td {
-        white-space: nowrap;
-      }
-    }
-    &__content {
-      overflow: visible;
-      overflow-x: scroll;
-      width: 100%;
-      &:focus {
-        outline: 3px solid $color-focus;
-        outline-offset: 3px;
-      }
-      th,
-      td {
-        @include mq(xxs, m) {
-          white-space: nowrap;
-        }
-      }
-      .ons-table__right-shadow,
-      .ons-table__left-shadow {
-        height: 100%;
-        position: absolute;
-        top: 0;
-        width: 5px;
-        z-index: 200;
-
-        &.ons-with-transition {
-          transition: box-shadow 0.4s ease-out;
-        }
-      }
-      .ons-table__right-shadow {
-        right: 0;
-        &.ons-visible {
-          box-shadow: inset -1px 0 0 0 #bfc1c3, inset -5px 0 0 0 rgba(191, 193, 195, 0.4);
-        }
-      }
-      .ons-table__left-shadow {
-        left: 0;
-        &.ons-visible {
-          box-shadow: inset 1px 0 0 0 #bfc1c3, inset -5px 0 0 0 rgba(191, 193, 195, 0.4);
-        }
-      }
-    }
-  }
-
   &__content,
   &__sub-nav {
     > {
@@ -210,6 +154,7 @@
   font-weight: 700;
   letter-spacing: 0.1rem;
   margin-right: 0.5rem;
+  outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
   padding: 0.3rem 0.5rem;
   text-transform: uppercase;
 }

package/scss/vars/_colors.scss

@@ -92,7 +92,8 @@ $color-placeholder: $color-grey-15 !default;
 // Form elements
 $color-button: $color-leaf-green !default;
 $color-button-secondary: $color-grey-15 !default;
-$color-input: $color-black !default;
+$color-input-border: $color-black !default;
+$color-input-bg: $color-white !default;
 
 // Panels and status
 $color-info: $color-ocean-blue !default;