@carbon/styles 0.5.0-rc.0 → 0.7.0-rc.0

package/docs/sass.md

@@ -383,9 +383,7 @@ you're using from `scss/compat/themes` and set that as your theme.
 
 ```scss
 @use '@carbon/styles/scss/compat/themes' as compat;
-@use '@carbon/styles/scss/themes';
 @use '@carbon/styles/scss/compat/theme' with (
-  $fallback: themes.$g100,
   $theme: compat.$g100,
 );
 ```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.5.0-rc.0",
+  "version": "0.7.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,18 +20,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@carbon/colors": "^10.31.0",
+    "@carbon/colors": "^10.33.0",
     "@carbon/feature-flags": "^0.6.0",
-    "@carbon/grid": "^10.35.0",
-    "@carbon/layout": "^10.31.0",
-    "@carbon/motion": "^10.23.0",
-    "@carbon/themes": "^10.42.0",
-    "@carbon/type": "^10.35.0",
+    "@carbon/grid": "^10.37.0",
+    "@carbon/layout": "^10.33.0",
+    "@carbon/motion": "^10.25.0",
+    "@carbon/themes": "^10.45.0-rc.0",
+    "@carbon/type": "^10.37.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.18.0",
+    "@carbon/test-utils": "^10.19.0",
     "css": "^3.0.0"
   },
-  "gitHead": "9e9df89bc7f1899a6f2d09e9ecdfa107d265baa4"
+  "gitHead": "f0790b800558cdc7aee71fd6f57e6575064fdb80"
 }

package/scss/_config.scss

@@ -10,7 +10,7 @@
 /// @access public
 /// @type String
 /// @group config
-$prefix: 'bx' !default;
+$prefix: 'cds' !default;
 
 /// If true, includes font face mixins in `_css--font-face.scss` depending on the `css--plex` feature flag
 /// @access public

package/scss/compat/_themes.scss

@@ -5,4 +5,31 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward '@carbon/themes/scss/compat/themes' show $white, $g10, $g90, $g100;
+@use 'sass:map';
+@use '@carbon/themes/scss/compat/themes' as compat;
+@use '../themes';
+
+// For our compatability themes, we will merge the themes from v10 and v11 and
+// provide this combination as one of our four default themes.
+//
+// This is useful for situations where a user is trying to use the compatability
+// theme, for example:
+//
+// ```scss
+// @use '@carbon/styles/scss/reset';
+// @use '@carbon/styles/scss/compat/themes';
+// @use '@carbon/styles/scss/compat/theme' with (
+//   $theme: themes.$g100
+// );
+// ```
+//
+// Without merging these themes, then the value of a token in v11 would default
+// to our $white theme. As a result, the user would need to specify both the
+// `$theme` and the `$fallback` to the `scss/compat/theme` module.
+//
+// Now that we merge the themes, this code snippet will function as expected.
+
+$white: map.merge(themes.$white, compat.$white);
+$g10: map.merge(themes.$g10, compat.$g10);
+$g90: map.merge(themes.$g90, compat.$g90);
+$g100: map.merge(themes.$g100, compat.$g100);

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/dropdown/_dropdown.scss

@@ -25,7 +25,7 @@
   .#{$prefix}--dropdown__wrapper--inline {
     display: inline-grid;
     align-items: center;
-    grid-gap: rem(24px);
+    grid-gap: 0 rem(24px);
     grid-template: auto auto / auto min-content;
 
     .#{$prefix}--label {

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

@@ -0,0 +1,410 @@
+//
+// Copyright IBM Corp. 2016, 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 'mixins' as *;
+@use '../../breakpoint' as *;
+@use '../../colors' as *;
+@use '../../config' as *;
+@use '../../feature-flags' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../themes' as *;
+@use '../../type' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/high-contrast-mode' as *;
+@use '../../utilities/focus-outline' as *;
+@use './tokens' as *;
+@use '../button/mixins' as button-mixins;
+@use '../button/vars' as button-vars;
+
+/// Actionable notification styles
+/// @access public
+/// @group notification
+@mixin actionable-notification {
+  .#{$prefix}--actionable-notification {
+    @include reset;
+
+    position: relative;
+    display: flex;
+    width: 100%;
+    min-width: rem(288px);
+    max-width: rem(288px);
+    height: auto;
+    min-height: rem(48px);
+    flex-wrap: wrap;
+    margin-top: $spacing-05;
+    margin-bottom: $spacing-05;
+    color: $text-inverse;
+
+    @include breakpoint(md) {
+      max-width: rem(608px);
+      flex-wrap: nowrap;
+    }
+
+    @include breakpoint(lg) {
+      max-width: rem(736px);
+    }
+
+    @include breakpoint(max) {
+      max-width: rem(832px);
+    }
+  }
+
+  .#{$prefix}--actionable-notification--toast {
+    min-width: rem(288px);
+    max-width: rem(288px);
+    flex-wrap: wrap;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+  }
+
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    a {
+    color: $link-inverse;
+  }
+
+  .#{$prefix}--actionable-notification a {
+    text-decoration: none;
+  }
+
+  .#{$prefix}--actionable-notification a:hover {
+    text-decoration: underline;
+  }
+
+  .#{$prefix}--actionable-notification a:focus {
+    outline: 1px solid $link-inverse;
+  }
+
+  .#{$prefix}--actionable-notification.#{$prefix}--actionable-notification--low-contrast
+    a:focus {
+    @include focus-outline;
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast {
+    color: $text-primary;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      border-width: 1px 1px 1px 0;
+      border-style: solid;
+      content: '';
+      filter: opacity(0.4);
+      pointer-events: none;
+    }
+  }
+
+  .#{$prefix}--actionable-notification--error {
+    @include notification--experimental(
+      $support-error-inverse,
+      $background-inverse
+    );
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--error {
+    @include notification--experimental(
+      $support-error,
+      $notification-background-error
+    );
+
+    &::before {
+      border-color: $support-error;
+    }
+  }
+
+  .#{$prefix}--actionable-notification--success {
+    @include notification--experimental(
+      $support-success-inverse,
+      $background-inverse
+    );
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--success {
+    @include notification--experimental(
+      $support-success,
+      $notification-background-success
+    );
+
+    &::before {
+      border-color: $support-success;
+    }
+  }
+
+  .#{$prefix}--actionable-notification--info,
+  .#{$prefix}--actionable-notification--info-square {
+    @include notification--experimental(
+      $support-info-inverse,
+      $background-inverse
+    );
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--info,
+  .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--info-square {
+    @include notification--experimental(
+      $support-info,
+      $notification-background-info
+    );
+
+    &::before {
+      border-color: $support-info;
+    }
+  }
+
+  .#{$prefix}--actionable-notification--warning,
+  .#{$prefix}--actionable-notification--warning-alt {
+    @include notification--experimental(
+      $support-warning-inverse,
+      $background-inverse
+    );
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--warning,
+  .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--warning-alt {
+    @include notification--experimental(
+      $support-warning,
+      $notification-background-warning
+    );
+
+    &::before {
+      border-color: $support-warning;
+    }
+  }
+
+  .#{$prefix}--actionable-notification--warning
+    .#{$prefix}--inline-notification__icon,
+  .#{$prefix}--actionable-notification--warning
+    .#{$prefix}--toast-notification__icon
+    path[opacity='0'] {
+    fill: $black-100;
+    opacity: 1;
+  }
+
+  .#{$prefix}--actionable-notification__details {
+    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;
+    }
+  }
+
+  .#{$prefix}--actionable-notification .#{$prefix}--inline-notification__icon {
+    flex-shrink: 0;
+    margin-top: rem(14px);
+    margin-right: $spacing-05;
+  }
+
+  .#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon {
+    flex-shrink: 0;
+    margin-top: $spacing-05;
+    margin-right: $spacing-05;
+  }
+
+  .#{$prefix}--actionable-notification__text-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    padding: rem(15px) 0;
+  }
+
+  .#{$prefix}--actionable-notification__content {
+    @include type-style('body-short-01');
+
+    word-break: break-word;
+  }
+
+  /* Ghost action button when inline */
+  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {
+    height: rem(32px);
+    margin-bottom: $spacing-03;
+    margin-left: $spacing-08;
+
+    @include breakpoint(md) {
+      margin: $spacing-03 0;
+    }
+  }
+
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {
+    color: $link-inverse;
+  }
+
+  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:active,
+  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:hover {
+    background-color: $background-inverse-hover;
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:active,
+  .#{$prefix}--actionable-notification--low-contrast
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:hover {
+    background-color: $notification-action-hover;
+  }
+
+  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:focus {
+    border-color: transparent;
+    box-shadow: none;
+    outline: 2px solid $focus-inverse;
+    outline-offset: -2px;
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:focus {
+    outline-color: $focus;
+  }
+
+  .#{$prefix}--actionable-notification--hide-close-button
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {
+    margin-right: $spacing-03;
+  }
+
+  /* Tertiary action button when not inline (toast) */
+  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary {
+    margin-bottom: $spacing-03;
+
+    // Button should be left aligned with text. 20px is the width of the notification icon
+    margin-left: calc(#{$spacing-07} + #{rem(20px)});
+  }
+
+  // Tertiary button styles by default use mostly "inverse" tokens. Since the non-low-contrast notification
+  // background is dark, the button styles have to be inversed again.
+  // So essentially the:
+  // btn-tertiary white theme button styles should become g100 button styles
+  // btn-tertiary g10 theme button styles should become g90 button styles
+  // btn-tertiary g90 theme button styles should become g10 button styles
+  // btn-tertiary g100 theme button styles should become white button styles
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary {
+    @include button-mixins.button-theme(
+      transparent,
+      $notification-action-tertiary-inverse,
+      $notification-action-tertiary-inverse,
+      $notification-action-tertiary-inverse-hover,
+      currentColor,
+      $notification-action-tertiary-inverse-active
+    );
+  }
+
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:hover {
+    color: $notification-action-tertiary-inverse-text;
+  }
+
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:focus {
+    border-color: $focus-inverse;
+    background-color: $notification-action-tertiary-inverse;
+    box-shadow: inset 0 0 0 button-vars.$button-outline-width $focus-inverse,
+      inset 0 0 0 button-vars.$button-border-width $background-inverse;
+    color: $notification-action-tertiary-inverse-text;
+  }
+
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:active {
+    border-color: transparent;
+    background-color: $notification-action-tertiary-inverse-active;
+    color: $notification-action-tertiary-inverse-text;
+  }
+
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:disabled,
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:hover:disabled,
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:focus:disabled,
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled,
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled:hover,
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled:focus {
+    background: transparent;
+    color: $notification-action-tertiary-inverse-text-on-color-disabled;
+    outline: none;
+  }
+
+  .#{$prefix}--actionable-notification--hide-close-button
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary {
+    margin-right: $spacing-03;
+  }
+
+  .#{$prefix}--actionable-notification__close-button {
+    @include focus-outline('reset');
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    width: rem(48px);
+    min-width: rem(48px);
+    max-width: rem(48px);
+    height: rem(48px);
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    transition: outline $duration-fast-02 motion(standard, productive),
+      background-color $duration-fast-02 motion(standard, productive);
+
+    &:focus {
+      outline: 2px solid $focus-inverse;
+      outline-offset: -2px;
+    }
+
+    .#{$prefix}--actionable-notification__close-icon {
+      fill: $icon-inverse;
+    }
+
+    @include breakpoint(md) {
+      position: static;
+    }
+  }
+
+  .#{$prefix}--actionable-notification--toast
+    .#{$prefix}--actionable-notification__close-button {
+    @include breakpoint(md) {
+      position: absolute;
+    }
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast
+    .#{$prefix}--actionable-notification__close-button:focus {
+    @include focus-outline('outline');
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast
+    .#{$prefix}--actionable-notification__close-button
+    .#{$prefix}--actionable-notification__close-icon {
+    fill: $icon-primary;
+  }
+
+  // Windows HCM fix
+  /* stylelint-disable */
+  .#{$prefix}--actionable-notification {
+    @include high-contrast-mode('outline');
+  }
+
+  .#{$prefix}--actionable-notification__close-button:focus,
+  .#{$prefix}--btn.#{$prefix}--btn--ghost.#{$prefix}--actionable-notification__action-button:focus {
+    @include high-contrast-mode('focus');
+  }
+
+  .#{$prefix}--actionable-notification .#{$prefix}--inline-notification__icon,
+  .#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon {
+    @include high-contrast-mode('icon-fill');
+  }
+  /* stylelint-enable */
+}

package/scss/components/notification/_index.scss

@@ -8,12 +8,15 @@
 @forward './tokens';
 @forward 'inline-notification';
 @forward 'toast-notification';
+@forward 'actionable-notification';
 
 @use '../../theme';
 @use './tokens';
 @use './inline-notification';
 @use './toast-notification';
+@use './actionable-notification';
 
 @include theme.add-component-tokens(tokens.$notification-tokens);
 @include inline-notification.inline-notification;
 @include toast-notification.toast-notification;
+@include actionable-notification.actionable-notification;

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

@@ -197,7 +197,7 @@
     padding: rem(15px) 0;
   }
 
-  @if enabled('enable-v11-release') {
+  @if feature-flag-enabled('enable-v11-release') {
     .#{$prefix}--inline-notification__content {
       @include type-style('body-short-01');
 

package/scss/components/notification/_mixins.scss

@@ -35,7 +35,8 @@
   background: $background-color;
 
   .#{$prefix}--inline-notification__icon,
-  .#{$prefix}--toast-notification__icon {
+  .#{$prefix}--toast-notification__icon,
+  .#{$prefix}--actionable-notification__icon {
     fill: $color;
   }
 }

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

@@ -146,7 +146,7 @@
     margin-right: $spacing-05;
   }
 
-  @if enabled('enable-v11-release') {
+  @if feature-flag-enabled('enable-v11-release') {
     .#{$prefix}--toast-notification__content {
       @include type-style('body-short-01');
 
@@ -205,7 +205,7 @@
     fill: $icon-primary;
   }
 
-  @if not enabled('enable-v11-release') {
+  @if not feature-flag-enabled('enable-v11-release') {
     .#{$prefix}--toast-notification__title {
       @include type-style('productive-heading-01');
 

package/scss/components/notification/_tokens.scss

@@ -6,10 +6,13 @@
 //
 
 @use 'sass:color';
+@use "sass:map";
+@use "sass:list";
 @use '../../colors';
 @use '../../themes';
 @use '../../theme';
 @use '../../utilities/component-tokens';
+@use '../button/tokens' as button-tokens;
 
 $notification-background-error: (
   fallback: colors.$red-10,
@@ -121,12 +124,91 @@ $notification-action-hover: (
   ),
 ) !default;
 
+$notification-action-tertiary-inverse: (
+  fallback: map.get(button-tokens.$button-tokens, button-tertiary, fallback),
+  values:
+    component-tokens.get-inverse-theme-values(
+      map.get(button-tokens.$button-tokens, button-tertiary)
+    ),
+) !default;
+
+$notification-action-tertiary-inverse-active: (
+  fallback:
+    map.get(button-tokens.$button-tokens, button-tertiary-active, fallback),
+  values:
+    component-tokens.get-inverse-theme-values(
+      map.get(button-tokens.$button-tokens, button-tertiary-active)
+    ),
+) !default;
+
+$notification-action-tertiary-inverse-hover: (
+  fallback:
+    map.get(button-tokens.$button-tokens, button-tertiary-hover, fallback),
+  values:
+    component-tokens.get-inverse-theme-values(
+      map.get(button-tokens.$button-tokens, button-tertiary-hover)
+    ),
+) !default;
+
+$notification-action-tertiary-inverse-text: (
+  fallback: map.get(themes.$white, text-inverse),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(themes.$g100, text-inverse),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(themes.$g90, text-inverse),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(themes.$g10, text-inverse),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(themes.$white, text-inverse),
+    ),
+  ),
+) !default;
+
+$notification-action-tertiary-inverse-text-on-color-disabled: (
+  fallback: map.get(themes.$white, text-on-color-disabled),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(themes.$g100, text-on-color-disabled),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(themes.$g90, text-on-color-disabled),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(themes.$g10, text-on-color-disabled),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(themes.$white, text-on-color-disabled),
+    ),
+  ),
+) !default;
+
 $notification-tokens: (
   notification-background-error: $notification-background-error,
   notification-background-success: $notification-background-success,
   notification-background-info: $notification-background-info,
   notification-background-warning: $notification-background-warning,
   notification-action-hover: $notification-action-hover,
+  notification-action-tertiary-inverse: $notification-action-tertiary-inverse,
+  notification-action-tertiary-inverse-active:
+    $notification-action-tertiary-inverse-active,
+  notification-action-tertiary-inverse-hover:
+    $notification-action-tertiary-inverse-hover,
+  notification-action-tertiary-inverse-text:
+    $notification-action-tertiary-inverse-text,
+  notification-action-tertiary-inverse-text-on-color-disabled:
+    $notification-action-tertiary-inverse-text-on-color-disabled,
 );
 
 $notification-background-error: component-tokens.get-var(
@@ -153,3 +235,28 @@ $notification-action-hover: component-tokens.get-var(
   $notification-action-hover,
   'notification-action-hover'
 );
+
+$notification-action-tertiary-inverse: component-tokens.get-var(
+  $notification-action-tertiary-inverse,
+  'notification-action-tertiary-inverse'
+);
+
+$notification-action-tertiary-inverse-active: component-tokens.get-var(
+  $notification-action-tertiary-inverse-active,
+  'notification-action-tertiary-inverse-active'
+);
+
+$notification-action-tertiary-inverse-hover: component-tokens.get-var(
+  $notification-action-tertiary-inverse-hover,
+  'notification-action-tertiary-inverse-hover'
+);
+
+$notification-action-tertiary-inverse-text: component-tokens.get-var(
+  $notification-action-tertiary-inverse-text,
+  'notification-action-tertiary-inverse-text'
+);
+
+$notification-action-tertiary-inverse-text-on-color-disabled: component-tokens.get-var(
+  $notification-action-tertiary-inverse-text-on-color-disabled,
+  'notification-action-tertiary-inverse-text-on-color-disabled'
+);

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/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/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/_component-tokens.scss

@@ -7,6 +7,7 @@
 
 @use 'sass:map';
 @use 'sass:meta';
+@use "sass:list";
 @use '../themes';
 @use '../theme';
 @use './custom-property';
@@ -53,3 +54,48 @@
 
   @return custom-property.get-var($name, $token-map);
 }
+
+/// Get inverse theme values for a given component token.
+/// @param {any} $token-map The possible values for the token, this value can
+/// be a plain value used as a CSS value or a Sass Map
+@function get-inverse-theme-values($token-map) {
+  $inverse-theme-values: ();
+  $inverse-value: ();
+
+  @each $theme-value in map.get($token-map, values) {
+    $theme: map.get($theme-value, theme);
+    $value: map.get($theme-value, value);
+
+    @if $theme == themes.$g100 {
+      $inverse-value: (
+        theme: themes.$white,
+        value: $value,
+      );
+    }
+
+    @if $theme == themes.$g90 {
+      $inverse-value: (
+        theme: themes.$g10,
+        value: $value,
+      );
+    }
+
+    @if $theme == themes.$g10 {
+      $inverse-value: (
+        theme: themes.$g90,
+        value: $value,
+      );
+    }
+
+    @if $theme == themes.$white {
+      $inverse-value: (
+        theme: themes.$g100,
+        value: $value,
+      );
+    }
+
+    $inverse-theme-values: list.append($inverse-theme-values, $inverse-value);
+  }
+
+  @return $inverse-theme-values;
+}