@carbon/styles 1.66.1 → 1.67.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.66.1",
+  "version": "1.67.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,18 +40,18 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.27.1",
-    "@carbon/feature-flags": "^0.23.1",
-    "@carbon/grid": "^11.28.1",
-    "@carbon/layout": "^11.27.1",
-    "@carbon/motion": "^11.23.1",
-    "@carbon/themes": "^11.41.1",
-    "@carbon/type": "^11.32.1",
+    "@carbon/colors": "^11.27.0",
+    "@carbon/feature-flags": "^0.23.0",
+    "@carbon/grid": "^11.28.0",
+    "@carbon/layout": "^11.27.0",
+    "@carbon/motion": "^11.23.0",
+    "@carbon/themes": "^11.42.0-rc.0",
+    "@carbon/type": "^11.32.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.33.1",
+    "@carbon/test-utils": "^10.33.0",
     "autoprefixer": "^10.4.7",
     "browserslist-config-carbon": "^11.2.0",
     "css": "^3.0.0",
@@ -67,5 +67,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "2df4c295d300f96fae292a00b88f07a99e9a80c7"
+  "gitHead": "99debcc48ebc5f9a5ee5848fef06af4ee6448c30"
 }

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

@@ -145,6 +145,7 @@
   }
 
   .#{$prefix}--toast-notification__details {
+    margin-block-end: $spacing-05;
     margin-inline-end: $spacing-05;
   }
 
@@ -212,7 +213,6 @@
     @include type-style('body-compact-01');
 
     color: $text-inverse;
-    margin-block-end: $spacing-05;
     padding-block-start: $spacing-03;
   }
 

package/scss/components/notification/_tokens.scss

@@ -84,30 +84,15 @@ $notification-background-info: (
 ) !default;
 
 $notification-background-warning: (
-  fallback:
-    color.mix(
-      map.get(notification.$color-map, yellow-30),
-      map.get(notification.$color-map, white-0),
-      15%
-    ),
+  fallback: map.get(notification.$notification-background-warning, white-theme),
   values: (
     (
       theme: themes.$white,
-      value:
-        color.mix(
-          map.get(notification.$color-map, yellow-30),
-          map.get(notification.$color-map, white-0),
-          15%
-        ),
+      value: map.get(notification.$notification-background-warning, white-theme),
     ),
     (
       theme: themes.$g10,
-      value:
-        color.mix(
-          map.get(notification.$color-map, yellow-30),
-          map.get(notification.$color-map, white-0),
-          15%
-        ),
+      value: map.get(notification.$notification-background-warning, g-10),
     ),
     (
       theme: themes.$g90,

package/scss/components/tabs/_tabs.scss

@@ -163,28 +163,32 @@
     .#{$prefix}--tab--overflow-nav-button--next::before {
       position: absolute;
       z-index: 1;
-      background: linear-gradient(
-        to right,
-        rgba(255, 255, 255, 0),
-        $background
-      );
       block-size: 100%;
       content: '';
       inline-size: $spacing-03;
       inset-inline-start: -$spacing-03;
     }
 
-    &.#{$prefix}--tabs--contained
+    &:not(.#{$prefix}--tabs--contained) {
       .#{$prefix}--tab--overflow-nav-button--next::before {
-      background-image: linear-gradient(
-        to right,
-        rgba(255, 255, 255, 0),
-        $layer-accent
-      );
+        background: linear-gradient(
+          to right,
+          rgba(255, 255, 255, 0),
+          $background
+        );
+      }
+      .#{$prefix}--tab--overflow-nav-button--previous::before {
+        background: linear-gradient(
+          to left,
+          rgba(255, 255, 255, 0),
+          $background
+        );
+      }
     }
 
     .#{$prefix}--tab--overflow-nav-button--previous {
       position: absolute;
+      z-index: 1;
       inset-block: 0 0;
       inset-inline-start: 0;
     }
@@ -192,20 +196,10 @@
     .#{$prefix}--tab--overflow-nav-button--previous::before {
       position: absolute;
       z-index: 1;
-      background: $background;
       block-size: 100%;
       content: '';
-      inline-size: $spacing-08;
-      inset-inline-end: 0;
-    }
-
-    &.#{$prefix}--tabs--contained
-      .#{$prefix}--tab--overflow-nav-button--previous::before {
-      background: linear-gradient(
-        to left,
-        rgba(255, 255, 255, 0),
-        $layer-accent
-      );
+      inline-size: $spacing-03;
+      inset-inline-end: -$spacing-03;
     }
 
     .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--left {
@@ -624,13 +618,13 @@
 
     .#{$prefix}--tabs__nav-item--disabled {
       background-color: transparent;
-      border-block-end: $tab-underline-disabled;
+      border-block-end: 2px solid $border-subtle;
       color: $tab-text-disabled;
       outline: none;
     }
 
     .#{$prefix}--tabs__nav-item--disabled:hover {
-      border-block-end: $tab-underline-disabled;
+      border-block-end: 2px solid $border-subtle;
       color: $tab-text-disabled;
       cursor: not-allowed;
     }
@@ -652,7 +646,7 @@
 
     .#{$prefix}--tabs__nav-item--disabled:focus,
     .#{$prefix}--tabs__nav-item--disabled:active {
-      border-block-end: $tab-underline-disabled;
+      border-block-end: 2px solid $border-subtle;
       outline: none;
       pointer-events: none;
     }