@carbon/themes 11.52.0-rc.0 → 11.53.0

package/src/g90.js

@@ -66,6 +66,7 @@ export const backgroundSelectedHover = adjustAlpha(gray50, 0.32);
 // layer-01
 export const layer01 = gray80;
 export const layerActive01 = gray60;
+export const layerBackground01 = gray90;
 export const layerHover01 = gray80Hover;
 export const layerSelected01 = gray70;
 export const layerSelectedHover01 = gray70Hover;
@@ -73,6 +74,7 @@ export const layerSelectedHover01 = gray70Hover;
 // layer-02
 export const layer02 = gray70;
 export const layerActive02 = gray50;
+export const layerBackground02 = gray80;
 export const layerHover02 = gray70Hover;
 export const layerSelected02 = gray60;
 export const layerSelectedHover02 = gray60Hover;
@@ -80,6 +82,7 @@ export const layerSelectedHover02 = gray60Hover;
 // layer-03
 export const layer03 = gray60;
 export const layerActive03 = gray80;
+export const layerBackground03 = gray70;
 export const layerHover03 = gray60Hover;
 export const layerSelected03 = gray70;
 export const layerSelectedHover03 = gray70Hover;

package/src/index.js

@@ -14,6 +14,7 @@ import * as buttonTokens from './component-tokens/button';
 import * as tagTokens from './component-tokens/tag';
 import * as notificationTokens from './component-tokens/notification';
 import * as statusTokens from './component-tokens/status';
+import * as contentSwitcherTokens from './component-tokens/content-switcher';
 import { formatTokenName } from './tools';
 import { unstable_metadata } from './tokens';
 
@@ -36,6 +37,7 @@ export {
   tagTokens,
   notificationTokens,
   statusTokens,
+  contentSwitcherTokens,
   unstable_metadata,
   formatTokenName,
 };

package/src/tokens/components.js

@@ -108,3 +108,13 @@ export const status = TokenGroup.create({
     'status-gray',
   ],
 });
+
+export const contentSwitcher = TokenGroup.create({
+  name: 'Content Switcher',
+  properties: [],
+  tokens: [
+    'content-switcher-selected',
+    'content-switcher-background',
+    'content-switcher-background-hover',
+  ],
+});

package/src/tokens/v11TokenGroup.js

@@ -48,6 +48,9 @@ export const layer = TokenGroup.create({
       state: 'active',
       name: 'layer-active-01',
     },
+    {
+      name: 'layer-background-01',
+    },
     {
       state: 'hover',
       name: 'layer-hover-01',
@@ -67,6 +70,9 @@ export const layer = TokenGroup.create({
       state: 'active',
       name: 'layer-active-02',
     },
+    {
+      name: 'layer-background-02',
+    },
     {
       state: 'hover',
       name: 'layer-hover-02',
@@ -86,6 +92,9 @@ export const layer = TokenGroup.create({
       state: 'active',
       name: 'layer-active-03',
     },
+    {
+      name: 'layer-background-03',
+    },
     {
       state: 'hover',
       name: 'layer-hover-03',

package/src/tokens/v11TokenSet.js

@@ -26,6 +26,7 @@ export const set = TokenSet.create({
       tokens: [
         layer.getToken('layer-01'),
         layer.getToken('layer-active-01'),
+        layer.getToken('layer-background-01'),
         layer.getToken('layer-hover-01'),
         layer.getToken('layer-selected-hover-01'),
         layer.getToken('layer-accent-01'),
@@ -48,6 +49,7 @@ export const set = TokenSet.create({
       tokens: [
         layer.getToken('layer-02'),
         layer.getToken('layer-active-02'),
+        layer.getToken('layer-background-02'),
         layer.getToken('layer-hover-02'),
         layer.getToken('layer-selected-hover-02'),
         layer.getToken('layer-accent-02'),
@@ -70,6 +72,7 @@ export const set = TokenSet.create({
       tokens: [
         layer.getToken('layer-03'),
         layer.getToken('layer-active-03'),
+        layer.getToken('layer-background-03'),
         layer.getToken('layer-hover-03'),
         layer.getToken('layer-selected-hover-03'),
         layer.getToken('layer-accent-03'),

package/src/white.js

@@ -62,6 +62,7 @@ export const backgroundSelectedHover = adjustAlpha(gray50, 0.32);
 // layer-01
 export const layer01 = gray10;
 export const layerActive01 = gray30;
+export const layerBackground01 = white;
 export const layerHover01 = gray10Hover;
 export const layerSelected01 = gray20;
 export const layerSelectedHover01 = gray20Hover;
@@ -69,6 +70,7 @@ export const layerSelectedHover01 = gray20Hover;
 // layer-02
 export const layer02 = white;
 export const layerActive02 = gray30;
+export const layerBackground02 = gray10;
 export const layerHover02 = whiteHover;
 export const layerSelected02 = gray20;
 export const layerSelectedHover02 = gray20Hover;
@@ -76,6 +78,7 @@ export const layerSelectedHover02 = gray20Hover;
 // layer-03
 export const layer03 = gray10;
 export const layerActive03 = gray30;
+export const layerBackground03 = white;
 export const layerHover03 = gray10Hover;
 export const layerSelected03 = gray20;
 export const layerSelectedHover03 = gray20Hover;

package/umd/index.js

@@ -525,6 +525,7 @@
   // layer-01
   var layer01$3 = colors$1.gray10;
   var layerActive01$3 = colors$1.gray30;
+  var layerBackground01$3 = colors$1.white;
   var layerHover01$3 = colors$1.gray10Hover;
   var layerSelected01$3 = colors$1.gray20;
   var layerSelectedHover01$3 = colors$1.gray20Hover;
@@ -532,6 +533,7 @@
   // layer-02
   var layer02$3 = colors$1.white;
   var layerActive02$3 = colors$1.gray30;
+  var layerBackground02$3 = colors$1.gray10;
   var layerHover02$3 = colors$1.whiteHover;
   var layerSelected02$3 = colors$1.gray20;
   var layerSelectedHover02$3 = colors$1.gray20Hover;
@@ -539,6 +541,7 @@
   // layer-03
   var layer03$3 = colors$1.gray10;
   var layerActive03$3 = colors$1.gray30;
+  var layerBackground03$3 = colors$1.white;
   var layerHover03$3 = colors$1.gray10Hover;
   var layerSelected03$3 = colors$1.gray20;
   var layerSelectedHover03$3 = colors$1.gray20Hover;
@@ -735,16 +738,19 @@
     backgroundSelectedHover: backgroundSelectedHover$7,
     layer01: layer01$3,
     layerActive01: layerActive01$3,
+    layerBackground01: layerBackground01$3,
     layerHover01: layerHover01$3,
     layerSelected01: layerSelected01$3,
     layerSelectedHover01: layerSelectedHover01$3,
     layer02: layer02$3,
     layerActive02: layerActive02$3,
+    layerBackground02: layerBackground02$3,
     layerHover02: layerHover02$3,
     layerSelected02: layerSelected02$3,
     layerSelectedHover02: layerSelectedHover02$3,
     layer03: layer03$3,
     layerActive03: layerActive03$3,
+    layerBackground03: layerBackground03$3,
     layerHover03: layerHover03$3,
     layerSelected03: layerSelected03$3,
     layerSelectedHover03: layerSelectedHover03$3,
@@ -958,6 +964,7 @@
   // layer-01
   var layer01$2 = colors$1.white;
   var layerActive01$2 = colors$1.gray30;
+  var layerBackground01$2 = colors$1.gray10;
   var layerHover01$2 = colors$1.whiteHover;
   var layerSelected01$2 = colors$1.gray20;
   var layerSelectedHover01$2 = colors$1.gray20Hover;
@@ -965,6 +972,7 @@
   // layer-02
   var layer02$2 = colors$1.gray10;
   var layerActive02$2 = colors$1.gray30;
+  var layerBackground02$2 = colors$1.white;
   var layerHover02$2 = colors$1.gray10Hover;
   var layerSelected02$2 = colors$1.gray20;
   var layerSelectedHover02$2 = colors$1.gray20Hover;
@@ -972,6 +980,7 @@
   // layer-03
   var layer03$2 = colors$1.white;
   var layerActive03$2 = colors$1.gray30;
+  var layerBackground03$2 = colors$1.gray10;
   var layerHover03$2 = colors$1.whiteHover;
   var layerSelected03$2 = colors$1.gray20;
   var layerSelectedHover03$2 = colors$1.gray20Hover;
@@ -1168,16 +1177,19 @@
     backgroundSelectedHover: backgroundSelectedHover$6,
     layer01: layer01$2,
     layerActive01: layerActive01$2,
+    layerBackground01: layerBackground01$2,
     layerHover01: layerHover01$2,
     layerSelected01: layerSelected01$2,
     layerSelectedHover01: layerSelectedHover01$2,
     layer02: layer02$2,
     layerActive02: layerActive02$2,
+    layerBackground02: layerBackground02$2,
     layerHover02: layerHover02$2,
     layerSelected02: layerSelected02$2,
     layerSelectedHover02: layerSelectedHover02$2,
     layer03: layer03$2,
     layerActive03: layerActive03$2,
+    layerBackground03: layerBackground03$2,
     layerHover03: layerHover03$2,
     layerSelected03: layerSelected03$2,
     layerSelectedHover03: layerSelectedHover03$2,
@@ -1391,6 +1403,7 @@
   // layer-01
   var layer01$1 = colors$1.gray80;
   var layerActive01$1 = colors$1.gray60;
+  var layerBackground01$1 = colors$1.gray90;
   var layerHover01$1 = colors$1.gray80Hover;
   var layerSelected01$1 = colors$1.gray70;
   var layerSelectedHover01$1 = colors$1.gray70Hover;
@@ -1398,6 +1411,7 @@
   // layer-02
   var layer02$1 = colors$1.gray70;
   var layerActive02$1 = colors$1.gray50;
+  var layerBackground02$1 = colors$1.gray80;
   var layerHover02$1 = colors$1.gray70Hover;
   var layerSelected02$1 = colors$1.gray60;
   var layerSelectedHover02$1 = colors$1.gray60Hover;
@@ -1405,6 +1419,7 @@
   // layer-03
   var layer03$1 = colors$1.gray60;
   var layerActive03$1 = colors$1.gray80;
+  var layerBackground03$1 = colors$1.gray70;
   var layerHover03$1 = colors$1.gray60Hover;
   var layerSelected03$1 = colors$1.gray70;
   var layerSelectedHover03$1 = colors$1.gray70Hover;
@@ -1601,16 +1616,19 @@
     backgroundSelectedHover: backgroundSelectedHover$5,
     layer01: layer01$1,
     layerActive01: layerActive01$1,
+    layerBackground01: layerBackground01$1,
     layerHover01: layerHover01$1,
     layerSelected01: layerSelected01$1,
     layerSelectedHover01: layerSelectedHover01$1,
     layer02: layer02$1,
     layerActive02: layerActive02$1,
+    layerBackground02: layerBackground02$1,
     layerHover02: layerHover02$1,
     layerSelected02: layerSelected02$1,
     layerSelectedHover02: layerSelectedHover02$1,
     layer03: layer03$1,
     layerActive03: layerActive03$1,
+    layerBackground03: layerBackground03$1,
     layerHover03: layerHover03$1,
     layerSelected03: layerSelected03$1,
     layerSelectedHover03: layerSelectedHover03$1,
@@ -1824,6 +1842,7 @@
   // layer-01
   var layer01 = colors$1.gray90;
   var layerActive01 = colors$1.gray70;
+  var layerBackground01 = colors$1.gray100;
   var layerHover01 = colors$1.gray90Hover;
   var layerSelected01 = colors$1.gray80;
   var layerSelectedHover01 = colors$1.gray80Hover;
@@ -1831,6 +1850,7 @@
   // layer-02
   var layer02 = colors$1.gray80;
   var layerActive02 = colors$1.gray60;
+  var layerBackground02 = colors$1.gray90;
   var layerHover02 = colors$1.gray80Hover;
   var layerSelected02 = colors$1.gray70;
   var layerSelectedHover02 = colors$1.gray70Hover;
@@ -1838,6 +1858,7 @@
   // layer-03
   var layer03 = colors$1.gray70;
   var layerActive03 = colors$1.gray50;
+  var layerBackground03 = colors$1.gray80;
   var layerHover03 = colors$1.gray70Hover;
   var layerSelected03 = colors$1.gray60;
   var layerSelectedHover03 = colors$1.gray60Hover;
@@ -2034,16 +2055,19 @@
     backgroundSelectedHover: backgroundSelectedHover$4,
     layer01: layer01,
     layerActive01: layerActive01,
+    layerBackground01: layerBackground01,
     layerHover01: layerHover01,
     layerSelected01: layerSelected01,
     layerSelectedHover01: layerSelectedHover01,
     layer02: layer02,
     layerActive02: layerActive02,
+    layerBackground02: layerBackground02,
     layerHover02: layerHover02,
     layerSelected02: layerSelected02,
     layerSelectedHover02: layerSelectedHover02,
     layer03: layer03,
     layerActive03: layerActive03,
+    layerBackground03: layerBackground03,
     layerHover03: layerHover03,
     layerSelected03: layerSelected03,
     layerSelectedHover03: layerSelectedHover03,
@@ -3883,7 +3907,7 @@
   'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'shadow', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary', 'backgroundActive', 'layerActive', 'buttonDangerActive', 'buttonPrimaryActive', 'buttonSecondaryActive', 'buttonTertiaryActive', 'focusInset', 'focusInverse', 'backgroundHover', 'layerHover', 'fieldHover', 'backgroundInverseHover', 'linkPrimaryHover', 'buttonDangerHover', 'buttonPrimaryHover', 'buttonSecondaryHover', 'buttonTertiaryHover', 'backgroundSelected', 'backgroundSelectedHover', 'layerSelected', 'layerSelectedHover', 'layerSelectedInverse', 'borderSubtleSelected', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement',
   // Deprecated
   'brand01', 'brand02', 'brand03', 'active01', 'hoverField', 'danger'];
-  var tokens$4 = {
+  var tokens$5 = {
     colors: colors,
     type: type$2.unstable_tokens,
     layout: layout$2.unstable_tokens
@@ -3902,14 +3926,14 @@
     g100: g100
   };
 
-  var index$4 = /*#__PURE__*/Object.freeze({
+  var index$5 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     white: white,
     g10: g10,
     g90: g90,
     g100: g100,
     themes: themes$1,
-    tokens: tokens$4,
+    tokens: tokens$5,
     caption01: type$2.caption01,
     caption02: type$2.caption02,
     label01: type$2.label01,
@@ -4253,7 +4277,7 @@
     g100: 'rgb(141 141 141 / 30%)'
   };
 
-  var tokens$3 = /*#__PURE__*/Object.freeze({
+  var tokens$4 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     buttonSeparator: buttonSeparator,
     buttonPrimary: buttonPrimary,
@@ -4279,9 +4303,9 @@
    * LICENSE file in the root directory of this source tree.
    */
 
-  var index$3 = /*#__PURE__*/Object.freeze({
+  var index$4 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    buttonTokens: tokens$3
+    buttonTokens: tokens$4
   });
 
   /**
@@ -4531,7 +4555,7 @@
     g100: colors$1.warmGray50
   };
 
-  var tokens$2 = /*#__PURE__*/Object.freeze({
+  var tokens$3 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     tagBackgroundRed: tagBackgroundRed,
     tagColorRed: tagColorRed,
@@ -4582,9 +4606,9 @@
    * LICENSE file in the root directory of this source tree.
    */
 
-  var index$2 = /*#__PURE__*/Object.freeze({
+  var index$3 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    tagTokens: tokens$2
+    tagTokens: tokens$3
   });
 
   /**
@@ -4652,7 +4676,7 @@
     g100: textOnColorDisabled$7
   };
 
-  var tokens$1 = /*#__PURE__*/Object.freeze({
+  var tokens$2 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     notificationBackgroundError: notificationBackgroundError,
     notificationBackgroundSuccess: notificationBackgroundSuccess,
@@ -4673,9 +4697,9 @@
    * LICENSE file in the root directory of this source tree.
    */
 
-  var index$1 = /*#__PURE__*/Object.freeze({
+  var index$2 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    notificationTokens: tokens$1
+    notificationTokens: tokens$2
   });
 
   /**
@@ -4741,7 +4765,7 @@
     g100: colors$1.gray100
   };
 
-  var tokens = /*#__PURE__*/Object.freeze({
+  var tokens$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     statusRed: statusRed,
     statusOrange: statusOrange,
@@ -4755,6 +4779,51 @@
     statusAccessibilityBackground: statusAccessibilityBackground
   });
 
+  /**
+   * 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.
+   */
+
+  var index$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    statusTokens: tokens$1
+  });
+
+  /**
+   * 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.
+   */
+  var transparent = 'rgba(0, 0, 0, 0)';
+  var contentSwitcherSelected = {
+    whiteTheme: colors$1.white,
+    g10: colors$1.white,
+    g90: colors$1.rgba(colors$1.gray50, 0.24),
+    g100: colors$1.rgba(colors$1.gray50, 0.24)
+  };
+  var contentSwitcherBackground = {
+    whiteTheme: colors$1.gray20,
+    g10: colors$1.gray20,
+    g90: transparent,
+    g100: transparent
+  };
+  var contentSwitcherBackgroundHover = {
+    whiteTheme: colors$1.gray20Hover,
+    g10: colors$1.gray20Hover,
+    g90: colors$1.rgba(colors$1.gray50, 0.12),
+    g100: colors$1.rgba(colors$1.gray50, 0.12)
+  };
+
+  var tokens = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    contentSwitcherSelected: contentSwitcherSelected,
+    contentSwitcherBackground: contentSwitcherBackground,
+    contentSwitcherBackgroundHover: contentSwitcherBackgroundHover
+  });
+
   /**
    * Copyright IBM Corp. 2025
    *
@@ -4764,7 +4833,7 @@
 
   var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    statusTokens: tokens
+    contentSwitcherTokens: tokens
   });
 
   /**
@@ -5068,6 +5137,8 @@
     }, {
       state: 'active',
       name: 'layer-active-01'
+    }, {
+      name: 'layer-background-01'
     }, {
       state: 'hover',
       name: 'layer-hover-01'
@@ -5082,6 +5153,8 @@
     }, {
       state: 'active',
       name: 'layer-active-02'
+    }, {
+      name: 'layer-background-02'
     }, {
       state: 'hover',
       name: 'layer-hover-02'
@@ -5096,6 +5169,8 @@
     }, {
       state: 'active',
       name: 'layer-active-03'
+    }, {
+      name: 'layer-background-03'
     }, {
       state: 'hover',
       name: 'layer-hover-03'
@@ -5310,13 +5385,19 @@
     properties: [],
     tokens: ['status-red', 'status-orange', 'status-orange-outline', 'status-yellow', 'status-yellow-outline', 'status-purple', 'status-green', 'status-blue', 'status-gray']
   });
+  var contentSwitcher = TokenGroup.create({
+    name: 'Content Switcher',
+    properties: [],
+    tokens: ['content-switcher-selected', 'content-switcher-background', 'content-switcher-background-hover']
+  });
 
   var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     button: button,
     notification: notification,
     tag: tag,
-    status: status
+    status: status,
+    contentSwitcher: contentSwitcher
   });
 
   /**
@@ -5752,7 +5833,7 @@
   exports.borderTile01 = borderTile01$3;
   exports.borderTile02 = borderTile02$3;
   exports.borderTile03 = borderTile03$3;
-  exports.buttonTokens = index$3;
+  exports.buttonTokens = index$4;
   exports.chatAvatarAgent = chatAvatarAgent$3;
   exports.chatAvatarBot = chatAvatarBot$3;
   exports.chatAvatarUser = chatAvatarUser$3;
@@ -5770,6 +5851,7 @@
   exports.chatPromptBorderEnd = chatPromptBorderEnd$3;
   exports.chatPromptBorderStart = chatPromptBorderStart$3;
   exports.chatShellBackground = chatShellBackground$3;
+  exports.contentSwitcherTokens = index;
   exports.field01 = field01$7;
   exports.field02 = field02$7;
   exports.field03 = field03$3;
@@ -5807,6 +5889,9 @@
   exports.layerActive01 = layerActive01$3;
   exports.layerActive02 = layerActive02$3;
   exports.layerActive03 = layerActive03$3;
+  exports.layerBackground01 = layerBackground01$3;
+  exports.layerBackground02 = layerBackground02$3;
+  exports.layerBackground03 = layerBackground03$3;
   exports.layerHover01 = layerHover01$3;
   exports.layerHover02 = layerHover02$3;
   exports.layerHover03 = layerHover03$3;
@@ -5826,12 +5911,12 @@
   exports.linkPrimaryHover = linkPrimaryHover$7;
   exports.linkSecondary = linkSecondary$7;
   exports.linkVisited = linkVisited$7;
-  exports.notificationTokens = index$1;
+  exports.notificationTokens = index$2;
   exports.overlay = overlay$7;
   exports.shadow = shadow$7;
   exports.skeletonBackground = skeletonBackground$7;
   exports.skeletonElement = skeletonElement$7;
-  exports.statusTokens = index;
+  exports.statusTokens = index$1;
   exports.supportCautionMajor = supportCautionMajor$3;
   exports.supportCautionMinor = supportCautionMinor$3;
   exports.supportCautionUndefined = supportCautionUndefined$3;
@@ -5843,7 +5928,7 @@
   exports.supportSuccessInverse = supportSuccessInverse$7;
   exports.supportWarning = supportWarning$7;
   exports.supportWarningInverse = supportWarningInverse$7;
-  exports.tagTokens = index$2;
+  exports.tagTokens = index$3;
   exports.textDisabled = textDisabled$7;
   exports.textError = textError$7;
   exports.textHelper = textHelper$7;
@@ -5856,7 +5941,7 @@
   exports.themes = themes;
   exports.toggleOff = toggleOff$7;
   exports.unstable_metadata = unstable_metadata;
-  exports.v10 = index$4;
+  exports.v10 = index$5;
   exports.white = white$1;
 
   Object.defineProperty(exports, '__esModule', { value: true });