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

package/src/tokens/v11TokenGroup.ts

@@ -1,546 +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 background = TokenGroup.create({
-  name: 'Background',
-  properties: ['background'],
-  tokens: [
-    'background',
-    {
-      name: 'background-active',
-      state: 'active',
-    },
-    {
-      name: 'background-selected',
-      state: 'selected',
-    },
-    {
-      name: 'background-selected-hover',
-      state: 'hover',
-    },
-    {
-      name: 'background-hover',
-      state: 'hover',
-    },
-    'background-brand',
-    'background-inverse',
-    {
-      state: 'hover',
-      name: 'background-inverse-hover',
-    },
-  ],
-});
-
-export const layer = TokenGroup.create({
-  name: 'Layer',
-  properties: ['background'],
-  tokens: [
-    {
-      name: 'layer-01',
-    },
-    {
-      state: 'active',
-      name: 'layer-active-01',
-    },
-    {
-      name: 'layer-background-01',
-    },
-    {
-      state: 'hover',
-      name: 'layer-hover-01',
-    },
-    {
-      state: 'selected',
-      name: 'layer-selected-01',
-    },
-    {
-      state: 'hover',
-      name: 'layer-selected-hover-01',
-    },
-    {
-      name: 'layer-02',
-    },
-    {
-      state: 'active',
-      name: 'layer-active-02',
-    },
-    {
-      name: 'layer-background-02',
-    },
-    {
-      state: 'hover',
-      name: 'layer-hover-02',
-    },
-    {
-      state: 'selected',
-      name: 'layer-selected-02',
-    },
-    {
-      state: 'hover',
-      name: 'layer-selected-hover-02',
-    },
-    {
-      name: 'layer-03',
-    },
-    {
-      state: 'active',
-      name: 'layer-active-03',
-    },
-    {
-      name: 'layer-background-03',
-    },
-    {
-      state: 'hover',
-      name: 'layer-hover-03',
-    },
-    {
-      state: 'selected',
-      name: 'layer-selected-03',
-    },
-    {
-      state: 'hover',
-      name: 'layer-selected-hover-03',
-    },
-    {
-      name: 'layer-selected-inverse',
-    },
-    {
-      state: 'disabled',
-      name: 'layer-selected-disabled',
-    },
-    {
-      name: 'layer-accent-01',
-    },
-    {
-      state: 'active',
-      name: 'layer-accent-active-01',
-    },
-    {
-      state: 'hover',
-      name: 'layer-accent-hover-01',
-    },
-    {
-      name: 'layer-accent-02',
-    },
-    {
-      state: 'active',
-      name: 'layer-accent-active-02',
-    },
-    {
-      state: 'hover',
-      name: 'layer-accent-hover-02',
-    },
-    {
-      name: 'layer-accent-03',
-    },
-    {
-      state: 'active',
-      name: 'layer-accent-active-03',
-    },
-    {
-      state: 'hover',
-      name: 'layer-accent-hover-03',
-    },
-  ],
-});
-
-export const field = TokenGroup.create({
-  name: 'Field',
-  properties: ['background'],
-  tokens: [
-    {
-      name: 'field-01',
-    },
-    {
-      state: 'hover',
-      name: 'field-hover-01',
-    },
-    {
-      name: 'field-02',
-    },
-    {
-      state: 'hover',
-      name: 'field-hover-02',
-    },
-    {
-      name: 'field-03',
-    },
-    {
-      state: 'hover',
-      name: 'field-hover-03',
-    },
-  ],
-});
-
-export const border = TokenGroup.create({
-  name: 'Borders',
-  properties: ['border'],
-  tokens: [
-    {
-      name: 'border-subtle-00',
-    },
-    {
-      name: 'border-subtle-01',
-    },
-    {
-      state: 'selected',
-      name: 'border-subtle-selected-01',
-    },
-    {
-      name: 'border-subtle-02',
-    },
-    {
-      state: 'selected',
-      name: 'border-subtle-selected-02',
-    },
-    {
-      name: 'border-subtle-03',
-    },
-    {
-      state: 'selected',
-      name: 'border-subtle-selected-03',
-    },
-
-    // Border strong
-    'border-strong-01',
-    'border-strong-02',
-    'border-strong-03',
-
-    // Border tile
-    'border-tile-01',
-    'border-tile-02',
-    'border-tile-03',
-
-    // Border inverse
-    'border-inverse',
-
-    // Border interactive
-    'border-interactive',
-
-    {
-      state: 'disabled',
-      name: 'border-disabled',
-    },
-  ],
-});
-
-export const text = TokenGroup.create({
-  name: 'Text',
-  properties: ['text'],
-  tokens: [
-    'text-primary',
-    'text-secondary',
-    'text-placeholder',
-    'text-helper',
-    'text-error',
-    'text-inverse',
-    {
-      name: 'text-on-color',
-    },
-    {
-      state: 'disabled',
-      name: 'text-on-color-disabled',
-    },
-
-    {
-      state: 'disabled',
-      name: 'text-disabled',
-    },
-  ],
-});
-
-export const link = TokenGroup.create({
-  name: 'Link',
-  properties: ['text'],
-  tokens: [
-    {
-      name: 'link-primary',
-    },
-    {
-      state: 'hover',
-      name: 'link-primary-hover',
-    },
-    'link-secondary',
-    {
-      state: 'visited',
-      name: 'link-inverse-visited',
-    },
-    'link-visited',
-    'link-inverse',
-    'link-inverse-active',
-    'link-inverse-hover',
-  ],
-});
-
-export const icon = TokenGroup.create({
-  name: 'Icons',
-  properties: ['background', 'fill', 'stroke'],
-  tokens: [
-    'icon-primary',
-    'icon-secondary',
-    'icon-inverse',
-    {
-      name: 'icon-on-color',
-    },
-    {
-      state: 'disabled',
-      name: 'icon-on-color-disabled',
-    },
-    {
-      state: 'disabled',
-      name: 'icon-disabled',
-    },
-    'icon-interactive',
-  ],
-});
-
-export const support = TokenGroup.create({
-  name: 'Support',
-  properties: ['background', 'fill', 'stroke'],
-  tokens: [
-    'support-error',
-    'support-success',
-    'support-warning',
-    'support-info',
-    'support-error-inverse',
-    'support-success-inverse',
-    'support-warning-inverse',
-    'support-info-inverse',
-    'support-caution-major',
-    'support-caution-minor',
-    'support-caution-undefined',
-  ],
-});
-
-export const focus = TokenGroup.create({
-  name: 'Focus',
-  properties: ['border'],
-  tokens: ['focus', 'focus-inset', 'focus-inverse'],
-});
-
-export const skeleton = TokenGroup.create({
-  name: 'Skeleton',
-  properties: ['background'],
-  tokens: ['skeleton-background', 'skeleton-element'],
-});
-
-export const contextual = TokenGroup.create({
-  name: 'Contextual',
-  properties: [],
-  tokens: [
-    'layer',
-    'layer-active',
-    'layer-hover',
-    'layer-selected',
-    'layer-selected-hover',
-    'layer-accent',
-    'layer-accent-hover',
-    'layer-accent-active',
-    'field',
-    'field-hover',
-    'border-subtle',
-    'border-subtle-selected',
-    'border-strong',
-    'border-tile',
-  ],
-});
-
-export const syntaxHighlight = TokenGroup.create({
-  name: 'Syntax Highlighting',
-  properties: ['text'],
-  tokens: [
-    'syntax-comment',
-    'syntax-line-comment',
-    'syntax-block-comment',
-    'syntax-doc-comment',
-    'syntax-doc-string',
-    'syntax-keyword',
-    'syntax-operator-keyword',
-    'syntax-control-keyword',
-    'syntax-definition-keyword',
-    'syntax-module-keyword',
-    'syntax-variable',
-    'syntax-name',
-    'syntax-variable-name',
-    'syntax-label-name',
-    'syntax-attribute',
-    'syntax-attribute-name',
-    'syntax-property-name',
-    'syntax-tag',
-    'syntax-tag-name',
-    'syntax-type',
-    'syntax-type-name',
-    'syntax-class-name',
-    'syntax-namespace',
-    'syntax-macro-name',
-    'syntax-atom',
-    'syntax-literal',
-    'syntax-bool',
-    'syntax-null',
-    'syntax-self',
-    'syntax-number',
-    'syntax-integer',
-    'syntax-float',
-    'syntax-unit',
-    'syntax-string',
-    'syntax-character',
-    'syntax-attribute-value',
-    'syntax-special-string',
-    'syntax-regexp',
-    'syntax-escape',
-    'syntax-url',
-    'syntax-color',
-    'syntax-operator',
-    'syntax-deref-operator',
-    'syntax-arithmetic-operator',
-    'syntax-logic-operator',
-    'syntax-bitwise-operator',
-    'syntax-compare-operator',
-    'syntax-update-operator',
-    'syntax-definition-operator',
-    'syntax-type-operator',
-    'syntax-control-operator',
-    'syntax-modifier',
-    'syntax-punctuation',
-    'syntax-separator',
-    'syntax-bracket',
-    'syntax-angle-bracket',
-    'syntax-square-bracket',
-    'syntax-paren',
-    'syntax-brace',
-    'syntax-content',
-    'syntax-heading',
-    'syntax-heading-1',
-    'syntax-heading-2',
-    'syntax-heading-3',
-    'syntax-heading-4',
-    'syntax-heading-5',
-    'syntax-heading-6',
-    'syntax-content-separator',
-    'syntax-list',
-    'syntax-quote',
-    'syntax-emphasis',
-    'syntax-strong',
-    'syntax-monospace',
-    'syntax-link',
-    'syntax-strikethrough',
-    'syntax-invalid',
-    'syntax-meta',
-    'syntax-document-meta',
-    'syntax-annotation',
-    'syntax-processing-instruction',
-    'syntax-definition',
-    'syntax-constant',
-    'syntax-function',
-    'syntax-standard',
-    'syntax-local',
-    'syntax-special',
-    'syntax-inserted',
-    'syntax-deleted',
-  ],
-});
-
-export const ai = TokenGroup.create({
-  name: 'AI',
-  properties: ['background'],
-  tokens: [
-    // Phase 2
-    'ai-popover-background',
-    'ai-popover-shadow-outer-01',
-    'ai-popover-shadow-outer-02',
-    // Linear gradient refactor
-    'ai-inner-shadow',
-    'ai-aura-start-sm',
-    'ai-aura-start',
-    'ai-aura-end',
-    'ai-aura-hover-background',
-    'ai-aura-hover-start',
-    'ai-aura-hover-end',
-    'ai-border-strong',
-    'ai-border-start',
-    'ai-border-end',
-    'ai-drop-shadow',
-    'ai-skeleton-background',
-    'ai-skeleton-element-background',
-    'ai-overlay',
-    // Caret tokens
-    'ai-popover-caret-center',
-    'ai-popover-caret-bottom',
-    'ai-popover-caret-bottom-background',
-    'ai-popover-caret-bottom-background-actions',
-    // Chat tokens
-    'chat-prompt-background',
-    'chat-prompt-border-start',
-    'chat-prompt-border-end',
-    'chat-prompt-text',
-    'chat-bubble-user',
-    'chat-bubble-user-text',
-    'chat-bubble-agent',
-    'chat-bubble-agent-text',
-    'chat-bubble-border',
-    'chat-avatar-bot',
-    'chat-avatar-agent',
-    'chat-avatar-user',
-    'chat-shell-background',
-    'chat-header-background',
-    'chat-header-text',
-    // Chat button tokens
-    'chat-button',
-    'chat-button-hover',
-    'chat-button-text-hover',
-    'chat-button-active',
-    'chat-button-selected',
-    'chat-button-text-selected',
-  ],
-});
-
-export const group = TokenGroup.create({
-  name: 'All',
-  tokens: [
-    background,
-    layer,
-    field,
-
-    // Interactive
-    {
-      name: 'interactive',
-      properties: ['background', 'text'],
-    },
-
-    border,
-    text,
-    link,
-    icon,
-    support,
-    syntaxHighlight,
-    ai,
-
-    // Misc
-    {
-      name: 'highlight',
-    },
-    {
-      name: 'overlay',
-      properties: ['background'],
-    },
-    {
-      name: 'color-scheme',
-      properties: ['color-scheme'],
-    },
-    {
-      name: 'toggle-off',
-    },
-    {
-      name: 'shadow',
-    },
-
-    focus,
-    skeleton,
-  ],
-});

package/src/tokens/v11TokenSet.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 { 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.ts

@@ -1,69 +0,0 @@
-/**
- * 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.
- */
-import Color from 'color';
-
-/**
- * Adjust a given token's lightness by a specified percentage
- * Example: token = hsl(10, 10, 10);
- * adjustLightness(token, 5) === hsl(10, 10, 15);
- * adjustLightness(token, -5) === hsl(10, 10, 5);
- */
-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);
- */
-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.
- */
-export const formatTokenName = (token: string) => {
-  let string = '';
-
-  for (let i = 0; i < token.length; i++) {
-    // 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;
-      }
-
-      // 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;
-};