@carbon/themes 11.52.0 → 11.54.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "11.52.0",
+  "version": "11.54.0-rc.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",
-    "@carbon/layout": "^11.34.0",
-    "@carbon/type": "^11.40.0",
+    "@carbon/colors": "^11.34.0-rc.0",
+    "@carbon/layout": "^11.35.0-rc.0",
+    "@carbon/type": "^11.41.0-rc.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",
+    "@babel/node": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@carbon/cli": "^11.28.0-rc.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": "ec31b96c91af8208499180eaeae89eb08b7ac8c8"
+  "gitHead": "fcae2645f1b5a1a01b5629926df471ec1945d1e6"
 }

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/component-tokens/tag/tokens.js

@@ -10,49 +10,42 @@ import {
   red40,
   red50,
   red70,
-  red80,
   red20Hover,
   red70Hover,
   magenta20,
   magenta40,
   magenta50,
   magenta70,
-  magenta80,
   magenta20Hover,
   magenta70Hover,
   purple20,
   purple40,
   purple50,
   purple70,
-  purple80,
   purple20Hover,
   purple70Hover,
   blue20,
   blue40,
   blue50,
   blue70,
-  blue80,
   blue20Hover,
   blue70Hover,
   cyan20,
   cyan40,
   cyan50,
   cyan70,
-  cyan80,
   cyan20Hover,
   cyan70Hover,
   teal20,
   teal40,
   teal50,
   teal70,
-  teal80,
   teal20Hover,
   teal70Hover,
   green20,
   green40,
   green50,
   green70,
-  green80,
   green20Hover,
   green70Hover,
   gray10,

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;

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;