@carbon/themes 11.74.0 → 11.75.0

package/src/tokens/{TokenGroup.js → TokenGroup.ts}

@@ -1,11 +1,25 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * 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 { Token } from './Token';
+import type {
+  ResolvedToken,
+  TokenContext,
+  TokenDefinition,
+  TokenProperties,
+} from './types';
+
+type TokenGroupChild = Token | TokenGroup;
+
+type TokenGroupDefinition = {
+  name: string;
+  properties?: TokenProperties;
+  tokens?: Array<Token | TokenDefinition | TokenGroup | string>;
+};
 
 /**
  * A TokenGroup allows us to group up a collection of tokens and nested token
@@ -19,11 +33,20 @@ import { Token } from './Token';
  * states
  */
 export class TokenGroup {
-  static create({ name, properties, tokens = [] }) {
+  kind: 'TokenGroup';
+  name: string;
+  properties?: TokenProperties;
+  children: TokenGroupChild[];
+
+  static create({ name, properties, tokens = [] }: TokenGroupDefinition) {
     return new TokenGroup(name, tokens, properties);
   }
 
-  constructor(name, tokens, properties) {
+  constructor(
+    name: string,
+    tokens: Array<Token | TokenDefinition | TokenGroup | string>,
+    properties?: TokenProperties
+  ) {
     this.kind = 'TokenGroup';
     this.name = name;
 
@@ -32,7 +55,11 @@ export class TokenGroup {
     }
 
     this.children = tokens.map((child) => {
-      if (child.kind === 'TokenGroup') {
+      if (
+        typeof child !== 'string' &&
+        'kind' in child &&
+        child.kind === 'TokenGroup'
+      ) {
         return child;
       }
 
@@ -40,7 +67,7 @@ export class TokenGroup {
     });
   }
 
-  *[Symbol.iterator]() {
+  *[Symbol.iterator](): Generator<TokenGroupChild, void, unknown> {
     yield this;
 
     for (const child of this.children) {
@@ -55,9 +82,8 @@ export class TokenGroup {
   /**
    * Get all the tokens available in every Token Group in this TokenGroup,
    * including itself.
-   * @returns {Array<Token>}
    */
-  getTokens(parentContext = {}) {
+  getTokens(parentContext: TokenContext = {}): ResolvedToken[] {
     const context = {
       ...parentContext,
       groups: parentContext.groups
@@ -71,7 +97,7 @@ export class TokenGroup {
         return child.getTokens(context);
       }
 
-      const token = {
+      const token: ResolvedToken = {
         ...context,
         name: child.name,
         properties: child.properties || context.properties,
@@ -88,9 +114,8 @@ export class TokenGroup {
   /**
    * Get a specific token from the TokenGroup, or form one of its nested
    * TokenGroups
-   * @returns {Token}
    */
-  getToken(tokenOrName) {
+  getToken(tokenOrName: Token | string): Token | null {
     const name =
       typeof tokenOrName === 'string' ? tokenOrName : tokenOrName.name;
     for (const child of this) {
@@ -107,10 +132,9 @@ export class TokenGroup {
 
   /**
    * Get all the unique groups in the token group, including this group
-   * @returns {Array<TokenGroup>}
    */
   getTokenGroups() {
-    const set = new Set();
+    const set = new Set<TokenGroup>();
 
     for (const child of this) {
       if (child.kind !== 'TokenGroup') {
@@ -124,10 +148,9 @@ export class TokenGroup {
 
   /**
    * Get all the unique properties in the token group, including this group
-   * @returns {Array<string>}
    */
   getTokenProperties() {
-    const set = new Set();
+    const set = new Set<string>();
 
     for (const child of this) {
       if (!Array.isArray(child.properties)) {
@@ -144,10 +167,9 @@ export class TokenGroup {
 
   /**
    * Get all the unique states in the token group, including this group
-   * @returns {Array<string>}
    */
   getTokenStates() {
-    const set = new Set();
+    const set = new Set<string>();
 
     for (const child of this) {
       if (child.kind !== 'Token') {

package/src/tokens/{TokenSet.js → TokenSet.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -11,18 +11,31 @@
  * token set allows us to group these tokens together in a way that's different
  * than their token group.
  */
+import { Token } from './Token';
+
+type TokenSetChild = Token | TokenSet;
+
+type TokenSetDefinition = {
+  name: string;
+  tokens?: TokenSetChild[];
+};
+
 export class TokenSet {
-  static create({ name, tokens }) {
+  kind: 'TokenSet';
+  name: string;
+  children: TokenSetChild[];
+
+  static create({ name, tokens = [] }: TokenSetDefinition) {
     return new TokenSet(name, tokens);
   }
 
-  constructor(name, tokens = []) {
+  constructor(name: string, tokens: TokenSetChild[]) {
     this.kind = 'TokenSet';
     this.name = name;
     this.children = tokens;
   }
 
-  *[Symbol.iterator]() {
+  *[Symbol.iterator](): Generator<TokenSetChild, void, unknown> {
     for (const child of this.children) {
       yield child;
 
@@ -32,7 +45,7 @@ export class TokenSet {
     }
   }
 
-  getTokenSets() {
+  getTokenSets(): TokenSet[] {
     const children = this.children
       .filter((child) => {
         return child.kind === 'TokenSet';
@@ -44,9 +57,10 @@ export class TokenSet {
     return [this, ...children];
   }
 
-  getTokenSet(name) {
+  getTokenSet(name: string) {
     for (const child of this) {
-      if (!child.kind === 'TokenSet') {
+      // TODO: Is this code necessary given the old code was invalid?
+      if (child.kind !== 'TokenSet') {
         continue;
       }
 
@@ -58,7 +72,7 @@ export class TokenSet {
     return null;
   }
 
-  hasToken(tokenOrName) {
+  hasToken(tokenOrName: Token | string) {
     const name =
       typeof tokenOrName === 'string' ? tokenOrName : tokenOrName.name;
 

package/src/tokens/{components.js → components.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/src/tokens/{index.js → index.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -15,50 +15,41 @@ import * as components from './components';
 import { type } from './type';
 import { layout } from './layout';
 import { v10 } from './v10';
+import type { TokenMetadata } from './types';
 
 export { Token, TokenFormat, TokenGroup, TokenSet, group, set };
 
-const v11 = [
+const formatMetadata = (name: string, type: TokenMetadata['type']) => ({
+  name,
+  type,
+});
+
+const v11: TokenMetadata[] = [
   // Base color tokens
   ...group.getTokens().map((token) => {
-    return {
-      name: token.name,
-      type: 'color',
-    };
+    return formatMetadata(token.name, 'color');
   }),
 
   // Contextual tokens
   ...contextual.getTokens().map((token) => {
-    return {
-      name: token.name,
-      type: 'color',
-    };
+    return formatMetadata(token.name, 'color');
   }),
 
   // Component tokens
   ...Object.values(components).flatMap((group) => {
     return group.getTokens().map((token) => {
-      return {
-        name: token.name,
-        type: 'color',
-      };
+      return formatMetadata(token.name, 'color');
     });
   }),
 
   // Typography
   ...type.getTokens().map((token) => {
-    return {
-      name: token.name,
-      type: 'type',
-    };
+    return formatMetadata(token.name, 'type');
   }),
 
   // Layout (spacing)
   ...layout.getTokens().map((token) => {
-    return {
-      name: token.name,
-      type: 'layout',
-    };
+    return formatMetadata(token.name, 'layout');
   }),
 ];
 

package/src/tokens/{layout.js → layout.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/src/tokens/{type.js → type.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/src/tokens/types.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * 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 type TokenProperties = string[];
+
+export type TokenDefinition = {
+  name: string;
+  properties?: TokenProperties;
+  state?: string;
+};
+
+export type TokenContext = {
+  groups?: string[];
+  properties?: TokenProperties;
+};
+
+export type ResolvedToken = TokenDefinition & {
+  groups: string[];
+};
+
+export type TokenMetadata = {
+  name: string;
+  type: 'color' | 'layout' | 'type';
+};

package/src/tokens/{v10.js → v10.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/src/tokens/{v11TokenGroup.js → v11TokenGroup.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/src/tokens/v11TokenSet.ts

@@ -0,0 +1,93 @@
+/**
+ * Copyright IBM Corp. 2018, 2026
+ *
+ * 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 { TokenSet } from './TokenSet';
+import { TokenGroup } from './TokenGroup';
+import { background, border, field, layer } from './v11TokenGroup';
+
+const getTokenOrThrow = (group: TokenGroup, name: string) => {
+  const token = group.getToken(name);
+
+  if (token === null) {
+    throw new Error(`Unable to find token \`${name}\` in v11 token set.`);
+  }
+
+  return token;
+};
+
+export const set = TokenSet.create({
+  name: 'All',
+  tokens: [
+    TokenSet.create({
+      name: 'Base set',
+      tokens: [
+        getTokenOrThrow(background, 'background'),
+        getTokenOrThrow(background, 'background-hover'),
+        getTokenOrThrow(background, 'background-selected'),
+        getTokenOrThrow(background, 'background-selected-hover'),
+        getTokenOrThrow(border, 'border-subtle-00'),
+      ],
+    }),
+    TokenSet.create({
+      name: '01 Layer set',
+      tokens: [
+        getTokenOrThrow(layer, 'layer-01'),
+        getTokenOrThrow(layer, 'layer-active-01'),
+        getTokenOrThrow(layer, 'layer-background-01'),
+        getTokenOrThrow(layer, 'layer-hover-01'),
+        getTokenOrThrow(layer, 'layer-selected-hover-01'),
+        getTokenOrThrow(layer, 'layer-accent-01'),
+        getTokenOrThrow(layer, 'layer-accent-active-01'),
+        getTokenOrThrow(layer, 'layer-accent-hover-01'),
+        getTokenOrThrow(field, 'field-01'),
+        getTokenOrThrow(field, 'field-hover-01'),
+        getTokenOrThrow(border, 'border-subtle-01'),
+        getTokenOrThrow(border, 'border-subtle-selected-01'),
+        getTokenOrThrow(border, 'border-strong-01'),
+        getTokenOrThrow(border, 'border-tile-01'),
+      ],
+    }),
+    TokenSet.create({
+      name: '02 Layer set',
+      tokens: [
+        getTokenOrThrow(layer, 'layer-02'),
+        getTokenOrThrow(layer, 'layer-active-02'),
+        getTokenOrThrow(layer, 'layer-background-02'),
+        getTokenOrThrow(layer, 'layer-hover-02'),
+        getTokenOrThrow(layer, 'layer-selected-hover-02'),
+        getTokenOrThrow(layer, 'layer-accent-02'),
+        getTokenOrThrow(layer, 'layer-accent-active-02'),
+        getTokenOrThrow(layer, 'layer-accent-hover-02'),
+        getTokenOrThrow(field, 'field-02'),
+        getTokenOrThrow(field, 'field-hover-02'),
+        getTokenOrThrow(border, 'border-subtle-02'),
+        getTokenOrThrow(border, 'border-subtle-selected-02'),
+        getTokenOrThrow(border, 'border-strong-02'),
+        getTokenOrThrow(border, 'border-tile-02'),
+      ],
+    }),
+    TokenSet.create({
+      name: '03 Layer set',
+      tokens: [
+        getTokenOrThrow(layer, 'layer-03'),
+        getTokenOrThrow(layer, 'layer-active-03'),
+        getTokenOrThrow(layer, 'layer-background-03'),
+        getTokenOrThrow(layer, 'layer-hover-03'),
+        getTokenOrThrow(layer, 'layer-selected-hover-03'),
+        getTokenOrThrow(layer, 'layer-accent-03'),
+        getTokenOrThrow(layer, 'layer-accent-active-03'),
+        getTokenOrThrow(layer, 'layer-accent-hover-03'),
+        getTokenOrThrow(field, 'field-03'),
+        getTokenOrThrow(field, 'field-hover-03'),
+        getTokenOrThrow(border, 'border-subtle-03'),
+        getTokenOrThrow(border, 'border-subtle-selected-03'),
+        getTokenOrThrow(border, 'border-strong-03'),
+        getTokenOrThrow(border, 'border-tile-03'),
+      ],
+    }),
+  ],
+});

package/src/{tools.js → tools.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -11,39 +11,31 @@ import Color from 'color';
  * Example: token = hsl(10, 10, 10);
  * adjustLightness(token, 5) === hsl(10, 10, 15);
  * adjustLightness(token, -5) === hsl(10, 10, 5);
- * @param {string} token
- * @param {integer} shift The number of percentage points (positive or negative) by which to shift the lightness of a token.
- * @returns {string}
  */
-export function adjustLightness(token, shift) {
+export const adjustLightness = (token: string, shift: number) => {
   const original = Color(token).hsl().object();
 
   return Color({ ...original, l: (original.l += shift) })
     .round()
     .hex()
     .toLowerCase();
-}
+};
 
 /**
  * Adjust a given token's alpha by a specified amount
  * Example: token = rgba(10, 10, 10, 1.0);
  * adjustAlpha(token, 0.3) === rgba(10, 10, 10, 0.3);
- * @param {string} token
- * @param {float} alpha
- * @returns {string}
  */
-export function adjustAlpha(token, alpha) {
+export const adjustAlpha = (token: string, alpha: number) => {
   return Color(token).rgb().alpha(alpha).string();
-}
+};
 
 const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 
 /**
  * Format a given token into the format expected in CSS/SCSS-based projects.
- * @param {string} token
- * @returns {string}
  */
-export function formatTokenName(token) {
+export const formatTokenName = (token: string) => {
   let string = '';
 
   for (let i = 0; i < token.length; i++) {
@@ -74,4 +66,4 @@ export function formatTokenName(token) {
   }
 
   return string;
-}
+};

package/src/v10/{g10.js → g10.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/src/v10/{g100.js → g100.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/src/v10/{g90.js → g90.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/src/v10/{index.js → index.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/src/v10/{tokens.js → tokens.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/src/v10/{white.js → white.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/src/{white.js → white.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "typescript-config-carbon/tsconfig.base.json",
+  "compilerOptions": {
+    "declaration": false,
+    "emitDeclarationOnly": false
+  },
+  "include": ["src/**/*"]
+}

package/tsconfig.types.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "declarationDir": "./lib"
+  },
+  "include": ["src/**/*"]
+}