@carbon/themes 12.0.0-alpha.1 → 12.0.0-alpha.3

package/src/index.ts

@@ -1,129 +0,0 @@
-/**
- * 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.
- */
-
-// The imports below reference build artifacts in js/generated/ that are
-// produced by `yarn build:js-tokens` (tasks/generate-js-tokens.js) before
-// this file is bundled. Run `yarn build` to generate them first.
-import * as white from '../js/generated/themes/white.js';
-import * as g10 from '../js/generated/themes/g10.js';
-import * as g90 from '../js/generated/themes/g90.js';
-import * as g100 from '../js/generated/themes/g100.js';
-import * as v10 from './v10';
-import * as buttonTokens from '../js/generated/component-tokens/button.js';
-import * as tagTokens from '../js/generated/component-tokens/tag.js';
-import * as notificationTokens from '../js/generated/component-tokens/notification.js';
-import * as statusTokens from '../js/generated/component-tokens/status.js';
-import * as contentSwitcherTokens from '../js/generated/component-tokens/content-switcher.js';
-import { formatTokenName } from './tools';
-import { unstable_metadata } from './tokens';
-
-const themes = {
-  white,
-  g10,
-  g90,
-  g100,
-};
-
-export * from '../js/generated/themes/white.js';
-export {
-  white,
-  g10,
-  g90,
-  g100,
-  themes,
-  v10,
-  buttonTokens,
-  tagTokens,
-  notificationTokens,
-  statusTokens,
-  contentSwitcherTokens,
-  unstable_metadata,
-  formatTokenName,
-};
-
-// Re-export type and layout tokens that were previously re-exported via the
-// hand-authored theme files (white.ts, g10.ts, g90.ts, g100.ts) to preserve
-// backward compatibility with @carbon/themes consumers.
-export {
-  caption01,
-  caption02,
-  label01,
-  label02,
-  helperText01,
-  helperText02,
-  bodyShort01,
-  bodyLong01,
-  bodyShort02,
-  bodyLong02,
-  code01,
-  code02,
-  heading01,
-  productiveHeading01,
-  heading02,
-  productiveHeading02,
-  productiveHeading03,
-  productiveHeading04,
-  productiveHeading05,
-  productiveHeading06,
-  productiveHeading07,
-  expressiveHeading01,
-  expressiveHeading02,
-  expressiveHeading03,
-  expressiveHeading04,
-  expressiveHeading05,
-  expressiveHeading06,
-  expressiveParagraph01,
-  quotation01,
-  quotation02,
-  display01,
-  display02,
-  display03,
-  display04,
-} from '@carbon/type';
-export {
-  spacing01,
-  spacing02,
-  spacing03,
-  spacing04,
-  spacing05,
-  spacing06,
-  spacing07,
-  spacing08,
-  spacing09,
-  spacing10,
-  spacing11,
-  spacing12,
-  spacing13,
-  // Fluid spacing
-  fluidSpacing01,
-  fluidSpacing02,
-  fluidSpacing03,
-  fluidSpacing04,
-  // Containers
-  container01,
-  container02,
-  container03,
-  container04,
-  container05,
-  sizeXSmall,
-  sizeSmall,
-  sizeMedium,
-  sizeLarge,
-  sizeXLarge,
-  size2XLarge,
-  // Icon sizes
-  iconSize01,
-  iconSize02,
-  // Layout (deprecated)
-  layout01,
-  layout02,
-  layout03,
-  layout04,
-  layout05,
-  layout06,
-  layout07,
-} from '@carbon/layout';

package/src/tokens/Token.ts

@@ -1,41 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * A Token is the simplest unit in our theme. It can have a name, properties
- * that it applies to like border or background, along with a state if the
- * token should only be used for specific states like hover or focus.
- */
-import type { TokenDefinition, TokenProperties } from './types';
-
-export class Token {
-  kind: 'Token';
-  name: string;
-  properties?: TokenProperties;
-  state?: string;
-
-  static create(token: string | TokenDefinition) {
-    if (typeof token === 'string') {
-      return new Token(token);
-    }
-
-    return new Token(token.name, token.properties, token.state);
-  }
-
-  constructor(name: string, properties?: TokenProperties, state?: string) {
-    this.kind = 'Token';
-    this.name = name;
-
-    if (properties) {
-      this.properties = properties;
-    }
-
-    if (state) {
-      this.state = state;
-    }
-  }
-}

package/src/tokens/TokenFormat.ts

@@ -1,93 +0,0 @@
-/**
- * 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 type { TokenDefinition } from './types';
-
-type TokenFormatName = 'javascript' | 'scss';
-
-const formats: Record<'js' | 'scss', TokenFormatName> = {
-  js: 'javascript',
-  scss: 'scss',
-};
-
-export const TokenFormat = {
-  formats,
-
-  convert({
-    name,
-    format,
-  }: Pick<TokenDefinition, 'name'> & { format?: TokenFormatName }) {
-    if (format === formats.js) {
-      const keywords = new Set(['ui']);
-
-      return name
-        .split('-')
-        .map((part, index) => {
-          if (index === 0) {
-            return part;
-          }
-
-          if (keywords.has(part)) {
-            return part.toUpperCase();
-          }
-
-          return part[0].toUpperCase() + part.slice(1);
-        })
-        .join('');
-    }
-
-    if (format === formats.scss) {
-      return formatNameToScss(name);
-    }
-
-    return name;
-  },
-};
-
-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.
- */
-const formatNameToScss = (token: string) => {
-  let string = '';
-
-  for (let i = 0; i < token.length; i++) {
-    if (token[i] === '-') {
-      continue;
-    }
-
-    // If we run into a number, we hit the scale step at the end of a token name
-    // and can safely truncate the rest of the token
-    if (numbers.indexOf(token[i]) !== -1) {
-      string += '-' + token.slice(i);
-      break;
-    }
-
-    // When encountering an uppercase name, we will want to start adding `-`
-    // between words
-    if (token[i] === token[i].toUpperCase()) {
-      // Check backwards to see if previous letter was also capitalized, if so
-      // we are in a special case like UI where each piece should be connected
-      if (token[i - 1] && token[i - 1] === token[i - 1].toUpperCase()) {
-        string += token[i].toLowerCase();
-        continue;
-      }
-
-      if (token[i - 1] !== '-') {
-        // Otherwise, just concatenate this new part on to the existing string
-        string += '-' + token[i].toLowerCase();
-      }
-      continue;
-    }
-
-    // By default, we add the current character to the output string
-    string += token[i];
-  }
-
-  return string;
-};

package/src/tokens/TokenGroup.ts

@@ -1,185 +0,0 @@
-/**
- * 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
- * groups. A group allows us to colocate related tokens and write information
- * once that applies to the entire collection of tokens. For example, if all the
- * tokens apply to the `border` color property then we can specify this property
- * at the group level
- *
- * A TokenGroup allows us to colocate all this information while also providing
- * ways to get information about the entire group, including properties and
- * states
- */
-export class TokenGroup {
-  kind: 'TokenGroup';
-  name: string;
-  properties?: TokenProperties;
-  children: TokenGroupChild[];
-
-  static create({ name, properties, tokens = [] }: TokenGroupDefinition) {
-    return new TokenGroup(name, tokens, properties);
-  }
-
-  constructor(
-    name: string,
-    tokens: Array<Token | TokenDefinition | TokenGroup | string>,
-    properties?: TokenProperties
-  ) {
-    this.kind = 'TokenGroup';
-    this.name = name;
-
-    if (properties) {
-      this.properties = properties;
-    }
-
-    this.children = tokens.map((child) => {
-      if (
-        typeof child !== 'string' &&
-        'kind' in child &&
-        child.kind === 'TokenGroup'
-      ) {
-        return child;
-      }
-
-      return Token.create(child);
-    });
-  }
-
-  *[Symbol.iterator](): Generator<TokenGroupChild, void, unknown> {
-    yield this;
-
-    for (const child of this.children) {
-      yield child;
-
-      if (child.kind === 'TokenGroup') {
-        yield* child;
-      }
-    }
-  }
-
-  /**
-   * Get all the tokens available in every Token Group in this TokenGroup,
-   * including itself.
-   */
-  getTokens(parentContext: TokenContext = {}): ResolvedToken[] {
-    const context = {
-      ...parentContext,
-      groups: parentContext.groups
-        ? parentContext.groups.concat(this.name)
-        : [this.name],
-      properties: this.properties || parentContext.properties,
-    };
-
-    return this.children.flatMap((child) => {
-      if (child.kind === 'TokenGroup') {
-        return child.getTokens(context);
-      }
-
-      const token: ResolvedToken = {
-        ...context,
-        name: child.name,
-        properties: child.properties || context.properties,
-      };
-
-      if (child.state) {
-        token.state = child.state;
-      }
-
-      return token;
-    });
-  }
-
-  /**
-   * Get a specific token from the TokenGroup, or form one of its nested
-   * TokenGroups
-   */
-  getToken(tokenOrName: Token | string): Token | null {
-    const name =
-      typeof tokenOrName === 'string' ? tokenOrName : tokenOrName.name;
-    for (const child of this) {
-      if (child.kind === 'TokenGroup') {
-        continue;
-      }
-
-      if (child.name === name) {
-        return child;
-      }
-    }
-    return null;
-  }
-
-  /**
-   * Get all the unique groups in the token group, including this group
-   */
-  getTokenGroups() {
-    const set = new Set<TokenGroup>();
-
-    for (const child of this) {
-      if (child.kind !== 'TokenGroup') {
-        continue;
-      }
-      set.add(child);
-    }
-
-    return Array.from(set);
-  }
-
-  /**
-   * Get all the unique properties in the token group, including this group
-   */
-  getTokenProperties() {
-    const set = new Set<string>();
-
-    for (const child of this) {
-      if (!Array.isArray(child.properties)) {
-        continue;
-      }
-
-      for (const property of child.properties) {
-        set.add(property);
-      }
-    }
-
-    return Array.from(set);
-  }
-
-  /**
-   * Get all the unique states in the token group, including this group
-   */
-  getTokenStates() {
-    const set = new Set<string>();
-
-    for (const child of this) {
-      if (child.kind !== 'Token') {
-        continue;
-      }
-      if (child.state) {
-        set.add(child.state);
-      }
-    }
-
-    return Array.from(set);
-  }
-}

package/src/tokens/TokenSet.ts

@@ -1,91 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * A token set is a collection of tokens which should be along with each other.
- * For example, we have tokens that correspond to a layer level in a UI. A
- * 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 {
-  kind: 'TokenSet';
-  name: string;
-  children: TokenSetChild[];
-
-  static create({ name, tokens = [] }: TokenSetDefinition) {
-    return new TokenSet(name, tokens);
-  }
-
-  constructor(name: string, tokens: TokenSetChild[]) {
-    this.kind = 'TokenSet';
-    this.name = name;
-    this.children = tokens;
-  }
-
-  *[Symbol.iterator](): Generator<TokenSetChild, void, unknown> {
-    for (const child of this.children) {
-      yield child;
-
-      if (child.kind === 'TokenSet') {
-        yield* child;
-      }
-    }
-  }
-
-  getTokenSets(): TokenSet[] {
-    const children = this.children
-      .filter((child) => {
-        return child.kind === 'TokenSet';
-      })
-      .flatMap((child) => {
-        return child.getTokenSets();
-      });
-
-    return [this, ...children];
-  }
-
-  getTokenSet(name: string) {
-    for (const child of this) {
-      // TODO: Is this code necessary given the old code was invalid?
-      if (child.kind !== 'TokenSet') {
-        continue;
-      }
-
-      if (child.name === name) {
-        return child;
-      }
-    }
-
-    return null;
-  }
-
-  hasToken(tokenOrName: Token | string) {
-    const name =
-      typeof tokenOrName === 'string' ? tokenOrName : tokenOrName.name;
-
-    for (const child of this) {
-      if (child.kind === 'TokenSet') {
-        continue;
-      }
-
-      if (child.name === name) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-}

package/src/tokens/components.ts

@@ -1,120 +0,0 @@
-/**
- * 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 { TokenGroup } from './TokenGroup';
-
-export const button = TokenGroup.create({
-  name: 'Button',
-  properties: [],
-  tokens: [
-    'button-separator',
-    'button-primary',
-    'button-secondary',
-    'button-tertiary',
-    'button-danger-primary',
-    'button-danger-secondary',
-    'button-danger-active',
-    'button-primary-active',
-    'button-secondary-active',
-    'button-tertiary-active',
-    'button-danger-hover',
-    'button-primary-hover',
-    'button-secondary-hover',
-    'button-tertiary-hover',
-    'button-disabled',
-  ],
-});
-
-export const notification = TokenGroup.create({
-  name: 'Notification',
-  properties: [],
-  tokens: [
-    'notification-background-error',
-    'notification-background-success',
-    'notification-background-info',
-    'notification-background-warning',
-    'notification-action-hover',
-    'notification-action-tertiary-inverse',
-    'notification-action-tertiary-inverse-active',
-    'notification-action-tertiary-inverse-hover',
-    'notification-action-tertiary-inverse-text',
-    'notification-action-tertiary-inverse-text-on-color-disabled',
-  ],
-});
-
-export const tag = TokenGroup.create({
-  name: 'Tag',
-  properties: [],
-  tokens: [
-    'tag-background-red',
-    'tag-color-red',
-    'tag-hover-red',
-    'tag-background-magenta',
-    'tag-color-magenta',
-    'tag-hover-magenta',
-    'tag-background-purple',
-    'tag-color-purple',
-    'tag-hover-purple',
-    'tag-background-blue',
-    'tag-color-blue',
-    'tag-hover-blue',
-    'tag-background-cyan',
-    'tag-color-cyan',
-    'tag-hover-cyan',
-    'tag-background-teal',
-    'tag-color-teal',
-    'tag-hover-teal',
-    'tag-background-green',
-    'tag-color-green',
-    'tag-hover-green',
-    'tag-background-gray',
-    'tag-color-gray',
-    'tag-hover-gray',
-    'tag-border-red',
-    'tag-border-blue',
-    'tag-border-cyan',
-    'tag-border-teal',
-    'tag-border-green',
-    'tag-border-magenta',
-    'tag-border-purple',
-    'tag-border-gray',
-    'tag-border-cool-gray',
-    'tag-border-warm-gray',
-    'tag-background-cool-gray',
-    'tag-color-cool-gray',
-    'tag-hover-cool-gray',
-    'tag-background-warm-gray',
-    'tag-color-warm-gray',
-    'tag-hover-warm-gray',
-  ],
-});
-
-export const status = TokenGroup.create({
-  name: 'Status',
-  properties: [],
-  tokens: [
-    'status-red',
-    'status-orange',
-    'status-orange-outline',
-    'status-yellow',
-    'status-yellow-outline',
-    'status-purple',
-    'status-green',
-    'status-blue',
-    '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/index.ts

@@ -1,59 +0,0 @@
-/**
- * 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 { TokenFormat } from './TokenFormat';
-import { TokenGroup } from './TokenGroup';
-import { TokenSet } from './TokenSet';
-import { group, contextual } from './v11TokenGroup';
-import { set } from './v11TokenSet';
-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 formatMetadata = (name: string, type: TokenMetadata['type']) => ({
-  name,
-  type,
-});
-
-const v11: TokenMetadata[] = [
-  // Base color tokens
-  ...group.getTokens().map((token) => {
-    return formatMetadata(token.name, 'color');
-  }),
-
-  // Contextual tokens
-  ...contextual.getTokens().map((token) => {
-    return formatMetadata(token.name, 'color');
-  }),
-
-  // Component tokens
-  ...Object.values(components).flatMap((group) => {
-    return group.getTokens().map((token) => {
-      return formatMetadata(token.name, 'color');
-    });
-  }),
-
-  // Typography
-  ...type.getTokens().map((token) => {
-    return formatMetadata(token.name, 'type');
-  }),
-
-  // Layout (spacing)
-  ...layout.getTokens().map((token) => {
-    return formatMetadata(token.name, 'layout');
-  }),
-];
-
-export const unstable_metadata = {
-  v11,
-  v10,
-};