@carbon/themes 11.52.0-rc.0 → 11.53.0

package/lib/index.js

@@ -528,6 +528,7 @@ var backgroundSelectedHover$7 = adjustAlpha(colors$1.gray50, 0.32);
 // 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;
@@ -535,6 +536,7 @@ var layerSelectedHover01$3 = colors$1.gray20Hover;
 // 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;
@@ -542,6 +544,7 @@ var layerSelectedHover02$3 = colors$1.gray20Hover;
 // 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;
@@ -738,16 +741,19 @@ var white$1 = /*#__PURE__*/Object.freeze({
   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,
@@ -961,6 +967,7 @@ var backgroundSelectedHover$6 = adjustAlpha(colors$1.gray50, 0.32);
 // 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;
@@ -968,6 +975,7 @@ var layerSelectedHover01$2 = colors$1.gray20Hover;
 // 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;
@@ -975,6 +983,7 @@ var layerSelectedHover02$2 = colors$1.gray20Hover;
 // 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;
@@ -1171,16 +1180,19 @@ var g10$1 = /*#__PURE__*/Object.freeze({
   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,
@@ -1394,6 +1406,7 @@ var backgroundSelectedHover$5 = adjustAlpha(colors$1.gray50, 0.32);
 // 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;
@@ -1401,6 +1414,7 @@ var layerSelectedHover01$1 = colors$1.gray70Hover;
 // 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;
@@ -1408,6 +1422,7 @@ var layerSelectedHover02$1 = colors$1.gray60Hover;
 // 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;
@@ -1604,16 +1619,19 @@ var g90$1 = /*#__PURE__*/Object.freeze({
   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,
@@ -1827,6 +1845,7 @@ var backgroundSelectedHover$4 = adjustAlpha(colors$1.gray50, 0.32);
 // 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;
@@ -1834,6 +1853,7 @@ var layerSelectedHover01 = colors$1.gray80Hover;
 // 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;
@@ -1841,6 +1861,7 @@ var layerSelectedHover02 = colors$1.gray70Hover;
 // 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;
@@ -2037,16 +2058,19 @@ var g100$1 = /*#__PURE__*/Object.freeze({
   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,
@@ -3886,7 +3910,7 @@ var colors = [
 '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
@@ -3905,14 +3929,14 @@ var themes$1 = {
   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,
@@ -4256,7 +4280,7 @@ var buttonDisabled = {
   g100: 'rgb(141 141 141 / 30%)'
 };
 
-var tokens$3 = /*#__PURE__*/Object.freeze({
+var tokens$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   buttonSeparator: buttonSeparator,
   buttonPrimary: buttonPrimary,
@@ -4282,9 +4306,9 @@ var tokens$3 = /*#__PURE__*/Object.freeze({
  * 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
 });
 
 /**
@@ -4534,7 +4558,7 @@ var tagBorderWarmGray = {
   g100: colors$1.warmGray50
 };
 
-var tokens$2 = /*#__PURE__*/Object.freeze({
+var tokens$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   tagBackgroundRed: tagBackgroundRed,
   tagColorRed: tagColorRed,
@@ -4585,9 +4609,9 @@ var tokens$2 = /*#__PURE__*/Object.freeze({
  * 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
 });
 
 /**
@@ -4655,7 +4679,7 @@ var notificationActionTertiaryInverseTextOnColorDisabled = {
   g100: textOnColorDisabled$7
 };
 
-var tokens$1 = /*#__PURE__*/Object.freeze({
+var tokens$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   notificationBackgroundError: notificationBackgroundError,
   notificationBackgroundSuccess: notificationBackgroundSuccess,
@@ -4676,9 +4700,9 @@ var tokens$1 = /*#__PURE__*/Object.freeze({
  * 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
 });
 
 /**
@@ -4744,7 +4768,7 @@ var statusAccessibilityBackground = {
   g100: colors$1.gray100
 };
 
-var tokens = /*#__PURE__*/Object.freeze({
+var tokens$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   statusRed: statusRed,
   statusOrange: statusOrange,
@@ -4758,6 +4782,51 @@ var tokens = /*#__PURE__*/Object.freeze({
   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
  *
@@ -4767,7 +4836,7 @@ var tokens = /*#__PURE__*/Object.freeze({
 
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  statusTokens: tokens
+  contentSwitcherTokens: tokens
 });
 
 /**
@@ -5071,6 +5140,8 @@ var layer = TokenGroup.create({
   }, {
     state: 'active',
     name: 'layer-active-01'
+  }, {
+    name: 'layer-background-01'
   }, {
     state: 'hover',
     name: 'layer-hover-01'
@@ -5085,6 +5156,8 @@ var layer = TokenGroup.create({
   }, {
     state: 'active',
     name: 'layer-active-02'
+  }, {
+    name: 'layer-background-02'
   }, {
     state: 'hover',
     name: 'layer-hover-02'
@@ -5099,6 +5172,8 @@ var layer = TokenGroup.create({
   }, {
     state: 'active',
     name: 'layer-active-03'
+  }, {
+    name: 'layer-background-03'
   }, {
     state: 'hover',
     name: 'layer-hover-03'
@@ -5313,13 +5388,19 @@ var status = TokenGroup.create({
   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
 });
 
 /**
@@ -5755,7 +5836,7 @@ exports.borderSubtleSelected03 = borderSubtleSelected03$3;
 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;
@@ -5773,6 +5854,7 @@ exports.chatPromptBackground = chatPromptBackground$3;
 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;
@@ -5810,6 +5892,9 @@ exports.layerAccentHover03 = layerAccentHover03$3;
 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;
@@ -5829,12 +5914,12 @@ exports.linkPrimary = linkPrimary$7;
 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;
@@ -5846,7 +5931,7 @@ exports.supportSuccess = supportSuccess$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;
@@ -5859,5 +5944,5 @@ exports.textSecondary = textSecondary$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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "11.52.0-rc.0",
+  "version": "11.53.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -32,16 +32,16 @@
     "postinstall": "ibmtelemetry --config=telemetry.yml"
   },
   "dependencies": {
-    "@carbon/colors": "^11.33.0-rc.0",
-    "@carbon/layout": "^11.34.0-rc.0",
-    "@carbon/type": "^11.40.0-rc.0",
+    "@carbon/colors": "^11.33.0",
+    "@carbon/layout": "^11.34.0",
+    "@carbon/type": "^11.40.0",
     "@ibm/telemetry-js": "^1.5.0",
     "color": "^4.0.0"
   },
   "devDependencies": {
     "@babel/node": "^7.24.7",
     "@babel/preset-env": "^7.24.7",
-    "@carbon/cli": "^11.27.0-rc.0",
+    "@carbon/cli": "^11.27.0",
     "@carbon/cli-reporter": "^10.7.0",
     "@carbon/scss-generator": "^10.19.0",
     "@carbon/test-utils": "^10.36.0",
@@ -52,5 +52,5 @@
     "rimraf": "^6.0.0"
   },
   "sideEffects": false,
-  "gitHead": "3b78e2acacf62b0a9e5425e5f3b43e6798cd209f"
+  "gitHead": "68105b183b14b348bcba4622f86a9e50265414da"
 }

package/scss/_component-tokens.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2023
+// 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.
@@ -9,3 +9,4 @@
 @forward 'generated/tag-tokens';
 @forward 'generated/notification-tokens';
 @forward 'generated/status-tokens';
+@forward 'generated/content-switcher-tokens';

package/scss/generated/_content-switcher-tokens.scss

@@ -0,0 +1,30 @@
+// Code generated by @carbon/themes. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// 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:map';
+
+$content-switcher-background: (
+  white-theme: #e0e0e0,
+  g-10: #e0e0e0,
+  g-90: rgba(0, 0, 0, 0),
+  g-100: rgba(0, 0, 0, 0),
+) !default;
+
+$content-switcher-background-hover: (
+  white-theme: #d1d1d1,
+  g-10: #d1d1d1,
+  g-90: rgba(141, 141, 141, 0.12),
+  g-100: rgba(141, 141, 141, 0.12),
+) !default;
+
+$content-switcher-selected: (
+  white-theme: #ffffff,
+  g-10: #ffffff,
+  g-90: rgba(141, 141, 141, 0.24),
+  g-100: rgba(141, 141, 141, 0.24),
+) !default;

package/scss/generated/_themes.scss

@@ -107,6 +107,9 @@ $white: (
   layer-active-01: #c6c6c6,
   layer-active-02: #c6c6c6,
   layer-active-03: #c6c6c6,
+  layer-background-01: #ffffff,
+  layer-background-02: #f4f4f4,
+  layer-background-03: #ffffff,
   layer-hover-01: #e8e8e8,
   layer-hover-02: #e8e8e8,
   layer-hover-03: #e8e8e8,
@@ -255,6 +258,9 @@ $g10: (
   layer-active-01: #c6c6c6,
   layer-active-02: #c6c6c6,
   layer-active-03: #c6c6c6,
+  layer-background-01: #f4f4f4,
+  layer-background-02: #ffffff,
+  layer-background-03: #f4f4f4,
   layer-hover-01: #e8e8e8,
   layer-hover-02: #e8e8e8,
   layer-hover-03: #e8e8e8,
@@ -403,6 +409,9 @@ $g90: (
   layer-active-01: #6f6f6f,
   layer-active-02: #8d8d8d,
   layer-active-03: #393939,
+  layer-background-01: #262626,
+  layer-background-02: #393939,
+  layer-background-03: #525252,
   layer-hover-01: #474747,
   layer-hover-02: #636363,
   layer-hover-03: #5e5e5e,
@@ -551,6 +560,9 @@ $g100: (
   layer-active-01: #525252,
   layer-active-02: #6f6f6f,
   layer-active-03: #8d8d8d,
+  layer-background-01: #161616,
+  layer-background-02: #262626,
+  layer-background-03: #393939,
   layer-hover-01: #333333,
   layer-hover-02: #474747,
   layer-hover-03: #636363,

package/scss/generated/_tokens.scss

@@ -49,6 +49,9 @@ $layer-01: _get('layer-01') !default;
 /// The CSS Custom Property for the `layer-active-01` token
 $layer-active-01: _get('layer-active-01') !default;
 
+/// The CSS Custom Property for the `layer-background-01` token
+$layer-background-01: _get('layer-background-01') !default;
+
 /// The CSS Custom Property for the `layer-hover-01` token
 $layer-hover-01: _get('layer-hover-01') !default;
 
@@ -64,6 +67,9 @@ $layer-02: _get('layer-02') !default;
 /// The CSS Custom Property for the `layer-active-02` token
 $layer-active-02: _get('layer-active-02') !default;
 
+/// The CSS Custom Property for the `layer-background-02` token
+$layer-background-02: _get('layer-background-02') !default;
+
 /// The CSS Custom Property for the `layer-hover-02` token
 $layer-hover-02: _get('layer-hover-02') !default;
 
@@ -79,6 +85,9 @@ $layer-03: _get('layer-03') !default;
 /// The CSS Custom Property for the `layer-active-03` token
 $layer-active-03: _get('layer-active-03') !default;
 
+/// The CSS Custom Property for the `layer-background-03` token
+$layer-background-03: _get('layer-background-03') !default;
+
 /// The CSS Custom Property for the `layer-hover-03` token
 $layer-hover-03: _get('layer-hover-03') !default;
 

package/src/component-tokens/content-switcher/index.js

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export * as contentSwitcherTokens from './tokens';

package/src/component-tokens/content-switcher/tokens.js

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+
+import { gray20, gray20Hover, gray50, white, rgba } from '@carbon/colors';
+const transparent = 'rgba(0, 0, 0, 0)';
+export const contentSwitcherSelected = {
+  whiteTheme: white,
+  g10: white,
+  g90: rgba(gray50, 0.24),
+  g100: rgba(gray50, 0.24),
+};
+
+export const contentSwitcherBackground = {
+  whiteTheme: gray20,
+  g10: gray20,
+  g90: transparent,
+  g100: transparent,
+};
+
+export const contentSwitcherBackgroundHover = {
+  whiteTheme: gray20Hover,
+  g10: gray20Hover,
+  g90: rgba(gray50, 0.12),
+  g100: rgba(gray50, 0.12),
+};

package/src/g10.js

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

package/src/g100.js

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