@carbon/styles 0.6.0 → 0.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,18 +20,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@carbon/colors": "^10.33.0",
+    "@carbon/colors": "^10.34.0",
     "@carbon/feature-flags": "^0.6.0",
-    "@carbon/grid": "^10.37.0",
-    "@carbon/layout": "^10.33.0",
-    "@carbon/motion": "^10.25.0",
-    "@carbon/themes": "^10.44.0",
-    "@carbon/type": "^10.37.0",
+    "@carbon/grid": "^10.39.0",
+    "@carbon/layout": "^10.34.0",
+    "@carbon/motion": "^10.26.0",
+    "@carbon/themes": "^10.46.0",
+    "@carbon/type": "^10.38.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.19.0",
+    "@carbon/test-utils": "^10.20.0",
     "css": "^3.0.0"
   },
-  "gitHead": "90b2b8c089af8fc2f9db25255d4b27d5b16ca5fe"
+  "gitHead": "f6352a1010117000ce4ca9f71315b67b1ec8e396"
 }

package/scss/_feature-flags.scss

@@ -5,4 +5,11 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward '@carbon/feature-flags';
+@forward '@carbon/feature-flags' with (
+  $feature-flags: (
+    'enable-css-custom-properties': true,
+    'enable-use-controlled-state-with-value': true,
+    'enable-css-grid': true,
+    'enable-v11-release': true,
+  ) !default
+);

package/scss/_spacing.scss

@@ -7,6 +7,7 @@
 
 @forward '@carbon/layout/scss/modules/spacing'
 show
+  $spacing,
   $spacing-01,
   $spacing-02,
   $spacing-03,

package/scss/_type.scss

@@ -11,6 +11,7 @@
   reset,
   type-style,
   font-family,
+  default-type,
 
   // Variables
   $caption-01,

package/scss/components/_index.scss

@@ -43,6 +43,7 @@
 @use 'select';
 @use 'skeleton-styles';
 @use 'slider';
+@use 'stack';
 @use 'structured-list';
 @use 'tabs';
 @use 'tag';

package/scss/components/accordion/_accordion.scss

@@ -183,11 +183,15 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
   .#{$prefix}--accordion--start .#{$prefix}--accordion__arrow {
     // Alters `$arrow-margin` token:
-    margin: 2px 0 0 $spacing-03;
+    margin: 2px 0 0 $spacing-05;
+  }
+
+  .#{$prefix}--accordion--start .#{$prefix}--accordion__title {
+    margin-right: $spacing-05;
   }
 
   .#{$prefix}--accordion--start .#{$prefix}--accordion__content {
-    margin-left: $spacing-06;
+    margin-left: $spacing-07;
   }
 
   .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content,

package/scss/components/button/_button.scss

@@ -525,4 +525,13 @@
   .#{$prefix}--btn:focus {
     @include high-contrast-mode('focus');
   }
+
+  // Windows HCM fix
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
+    .#{$prefix}--btn__icon
+    path:not([data-icon-path]):not([fill='none']),
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {
+    @include high-contrast-mode('icon-fill');
+  }
 }

package/scss/components/checkbox/_checkbox.scss

@@ -17,6 +17,7 @@
 @mixin checkbox {
   // Spacing between checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
+    position: relative;
     margin-bottom: $spacing-02;
   }
 

package/scss/components/code-snippet/_code-snippet.scss

@@ -8,7 +8,7 @@
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../type' as *;
 @use '../copy-button';
 @use '../../utilities/convert' as *;
@@ -395,7 +395,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--light
     .#{$prefix}--btn.#{$prefix}--snippet-btn--expand:hover,
   .#{$prefix}--snippet--light .#{$prefix}--copy-btn:hover {
-    background-color: $hover-light-ui;
+    background-color: $layer-hover-02;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:active,
@@ -403,7 +403,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--light
     .#{$prefix}--btn.#{$prefix}--snippet-btn--expand:active,
   .#{$prefix}--snippet--light .#{$prefix}--copy-btn:active {
-    background-color: $active-light-ui;
+    background-color: $layer-active-02;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--single::after,

package/scss/components/data-table/expandable/_data-table-expandable.scss

@@ -8,7 +8,7 @@
 @use '../../../config' as *;
 @use '../../../motion' as *;
 @use '../../../spacing' as *;
-@use '../../../compat/theme' as *;
+@use '../../../theme' as *;
 @use '../../../utilities/button-reset';
 @use '../../../utilities/convert' as *;
 @use '../../../utilities/focus-outline' as *;
@@ -226,7 +226,7 @@
   }
 
   .#{$prefix}--table-expand__svg {
-    fill: $ui-05;
+    fill: $layer-selected-inverse;
     transform: rotate(90deg);
     transition: transform $duration-moderate-01 motion(standard, productive);
   }

package/scss/components/date-picker/_date-picker.scss

@@ -8,7 +8,7 @@
 @use '../../colors' as *;
 @use '../../config' as *;
 @use '../../motion' as *;
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../spacing' as *;
 @use '../../type' as *;
 @use '../form/form';

package/scss/components/date-picker/_flatpickr.scss

@@ -5,9 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-// @use '../../config' as *;
 @use '../../motion' as *;
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../spacing' as *;
 @use '../../type' as *;
 @use '../../utilities/box-shadow' as *;
@@ -15,6 +14,8 @@
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 
+@use '../button/tokens' as *;
+
 @keyframes fpFadeInDown {
   from {
     opacity: 0;
@@ -121,7 +122,7 @@
     padding: $spacing-02 $spacing-02 $spacing-03 $spacing-02;
     border: none;
     margin-top: rem(-2px);
-    background-color: $ui-01;
+    background-color: $layer-01;
 
     &:focus {
       @include focus-outline('border');
@@ -198,7 +199,7 @@
     height: rem(40px);
     align-items: center;
     background-color: transparent;
-    color: $text-01;
+    color: $text-primary;
     line-height: 1;
     text-align: center;
   }
@@ -213,7 +214,7 @@
     justify-content: center;
     padding: 0;
     cursor: pointer;
-    fill: $icon-01;
+    fill: $icon-primary;
     line-height: 16px;
     text-decoration: none;
     transform: scale(1, 1) #{'/*rtl: scale(-1,1)*/'};
@@ -222,19 +223,19 @@
     @include high-contrast-mode('icon-fill');
 
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
     }
   }
 
   .flatpickr-next-month.disabled svg,
   .flatpickr-prev-month.disabled svg {
     cursor: not-allowed;
-    fill: $ui-05;
+    fill: $icon-disabled;
   }
 
   .flatpickr-next-month.disabled:hover svg,
   .flatpickr-prev-month.disabled:hover svg {
-    fill: $ui-05;
+    fill: $icon-disabled;
   }
 
   .flatpickr-current-month {
@@ -252,7 +253,7 @@
     margin-left: $spacing-02;
 
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
     }
   }
 
@@ -261,7 +262,7 @@
     width: rem(60px);
 
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
     }
   }
 
@@ -274,7 +275,7 @@
     // Added in when upgraded to Flatpickr 4.5.5 (#1977)
     -moz-appearance: textfield; /* Firefox */
     background-color: $field-01;
-    color: $text-01;
+    color: $text-primary;
     cursor: default;
     font-family: inherit;
     font-size: inherit;
@@ -293,8 +294,8 @@
 
     &[disabled],
     &[disabled]:hover {
-      background-color: $ui-01;
-      color: $disabled-02;
+      background-color: $layer-01;
+      color: $text-disabled;
       pointer-events: none;
     }
   }
@@ -304,7 +305,7 @@
     border-bottom: 0;
 
     &::after {
-      border-bottom: rem(4px) solid $icon-01;
+      border-bottom: rem(4px) solid $border-subtle;
     }
   }
 
@@ -312,7 +313,7 @@
     top: rem(11px);
 
     &::after {
-      border-top: rem(4px) solid $icon-01;
+      border-top: rem(4px) solid $border-subtle;
     }
   }
 
@@ -338,22 +339,22 @@
     }
 
     &:hover::after {
-      border-top-color: $interactive-01;
-      border-bottom-color: $interactive-01;
+      border-top-color: $button-primary;
+      border-bottom-color: $button-primary;
     }
 
     &:active::after {
-      border-top-color: $interactive-04;
-      border-bottom-color: $interactive-04;
+      border-top-color: $border-interactive;
+      border-bottom-color: $border-interactive;
     }
   }
 
   .numInput[disabled] ~ .arrowUp::after {
-    border-bottom-color: $disabled-02;
+    border-bottom-color: $text-disabled;
   }
 
   .numInput[disabled] ~ .arrowDown::after {
-    border-top-color: $disabled-02;
+    border-top-color: $text-disabled;
   }
 
   .numInputWrapper:hover .arrowUp,
@@ -381,7 +382,7 @@
     @include type-style('body-short-01');
 
     flex: 1;
-    color: $text-01;
+    color: $text-primary;
     cursor: default;
   }
 
@@ -423,29 +424,29 @@
     height: rem(40px);
     align-items: center;
     justify-content: center;
-    color: $text-01;
+    color: $text-primary;
     cursor: pointer;
     transition: all $duration-fast-01 motion(standard, productive);
 
     &:hover {
-      background: $hover-ui;
+      background: $background-hover;
     }
 
     &:focus {
       @include focus-outline('outline');
 
-      outline-color: $interactive-01;
+      outline-color: $button-primary;
     }
   }
 
   .nextMonthDay,
   .prevMonthDay {
-    color: $text-05;
+    color: $text-helper;
   }
 
   .flatpickr-day.today {
     position: relative;
-    color: $link-01;
+    color: $link-primary;
     font-weight: 600;
 
     &::after {
@@ -455,7 +456,7 @@
       display: block;
       width: rem(4px);
       height: rem(4px);
-      background-color: $link-01;
+      background-color: $link-primary;
       content: '';
       transform: translateX(-50%);
     }
@@ -475,18 +476,18 @@
 
   .flatpickr-day.inRange {
     background-color: $highlight;
-    color: $text-01;
+    color: $text-primary;
   }
 
   .flatpickr-day.selected {
-    background-color: $interactive-01;
-    color: $text-04;
+    background-color: $button-primary;
+    color: $text-on-color;
     @include high-contrast-mode('focus') {
       outline-style: dotted;
     }
 
     &:focus {
-      outline: rem(1px) solid $ui-02;
+      outline: rem(1px) solid $layer-02;
       outline-offset: rem(-3px);
     }
   }
@@ -501,23 +502,23 @@
     @include focus-outline('outline');
 
     z-index: 3;
-    background: $ui-01;
+    background: $layer-01;
   }
 
   .flatpickr-day.endRange:hover {
     @include focus-outline('outline');
 
-    background: $ui-01;
-    color: $text-01;
+    background: $layer-01;
+    color: $text-primary;
   }
 
   .flatpickr-day.endRange.inRange.selected {
-    background: $interactive-01;
-    color: $text-04;
+    background: $button-primary;
+    color: $text-on-color;
   }
 
   .flatpickr-day.flatpickr-disabled {
-    color: $disabled-02;
+    color: $text-disabled;
     cursor: not-allowed;
 
     &:hover {

package/scss/components/dropdown/_dropdown.scss

@@ -9,7 +9,7 @@
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/convert' as *;
@@ -139,7 +139,7 @@
     background-color: $field-02;
 
     &:hover {
-      background-color: $hover-light-ui;
+      background-color: $layer-hover-02;
     }
   }
 
@@ -262,13 +262,13 @@
 
     &:hover {
       border-color: transparent;
-      color: $text-01;
+      color: $text-primary;
     }
   }
 
   // V11: Possibly deprecate
   .#{$prefix}--dropdown--light .#{$prefix}--dropdown-link {
-    border-top-color: $decorative-01;
+    border-top-color: $border-subtle-02;
   }
 
   .#{$prefix}--dropdown--sm .#{$prefix}--dropdown-link {

package/scss/components/file-uploader/_file-uploader.scss

@@ -62,7 +62,10 @@
     display: inline-block;
     width: 100%;
     max-width: rem(320px);
-    margin-bottom: $spacing-03;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: $spacing-03;
+    }
+
     color: $link-primary;
     cursor: pointer;
     outline: 2px solid transparent;

package/scss/components/form/_form.scss

@@ -22,11 +22,15 @@ $input-label-weight: 400 !default;
   .#{$prefix}--fieldset {
     @include reset;
 
-    margin-bottom: $spacing-07;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: $spacing-07;
+    }
   }
 
-  .#{$prefix}--fieldset--no-margin {
-    margin-bottom: 0;
+  @if not enabled('enable-v11-release') {
+    .#{$prefix}--fieldset--no-margin {
+      margin-bottom: 0;
+    }
   }
 
   .#{$prefix}--form-item {
@@ -46,7 +50,10 @@ $input-label-weight: 400 !default;
     @include type-style('label-01');
 
     display: inline-block;
-    margin-bottom: $spacing-03;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: $spacing-03;
+    }
+
     color: $text-secondary;
     font-weight: $input-label-weight;
     line-height: 1rem;
@@ -129,8 +136,10 @@ $input-label-weight: 400 !default;
     display: block;
   }
 
-  .#{$prefix}--form--fluid .#{$prefix}--fieldset {
-    margin: 0;
+  @if not enabled('enable-v11-release') {
+    .#{$prefix}--form--fluid .#{$prefix}--fieldset {
+      margin: 0;
+    }
   }
 
   .#{$prefix}--form--fluid input[data-invalid] {

package/scss/components/list-box/_list-box.scss

@@ -11,7 +11,7 @@
 @use '../tag/mixins' as *;
 @use '../../config' as *;
 @use '../../colors' as *;
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../type' as *;
 @use '../../spacing' as *;
 @use '../../motion' as *;
@@ -158,7 +158,7 @@ $list-box-menu-width: rem(300px);
     background-color: $field-02;
 
     &:hover {
-      background-color: $hover-light-ui;
+      background-color: $layer-hover-02;
     }
   }
 
@@ -169,7 +169,7 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item__option {
-    border-top-color: $decorative-01;
+    border-top-color: $border-subtle-02;
   }
 
   .#{$prefix}--list-box--light.#{$prefix}--list-box--expanded {
@@ -561,7 +561,7 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:hover {
-    background-color: $hover-light-ui;
+    background-color: $layer-hover-02;
   }
 
   .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item {
@@ -668,6 +668,36 @@ $list-box-menu-width: rem(300px);
     color: $text-disabled;
   }
 
+  .#{$prefix}--list-box__menu-item[disabled],
+  .#{$prefix}--list-box__menu-item[disabled] *,
+  .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--list-box__menu-item[disabled]:hover {
+    color: $text-disabled;
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]:hover {
+    background-color: revert;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--checkbox-label::before {
+    border-color: $text-disabled;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle;
+  }
+
   .#{$prefix}--list-box.#{$prefix}--list-box--inline
     .#{$prefix}--list-box__menu-item__option {
     margin: 0 $spacing-03;

package/scss/components/notification/_actionable-notification.scss

@@ -36,8 +36,11 @@
     height: auto;
     min-height: rem(48px);
     flex-wrap: wrap;
-    margin-top: $spacing-05;
-    margin-bottom: $spacing-05;
+    @if not enabled('enable-v11-release') {
+      margin-top: $spacing-05;
+      margin-bottom: $spacing-05;
+    }
+
     color: $text-inverse;
 
     @include breakpoint(md) {
@@ -190,7 +193,10 @@
     display: flex;
     flex-grow: 1;
     margin: 0 $spacing-09 0 $spacing-05;
+  }
 
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--toast)
+    .#{$prefix}--actionable-notification__details {
     @include breakpoint(md) {
       margin: 0 $spacing-05;
     }

package/scss/components/notification/_inline-notification.scss

@@ -8,7 +8,7 @@
 @use '../../breakpoint' as *;
 @use '../../colors' as *;
 @use '../../config' as *;
-@use '../../feature-flags' as *;
+@use '../../feature-flags';
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
@@ -34,8 +34,11 @@
     height: auto;
     min-height: rem(48px);
     flex-wrap: wrap;
-    margin-top: $spacing-05;
-    margin-bottom: $spacing-05;
+    @if not enabled('enable-v11-release') {
+      margin-top: $spacing-05;
+      margin-bottom: $spacing-05;
+    }
+
     color: $text-inverse;
 
     @include breakpoint(md) {
@@ -197,7 +200,7 @@
     padding: rem(15px) 0;
   }
 
-  @if feature-flag-enabled('enable-v11-release') {
+  @if feature-flags.enabled('enable-v11-release') {
     .#{$prefix}--inline-notification__content {
       @include type-style('body-short-01');
 

package/scss/components/notification/_toast-notification.scss

@@ -10,7 +10,7 @@
 @use '../../breakpoint' as *;
 @use '../../colors' as *;
 @use '../../config' as *;
-@use '../../feature-flags' as *;
+@use '../../feature-flags';
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
@@ -32,14 +32,19 @@
     width: rem(288px);
     height: auto;
     padding-left: $spacing-05;
-    margin-top: $spacing-03;
-    margin-right: $spacing-05;
-    margin-bottom: $spacing-03;
+    @if not enabled('enable-v11-release') {
+      margin-top: $spacing-03;
+      margin-right: $spacing-05;
+      margin-bottom: $spacing-03;
+    }
+
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
     color: $text-inverse;
 
-    &:first-child {
-      margin-top: $spacing-05;
+    @if not enabled('enable-v11-release') {
+      &:first-child {
+        margin-top: $spacing-05;
+      }
     }
 
     @include breakpoint(max) {
@@ -146,7 +151,7 @@
     margin-right: $spacing-05;
   }
 
-  @if feature-flag-enabled('enable-v11-release') {
+  @if feature-flags.enabled('enable-v11-release') {
     .#{$prefix}--toast-notification__content {
       @include type-style('body-short-01');
 
@@ -205,7 +210,7 @@
     fill: $icon-primary;
   }
 
-  @if not feature-flag-enabled('enable-v11-release') {
+  @if not feature-flags.enabled('enable-v11-release') {
     .#{$prefix}--toast-notification__title {
       @include type-style('productive-heading-01');
 

package/scss/components/progress-indicator/_progress-indicator.scss

@@ -225,6 +225,12 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     cursor: pointer;
   }
 
+  .#{$prefix}--progress-step-button:not(.#{$prefix}--progress-step-button--unclickable)
+    .#{$prefix}--progress-label:active {
+    box-shadow: 0 rem(3px) 0 0 $interactive;
+    color: $interactive;
+  }
+
   //DISABLED STYLING
   .#{$prefix}--progress-step--disabled {
     cursor: not-allowed;

package/scss/components/slider/_slider.scss

@@ -124,7 +124,7 @@
 
   .#{$prefix}--slider-text-input,
   .#{$prefix}-slider-text-input {
-    width: auto;
+    width: rem(64px);
     height: rem(40px);
     -moz-appearance: textfield;
     text-align: center;

package/scss/components/stack/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'stack';
+@use 'stack';
+
+@include stack.stack;

package/scss/components/stack/_stack.scss

@@ -0,0 +1,34 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../../config' as *;
+@use '../../spacing';
+@use '../../utilities/custom-property';
+
+@mixin stack() {
+  .#{$prefix}--stack-horizontal {
+    display: inline-grid;
+    column-gap: custom-property.get-var('stack-gap', 0);
+    grid-auto-flow: column;
+  }
+
+  .#{$prefix}--stack-vertical {
+    display: grid;
+    grid-auto-flow: row;
+    row-gap: custom-property.get-var('stack-gap', 0);
+  }
+
+  $index: 1;
+
+  @each $step, $value in spacing.$spacing {
+    .#{$prefix}--stack-scale-#{$index} {
+      @include custom-property.declaration('stack-gap', $value);
+    }
+
+    $index: $index + 1;
+  }
+}

package/scss/components/structured-list/_structured-list.scss

@@ -36,7 +36,10 @@
 
     display: table;
     width: 100%;
-    margin-bottom: 5rem;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: 5rem;
+    }
+
     background-color: transparent;
     border-collapse: collapse;
     border-spacing: 0;

package/scss/components/tag/_tag.scss

@@ -114,6 +114,12 @@
     );
   }
 
+  .#{$prefix}--tag--outline {
+    @include tag-theme($background, $text-primary, $layer-hover);
+
+    box-shadow: inset 0 0 0 1px $background-inverse;
+  }
+
   .#{$prefix}--tag--disabled,
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
   .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {

package/scss/components/toggle/_toggle.scss

@@ -6,7 +6,7 @@
 //3
 
 @use '../../config' as *;
-@use '../../feature-flags' as *;
+@use '../../feature-flags';
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
@@ -15,12 +15,13 @@
 @use '../../utilities/convert' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/visually-hidden' as *;
+@use '../../utilities/skeleton' as *;
 
 /// Toggle styles
 /// @access public
 /// @group toggle
 @mixin toggle {
-  @if enabled('enable-v11-release') {
+  @if feature-flags.enabled('enable-v11-release') {
     .#{$prefix}--toggle__label-text {
       @include type-style('label-01');
 
@@ -586,30 +587,91 @@
     //----------------------------------------------
     // Skeleton
     // ---------------------------------------------
+    //md toggle input
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch {
+      @include skeleton;
 
-    .#{$prefix}--toggle__label.#{$prefix}--skeleton {
-      flex-direction: column;
-      align-items: flex-start;
+      width: 3rem;
+      margin-top: 0.5rem;
+    }
 
-      .#{$prefix}--toggle__label-text {
-        margin-bottom: $spacing-03;
-      }
+    //md skeleton label text
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      > div {
+      overflow: hidden;
+      width: 1.5rem;
+      height: 0.5rem;
+      //hides text
+      font-size: 0%;
+      line-height: 0;
+
+      @include skeleton;
     }
 
-    // Windows HCM fix
-    .#{$prefix}--toggle__switch::after,
-    .#{$prefix}--toggle__switch::before {
-      @include high-contrast-mode('outline');
+    //small toggle input
+    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch {
+      @include skeleton;
+
+      width: 2rem;
+      margin-top: 0.5rem;
     }
 
-    // stylelint-disable-next-line no-duplicate-selectors
-    .#{$prefix}--toggle-input:focus
+    //sm skeleton label text
+    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
       + .#{$prefix}--toggle-input__label
-      > .#{$prefix}--toggle__switch::before,
-    .#{$prefix}--toggle-input:active
+      > div {
+      overflow: hidden;
+      width: 1rem;
+      height: 0.5rem;
+      //hides text
+      font-size: 0%;
+      line-height: 0;
+
+      @include skeleton;
+    }
+
+    // on/off text skeleton
+    .#{$prefix}--toggle.#{$prefix}--skeleton
       + .#{$prefix}--toggle-input__label
-      > .#{$prefix}--toggle__switch::before {
-      @include high-contrast-mode('focus');
+      .#{$prefix}--toggle__switch
+      .#{$prefix}--toggle__text--left {
+      @include skeleton;
+
+      position: absolute;
+      width: 1rem;
+      height: 0.5rem;
+    }
+
+    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch
+      .#{$prefix}--toggle__text--left {
+      left: 2rem;
+    }
+
+    //pseudo "toggle" button
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch::after,
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__appearance::after,
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__appearance::before {
+      display: none;
+    }
+
+    //make it square
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch::before {
+      border-radius: 0;
     }
   }
 }

package/scss/components/ui-shell/header/_header.scss

@@ -269,6 +269,25 @@
     position: relative;
   }
 
+  .#{$prefix}--header__submenu--current::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border-bottom: 3px solid $border-interactive;
+    content: '';
+  }
+
+  .#{$prefix}--header__submenu--current:focus {
+    border: 2px solid $focus;
+  }
+
+  .#{$prefix}--header__submenu--current:focus::after {
+    border: 0;
+  }
+
   .#{$prefix}--header__menu-title[aria-haspopup='true'] {
     position: relative;
   }

package/scss/utilities/_box-shadow.scss

@@ -5,10 +5,12 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../theme';
+
 /// Adds box shadow
 /// @access public
 /// @example @include box-shadow;
 /// @group utilities
 @mixin box-shadow {
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 6px theme.$shadow;
 }

package/scss/utilities/_convert.scss

@@ -5,11 +5,12 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:meta';
+@use "sass:math";
+
 /// Default font size
 /// @type Number
 /// @access public
-@use "sass:math";
-
 $base-font-size: 16px !default;
 
 /// Convert a given px unit to a rem unit
@@ -23,7 +24,11 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1rem;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1rem;
+  } @else {
+    @return ($px / $base-font-size) * 1rem;
+  }
 }
 
 /// Convert a given px unit to a em unit
@@ -37,5 +42,9 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1em;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1em;
+  } @else {
+    @return ($px / $base-font-size) * 1em;
+  }
 }