orbital-ds 0.5.0 → 0.6.0

package/README.md

@@ -1,64 +1,73 @@
-# orbital-ds
-
-Sistema de diseño genérico: **estructura común + temas intercambiables + ~60 componentes**
-sobre [Base UI](https://base-ui.com) y Tailwind v4 (los de shadcn en su versión Base UI).
-
-- `styles.css` — la ESTRUCTURA: mapea variables de tema a utilidades de Tailwind y define los
-  tokens semánticos (radios, alturas, sombras, espaciado, capas, movimiento, foco, materiales)
-  y la capa base. No lleva colores ni fuentes.
-- `themes/<tema>.css` — un TEMA: paleta (claro/oscuro), radio base y tipografía.
-  Hoy: `qratia` y `zyro` (cristal). Añadir otro = añadir otro fichero.
-- `themes/<tema>.fonts.css` — las fuentes del tema (un `@import url()`; va el primero).
-- `ui/*` — componentes, uno por fichero (`orbital-ds/ui/button`, …): quien no usa gráficos
-  no necesita `recharts`, quien no usa el calendario no necesita `react-day-picker`.
-- `contract.json` + `pnpm check:ds` — el contrato de tema y su comprobación.
-
-## Uso en una app (Tailwind v4)
-
-```css
-@import 'orbital-ds/themes/qratia.fonts.css'; /* fuentes: lo primero */
-@import 'tailwindcss';
-@plugin '@tailwindcss/typography';
-@import 'tw-animate-css';
-@import 'orbital-ds/styles.css';              /* estructura */
-@import 'orbital-ds/themes/qratia.css';       /* tema (después de la estructura) */
-@source '../node_modules/orbital-ds/dist';    /* que Tailwind vea las clases del paquete */
-```
-
-```tsx
-import { Button } from 'orbital-ds/ui/button';
-```
-
-Cambiar de identidad = cambiar `qratia` por `zyro` en esas dos líneas de tema/fuentes.
-Detalle del contrato, tokens y reglas de nombres en [`docs/CONTRACT.md`](docs/CONTRACT.md).
-
-## Marca de una app
-
-Lo propio de cada app (color principal, acento, radio, fuentes) va en **su** `src/brand.css`,
-importado después del tema. Ninguna actualización de orbital-ds lo toca. `pnpm exec orbital-ds-init`
-lo crea la primera vez. Detalle en [`docs/CONTRACT.md`](docs/CONTRACT.md).
-
-## Regla
-
-Ningún componente lleva valores propios (colores, medidas, sombras, z-index, duraciones):
-pide un hueco a una variable. Para cambiar el aspecto se cambia el tema, no el componente.
-Si un componente necesita un hueco nuevo, se AÑADE el token con un valor que deje el aspecto
-como estaba. `pnpm check:ds` lo comprueba.
-
-## Desarrollo
-
-```bash
-pnpm install
-pnpm verify    # doctor + typecheck + build
-pnpm check:ds    # solo el contrato de tema y los valores fijos
-```
-
-Peers obligatorios: `react`, `react-dom`, `@base-ui/react`, `tailwindcss`, `tailwind-merge`,
-`class-variance-authority`, `clsx`, `lucide-react`, `tw-animate-css`.
-Opcionales (solo si usas ese componente): `recharts`, `sonner`, `next-themes`, `cmdk`,
-`date-fns` + `react-day-picker`, `embla-carousel-react`, `input-otp`,
-`react-resizable-panels`, `@shadcn/react`.
-
-## Licencia
-
-MIT © Fractalia Systems
+# orbital-ds
+
+Sistema de diseño genérico: **estructura común + temas intercambiables + ~60 componentes**
+sobre [Base UI](https://base-ui.com) y Tailwind v4 (los de shadcn en su versión Base UI).
+
+- `styles.css` — la ESTRUCTURA: mapea variables de tema a utilidades de Tailwind y define los
+  tokens semánticos (radios, alturas, sombras, espaciado, capas, movimiento, foco, materiales)
+  y la capa base. No lleva colores ni fuentes.
+- `themes/<tema>.css` — un TEMA: paleta (claro/oscuro), radio base y tipografía.
+  Hoy: `qratia` y `zyro` (cristal). Añadir otro = añadir otro fichero.
+- `themes/<tema>.fonts.css` — las fuentes del tema (un `@import url()`; va el primero).
+- `ui/*` — componentes, uno por fichero (`orbital-ds/ui/button`, …): quien no usa gráficos
+  no necesita `recharts`, quien no usa el calendario no necesita `react-day-picker`.
+- `contract.json` + `pnpm check:ds` — el contrato de tema y su comprobación.
+
+## Uso en una app (Tailwind v4)
+
+```css
+@import 'orbital-ds/themes/qratia.fonts.css'; /* fuentes: lo primero */
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+@import 'tw-animate-css';
+@import 'orbital-ds/styles.css';              /* estructura */
+@import 'orbital-ds/themes/qratia.css';       /* tema (después de la estructura) */
+@source '../node_modules/orbital-ds/dist';    /* que Tailwind vea las clases del paquete */
+```
+
+```tsx
+import { Button } from 'orbital-ds/ui/button';
+```
+
+Cambiar de identidad = cambiar `qratia` por `zyro` en esas dos líneas de tema/fuentes.
+Detalle del contrato, tokens y reglas de nombres en [`docs/CONTRACT.md`](docs/CONTRACT.md).
+
+## Guía de cada tema
+
+Cada tema lleva su documentación, que viaja con el paquete:
+
+- `orbital-ds/themes/<tema>.guide.md` — guía de diseño: esencia, gesto firma, principios, referencias (qué se tomó de cada una), paleta, tipografía, formas, accesibilidad y estado de los valores (confirmados, aproximados o de diseño propio).
+- `orbital-ds/themes/<tema>.meta.json` — la misma ficha legible por máquina.
+
+`pnpm check:ds` falla si a un tema le falta alguna de las dos. Un tema nuevo debe nacer con ambas.
+
+## Marca de una app
+
+Lo propio de cada app (color principal, acento, radio, fuentes) va en **su** `src/brand.css`,
+importado después del tema. Ninguna actualización de orbital-ds lo toca. `pnpm exec orbital-ds-init`
+lo crea la primera vez. Detalle en [`docs/CONTRACT.md`](docs/CONTRACT.md).
+
+## Regla
+
+Ningún componente lleva valores propios (colores, medidas, sombras, z-index, duraciones):
+pide un hueco a una variable. Para cambiar el aspecto se cambia el tema, no el componente.
+Si un componente necesita un hueco nuevo, se AÑADE el token con un valor que deje el aspecto
+como estaba. `pnpm check:ds` lo comprueba.
+
+## Desarrollo
+
+```bash
+pnpm install
+pnpm verify    # doctor + typecheck + build
+pnpm check:ds    # solo el contrato de tema y los valores fijos
+```
+
+Peers obligatorios: `react`, `react-dom`, `@base-ui/react`, `tailwindcss`, `tailwind-merge`,
+`class-variance-authority`, `clsx`, `lucide-react`, `tw-animate-css`.
+Opcionales (solo si usas ese componente): `recharts`, `sonner`, `next-themes`, `cmdk`,
+`date-fns` + `react-day-picker`, `embla-carousel-react`, `input-otp`,
+`react-resizable-panels`, `@shadcn/react`.
+
+## Licencia
+
+MIT © Fractalia Systems

package/components.manifest.json

@@ -1,6 +1,6 @@
 {
   "package": "orbital-ds",
-  "version": "0.3.0",
+  "version": "0.6.0",
   "engine": "@base-ui/react",
   "docs": [
     "README.md",
@@ -582,6 +582,17 @@
       ],
       "optionalPeers": []
     },
+    "icon-tile": {
+      "import": "orbital-ds/ui/icon-tile",
+      "exports": [
+        "IconTile",
+        "iconTileVariants"
+      ],
+      "slots": [
+        "icon-tile"
+      ],
+      "optionalPeers": []
+    },
     "input-group": {
       "import": "orbital-ds/ui/input-group",
       "exports": [

package/dist/styles.css

@@ -195,6 +195,17 @@
   --ds-sidebar-item-radius: var(--ds-radius-md);
   --ds-sidebar-item-h: 2.5rem;
 
+  /* ── BALDOSA DE ICONO ───────────────────────────────────────────────────
+   * Un icono grande (Lucide) dentro de una baldosa tintada: la «mascota» barata.
+   * sm / md / lg: lado de la baldosa; radius: su esquina; fill: cuánto relleno
+   * lleva el icono (0 = solo trazo; 0.2 = aspecto duotono suave).
+   */
+  --ds-icon-tile-sm: 2rem;
+  --ds-icon-tile-md: 2.75rem;
+  --ds-icon-tile-lg: 3.75rem;
+  --ds-icon-tile-radius: var(--ds-radius-lg);
+  --ds-icon-tile-fill: 0;
+
   /* ── COLOR (mapeo de las variables del tema a utilidades) ─────────────── */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -484,3 +495,10 @@
     }
   }
 }
+
+/* Baldosa de icono: el relleno del icono lo decide el tema (--ds-icon-tile-fill). */
+@layer base {
+  [data-slot='icon-tile'] svg {
+    fill: color-mix(in oklch, currentColor calc(var(--ds-icon-tile-fill) * 100%), transparent);
+  }
+}

package/dist/themes/friendly.guide.md

@@ -0,0 +1,38 @@
+# Tema `friendly` — guía de diseño
+
+## Esencia
+SaaS amable con personalidad: lienzo lila muy claro, tinta índigo, botones en píldora con brillo de color y un segundo acento naranja.
+
+## Gesto firma
+Botón primario en **píldora con mayúsculas y brillo de color debajo**; tarjetas de esquina pequeña frente a botones del todo redondos.
+
+## Principios
+- Contraste de formas: tarjetas casi rectas, acciones totalmente redondeadas.
+- Sombras teñidas de índigo, nunca grises neutras.
+- El naranja `#FBB232` es un segundo acento puntual.
+
+## Referencias y qué se tomó de cada una
+- **SerpWatch v2** (analizada en navegador): lienzo `#F5F6FC`, tinta `#232450`, fuente Rubik, botón periwinkle en píldora con mayúsculas, sombras teñidas, naranja como segundo acento, tarjetas de radio pequeño.
+- Se **corrigió** de la referencia: el periwinkle original `#7987CE` con texto blanco da ≈3:1; aquí el primario es `#5F6EC9` (AA) y el original se conserva como brillo (`--brand-bright`).
+
+## Paleta
+- Claro: fondo `#F5F6FC`, tinta `#232450`, tarjeta `#FFFFFF`, primario `#5F6EC9`, borde `rgba(35,36,80,.08)`.
+- Oscuro: fondo `#16173B`, tarjeta `#1F2150`, texto `#ECEDFA`.
+
+## Tipografía
+**Rubik** para titulares y cuerpo (`friendly.fonts.css`, lo primero del CSS de la app).
+
+## Formas y profundidad
+Radio base 8px; botones en píldora; sombras teñidas de índigo.
+
+## Qué evita
+Primario con contraste insuficiente, grises neutros en sombras.
+
+## Accesibilidad
+Primario `#5F6EC9` con texto blanco: AA. Texto atenuado y de estado también con AA.
+
+## Estado de los valores
+- **Leídos de la referencia**: lienzo, tinta, fuente, naranja, forma de botón.
+- **Ajustados**: primario (para contraste).
+- **Pendiente**: la piel oscura no procede de la referencia (diseño propio).
+- Limitación conocida: su sombra de botón anula el anillo de foco (corrección prevista en el paquete).

package/dist/themes/friendly.meta.json

@@ -0,0 +1,14 @@
+{
+  "name": "friendly",
+  "label": "Amable",
+  "essence": "SaaS amable con personalidad: lienzo lila, tinta índigo, botones en píldora con brillo.",
+  "signature": ["botón en píldora con mayúsculas y brillo de color", "tarjetas de esquina pequeña frente a botones redondos"],
+  "fonts": { "display": "Rubik", "body": "Rubik", "file": "friendly.fonts.css", "distributable": true },
+  "palette": { "light": { "background": "#F5F6FC", "foreground": "#232450", "primary": "#5F6EC9" }, "dark": { "background": "#16173B" } },
+  "radii": [8, 999],
+  "references": [
+    { "name": "SerpWatch v2", "tookFromIt": "lienzo, tinta, Rubik, botón en píldora, naranja, sombras teñidas", "source": "análisis en navegador" }
+  ],
+  "status": { "verified": ["lienzo #F5F6FC", "tinta #232450", "fuente Rubik", "naranja #FBB232"], "approximate": [], "designed": ["primario #5F6EC9 (ajustado a AA)", "piel oscura"], "pending": ["anillo de foco en botones"] },
+  "guide": "friendly.guide.md"
+}

package/dist/themes/qratia.guide.md

@@ -0,0 +1,34 @@
+# Tema `qratia` — guía de diseño
+
+## Esencia
+Tema base de la suite: sobrio, corporativo, de tinta azul marino y lienzo azulado claro. Es el tema que siempre está aplicado (`contract.baseTheme`); los demás solo lo sobrescriben.
+
+## Gesto firma
+Sidebar de **marca** (tinta `#0A1128`, igual en claro y oscuro) y tarjetas con **sombras en dos capas teñidas de la tinta**.
+
+## Principios
+- Valores del «centro» de la identidad: lienzo `#EEF5FB`, tarjeta `#FFFFFF`, borde `#DCE6F0`, primario/tinta `#0A1128`.
+- Paleta en OKLCH, validada en contraste WCAG por el verify de la app.
+- Sombras tintadas con la tinta del tema, nunca negro.
+
+## Referencias y qué se tomó de cada una
+Sin referencia externa: es la identidad propia (Qratia / Fractalia).
+
+## Paleta
+- Claro: fondo `oklch(0.967 0.011 244)`, primario `oklch(0.186 0.048 269)`, anillo de foco `oklch(0.534 0.107 231)`.
+- Oscuro: tarjeta `#111B36`, texto `#E9F0F8`.
+
+## Tipografía
+**Instrument Sans** (`qratia.fonts.css`, lo primero del CSS de la app).
+
+## Formas y profundidad
+Radio base 0,625 rem; dos sombras de tarjeta (reposo y realce).
+
+## Qué evita
+Estridencias de color; sombras negras.
+
+## Accesibilidad
+Contraste WCAG validado con `check:contraste` en la app que lo consume.
+
+## Estado de los valores
+Provienen de la identidad propia de Qratia; son el punto de partida del contrato.

package/dist/themes/qratia.meta.json

@@ -0,0 +1,12 @@
+{
+  "name": "qratia",
+  "label": "Qratia",
+  "essence": "Tema base: sobrio y corporativo, tinta azul marino y lienzo azulado.",
+  "signature": ["sidebar de marca (tinta #0A1128)", "sombras de tarjeta en dos capas teñidas"],
+  "fonts": { "display": "Instrument Sans", "body": "Instrument Sans", "file": "qratia.fonts.css", "distributable": true },
+  "palette": { "light": { "background": "#EEF5FB", "foreground": "#0A1128", "primary": "#0A1128" }, "dark": { "background": "#0A1128" } },
+  "radii": [10],
+  "references": [],
+  "status": { "verified": ["identidad Qratia"], "approximate": [], "designed": [], "pending": [] },
+  "guide": "qratia.guide.md"
+}