@carbon/styles 1.16.0-rc.0 → 1.17.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.16.0-rc.0",
+  "version": "1.17.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,13 +32,13 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.7.0-rc.0",
+    "@carbon/colors": "^11.7.0",
     "@carbon/feature-flags": "^0.9.0",
     "@carbon/grid": "^11.7.0",
     "@carbon/layout": "^11.7.0",
     "@carbon/motion": "^11.5.0",
-    "@carbon/themes": "^11.11.0-rc.0",
-    "@carbon/type": "^11.11.0-rc.0",
+    "@carbon/themes": "^11.11.0",
+    "@carbon/type": "^11.11.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "a55b418b5a33d88d224b9c35f62ebd09c9586764"
+  "gitHead": "707f5b292f95f7146576a1995350f47582a3b39b"
 }

package/scss/components/fluid-text-input/_fluid-text-input.scss

@@ -31,9 +31,18 @@
     top: rem(13px);
     left: $spacing-05;
     display: flex;
+    width: calc(100% - 2rem);
     height: rem(16px);
     align-items: center;
     margin: 0;
+    -ms-overflow-style: none;
+    overflow-x: scroll;
+    scrollbar-width: none;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--text-input--fluid .#{$prefix}--label::-webkit-scrollbar {
+    display: none;
   }
 
   .#{$prefix}--text-input--fluid .#{$prefix}--form__helper-text {

package/scss/components/notification/_tokens.scss

@@ -13,106 +13,123 @@
 @use '../../themes';
 @use '../../theme';
 @use '../../utilities/component-tokens';
+@use '@carbon/themes/scss/component-tokens' as notification;
+
 @use '../button/tokens' as button-tokens;
 
 $notification-background-error: (
-  fallback: colors.$red-10,
+  fallback: map.get(notification.$notification-background-error, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$red-10,
+      value: map.get(notification.$notification-background-error, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$red-10,
+      value: map.get(notification.$notification-background-error, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-80,
+      value: map.get(notification.$notification-background-error, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-90,
+      value: map.get(notification.$notification-background-error, g-100),
     ),
   ),
 ) !default;
 
 $notification-background-success: (
-  fallback: colors.$green-10,
+  fallback: map.get(notification.$notification-background-success, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$green-10,
+      value: map.get(notification.$notification-background-success, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$green-10,
+      value: map.get(notification.$notification-background-success, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-80,
+      value: map.get(notification.$notification-background-success, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-90,
+      value: map.get(notification.$notification-background-success, g-100),
     ),
   ),
 ) !default;
 
 $notification-background-info: (
-  fallback: colors.$blue-10,
+  fallback: map.get(notification.$notification-background-info, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$blue-10,
+      value: map.get(notification.$notification-background-info, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$blue-10,
+      value: map.get(notification.$notification-background-info, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-80,
+      value: map.get(notification.$notification-background-info, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-90,
+      value: map.get(notification.$notification-background-info, g-100),
     ),
   ),
 ) !default;
 
 $notification-background-warning: (
-  fallback: color.mix(colors.$yellow-30, colors.$white-0, 15%),
+  fallback:
+    color.mix(
+      map.get(notification.$color-map, yellow-30),
+      map.get(notification.$color-map, white-0),
+      15%
+    ),
   values: (
     (
       theme: themes.$white,
-      value: color.mix(colors.$yellow-30, colors.$white-0, 15%),
+      value:
+        color.mix(
+          map.get(notification.$color-map, yellow-30),
+          map.get(notification.$color-map, white-0),
+          15%
+        ),
     ),
     (
       theme: themes.$g10,
-      value: color.mix(colors.$yellow-30, colors.$white-0, 15%),
+      value:
+        color.mix(
+          map.get(notification.$color-map, yellow-30),
+          map.get(notification.$color-map, white-0),
+          15%
+        ),
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-80,
+      value: map.get(notification.$notification-background-warning, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-90,
+      value: map.get(notification.$notification-background-warning, g-100),
     ),
   ),
 ) !default;
 
 $notification-action-hover: (
-  fallback: colors.$white-0,
+  fallback: map.get(notification.$notification-background-info, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$white-0,
+      value: map.get(notification.$notification-background-info, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$white-0,
+      value: map.get(notification.$notification-background-info, g-10),
     ),
     (
       theme: themes.$g90,
@@ -127,70 +144,161 @@ $notification-action-hover: (
 
 $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)
+  values: (
+    (
+      theme: themes.$white,
+      value:
+        map.get(notification.$notification-action-tertiary-inverse, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(notification.$notification-action-tertiary-inverse, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(notification.$notification-action-tertiary-inverse, g-90),
     ),
+    (
+      theme: themes.$g100,
+      value: map.get(notification.$notification-action-tertiary-inverse, g-100),
+    ),
+  ),
 ) !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)
+  values: (
+    (
+      theme: themes.$white,
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-active,
+          white-theme
+        ),
+    ),
+    (
+      theme: themes.$g10,
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-active, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-active, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-active,
+          g-100
+        ),
     ),
+  ),
 ) !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)
+  values: (
+    (
+      theme: themes.$white,
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-hover,
+          white-theme
+        ),
+    ),
+    (
+      theme: themes.$g10,
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-hover, g-10),
     ),
+    (
+      theme: themes.$g90,
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-hover, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-hover, g-100),
+    ),
+  ),
 ) !default;
 
 $notification-action-tertiary-inverse-text: (
-  fallback: map.get(themes.$white, text-inverse),
+  fallback:
+    map.get(
+      notification.$notification-action-tertiary-inverse-text,
+      white-theme
+    ),
   values: (
     (
       theme: themes.$white,
-      value: map.get(themes.$g100, text-inverse),
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-text,
+          white-theme
+        ),
     ),
     (
       theme: themes.$g10,
-      value: map.get(themes.$g90, text-inverse),
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-text, g-10),
     ),
     (
       theme: themes.$g90,
-      value: map.get(themes.$g10, text-inverse),
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-text, g-90),
     ),
     (
       theme: themes.$g100,
-      value: map.get(themes.$white, text-inverse),
+      value:
+        map.get(notification.$notification-action-tertiary-inverse-text, g-100),
     ),
   ),
 ) !default;
 
 $notification-action-tertiary-inverse-text-on-color-disabled: (
-  fallback: map.get(themes.$white, text-on-color-disabled),
+  fallback:
+    map.get(
+      notification.$notification-action-tertiary-inverse-text-on-color-disabled,
+      white-theme
+    ),
   values: (
     (
       theme: themes.$white,
-      value: map.get(themes.$g100, text-on-color-disabled),
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-text-on-color-disabled,
+          white-theme
+        ),
     ),
     (
       theme: themes.$g10,
-      value: map.get(themes.$g90, text-on-color-disabled),
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-text-on-color-disabled,
+          g-10
+        ),
     ),
     (
       theme: themes.$g90,
-      value: map.get(themes.$g10, text-on-color-disabled),
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-text-on-color-disabled,
+          g-90
+        ),
     ),
     (
       theme: themes.$g100,
-      value: map.get(themes.$white, text-on-color-disabled),
+      value:
+        map.get(
+          notification.$notification-action-tertiary-inverse-text-on-color-disabled,
+          g-100
+        ),
     ),
   ),
 ) !default;

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

@@ -273,6 +273,11 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     margin-top: 0.625rem;
   }
 
+  .#{$prefix}--progress.#{$prefix}--progress--vertical.#{$prefix}--skeleton
+    .#{$prefix}--progress-label {
+    margin-top: 0.0625rem;
+  }
+
   // Vertical Variant
 
   .#{$prefix}--progress--vertical {

package/scss/components/text-input/_text-input.scss

@@ -94,17 +94,13 @@
     width: 100%;
   }
 
-  .#{$prefix}--text-input__invalid-icon,
-  .#{$prefix}--text-input__readonly-icon {
+  .#{$prefix}--text-input__invalid-icon {
     position: absolute;
     // top/transform used to center invalid icon in IE11
     top: 50%;
     right: $spacing-05;
-    transform: translateY(-50%);
-  }
-
-  .#{$prefix}--text-input__invalid-icon {
     fill: $support-error;
+    transform: translateY(-50%);
   }
 
   .#{$prefix}--text-input__invalid-icon--warning {
@@ -175,8 +171,7 @@
   }
 
   .#{$prefix}--text-input--invalid,
-  .#{$prefix}--text-input--warning,
-  .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
+  .#{$prefix}--text-input--warning {
     padding-right: $spacing-08;
   }
 

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

@@ -268,6 +268,22 @@
     border: 0;
   }
 
+  .#{$prefix}--header__submenu .#{$prefix}--header__menu {
+    a.#{$prefix}--header__menu-item[aria-current='page']::after,
+    .#{$prefix}--header__menu-item--current::after {
+      bottom: 0;
+      left: -2px;
+      border-bottom: none;
+      border-left: 3px solid $border-interactive;
+    }
+
+    a.#{$prefix}--header__menu-item[aria-current='page']:focus::after,
+    .#{$prefix}--header__menu-item--current:focus::after {
+      left: 0;
+      border-left: 3px solid $border-interactive;
+    }
+  }
+
   a.#{$prefix}--header__menu-item[aria-current='page']:focus,
   a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item--current:focus {
     border: 2px solid $focus;