@carbon/layout 11.59.0-rc.0 → 11.60.0-rc.0

package/src/index.ts

@@ -5,7 +5,58 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+// Re-export individual token constants generated from src/dtcg/layout.json
+// via the Style Dictionary pipeline (tasks/build.mjs → style-dictionary/sd.config.js).
+// The generated file is kept in sync with the DTCG source of truth.
+export * from '../js/generated/layout-tokens';
+
 import { unstable_tokens } from './tokens';
+import {
+  spacing01,
+  spacing02,
+  spacing03,
+  spacing04,
+  spacing05,
+  spacing06,
+  spacing07,
+  spacing08,
+  spacing09,
+  spacing10,
+  spacing11,
+  spacing12,
+  spacing13,
+  fluidSpacing01,
+  fluidSpacing02,
+  fluidSpacing03,
+  fluidSpacing04,
+  container01,
+  container02,
+  container03,
+  container04,
+  container05,
+  sizeXs,
+  sizeSm,
+  sizeMd,
+  sizeLg,
+  sizeXl,
+  size2xl,
+  iconSize01,
+  iconSize02,
+  layout01,
+  layout02,
+  layout03,
+  layout04,
+  layout05,
+  layout06,
+  layout07,
+  borderRadius00,
+  borderRadius02,
+  borderRadius04,
+  borderRadius08,
+  borderRadius16,
+  borderRadius24,
+  borderRadiusMax,
+} from '../js/generated/layout-tokens';
 
 export { unstable_tokens };
 
@@ -51,29 +102,29 @@ export const px = (value: number) => {
 // Initial map of our breakpoints and their values
 export const breakpoints: Record<BreakpointName, Breakpoint> = {
   sm: {
-    width: /*#__PURE__*/ rem(320),
+    width: rem(320),
     columns: 4,
     margin: '0',
   },
   md: {
-    width: /*#__PURE__*/ rem(672),
+    width: rem(672),
     columns: 8,
-    margin: /*#__PURE__*/ rem(16),
+    margin: rem(16),
   },
   lg: {
-    width: /*#__PURE__*/ rem(1056),
+    width: rem(1056),
     columns: 16,
-    margin: /*#__PURE__*/ rem(16),
+    margin: rem(16),
   },
   xlg: {
-    width: /*#__PURE__*/ rem(1312),
+    width: rem(1312),
     columns: 16,
-    margin: /*#__PURE__*/ rem(16),
+    margin: rem(16),
   },
   max: {
-    width: /*#__PURE__*/ rem(1584),
+    width: rem(1584),
     columns: 16,
-    margin: /*#__PURE__*/ rem(24),
+    margin: rem(24),
   },
 };
 
@@ -94,20 +145,7 @@ export const miniUnits = (count: number) => {
   return rem(miniUnit * count);
 };
 
-// Spacing
-export const spacing01 = /*#__PURE__*/ miniUnits(0.25);
-export const spacing02 = /*#__PURE__*/ miniUnits(0.5);
-export const spacing03 = /*#__PURE__*/ miniUnits(1);
-export const spacing04 = /*#__PURE__*/ miniUnits(1.5);
-export const spacing05 = /*#__PURE__*/ miniUnits(2);
-export const spacing06 = /*#__PURE__*/ miniUnits(3);
-export const spacing07 = /*#__PURE__*/ miniUnits(4);
-export const spacing08 = /*#__PURE__*/ miniUnits(5);
-export const spacing09 = /*#__PURE__*/ miniUnits(6);
-export const spacing10 = /*#__PURE__*/ miniUnits(8);
-export const spacing11 = /*#__PURE__*/ miniUnits(10);
-export const spacing12 = /*#__PURE__*/ miniUnits(12);
-export const spacing13 = /*#__PURE__*/ miniUnits(20);
+// Spacing — aggregate array (individual tokens come from generated re-export above)
 export const spacing = [
   spacing01,
   spacing02,
@@ -124,11 +162,7 @@ export const spacing = [
   spacing13,
 ];
 
-// Fluid spacing
-export const fluidSpacing01 = 0;
-export const fluidSpacing02 = '2vw';
-export const fluidSpacing03 = '5vw';
-export const fluidSpacing04 = '10vw';
+// Fluid spacing — aggregate array
 export const fluidSpacing = [
   fluidSpacing01,
   fluidSpacing02,
@@ -136,15 +170,7 @@ export const fluidSpacing = [
   fluidSpacing04,
 ];
 
-// Layout
-// Deprecated
-export const layout01 = /*#__PURE__*/ miniUnits(2);
-export const layout02 = /*#__PURE__*/ miniUnits(3);
-export const layout03 = /*#__PURE__*/ miniUnits(4);
-export const layout04 = /*#__PURE__*/ miniUnits(6);
-export const layout05 = /*#__PURE__*/ miniUnits(8);
-export const layout06 = /*#__PURE__*/ miniUnits(12);
-export const layout07 = /*#__PURE__*/ miniUnits(20);
+// Layout (deprecated) — aggregate array
 export const layout = [
   layout01,
   layout02,
@@ -155,12 +181,7 @@ export const layout = [
   layout07,
 ];
 
-// Container
-export const container01 = /*#__PURE__*/ miniUnits(3);
-export const container02 = /*#__PURE__*/ miniUnits(4);
-export const container03 = /*#__PURE__*/ miniUnits(5);
-export const container04 = /*#__PURE__*/ miniUnits(6);
-export const container05 = /*#__PURE__*/ miniUnits(8);
+// Container — aggregate array
 export const container = [
   container01,
   container02,
@@ -168,12 +189,14 @@ export const container = [
   container04,
   container05,
 ];
-export const sizeXSmall = /*#__PURE__*/ rem(24);
-export const sizeSmall = /*#__PURE__*/ rem(32);
-export const sizeMedium = /*#__PURE__*/ rem(40);
-export const sizeLarge = /*#__PURE__*/ rem(48);
-export const sizeXLarge = /*#__PURE__*/ rem(64);
-export const size2XLarge = /*#__PURE__*/ rem(80);
+
+// Size — camelCase aliases matching the existing SizeName API
+export const sizeXSmall = sizeXs;
+export const sizeSmall = sizeSm;
+export const sizeMedium = sizeMd;
+export const sizeLarge = sizeLg;
+export const sizeXLarge = sizeXl;
+export const size2XLarge = size2xl;
 export const sizes: Record<SizeName, string> = {
   XSmall: sizeXSmall,
   Small: sizeSmall,
@@ -183,19 +206,10 @@ export const sizes: Record<SizeName, string> = {
   '2XLarge': size2XLarge,
 };
 
-// Icon
-export const iconSize01 = '1rem';
-export const iconSize02 = '1.25rem';
+// Icon — aggregate array
 export const iconSize = [iconSize01, iconSize02];
 
-// Border radius
-export const borderRadius00 = '0px';
-export const borderRadius02 = rem(2);
-export const borderRadius04 = rem(4);
-export const borderRadius08 = rem(8);
-export const borderRadius16 = rem(16);
-export const borderRadius24 = rem(24);
-export const borderRadiusMax = '999999px';
+// Border radius — aggregate record keyed by CSS custom property name
 export const borderRadius: Record<BorderRadiusToken, string> = {
   'border-radius-00': borderRadius00,
   'border-radius-02': borderRadius02,

package/style-dictionary/formats/js-layout.js

@@ -0,0 +1,104 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+/**
+ * Style Dictionary format — carbon/js-layout
+ *
+ * Emits either:
+ *   - An ES module (.js)  with `export const camelName = value;`
+ *   - A TypeScript declaration file (.d.ts) with `export declare const camelName: string;`
+ *
+ * Token names arrive as kebab-case from SD (e.g. "spacing-01") and are
+ * converted to camelCase ("spacing01") so the output matches the existing
+ * hand-authored exports in src/index.ts.
+ */
+
+const FILE_BANNER = `// Code generated by @carbon/layout. DO NOT EDIT.
+//
+// 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.
+`;
+
+/**
+ * Convert kebab-case to camelCase.
+ * "spacing-01"       → "spacing01"
+ * "fluid-spacing-02" → "fluidSpacing02"
+ * "border-radius-08" → "borderRadius08"
+ * "size-xs"          → "sizeXs"  (kept for completeness; index re-exports under SizeName aliases)
+ * "icon-size-01"     → "iconSize01"
+ * "layout-03"        → "layout03"
+ *
+ * @param {string} str
+ * @returns {string}
+ */
+function kebabToCamel(str) {
+  return str.replace(/-([a-z0-9])/g, (_, ch) => ch.toUpperCase());
+}
+
+const BASE_FONT_SIZE = 16;
+const MINI_UNIT = 8;
+
+/**
+ * Resolve a token's raw $value using the carbon.layout.converter extension.
+ * - "miniUnits": steps × 8px ÷ 16 → rem string
+ * - "rem":       px ÷ 16 → rem string
+ * - (none):      value is already a resolved CSS string, returned as-is
+ *
+ * @param {string|number} value
+ * @param {object|undefined} carbonLayout  — token.$extensions?.['carbon.layout']
+ * @returns {string}
+ */
+function resolveValue(value, carbonLayout) {
+  const converter = carbonLayout?.converter;
+  if (converter === 'miniUnits') {
+    return `${(Number(value) * MINI_UNIT) / BASE_FONT_SIZE}rem`;
+  }
+  if (converter === 'rem') {
+    return `${Number(value) / BASE_FONT_SIZE}rem`;
+  }
+  // Unitless zero — preserve as number 0, not the string "0", to match the
+  // original hand-authored export: `export const fluidSpacing01 = 0`
+  if (value === '0' || value === 0) return 0;
+  return String(value);
+}
+
+/**
+ * @param {{ dictionary: import('style-dictionary').Dictionary, options: object }} args
+ * @returns {string}
+ */
+function carbonJsLayoutFormat({ dictionary, options }) {
+  const outputMode = options?.output ?? 'js'; // 'js' | 'dts'
+  const lines = [FILE_BANNER];
+
+  for (const token of dictionary.allTokens) {
+    const camelName = kebabToCamel(token.name);
+    const carbonLayout =
+      token.$extensions?.['carbon.layout'] ??
+      token.extensions?.['carbon.layout'];
+    const resolved = resolveValue(token.value ?? token.$value, carbonLayout);
+
+    const tsType = resolved === 0 ? 'number' : 'string';
+    if (outputMode === 'js') {
+      // Numeric 0 is emitted bare (no quotes) to preserve the original type.
+      const src = resolved === 0 ? '0' : `'${resolved}'`;
+      lines.push(`export const ${camelName} = ${src};`);
+    } else {
+      lines.push(`export declare const ${camelName}: ${tsType};`);
+    }
+  }
+
+  return lines.join('\n') + '\n';
+}
+
+module.exports = {
+  name: 'carbon/js-layout',
+  format: carbonJsLayoutFormat,
+};

package/style-dictionary/formats/scss-layout.js

@@ -0,0 +1,188 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+/**
+ * Style Dictionary format — carbon/scss-layout
+ *
+ * Generates per-category Sass files from layout.json whose content is
+ * byte-for-byte identical to what build.mjs / @carbon/scss-generator produced,
+ * so that nothing downstream breaks.
+ *
+ * Files emitted:
+ *   _spacing.scss        variables + map, !default
+ *   _fluid-spacing.scss  variables + map, !default
+ *   _container.scss      variables + map, !default
+ *   _icon-size.scss      variables + map, !default
+ *   _border-radius.scss  variables + map, !default
+ *   _layout.scss         variables + map, !default  (deprecated tokens)
+ *   _size.scss           bare assignments, no !default, no map
+ */
+
+// ── Banners ───────────────────────────────────────────────────────────────────
+// Most files use 2023; _size.scss uses 2026 — match exactly.
+const BANNER_2023 = `// Code generated by @carbon/layout. 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.
+//`;
+
+const BANNER_2026 = `// Code generated by @carbon/layout. DO NOT EDIT.
+//
+// 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.
+//`;
+
+const VAR_COMMENT = `/// @type Number
+/// @access public
+/// @group @carbon/layout`;
+
+const MAP_COMMENT = `/// @type Map
+/// @access public
+/// @group @carbon/layout`;
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+const BASE_FONT_SIZE = 16;
+const MINI_UNIT = 8;
+
+/**
+ * Resolve a token's $value using carbon.layout.converter if present.
+ * @param {string|number} value
+ * @param {object|undefined} carbonLayout
+ * @returns {string}
+ */
+function resolveValue(value, carbonLayout) {
+  const converter = carbonLayout?.converter;
+  if (converter === 'miniUnits') {
+    return `${(Number(value) * MINI_UNIT) / BASE_FONT_SIZE}rem`;
+  }
+  if (converter === 'rem') {
+    return `${Number(value) / BASE_FONT_SIZE}rem`;
+  }
+  return String(value);
+}
+
+/**
+ * Build a standard file: banner + (comment + $var: value !default;) * n + map.
+ * @param {Array<{name: string, resolved: string}>} tokens
+ * @param {string} mapName  — Sass map variable name
+ * @param {string} banner
+ * @returns {string}
+ */
+function buildStandardFile(tokens, mapName, banner) {
+  const lines = [banner, ''];
+
+  for (const { name, resolved } of tokens) {
+    lines.push(VAR_COMMENT);
+    lines.push(`$${name}: ${resolved} !default;`);
+    lines.push('');
+  }
+
+  lines.push(MAP_COMMENT);
+  lines.push(`$${mapName}: (`);
+  for (const { name } of tokens) {
+    lines.push(`  ${name}: $${name},`);
+  }
+  lines.push(');');
+
+  return lines.join('\n') + '\n';
+}
+
+/**
+ * Build _size.scss — no !default, no map, no per-variable comments.
+ * @param {Array<{name: string, resolved: string}>} tokens
+ * @returns {string}
+ */
+function buildSizeFile(tokens) {
+  const lines = [BANNER_2026, ''];
+  lines.push(VAR_COMMENT);
+  for (const { name, resolved } of tokens) {
+    lines.push(`$${name}: ${resolved};`);
+  }
+  return lines.join('\n') + '\n';
+}
+
+/**
+ * Extract tokens belonging to a DTCG group from the SD dictionary.
+ * Routing is done by token.path[0] — the group name in the JSON — which is
+ * the native DTCG mechanism. No prefix inference needed.
+ *
+ * @param {import('style-dictionary').Dictionary} dictionary
+ * @param {string} groupName  — top-level DTCG group key (e.g. "spacing")
+ * @returns {Array<{name: string, resolved: string}>}
+ */
+function tokensForGroup(dictionary, groupName) {
+  return dictionary.allTokens
+    .filter((t) => t.path[0] === groupName)
+    .map((t) => {
+      const carbonLayout =
+        t.$extensions?.['carbon.layout'] ?? t.extensions?.['carbon.layout'];
+      return {
+        name: t.name,
+        resolved: resolveValue(t.value ?? t.$value, carbonLayout),
+      };
+    });
+}
+
+// ── Format functions — one per DTCG group ─────────────────────────────────────
+
+function formatSpacing({ dictionary }) {
+  const tokens = tokensForGroup(dictionary, 'spacing');
+  return buildStandardFile(tokens, 'spacing', BANNER_2023);
+}
+
+function formatFluidSpacing({ dictionary }) {
+  const tokens = tokensForGroup(dictionary, 'fluid-spacing');
+  // Sass expects unitless 0, not the string "0"
+  const fixed = tokens.map((t) => ({
+    ...t,
+    resolved: t.resolved === '0' ? '0' : t.resolved,
+  }));
+  return buildStandardFile(fixed, 'fluid-spacing', BANNER_2023);
+}
+
+function formatContainer({ dictionary }) {
+  const tokens = tokensForGroup(dictionary, 'container');
+  return buildStandardFile(tokens, 'container', BANNER_2023);
+}
+
+function formatIconSize({ dictionary }) {
+  const tokens = tokensForGroup(dictionary, 'icon-size');
+  return buildStandardFile(tokens, 'icon-size', BANNER_2023);
+}
+
+function formatBorderRadius({ dictionary }) {
+  const tokens = tokensForGroup(dictionary, 'border-radius');
+  return buildStandardFile(tokens, 'border-radius', BANNER_2023);
+}
+
+function formatLayout({ dictionary }) {
+  const tokens = tokensForGroup(dictionary, 'layout');
+  return buildStandardFile(tokens, 'layout', BANNER_2023);
+}
+
+function formatSize({ dictionary }) {
+  const tokens = tokensForGroup(dictionary, 'size');
+  return buildSizeFile(tokens);
+}
+
+// ── Exports ───────────────────────────────────────────────────────────────────
+
+module.exports = [
+  { name: 'carbon/scss-spacing', format: formatSpacing },
+  { name: 'carbon/scss-fluid-spacing', format: formatFluidSpacing },
+  { name: 'carbon/scss-container', format: formatContainer },
+  { name: 'carbon/scss-icon-size', format: formatIconSize },
+  { name: 'carbon/scss-border-radius', format: formatBorderRadius },
+  { name: 'carbon/scss-layout', format: formatLayout },
+  { name: 'carbon/scss-size', format: formatSize },
+];

package/style-dictionary/sd.config.js

@@ -0,0 +1,104 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+/**
+ * Style Dictionary configuration for @carbon/layout.
+ *
+ * Reads src/dtcg/layout.json and generates:
+ *   scss/generated/*.scss                — Sass variables + maps (one file per token group)
+ *   js/generated/layout-tokens.js        — ES module named exports
+ *   js/generated/layout-tokens.d.ts      — TypeScript declarations
+ */
+
+const path = require('path');
+const { default: StyleDictionary } = require('style-dictionary');
+
+const scssFormats = require('./formats/scss-layout');
+const carbonJsLayout = require('./formats/js-layout');
+
+// ── Paths ─────────────────────────────────────────────────────────────────────
+const ROOT = path.resolve(__dirname, '..');
+const DTCG_SOURCE = path.join(ROOT, 'src', 'dtcg', 'layout.json');
+const SCSS_GENERATED = path.join(ROOT, 'scss', 'generated');
+const JS_GENERATED = path.join(ROOT, 'js', 'generated');
+
+// ── Custom name transform ─────────────────────────────────────────────────────
+// Uses only the token's own key (last path segment) as the name, discarding
+// the group prefix. With DTCG groups, path is ["spacing", "spacing-01"] so
+// joining would produce "spacing-spacing-01" — we want just "spacing-01".
+const carbonNameKebab = {
+  name: 'carbon/name-kebab',
+  type: 'name',
+  transform(token) {
+    return token.path[token.path.length - 1];
+  },
+};
+
+// ── Transform group ───────────────────────────────────────────────────────────
+const CARBON_TRANSFORMS = ['attribute/cti', 'carbon/name-kebab'];
+
+// ── SD config ─────────────────────────────────────────────────────────────────
+const config = {
+  source: [DTCG_SOURCE],
+  platforms: {
+    scss: {
+      transformGroup: 'carbon',
+      buildPath: SCSS_GENERATED + '/',
+      files: [
+        { destination: '_spacing.scss', format: 'carbon/scss-spacing' },
+        {
+          destination: '_fluid-spacing.scss',
+          format: 'carbon/scss-fluid-spacing',
+        },
+        { destination: '_container.scss', format: 'carbon/scss-container' },
+        { destination: '_icon-size.scss', format: 'carbon/scss-icon-size' },
+        {
+          destination: '_border-radius.scss',
+          format: 'carbon/scss-border-radius',
+        },
+        { destination: '_layout.scss', format: 'carbon/scss-layout' },
+        { destination: '_size.scss', format: 'carbon/scss-size' },
+      ],
+    },
+    js: {
+      transformGroup: 'carbon',
+      buildPath: JS_GENERATED + '/',
+      files: [
+        {
+          destination: 'layout-tokens.js',
+          format: 'carbon/js-layout',
+          options: { output: 'js' },
+        },
+        {
+          destination: 'layout-tokens.d.ts',
+          format: 'carbon/js-layout',
+          options: { output: 'dts' },
+        },
+      ],
+    },
+  },
+};
+
+// ── Build a registered SD instance ────────────────────────────────────────────
+function createInstance() {
+  const sd = new StyleDictionary({});
+  sd.registerTransform(carbonNameKebab);
+  sd.registerTransformGroup({ name: 'carbon', transforms: CARBON_TRANSFORMS });
+  for (const fmt of scssFormats) sd.registerFormat(fmt);
+  sd.registerFormat(carbonJsLayout);
+  return sd;
+}
+
+// ── run ───────────────────────────────────────────────────────────────────────
+async function run() {
+  const sd = await createInstance().extend(config);
+  await sd.buildAllPlatforms();
+}
+
+module.exports = { run };