ds-tis 1.0.0-beta.10

package/js/theme/color.js

@@ -0,0 +1,149 @@
+/* ============================================================
+   color.js — conversões de cor sem dependências (browser + Node)
+
+   Suporta a cadeia sRGB(hex) ↔ linear sRGB ↔ OKLab ↔ OKLCH.
+   OKLCH é usado como espaço de trabalho porque é perceptualmente
+   uniforme: variar lightness/chroma gera escalas com passos
+   visualmente regulares, ao contrário de HSL.
+
+   Referências: Björn Ottosson, "A perceptual color space for image
+   processing" (OKLab/OKLCH).
+   ============================================================ */
+
+/** Limita n ao intervalo [min, max]. */
+export function clamp(n, min, max) {
+  return Math.min(max, Math.max(min, n));
+}
+
+/** "#2563EB" | "2563eb" | "#25f" → { r, g, b } em 0..255. */
+export function hexToRgb(hex) {
+  let h = String(hex).trim().replace(/^#/, '');
+  if (h.length === 3) h = h.split('').map((c) => c + c).join('');
+  if (h.length !== 6 || /[^0-9a-fA-F]/.test(h)) {
+    throw new Error(`hex inválido: ${hex}`);
+  }
+  return {
+    r: parseInt(h.slice(0, 2), 16),
+    g: parseInt(h.slice(2, 4), 16),
+    b: parseInt(h.slice(4, 6), 16),
+  };
+}
+
+/** { r, g, b } 0..255 → "#RRGGBB" uppercase. */
+export function rgbToHex({ r, g, b }) {
+  const to2 = (n) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0');
+  return ('#' + to2(r) + to2(g) + to2(b)).toUpperCase();
+}
+
+/** sRGB 8-bit channel → linear-light 0..1. */
+function srgbToLinear(c) {
+  const cs = c / 255;
+  return cs <= 0.04045 ? cs / 12.92 : Math.pow((cs + 0.055) / 1.055, 2.4);
+}
+
+/** linear-light 0..1 → sRGB 8-bit channel 0..255. */
+function linearToSrgb(c) {
+  const cs = c <= 0.0031308 ? c * 12.92 : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+  return clamp(Math.round(cs * 255), 0, 255);
+}
+
+/** { r, g, b } 0..255 → OKLab { L, a, b }. */
+export function rgbToOklab({ r, g, b }) {
+  const lr = srgbToLinear(r);
+  const lg = srgbToLinear(g);
+  const lb = srgbToLinear(b);
+
+  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);
+
+  return {
+    L: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
+    a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
+    b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_,
+  };
+}
+
+/** OKLab { L, a, b } → { r, g, b } 0..255 (com clamp de gamut). */
+export function oklabToRgb({ L, a, b }) {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+
+  const lr = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+  const lg = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+  const lb = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+
+  return { r: linearToSrgb(lr), g: linearToSrgb(lg), b: linearToSrgb(lb) };
+}
+
+/** OKLab { L, a, b } → OKLCH { L, C, h } (h em graus 0..360). */
+export function oklabToOklch({ L, a, b }) {
+  const C = Math.sqrt(a * a + b * b);
+  let h = Math.atan2(b, a) * (180 / Math.PI);
+  if (h < 0) h += 360;
+  return { L, C, h };
+}
+
+/** OKLCH { L, C, h } → OKLab { L, a, b }. */
+export function oklchToOklab({ L, C, h }) {
+  const hr = (h * Math.PI) / 180;
+  return { L, a: Math.cos(hr) * C, b: Math.sin(hr) * C };
+}
+
+/** "#RRGGBB" → OKLCH { L, C, h }. */
+export function hexToOklch(hex) {
+  return oklabToOklch(rgbToOklab(hexToRgb(hex)));
+}
+
+/** OKLCH { L, C, h } → "#RRGGBB" (gamut sRGB via clamp por canal). */
+export function oklchToHex(oklch) {
+  return rgbToHex(oklabToRgb(oklchToOklab(oklch)));
+}
+
+/**
+ * Luminância relativa WCAG (0..1) a partir de { r, g, b } 0..255.
+ * Usada por contrast.js. Mesma fórmula da WCAG 2.x.
+ */
+export function relativeLuminance({ r, g, b }) {
+  const lin = (c) => {
+    const cs = c / 255;
+    return cs <= 0.03928 ? cs / 12.92 : Math.pow((cs + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+/** Monta string rgba() a partir de hex + alpha 0..1. */
+export function hexToRgba(hex, alpha) {
+  const { r, g, b } = hexToRgb(hex);
+  const a = clamp(alpha, 0, 1);
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+/** "rgba(r,g,b,a)" → { r, g, b, a }. */
+export function parseRgba(str) {
+  const m = String(str).trim().match(
+    /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/,
+  );
+  if (!m) throw new Error(`rgba inválido: ${str}`);
+  return { r: +m[1], g: +m[2], b: +m[3], a: m[4] !== undefined ? +m[4] : 1 };
+}
+
+/** Cor semi-transparente composta sobre fundo sólido hex → hex resultante. */
+export function compositeOnHex(overlay, underHex) {
+  const { r, g, b, a } = typeof overlay === 'string' ? parseRgba(overlay) : overlay;
+  const bg = hexToRgb(underHex);
+  return rgbToHex({
+    r: r * a + bg.r * (1 - a),
+    g: g * a + bg.g * (1 - a),
+    b: b * a + bg.b * (1 - a),
+  });
+}

package/js/theme/config-schema.js

@@ -0,0 +1,40 @@
+/* ============================================================
+   config-schema.js — normalização e defaults do ThemeConfig
+
+   ThemeConfig é a abstração de alto nível manipulada pela UI
+   (equivalente ao preset do shadcn create / accentColor do Radix).
+   ============================================================ */
+
+/** Config padrão = paleta default do DS (blue), radius default, Inter/DM Mono. */
+export const DEFAULT_CONFIG = {
+  brand: { seed: '#0056E0', chromaBoost: 1 },
+  radius: 'default',
+  typography: { sans: 'Inter', mono: 'DM Mono' },
+  mode: 'light',
+};
+
+const HEX_RE = /^#?[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/;
+
+/**
+ * Normaliza um config parcial contra os defaults e valida campos.
+ * Lança Error em entrada inválida (seed não-hex, mode inválido).
+ */
+export function normalizeConfig(input = {}) {
+  const cfg = {
+    brand: { ...DEFAULT_CONFIG.brand, ...(input.brand || {}) },
+    radius: input.radius === 'pill' ? 'soft' : (input.radius ?? DEFAULT_CONFIG.radius),
+    typography: { ...DEFAULT_CONFIG.typography, ...(input.typography || {}) },
+    mode: input.mode ?? DEFAULT_CONFIG.mode,
+  };
+
+  if (!HEX_RE.test(String(cfg.brand.seed))) {
+    throw new Error(`brand.seed inválido: ${cfg.brand.seed}`);
+  }
+  if (!cfg.brand.seed.startsWith('#')) cfg.brand.seed = '#' + cfg.brand.seed;
+  cfg.brand.seed = cfg.brand.seed.toUpperCase();
+
+  if (cfg.mode !== 'light' && cfg.mode !== 'dark') {
+    throw new Error(`mode inválido: ${cfg.mode}`);
+  }
+  return cfg;
+}

package/js/theme/contrast.js

@@ -0,0 +1,76 @@
+/* ============================================================
+   contrast.js — razão de contraste WCAG 2.2 e seleção acessível
+
+   WCAG 2.2 AA (AGENTS.md §8):
+     - texto normal: >= 4.5:1
+     - texto large / componentes UI: >= 3:1
+   ============================================================ */
+
+import { hexToRgb, relativeLuminance, compositeOnHex } from './color.js';
+
+export const WCAG_AA_TEXT = 4.5;
+export const WCAG_AA_LARGE = 3;
+export const WCAG_AA_UI = 3;
+
+/**
+ * Razão de contraste WCAG entre duas cores. Aceita hex; bg rgba exige
+ * `under` (hex do fundo sobre o qual o overlay semi-transparente está).
+ */
+export function contrastRatio(fg, bg, { under } = {}) {
+  let fgHex = fg;
+  let bgHex = bg;
+  if (String(fg).startsWith('rgba') || String(fg).startsWith('rgb(')) {
+    if (!under) throw new Error('contrastRatio: under é obrigatório quando fg é rgba');
+    fgHex = compositeOnHex(fg, under);
+  }
+  if (String(bg).startsWith('rgba') || String(bg).startsWith('rgb(')) {
+    if (!under) throw new Error('contrastRatio: under é obrigatório quando bg é rgba');
+    bgHex = compositeOnHex(bg, under);
+  }
+  const la = relativeLuminance(hexToRgb(fgHex));
+  const lb = relativeLuminance(hexToRgb(bgHex));
+  const lighter = Math.max(la, lb);
+  const darker = Math.min(la, lb);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+/** true se o par atinge o threshold (default: texto normal 4.5:1). */
+export function meetsContrast(hexA, hexB, threshold = WCAG_AA_TEXT) {
+  return contrastRatio(hexA, hexB) >= threshold;
+}
+
+/**
+ * Escolhe o foreground de maior contraste entre candidatos (default:
+ * quase-branco vs quase-preto neutros do DS). Retorna o hex vencedor
+ * e se ele passa no threshold.
+ */
+export function pickAccessibleForeground(
+  bgHex,
+  { light = '#F8FAFC', dark = '#0F172A', threshold = WCAG_AA_TEXT } = {}
+) {
+  const rLight = contrastRatio(bgHex, light);
+  const rDark = contrastRatio(bgHex, dark);
+  const useDark = rDark >= rLight;
+  const fg = useDark ? dark : light;
+  const ratio = useDark ? rDark : rLight;
+  return { fg, ratio, passes: ratio >= threshold };
+}
+
+/**
+ * Avalia uma lista de pares foreground/background e retorna um relatório.
+ * Cada par: { name, fg, bg, threshold? }.
+ */
+export function auditPairs(pairs) {
+  return pairs.map((p) => {
+    const threshold = p.threshold ?? WCAG_AA_TEXT;
+    const ratio = contrastRatio(p.fg, p.bg, p.under ? { under: p.under } : undefined);
+    return {
+      name: p.name,
+      fg: p.fg,
+      bg: p.bg,
+      ratio: Math.round(ratio * 100) / 100,
+      threshold,
+      passes: ratio >= threshold,
+    };
+  });
+}

package/js/theme/export.js

@@ -0,0 +1,118 @@
+/* ============================================================
+   export.js — gera artefatos exportáveis do tema
+
+   Três formatos (como shadcn / Radix):
+     - CSS snippet  → bloco [data-theme] pronto pra colar
+     - JSON config  → ThemeConfig serializado
+     - DTCG patch   → subset pra alimentar tokens/foundation/colors.json
+   ============================================================ */
+
+import { normalizeConfig } from './config-schema.js';
+import { mapThemeToVars } from './semantic-mapper.js';
+import { generateBrandScale, STEPS } from './palette.js';
+import { generateTonedOverlays } from './overlay.js';
+
+/**
+ * Snippet CSS com as vars sob um seletor data-theme. Separa as props
+ * mode-invariant (scale, radius, fonts) das que variam por modo
+ * (overlays/foreground), emitindo blocos light e dark.
+ */
+export function toCssSnippet(config, themeName = 'custom') {
+  const cfg = normalizeConfig(config);
+  const light = mapThemeToVars({ ...cfg, mode: 'light' }, 'light').vars;
+  const dark = mapThemeToVars({ ...cfg, mode: 'dark' }, 'dark').vars;
+
+  // Vars iguais nos dois modos vão pro bloco base; o resto pro override dark.
+  const base = {};
+  const darkOnly = {};
+  for (const [k, v] of Object.entries(light)) {
+    if (dark[k] === v) base[k] = v;
+    else base[k] = v;
+  }
+  for (const [k, v] of Object.entries(dark)) {
+    if (light[k] !== v) darkOnly[k] = v;
+  }
+
+  const fmt = (obj) =>
+    Object.entries(obj)
+      .map(([k, v]) => `  ${k}: ${v};`)
+      .join('\n');
+
+  let out = `[data-theme="${themeName}"] {\n${fmt(base)}\n}`;
+  if (Object.keys(darkOnly).length) {
+    out += `\n\n[data-theme="${themeName}"][data-mode="dark"] {\n${fmt(darkOnly)}\n}`;
+  }
+  return out;
+}
+
+/** JSON pretty do ThemeConfig normalizado. */
+export function toJsonConfig(config) {
+  return JSON.stringify(normalizeConfig(config), null, 2);
+}
+
+/**
+ * Patch DTCG para foundation.color.brand.* (retrocompatível).
+ * Preferir toDtcgThemePatch() para write-back completo.
+ */
+export function toDtcgBrandPatch(config) {
+  const patch = toDtcgThemePatch(config);
+  return { foundation: { color: { brand: patch.foundation.color.brand } } };
+}
+
+/**
+ * Patch DTCG completo: foundation brand + overlays toned + alias semantic.content.brand.
+ * Não escreve arquivos — devolve objeto para revisão/write-back manual.
+ */
+export function toDtcgThemePatch(config) {
+  const cfg = normalizeConfig(config);
+  const scale = generateBrandScale(cfg.brand.seed, {
+    chromaBoost: cfg.brand.chromaBoost ?? 1,
+  });
+  const lightOverlays = generateTonedOverlays(scale[600], 'light');
+  const darkOverlays = generateTonedOverlays(scale[400], 'dark');
+
+  const brand = {};
+  for (const step of STEPS) {
+    brand[step] = { $type: 'color', $value: scale[step] };
+  }
+
+  return {
+    foundation: {
+      color: {
+        brand,
+        overlay: {
+          'brand-600': {
+            12: { $type: 'color', $value: lightOverlays.default },
+            20: { $type: 'color', $value: lightOverlays.hover },
+            28: { $type: 'color', $value: lightOverlays.active },
+          },
+          'brand-400': {
+            15: { $type: 'color', $value: darkOverlays.default },
+            25: { $type: 'color', $value: darkOverlays.hover },
+            32: { $type: 'color', $value: darkOverlays.active },
+          },
+        },
+      },
+    },
+    semantic: {
+      light: {
+        content: {
+          brand: {
+            $type: 'color',
+            $value: '{foundation.color.brand.700}',
+            $description: 'Conteúdo brand sobre superfície neutra (light).',
+          },
+        },
+      },
+      dark: {
+        content: {
+          brand: {
+            $type: 'color',
+            $value: '{foundation.color.brand.400}',
+            $description: 'Conteúdo brand sobre superfície neutra (dark).',
+          },
+        },
+      },
+    },
+  };
+}

package/js/theme/index.js

@@ -0,0 +1,21 @@
+/* ============================================================
+   index.js — API pública do theme engine
+
+   Uso no browser (playground) ou Node (scripts/testes):
+
+     import { applyTheme, toCssSnippet } from './js/theme/index.js';
+     applyTheme({ brand: { seed: '#EA580C' }, radius: 'round', mode: 'light' });
+   ============================================================ */
+
+export * from './color.js';
+export * from './contrast.js';
+export * from './palette.js';
+export * from './overlay.js';
+export * from './radius.js';
+export * from './typography.js';
+export * from './config-schema.js';
+export * from './semantic-mapper.js';
+export * from './apply.js';
+export * from './export.js';
+export * from './url-state.js';
+export * from './brand-contrast-audit.js';

package/js/theme/overlay.js

@@ -0,0 +1,29 @@
+/* ============================================================
+   overlay.js — gera os overlays toned brand-derived
+
+   Espelha foundation.color.overlay.brand-600.* (light) e
+   brand-400.* (dark). Os alphas são os mesmos do DS (ADR-007):
+     light: 600 @ 12/20/28%
+     dark:  400 @ 15/25/32%
+   ============================================================ */
+
+import { hexToRgba } from './color.js';
+
+export const LIGHT_ALPHAS = { default: 0.12, hover: 0.2, active: 0.28 };
+export const DARK_ALPHAS = { default: 0.15, hover: 0.25, active: 0.32 };
+
+/**
+ * Gera os 3 overlays toned de um modo a partir do hex base.
+ *
+ * @param {string} baseHex - brand.600 (light) ou brand.400 (dark).
+ * @param {'light'|'dark'} mode
+ * @returns {{default:string, hover:string, active:string}}
+ */
+export function generateTonedOverlays(baseHex, mode) {
+  const alphas = mode === 'dark' ? DARK_ALPHAS : LIGHT_ALPHAS;
+  return {
+    default: hexToRgba(baseHex, alphas.default),
+    hover: hexToRgba(baseHex, alphas.hover),
+    active: hexToRgba(baseHex, alphas.active),
+  };
+}

package/js/theme/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/js/theme/palette.js

@@ -0,0 +1,103 @@
+/* ============================================================
+   palette.js — gera escala de marca 50..950 a partir de 1 seed
+
+   Estratégia (OKLCH):
+     1. Converte a seed para OKLCH.
+     2. Lightness (L): usa os alvos medidos da rampa default do DS.
+        L é o que define "quão claro/escuro" é um step — deve ser
+        estável independente da marca.
+     3. Hue (h): preserva o *shift* de hue de cada step relativo ao
+        step âncora (500) da rampa default, somado ao hue da seed.
+        Rampas reais "esfriam/esquentam" levemente nos extremos; isso
+        reproduz esse comportamento para qualquer marca.
+     4. Chroma (C): escala o chroma default de cada step pela razão
+        entre o chroma da seed e o chroma default do step âncora,
+        com clamp de gamut.
+
+   DEFAULT_L / DEFAULT_C / DEFAULT_H foram medidos do blue default do DS
+   (foundation.color.brand.*), então seed = #2563EB reproduz a paleta
+   existente quase bit-a-bit.
+   ============================================================ */
+
+import { hexToOklch, oklchToHex, clamp } from './color.js';
+
+export const STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+
+/** Step âncora: onde a marca é mais reconhecível e onde a seed "encaixa". */
+export const SEED_ANCHOR_STEP = 500;
+
+/** Lightness OKLCH alvo por step (medido do blue default do DS). */
+const DEFAULT_L = {
+  50: 0.9705, 100: 0.9319, 200: 0.8823, 300: 0.8091, 400: 0.7137,
+  500: 0.6231, 600: 0.5461, 700: 0.4882, 800: 0.4244, 900: 0.3791, 950: 0.2823,
+};
+
+/** Chroma OKLCH de referência por step (blue default do DS). */
+const DEFAULT_C = {
+  50: 0.0142, 100: 0.0316, 200: 0.0571, 300: 0.0956, 400: 0.1434,
+  500: 0.188, 600: 0.2152, 700: 0.2172, 800: 0.1809, 900: 0.1378, 950: 0.0874,
+};
+
+/** Hue OKLCH por step (blue default do DS). */
+const DEFAULT_H = {
+  50: 254.6, 100: 255.59, 200: 254.13, 300: 251.81, 400: 254.62,
+  500: 259.81, 600: 262.88, 700: 264.38, 800: 265.64, 900: 265.52, 950: 267.94,
+};
+
+/**
+ * Encontra o step cuja lightness default mais se aproxima de L.
+ * Usado para ancorar a seed no ponto certo da rampa, garantindo que
+ * uma seed que já é (ex) o brand-600 reproduza a paleta com scale 1.0.
+ */
+function nearestStepByLightness(L) {
+  let best = STEPS[0];
+  let bestDiff = Infinity;
+  for (const step of STEPS) {
+    const diff = Math.abs(DEFAULT_L[step] - L);
+    if (diff < bestDiff) { bestDiff = diff; best = step; }
+  }
+  return best;
+}
+
+/**
+ * Gera a escala completa a partir de uma seed hex.
+ *
+ * @param {string} seedHex - cor primária, ex "#2563EB".
+ * @param {object} [opts]
+ * @param {number} [opts.chromaBoost=1] - multiplicador global de chroma.
+ * @returns {Record<number,string>} mapa step → hex.
+ */
+export function generateBrandScale(seedHex, { chromaBoost = 1 } = {}) {
+  const seed = hexToOklch(seedHex);
+
+  // Ancora a seed no step de lightness mais próximo, para que o chroma
+  // e o hue relativos sejam medidos contra o step correto da rampa.
+  const anchorStep = nearestStepByLightness(seed.L);
+  const anchorC = DEFAULT_C[anchorStep];
+  const anchorH = DEFAULT_H[anchorStep];
+
+  const chromaScale = (seed.C / anchorC) * chromaBoost;
+  const hueShift = seed.h - anchorH;
+
+  const scale = {};
+  for (const step of STEPS) {
+    const L = DEFAULT_L[step];
+    const C = clamp(DEFAULT_C[step] * chromaScale, 0, 0.37);
+    let h = DEFAULT_H[step] + hueShift;
+    h = ((h % 360) + 360) % 360;
+    scale[step] = oklchToHex({ L, C, h });
+  }
+  return scale;
+}
+
+/**
+ * Escala baseada em hex explícitos por step (power users que já têm
+ * a rampa pronta). Retorna apenas os steps fornecidos, em uppercase.
+ */
+export function scaleFromExplicit(partial) {
+  const out = {};
+  for (const step of STEPS) {
+    if (partial && partial[step]) out[step] = String(partial[step]).toUpperCase();
+  }
+  return out;
+}

package/js/theme/radius.js

@@ -0,0 +1,76 @@
+/* ============================================================
+   radius.js — presets de corner radius
+
+   Presets escalares (sharp → soft) multiplicam a escala Foundation.
+   Preset `soft` (2×): botões em pill; campos e containers internos
+   limitados a 1.5× (round); superfícies xl+ seguem 2×.
+   ============================================================ */
+
+/** Steps Foundation escaláveis (px). */
+export const RADIUS_STEPS = [2, 4, 8, 12, 16, 24];
+
+/** Valor pill do DS (foundation.radius.999). */
+export const RADIUS_PILL_VALUE = '999px';
+
+/** Teto de radius para campos e containers no preset soft (1.5×). */
+export const SOFT_INNER_CAP_PRESET = 'round';
+
+/** Presets escalares (multiplicador sobre a escala default). */
+export const RADIUS_PRESETS = {
+  sharp: 0,
+  tight: 0.5,
+  default: 1,
+  round: 1.5,
+  soft: 2,
+};
+
+/**
+ * Resolve preset escalar (string ou number).
+ */
+export function resolveRadiusFactor(preset) {
+  if (typeof preset === 'number') return Math.max(0, preset);
+  return RADIUS_PRESETS[preset] ?? RADIUS_PRESETS.default;
+}
+
+/**
+ * Escala Foundation (rem) com multiplicador.
+ *
+ * @returns {Record<number,string>} step(px) → valor CSS.
+ */
+export function generateRadiusScale(preset) {
+  const factor = resolveRadiusFactor(preset);
+  const out = {};
+  for (const step of RADIUS_STEPS) {
+    const px = step * factor;
+    out[step] = `${+(px / 16).toFixed(4)}rem`;
+  }
+  return out;
+}
+
+/**
+ * Tema completo de radius: Foundation + semantic + overrides Component.
+ *
+ * @returns {{
+ *   foundation: Record<number,string>,
+ *   semantic: Record<string,string>|null,
+ *   component: Record<string,string>
+ * }}
+ */
+export function generateRadiusTheme(preset) {
+  const foundation = generateRadiusScale(preset);
+  const component = {};
+  let semantic = null;
+
+  if (preset === 'soft') {
+    const inner = generateRadiusScale(SOFT_INNER_CAP_PRESET);
+    component['--ds-button-radius-default'] = RADIUS_PILL_VALUE;
+    semantic = {
+      sm: inner[4],
+      md: inner[8],
+      lg: inner[12],
+      xl: inner[16],
+    };
+  }
+
+  return { foundation, semantic, component };
+}