orbital-ds 0.6.2 → 0.7.0

package/dist/themes/twitter.css

@@ -1,290 +1,298 @@
-/*
- * 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 {
-  --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: #007c53;
-  --success-soft: rgba(0, 186, 124, 0.12);
-  --info: #1573b1;
-  --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») ─────────────────────────────────────── */
-.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 {
-  /* 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);
-  }
-}
+/*
+ * 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 {
+  --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;
+
+  /* Lateral: iconos, raíl, logo y separadores (cada tema fija su forma y tamaño) */
+  --ds-sidebar-icon: 1.5rem;
+  --ds-sidebar-icon-stroke: 2;
+  --ds-sidebar-rail-w: 4.5rem;
+  --ds-sidebar-rail-item: 3rem;
+  --ds-sidebar-logo: 2.25rem;
+  --ds-sidebar-sep-inset: 0rem;
+  --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: #e51f2b;
+  --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: #007c53;
+  --success-soft: rgba(0, 186, 124, 0.12);
+  --info: #1573b1;
+  --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») ─────────────────────────────────────── */
+.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: #e51f2b;
+  --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 {
+  /* 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);
+  }
+}