@carbon/styles 1.81.0 → 1.82.0

package/scss/components/content-switcher/_tokens.scss

@@ -0,0 +1,110 @@
+//
+// Copyright IBM Corp. 2025
+//
+// 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 'sass:color';
+@use 'sass:map';
+@use '../../config';
+@use '../../colors';
+@use '../../themes';
+@use '../../theme' as *;
+@use '../../utilities/component-tokens';
+@use '@carbon/themes/scss/component-tokens' as content-switcher;
+
+// content-switcher-background
+$content-switcher-background: (
+  fallback: map.get(content-switcher.$content-switcher-background, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(content-switcher.$content-switcher-background, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(content-switcher.$content-switcher-background, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(content-switcher.$content-switcher-background, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(content-switcher.$content-switcher-background, g-100),
+    ),
+  ),
+) !default;
+
+// content-switcher-background-hover
+$content-switcher-background-hover: (
+  fallback:
+    map.get(content-switcher.$content-switcher-background-hover, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value:
+        map.get(
+          content-switcher.$content-switcher-background-hover,
+          white-theme
+        ),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(content-switcher.$content-switcher-background-hover, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(content-switcher.$content-switcher-background-hover, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(content-switcher.$content-switcher-background-hover, g-100),
+    ),
+  ),
+) !default;
+
+// content-switcher-selected
+$content-switcher-selected: (
+  fallback: map.get(content-switcher.$content-switcher-selected, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(content-switcher.$content-switcher-selected, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(content-switcher.$content-switcher-selected, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(content-switcher.$content-switcher-selected, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(content-switcher.$content-switcher-selected, g-100),
+    ),
+  ),
+) !default;
+
+// Add to $content-switcher-tokens map
+$content-switcher-tokens: (
+  content-switcher-background: $content-switcher-background,
+  content-switcher-background-hover: $content-switcher-background-hover,
+  content-switcher-selected: $content-switcher-selected,
+);
+
+// Generate CSS custom properties for each token
+$content-switcher-background: component-tokens.get-var(
+  $content-switcher-background,
+  'content-switcher-background'
+);
+$content-switcher-background-hover: component-tokens.get-var(
+  $content-switcher-background-hover,
+  'content-switcher-background-hover'
+);
+$content-switcher-selected: component-tokens.get-var(
+  $content-switcher-selected,
+  'content-switcher-selected'
+);

package/scss/components/modal/_modal.scss

@@ -176,6 +176,8 @@
     grid-column: 1/-1;
     grid-row: 1/1;
     margin-block-end: $spacing-03;
+    max-block-size: 50vh;
+    overflow-y: auto;
     padding-block-start: $spacing-05;
     padding-inline: $spacing-05 $spacing-09;
   }

package/scss/components/slider/_slider.scss

@@ -22,6 +22,7 @@
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert';
 @use '../../utilities/custom-property';
+@use '../../utilities/visually-hidden' as *;
 
 /// Slider styles
 /// @access public

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

@@ -19,6 +19,7 @@
 @use '../../utilities/placeholder-colors' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/layout';
+@use '../../utilities/visually-hidden' as *;
 
 /// Text area styles
 /// @access public

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

@@ -25,6 +25,7 @@
 @use '../../utilities/layout';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/button-reset';
+@use '../../utilities/visually-hidden' as *;
 
 /// Text input styles
 /// @access public

package/scss/components/tooltip/_tooltip.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -36,6 +36,7 @@ $tooltip-padding-inline: custom-property.get-var(
 
     padding: $tooltip-padding-block $tooltip-padding-inline;
     max-inline-size: convert.to-rem(288px);
+    overflow-wrap: break-word;
   }
 }
 

package/scss/layer/_layer-sets.scss

@@ -19,6 +19,11 @@ $-default-layer-sets: (
     theme.$layer-active-02,
     theme.$layer-active-03,
   ),
+  layer-background: (
+    theme.$layer-background-01,
+    theme.$layer-background-02,
+    theme.$layer-background-03,
+  ),
   layer-hover: (
     theme.$layer-hover-01,
     theme.$layer-hover-02,

package/scss/theme/_theme.scss

@@ -25,6 +25,7 @@
 // Layer sets
 $layer: custom-property.get-var('layer');
 $layer-active: custom-property.get-var('layer-active');
+$layer-background: custom-property.get-var('layer-background');
 $layer-hover: custom-property.get-var('layer-hover');
 $layer-selected: custom-property.get-var('layer-selected');
 $layer-selected-hover: custom-property.get-var('layer-selected-hover');