@carbon/styles 1.82.0-rc.0 → 1.83.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.82.0-rc.0",
+  "version": "1.83.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.33.0",
-    "@carbon/feature-flags": "^0.26.0",
-    "@carbon/grid": "^11.36.0",
-    "@carbon/layout": "^11.34.0",
-    "@carbon/motion": "^11.28.0",
-    "@carbon/themes": "^11.52.0",
-    "@carbon/type": "^11.40.0",
+    "@carbon/colors": "^11.34.0-rc.0",
+    "@carbon/feature-flags": "^0.27.0-rc.0",
+    "@carbon/grid": "^11.37.0-rc.0",
+    "@carbon/layout": "^11.35.0-rc.0",
+    "@carbon/motion": "^11.29.0-rc.0",
+    "@carbon/themes": "^11.54.0-rc.0",
+    "@carbon/type": "^11.41.0-rc.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "0.0.3-alpha.0",
     "@ibm/plex-sans": "0.0.3-alpha.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "184bbaf4d986f623be415b47b933c56b19655774"
+  "gitHead": "fcae2645f1b5a1a01b5629926df471ec1945d1e6"
 }

package/scss/__tests__/theme-test.js

@@ -46,16 +46,19 @@ describe('@carbon/styles/scss/theme', () => {
         "background-inverse-hover",
         "layer-01",
         "layer-active-01",
+        "layer-background-01",
         "layer-hover-01",
         "layer-selected-01",
         "layer-selected-hover-01",
         "layer-02",
         "layer-active-02",
+        "layer-background-02",
         "layer-hover-02",
         "layer-selected-02",
         "layer-selected-hover-02",
         "layer-03",
         "layer-active-03",
+        "layer-background-03",
         "layer-hover-03",
         "layer-selected-03",
         "layer-selected-hover-03",
@@ -177,6 +180,7 @@ describe('@carbon/styles/scss/theme', () => {
         "skeleton-element",
         "layer",
         "layer-active",
+        "layer-background",
         "layer-hover",
         "layer-selected",
         "layer-selected-hover",

package/scss/_layer.scss

@@ -8,6 +8,7 @@
 @forward './layer/layer-sets';
 @use './config' as *;
 @use './layer/layer-tokens';
+@use './theme' as *;
 
 :root {
   @include layer-tokens.emit-layer-tokens(1);
@@ -24,3 +25,9 @@
 .#{$prefix}--layer-three {
   @include layer-tokens.emit-layer-tokens(3);
 }
+
+@each $i in (one, two, three) {
+  .#{$prefix}--layer-#{$i}.#{$prefix}--layer__with-background {
+    background-color: $layer-background;
+  }
+}

package/scss/_reset.scss

@@ -172,7 +172,8 @@
 
   @include type.reset();
 
-  /// Makes SVGs accessible in high contrast mode
+  /// Makes SVGs accessible in high contrast mode, although it only works sporadically as other CSS selectors
+  /// routinely override this one.
   /// @link https://github.com/IBM/carbon-elements/issues/345#issuecomment-466577293 Carbon-elements #345
   @media screen and (-ms-high-contrast: active) {
     svg {

package/scss/_theme.scss

@@ -8,12 +8,61 @@
 @forward './theme/theme' hide theme;
 @use './theme/theme';
 @use './layer/layer-tokens';
+@use './utilities/custom-property';
 
 /// Include the CSS Custom Properties for the active theme or a given theme on
 /// a selector
 @mixin theme($args...) {
   @include theme.theme($args...);
 
+  // If the system is in high-contrast mode, use the system defined colors.  This mostly happens automatically, but
+  // we need to do it manually for icons and selected backgrounds.  Importantly, the custom properties we set here
+  // need to override the CSS custom properties set above.  See:
+  // - https://github.com/carbon-design-system/carbon/issues/19015
+  // - https://developer.mozilla.org/en-US/docs/Web/CSS/system-color.
+  // - https://carbondesignsystem.com/elements/color/tokens/#icon
+  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
+    // Icon colors specified by "fill".
+    @include custom-property.declaration('icon-primary', ButtonText);
+    @include custom-property.declaration('icon-secondary', ButtonText);
+    @include custom-property.declaration('icon-interactive', ButtonText);
+    @include custom-property.declaration('icon-disabled', GrayText);
+    @include custom-property.declaration('icon-on-color-disabled', GrayText);
+
+    // Since icon-inverse and icon-on-color are generally used to indicated selected icons, use SelectedItemText.
+    @include custom-property.declaration('icon-inverse', SelectedItemText);
+    @include custom-property.declaration('icon-on-color', SelectedItemText);
+
+    // Some components currently set these values for fill, although unclear if that's valid.
+    @include custom-property.declaration('button-disabled', GrayText);
+    @include custom-property.declaration('interactive', ButtonText);
+    @include custom-property.declaration('link-primary', LinkText);
+    @include custom-property.declaration('link-primary-hover', LinkText);
+    @include custom-property.declaration('link-secondary', LinkText);
+    @include custom-property.declaration('link-inverse', SelectedItemText);
+    @include custom-property.declaration(
+      'link-inverse-hover',
+      SelectedItemText
+    );
+    @include custom-property.declaration(
+      'link-inverse-visited',
+      SelectedItemText
+    );
+    @include custom-property.declaration('link-visited', VisitedText);
+
+    // Force a background-color for selected buttons etc., otherwise the user won't know they are selected.
+    @include custom-property.declaration('background-selected', SelectedItem);
+    @include custom-property.declaration(
+      'background-selected-hover',
+      SelectedItem
+    );
+    @include custom-property.declaration('background-inverse', SelectedItem);
+    @include custom-property.declaration(
+      'layer-selected-inverse',
+      SelectedItem
+    );
+  }
+
   // Note: we need to re-emit the contextual layer tokens as part of the theme
   // mixin. Otherwise, the layer tokens are defined at the :root level and will
   // not pick up the theme-specific, or zone-specific, value from the first

package/scss/_zone.scss

@@ -18,6 +18,7 @@
 @use './components/notification/tokens' as notification;
 @use './components/tag/tokens' as tag;
 @use './components/icon-indicator/tokens' as icon-indicator;
+@use './components/content-switcher/tokens' as content-switcher;
 
 /// Specify a Map of zones where the key will be used as part of the selector
 /// and the value will be a map used to emit CSS Custom Properties for all color
@@ -33,7 +34,8 @@ $-components: (
   button.$button-tokens,
   notification.$notification-tokens,
   tag.$tag-tokens,
-  icon-indicator.$status-tokens
+  icon-indicator.$status-tokens,
+  content-switcher.$content-switcher-tokens
 );
 
 @each $name, $theme in $zones {

package/scss/components/accordion/_accordion.scss

@@ -17,7 +17,6 @@
 @use '../../utilities/convert';
 @use '../../utilities/layout';
 @use '../../utilities/focus-outline' as *;
-@use '../../utilities/high-contrast-mode' as *;
 
 /// @type Value
 /// @access public
@@ -385,12 +384,6 @@ $content-padding: 0 0 0 $spacing-05 !default;
     margin-inline-start: $spacing-05;
   }
 
-  // Windows HCM fix
-  .#{$prefix}--accordion__arrow,
-  .#{$prefix}--accordion__item--active .#{$prefix}--accordion__arrow {
-    @include high-contrast-mode('icon-fill');
-  }
-
   // RTL overrides
   [dir='rtl'] .#{$prefix}--accordion--start .#{$prefix}--accordion__heading {
     padding-inline: layout.density('padding-inline') 0;

package/scss/components/breadcrumb/_breadcrumb.scss

@@ -176,7 +176,7 @@
   .#{$prefix}--breadcrumb-item
     .#{$prefix}--overflow-menu:active
     .#{$prefix}--overflow-menu__icon {
-    fill: $text-primary;
+    fill: $icon-primary;
   }
 
   .#{$prefix}--breadcrumb-menu-options:focus {

package/scss/components/button/_button.scss

@@ -421,15 +421,6 @@
     @include high-contrast-mode('focus');
   }
 
-  // Windows HCM fix
-
-  .#{$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');
-  }
-
   // RTL overrides
   [dir='rtl'] .#{$prefix}--btn-set .#{$prefix}--btn:not(:focus) {
     box-shadow: convert.to-rem(1px) 0 0 0 $button-separator;

package/scss/components/checkbox/_checkbox.scss

@@ -12,6 +12,7 @@
 @use '../../type' as *;
 @use '../../utilities/component-reset';
 @use '../../utilities/convert';
+@use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/visually-hidden' as *;
 
@@ -91,6 +92,9 @@
     position: absolute;
     border: 1px solid $icon-primary;
     border-radius: 2px;
+    @include high-contrast-mode {
+      border: 1px solid ButtonBorder;
+    }
 
     // Checkboxes with a background color look visually off against a parent container.
     background-color: transparent;
@@ -136,6 +140,13 @@
     border: none;
     border-width: 1px;
     background-color: $icon-primary;
+
+    // According to https://developer.mozilla.org/en-US/docs/Web/CSS/system-color, in high contrast mode, the
+    // checkbox should be displayed using SelectedItem and SelectedItemText.
+    @include high-contrast-mode {
+      border: 1px solid ButtonBorder;
+      background-color: SelectedItem;
+    }
   }
 
   // Display the check
@@ -326,6 +337,12 @@
     .#{$prefix}--checkbox:checked
     + .#{$prefix}--checkbox-label::after {
     border-color: $text-primary;
+
+    // According to https://developer.mozilla.org/en-US/docs/Web/CSS/system-color, in high contrast mode, the
+    // checkbox should be displayed using SelectedItem and SelectedItemText.
+    @include high-contrast-mode {
+      fill: SelectedItemText;
+    }
   }
 
   //-----------------------------------------------

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

@@ -555,11 +555,6 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   // Windows HCM fix
-
-  .#{$prefix}--snippet__icon {
-    @include high-contrast-mode('icon-fill');
-  }
-
   .#{$prefix}--snippet--inline:focus {
     @include high-contrast-mode('focus');
   }