@carbon/themes 11.78.0 → 11.79.0

package/style-dictionary/preprocessors/dual-role.js

@@ -0,0 +1,157 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+/**
+ *
+ * DTCG source files (g10.json, g90.json, g100.json) contain nodes that are
+ * simultaneously token leaves (they have a `$value`) AND token groups (they
+ * have non-`$`-prefixed children).  Style Dictionary v5 does not support this
+ * pattern — when a node has `$value`, SD treats it as a leaf token and silently
+ * drops any non-`$` children.
+ *
+ * Example (g10.json):
+ *
+ *   background: {
+ *     $type:  "color",
+ *     $value: "{gray.10}",            ← token leaf value
+ *     active: { $type: "color", $value: "{gray.50}", ... },  ← child token
+ *     brand:  { ... }
+ *   }
+ *
+ * Without this preprocessor, SD emits `background` but loses `background-active`
+ * and `background-brand`.  There are 27 such dual-role nodes in each of
+ * g10 / g90 / g100, causing 48 tokens to go missing from the generated output.
+ *
+ * ── Solution ────────────────────────────────────────────────────────────────
+ *
+ * For any dual-role node (has `$value` AND non-`$` children), this preprocessor
+ * splits the node:
+ *
+ *   1. The parent's token value (`$value`, `$type`, `$extensions`) is moved into
+ *      a synthetic `_self` child at the same level.
+ *   2. The parent node becomes a pure group (its `$value` is removed).
+ *
+ * After this transform, the tree becomes:
+ *
+ *   background: {
+ *     _self:  { $type: "color", $value: "{gray.10}" },   ← parent value
+ *     active: { $type: "color", $value: "{gray.50}", ... },
+ *     brand:  { ... }
+ *   }
+ *
+ * SD sees `background._self` as path `['background', '_self']` and
+ * `background.active` as path `['background', 'active']`.
+ *
+ * A companion custom name transform (`carbon/name-kebab`, registered in
+ * sd.config.js) strips `_self` from the path when building the token name:
+ *
+ *   ['background', '_self'] → 'background'       (parent token)
+ *   ['background', 'active'] → 'background-active'
+ *   ['layer', '_self'] → 'layer'
+ *   ['layer', '01'] → 'layer-01'
+ *
+ * This reproduces the flat token names that the old dtcg-converter produced,
+ * while preserving correct hierarchy for SD's alias resolution and path-based
+ * name computation.
+ *
+ * ── Alias resolution ────────────────────────────────────────────────────────
+ *
+ * The color-palette.json file is loaded as `source:` (not pre-processed) by
+ * sd.config.js, so its tokens stay in their original nested form and SD alias
+ * resolution ({blue.60} etc.) continues to work.
+ *
+ * This preprocessor is called with only the theme JSON as input (passed as
+ * `tokens:` in themeConfig()), never seeing the merged palette+theme tree.
+ * Therefore palette tokens are unaffected.
+ *
+ * @param {object} dictionary  Raw DTCG token tree (theme file only)
+ * @returns {object}           Normalised tree with dual-role nodes split
+ */
+
+/**
+ * Process a single DTCG token node.
+ *
+ * The node may be:
+ *   - A pure leaf token (has `$value`, no non-`$` children) → returned as-is.
+ *   - A pure group (no `$value`, has non-`$` children) → children are recursed.
+ *   - A dual-role node (has BOTH `$value` AND non-`$` children) → split: the
+ *     `$value`/`$type`/`$extensions` are moved to a `_self` synthetic leaf, and
+ *     the node becomes a pure group whose children include `_self` plus the
+ *     original children (each recursively processed).
+ *
+ * @param {object} node  A single DTCG node object.
+ * @returns {object}     The normalised node.
+ */
+function processNode(node) {
+  if (!node || typeof node !== 'object') return node;
+
+  const hasValue = '$value' in node;
+  const nonDollarChildren = Object.keys(node).filter((k) => !k.startsWith('$'));
+  const hasChildren = nonDollarChildren.length > 0;
+
+  if (hasValue && hasChildren) {
+    // ── Dual-role node ────────────────────────────────────────────────────────
+    // Collect the DTCG metadata into a `_self` leaf.
+    const selfLeaf = {};
+    for (const [k, v] of Object.entries(node)) {
+      if (k.startsWith('$')) selfLeaf[k] = v;
+    }
+    // Build the pure-group: _self first, then recursively-processed children.
+    const group = { _self: selfLeaf };
+    for (const childKey of nonDollarChildren) {
+      group[childKey] = processNode(node[childKey]);
+    }
+    return group;
+  } else if (hasChildren) {
+    // ── Pure group ────────────────────────────────────────────────────────────
+    const out = {};
+    for (const [k, v] of Object.entries(node)) {
+      if (k.startsWith('$')) {
+        out[k] = v;
+      } else {
+        out[k] = processNode(v);
+      }
+    }
+    return out;
+  } else {
+    // ── Pure leaf token ───────────────────────────────────────────────────────
+    return node;
+  }
+}
+
+/**
+ * Top-level preprocessor function.
+ *
+ * The top-level dictionary itself is always a group (never a token), so we
+ * iterate its entries and call processNode() on each non-`$` child.
+ *
+ * @param {object} dictionary  Raw DTCG token tree from the theme JSON file
+ * @returns {object}           Normalised tree with all dual-role nodes split
+ */
+function carbonDualRolePreprocessor(dictionary) {
+  if (!dictionary || typeof dictionary !== 'object') return dictionary;
+
+  const out = {};
+  for (const [key, value] of Object.entries(dictionary)) {
+    if (key.startsWith('$')) {
+      // Top-level DTCG metadata — preserve as-is.
+      out[key] = value;
+    } else if (value && typeof value === 'object') {
+      out[key] = processNode(value);
+    } else {
+      out[key] = value;
+    }
+  }
+  return out;
+}
+
+module.exports = {
+  name: 'carbon/dual-role',
+  preprocessor: carbonDualRolePreprocessor,
+};

package/style-dictionary/preprocessors/theme-metadata.js

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+/**
+ *
+ * Extracts the `$extensions["org.carbon"]["color-scheme"]` value that lives
+ * at the top level of each theme JSON file (white.json, g10.json, etc.) and
+ * injects it as a synthetic `color-scheme` token, so the SCSS format can
+ * include it in the theme Sass map alongside the regular color tokens.
+ *
+ *
+ * @param {object} dictionary  Style Dictionary raw token tree
+ * @returns {object}
+ */
+function carbonThemeMetadataPreprocessor(dictionary) {
+  const colorScheme = dictionary.$extensions?.['org.carbon']?.['color-scheme'];
+
+  if (!colorScheme) {
+    return dictionary;
+  }
+
+  // Inject as color.scheme so the flattened token name becomes 'color-scheme',
+  // matching what dtcg-converter.js produces today.
+  return {
+    ...dictionary,
+    color: {
+      ...(dictionary.color ?? {}),
+      scheme: {
+        $type: 'other',
+        $value: colorScheme,
+        $description: 'Color scheme of this theme (light or dark)',
+      },
+    },
+  };
+}
+
+module.exports = {
+  name: 'carbon/theme-metadata',
+  preprocessor: carbonThemeMetadataPreprocessor,
+};

package/style-dictionary/sd.config.js

@@ -0,0 +1,342 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+/**
+ * Style Dictionary configuration for @carbon/themes.
+ *
+ * Wires together the custom plugins in this directory
+ *
+ */
+
+const path = require('path');
+const fs = require('fs-extra');
+const { default: StyleDictionary } = require('style-dictionary');
+
+// ── Custom plugins ────────────────────────────────────────────────────────────
+const carbonColorFlatten = require('./transforms/color-flatten');
+const carbonAlphaModifier = require('./transforms/alpha-modifier');
+const carbonComponentTokensPreprocessor = require('./preprocessors/component-tokens');
+const carbonThemeMetadataPreprocessor = require('./preprocessors/theme-metadata');
+const { preprocessor: flattenDualRole } = require('./preprocessors/dual-role');
+const carbonScssThemes = require('./formats/scss-themes');
+const carbonScssTokens = require('./formats/scss-tokens');
+const carbonScssComponentTokens = require('./formats/scss-component-tokens');
+const carbonJsThemes = require('./formats/js-themes');
+const carbonJsComponentTokens = require('./formats/js-component-tokens');
+
+// ── Paths ─────────────────────────────────────────────────────────────────────
+const ROOT = path.resolve(__dirname, '..');
+const DTCG_DIR = path.join(ROOT, 'src', 'dtcg');
+const SCSS_GENERATED = path.join(ROOT, 'scss', 'generated');
+const JS_GENERATED_THEMES = path.join(ROOT, 'js', 'generated', 'themes');
+const JS_GENERATED_COMPONENTS = path.join(
+  ROOT,
+  'js',
+  'generated',
+  'component-tokens'
+);
+
+const THEME_NAMES = ['white', 'g10', 'g90', 'g100'];
+const COMPONENT_NAMES = [
+  'button',
+  'tag',
+  'notification',
+  'status',
+  'content-switcher',
+];
+
+// ── Custom name transform ─────────────────────────────────────────────────────
+//
+// Builds a kebab-case name from the SD token path, with one special rule:
+// a path segment equal to `_self` is stripped.  This is used in conjunction
+// with the carbon/dual-role preprocessor — dual-role parent token values are
+// placed under a `_self` child key so that SD processes them as separate leaf
+// tokens, but their output name omits the `_self` suffix.
+//
+// Examples:
+//   ['background']           → 'background'
+//   ['background', '_self']  → 'background'   (parent of dual-role node)
+//   ['background', 'active'] → 'background-active'
+//   ['layer', '01']          → 'layer-01'
+//   ['layer', '_self']       → 'layer'
+const carbonNameKebab = {
+  name: 'carbon/name-kebab',
+  type: 'name',
+  transform(token) {
+    return token.path
+      .filter((p) => p !== '_self')
+      .map((p) => p.replace(/^_/, '').replace(/_/g, '-'))
+      .join('-');
+  },
+};
+
+// ── Transform group ────────────────────────────────────────────────────────────
+//
+// Order matters: alpha-modifier must fire BEFORE color-flatten so the hex
+// is already resolved when flatten runs.
+// Both are `transitive: true` — SD re-applies them until the value stabilises.
+const CARBON_TRANSFORMS = [
+  'attribute/cti',
+  'carbon/name-kebab', // custom: strips _self from dual-role parent paths
+  'carbon/alpha-modifier',
+  'carbon/color-flatten',
+];
+
+// ── Helper: build config for one theme ───────────────────────────────────────
+function themeConfig(themeName) {
+  // Pre-process the theme JSON to handle "dual-role" nodes (nodes that have
+  // both a $value AND non-$ children).  SD v5 treats a node with $value as a
+  // leaf and silently drops children; flattenDualRole collects ALL leaf tokens
+  // (including children of dual-role parents) into a flat camelCase structure.
+  // The palette is kept in `source:` (nested) so SD alias resolution works.
+  const rawTheme = JSON.parse(
+    fs.readFileSync(path.join(DTCG_DIR, `${themeName}.json`), 'utf8')
+  );
+  const flatTokens = flattenDualRole(rawTheme);
+
+  return {
+    source: [path.join(DTCG_DIR, 'color-palette.json')],
+    tokens: flatTokens,
+    preprocessors: ['carbon/theme-metadata'],
+    platforms: {
+      // SCSS theme map
+      [`scss/themes/${themeName}`]: {
+        transformGroup: 'carbon',
+        buildPath: SCSS_GENERATED + '/',
+        files: [
+          {
+            // Each theme writes to its own temp file; a post-step
+            // (buildAllPlatforms action) concatenates them into _themes.scss.
+            destination: `_theme-${themeName}.scss`,
+            format: 'carbon/scss-themes',
+            options: { themeName },
+            // Exclude palette reference tokens from the theme map.
+            filter(token) {
+              const role =
+                token.$extensions?.['org.carbon']?.role ??
+                token.extensions?.['org.carbon']?.role;
+              return role !== 'reference';
+            },
+          },
+        ],
+      },
+      // JS theme module
+      [`js/themes/${themeName}`]: {
+        transformGroup: 'carbon',
+        buildPath: JS_GENERATED_THEMES + '/',
+        files: [
+          {
+            destination: `${themeName}.js`,
+            format: 'carbon/js-themes',
+            options: { themeName, output: 'js' },
+            filter(token) {
+              const role =
+                token.$extensions?.['org.carbon']?.role ??
+                token.extensions?.['org.carbon']?.role;
+              return role !== 'reference';
+            },
+          },
+          {
+            destination: `${themeName}.d.ts`,
+            format: 'carbon/js-themes',
+            options: { themeName, output: 'dts' },
+            filter(token) {
+              const role =
+                token.$extensions?.['org.carbon']?.role ??
+                token.extensions?.['org.carbon']?.role;
+              return role !== 'reference';
+            },
+          },
+        ],
+      },
+    },
+  };
+}
+
+// ── Helper: build config for one component ───────────────────────────────────
+function componentConfig(componentName) {
+  return {
+    source: [
+      path.join(DTCG_DIR, 'color-palette.json'),
+      path.join(DTCG_DIR, 'components', `${componentName}.json`),
+    ],
+    preprocessors: ['carbon/component-tokens'],
+    platforms: {
+      // SCSS component token map
+      [`scss/component-tokens/${componentName}`]: {
+        transformGroup: 'carbon',
+        buildPath: SCSS_GENERATED + '/',
+        files: [
+          {
+            destination: `_${componentName}-tokens.scss`,
+            format: 'carbon/scss-component-tokens',
+            filter(token) {
+              // Only include expanded theme tokens (injected by preprocessor)
+              return token.name.includes('-by-theme-');
+            },
+          },
+        ],
+      },
+      // JS component token module
+      [`js/component-tokens/${componentName}`]: {
+        transformGroup: 'carbon',
+        buildPath: JS_GENERATED_COMPONENTS + '/',
+        files: [
+          {
+            destination: `${componentName}.js`,
+            format: 'carbon/js-component-tokens',
+            options: { output: 'js' },
+            filter(token) {
+              return token.name.includes('-by-theme-');
+            },
+          },
+          {
+            destination: `${componentName}.d.ts`,
+            format: 'carbon/js-component-tokens',
+            options: { output: 'dts' },
+            filter(token) {
+              return token.name.includes('-by-theme-');
+            },
+          },
+        ],
+      },
+    },
+  };
+}
+
+// ── _tokens.scss config ───────────────────────────────────────────────────────
+//
+// This file does not use token values at all — it reads from Carbon JS metadata
+// directly.  We still run it through SD so it participates in buildAllPlatforms
+// and can be tested alongside the other outputs.
+const tokensConfig = {
+  // No source files needed — format reads from src/tokens directly.
+  source: [],
+  platforms: {
+    'scss/tokens': {
+      transformGroup: 'carbon',
+      buildPath: SCSS_GENERATED + '/',
+      files: [
+        {
+          destination: '_tokens.scss',
+          format: 'carbon/scss-tokens',
+        },
+      ],
+    },
+  },
+};
+
+// ── Build a registered SD instance ────────────────────────────────────────────
+// In SD v5, register* methods live on the instance, not the class.
+// We create one base instance with all plugins registered, then extend it
+// per-config so each build inherits the registrations.
+function createBase() {
+  const base = new StyleDictionary({});
+  // Register custom transforms BEFORE the transform group that references them.
+  base.registerTransform(carbonNameKebab);
+  base.registerTransform(carbonAlphaModifier);
+  base.registerTransform(carbonColorFlatten);
+  base.registerTransformGroup({
+    name: 'carbon',
+    transforms: CARBON_TRANSFORMS,
+  });
+  base.registerPreprocessor(carbonComponentTokensPreprocessor);
+  base.registerPreprocessor(carbonThemeMetadataPreprocessor);
+  base.registerFormat(carbonScssThemes);
+  base.registerFormat(carbonScssTokens);
+  base.registerFormat(carbonScssComponentTokens);
+  base.registerFormat(carbonJsThemes);
+  base.registerFormat(carbonJsComponentTokens);
+  return base;
+}
+
+// ── SCSS build ────────────────────────────────────────────────────────────────
+// Generates:
+//   scss/generated/_themes.scss
+//   scss/generated/_tokens.scss
+//   scss/generated/_button-tokens.scss   (and tag, notification, status, content-switcher)
+async function runScss() {
+  const base = createBase();
+  const scssTokensContent = await carbonScssTokens.format({
+    dictionary: { allTokens: [] },
+    options: {},
+    file: {},
+  });
+  fs.ensureDirSync(SCSS_GENERATED);
+  fs.writeFileSync(
+    path.join(SCSS_GENERATED, '_tokens.scss'),
+    scssTokensContent,
+    'utf8'
+  );
+
+  // Per-theme maps — write to temp files, then concatenate
+  for (const themeName of THEME_NAMES) {
+    await (await base.extend(themeConfig(themeName))).buildAllPlatforms();
+  }
+
+  // Concatenate per-theme temp files into a single _themes.scss
+  const themeParts = THEME_NAMES.map((name) => {
+    const src = path.join(SCSS_GENERATED, `_theme-${name}.scss`);
+    const content = fs.readFileSync(src, 'utf8');
+    return name === THEME_NAMES[0]
+      ? content
+      : '\n' +
+          content
+            .replace(/^\/\/[^\n]*\n(?:\/\/[^\n]*\n)*/m, '') // strip banner
+            .replace(/^@use [^\n]+\n/gm, '') // strip duplicate @use
+            .replace(/^\n+/, ''); // collapse leading blanks
+  });
+  fs.writeFileSync(
+    path.join(SCSS_GENERATED, '_themes.scss'),
+    themeParts.join(''),
+    'utf8'
+  );
+  for (const name of THEME_NAMES) {
+    fs.removeSync(path.join(SCSS_GENERATED, `_theme-${name}.scss`));
+  }
+
+  // Component token maps
+  for (const componentName of COMPONENT_NAMES) {
+    await (
+      await base.extend(componentConfig(componentName))
+    ).buildAllPlatforms();
+  }
+}
+
+// ── JS build ──────────────────────────────────────────────────────────────────
+// Generates:
+//   js/generated/themes/{white,g10,g90,g100}.{js,d.ts}
+//   js/generated/component-tokens/{button,tag,…}.{js,d.ts}
+async function runJs() {
+  const base = createBase();
+
+  for (const themeName of THEME_NAMES) {
+    await (await base.extend(themeConfig(themeName))).buildAllPlatforms();
+  }
+  for (const componentName of COMPONENT_NAMES) {
+    await (
+      await base.extend(componentConfig(componentName))
+    ).buildAllPlatforms();
+  }
+}
+
+// ── Full build (SCSS + JS) ────────────────────────────────────────────────────
+async function run() {
+  await runScss();
+  await runJs();
+}
+
+module.exports = {
+  run,
+  runScss,
+  runJs,
+  themeConfig,
+  componentConfig,
+  tokensConfig,
+};

package/style-dictionary/transforms/alpha-modifier.js

@@ -0,0 +1,68 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+/**
+ *
+ * Applies the `$extensions["org.carbon"].alphaModifier` field to theme tokens,
+ * producing an `rgba()` string.
+ *
+ * Must run AFTER alias resolution (transitive: true) so that by the time this
+ * transform fires, `token.value` is already the resolved hex string from the
+ * palette (e.g. '#8d8d8d' for gray.50), not the raw alias '{gray.50}'.
+ *
+ * If no alphaModifier extension is present the token is passed through
+ * unchanged (carbon/color-flatten will handle it next).
+ *
+ * Example in white.json:
+ *   "background-active": {
+ *     "$type": "color",
+ *     "$value": "{gray.50}",         ← resolved by SD to '#8d8d8d'
+ *     "$extensions": {
+ *       "org.carbon": { "alphaModifier": 0.5 }
+ *     }
+ *   }
+ *   → 'rgba(141, 141, 141, 0.5)'
+ */
+
+module.exports = {
+  name: 'carbon/alpha-modifier',
+  type: 'value',
+  transitive: true,
+  filter(token) {
+    const ext =
+      token.$extensions?.['org.carbon'] ?? token.extensions?.['org.carbon'];
+    return ext?.alphaModifier !== undefined;
+  },
+  transform(token) {
+    const ext =
+      token.$extensions?.['org.carbon'] ?? token.extensions?.['org.carbon'];
+    const alpha = ext.alphaModifier;
+
+    // SD v5: post-alias value is in token.$value (resolved object or hex string).
+    // In the golden-master test, token.value holds the pre-resolved hex string.
+    const resolved = token.value !== undefined ? token.value : token.$value;
+    const hex =
+      typeof resolved === 'string'
+        ? resolved
+        : typeof resolved === 'object' && resolved?.hex
+          ? resolved.hex
+          : null;
+
+    if (!hex || !hex.startsWith('#') || hex.length < 7) {
+      // Fallback: if resolution hasn't happened yet, return unchanged and let
+      // the transitive pass retry.
+      return token.value ?? token.$value;
+    }
+
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  },
+};

package/style-dictionary/transforms/color-flatten.js

@@ -0,0 +1,79 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+/**
+ *
+ * Converts the DTCG color $value object shapes used by this codebase into
+ * plain CSS color strings, after Style Dictionary has already resolved any
+ * alias references.
+ *
+ * Input shapes (post-alias-resolution, i.e. $value is already an object):
+ *
+ *   Shape A — solid inline object
+ *     { colorSpace: 'srgb', components: [...], hex: '#rrggbb' }
+ *     → '#rrggbb'
+ *
+ *   Shape B — alpha inline object (components + alpha, no hex)
+ *     { colorSpace: 'srgb', components: [r, g, b], alpha: 0.5 }
+ *     → 'rgba(r, g, b, 0.5)'
+ *
+ * Plain strings and non-sRGB objects are passed through unchanged.
+ *
+ * NOTE: The alias+alphaModifier case (Shape C) is handled upstream by the
+ * carbon/alpha-modifier transform, which runs first (transitive: true ensures
+ * the resolved alias value is already in scope when this transform fires).
+ */
+
+module.exports = {
+  name: 'carbon/color-flatten',
+  type: 'value',
+  transitive: true,
+  filter(token) {
+    return token.$type === 'color' || token.type === 'color';
+  },
+  transform(token) {
+    // SD v5 stores the post-alias-resolution value in token.$value (the DTCG
+    // field), NOT in token.value.  token.value is only set after transforms run.
+    // The golden-master test sets both; in that context token.value is preferred
+    // so the test can simulate resolution without running full SD.
+    const v = token.value !== undefined ? token.value : token.$value;
+
+    if (typeof v === 'string') {
+      // Already a plain string (e.g. '#0f62fe' or 'rgba(...)') — pass through.
+      return v;
+    }
+
+    if (v === null || typeof v !== 'object') {
+      return v;
+    }
+
+    // SD v5 can resolve an alias to the full token node instead of its value
+    // when the alias points to a sibling token (e.g. {syntax.value} resolving
+    // to the syntax.value token object). Unwrap one level.
+    if ('$value' in v) {
+      const inner = v.$value;
+      if (typeof inner === 'string') return inner;
+      if (inner?.hex) return inner.hex;
+    }
+
+    if (v.colorSpace !== 'srgb' || !Array.isArray(v.components)) {
+      return v;
+    }
+
+    // Shape A — solid: hex present
+    if (typeof v.hex === 'string') {
+      return v.hex;
+    }
+
+    // Shape B — alpha: derive rgba from 0–1 component floats
+    const [r, g, b] = v.components.map((c) => Math.round(c * 255));
+    const alpha = v.alpha !== undefined ? v.alpha : 1;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  },
+};