/* * Eclipse UI — voz display * * Fraunces (SIL OFL 1.1, ver app/assets/fonts/eclipse_ui/OFL-Fraunces.txt), * variable con ejes wght, opsz, SOFT y WONK. Alojada en el repo: sin * terceros, sin CSP extra, igual en todos los dispositivos. La cursiva solo * se descarga si una página la usa. */ @font-face { font-family: "Fraunces"; src: url(/assets/eclipse_ui/fraunces-latin-full-normal-7e744849028e2219e2aa1bc467dc4032980dc4487c9c3da3010081cd72d3b103.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url(/assets/eclipse_ui/fraunces-latin-full-italic-04a14ea380db53a35a3ec651934b21061234685bb604d30aac82663b5d9e539b.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } /* Inter (SIL OFL 1.1): la voz de toda la interfaz, en la app y en el * catálogo. Variable en peso y alojada aquí, así se ve igual en cualquier * equipo (antes solo se usaba si la persona la tenía instalada). * JetBrains Mono (SIL OFL 1.1): datos y etiquetas técnicas. Solo se * descarga si una página la usa. */ @font-face { font-family: "Inter"; src: url(/assets/eclipse_ui/inter-latin-wght-normal-3100e775e8616cd2611beecfa23a4263d7037586789b43f035236a2e6fbd4c62.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url(/assets/eclipse_ui/jetbrains-mono-latin-wght-normal-18be452724bfdc236c074ca94a249a7f41a86752c7d04ab258ce9ed5651f6a7e.woff2) format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } /* Las voces de las personalidades (SIL OFL 1.1, licencias junto a cada archivo * en app/assets/fonts/eclipse_ui/). Variables y solo latín (incluye acentos, * ñ, ¿ y ¡). El navegador las descarga solo si una sección las usa: una app * en Eclipse o Carbón nunca las pide. * * Manrope sans geométrica y limpia Brisa (texto y títulos) * Archivo grotesca con eje de ancho (wdth) Umbra (títulos condensados) * Cormorant serif de alto contraste, cursiva Alba (títulos) * Nunito sans de terminales redondas Terra (texto) */ @font-face { font-family: "Manrope"; src: url(/assets/eclipse_ui/manrope-latin-wght-normal-a30ddcd349703aff7464c34bef3fffdff405ee50c113440d7c8693c02d210972.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url(/assets/eclipse_ui/archivo-latin-wdth-wght-normal-e3a28eade21a900c7155a247757f4b2834c07bb7ef07ad7efa55cebaac1e8f5e.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant"; src: url(/assets/eclipse_ui/cormorant-latin-wght-normal-766e1b19fa74895763cef708f4b360b887e5a836725869ca672a0753bf19bd53.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant"; src: url(/assets/eclipse_ui/cormorant-latin-wght-italic-6083e8c70461baccba95129ff8c91624f81b7d29a806a18b5d5916eaa44f03c3.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; } @font-face { font-family: "Nunito"; src: url(/assets/eclipse_ui/nunito-latin-wght-normal-ba344451eab25b217a165363b1982048a5e5830a0daf36577973955a04cac793.woff2) format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; } /* * Eclipse UI — motor de tokens * * La base es la misma; la personalidad la decide cada estudio. Este archivo * NO se edita por cliente: recibe unos pocos DIALES (--eui-*) y deriva todo lo * demás. Cada cliente fija sus diales en theme.css; las personalidades de * partida viven en expressions.css. Guía completa: docs/GUI.md. * * Diales (entrada) Tokens derivados (salida, los que usan las vistas) * --eui-brand ──────────► --color-primary, -hover, -foreground, halo, corona * --eui-ink / --eui-paper ► --color-background/foreground/muted/border/card… * --eui-tint ──────────► cuánto tiñe la marca los grises intermedios * --eui-roundness ───────► --radius-* (los rounded-* de Tailwind lo siguen) * --eui-density ─────────► --eui-control-*, --eui-pad-* * --eui-depth ──────────► --shadow-* * --eui-motion ──────────► --eui-dur-* (0 = sin movimiento) * --eui-halo ──────────► --eui-ring, --eui-corona * --eui-font-* / --eui-display-* ► --font-sans, --font-heading, estilo display * --eui-line ──────────► qué tan marcados son los bordes (1 = base) * --eui-control-radius ──► --radius-button / --radius-field (pastilla, recto…) * --eui-control-case / -tracking / -weight ► la voz de botones (eui-control-voice) * * Los tokens se derivan en `:root` y de nuevo en cada `[data-eui]`, así una * sección (o el taller /ui) puede cambiar de personalidad sin tocar la página. */ /* ── Diales: valores base (personalidad "eclipse") ─────────────────────────── * :where() deja la especificidad en cero: theme.css y cualquier [data-eui] * los sobrescriben sin importar el orden de carga. */ :where(:root) { --eui-brand: #a3946b; --eui-ink: #1a1a18; --eui-paper: #f5f2ec; --eui-tint: 25%; --eui-roundness: 1; --eui-density: 1; --eui-depth: 1; --eui-motion: 1; --eui-halo: 1; /* Carácter de las piezas: con estos valores todo se ve como siempre. */ --eui-line: 1; /* multiplica el paso de los bordes: 0.6 apenas se ven, 1.8 marcados */ --eui-control-case: none; /* uppercase: botones en mayúsculas */ --eui-control-tracking: normal; --eui-control-weight: 500; /* --eui-control-radius (sin valor): botones y campos siguen la escala de * radios; con 9999px son pastilla y con 0 rectos, aunque las tarjetas no. */ --eui-font-text: "Inter", system-ui, -apple-system, sans-serif; --eui-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --eui-display-weight: 500; --eui-display-tracking: -0.02em; --eui-display-leading: 1.05; --eui-display-case: none; --eui-display-stretch: normal; /* ancho del display: 75% condensa (si la fuente tiene eje wdth) */ --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Estados: no salen de la marca para que un rojo siempre lea como error. * El rojo pasa AA como texto chico (errores de campo) sobre el fondo y la * tarjeta de todas las personalidades, en claro y en oscuro. */ --eui-danger: #b04236; --eui-success: #4a7357; /* AA como texto y con papel encima en todas las personalidades */ --eui-warning: #b88a3a; --eui-danger-dark: #e98073; --eui-success-dark: #7aa289; --eui-warning-dark: #d4a864; } /* ── Modo: claro ─────────────────────────────────────────────────────────── * Los pasos (--eui-step-*) dicen cuánto se acerca cada gris a la tinta. En * oscuro se necesitan saltos mayores para la misma separación percibida. */ :root, [data-eui] { --eui-bg: var(--eui-paper); --eui-fg: var(--eui-ink); --eui-step-muted: 6%; --eui-step-line: 15%; --eui-step-soft: 73%; --eui-step-press: 16%; --eui-step-hover: 4%; --eui-step-raised: 4%; --eui-step-line-subtle: 9%; --eui-step-line-strong: 24%; --eui-step-faint: 55%; --eui-step-subtle: 35%; --eui-text-l-lo: 0; --eui-text-l-hi: 0.48; --eui-surface: white; --eui-sidebar: var(--eui-surface); --eui-shadow-color: var(--eui-ink); --eui-shadow-k: 1; --eui-danger-now: var(--eui-danger); --eui-success-now: var(--eui-success); --eui-warning-now: var(--eui-warning); --eui-on-danger: var(--eui-paper); --eui-on-success: var(--eui-paper); } /* ── Modo: oscuro (html.dark, o forzado en una sección) ────────────────── */ /* .dark[data-eui]: la clase y la personalidad en el mismo (shadcn/ui * con next-themes). */ .dark, .dark[data-eui]:not([data-eui-mode="light"]), .dark [data-eui]:not([data-eui-mode="light"]), [data-eui][data-eui-mode="dark"], [data-eui-mode="dark"] [data-eui]:not([data-eui-mode="light"]) { --eui-bg: var(--eui-ink); --eui-fg: var(--eui-paper); --eui-step-muted: 10%; --eui-step-line: 19%; --eui-step-soft: 77%; /* texto secundario AA también sobre tarjeta y fila con hover */ --eui-step-press: 17%; --eui-step-hover: 5%; --eui-step-raised: 4%; --eui-step-line-subtle: 9%; --eui-step-line-strong: 27%; --eui-step-faint: 45%; --eui-step-subtle: 28%; --eui-text-l-lo: 0.78; --eui-text-l-hi: 1; --eui-surface: var(--color-muted); --eui-sidebar: var(--eui-ink); --eui-shadow-color: black; --eui-shadow-k: 7; --eui-danger-now: var(--eui-danger-dark); --eui-success-now: var(--eui-success-dark); --eui-warning-now: var(--eui-warning-dark); --eui-on-danger: var(--eui-ink); --eui-on-success: var(--eui-ink); } /* Claro forzado dentro de una página oscura (el taller compara ambos). */ [data-eui][data-eui-mode="light"], [data-eui-mode="light"] [data-eui]:not([data-eui-mode="dark"]) { --eui-bg: var(--eui-paper); --eui-fg: var(--eui-ink); --eui-step-muted: 6%; --eui-step-line: 15%; --eui-step-soft: 73%; --eui-step-press: 16%; --eui-step-hover: 4%; --eui-step-raised: 4%; --eui-step-line-subtle: 9%; --eui-step-line-strong: 24%; --eui-step-faint: 55%; --eui-step-subtle: 35%; --eui-text-l-lo: 0; --eui-text-l-hi: 0.48; --eui-surface: white; --eui-sidebar: var(--eui-surface); --eui-shadow-color: var(--eui-ink); --eui-shadow-k: 1; --eui-danger-now: var(--eui-danger); --eui-success-now: var(--eui-success); --eui-warning-now: var(--eui-warning); --eui-on-danger: var(--eui-paper); --eui-on-success: var(--eui-paper); } /* Los controles nativos (calendario de un date, lista de un select, barras * de scroll) siguen el modo de la sección. Solo dentro de [data-eui]: en la * app el modo vive en y aún hay campos con fondo claro * fijo que dependen del esquema claro del navegador. */ [data-eui] { color-scheme: light; } .dark[data-eui]:not([data-eui-mode="light"]), .dark [data-eui]:not([data-eui-mode="light"]), [data-eui][data-eui-mode="dark"], [data-eui-mode="dark"] [data-eui]:not([data-eui-mode="light"]) { color-scheme: dark; } [data-eui][data-eui-mode="light"], [data-eui-mode="light"] [data-eui]:not([data-eui-mode="dark"]) { color-scheme: light; } /* ── Derivación ────────────────────────────────────────────────────────── */ :root, [data-eui] { /* La tinta con un poco de la luz de la marca: da temperatura a los grises. */ --eui-fg-tinted: color-mix(in oklab, var(--eui-fg), var(--eui-brand) var(--eui-tint)); /* Superficies y texto */ --color-background: var(--eui-bg); --color-foreground: var(--eui-fg); --color-muted: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-muted), var(--eui-bg)); --color-muted-foreground: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-soft), var(--eui-bg)); --color-border: color-mix(in oklab, var(--eui-fg-tinted) min(100%, calc(var(--eui-step-line) * var(--eui-line))), var(--eui-bg)); --color-secondary: var(--color-muted); --color-secondary-foreground: var(--eui-fg); --color-card: var(--eui-surface); --color-card-foreground: var(--eui-fg); --color-sidebar: var(--eui-sidebar); --color-sidebar-foreground: var(--eui-fg); --color-footer: var(--eui-ink); --color-footer-foreground: var(--eui-paper); /* Escalera de capas: la profundidad sale de apilar * superficies apenas distintas con bordes de 1px, no de sombras. */ --color-surface: var(--color-card); --color-surface-hover: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-hover), var(--color-card)); --color-raised: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-raised), var(--eui-bg)); --color-border-subtle: color-mix(in oklab, var(--eui-fg-tinted) min(100%, calc(var(--eui-step-line-subtle) * var(--eui-line))), var(--eui-bg)); --color-border-hover: color-mix(in oklab, var(--eui-fg-tinted) min(100%, calc(var(--eui-step-line-strong) * var(--eui-line))), var(--eui-bg)); --color-faint: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-faint), var(--eui-bg)); --color-subtle: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-subtle), var(--eui-bg)); --eui-accent-subtle: color-mix(in oklab, var(--eui-fg) 6%, transparent); --eui-spotlight: color-mix(in oklab, var(--eui-fg) 9%, transparent); --shadow-glow: 0 0 20px -3px color-mix(in oklab, var(--color-primary) min(100%, calc(15% * var(--eui-halo))), transparent); --shadow-subtle: 0 1px 2px 0 color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(6% * var(--eui-shadow-a))), transparent), 0 0 0 1px color-mix(in oklab, var(--eui-fg) 4%, transparent); --shadow-elevated: 0 10px 25px -8px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(12% * var(--eui-shadow-a))), transparent), 0 0 0 1px color-mix(in oklab, var(--eui-fg) 5%, transparent); /* Luz: la marca. Se usa poco y para lo que importa. */ --eui-brand-ink-auto: var(--eui-ink); --color-primary: var(--eui-brand); --color-primary-hover: color-mix(in oklab, var(--eui-brand), var(--eui-fg) var(--eui-step-press)); --color-primary-foreground: var(--eui-brand-ink, var(--eui-brand-ink-auto)); /* Texto en color de marca (ligas, etiquetas): la marca acercada a la * tinta hasta leerse bien sobre el fondo. La marca pura es para fondos. */ --eui-brand-text-auto: color-mix(in oklab, var(--eui-brand), var(--eui-fg) 35%); --color-primary-text: var(--eui-brand-text, var(--eui-brand-text-auto)); --color-accent: var(--color-primary); --color-accent-foreground: var(--color-primary-foreground); --eui-brand-wash: color-mix(in oklab, var(--eui-brand) 12%, var(--eui-bg)); /* Estados */ --color-destructive: var(--eui-danger-now); --color-destructive-foreground: var(--eui-on-danger); --color-success: var(--eui-success-now); --color-success-foreground: var(--eui-on-success); --color-warning: var(--eui-warning-now); --color-warning-foreground: var(--eui-ink); /* Forma. Tailwind v4 compila rounded-lg como var(--radius-lg): toda la app * sigue este dial, no solo los componentes. */ --radius-xs: calc(0.125rem * var(--eui-roundness)); --radius-sm: calc(0.375rem * var(--eui-roundness)); --radius-md: calc(0.5rem * var(--eui-roundness)); --radius-lg: calc(0.75rem * var(--eui-roundness)); --radius-xl: calc(1rem * var(--eui-roundness)); --radius-2xl: calc(1.25rem * var(--eui-roundness)); /* paneles y modales: un paso arriba de las tarjetas */ --radius-3xl: calc(1.5rem * var(--eui-roundness)); --radius-4xl: calc(2rem * var(--eui-roundness)); --radius-full: 9999px; /* Controles: botones (md) y campos (lg) por defecto; una personalidad puede * hacerlos pastilla o rectos sin tocar las tarjetas. */ --radius-button: var(--eui-control-radius, var(--radius-md)); --radius-field: var(--eui-control-radius, var(--radius-lg)); /* Densidad: alturas de control y aire interno de los componentes. */ --eui-control-sm: calc(2rem * var(--eui-density)); --eui-control-md: calc(2.5rem * var(--eui-density)); --eui-control-lg: calc(3rem * var(--eui-density)); --eui-pad-sm: calc(0.75rem * var(--eui-density)); --eui-pad-md: calc(1rem * var(--eui-density)); --eui-pad-lg: calc(1.5rem * var(--eui-density)); --eui-gap: calc(1rem * var(--eui-density)); /* Profundidad: sombras teñidas de tinta, nunca negro puro en claro. */ --eui-shadow-a: calc(var(--eui-depth) * var(--eui-shadow-k)); --shadow-sm: 0 1px 2px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(5% * var(--eui-shadow-a))), transparent); --shadow-md: 0 4px 6px -1px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(7% * var(--eui-shadow-a))), transparent), 0 2px 4px -2px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(5% * var(--eui-shadow-a))), transparent); --shadow-lg: 0 10px 15px -3px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(8% * var(--eui-shadow-a))), transparent), 0 4px 6px -4px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(5% * var(--eui-shadow-a))), transparent); --shadow-xl: 0 20px 25px -5px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(10% * var(--eui-shadow-a))), transparent), 0 8px 10px -6px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(10% * var(--eui-shadow-a))), transparent); /* Halo: el foco y el énfasis son una corona de luz, no un contorno duro. */ --eui-ring: 0 0 0 2px var(--eui-bg), /* Opaco y con el texto de marca (AA contra el fondo): el anillo pasa 3:1. */ 0 0 0 4px var(--eui-focus, var(--color-primary-text)), 0 0 calc(18px * var(--eui-halo)) calc(3px * var(--eui-halo)) color-mix(in oklab, var(--eui-brand) min(100%, calc(30% * var(--eui-halo))), transparent); --eui-corona: 0 0 0 1px color-mix(in oklab, var(--eui-brand) 35%, transparent), 0 10px 32px -8px color-mix(in oklab, var(--eui-brand) min(100%, calc(55% * var(--eui-halo))), transparent); /* Movimiento: respiración. Entra exhalando, sale inhalando. */ --eui-motion-ok: 1; --eui-m: calc(var(--eui-motion) * var(--eui-motion-ok)); --eui-dur-instant: calc(90ms * var(--eui-m)); --eui-dur-quick: calc(160ms * var(--eui-m)); --eui-dur-calm: calc(280ms * var(--eui-m)); --eui-dur-breath: calc(560ms * var(--eui-m)); --eui-dur-tide: calc(1400ms * var(--eui-m)); --eui-ease-exhale: cubic-bezier(0.22, 1, 0.36, 1); --eui-ease-inhale: cubic-bezier(0.64, 0, 0.78, 0); --eui-ease-breath: cubic-bezier(0.45, 0, 0.55, 1); --eui-ease-settle: linear(0, 0.24 8%, 0.62 18%, 0.9 29%, 1.04 41%, 1.06 50%, 1.02 63%, 0.995 78%, 1); --eui-press-scale: calc(1 - 0.03 * min(1, var(--eui-m))); /* Tipografía */ --font-sans: var(--eui-font-text); --font-heading: var(--eui-font-display); --font-mono: var(--eui-font-mono); --eui-soft: var(--eui-display-soft, min(100, calc(50 * var(--eui-roundness)))); --eui-wonk: var(--eui-display-wonk, 0); } /* Contraste automático del texto sobre la marca (oscuro sobre luz clara, * claro sobre luz oscura). Una personalidad puede fijarlo con --eui-brand-ink. */ @supports (color: oklch(from red l c h)) { :root, [data-eui] { --eui-brand-ink-auto: oklch(from var(--eui-brand) clamp(0.2, (0.57 - l) * 999, 0.985) calc(c * 0.15) h); --eui-brand-text-auto: oklch(from var(--eui-brand) clamp(var(--eui-text-l-lo), l, var(--eui-text-l-hi)) c h); /* El hover se aleja del texto que lleva encima: aclara la marca si el * texto es oscuro y la oscurece si es claro (antes bajaba de AA). */ --color-primary-hover: oklch(from var(--eui-brand) calc(l + 0.07 * clamp(-1, (l - 0.57) * 999, 1)) c h); } } @media (prefers-reduced-motion: reduce) { :root, [data-eui] { --eui-motion-ok: 0; } } /* * Eclipse UI — personalidades * * Personalidades de partida (en el código se llaman expresiones: data-eui, * Ui::Expressions). Cada bloque es un punto de partida para un estudio: * /ui/personalidades lo muestra sobre una página de estudio * y lo copia para theme.css (con :root en lugar de [data-eui=""]). * También sirve en una sección con data-eui="". * * Cada una cambia más que el color: su voz (familias, peso, mayúsculas, * ancho), su forma (redondez, controles en pastilla o rectos, qué tan * marcados son los bordes), su aire (densidad, sombra) y su ritmo * (movimiento). Los metadatos (para quién, rasgos) viven en * app/components/ui/expressions.rb. * * carbon el catálogo: monocromo y técnica (abajo, valores fijos) * eclipse la base: oro cálido, editorial y tranquilo * alba spa, barre: malva, Cormorant en cursiva, pastillas, muy lenta * brisa pilates clínico, fisio: Manrope, bordes finos, sin sombras * umbra box, HIIT, cycling: Archivo condensada en mayúsculas, recta * terra yoga: terracota, Nunito y Fraunces suave, fondos teñidos * * Cada bloque fija TODOS sus diales (también los que deja en su valor base) * para no heredar los de una sección de otra personalidad que lo contenga. */ [data-eui="eclipse"] { --eui-focus: initial; --eui-moon: initial; --eui-brand: #a3946b; --eui-ink: #1a1a18; --eui-paper: #f5f2ec; --eui-tint: 25%; --eui-roundness: 1; --eui-density: 1; --eui-depth: 1; --eui-motion: 1; --eui-halo: 1; --eui-line: 1; --eui-control-radius: initial; --eui-control-case: none; --eui-control-tracking: normal; --eui-control-weight: 500; --eui-font-text: "Inter", system-ui, -apple-system, sans-serif; --eui-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --eui-display-weight: 500; --eui-display-tracking: -0.02em; --eui-display-leading: 1.05; --eui-display-style: normal; --eui-display-case: none; --eui-display-stretch: normal; --eui-display-soft: initial; --eui-display-wonk: initial; } /* Alba: un spa al amanecer. Habla bajito: serif de alto contraste en * cursiva, todo en pastilla, bordes que casi no se ven y mucho aire. */ [data-eui="alba"] { --eui-focus: initial; --eui-moon: initial; --eui-brand: #96527a; --eui-ink: #2a1d24; --eui-paper: #faf3f2; --eui-tint: 30%; --eui-roundness: 1.75; --eui-density: 1.1; --eui-depth: 0.7; --eui-motion: 1.35; --eui-halo: 1.6; --eui-line: 0.6; --eui-control-radius: 9999px; --eui-control-case: none; --eui-control-tracking: 0.01em; --eui-control-weight: 500; --eui-font-text: "Inter", system-ui, -apple-system, sans-serif; --eui-font-display: "Cormorant", "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --eui-display-weight: 500; --eui-display-tracking: -0.005em; --eui-display-leading: 1; --eui-display-style: italic; --eui-display-case: none; --eui-display-stretch: normal; --eui-display-soft: initial; --eui-display-wonk: initial; } /* Brisa: un consultorio luminoso. Precisa y fresca: Manrope en todo, * radios chicos, bordes finos, sin sombras y un movimiento que no rebota. */ [data-eui="brisa"] { --eui-focus: initial; --eui-moon: initial; --eui-brand: #2f7d6d; --eui-ink: #0e1b19; --eui-paper: #f4f7f6; --eui-tint: 12%; --eui-roundness: 0.5; --eui-density: 0.94; --eui-depth: 0.35; --eui-motion: 0.8; --eui-halo: 0.6; --eui-line: 0.85; --eui-control-radius: initial; --eui-control-case: none; --eui-control-tracking: -0.005em; --eui-control-weight: 600; --eui-font-text: "Manrope", system-ui, -apple-system, sans-serif; --eui-font-display: "Manrope", system-ui, -apple-system, sans-serif; --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --eui-display-weight: 700; --eui-display-tracking: -0.04em; --eui-display-leading: 1.02; --eui-display-style: normal; --eui-display-case: none; --eui-display-stretch: normal; --eui-display-soft: initial; --eui-display-wonk: initial; } /* Umbra: un box a media luz. Grita: Archivo condensada en mayúsculas, * todo recto, bordes marcados, botones en mayúsculas espaciadas y rápida. * Su modo natural es el oscuro. */ [data-eui="umbra"] { --eui-focus: initial; --eui-moon: initial; --eui-brand: #f2542d; --eui-ink: #0c0c0d; --eui-paper: #f0efeb; --eui-tint: 0%; --eui-roundness: 0; --eui-density: 0.92; --eui-depth: 1.4; --eui-motion: 0.7; --eui-halo: 1.2; --eui-line: 1.8; --eui-control-radius: 0; --eui-control-case: uppercase; --eui-control-tracking: 0.08em; --eui-control-weight: 700; --eui-font-text: "Inter", system-ui, -apple-system, sans-serif; --eui-font-display: "Archivo", "Arial Narrow", system-ui, sans-serif; --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --eui-display-weight: 800; --eui-display-tracking: -0.005em; --eui-display-leading: 0.92; --eui-display-style: normal; --eui-display-case: uppercase; --eui-display-stretch: 70%; --eui-display-soft: initial; --eui-display-wonk: initial; } /* Terra: un shala de comunidad. Cálida y redonda: Nunito para leer, * Fraunces suave para los títulos y la terracota tiñendo los grises. */ [data-eui="terra"] { --eui-focus: initial; --eui-moon: initial; --eui-brand: #a95a36; --eui-ink: #261a12; --eui-paper: #f6ede2; --eui-tint: 30%; --eui-roundness: 1.4; --eui-density: 1.05; --eui-depth: 0.9; --eui-motion: 1.15; --eui-halo: 1; --eui-line: 1.1; --eui-control-radius: initial; --eui-control-case: none; --eui-control-tracking: normal; --eui-control-weight: 700; --eui-font-text: "Nunito", system-ui, -apple-system, sans-serif; --eui-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --eui-display-weight: 600; --eui-display-tracking: -0.015em; --eui-display-leading: 1.05; --eui-display-style: normal; --eui-display-case: none; --eui-display-stretch: normal; --eui-display-soft: 100; --eui-display-wonk: 1; } /* ── carbon: la personalidad del catálogo ─────────────────────────────── * Monocromo: la "luz" es la propia tinta (negra en claro, casi blanca en * oscuro); el único color es el azul del foco. Profundidad por capas de * superficie y bordes de 1px. Inter + JetBrains Mono. Es la personalidad del * catálogo /ui. * Valores fijados a mano (no derivados): grises neutros exactos. */ [data-eui="carbon"], [data-eui="carbon"][data-eui-mode="light"], [data-eui-mode="light"] [data-eui="carbon"]:not([data-eui-mode="dark"]) { --eui-brand: #0a0a0a; --eui-ink: #0a0a0a; --eui-paper: #fafafa; --eui-tint: 0%; --eui-roundness: 1.25; --eui-density: 1; --eui-depth: 1; --eui-motion: 1; --eui-halo: 0.5; --eui-line: 1; --eui-control-radius: initial; --eui-control-case: none; --eui-control-tracking: normal; --eui-control-weight: 500; --eui-display-stretch: normal; --eui-display-soft: initial; --eui-display-wonk: initial; /* El azul del foco, opaco en claro: translúcido no llega a 3:1. */ --eui-focus: #0284c7; --eui-font-text: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --eui-font-display: var(--eui-font-text); --eui-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --eui-display-weight: 600; --eui-display-tracking: -0.035em; --eui-display-style: normal; --eui-display-case: none; --eui-bg: #fafafa; --eui-fg: #0a0a0a; --color-card: #ffffff; --color-surface-hover: #f4f4f5; --color-raised: #f1f1f2; --color-muted: #f4f4f5; --color-border: #e4e4e7; --color-border-hover: #d4d4d8; --color-border-subtle: #ededef; --color-muted-foreground: #52525b; --color-faint: #71717a; --color-subtle: #a1a1aa; --color-primary: #0a0a0a; --color-primary-hover: #262626; --color-primary-foreground: #fafafa; --color-primary-text: #0a0a0a; /* El sol del medidor es negro en claro: la luna tiene que ser clara. */ --eui-moon: #dcdce0; --eui-accent-subtle: rgb(10 10 10 / 0.05); --eui-spotlight: rgb(10 10 10 / 0.05); --shadow-glow: 0 0 15px -3px rgb(15 15 20 / 0.08); --shadow-subtle: 0 1px 2px 0 rgb(15 15 20 / 0.06), 0 0 0 1px rgb(15 15 20 / 0.04); --shadow-elevated: 0 10px 25px -8px rgb(15 15 20 / 0.12), 0 0 0 1px rgb(15 15 20 / 0.05); } .dark [data-eui="carbon"]:not([data-eui-mode="light"]), .dark[data-eui="carbon"]:not([data-eui-mode="light"]), [data-eui="carbon"][data-eui-mode="dark"], [data-eui-mode="dark"] [data-eui="carbon"]:not([data-eui-mode="light"]) { --eui-brand: #f2f2f3; --eui-focus: rgb(56 189 248 / 0.55); --eui-bg: #111113; --eui-fg: #f2f2f3; --color-card: #1c1c1f; --color-surface-hover: #202023; --color-raised: #18181a; --color-muted: #202023; --color-border: #29292c; --color-border-hover: #343438; --color-border-subtle: #18181a; --color-muted-foreground: #a1a1a6; --color-faint: #6f6f75; --color-subtle: #4d4d52; --color-primary: #f2f2f3; --color-primary-hover: #ffffff; --color-primary-foreground: #111113; --color-primary-text: #f2f2f3; --eui-moon: initial; --eui-accent-subtle: rgb(242 242 243 / 0.06); --eui-spotlight: rgb(242 242 243 / 0.07); --shadow-glow: 0 0 20px -3px rgb(255 255 255 / 0.15); --shadow-subtle: 0 1px 2px 0 rgb(0 0 0 / 0.18), 0 0 0 1px rgb(242 242 243 / 0.02); --shadow-elevated: 0 10px 25px -8px rgb(0 0 0 / 0.22), 0 0 0 1px rgb(242 242 243 / 0.04); } /* Claro forzado dentro de un ancestro oscuro: gana sobre el bloque de arriba. */ [data-eui="carbon"][data-eui-mode="light"], [data-eui-mode="light"] [data-eui="carbon"]:not([data-eui-mode="dark"]) { --eui-brand: #0a0a0a; --eui-focus: #0284c7; --eui-bg: #fafafa; --eui-fg: #0a0a0a; --color-card: #ffffff; --color-surface-hover: #f4f4f5; --color-raised: #f1f1f2; --color-muted: #f4f4f5; --color-border: #e4e4e7; --color-border-hover: #d4d4d8; --color-border-subtle: #ededef; --color-muted-foreground: #52525b; --color-faint: #71717a; --color-subtle: #a1a1aa; --color-primary: #0a0a0a; --color-primary-hover: #262626; --color-primary-foreground: #fafafa; --color-primary-text: #0a0a0a; /* El sol del medidor es negro en claro: la luna tiene que ser clara. */ --eui-moon: #dcdce0; --eui-accent-subtle: rgb(10 10 10 / 0.05); --eui-spotlight: rgb(10 10 10 / 0.05); --shadow-glow: 0 0 15px -3px rgb(15 15 20 / 0.08); --shadow-subtle: 0 1px 2px 0 rgb(15 15 20 / 0.06), 0 0 0 1px rgb(15 15 20 / 0.04); --shadow-elevated: 0 10px 25px -8px rgb(15 15 20 / 0.12), 0 0 0 1px rgb(15 15 20 / 0.05); } /* * La personalidad de la app de prueba de la gema (en cada app, la suya). * * Eclipse UI es una base común; la personalidad (voz, forma, color, aire y * ritmo) la decide cada estudio aquí, con diales (docs/GUI.md). El motor * (eclipse_ui/tokens.css) deriva la paleta, las sombras, los radios, el halo * y el movimiento. Para partir de una personalidad de partida, cópiala en * /ui/personalidades (solo en desarrollo) con "Copiar para theme.css". * * Si hace falta, cualquier token derivado se puede fijar aquí mismo * (p. ej. --color-border: #ddd); gana sobre el motor. * * Esta base parte de Carbón: Inter para todo, monocromo, bordes de 1px. * bin/setup_client escribe el --eui-brand del cliente. */ :root { --eui-brand: #0a0a0a; --eui-ink: #0a0a0a; --eui-paper: #fafafa; --eui-tint: 0%; --eui-roundness: 1.25; --eui-density: 1; --eui-depth: 1; --eui-motion: 1; --eui-halo: 0.5; --eui-line: 1; --eui-control-radius: initial; --eui-control-case: none; --eui-control-tracking: normal; --eui-control-weight: 500; --eui-display-stretch: normal; --eui-display-soft: initial; --eui-display-wonk: initial; --eui-focus: #0284c7; --eui-font-text: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --eui-font-display: var(--eui-font-text); --eui-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --eui-display-weight: 600; --eui-display-tracking: -0.035em; --eui-display-style: normal; --eui-display-case: none; --eui-bg: #fafafa; --eui-fg: #0a0a0a; --color-card: #ffffff; --color-surface-hover: #f4f4f5; --color-raised: #f1f1f2; --color-muted: #f4f4f5; --color-border: #e4e4e7; --color-border-hover: #d4d4d8; --color-border-subtle: #ededef; --color-muted-foreground: #52525b; --color-faint: #71717a; --color-subtle: #a1a1aa; --color-primary: #0a0a0a; --color-primary-hover: #262626; --color-primary-foreground: #fafafa; --color-primary-text: #0a0a0a; --eui-moon: #dcdce0; --eui-accent-subtle: rgb(10 10 10 / 0.05); --eui-spotlight: rgb(10 10 10 / 0.05); --shadow-glow: 0 0 15px -3px rgb(15 15 20 / 0.08); --shadow-subtle: 0 1px 2px 0 rgb(15 15 20 / 0.06), 0 0 0 1px rgb(15 15 20 / 0.04); --shadow-elevated: 0 10px 25px -8px rgb(15 15 20 / 0.12), 0 0 0 1px rgb(15 15 20 / 0.05); } .dark { --eui-brand: #f2f2f3; --eui-focus: rgb(56 189 248 / 0.55); --eui-bg: #111113; --eui-fg: #f2f2f3; --color-card: #1c1c1f; --color-surface-hover: #202023; --color-raised: #18181a; --color-muted: #202023; --color-border: #29292c; --color-border-hover: #343438; --color-border-subtle: #18181a; --color-muted-foreground: #a1a1a6; --color-faint: #6f6f75; --color-subtle: #4d4d52; --color-primary: #f2f2f3; --color-primary-hover: #ffffff; --color-primary-foreground: #111113; --color-primary-text: #f2f2f3; --eui-moon: initial; --eui-accent-subtle: rgb(242 242 243 / 0.06); --eui-spotlight: rgb(242 242 243 / 0.07); --shadow-glow: 0 0 20px -3px rgb(255 255 255 / 0.15); --shadow-subtle: 0 1px 2px 0 rgb(0 0 0 / 0.18), 0 0 0 1px rgb(242 242 243 / 0.02); --shadow-elevated: 0 10px 25px -8px rgb(0 0 0 / 0.22), 0 0 0 1px rgb(242 242 243 / 0.04); } /* * Como en cualquier app que usa Eclipse UI: primero el motor de tokens, * luego las personalidades y al final theme.css (los diales de la app). * */