@terrazzo/token-tools 0.0.2 → 0.0.3

package/src/color.ts

@@ -1,32 +1,6 @@
 import 'culori/css';
 import { type Color, parse } from 'culori/fn';
-
-export interface ColorValueNormalized {
-  /** Colorspace (default: `srgb`) @see https://www.w3.org/TR/css-color-4/#predefined */
-  colorSpace: ColorSpace;
-  /** Color channels. Will be normalized to 1 unless the colorspace prevents it (e.g. XYZ, LAB) */
-  channels: [number, number, number];
-  /** Alpha channel, normalized from 0 – 1 */
-  alpha: number;
-}
-
-export type ColorSpace =
-  | 'a98'
-  | 'display-p3'
-  | 'hsb'
-  | 'hsl'
-  | 'hsv'
-  | 'hwb'
-  | 'lab'
-  | 'lch'
-  | 'oklab'
-  | 'oklch'
-  | 'prophoto-rgb'
-  | 'rec2020'
-  | 'srgb-linear'
-  | 'srgb'
-  | 'xyz-d50'
-  | 'xyz-d65';
+import type { ColorSpace, ColorValueNormalized } from './types.js';
 
 export const CULORI_TO_CSS: Record<
   Extract<

package/src/css/boolean.ts

@@ -0,0 +1,15 @@
+import { type IDGenerator, defaultAliasTransform } from './lib.js';
+
+/** Convert boolean value to CSS string */
+export function transformBooleanValue(
+  value: boolean,
+  { aliasOf, transformAlias = defaultAliasTransform }: { aliasOf?: string; transformAlias?: IDGenerator } = {},
+): string {
+  if (aliasOf) {
+    return transformAlias(aliasOf);
+  }
+  if (typeof value !== 'boolean') {
+    throw new Error(`Expected boolean, received ${typeof value} "${value}"`);
+  }
+  return value ? '1' : '0';
+}

package/src/css/border.ts

@@ -0,0 +1,46 @@
+import { displayable } from 'culori';
+import type { BorderValue } from '../types.js';
+import { transformColorValue } from './color.js';
+import { transformDimensionValue } from './dimension.js';
+import { type IDGenerator, defaultAliasTransform } from './lib.js';
+import { transformStrokeStyleValue } from './stroke-style.js';
+
+/** Convert border value to multiple CSS values */
+export function transformBorderValue(
+  value: BorderValue,
+  {
+    aliasOf,
+    partialAliasOf,
+    transformAlias = defaultAliasTransform,
+  }: {
+    aliasOf?: string;
+    partialAliasOf?: Partial<Record<keyof typeof value, string>>;
+    transformAlias: IDGenerator;
+  },
+) {
+  if (aliasOf) {
+    return transformAlias(aliasOf);
+  }
+
+  const width = partialAliasOf?.width
+    ? transformAlias(partialAliasOf.width)
+    : transformDimensionValue(value.width, { transformAlias });
+  const color = partialAliasOf?.color
+    ? transformAlias(partialAliasOf.color)
+    : transformColorValue(value.color, { transformAlias });
+  const style = partialAliasOf?.style
+    ? transformAlias(partialAliasOf.style)
+    : transformStrokeStyleValue(value.style, { transformAlias });
+
+  const formatBorder = (colorKey: string) =>
+    [width, style, typeof color === 'string' ? color : color[colorKey as keyof typeof color]].join(' ');
+
+  return typeof color === 'string' || displayable(color.p3)
+    ? formatBorder('.')
+    : {
+        '.': formatBorder('.'),
+        srgb: formatBorder('srgb'),
+        p3: formatBorder('p3'),
+        rec2020: formatBorder('rec2020'),
+      };
+}

package/src/css/color.ts

@@ -0,0 +1,80 @@
+import { clampChroma, type Color, formatCss, displayable } from 'culori';
+import { CSS_TO_CULORI, parseColor } from '../color.js';
+import type { ColorValue } from '../types.js';
+import { type IDGenerator, defaultAliasTransform } from './lib.js';
+
+export type WideGamutColorValue = { '.': string; srgb: string; p3: string; rec2020: string };
+
+/** Convert color value to CSS string */
+export function transformColorValue(
+  value: string | ColorValue,
+  { aliasOf, transformAlias = defaultAliasTransform }: { aliasOf?: string; transformAlias?: IDGenerator } = {},
+): string | WideGamutColorValue {
+  if (aliasOf) {
+    return transformAlias(aliasOf);
+  }
+
+  const { colorSpace, channels, alpha } = typeof value === 'string' ? parseColor(value) : value;
+  const color = { mode: CSS_TO_CULORI[colorSpace], alpha } as Color;
+  switch (color.mode) {
+    case 'a98':
+    case 'rec2020':
+    case 'p3':
+    case 'prophoto':
+    case 'lrgb':
+    case 'rgb': {
+      color.r = channels[0];
+      color.g = channels[1];
+      color.b = channels[2];
+      break;
+    }
+    case 'hsl': {
+      color.h = channels[0];
+      color.s = channels[1];
+      color.l = channels[2];
+      break;
+    }
+    case 'hsv': {
+      color.h = channels[0];
+      color.s = channels[1];
+      color.v = channels[2];
+      break;
+    }
+    case 'hwb': {
+      color.h = channels[0];
+      color.w = channels[1];
+      color.b = channels[2];
+      break;
+    }
+    case 'lab':
+    case 'oklab': {
+      color.l = channels[0];
+      color.a = channels[1];
+      color.b = channels[2];
+      break;
+    }
+    case 'lch':
+    case 'oklch': {
+      color.l = channels[0];
+      color.c = channels[1];
+      color.h = channels[2];
+      break;
+    }
+    case 'xyz50':
+    case 'xyz65': {
+      color.x = channels[0];
+      color.y = channels[1];
+      color.z = channels[2];
+      break;
+    }
+  }
+
+  return displayable(color)
+    ? formatCss(color)
+    : {
+        '.': formatCss(color),
+        srgb: (typeof value === 'object' && value.hex) || formatCss(clampChroma(color, color.mode, 'rgb')),
+        p3: formatCss(clampChroma(color, color.mode, 'p3')),
+        rec2020: formatCss(clampChroma(color, color.mode, 'rec2020')),
+      };
+}

package/src/css/cubic-bezier.ts

@@ -0,0 +1,23 @@
+import type { CubicBézierValue } from '../types.js';
+import { type IDGenerator, defaultAliasTransform } from './lib.js';
+
+/** Convert cubicBezier value to CSS */
+export function transformCubicBezierValue(
+  value: CubicBézierValue,
+  {
+    aliasOf,
+    partialAliasOf,
+    transformAlias = defaultAliasTransform,
+  }: {
+    aliasOf?: string;
+    partialAliasOf?: [string | undefined, string | undefined, string | undefined, string | undefined];
+    transformAlias?: IDGenerator;
+  } = {},
+): string {
+  if (aliasOf) {
+    return transformAlias(aliasOf);
+  }
+  return `cubic-bezier(${value
+    .map((v, i) => (partialAliasOf?.[i] ? transformAlias(partialAliasOf[i]!) : v))
+    .join(', ')})`;
+}

package/src/css/dimension.ts

@@ -0,0 +1,15 @@
+import { type IDGenerator, defaultAliasTransform } from './lib.js';
+
+/** Convert dimension value to CSS */
+export function transformDimensionValue(
+  value: number | string,
+  { aliasOf, transformAlias = defaultAliasTransform }: { aliasOf?: string; transformAlias?: IDGenerator } = {},
+): string {
+  if (aliasOf) {
+    return transformAlias(aliasOf);
+  }
+  if (typeof value === 'number') {
+    return value === 0 ? '0' : `${value}px`;
+  }
+  return value === '0' || Number.parseFloat(value) === 0 ? '0' : value;
+}

package/src/css/duration.ts

@@ -0,0 +1,15 @@
+import { type IDGenerator, defaultAliasTransform } from './lib.js';
+
+/** Convert duration value to CSS */
+export function transformDurationValue(
+  value: number | string,
+  { aliasOf, transformAlias = defaultAliasTransform }: { aliasOf?: string; transformAlias?: IDGenerator } = {},
+): string {
+  if (aliasOf) {
+    return transformAlias(aliasOf);
+  }
+  if (typeof value === 'number' || String(Number.parseFloat(value)) === value) {
+    return `${value}ms`;
+  }
+  return value;
+}

package/src/css/font-family.ts

@@ -0,0 +1,32 @@
+import { type IDGenerator, defaultAliasTransform } from './lib.js';
+
+export const FONT_FAMILY_KEYWORDS = new Set([
+  'sans-serif',
+  'serif',
+  'monospace',
+  'system-ui',
+  'ui-monospace',
+  '-apple-system',
+]);
+
+export function transformFontFamilyValue(
+  value: string | string[],
+  {
+    aliasOf,
+    partialAliasOf,
+    transformAlias = defaultAliasTransform,
+  }: { aliasOf?: string; partialAliasOf?: string[]; transformAlias?: IDGenerator } = {},
+): string {
+  if (aliasOf) {
+    return transformAlias(aliasOf);
+  }
+  return (typeof value === 'string' ? [value] : value)
+    .map((fontName, i) =>
+      partialAliasOf?.[i]
+        ? transformAlias(partialAliasOf[i]!)
+        : FONT_FAMILY_KEYWORDS.has(fontName)
+          ? fontName
+          : `"${fontName}"`,
+    )
+    .join(', ');
+}

package/src/css/font-weight.ts

@@ -0,0 +1,12 @@
+import { type IDGenerator, defaultAliasTransform } from './lib.js';
+
+/** Convert fontWeight value to CSS */
+export function transformFontWeightValue(
+  value: number | string,
+  { aliasOf, transformAlias = defaultAliasTransform }: { aliasOf?: string; transformAlias?: IDGenerator } = {},
+): string {
+  if (aliasOf) {
+    return transformAlias(aliasOf);
+  }
+  return String(value);
+}

package/src/css/gradient.ts

@@ -0,0 +1,42 @@
+import type { GradientStopNormalized, GradientValueNormalized } from '../types';
+import { transformColorValue, type WideGamutColorValue } from './color.js';
+import { type IDGenerator, defaultAliasTransform } from './lib.js';
+
+/** Convert gradient value to CSS */
+export function transformGradientValue(
+  value: GradientValueNormalized,
+  {
+    aliasOf,
+    partialAliasOf,
+    transformAlias = defaultAliasTransform,
+  }: {
+    aliasOf?: string;
+    partialAliasOf?: Partial<Record<keyof GradientStopNormalized, string>>[];
+    transformAlias?: IDGenerator;
+  } = {},
+): string | WideGamutColorValue {
+  if (aliasOf) {
+    return transformAlias(aliasOf);
+  }
+  const colors = value.map(({ color }, i) =>
+    partialAliasOf?.[i]?.color ? transformAlias(partialAliasOf[i]!.color as string) : transformColorValue(color),
+  );
+  const positions = value.map(({ position }, i) =>
+    partialAliasOf?.[i]?.position ? transformAlias(String(partialAliasOf[i]!.position)) : `${100 * position}%`,
+  );
+  const isHDR = colors.some((c) => typeof c === 'object');
+  const formatStop = (index: number, colorKey = '.') =>
+    [
+      typeof colors[index] === 'string' ? colors[index] : colors[index]![colorKey as keyof (typeof colors)[number]],
+      positions[index]!,
+    ].join(' ');
+
+  return !isHDR
+    ? value.map((_, i) => formatStop(i, positions[i]!)).join(', ')
+    : {
+        '.': value.map((_, i) => formatStop(i, '.')).join(', '),
+        srgb: value.map((_, i) => formatStop(i, 'srgb')).join(', '),
+        p3: value.map((_, i) => formatStop(i, 'p3')).join(', '),
+        rec2020: value.map((_, i) => formatStop(i, 'rec2020')).join(', '),
+      };
+}