/* ═══════════════════════════════════════════════════════════════════════ OHXALA RECORDS — Design tokens ohxala-tokens.css · v1.0.0 · 2026-07-23 Alojar em: apps.ohxalarecords.com/assets/ohxala-tokens.css (mesmo subdomínio das apps, para não criar dependência entre hosts) Carregar em TODAS as apps e em qualquer página que hospede os Web Components: ── PORQUE É QUE ESTA É A CAMADA MAIS IMPORTANTE ────────────────────── As cinco apps que são Web Components (drum-box, synth, filter, reverb, delay) têm shadow DOM. Uma folha de estilos externa NÃO lhes chega, é precisamente para isso que o shadow DOM existe. Mas as variáveis CSS atravessam essa fronteira por herança. Portanto este ficheiro é a única peça capaz de unificar ao mesmo tempo as 14 apps normais e os 5 componentes. ── COMO MIGRAR SEM PARTIR NADA ─────────────────────────────────────── Os componentes já definem variáveis próprias (--bg, --border, --dim, --led-on, etc.) dentro do shadow DOM. Não as apagues. Faz com que apontem para estes tokens, com o valor actual como recurso: :host { --bg: var(--ohxala-bg, #0e0e0e); --border: var(--ohxala-border, #2a2a2a); --dim: var(--ohxala-text-dim, #777); } Se a página fornecer o token, ele ganha. Se não fornecer, o componente mantém exactamente o aspecto de hoje. Isto permite migrar um componente de cada vez, e as apps continuam a funcionar se abertas isoladamente. ── NOTA SOBRE UNIFICAÇÃO DE CORES ──────────────────────────────────── O blog usa #0d0d0d como fundo e as apps usam #0e0e0e. A diferença é invisível mas fazia com que um iframe se destacasse ligeiramente do artigo. Adoptei #0d0d0d como valor canónico, igual ao blog, para os embeds ficarem perfeitamente integrados. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Superfícies ───────────────────────────────────────────────────── */ --ohxala-bg: #0d0d0d; /* fundo da página (alinhado com o blog) */ --ohxala-surface: #1a1a1a; /* corpo do painel da app */ --ohxala-surface-2: #141414; /* cabeçalhos, barras internas */ --ohxala-surface-sunk: #111111; /* zonas rebaixadas: canvas, écrans */ --ohxala-surface-deep: #080808; /* o mais fundo: fundo de osciloscópio */ --ohxala-border: #2a2a2a; --ohxala-border-soft: #1e1e1e; /* ── Texto ─────────────────────────────────────────────────────────── */ --ohxala-text: #f0f0f0; --ohxala-text-mid: #aaaaaa; --ohxala-text-dim: #888888; /* era #777 nas apps; subido para contraste */ --ohxala-text-faint: #767676; /* mínimo que ainda passa WCAG AA em #0d0d0d */ /* ── Acentos (código de cores das pedaleiras FX) ───────────────────── */ --ohxala-orange: #f5a623; --ohxala-orange-hi: #ffc04a; --ohxala-orange-dim: #4a2f0c; --ohxala-blue: #42a5f5; --ohxala-blue-hi: #6fbdff; --ohxala-blue-dim: #15334a; --ohxala-green: #4caf50; --ohxala-green-hi: #6fd074; --ohxala-green-dim: #1a3a22; --ohxala-red: #e05a5a; /* LEDs das pedaleiras */ --ohxala-led-on: var(--ohxala-orange); --ohxala-led-off: #3a3a3a; /* ── Tipografia ──────────────────────────────────────────────────────── CORRIGE UM PROBLEMA REAL: as 19 apps tinham 151 declarações de font-size abaixo de 12px, incluindo 17 a 8px ou menos. Isso é ilegível num telemóvel. A escala abaixo põe o mínimo em 11px e só para etiquetas curtas em maiúsculas, que toleram tamanhos menores por terem mais altura-x relativa. Texto corrido nunca desce de 14px. */ --ohxala-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --ohxala-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --ohxala-fs-label: 11px; /* etiquetas em maiúsculas, com letter-spacing */ --ohxala-fs-micro: 12px; /* valores numéricos, legendas */ --ohxala-fs-small: 13px; /* controlos secundários */ --ohxala-fs-body: 14px; /* MÍNIMO para texto corrido */ --ohxala-fs-lead: 15px; /* texto explicativo */ --ohxala-fs-title: 17px; --ohxala-lh-tight: 1.25; --ohxala-lh-body: 1.6; --ohxala-ls-label: 0.12em; /* ── Espaçamento ───────────────────────────────────────────────────── */ --ohxala-sp-1: 4px; --ohxala-sp-2: 8px; --ohxala-sp-3: 12px; --ohxala-sp-4: 16px; --ohxala-sp-5: 20px; --ohxala-sp-6: 24px; /* ── Formas ────────────────────────────────────────────────────────── */ --ohxala-radius: 10px; --ohxala-radius-sm: 6px; --ohxala-radius-pill: 999px; /* ── Alvos de toque ──────────────────────────────────────────────────── 44px é o mínimo recomendado pelas orientações de acessibilidade da Apple e da Google. Vários controlos das apps estão hoje abaixo disto, o que os torna difíceis de acertar num telemóvel. */ --ohxala-touch-min: 44px; --ohxala-touch-comfy: 48px; /* ── Movimento ─────────────────────────────────────────────────────── */ --ohxala-t-fast: .12s ease; --ohxala-t-base: .18s ease; } /* Respeitar quem pediu menos animação ao sistema operativo. */ @media (prefers-reduced-motion: reduce) { :root { --ohxala-t-fast: 0s; --ohxala-t-base: 0s; } } /* ═══════════════════════════════════════════════════════════════════════ MAPA DE MIGRAÇÃO — nomes actuais dentro dos componentes ═══════════════════════════════════════════════════════════════════════ Ao editares cada ohxala-*.js, substitui a definição da variável no :host (não os usos espalhados pelo CSS) por estas linhas: ohxala-drums.js, ohxala-synth.js, ohxala-fx-*.js — comuns: --bg: var(--ohxala-surface, #1a1a1a); --border: var(--ohxala-border, #2a2a2a); --dim: var(--ohxala-text-dim, #888); --panel: var(--ohxala-surface-2, #141414); ohxala-fx-delay.js: --blue: var(--ohxala-blue, #42a5f5); --blue-d: var(--ohxala-blue-dim, #15334a); --led-on: var(--ohxala-led-on, #f5a623); --led-off: var(--ohxala-led-off, #3a3a3a); ohxala-fx-filter.js: --green: var(--ohxala-green, #4caf50); --green-d: var(--ohxala-green-dim, #1a3a22); --led-on / --led-off: iguais ao delay ohxala-fx-reverb.js: --orange: var(--ohxala-orange, #f5a623); --orange-d:var(--ohxala-orange-dim, #4a2f0c); --led-on / --led-off: iguais ao delay ohxala-drums.js: --red: var(--ohxala-red, #e05a5a); --red-hi: var(--ohxala-orange-hi, #ffc04a); --orange: var(--ohxala-orange, #f5a623); ohxala-synth.js (cores semânticas por secção — mantêm-se específicas do componente, mas passam a derivar dos tokens): --c-osc: var(--ohxala-orange, #f5a623); --c-filter: var(--ohxala-blue, #42a5f5); --c-env: var(--ohxala-green, #4caf50); --c-master: var(--ohxala-text-dim, #888); --c-preset: var(--ohxala-orange-dim, #4a2f0c); Cada bloco pode ser feito e publicado isoladamente. Nada depende de nada, porque o valor de recurso preserva sempre o aspecto actual. ═══════════════════════════════════════════════════════════════════════ */