orbital-ds 0.2.0 → 0.4.0

package/dist/themes/twitter.scoped.css

@@ -0,0 +1,290 @@
+/*
+ * TEMA twitter — la interfaz de Twitter anterior a X (rediseño de 2021).
+ *
+ * Personalidad: PLANO y de alto contraste. Sin sombras ni cristal en el contenido;
+ * separación por filetes de 1px; botones en píldora con peso 700; tarjetas de 16px
+ * sin elevación; sidebar a ras de borde, sin fondo, con filas en píldora y la activa
+ * en negrita; pestañas con subrayado de acento. Azul de marca #1D9BF0 (confirmado) con
+ * «menos azul»: la acción más importante puede ir en tinta (negro/blanco).
+ *
+ * VALORES APROXIMADOS: el azul de marca y la fuente (Chirp, propietaria) están
+ * documentados; los grises, bordes y los fondos de «Dim» son de memoria y NO se han
+ * contrastado con la hoja de estilos real — ajústalos con una captura de referencia.
+ * Chirp no se puede distribuir: se usa la pila del sistema como respaldo.
+ *
+ * Importar DESPUÉS de la estructura. Variables `--zt-*`: privadas de este tema.
+ */
+
+/* ── VARIABLES · PIEL CLARA ──────────────────────────────────────────────── */
+:root[data-theme='twitter'] {
+  --radius: 16px;
+
+  --ds-font-sans: 'Chirp', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --ds-font-display: var(--ds-font-sans);
+  --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+  --ds-heading-tracking: normal;
+
+  /* Color */
+  --background: #ffffff;
+  --foreground: #0f1419;
+
+  --card: #ffffff;
+  --card-foreground: #0f1419;
+  --popover: #ffffff;
+  --popover-foreground: #0f1419;
+
+  --primary: #1d9bf0;
+  --primary-foreground: #ffffff;
+  --secondary: #eff3f4;
+  --secondary-foreground: #0f1419;
+  --muted: #f7f9f9;
+  --muted-foreground: #536471;
+  --accent: rgba(29, 155, 240, 0.1);
+  --accent-foreground: #1a8cd8;
+  --destructive: #f4212e;
+  --destructive-foreground: #ffffff;
+
+  --border: #eff3f4;
+  --input: #cfd9de;
+  --ring: #1d9bf0;
+
+  --chart-1: #1d9bf0;
+  --chart-2: #00ba7c;
+  --chart-3: #ffd400;
+  --chart-4: #f91880;
+  --chart-5: #7856ff;
+
+  --sidebar: transparent;
+  --sidebar-foreground: #0f1419;
+  --sidebar-primary: #1d9bf0;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: rgba(15, 20, 25, 0.1);
+  --sidebar-accent-foreground: #0f1419;
+  --sidebar-border: #eff3f4;
+  --sidebar-ring: #1d9bf0;
+
+  --danger: #d4141f;
+  --danger-soft: rgba(244, 33, 46, 0.1);
+  --warning: #8a6d00;
+  --warning-soft: rgba(255, 212, 0, 0.2);
+  --success: #00875a;
+  --success-soft: rgba(0, 186, 124, 0.12);
+  --info: #1a8cd8;
+  --info-soft: rgba(29, 155, 240, 0.1);
+  --neutral: #536471;
+  --neutral-soft: #eff3f4;
+
+  --link: #1d9bf0;
+  --link-hover: #1a8cd8;
+  --inset: #f7f9f9;
+  --inset-foreground: #0f1419;
+  --brand: #1d9bf0;
+  --brand-bright: #1d9bf0;
+
+  /* Formas: píldoras para acciones, 16px para superficies */
+  --ds-radius-sm: 8px;
+  --ds-radius-md: 12px;
+  --ds-radius-lg: 16px;
+  --ds-radius-xl: 16px;
+  --ds-radius-2xl: 20px;
+  --ds-radius-control: 9999px;
+  --ds-radius-overlay: 16px;
+
+  /* Sin elevación: solo los menús flotantes llevan sombra, muy suave */
+  --ds-shadow-card: 0 0 #0000;
+  --ds-shadow-card-hover: 0 0 #0000;
+  --ds-shadow-control: 0 0 #0000;
+  --ds-shadow-raised: 0 0 #0000;
+  --ds-shadow-overlay: 0 0 15px rgba(101, 119, 134, 0.2), 0 0 3px 1px rgba(101, 119, 134, 0.15);
+  --ds-shadow-popover: 0 0 15px rgba(101, 119, 134, 0.2), 0 0 3px 1px rgba(101, 119, 134, 0.15);
+
+  /* Medidas */
+  --ds-control-h-sm: 2rem;
+  --ds-control-h-md: 2.25rem;
+  --ds-control-h-lg: 3.25rem;
+  --ds-button-px-sm: 1rem;
+  --ds-button-px-md: 1.25rem;
+  --ds-button-px-lg: 2rem;
+  --ds-field-px: 1rem;
+  --ds-card-spacing: 1rem;
+  --ds-card-spacing-sm: 0.75rem;
+
+  /* Materiales: ninguno (plano) */
+  --ds-card-backdrop: none;
+  --ds-overlay-backdrop: none;
+  --ds-field-backdrop: none;
+  --ds-sidebar-backdrop: none;
+  --ds-page-backdrop: none;
+
+  /* Sidebar a ras de borde, sin silueta; filas en píldora grandes */
+  --ds-sidebar-pad: 0px;
+  --ds-sidebar-radius: 0px;
+  --ds-sidebar-shadow: 0 0 #0000;
+  --ds-sidebar-ring: 0px;
+  --ds-sidebar-edge: 1px solid var(--sidebar-border);
+  --ds-sidebar-item-radius: 9999px;
+  --ds-sidebar-item-h: 3.25rem;
+
+  /* Privadas de twitter */
+  --zt-hover: rgba(15, 20, 25, 0.1);
+  --zt-hover-soft: rgba(15, 20, 25, 0.03);
+  --zt-line-strong: #cfd9de;
+  --zt-ink: #0f1419;
+  --zt-ink-foreground: #ffffff;
+}
+
+/* ── VARIABLES · PIEL OSCURA («Dim») ─────────────────────────────────────── */
+:root[data-theme='twitter'].dark {
+  --background: #15202b;
+  --foreground: #f7f9f9;
+
+  --card: #15202b;
+  --card-foreground: #f7f9f9;
+  --popover: #1e2732;
+  --popover-foreground: #f7f9f9;
+
+  --primary: #1d9bf0;
+  --primary-foreground: #ffffff;
+  --secondary: #1e2732;
+  --secondary-foreground: #f7f9f9;
+  --muted: #1e2732;
+  --muted-foreground: #8b98a5;
+  --accent: rgba(29, 155, 240, 0.15);
+  --accent-foreground: #4db3f5;
+  --destructive: #f4212e;
+  --destructive-foreground: #ffffff;
+
+  --border: #38444d;
+  --input: #536471;
+  --ring: #1d9bf0;
+
+  --sidebar: transparent;
+  --sidebar-foreground: #f7f9f9;
+  --sidebar-primary: #1d9bf0;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: rgba(247, 249, 249, 0.1);
+  --sidebar-accent-foreground: #f7f9f9;
+  --sidebar-border: #38444d;
+  --sidebar-ring: #1d9bf0;
+
+  --danger: #ff5a64;
+  --danger-soft: rgba(244, 33, 46, 0.18);
+  --warning: #ffd400;
+  --warning-soft: rgba(255, 212, 0, 0.16);
+  --success: #00ba7c;
+  --success-soft: rgba(0, 186, 124, 0.16);
+  --info: #4db3f5;
+  --info-soft: rgba(29, 155, 240, 0.18);
+  --neutral: #8b98a5;
+  --neutral-soft: #1e2732;
+
+  --link: #4db3f5;
+  --link-hover: #8dcdf8;
+  --inset: #1e2732;
+  --inset-foreground: #f7f9f9;
+  --brand: #1d9bf0;
+  --brand-bright: #4db3f5;
+
+  --ds-shadow-overlay: 0 0 15px rgba(255, 255, 255, 0.2), 0 0 3px 1px rgba(255, 255, 255, 0.15);
+  --ds-shadow-popover: 0 0 15px rgba(255, 255, 255, 0.2), 0 0 3px 1px rgba(255, 255, 255, 0.15);
+
+  --zt-hover: rgba(247, 249, 249, 0.1);
+  --zt-hover-soft: rgba(247, 249, 249, 0.03);
+  --zt-line-strong: #536471;
+  --zt-ink: #eff3f4;
+  --zt-ink-foreground: #0f1419;
+}
+
+/* ── PERSONALIDAD ────────────────────────────────────────────────────────────
+ * Sin capa: gana a las utilidades de los componentes. Solo variables.
+ */
+:root[data-theme='twitter'] {
+  /* Botones: píldora en peso 700; primario en azul; contorno con filete */
+  [data-slot='button'] {
+    border-radius: 9999px;
+    font-weight: 700;
+  }
+  [data-slot='button'][data-variant='default']:hover:not(:disabled) {
+    background-color: var(--link-hover);
+  }
+  [data-slot='button'][data-variant='secondary'] {
+    background: var(--zt-ink);
+    color: var(--zt-ink-foreground);
+  }
+  [data-slot='button'][data-variant='secondary']:hover:not(:disabled) {
+    opacity: 0.88;
+  }
+  [data-slot='button'][data-variant='outline'] {
+    background: transparent;
+    border: 1px solid var(--zt-line-strong);
+    color: var(--foreground);
+  }
+  [data-slot='button'][data-variant='outline']:hover:not(:disabled),
+  [data-slot='button'][data-variant='ghost']:hover:not(:disabled) {
+    background: var(--zt-hover);
+  }
+  [data-slot='button'][data-variant='destructive'] {
+    background: var(--destructive);
+    color: var(--destructive-foreground);
+  }
+
+  /* Tarjetas: planas, con filete, sin elevación */
+  [data-slot='card'] {
+    border: 1px solid var(--border);
+    box-shadow: none;
+  }
+
+  /* Campos: píldora/16px con filete; foco azul lo da el anillo */
+  [data-slot='input'],
+  [data-slot='textarea'],
+  [data-slot='select-trigger'] {
+    background: transparent;
+    border: 1px solid var(--input);
+  }
+  [data-slot='textarea'] {
+    border-radius: var(--ds-radius-lg);
+  }
+
+  /* Etiquetas en píldora */
+  [data-slot='badge'] {
+    border-radius: 9999px;
+  }
+
+  /* Pestañas: sin fondo, subrayado de acento en la activa */
+  [data-slot='tabs-list'] {
+    background: transparent;
+    border-bottom: 1px solid var(--border);
+    border-radius: 0;
+  }
+  [data-slot='tabs-trigger'] {
+    border-radius: 0;
+    background: transparent;
+    font-weight: 500;
+  }
+  [data-slot='tabs-trigger']:hover {
+    background: var(--zt-hover-soft);
+  }
+  [data-slot='tabs-trigger'][data-active] {
+    background: transparent;
+    box-shadow: inset 0 -4px 0 var(--primary);
+    font-weight: 700;
+  }
+
+  /* Sidebar: filas grandes en píldora; la activa en negrita, sin relleno */
+  [data-sidebar='menu-button'] {
+    font-size: 1.125rem;
+    border-radius: 9999px;
+  }
+  [data-sidebar='menu-button']:hover {
+    background: var(--zt-hover);
+  }
+  [data-sidebar='menu-button'][data-active='true'] {
+    background: transparent;
+    font-weight: 700;
+  }
+
+  /* Interruptor y progreso en el azul de marca, planos */
+  [data-slot='progress-indicator'] {
+    background: var(--primary);
+  }
+}

package/dist/themes/zyro.css

@@ -1,57 +1,34 @@
 /*
- * TEMA zyro — «liquid glass» (traducido de faro-orbital-zyro-ui/global.css).
+ * TEMA zyro — «liquid glass» (traducido de faro-orbital-zyro-ui).
  *
- * Identidad: lienzo lavanda claro / azul muy oscuro, acento azul profundo
- * (claro) y cian (oscuro), cristal traslúcido con desenfoque y saturación, y
- * un fondo vivo. Cumple el MISMO contrato de tema que `qratia` (ver
- * `contract.json`): todo lo que cambia respecto a qratia es aspecto, no API.
+ * Personalidad: lavanda claro / azul muy oscuro, acento azul profundo (claro) y
+ * cian (oscuro). El cristal vive en la capa de NAVEGACIÓN y CONTROLES (sidebar,
+ * campos, menús); el CONTENIDO (tarjetas) se mantiene casi opaco, como indican
+ * las guías de cristal. Sidebar a ras de borde, sin silueta flotante. Acción
+ * primaria = píldora con degradado de marca y brillo.
  *
- * Importar DESPUÉS de la estructura (`orbital-ds/styles.css`), para que este
- * tema pueda sobrescribir también la escala de radios y las sombras:
+ * Estructura del fichero:
+ *   1. Variables claras (:root) y oscuras (.dark) — el CONTRATO del tema.
+ *   2. Capa de PERSONALIDAD — reglas sobre los ganchos del DOM (`data-slot`,
+ *      `data-variant`…) escritas solo con variables. Va SIN capa para ganar a las
+ *      utilidades de los componentes, así que define también los estados
+ *      (hover, active). Es lo que da forma propia a los elementos.
  *
- *   @import 'orbital-ds/styles.css';
- *   @import 'orbital-ds/themes/zyro.css';
- *
- * Valores derivados (no vienen tal cual de zyro-ui): danger, danger-soft,
- * neutral(-soft), link-hover, brand-bright y inset, que zyro no define con
- * esos nombres; y el texto sobre el primario en oscuro, que se oscurece para
- * alcanzar contraste AA.
- *
- * Tipografía: Montserrat (titulares) + Roboto (cuerpo). Cárgalas en la app
- * (<link> a Google Fonts o self-host).
+ * Variables `--zy-*`: privadas de este tema (no son contrato).
+ * Importar DESPUÉS de la estructura. Fuentes: `zyro.fonts.css`, lo primero del CSS.
  */
 
-@theme inline {
-  /* Tipografía */
-  --font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
-  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
-  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
-
-  /* Escala de radios Zyro: el radio crece con el tamaño del contenedor. */
-  --radius-sm: 7px;
-  --radius-md: 10px;
-  --radius-lg: 14px;
-  --radius-xl: 18px;
-  --radius-2xl: 22px;
-  --radius-control: 10px;
-  --radius-overlay: 22px;
-
-  /* Sombras de cristal: capa tensa + difusa y brillo interior en el borde. */
-  --shadow-card: 0 2px 14px rgba(28, 48, 100, 0.07);
-  --shadow-card-hover:
-    0 4px 30px rgba(28, 48, 100, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
-  --shadow-raised:
-    0 4px 30px rgba(28, 48, 100, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
-  --shadow-overlay:
-    0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
-  --shadow-popover:
-    0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
-}
-
-/* ── PIEL CLARA ─────────────────────────────────────────────────────────── */
+/* ── 1. VARIABLES · PIEL CLARA ───────────────────────────────────────────── */
 :root {
   --radius: 18px;
 
+  /* Tipografía: Montserrat (titulares) + Roboto (cuerpo) */
+  --ds-font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
+  --ds-font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
+  --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+  --ds-heading-tracking: -0.01em;
+
+  /* Color */
   --background: #eaeefb;
   --foreground: rgba(14, 22, 48, 0.92);
 
@@ -81,16 +58,15 @@
   --chart-4: #eb1919;
   --chart-5: #9747ff;
 
-  --sidebar: rgba(255, 255, 255, 0.4);
-  --sidebar-foreground: rgba(14, 22, 48, 0.66);
+  --sidebar: rgba(255, 255, 255, 0.58);
+  --sidebar-foreground: rgba(14, 22, 48, 0.78);
   --sidebar-primary: #0349fe;
   --sidebar-primary-foreground: #ffffff;
   --sidebar-accent: rgba(3, 73, 254, 0.09);
   --sidebar-accent-foreground: #0349fe;
-  --sidebar-border: rgba(168, 190, 235, 0.3);
+  --sidebar-border: rgba(168, 190, 235, 0.35);
   --sidebar-ring: #0349fe;
 
-  /* Estados (variante oscura para texto sobre claro) */
   --danger: #c21414;
   --danger-soft: rgba(235, 25, 25, 0.1);
   --warning: #9a6e00;
@@ -109,19 +85,68 @@
   --brand: #0349fe;
   --brand-bright: #36b3ed;
 
-  /* Materiales: cristal. El fondo vivo (malla WebGL en zyro-ui) se aproxima
-     aquí con degradados; el componente de malla es opcional. */
+  /* Formas: la esquina crece con el tamaño del contenedor (7·10·14·18·22) */
+  --ds-radius-sm: 7px;
+  --ds-radius-md: 10px;
+  --ds-radius-lg: 14px;
+  --ds-radius-xl: 18px;
+  --ds-radius-2xl: 22px;
+  --ds-radius-control: 10px;
+  --ds-radius-overlay: 22px;
+
+  /* Sombras de cristal: capa tenue + brillo interior en el borde superior */
+  --ds-shadow-card: 0 2px 14px rgba(28, 48, 100, 0.07);
+  --ds-shadow-card-hover: 0 6px 26px rgba(28, 48, 100, 0.1);
+  --ds-shadow-raised: 0 4px 30px rgba(28, 48, 100, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+  --ds-shadow-overlay: 0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
+  --ds-shadow-popover: 0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
+
+  /* Medidas: controles algo más altos y holgados */
+  --ds-control-h-sm: 2.25rem;
+  --ds-control-h-md: 2.5rem;
+  --ds-control-h-lg: 2.75rem;
+  --ds-button-px-sm: 1rem;
+  --ds-button-px-md: 1.25rem;
+  --ds-button-px-lg: 1.5rem;
+  --ds-field-px: 1rem;
+
+  /* Materiales: cristal en navegación y controles; tarjetas sin desenfoque */
   --ds-sidebar-backdrop: blur(28px) saturate(180%);
   --ds-overlay-backdrop: blur(28px) saturate(180%);
   --ds-field-backdrop: blur(12px) saturate(160%);
   --ds-card-backdrop: none;
   --ds-page-backdrop:
-    radial-gradient(60% 50% at 12% 8%, rgba(54, 179, 237, 0.4), transparent 70%),
-    radial-gradient(55% 45% at 88% 18%, rgba(3, 73, 254, 0.24), transparent 70%),
-    radial-gradient(50% 55% at 55% 100%, rgba(151, 71, 255, 0.2), transparent 70%);
+    radial-gradient(55% 45% at 78% 6%, rgba(54, 179, 237, 0.3), transparent 70%),
+    radial-gradient(50% 45% at 96% 58%, rgba(3, 73, 254, 0.16), transparent 70%),
+    radial-gradient(55% 50% at 40% 106%, rgba(151, 71, 255, 0.14), transparent 70%);
+
+  /* Sidebar a ras de borde: sin separación, sin silueta; filo de 1px */
+  --ds-sidebar-pad: 0px;
+  --ds-sidebar-radius: 0px;
+  --ds-sidebar-shadow: 0 0 #0000;
+  --ds-sidebar-ring: 0px;
+  --ds-sidebar-edge: 1px solid var(--zy-glass-bs);
+  --ds-sidebar-item-radius: var(--ds-radius-lg);
+
+  /* Privadas de zyro */
+  --zy-accent-g: linear-gradient(135deg, #0349fe, #36b3ed);
+  --zy-accent-glow: rgba(3, 73, 254, 0.24);
+  --zy-glass-bt: rgba(255, 255, 255, 0.95);
+  --zy-glass-bs: rgba(168, 190, 235, 0.4);
+  --zy-card-bt: rgba(255, 255, 255, 1);
+  --zy-card-bs: rgba(168, 190, 235, 0.46);
+  --zy-field-bg: rgba(255, 255, 255, 0.72);
+  --zy-field-b: rgba(168, 190, 235, 0.55);
+  --zy-field-bt: rgba(255, 255, 255, 1);
+  --zy-pill: rgba(255, 255, 255, 0.55);
+  --zy-pill-on: rgba(255, 255, 255, 0.98);
+  --zy-conv-h: rgba(20, 40, 90, 0.04);
+  --zy-conv-a: rgba(3, 73, 254, 0.07);
+  --zy-conv-ab: rgba(3, 73, 254, 0.24);
+  --zy-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
-/* ── PIEL OSCURA ────────────────────────────────────────────────────────── */
+/* ── 1b. VARIABLES · PIEL OSCURA ─────────────────────────────────────────── */
 .dark {
   --background: #0e3148;
   --foreground: rgba(255, 255, 255, 0.94);
@@ -153,7 +178,7 @@
   --chart-5: #9747ff;
 
   --sidebar: rgba(255, 255, 255, 0.04);
-  --sidebar-foreground: rgba(255, 255, 255, 0.68);
+  --sidebar-foreground: rgba(255, 255, 255, 0.72);
   --sidebar-primary: #36b3ed;
   --sidebar-primary-foreground: #04121c;
   --sidebar-accent: rgba(54, 179, 237, 0.16);
@@ -179,11 +204,178 @@
   --brand: #36b3ed;
   --brand-bright: #7fd0f5;
 
+  --ds-shadow-card: 0 2px 14px rgba(0, 0, 0, 0.3);
+  --ds-shadow-card-hover: 0 6px 26px rgba(0, 0, 0, 0.38);
+  --ds-shadow-raised: 0 8px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  --ds-shadow-overlay: 0 22px 64px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.13);
+  --ds-shadow-popover: 0 22px 64px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.13);
+
   --ds-sidebar-backdrop: blur(24px) saturate(180%);
   --ds-overlay-backdrop: blur(24px) saturate(180%);
-  --ds-field-backdrop: blur(12px) saturate(160%);
   --ds-page-backdrop:
-    radial-gradient(60% 50% at 12% 8%, rgba(54, 179, 237, 0.3), transparent 70%),
-    radial-gradient(55% 45% at 88% 18%, rgba(3, 73, 254, 0.28), transparent 70%),
-    radial-gradient(50% 55% at 55% 100%, rgba(151, 71, 255, 0.22), transparent 70%);
+    radial-gradient(55% 45% at 78% 6%, rgba(54, 179, 237, 0.26), transparent 70%),
+    radial-gradient(50% 45% at 96% 58%, rgba(3, 73, 254, 0.24), transparent 70%),
+    radial-gradient(55% 50% at 40% 106%, rgba(151, 71, 255, 0.2), transparent 70%);
+
+  --zy-accent-g: linear-gradient(135deg, #36b3ed, #0349fe);
+  --zy-accent-glow: rgba(54, 179, 237, 0.42);
+  --zy-glass-bt: rgba(255, 255, 255, 0.3);
+  --zy-glass-bs: rgba(255, 255, 255, 0.07);
+  --zy-card-bt: rgba(255, 255, 255, 0.11);
+  --zy-card-bs: rgba(255, 255, 255, 0.06);
+  --zy-field-bg: rgba(255, 255, 255, 0.06);
+  --zy-field-b: rgba(255, 255, 255, 0.12);
+  --zy-field-bt: rgba(255, 255, 255, 0.26);
+  --zy-pill: rgba(255, 255, 255, 0.05);
+  --zy-pill-on: rgba(255, 255, 255, 0.12);
+  --zy-conv-h: rgba(255, 255, 255, 0.05);
+  --zy-conv-a: rgba(54, 179, 237, 0.14);
+  --zy-conv-ab: rgba(54, 179, 237, 0.4);
+}
+
+/* ── 2. PERSONALIDAD ─────────────────────────────────────────────────────────
+ * Sin capa: gana a las utilidades de los componentes. Solo variables.
+ */
+:root {
+  /* Botones: píldora. Acción primaria con degradado de marca y brillo. */
+  [data-slot='button'] {
+    border-radius: 9999px;
+    transition: all var(--ds-motion-base) var(--zy-ease);
+  }
+  [data-slot='button'][data-size^='icon'] {
+    border-radius: var(--ds-radius-xl);
+  }
+  [data-slot='button']:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+  [data-slot='button'][data-variant='default'] {
+    background-color: transparent;
+    background-image: var(--zy-accent-g);
+    color: #ffffff;
+    border-color: transparent;
+    box-shadow: 0 4px 16px var(--zy-accent-glow);
+  }
+  [data-slot='button'][data-variant='default']:hover:not(:disabled) {
+    filter: brightness(1.1);
+    box-shadow: 0 6px 22px var(--zy-accent-glow);
+  }
+  [data-slot='button'][data-variant='destructive'] {
+    box-shadow: 0 4px 16px rgba(235, 25, 25, 0.3);
+  }
+  [data-slot='button'][data-variant='outline'],
+  [data-slot='button'][data-variant='secondary'] {
+    border: 1px solid var(--zy-field-b);
+    background: color-mix(in oklch, var(--foreground) 5%, var(--background));
+    color: var(--muted-foreground);
+  }
+  [data-slot='button'][data-variant='outline']:hover:not(:disabled),
+  [data-slot='button'][data-variant='secondary']:hover:not(:disabled) {
+    background: color-mix(in oklch, var(--foreground) 11%, var(--background));
+    color: var(--foreground);
+  }
+  [data-slot='button'][data-variant='ghost']:hover:not(:disabled) {
+    background: var(--zy-conv-h);
+    color: var(--foreground);
+  }
+
+  /* Tarjetas: contenido casi opaco con filo superior luminoso */
+  [data-slot='card'] {
+    border: 1px solid var(--zy-card-bs);
+    border-top-color: var(--zy-card-bt);
+  }
+
+  /* Campos: cristal claro con filo superior */
+  [data-slot='input'],
+  [data-slot='textarea'],
+  [data-slot='select-trigger'] {
+    background-color: var(--zy-field-bg);
+    border-color: var(--zy-field-b);
+    border-top-color: var(--zy-field-bt);
+  }
+
+  /* Capas flotantes: filo de cristal */
+  [data-slot='dialog-content'],
+  [data-slot='popover-content'],
+  [data-slot='dropdown-menu-content'],
+  [data-slot='select-content'] {
+    border: 1px solid var(--zy-glass-bs);
+    border-top-color: var(--zy-glass-bt);
+  }
+
+  /* Etiquetas en píldora */
+  [data-slot='badge'] {
+    border-radius: 9999px;
+  }
+
+  /* Pestañas: píldora de cristal con la activa elevada */
+  [data-slot='tabs-list'] {
+    background: var(--zy-pill);
+    border: 1px solid var(--zy-card-bs);
+    border-radius: 9999px;
+  }
+  [data-slot='tabs-trigger'] {
+    border-radius: 9999px;
+  }
+  [data-slot='tabs-trigger'][data-active] {
+    background: var(--zy-pill-on);
+    box-shadow: 0 1px 6px rgba(28, 48, 100, 0.12);
+  }
+
+  /* Interruptor y progreso: degradado de marca */
+  [data-slot='switch'][data-checked] {
+    background-image: var(--zy-accent-g);
+    background-color: transparent;
+  }
+  [data-slot='progress-indicator'] {
+    background-image: var(--zy-accent-g);
+    background-color: transparent;
+  }
+
+  /* Sidebar: destino activo con tinte y filo, como la conversación activa de zyro */
+  [data-sidebar='menu-button'][data-active='true'] {
+    background: var(--zy-conv-a);
+    box-shadow: inset 0 0 0 1px var(--zy-conv-ab);
+    color: var(--sidebar-accent-foreground);
+  }
+  [data-sidebar='menu-button']:hover:not([data-active='true']) {
+    background: var(--zy-conv-h);
+  }
+}
+
+/* Ajustes de personalidad (vistos en el banco de pruebas) */
+:root {
+  /* Grupos de botones: píldora solo en los extremos, el interior recto */
+  [data-slot='button-group'] [data-slot='button'] {
+    border-radius: 0;
+  }
+  [data-slot='button-group'] [data-slot='button']:first-child {
+    border-start-start-radius: 9999px;
+    border-end-start-radius: 9999px;
+  }
+  [data-slot='button-group'] [data-slot='button']:last-child {
+    border-start-end-radius: 9999px;
+    border-end-end-radius: 9999px;
+  }
+
+  /* Esqueletos: visibles sobre la tarjeta casi blanca */
+  [data-slot='skeleton'] {
+    background: color-mix(in oklch, var(--foreground) 9%, transparent);
+  }
+}
+
+/* Fondo vivo: los degradados derivan despacio (aproximación ligera, sin WebGL de la
+   malla original). `prefers-reduced-motion` ya detiene la animación en la estructura. */
+:root {
+  body {
+    background-size: 160% 160%;
+    animation: zy-drift 40s ease-in-out infinite alternate;
+  }
+}
+@keyframes zy-drift {
+  from {
+    background-position: 0% 0%;
+  }
+  to {
+    background-position: 100% 100%;
+  }
 }

package/dist/themes/zyro.fonts.css

@@ -0,0 +1,2 @@
+/* Fuentes del tema zyro: Montserrat (titulares) + Roboto (cuerpo). Importar el PRIMERO del CSS de la app. */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Roboto:wght@300;400;500;600;700&display=swap');