@satellatickets/tokens 0.0.0-stage → 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Roberto Rodriguez Carbonell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,4 +1,77 @@
-# Temporary Holding Version
+# @satellatickets/tokens
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
-If no other versions are published within 30 days, this package and version will be deleted.
+Design tokens de satella-ui en formato [DTCG 2025.10](https://www.designtokens.org/tr/2025.10/format/), con salidas para web (variables CSS) y React Native (objetos de tema tipados). Es la base de `@satellatickets/ui` y puede usarse solo (emails, documentación, otros proyectos).
+
+## Uso
+
+```ts
+// Web: variables CSS, una vez por app
+import '@satellatickets/tokens/tokens.css';
+// Temas por atributo: <html data-theme="dark" data-brand="acme">
+
+// Web o React Native: temas resueltos y tipos
+import { themes, brands, type Theme, type TokenName } from '@satellatickets/tokens';
+const t: Theme = themes.light;
+t.color.action.primary; // "#6c4cf5"
+t.space[4]; // 16
+```
+
+En las apps, `UIProvider` de `@satellatickets/ui` se encarga de aplicar tema y marca (ADR-010).
+
+## Estructura
+
+```
+src/
+├── primitives/      paleta (`palette.*`, nunca se emite) y escalas: space, radius, font, shadow, duration, zIndex
+├── semantic/        light.tokens.json y dark.tokens.json: `color.*` con significado de uso
+├── brands/          overrides por marca (ver brands/README.md)
+├── contrast-pairs.json   parejas texto/fondo que deben cumplir WCAG AA
+└── pipeline/        build: Style Dictionary v5 + conversores propios
+build.ts             genera dist/ (ver abajo)
+schemas/dtcg/2025.10 JSON Schema oficial, para validar los ficheros en los tests
+```
+
+Tres niveles (ADR-005): los componentes consumen **solo** tokens emitidos (`color.bg.surface`, `space.4`, `radius.md`…), nunca `palette.*` ni valores literales.
+
+La paleta y la capa semántica oscura reproducen el producto real (`staging.satellatickets.com`): acento violeta `#6c4cf5`, grises "ink", feedback mint/ámbar/coral/cian, fuentes Unbounded (titulares), Hanken Grotesk (texto) e IBM Plex Mono (etiquetas). El producto no tiene tema claro: el tema `light` es una propuesta con los mismos matices, verificada con las mismas parejas de contraste. Cada token de `palette.*` indica en su `$description` de qué variable de Satella procede o cómo se ha derivado. Las marcas `admin` y `organizer` viven en `src/brands/` (ver su README).
+
+Además de color, tipografía, espaciado, radios y sombras, hay dos escalas pensadas para los controles: `size.control.{sm,md,lg}` (altura de botones y campos: 36, 44 y 52 px) y `borderWidth.{thin,thick}` (1 y 2 px; `thick` es el anillo de foco). Los componentes las usan en lugar de valores literales (ADR-005).
+
+## Salidas (`pnpm build`)
+
+| Fichero                 | Contenido                                                                                                                                |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `dist/web/tokens.css`   | `:root, [data-theme="light"]` con todos los tokens; `[data-theme="dark"]` solo con lo que cambia; un bloque `[data-brand="…"]` por marca |
+| `dist/native/themes.ts` | `themes.light`, `themes.dark`, `brands` (overrides por marca y tema), `themeNames`, `brandNames`, `tokenNames`, `cssVariables`           |
+| `dist/types.ts`         | `Theme`, `ThemeOverrides`, `ThemeName`, `BrandName`, `TokenName`, `CssVariableName`, `BoxShadow`, `FontWeight`                           |
+| `dist/index.js`         | Compilación de `src/index.ts`, que reexporta los dos anteriores                                                                          |
+
+`pnpm dev` deja `build.ts` en modo watch sobre `src/`.
+
+## Reglas de conversión
+
+| Tipo DTCG    | CSS                                                                                    | React Native                                                                                                                    |
+| ------------ | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `color`      | `#rrggbb`, o `#rrggbbaa` si tiene alpha                                                | igual                                                                                                                           |
+| `dimension`  | px → rem (÷16); `$extensions["com.satellatickets.tokens"].css.unit = "px"` mantiene px | número en puntos (rem × 16)                                                                                                     |
+| `fontFamily` | pila completa, con comillas donde hace falta                                           | primera familia; `undefined` (fuente del sistema) si la pila empieza por una genérica; la extensión `native.fontFamily` la fija |
+| `fontWeight` | número                                                                                 | cadena (`"600"`)                                                                                                                |
+| `duration`   | con su unidad (`200ms`)                                                                | milisegundos                                                                                                                    |
+| `number`     | tal cual                                                                               | tal cual                                                                                                                        |
+| `shadow`     | `box-shadow`, en px                                                                    | array `boxShadow` de la Nueva Arquitectura                                                                                      |
+
+Solo se soporta el espacio de color `srgb`; cada color lleva `hex` de respaldo y el test comprueba que coincide con los componentes.
+
+## Añadir o cambiar tokens
+
+1. Edita el `*.tokens.json` correspondiente. Un token semántico de color nuevo se añade a **los dos** temas; si falta en uno, el build falla.
+2. Si es un color de texto o de interfaz, añade su pareja a `contrast-pairs.json`.
+3. `pnpm test` (esquema DTCG, completitud, contraste, salidas) y `pnpm build`.
+4. Changeset: renombrar o eliminar un token semántico es breaking (ADR-025); un token nuevo es `minor`.
+
+## Tests
+
+- **DTCG**: cada fichero valida contra el JSON Schema oficial de la 2025.10.
+- **Completitud**: todos los temas definen los mismos tokens; cada marca cubre todos los tokens de cada tema sin inventar ninguno.
+- **Contraste**: cada pareja de `contrast-pairs.json` cumple AA (4.5:1 texto, 3:1 interfaz) en todos los temas y marcas.
+- **Salidas**: la forma de los tres ficheros generados, con una marca de ejemplo que vive solo en los fixtures de test.

package/dist/index.d.ts

@@ -0,0 +1,373 @@
+//#region dist/types.d.ts
+type ThemeName = "light" | "dark";
+type BrandName = "admin" | "organizer";
+/** Nombre de cada token emitido, con la ruta separada por puntos. */
+type TokenName = "color.bg.canvas" | "color.bg.surface" | "color.bg.elevated" | "color.bg.subtle" | "color.bg.muted" | "color.bg.overlay" | "color.bg.inverse" | "color.text.primary" | "color.text.secondary" | "color.text.muted" | "color.text.disabled" | "color.text.inverse" | "color.text.onPrimary" | "color.text.onDanger" | "color.text.link" | "color.border.default" | "color.border.strong" | "color.border.focus" | "color.action.primary" | "color.action.primaryHover" | "color.action.primaryActive" | "color.action.secondary" | "color.action.secondaryHover" | "color.action.secondaryActive" | "color.action.danger" | "color.action.dangerHover" | "color.action.dangerActive" | "color.action.disabled" | "color.accent.bg" | "color.accent.text" | "color.feedback.success.bg" | "color.feedback.success.border" | "color.feedback.success.text" | "color.feedback.success.icon" | "color.feedback.warning.bg" | "color.feedback.warning.border" | "color.feedback.warning.text" | "color.feedback.warning.icon" | "color.feedback.danger.bg" | "color.feedback.danger.border" | "color.feedback.danger.text" | "color.feedback.danger.icon" | "color.feedback.info.bg" | "color.feedback.info.border" | "color.feedback.info.text" | "color.feedback.info.icon" | "space.0" | "space.1" | "space.2" | "space.3" | "space.4" | "space.5" | "space.6" | "space.8" | "space.10" | "space.12" | "space.16" | "space.20" | "space.24" | "size.control.sm" | "size.control.md" | "size.control.lg" | "radius.none" | "radius.xs" | "radius.sm" | "radius.md" | "radius.lg" | "radius.xl" | "radius.full" | "borderWidth.thin" | "borderWidth.thick" | "font.family.display" | "font.family.sans" | "font.family.mono" | "font.size.xs" | "font.size.sm" | "font.size.md" | "font.size.lg" | "font.size.xl" | "font.size.xxl" | "font.size.xxxl" | "font.size.display" | "font.size.hero" | "font.lineHeight.xs" | "font.lineHeight.sm" | "font.lineHeight.md" | "font.lineHeight.lg" | "font.lineHeight.xl" | "font.lineHeight.xxl" | "font.lineHeight.xxxl" | "font.lineHeight.display" | "font.lineHeight.hero" | "font.weight.regular" | "font.weight.medium" | "font.weight.semibold" | "font.weight.bold" | "font.weight.extrabold" | "shadow.sm" | "shadow.md" | "shadow.lg" | "shadow.glow" | "duration.instant" | "duration.fast" | "duration.normal" | "duration.slow" | "zIndex.base" | "zIndex.raised" | "zIndex.dropdown" | "zIndex.sticky" | "zIndex.overlay" | "zIndex.modal" | "zIndex.popover" | "zIndex.toast";
+/** Variable CSS de cada token en `tokens.css`. */
+type CssVariableName = "--color-bg-canvas" | "--color-bg-surface" | "--color-bg-elevated" | "--color-bg-subtle" | "--color-bg-muted" | "--color-bg-overlay" | "--color-bg-inverse" | "--color-text-primary" | "--color-text-secondary" | "--color-text-muted" | "--color-text-disabled" | "--color-text-inverse" | "--color-text-on-primary" | "--color-text-on-danger" | "--color-text-link" | "--color-border-default" | "--color-border-strong" | "--color-border-focus" | "--color-action-primary" | "--color-action-primary-hover" | "--color-action-primary-active" | "--color-action-secondary" | "--color-action-secondary-hover" | "--color-action-secondary-active" | "--color-action-danger" | "--color-action-danger-hover" | "--color-action-danger-active" | "--color-action-disabled" | "--color-accent-bg" | "--color-accent-text" | "--color-feedback-success-bg" | "--color-feedback-success-border" | "--color-feedback-success-text" | "--color-feedback-success-icon" | "--color-feedback-warning-bg" | "--color-feedback-warning-border" | "--color-feedback-warning-text" | "--color-feedback-warning-icon" | "--color-feedback-danger-bg" | "--color-feedback-danger-border" | "--color-feedback-danger-text" | "--color-feedback-danger-icon" | "--color-feedback-info-bg" | "--color-feedback-info-border" | "--color-feedback-info-text" | "--color-feedback-info-icon" | "--space-0" | "--space-1" | "--space-2" | "--space-3" | "--space-4" | "--space-5" | "--space-6" | "--space-8" | "--space-10" | "--space-12" | "--space-16" | "--space-20" | "--space-24" | "--size-control-sm" | "--size-control-md" | "--size-control-lg" | "--radius-none" | "--radius-xs" | "--radius-sm" | "--radius-md" | "--radius-lg" | "--radius-xl" | "--radius-full" | "--border-width-thin" | "--border-width-thick" | "--font-family-display" | "--font-family-sans" | "--font-family-mono" | "--font-size-xs" | "--font-size-sm" | "--font-size-md" | "--font-size-lg" | "--font-size-xl" | "--font-size-xxl" | "--font-size-xxxl" | "--font-size-display" | "--font-size-hero" | "--font-line-height-xs" | "--font-line-height-sm" | "--font-line-height-md" | "--font-line-height-lg" | "--font-line-height-xl" | "--font-line-height-xxl" | "--font-line-height-xxxl" | "--font-line-height-display" | "--font-line-height-hero" | "--font-weight-regular" | "--font-weight-medium" | "--font-weight-semibold" | "--font-weight-bold" | "--font-weight-extrabold" | "--shadow-sm" | "--shadow-md" | "--shadow-lg" | "--shadow-glow" | "--duration-instant" | "--duration-fast" | "--duration-normal" | "--duration-slow" | "--z-index-base" | "--z-index-raised" | "--z-index-dropdown" | "--z-index-sticky" | "--z-index-overlay" | "--z-index-modal" | "--z-index-popover" | "--z-index-toast";
+type FontWeight = '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+/** Sombra en la forma del `boxShadow` de React Native (Nueva Arquitectura). */
+interface BoxShadow {
+  offsetX: number;
+  offsetY: number;
+  blurRadius: number;
+  spreadDistance: number;
+  color: string;
+  inset?: boolean;
+}
+/** Tema resuelto: valores nativos de todos los tokens emitidos. */
+interface Theme {
+  color: {
+    bg: {
+      /** Fondo de página. */
+      canvas: string;
+      /** Tarjetas, paneles y campos de formulario. */
+      surface: string;
+      /** Modales, menús y popovers. */
+      elevated: string;
+      /** Fondos de hover y filas alternas. */
+      subtle: string;
+      /** Fondos pulsados, seleccionados o de controles deshabilitados. */
+      muted: string;
+      /** Velo bajo modales y hojas. */
+      overlay: string;
+      /** Fondos invertidos: tooltips y toasts. */
+      inverse: string;
+    };
+    text: {
+      /** Texto principal. */
+      primary: string;
+      /** Texto de apoyo. */
+      secondary: string;
+      /** Placeholders y notas; cumple AA sobre cualquier fondo. */
+      muted: string;
+      /** Texto de controles deshabilitados (sin exigencia de contraste). */
+      disabled: string;
+      /** Texto sobre `bg.inverse`. */
+      inverse: string;
+      /** Texto sobre `action.primary` en todos sus estados. */
+      onPrimary: string;
+      /** Texto sobre `action.danger` en todos sus estados. */
+      onDanger: string;
+      /** Enlaces. */
+      link: string;
+    };
+    border: {
+      /** Separadores y bordes decorativos. */
+      default: string;
+      /** Bordes de controles; contraste 3:1 con el fondo. */
+      strong: string;
+      /** Anillo de foco visible. */
+      focus: string;
+    };
+    action: {
+      /** Acción principal. */
+      primary: string;
+      /** Acción principal, hover. */
+      primaryHover: string;
+      /** Acción principal, pulsada. */
+      primaryActive: string;
+      /** Acción secundaria; el texto es `text.primary`. */
+      secondary: string;
+      /** Acción secundaria, hover. */
+      secondaryHover: string;
+      /** Acción secundaria, pulsada. */
+      secondaryActive: string;
+      /** Acción destructiva. */
+      danger: string;
+      /** Acción destructiva, hover. */
+      dangerHover: string;
+      /** Acción destructiva, pulsada. */
+      dangerActive: string;
+      /** Fondo de acciones deshabilitadas; el texto es `text.disabled`. */
+      disabled: string;
+    };
+    accent: {
+      /** Fondo teñido con el color de marca: chips seleccionados, destacados. */
+      bg: string;
+      /** Texto e iconos sobre `accent.bg`. */
+      text: string;
+    };
+    feedback: {
+      success: {
+        /** Fondo de mensajes de éxito. */
+        bg: string;
+        /** Borde de mensajes de éxito (mint.400 al 40 %). */
+        border: string;
+        /** Texto sobre `feedback.success.bg`. */
+        text: string;
+        /** Icono de éxito; 3:1 sobre `bg.surface` y `feedback.success.bg`. */
+        icon: string;
+      };
+      warning: {
+        /** Fondo de avisos. */
+        bg: string;
+        /** Borde de avisos (amber.400 al 40 %). */
+        border: string;
+        /** Texto sobre `feedback.warning.bg`. */
+        text: string;
+        /** Icono de aviso. */
+        icon: string;
+      };
+      danger: {
+        /** Fondo de errores. */
+        bg: string;
+        /** Borde de errores (coral.400 al 40 %). */
+        border: string;
+        /** Texto sobre `feedback.danger.bg`. */
+        text: string;
+        /** Icono de error. */
+        icon: string;
+      };
+      info: {
+        /** Fondo informativo. */
+        bg: string;
+        /** Borde informativo (sky.400 al 40 %). */
+        border: string;
+        /** Texto sobre `feedback.info.bg`. */
+        text: string;
+        /** Icono informativo. */
+        icon: string;
+      };
+    };
+  };
+  space: {
+    0: number;
+    1: number;
+    2: number;
+    3: number;
+    4: number;
+    5: number;
+    6: number;
+    8: number;
+    10: number;
+    12: number;
+    16: number;
+    20: number;
+    24: number;
+  };
+  size: {
+    control: {
+      /** Control compacto: barras de herramientas y tablas. */
+      sm: number;
+      /** Control por defecto y área táctil mínima en móvil. */
+      md: number;
+      /** Control destacado: llamadas a la acción principales. */
+      lg: number;
+    };
+  };
+  radius: {
+    none: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+  };
+  borderWidth: {
+    /** Bordes de controles, tarjetas y separadores. */
+    thin: number;
+    /** Anillo de foco y bordes enfatizados. */
+    thick: number;
+  };
+  font: {
+    family: {
+      /** Titulares y cifras destacadas. */
+      display: string | undefined;
+      /** Texto de interfaz. */
+      sans: string | undefined;
+      /** Etiquetas en mayúsculas, fechas, precios y código. */
+      mono: string | undefined;
+    };
+    size: {
+      xs: number;
+      sm: number;
+      md: number;
+      lg: number;
+      xl: number;
+      xxl: number;
+      xxxl: number;
+      /** Titular de página (h1). */
+      display: number;
+      /** Titular de portada y tarjetas destacadas. */
+      hero: number;
+    };
+    lineHeight: {
+      xs: number;
+      sm: number;
+      md: number;
+      lg: number;
+      xl: number;
+      xxl: number;
+      xxxl: number;
+      display: number;
+      hero: number;
+    };
+    weight: {
+      regular: FontWeight;
+      medium: FontWeight;
+      semibold: FontWeight;
+      bold: FontWeight;
+      extrabold: FontWeight;
+    };
+  };
+  shadow: {
+    /** Tarjetas (--shadow-card). */
+    sm: BoxShadow[];
+    /** Popovers y menús (--shadow-popover). */
+    md: BoxShadow[];
+    /** Modales y hojas (--shadow-modal). */
+    lg: BoxShadow[];
+    /** Resplandor con el color de marca para elementos destacados (--shadow-glow). Cada marca lo sobrescribe con su acento. */
+    glow: BoxShadow[];
+  };
+  duration: {
+    instant: number;
+    fast: number;
+    normal: number;
+    slow: number;
+  };
+  zIndex: {
+    base: number;
+    raised: number;
+    dropdown: number;
+    sticky: number;
+    overlay: number;
+    modal: number;
+    popover: number;
+    toast: number;
+  };
+}
+type DeepPartial<T> = { [K in keyof T]?: T[K] extends readonly unknown[] ? T[K] : T[K] extends object ? DeepPartial<T[K]> : T[K]; };
+/** Subconjunto de tokens que una marca sobrescribe sobre un tema. */
+type ThemeOverrides = DeepPartial<Theme>;
+//#endregion
+//#region dist/native/themes.d.ts
+export declare const themeNames: readonly ["light", "dark"];
+export declare const brandNames: readonly ["admin", "organizer"];
+/** Nombres de todos los tokens emitidos, en el orden de las salidas. */
+export declare const tokenNames: readonly ["color.bg.canvas", "color.bg.surface", "color.bg.elevated", "color.bg.subtle", "color.bg.muted", "color.bg.overlay", "color.bg.inverse", "color.text.primary", "color.text.secondary", "color.text.muted", "color.text.disabled", "color.text.inverse", "color.text.onPrimary", "color.text.onDanger", "color.text.link", "color.border.default", "color.border.strong", "color.border.focus", "color.action.primary", "color.action.primaryHover", "color.action.primaryActive", "color.action.secondary", "color.action.secondaryHover", "color.action.secondaryActive", "color.action.danger", "color.action.dangerHover", "color.action.dangerActive", "color.action.disabled", "color.accent.bg", "color.accent.text", "color.feedback.success.bg", "color.feedback.success.border", "color.feedback.success.text", "color.feedback.success.icon", "color.feedback.warning.bg", "color.feedback.warning.border", "color.feedback.warning.text", "color.feedback.warning.icon", "color.feedback.danger.bg", "color.feedback.danger.border", "color.feedback.danger.text", "color.feedback.danger.icon", "color.feedback.info.bg", "color.feedback.info.border", "color.feedback.info.text", "color.feedback.info.icon", "space.0", "space.1", "space.2", "space.3", "space.4", "space.5", "space.6", "space.8", "space.10", "space.12", "space.16", "space.20", "space.24", "size.control.sm", "size.control.md", "size.control.lg", "radius.none", "radius.xs", "radius.sm", "radius.md", "radius.lg", "radius.xl", "radius.full", "borderWidth.thin", "borderWidth.thick", "font.family.display", "font.family.sans", "font.family.mono", "font.size.xs", "font.size.sm", "font.size.md", "font.size.lg", "font.size.xl", "font.size.xxl", "font.size.xxxl", "font.size.display", "font.size.hero", "font.lineHeight.xs", "font.lineHeight.sm", "font.lineHeight.md", "font.lineHeight.lg", "font.lineHeight.xl", "font.lineHeight.xxl", "font.lineHeight.xxxl", "font.lineHeight.display", "font.lineHeight.hero", "font.weight.regular", "font.weight.medium", "font.weight.semibold", "font.weight.bold", "font.weight.extrabold", "shadow.sm", "shadow.md", "shadow.lg", "shadow.glow", "duration.instant", "duration.fast", "duration.normal", "duration.slow", "zIndex.base", "zIndex.raised", "zIndex.dropdown", "zIndex.sticky", "zIndex.overlay", "zIndex.modal", "zIndex.popover", "zIndex.toast"];
+/** Variable CSS que corresponde a cada token en `tokens.css`. */
+export declare const cssVariables: {
+  readonly "color.bg.canvas": "--color-bg-canvas";
+  readonly "color.bg.surface": "--color-bg-surface";
+  readonly "color.bg.elevated": "--color-bg-elevated";
+  readonly "color.bg.subtle": "--color-bg-subtle";
+  readonly "color.bg.muted": "--color-bg-muted";
+  readonly "color.bg.overlay": "--color-bg-overlay";
+  readonly "color.bg.inverse": "--color-bg-inverse";
+  readonly "color.text.primary": "--color-text-primary";
+  readonly "color.text.secondary": "--color-text-secondary";
+  readonly "color.text.muted": "--color-text-muted";
+  readonly "color.text.disabled": "--color-text-disabled";
+  readonly "color.text.inverse": "--color-text-inverse";
+  readonly "color.text.onPrimary": "--color-text-on-primary";
+  readonly "color.text.onDanger": "--color-text-on-danger";
+  readonly "color.text.link": "--color-text-link";
+  readonly "color.border.default": "--color-border-default";
+  readonly "color.border.strong": "--color-border-strong";
+  readonly "color.border.focus": "--color-border-focus";
+  readonly "color.action.primary": "--color-action-primary";
+  readonly "color.action.primaryHover": "--color-action-primary-hover";
+  readonly "color.action.primaryActive": "--color-action-primary-active";
+  readonly "color.action.secondary": "--color-action-secondary";
+  readonly "color.action.secondaryHover": "--color-action-secondary-hover";
+  readonly "color.action.secondaryActive": "--color-action-secondary-active";
+  readonly "color.action.danger": "--color-action-danger";
+  readonly "color.action.dangerHover": "--color-action-danger-hover";
+  readonly "color.action.dangerActive": "--color-action-danger-active";
+  readonly "color.action.disabled": "--color-action-disabled";
+  readonly "color.accent.bg": "--color-accent-bg";
+  readonly "color.accent.text": "--color-accent-text";
+  readonly "color.feedback.success.bg": "--color-feedback-success-bg";
+  readonly "color.feedback.success.border": "--color-feedback-success-border";
+  readonly "color.feedback.success.text": "--color-feedback-success-text";
+  readonly "color.feedback.success.icon": "--color-feedback-success-icon";
+  readonly "color.feedback.warning.bg": "--color-feedback-warning-bg";
+  readonly "color.feedback.warning.border": "--color-feedback-warning-border";
+  readonly "color.feedback.warning.text": "--color-feedback-warning-text";
+  readonly "color.feedback.warning.icon": "--color-feedback-warning-icon";
+  readonly "color.feedback.danger.bg": "--color-feedback-danger-bg";
+  readonly "color.feedback.danger.border": "--color-feedback-danger-border";
+  readonly "color.feedback.danger.text": "--color-feedback-danger-text";
+  readonly "color.feedback.danger.icon": "--color-feedback-danger-icon";
+  readonly "color.feedback.info.bg": "--color-feedback-info-bg";
+  readonly "color.feedback.info.border": "--color-feedback-info-border";
+  readonly "color.feedback.info.text": "--color-feedback-info-text";
+  readonly "color.feedback.info.icon": "--color-feedback-info-icon";
+  readonly "space.0": "--space-0";
+  readonly "space.1": "--space-1";
+  readonly "space.2": "--space-2";
+  readonly "space.3": "--space-3";
+  readonly "space.4": "--space-4";
+  readonly "space.5": "--space-5";
+  readonly "space.6": "--space-6";
+  readonly "space.8": "--space-8";
+  readonly "space.10": "--space-10";
+  readonly "space.12": "--space-12";
+  readonly "space.16": "--space-16";
+  readonly "space.20": "--space-20";
+  readonly "space.24": "--space-24";
+  readonly "size.control.sm": "--size-control-sm";
+  readonly "size.control.md": "--size-control-md";
+  readonly "size.control.lg": "--size-control-lg";
+  readonly "radius.none": "--radius-none";
+  readonly "radius.xs": "--radius-xs";
+  readonly "radius.sm": "--radius-sm";
+  readonly "radius.md": "--radius-md";
+  readonly "radius.lg": "--radius-lg";
+  readonly "radius.xl": "--radius-xl";
+  readonly "radius.full": "--radius-full";
+  readonly "borderWidth.thin": "--border-width-thin";
+  readonly "borderWidth.thick": "--border-width-thick";
+  readonly "font.family.display": "--font-family-display";
+  readonly "font.family.sans": "--font-family-sans";
+  readonly "font.family.mono": "--font-family-mono";
+  readonly "font.size.xs": "--font-size-xs";
+  readonly "font.size.sm": "--font-size-sm";
+  readonly "font.size.md": "--font-size-md";
+  readonly "font.size.lg": "--font-size-lg";
+  readonly "font.size.xl": "--font-size-xl";
+  readonly "font.size.xxl": "--font-size-xxl";
+  readonly "font.size.xxxl": "--font-size-xxxl";
+  readonly "font.size.display": "--font-size-display";
+  readonly "font.size.hero": "--font-size-hero";
+  readonly "font.lineHeight.xs": "--font-line-height-xs";
+  readonly "font.lineHeight.sm": "--font-line-height-sm";
+  readonly "font.lineHeight.md": "--font-line-height-md";
+  readonly "font.lineHeight.lg": "--font-line-height-lg";
+  readonly "font.lineHeight.xl": "--font-line-height-xl";
+  readonly "font.lineHeight.xxl": "--font-line-height-xxl";
+  readonly "font.lineHeight.xxxl": "--font-line-height-xxxl";
+  readonly "font.lineHeight.display": "--font-line-height-display";
+  readonly "font.lineHeight.hero": "--font-line-height-hero";
+  readonly "font.weight.regular": "--font-weight-regular";
+  readonly "font.weight.medium": "--font-weight-medium";
+  readonly "font.weight.semibold": "--font-weight-semibold";
+  readonly "font.weight.bold": "--font-weight-bold";
+  readonly "font.weight.extrabold": "--font-weight-extrabold";
+  readonly "shadow.sm": "--shadow-sm";
+  readonly "shadow.md": "--shadow-md";
+  readonly "shadow.lg": "--shadow-lg";
+  readonly "shadow.glow": "--shadow-glow";
+  readonly "duration.instant": "--duration-instant";
+  readonly "duration.fast": "--duration-fast";
+  readonly "duration.normal": "--duration-normal";
+  readonly "duration.slow": "--duration-slow";
+  readonly "zIndex.base": "--z-index-base";
+  readonly "zIndex.raised": "--z-index-raised";
+  readonly "zIndex.dropdown": "--z-index-dropdown";
+  readonly "zIndex.sticky": "--z-index-sticky";
+  readonly "zIndex.overlay": "--z-index-overlay";
+  readonly "zIndex.modal": "--z-index-modal";
+  readonly "zIndex.popover": "--z-index-popover";
+  readonly "zIndex.toast": "--z-index-toast";
+};
+export declare const light: Theme;
+export declare const dark: Theme;
+export declare const themes: Readonly<Record<ThemeName, Theme>>;
+/** Overrides de cada marca sobre cada tema; `UIProvider` los combina con el tema activo (ADR-010). */
+export declare const brands: Readonly<Record<BrandName, Readonly<Record<ThemeName, ThemeOverrides>>>>;
+//#endregion
+export type { BoxShadow, BrandName, CssVariableName, FontWeight, Theme, ThemeName, ThemeOverrides, TokenName };