orbital-ds 0.7.0 → 0.9.0

package/dist/themes/tactile.fonts.css

@@ -1,2 +1,3 @@
-/* Fuentes del tema tactile: Fraunces (titulares) + Figtree (cuerpo). Importar la PRIMERA del CSS de la app. */
-@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600..800&family=Figtree:wght@400;500;600;700&display=swap');
+/* Fuentes del tema tactile: Fraunces (titulares, con los ejes SOFT y WONK que usa
+ * --ds-display-variation) + Figtree (cuerpo). Importar la PRIMERA del CSS de la app. */
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,600..800,0..100,0..1&family=Figtree:wght@400..700&display=swap');

package/dist/themes/tactile.guide.md

@@ -1,49 +1,82 @@
-# Tema `tactile` — guía de diseño
-
-## Esencia
-Una interfaz que se **toca**: papel cálido, tinta oscura y un rotulador. Pensada para SaaS que quieren sentirse cercanos y con humor, sin el aspecto genérico de «app de IA» (degradado índigo, Inter, tarjetas idénticas, brillos).
-
-## Gesto firma
-1. **Tecla**: todo lo que se pulsa lleva contorno de tinta de 2px y una arista inferior de 5px que **baja al pulsar** (la pieza se hunde).
-2. **Rotulador**: una banda mostaza translúcida bajo los títulos (`card-title`, `dialog-title`, `sheet-title`, título de página).
-
-## Principios
-- Lo accionable se distingue de lo informativo por **materia**, no solo por color: lo pulsable tiene arista; lo demás, filete suave.
-- Sin sombras difusas: la profundidad la dan las aristas.
-- Un acento vivo (mostaza) y uno pequeño (pino). Nunca negro puro: tinta berenjena.
-- Formas con jerarquía: 8 · 12 · 14 · 16 (no un único radio para todo).
-- Carácter barato y reutilizable: baldosa de icono (`IconTile`) con tono, en vez de ilustraciones.
-
-## Referencias y qué se tomó de cada una
-Dirección **original**; no copia ninguna. Se tomó un principio de cada una:
-- **Duolingo** (según fuentes de terceros): la arista inferior que baja al pulsar.
-- **Endorsal** (analizada en navegador): títulos con rotulador de color al 25%, iconos duotono, filas con arista inferior.
-- **SerpWatch** (analizada en navegador): lienzo no blanco y sombras teñidas; aquí se sustituyen por papel y aristas.
-- **Reglas anti-IA** (síntesis propia): evitar degradado morado-índigo, Inter por defecto, un único radio, brillos decorativos, bordes de color en un solo lado.
-
-## Paleta
-Dos pieles. Valores de diseño, no medidos contra una referencia externa.
-- **Papel (claro)**: fondo `#F6F0E3`, tarjeta `#FFFCF4`, tinta `#2A2233`, primario mostaza `#F2B33D` con texto de tinta, pino `#17624F`, tomate `#B53A22`, cielo `#2F6FB0`.
-- **Noche**: fondo `#1D1824` con las mismas familias aclaradas.
-- Variante **índigo** (en estudio, no incluida en el paquete): tinta `#232450`, papel `#F4F5FB`, primario `#4B5BBF`, marcador naranja `#FBB232`.
-
-## Tipografía
-- Titulares: **Fraunces** (serifa suave con carácter; evita la sans de moda).
-- Cuerpo: **Figtree** (legible, ligeramente humanista).
-- Fuentes en `tactile.fonts.css`: debe ser lo **primero** del CSS de la app.
-
-## Formas y profundidad
-Radios 8 · 12 · 14 · 16. Arista inferior 5px (4px en controles pequeños) que baja a 2px al pulsar. Filetes de 2px.
-
-## Qué evita
-Sombras difusas, brillos, degradados decorativos, iconos grises sin carácter, mismo radio en todo, bordes de color en un solo lado.
-
-## Qué hace
-Teclas con arista, rotulador bajo títulos, baldosas de icono con tono, sidebar a ras con la fila activa como tecla pulsada.
-
-## Accesibilidad
-Texto de tinta sobre mostaza: contraste ≈ 10:1. El foco usa un anillo propio de 3px. Las aristas no sustituyen al texto del estado.
-
-## Estado de los valores
-- **Diseño propio**: todos los de este tema; ninguno proviene de una referencia medida.
-- **Pendiente**: validar la piel noche con captura en pantalla real y la variante índigo.
+# Tema `tactile` — guía de diseño
+
+## Esencia
+Una interfaz que se **toca**: papel cálido, tinta oscura y un rotulador. Pensada para SaaS que quieren sentirse cercanos y con humor, sin el aspecto genérico de «app de IA» (degradado índigo, Inter, tarjetas idénticas, brillos).
+
+## Gesto firma
+1. **Tecla**: todo lo que se pulsa lleva contorno de tinta y una arista inferior que **baja al pulsar** (la pieza se hunde).
+2. **Rotulador**: una franja translúcida del color principal bajo los títulos de componente (card, dialog, sheet, alert-dialog, drawer, empty) y el título de página.
+
+## Principios
+- Lo accionable se distingue de lo informativo por **materia**, no solo por color: lo pulsable tiene arista; lo demás, filete suave.
+- Sin sombras difusas: la profundidad la dan las aristas.
+- Un acento vivo (mostaza) y uno pequeño (pino, para foco y enlace). Nunca negro puro: tinta berenjena.
+- Formas con jerarquía: 8 · 12 · 14 · 16 (no un único radio para todo).
+- **Familias completas**: si una pieza lleva el gesto, sus hermanas también (casilla y radio; todos los campos; todas las capas; todos los menús; pestañas, toggle y grupo de toggles; progreso y deslizador; todos los títulos). Lo exige `pnpm check:ds`.
+- **Todo es variable**: la personalidad no escribe ni una medida, color, peso ni opacidad. Lo exige `pnpm check:ds` (el tema es `conformance: strict`).
+- Carácter barato y reutilizable: baldosa de icono (`IconTile`) con tono, en vez de ilustraciones.
+
+## Tipografía
+| Papel | Fuente | Ajuste |
+|---|---|---|
+| Titulares (h1–h4 y títulos de componente) | **Fraunces**, serifa variable | Ejes `SOFT 50` (suave) y `WONK 1` (letras con humor, solo a tamaño de titular): `--ds-display-variation`. Peso 700 en h1–h3 (`--ds-heading-weight`), 650 en títulos de componente (`--ds-title-weight`), interlineado 1.25, tracking -0.01em |
+| Cuerpo y controles | **Figtree**, sans geométrica y humanista | Cuerpo de **15px** (`--ds-text-sm`), etiquetas de 13px (`--ds-text-xs`); teclas en 700 (`--ds-key-weight`), lateral en 600 (`--ds-nav-weight`) |
+| Código | Monoespaciada del sistema | — |
+
+Reglas:
+- Fraunces **solo a 16px o más**: por debajo de 14px se vuelve delicada. El texto pequeño, siempre Figtree.
+- La escala sube el cuerpo a 15px porque las teclas miden 44px: con 14px el texto quedaba pequeño para el control.
+- Fuentes en `tactile.fonts.css` (Fraunces con los ejes `opsz, wght, SOFT, WONK`): debe ser lo **primero** del CSS de la app.
+
+## Variables del gesto (ajustables desde `brand.css`)
+| Variable | Valor | Qué hace |
+|---|---|---|
+| `--ds-key-outline` | tinta (`--foreground`) | contorno de las teclas |
+| `--ds-key-edge` | tinta al 26 % | arista de superficies (tarjetas, tooltip) |
+| `--ds-key-border` | 2px | grosor del contorno |
+| `--ds-key-edge-w` / `-sm` / `-pressed` | 5 / 4 / 2px | arista en reposo, en controles pequeños o densos, y al pulsar |
+| `--ds-key-press` / `-sm` | 3 / 2px | cuánto se hunde al pulsar |
+| `--ds-key-radius` / `-sm` | 14 / 12px | radio de la tecla y de la tecla pequeña |
+| `--ds-rule-w` | 2px | filetes (tarjeta, tabla, acordeón, lateral) |
+| `--ds-overlay-edge-w` | 6px | arista de diálogos y paneles |
+| `--ds-marker` | principal al 62 % (45 % de noche) | rotulador; `transparent` lo apaga |
+| `--ds-marker-thickness` / `--ds-marker-offset` | 0.45em / -0.32em | grosor de la franja y cuánto sube sobre la línea base |
+
+Para un tactile «plano» basta con `--ds-key-edge-w: var(--ds-key-border)` y `--ds-key-press: 0px`.
+
+## Marca y color
+- `--sidebar-primary`, `--brand`, `--chart-1` y el rotulador **derivan de `--primary`**: si una app cambia el principal, le siguen.
+- El **foco (`--ring`) y el enlace son pino** a propósito: un anillo mostaza sobre papel no llega a 3:1. Si cambias `--primary`, revisa `--primary-foreground`, `--ring` y `--link`, o deja que `pnpm exec orbital-ds-init` los derive y compruebe.
+- La marca de una app vive en su `brand.css`; nunca se edita el tema.
+
+## Paleta
+Dos pieles. Valores de diseño, no medidos contra una referencia externa.
+- **Papel (claro)**: fondo `#F6F0E3`, tarjeta `#FFFCF4`, papel hondo `#EDE3CD`, tinta `#2A2233`, primario mostaza `#F2B33D` con texto de tinta, pino `#17624F`, tomate `#B53A22`, cielo `#2F6FB0`, ciruela `#8B5A9E`.
+- **Noche**: fondo `#1D1824`, tarjeta `#2C2636`, tinta clara `#F4EBDA`, mostaza `#F2B33D`, pino `#5CC9A8`, tomate `#FF8266`, cielo `#7DB3F0`.
+- Variante **índigo** (en estudio, no incluida en el paquete): tinta `#232450`, papel `#F4F5FB`, primario `#4B5BBF`, marcador naranja `#FBB232`.
+
+## Formas y profundidad
+Radios 8 · 12 · 14 · 16. Arista inferior de 5px (4px en controles pequeños y dentro de calendario, paginación, grupos de botones y campos con botón) que baja a 2px al pulsar. Filetes de 2px. Capas flotantes con contorno de tinta y arista de 4px; diálogos, de 6px.
+
+## Referencias y qué se tomó de cada una
+Dirección **original**; no copia ninguna. Se tomó un principio de cada una:
+- **Duolingo** (según fuentes de terceros): la arista inferior que baja al pulsar.
+- **Endorsal** (analizada en navegador): títulos con rotulador de color al 25%, iconos duotono, filas con arista inferior.
+- **SerpWatch** (analizada en navegador): lienzo no blanco y sombras teñidas; aquí se sustituyen por papel y aristas.
+- **Reglas anti-IA** (síntesis propia): evitar degradado morado-índigo, Inter por defecto, un único radio, brillos decorativos, bordes de color en un solo lado.
+
+## Qué evita
+Sombras difusas, brillos, degradados decorativos, iconos grises sin carácter, mismo radio en todo, piezas hermanas con aspecto distinto, valores escritos a mano.
+
+## Qué hace
+Teclas con arista, rotulador bajo títulos, baldosas de icono con tono, sidebar a ras con la fila activa como tecla pulsada.
+
+## Accesibilidad
+- Texto de tinta sobre mostaza: contraste ≈ 10:1. Todos los pares principales y los textos de estado pasan AA (lo comprueba `pnpm check:ds`, también en los colores derivados).
+- El foco usa el anillo de la estructura (`--ds-ring-width`, 3px) en pino, visible sobre papel y sobre mostaza.
+- El estado pulsado no depende del movimiento: la arista cambia de grosor. Con `prefers-reduced-motion` la estructura anula las transiciones y el cambio es instantáneo.
+- Las aristas no sustituyen al texto del estado.
+
+## Estado de los valores
+- **Diseño propio**: todos los de este tema; ninguno proviene de una referencia medida.
+- **Pendiente**: validar en pantalla real la piel noche, la tecla menor en calendario y paginación, y la variante índigo.

package/dist/themes/tactile.meta.json

@@ -1,16 +1,175 @@
-{
-  "name": "tactile",
-  "label": "Táctil",
-  "essence": "Interfaz de papel y tinta que se toca: teclas con arista y rotulador bajo los títulos.",
-  "signature": ["tecla con arista inferior que baja al pulsar", "rotulador bajo los títulos"],
-  "fonts": { "display": "Fraunces", "body": "Figtree", "file": "tactile.fonts.css", "distributable": true },
-  "palette": { "light": { "background": "#F6F0E3", "foreground": "#2A2233", "primary": "#F2B33D" }, "dark": { "background": "#1D1824" } },
-  "radii": [8, 12, 14, 16],
-  "references": [
-    { "name": "Duolingo", "tookFromIt": "arista inferior que baja al pulsar", "source": "fuentes de terceros" },
-    { "name": "Endorsal", "tookFromIt": "rotulador bajo títulos, iconos duotono", "source": "análisis en navegador" },
-    { "name": "SerpWatch", "tookFromIt": "lienzo no blanco", "source": "análisis en navegador" }
-  ],
-  "status": { "verified": [], "approximate": [], "designed": ["todos los valores"], "pending": ["piel noche con captura real", "variante índigo"] },
-  "guide": "tactile.guide.md"
-}
+{
+  "name": "tactile",
+  "label": "Táctil",
+  "essence": "Interfaz de papel y tinta que se toca: teclas con arista y rotulador bajo los títulos.",
+  "conformance": "strict",
+  "signature": [
+    "tecla con arista inferior que baja al pulsar",
+    "rotulador bajo los títulos"
+  ],
+  "fonts": {
+    "display": "Fraunces",
+    "body": "Figtree",
+    "mono": "system",
+    "file": "tactile.fonts.css",
+    "distributable": true,
+    "axes": {
+      "display": "opsz, wght 600–800, SOFT 0–100, WONK 0–1",
+      "body": "wght 400–700"
+    },
+    "settings": {
+      "--ds-display-variation": "\"SOFT\" 50, \"WONK\" 1",
+      "--ds-heading-weight": 700,
+      "--ds-title-weight": 650,
+      "--ds-key-weight": 700,
+      "--ds-nav-weight": 600
+    },
+    "scale": {
+      "body": "15px (--ds-text-sm)",
+      "label": "13px (--ds-text-xs)"
+    },
+    "rules": [
+      "Fraunces solo a 16px o más",
+      "texto pequeño siempre en Figtree"
+    ]
+  },
+  "palette": {
+    "light": {
+      "background": "#F6F0E3",
+      "card": "#FFFCF4",
+      "paper": "#EDE3CD",
+      "foreground": "#2A2233",
+      "primary": "#F2B33D",
+      "pine": "#17624F",
+      "tomato": "#B53A22",
+      "sky": "#2F6FB0",
+      "plum": "#8B5A9E"
+    },
+    "dark": {
+      "background": "#1D1824",
+      "card": "#2C2636",
+      "foreground": "#F4EBDA",
+      "primary": "#F2B33D",
+      "pine": "#5CC9A8",
+      "tomato": "#FF8266",
+      "sky": "#7DB3F0"
+    },
+    "derived": [
+      "--sidebar-primary",
+      "--brand",
+      "--chart-1",
+      "--ds-marker",
+      "--accent"
+    ],
+    "brandNotes": "--ring y --link son pino a propósito: un foco mostaza sobre papel no llega a 3:1"
+  },
+  "radii": [
+    8,
+    12,
+    14,
+    16
+  ],
+  "references": [
+    {
+      "name": "Duolingo",
+      "tookFromIt": "arista inferior que baja al pulsar",
+      "source": "fuentes de terceros"
+    },
+    {
+      "name": "Endorsal",
+      "tookFromIt": "rotulador bajo títulos, iconos duotono",
+      "source": "análisis en navegador"
+    },
+    {
+      "name": "SerpWatch",
+      "tookFromIt": "lienzo no blanco",
+      "source": "análisis en navegador"
+    }
+  ],
+  "status": {
+    "verified": [],
+    "approximate": [],
+    "designed": [
+      "todos los valores"
+    ],
+    "pending": [
+      "piel noche con captura real",
+      "tecla menor en calendario y paginación",
+      "variante índigo"
+    ]
+  },
+  "guide": "tactile.guide.md",
+  "gestures": [
+    {
+      "id": "marker",
+      "token": "--ds-marker",
+      "off": "transparent",
+      "about": "rotulador bajo los títulos",
+      "related": [
+        "--ds-marker-thickness",
+        "--ds-marker-offset"
+      ]
+    },
+    {
+      "id": "key-outline",
+      "token": "--ds-key-outline",
+      "about": "contorno de las teclas"
+    },
+    {
+      "id": "key-edge",
+      "token": "--ds-key-edge",
+      "about": "arista de las superficies"
+    },
+    {
+      "id": "key-shape",
+      "token": "--ds-key-edge-w",
+      "flat": "var(--ds-key-border)",
+      "about": "arista inferior de las teclas",
+      "related": [
+        "--ds-key-border",
+        "--ds-key-edge-w-sm",
+        "--ds-key-edge-w-pressed",
+        "--ds-key-press",
+        "--ds-key-press-sm",
+        "--ds-key-radius",
+        "--ds-key-radius-sm",
+        "--ds-rule-w",
+        "--ds-overlay-edge-w"
+      ]
+    }
+  ],
+  "a11y": {
+    "level": "AA",
+    "exceptions": []
+  },
+  "families": [
+    "choice",
+    "field",
+    "modal",
+    "floating",
+    "title",
+    "toggle",
+    "track"
+  ],
+  "motion": {
+    "about": "seco y rápido, como una tecla; las piezas que aparecen rebotan un poco",
+    "durations": {
+      "fast": "80ms",
+      "base": "160ms",
+      "slow": "240ms"
+    },
+    "ease": {
+      "standard": "cubic-bezier(0.2, 0, 0, 1)",
+      "enter": "cubic-bezier(0.34, 1.4, 0.64, 1)",
+      "exit": "cubic-bezier(0.4, 0, 1, 1)"
+    },
+    "choreography": {
+      "motion-distance": "4px",
+      "motion-scale": "0.98",
+      "motion-blur": "0px",
+      "spring-bounce": "0.25",
+      "motion-stagger": "30ms",
+      "motion-press-scale": "1"
+    }
+  }
+}