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

package/src/index.ts

@@ -1,221 +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.
- */
-
-// 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 };
-
-export type BreakpointName = 'sm' | 'md' | 'lg' | 'xlg' | 'max';
-export type Breakpoint = {
-  width: string;
-  columns: number;
-  margin: string;
-};
-export type SizeName =
-  | 'XSmall'
-  | 'Small'
-  | 'Medium'
-  | 'Large'
-  | 'XLarge'
-  | '2XLarge';
-export type BorderRadiusToken =
-  | 'border-radius-00'
-  | 'border-radius-02'
-  | 'border-radius-04'
-  | 'border-radius-08'
-  | 'border-radius-16'
-  | 'border-radius-24'
-  | 'border-radius-max';
-
-// Convert
-// Default, Use with em() and rem() functions
-export const baseFontSize = 16;
-
-export const rem = (px: number) => {
-  return `${px / baseFontSize}rem`;
-};
-
-export const em = (px: number) => {
-  return `${px / baseFontSize}em`;
-};
-
-export const px = (value: number) => {
-  return `${value}px`;
-};
-
-// Breakpoint
-// Initial map of our breakpoints and their values
-export const breakpoints: Record<BreakpointName, Breakpoint> = {
-  sm: {
-    width: rem(320),
-    columns: 4,
-    margin: '0',
-  },
-  md: {
-    width: rem(672),
-    columns: 8,
-    margin: rem(16),
-  },
-  lg: {
-    width: rem(1056),
-    columns: 16,
-    margin: rem(16),
-  },
-  xlg: {
-    width: rem(1312),
-    columns: 16,
-    margin: rem(16),
-  },
-  max: {
-    width: rem(1584),
-    columns: 16,
-    margin: rem(24),
-  },
-};
-
-export const breakpointUp = (name: BreakpointName) => {
-  return `@media (min-width: ${breakpoints[name].width})`;
-};
-
-export const breakpointDown = (name: BreakpointName) => {
-  return `@media (max-width: ${breakpoints[name].width})`;
-};
-
-export const breakpoint = breakpointUp;
-
-// Mini-unit
-export const miniUnit = 8;
-
-export const miniUnits = (count: number) => {
-  return rem(miniUnit * count);
-};
-
-// Spacing — aggregate array (individual tokens come from generated re-export above)
-export const spacing = [
-  spacing01,
-  spacing02,
-  spacing03,
-  spacing04,
-  spacing05,
-  spacing06,
-  spacing07,
-  spacing08,
-  spacing09,
-  spacing10,
-  spacing11,
-  spacing12,
-  spacing13,
-];
-
-// Fluid spacing — aggregate array
-export const fluidSpacing = [
-  fluidSpacing01,
-  fluidSpacing02,
-  fluidSpacing03,
-  fluidSpacing04,
-];
-
-// Layout (deprecated) — aggregate array
-export const layout = [
-  layout01,
-  layout02,
-  layout03,
-  layout04,
-  layout05,
-  layout06,
-  layout07,
-];
-
-// Container — aggregate array
-export const container = [
-  container01,
-  container02,
-  container03,
-  container04,
-  container05,
-];
-
-// 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,
-  Medium: sizeMedium,
-  Large: sizeLarge,
-  XLarge: sizeXLarge,
-  '2XLarge': size2XLarge,
-};
-
-// Icon — aggregate array
-export const iconSize = [iconSize01, iconSize02];
-
-// Border radius — aggregate record keyed by CSS custom property name
-export const borderRadius: Record<BorderRadiusToken, string> = {
-  'border-radius-00': borderRadius00,
-  'border-radius-02': borderRadius02,
-  'border-radius-04': borderRadius04,
-  'border-radius-08': borderRadius08,
-  'border-radius-16': borderRadius16,
-  'border-radius-24': borderRadius24,
-  'border-radius-max': borderRadiusMax,
-};

package/src/tokens.ts

@@ -1,56 +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.
- */
-
-export const unstable_tokens = [
-  // Spacing
-  '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',
-] as const;

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

@@ -1,104 +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.
- */
-
-'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

@@ -1,188 +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.
- */
-
-'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

@@ -1,104 +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.
- */
-
-'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 };

package/tsconfig.json

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

package/tsconfig.types.json

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