@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/config.js

@@ -1,12 +1,384 @@
-/**
- * UnoCSS content configuration for scanning ui-library components.
- */
+import { readFileSync } from 'node:fs';
+import { definePreset } from 'unocss';
+
+let tokensCache;
+
+const getTokens = () => {
+  if (tokensCache) return tokensCache;
+  const raw = readFileSync(new URL('./tokens.json', import.meta.url), 'utf8');
+  tokensCache = JSON.parse(raw);
+  return tokensCache;
+};
+
+// Color conversion utilities
+const clamp01 = (n) => (Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : 0);
+const roundTo = (n, decimals) => Math.round(n * 10 ** decimals) / 10 ** decimals;
+const srgbToLinear = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+
+const parseHexColorToRgba = (hex) => {
+  const s = hex.trim();
+  if (!s.startsWith('#')) return null;
+  const h = s.slice(1);
+  if (![3, 6, 8].includes(h.length) || !/^[0-9a-fA-F]+$/.test(h)) return null;
+  if (h.length === 3) {
+    return {
+      r: parseInt(h[0] + h[0], 16),
+      g: parseInt(h[1] + h[1], 16),
+      b: parseInt(h[2] + h[2], 16),
+      a: 1,
+    };
+  }
+  const result = {
+    r: parseInt(h.slice(0, 2), 16),
+    g: parseInt(h.slice(2, 4), 16),
+    b: parseInt(h.slice(4, 6), 16),
+    a: 1,
+  };
+  // 8-character hex includes alpha as last 2 characters
+  if (h.length === 8) {
+    result.a = parseInt(h.slice(6, 8), 16) / 255;
+  }
+  return result;
+};
+
+const rgbToOklchComponents = (r, g, b, alpha = 1) => {
+  const lr = srgbToLinear(clamp01(r / 255));
+  const lg = srgbToLinear(clamp01(g / 255));
+  const lb = srgbToLinear(clamp01(b / 255));
+
+  const l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb;
+  const m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb;
+  const s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb;
+
+  const l_ = Math.cbrt(l);
+  const m_ = Math.cbrt(m);
+  const s_ = Math.cbrt(s);
+
+  const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+  const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+  const b2 = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+
+  const C = Math.sqrt(a * a + b2 * b2);
+  let h = Math.atan2(b2, a) * (180 / Math.PI);
+  if (h < 0) h += 360;
+
+  const base = `${roundTo(L * 100, 2)}% ${roundTo(C, 4)} ${roundTo(h, 2)}`;
+  // Include alpha if not fully opaque
+  if (alpha < 1) {
+    return `${base} / ${roundTo(alpha * 100, 0)}%`;
+  }
+  return base;
+};
+
+const hslToRgb = (h, s, l) => {
+  const hh = ((h % 360) + 360) % 360;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((hh / 60) % 2) - 1));
+  const m = l - c / 2;
+  let r1 = 0,
+    g1 = 0,
+    b1 = 0;
+
+  if (hh < 60) [r1, g1, b1] = [c, x, 0];
+  else if (hh < 120) [r1, g1, b1] = [x, c, 0];
+  else if (hh < 180) [r1, g1, b1] = [0, c, x];
+  else if (hh < 240) [r1, g1, b1] = [0, x, c];
+  else if (hh < 300) [r1, g1, b1] = [x, 0, c];
+  else [r1, g1, b1] = [c, 0, x];
+
+  return {
+    r: Math.round((r1 + m) * 255),
+    g: Math.round((g1 + m) * 255),
+    b: Math.round((b1 + m) * 255),
+  };
+};
+
+const hslComponentsToRgb = (raw) => {
+  const m = raw.match(/^(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*$/);
+  if (!m) return null;
+  const h = Number(m[1]);
+  const s = Number(m[2]) / 100;
+  const l = Number(m[3]) / 100;
+  if (!Number.isFinite(h) || !Number.isFinite(s) || !Number.isFinite(l)) return null;
+  return hslToRgb(h, s, l);
+};
+
+const normalizeShadcnVarValue = (input) => {
+  if (input == null) return '';
+  const v = String(input).trim();
+
+  const oklchMatch = v.match(/^oklch\(\s*([^)]+?)\s*\)$/i);
+  if (oklchMatch?.[1]) return oklchMatch[1].trim();
+
+  const hslMatch = v.match(/^hsl\(\s*([^)]+?)\s*\)$/i);
+  if (hslMatch?.[1]) {
+    const rgb = hslComponentsToRgb(hslMatch[1].trim());
+    if (rgb) return rgbToOklchComponents(rgb.r, rgb.g, rgb.b);
+    return hslMatch[1].trim();
+  }
+
+  const rawHslRgb = hslComponentsToRgb(v);
+  if (rawHslRgb) return rgbToOklchComponents(rawHslRgb.r, rawHslRgb.g, rawHslRgb.b);
+
+  const rgbMatch = v.match(
+    /^rgba?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)(?:\s*,\s*(\d+(?:\.\d+)?))?\s*\)$/i,
+  );
+  if (rgbMatch) {
+    const alpha = rgbMatch[4] !== undefined ? Number(rgbMatch[4]) : 1;
+    return rgbToOklchComponents(
+      Number(rgbMatch[1]),
+      Number(rgbMatch[2]),
+      Number(rgbMatch[3]),
+      alpha,
+    );
+  }
+
+  const hexRgba = parseHexColorToRgba(v);
+  if (hexRgba) return rgbToOklchComponents(hexRgba.r, hexRgba.g, hexRgba.b, hexRgba.a);
+
+  return v;
+};
+
+// Token resolution
+const getTokenSetSearchOrder = () => {
+  const tokens = getTokens();
+  const order = tokens?.$metadata?.tokenSetOrder;
+  return Array.isArray(order) ? order : Object.keys(tokens || {}).filter((k) => !k.startsWith('$'));
+};
+
+const getTokenLeaf = (tokenSetName, dotPath) => {
+  const tokens = getTokens();
+  const set = tokens?.[tokenSetName];
+  if (!set || typeof set !== 'object') return null;
+
+  let cur = set;
+  for (const p of dotPath.split('.')) {
+    if (!cur || typeof cur !== 'object') return null;
+    cur = cur[p];
+  }
+  return cur && typeof cur === 'object' && 'value' in cur ? cur : null;
+};
+
+const resolveReferences = (value, seen) => {
+  if (typeof value !== 'string') return value;
+
+  const refMatch = value.match(/^\{(.+)\}$/);
+  if (!refMatch) return value;
+
+  const tokens = getTokens();
+  const refPath = refMatch[1].trim();
+  const marker = `ref:${refPath}`;
+
+  if (seen.has(marker)) {
+    throw new Error(`Circular token reference: ${[...seen].join(' -> ')} -> ${refPath}`);
+  }
+  seen.add(marker);
+
+  const parts = refPath.split('.');
+  const sets = getTokenSetSearchOrder().slice().reverse();
+
+  for (const setName of sets) {
+    const set = tokens?.[setName];
+    if (!set || typeof set !== 'object') continue;
+
+    let cur = set;
+    for (const p of parts) {
+      if (!cur || typeof cur !== 'object') {
+        cur = null;
+        break;
+      }
+      cur = cur[p];
+    }
+
+    if (cur && typeof cur === 'object' && 'value' in cur) {
+      return resolveReferences(cur.value, seen);
+    }
+  }
+  return value;
+};
+
+const resolveTokenValue = (tokenSetName, path) => {
+  const leaf = getTokenLeaf(tokenSetName, path);
+  if (!leaf) return null;
+  const resolved = resolveReferences(leaf.value, new Set([`${tokenSetName}:${path}`]));
+  return typeof resolved === 'string' ? resolved : null;
+};
+
+const resolveAnyTokenValue = (path) => {
+  const resolved = resolveReferences(`{${path}}`, new Set([`any:${path}`]));
+  return typeof resolved === 'string' ? resolved : null;
+};
+
+// Collect all color token paths from a mode set
+const collectColorTokenPaths = (obj, prefix = '') => {
+  const paths = [];
+  for (const [key, value] of Object.entries(obj)) {
+    const path = prefix ? `${prefix}.${key}` : key;
+    if (value && typeof value === 'object' && 'value' in value && value.type === 'color') {
+      paths.push(path);
+    } else if (value && typeof value === 'object' && !('value' in value)) {
+      paths.push(...collectColorTokenPaths(value, path));
+    }
+  }
+  return paths;
+};
+
+// Build all token-based CSS variables (e.g., --background-surface-secondary)
+const buildAllTokenVarsFromModeSet = (modeSetName) => {
+  const tokens = getTokens();
+  const modeSet = tokens?.[modeSetName];
+  if (!modeSet) return {};
+
+  const paths = collectColorTokenPaths(modeSet);
+  const vars = {};
+
+  for (const path of paths) {
+    const value = resolveTokenValue(modeSetName, path);
+    if (value) {
+      // Convert dot path to kebab-case CSS variable name
+      // e.g., "background.surface.secondary" -> "background-surface-secondary"
+      const varName = path.replace(/\./g, '-');
+      vars[varName] = value;
+    }
+  }
+
+  return vars;
+};
+
+// shadcn CSS variable builders
+const buildShadcnVarsFromModeSet = (modeSetName) => {
+  const resolve = (path) => resolveTokenValue(modeSetName, path);
+
+  // Background/Surface tokens
+  const background = resolve('background.surface.primary');
+  const foreground = resolve('content.on-surface.primary');
+
+  // Primary - main brand/action button color
+  const primary = resolve('background.button.primary-button');
+  const primaryForeground = resolve('content.on-button.primary-button') ?? foreground;
+
+  // Secondary - less prominent actions
+  const secondary =
+    resolve('background.button.secondary-button') ?? resolve('background.surface.secondary');
+  const secondaryForeground = resolve('content.on-button.secondary-button') ?? foreground;
+
+  // Muted - de-emphasized surfaces
+  const muted = resolve('background.surface.muted') ?? resolve('background.surface.secondary');
+  const mutedForeground =
+    resolve('content.on-surface.muted') ?? resolve('content.on-surface.tertiary') ?? foreground;
+
+  // Accent - highlight/focus elements
+  const accent = resolve('background.accent.soft') ?? resolve('background.accent.default');
+  const accentForeground =
+    resolve('content.on-accent.soft') ?? resolve('content.on-accent.default') ?? foreground;
+  const accentDefault = resolve('background.accent.default');
+  const accentDefaultForeground = resolve('content.on-accent.default') ?? foreground;
+
+  // Destructive - danger/error actions
+  const destructive = resolve('background.button.danger-button');
+  const destructiveForeground = resolve('content.on-button.danger-button') ?? foreground;
+
+  // Border tokens
+  const border = resolve('border.surface.default') ?? resolve('border.input.default');
+  const input = resolve('border.input.default') ?? border;
+  const ring = resolve('border.surface.focus-ring') ?? resolve('background.accent.default');
+
+  // Surface tokens
+  const modal = resolve('background.surface.modal') ?? background;
+  const floating =
+    resolve('background.surface.floating') ??
+    resolveAnyTokenValue('aa.colors.sand.0') ??
+    resolve('background.surface.secondary') ??
+    background;
+
+  // Popover/Card surfaces
+  const popover = floating;
+  const card = resolve('background.surface.primary') ?? background;
+
+  // Input background
+  const inputBg = resolve('background.input.default');
+
+  // Link color
+  const link = resolve('content.on-surface.link') ?? foreground;
+
+  // Hover overlays
+  const hoverDefault = resolve('overlay.hover.default-hover');
+
+  // Modal overlay
+  const modalOverlay = resolve('overlay.surface.modal-overlay');
+
+  // Inverse surfaces (for tooltips)
+  const inverse = resolve('background.surface.inverse');
+  const inverseForeground = resolve('content.on-surface.inverse') ?? foreground;
+
+  // Secondary content color (for calendar unselected dates)
+  const secondaryContent = resolve('content.on-surface.secondary') ?? foreground;
+
+  // Sidebar tokens (overrides unocss-preset-shadcn defaults with design-system colors)
+  const sidebar = resolve('background.surface.primary') ?? background;
+  const sidebarForeground = foreground;
+  const sidebarPrimary = primary;
+  const sidebarPrimaryForeground = primaryForeground;
+  const sidebarAccent = muted;
+  const sidebarAccentForeground = foreground;
+  const sidebarBorder = border;
+  const sidebarRing = ring;
+
+  return {
+    background,
+    foreground,
+    modal,
+    card,
+    'card-foreground': foreground,
+    popover,
+    'popover-foreground': foreground,
+    primary,
+    'primary-foreground': primaryForeground,
+    secondary,
+    'secondary-foreground': secondaryForeground,
+    muted,
+    'muted-foreground': mutedForeground,
+    accent,
+    'accent-foreground': accentForeground,
+    'accent-default': accentDefault,
+    'accent-default-foreground': accentDefaultForeground,
+    destructive,
+    'destructive-foreground': destructiveForeground,
+    border,
+    input,
+    'input-background': inputBg,
+    ring,
+    'ring-offset': background,
+    link,
+    'hover-default': hoverDefault,
+    'modal-overlay': modalOverlay,
+    inverse,
+    'inverse-foreground': inverseForeground,
+    'secondary-content': secondaryContent,
+    sidebar,
+    'sidebar-background': sidebar,
+    'sidebar-foreground': sidebarForeground,
+    'sidebar-primary': sidebarPrimary,
+    'sidebar-primary-foreground': sidebarPrimaryForeground,
+    'sidebar-accent': sidebarAccent,
+    'sidebar-accent-foreground': sidebarAccentForeground,
+    'sidebar-border': sidebarBorder,
+    'sidebar-ring': sidebarRing,
+  };
+};
+
+const mergeThemes = (base, extend) => {
+  if (!extend) return base;
+  return {
+    light: { ...base.light, ...extend.light },
+    dark: { ...base.dark, ...extend.dark },
+  };
+};
+
+// Exported functions
 export const getUiLibraryContentConfig = () => ({
   content: {
     filesystem: ['node_modules/@aleph-alpha/ui-library/dist/**/*.js'],
-    // NOTE: pipeline.include is NOT redundant with filesystem.
-    // filesystem = where to find files, pipeline.include = which files to extract classes from.
-    // Both are required for UnoCSS to properly scan node_modules.
     pipeline: {
       include: [
         /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
@@ -16,3 +388,207 @@ export const getUiLibraryContentConfig = () => ({
     },
   },
 });
+
+export const getUiLibraryThemeFromTokens = () => ({
+  light: buildShadcnVarsFromModeSet('3-mode/Light'),
+  dark: buildShadcnVarsFromModeSet('3-mode/Dark'),
+});
+
+/**
+ * Get all token-based CSS variables for light and dark modes.
+ * These map directly to the token structure, e.g.:
+ * - background.surface.secondary -> --background-surface-secondary
+ * - content.on-surface.primary -> --content-on-surface-primary
+ */
+export const getUiLibraryTokenVars = () => ({
+  light: buildAllTokenVarsFromModeSet('3-mode/Light'),
+  dark: buildAllTokenVarsFromModeSet('3-mode/Dark'),
+});
+
+/**
+ * Get UnoCSS theme colors config for all token-based colors.
+ * This allows using classes like bg-background-surface-secondary, text-content-on-surface-primary, etc.
+ *
+ * @example
+ * ```ts
+ * // uno.config.ts
+ * import { getUiLibraryTokenColors } from '@aleph-alpha/ui-library/config';
+ *
+ * export default defineConfig({
+ *   theme: {
+ *     colors: {
+ *       ...getUiLibraryTokenColors(),
+ *     },
+ *   },
+ * });
+ * ```
+ */
+export const getUiLibraryTokenColors = () => {
+  const lightVars = buildAllTokenVarsFromModeSet('3-mode/Light');
+  const colors = {};
+
+  for (const varName of Object.keys(lightVars)) {
+    // Map CSS variable name to UnoCSS color using oklch with the variable
+    colors[varName] = `oklch(var(--${varName}))`;
+  }
+
+  return colors;
+};
+
+export const defineThemeConfig = (config) => config;
+
+export const presetUiLibraryTheme = (theme, options = {}) => {
+  const rootSelector = options.rootSelector ?? ':root';
+  const darkSelector = options.darkSelector ?? 'html.dark';
+
+  const opacityDefaults = `
+*,
+::before,
+::after {
+  --un-bg-opacity: 1;
+  --un-text-opacity: 1;
+  --un-border-opacity: 1;
+  --un-ring-opacity: 1;
+  --un-shadow-opacity: 1;
+}`.trim();
+
+  const toCssBlock = (selector, vars) => {
+    const entries = Object.entries(vars || {}).filter(([k]) => k && typeof k === 'string');
+    if (!entries.length) return '';
+    const lines = entries.map(([k, v]) => `  --${k}: ${normalizeShadcnVarValue(v)};`).join('\n');
+    return `${selector} {\n${lines}\n}\n`;
+  };
+
+  const css =
+    `${opacityDefaults}\n${toCssBlock(rootSelector, theme.light)}${toCssBlock(darkSelector, theme.dark)}`.trim();
+
+  return definePreset(() => ({
+    name: '@aleph-alpha/ui-library-theme',
+    preflights: [{ getCSS: () => css }],
+  }))();
+};
+
+export const presetUiLibraryThemeFromTokens = (options = {}) => {
+  const { theme, extend, includeAllTokens = false, ...presetOptions } = options;
+
+  // If full theme override provided, use it directly
+  if (theme) {
+    return presetUiLibraryTheme(theme, presetOptions);
+  }
+
+  // Get base shadcn theme from tokens
+  const baseTheme = getUiLibraryThemeFromTokens();
+
+  // Optionally include all token-based variables
+  let finalTheme = baseTheme;
+  if (includeAllTokens) {
+    const tokenVars = getUiLibraryTokenVars();
+    finalTheme = {
+      light: { ...tokenVars.light, ...baseTheme.light },
+      dark: { ...tokenVars.dark, ...baseTheme.dark },
+    };
+  }
+
+  // Merge with extend overrides
+  finalTheme = mergeThemes(finalTheme, extend);
+
+  return presetUiLibraryTheme(finalTheme, presetOptions);
+};
+
+// Typography utilities
+const fontWeightMap = {
+  Regular: '400',
+  Medium: '500',
+  'Semi Bold': '600',
+  Bold: '700',
+};
+
+const resolveTypographyToken = (typographyValue) => {
+  const resolved = {};
+
+  // Resolve font family
+  if (typographyValue.fontFamily) {
+    const family = resolveReferences(typographyValue.fontFamily, new Set());
+    resolved.fontFamily = family;
+  }
+
+  // Resolve font weight
+  if (typographyValue.fontWeight) {
+    const weight = resolveReferences(typographyValue.fontWeight, new Set());
+    resolved.fontWeight = fontWeightMap[weight] || weight;
+  }
+
+  // Resolve font size
+  if (typographyValue.fontSize) {
+    const size = resolveReferences(typographyValue.fontSize, new Set());
+    resolved.fontSize = typeof size === 'number' ? `${size}px` : size;
+  }
+
+  // Resolve line height
+  if (typographyValue.lineHeight) {
+    const lineHeight = resolveReferences(typographyValue.lineHeight, new Set());
+    resolved.lineHeight = typeof lineHeight === 'number' ? `${lineHeight}px` : lineHeight;
+  }
+
+  return resolved;
+};
+
+/**
+ * Get typography shortcuts for UnoCSS.
+ * Returns an object mapping class names to CSS properties.
+ *
+ * @example
+ * Returns shortcuts like:
+ * - 'heading-48-bold': { font-family, font-size, font-weight, line-height }
+ * - 'body-14-normal': { font-family, font-size, font-weight, line-height }
+ * - 'label-12-medium': { font-family, font-size, font-weight, line-height }
+ */
+export const getUiLibraryTypographyShortcuts = () => {
+  const tokens = getTokens();
+  const global = tokens?.global;
+  if (!global) return [];
+
+  const shortcuts = [];
+
+  // Typography token groups
+  const typographyGroups = [
+    { prefix: 'Label', size: '12' },
+    { prefix: 'Body', size: '14' },
+    { prefix: 'Body', size: '16' },
+    { prefix: 'Heading', size: '20' },
+    { prefix: 'Heading', size: '24' },
+    { prefix: 'Heading', size: '30' },
+    { prefix: 'Heading', size: '48' },
+  ];
+
+  for (const { prefix, size } of typographyGroups) {
+    const tokenKey = `${prefix} ${size}`;
+    const tokenGroup = global[tokenKey];
+
+    if (!tokenGroup || typeof tokenGroup !== 'object') continue;
+
+    for (const [variant, tokenData] of Object.entries(tokenGroup)) {
+      if (!tokenData?.value || tokenData.type !== 'typography') continue;
+
+      const resolved = resolveTypographyToken(tokenData.value);
+
+      // Create class name: heading-48-bold, body-14-normal, label-12-medium
+      // Convert variant to kebab-case (e.g., "semi bold" -> "semi-bold")
+      const variantKebab = variant.toLowerCase().replace(/\s+/g, '-');
+      const className = `${prefix.toLowerCase()}-${size}-${variantKebab}`;
+
+      // Build the CSS properties string
+      const cssProps = [];
+      if (resolved.fontFamily) cssProps.push(`font-family:${resolved.fontFamily}`);
+      if (resolved.fontSize) cssProps.push(`font-size:${resolved.fontSize}`);
+      if (resolved.fontWeight) cssProps.push(`font-weight:${resolved.fontWeight}`);
+      if (resolved.lineHeight) cssProps.push(`line-height:${resolved.lineHeight}`);
+
+      if (cssProps.length > 0) {
+        shortcuts.push([className, cssProps.join(';')]);
+      }
+    }
+  }
+
+  return shortcuts;
+};