/* ==========================================================================
CLOCKREX - DESIGN SYSTEM - TOKENS v0.1 (rascunho)
(produto de escritorio virtual; nome de trabalho anterior: Escritorio Virtual)
--------------------------------------------------------------------------
Fonte UNICA dos tokens. O showcase.html copia estes valores para poder
rodar isolado; se divergir, vale ESTE arquivo.
Referencia visual: ro.am (tema escuro, tiles planos, presenca ao vivo).
Tema padrao ....... ESCURO (sem atributo, ou )
Tema claro ........
Marca por tenant .. o servidor injeta --brand e --on-brand (secao 5)
DevExpress 26.1 ... ponte na secao 6 (tema Fluent)
Guia completo ..... DESIGN-SYSTEM.md (mesma pasta)
========================================================================== */
/* 1. PRIMITIVOS ------------------------------------------------------------
Valores crus. Componentes NAO usam primitivo direto: usam os semanticos
da secao 2, que trocam por tema. */
:root {
/* Neutros com vies violeta. As tres ancoras escuras foram medidas no
ro.am: #0C0C0E (fundo), #141315 (janela), #1E1D20 (tile). */
--n-0: #FFFFFF;
--n-25: #F7F6F9;
--n-50: #F4F3F6;
--n-75: #ECEAF0;
--n-100: #E6E4EA;
--n-150: #DCDAE1;
--n-200: #D1CFD7;
--n-300: #B8B6C0;
--n-400: #9E9CA6;
--n-500: #84828C;
--n-600: #6A6872;
--n-650: #5F5C66;
--n-700: #48464F;
--n-750: #35333A;
--n-800: #29272B;
--n-850: #242327;
--n-900: #1E1D20;
--n-925: #17161A;
--n-950: #141315;
--n-1000: #0C0C0E;
/* Violeta: cor padrao do produto enquanto nao ha marca definida.
Provisoria - o tenant troca via --brand. */
--violet-300: #B4A9FF;
--violet-400: #9D90FF;
--violet-500: #6B55F0;
--violet-600: #5D47E6;
--violet-700: #5039D6;
--violet-800: #5B45E0;
/* Presenca: 400 = tema escuro, 600 = tema claro (contraste >= 3:1
como grafico sobre o tile de cada tema). */
--green-400: #3DD68C; --green-600: #12A160;
--amber-400: #F2B544; --amber-600: #C47F0A;
--red-400: #FF6166; --red-600: #DC3139;
--gray-400: #8A8791; --gray-600: #86838E;
--blue-400: #5EA2FF; --blue-600: #2C6FD6;
/* Tipografia ---------------------------------------------------------- */
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: "Michroma", "Inter", system-ui, sans-serif; /* so 400; sempre caixa alta */
--font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
/* Escala (px no comentario). Uso: font: var(--type-body); */
--type-caption: 500 0.6875rem/1rem var(--font-sans); /* 11/16 rotulo caixa alta, +0.06em */
--type-meta: 400 0.75rem/1rem var(--font-sans); /* 12/16 hora, contagem, ajuda */
--type-label: 500 0.8125rem/1.125rem var(--font-sans); /* 13/18 nome no tile, botao denso */
--type-body: 400 0.875rem/1.25rem var(--font-sans); /* 14/20 texto padrao do app */
--type-body-strong: 600 0.875rem/1.25rem var(--font-sans); /* 14/20 enfase, botao */
--type-subtitle: 600 1rem/1.5rem var(--font-sans); /* 16/24 titulo de painel */
--type-title: 600 1.25rem/1.75rem var(--font-sans); /* 20/28 titulo de tela -0.01em */
--type-headline: 600 1.5rem/2rem var(--font-sans); /* 24/32 titulo grande -0.015em */
--type-display: 400 1.25rem/1.75rem var(--font-display); /* 20/28 marca, auth, vazio +0.04em */
--type-overline: 400 0.6875rem/1rem var(--font-display); /* 11/16 rotulo de secao +0.12em */
--tracking-tight: -0.015em;
--tracking-snug: -0.01em;
--tracking-caption: 0.06em;
--tracking-display: 0.04em;
--tracking-overline: 0.12em;
/* Espaco (base 4, nomes = px) ------------------------------------------ */
--space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px;
--space-10: 10px; --space-12: 12px; --space-16: 16px; --space-20: 20px;
--space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px;
--space-64: 64px;
/* Raio (ro.am: 10px interno / 12px tile / 50% avatar) ------------------ */
--radius-xs: 4px; /* chip pequeno, badge de contagem */
--radius-sm: 6px; /* tooltip, tag */
--radius-md: 8px; /* botao, input, item de menu */
--radius-lg: 10px; /* area interna do tile */
--radius-xl: 12px; /* tile de sala, card */
--radius-2xl: 16px; /* painel, modal, popover grande */
--radius-3xl: 20px; /* janela do app, dock */
--radius-full: 999px; /* pilula, avatar */
/* Tamanhos --------------------------------------------------------------- */
--control-sm: 28px; --control-md: 32px; --control-lg: 40px;
--dock-button: 40px;
--topbar-h: 52px; --dock-h: 64px;
--tile-min-w: 124px; --tile-h: 84px; --tile-gap: 8px; /* medidos no ro.am */
--avatar-xs: 20px; --avatar-sm: 24px; --avatar-md: 32px;
--avatar-lg: 40px; --avatar-xl: 56px; --avatar-2xl: 96px;
--status-dot: 12px; /* no avatar de 40px; escala 0.3x o avatar */
/* Borda e anel ---------------------------------------------------------- */
--border-width: 1px;
--ring-width: 2px;
--ring-offset: 2px;
/* Movimento ------------------------------------------------------------- */
--dur-instant: 80ms; /* feedback de clique, toggle */
--dur-fast: 140ms; /* hover, cor, opacidade */
--dur-base: 200ms; /* abrir menu, toast entrar */
--dur-slow: 320ms; /* modal, painel lateral */
--dur-move: 480ms; /* avatar trocando de sala (FLIP) */
--dur-speak: 1400ms; /* ciclo do halo de fala (loop) */
--dur-reaction: 2400ms; /* emoji subindo e sumindo */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-enter: cubic-bezier(0, 0, 0.2, 1);
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* so reacoes e chegada de avatar */
/* Camadas --------------------------------------------------------------- */
--z-tile: 1; --z-sticky: 10; --z-dock: 20; --z-dropdown: 30;
--z-toast: 40; --z-modal: 50; --z-tooltip: 60;
}
/* 2. SEMANTICOS - TEMA ESCURO (PADRAO) ------------------------------------ */
:root,
:root[data-theme="dark"] {
color-scheme: dark;
/* Superficies, da mais funda para a mais alta */
--bg-app: var(--n-1000); /* fundo da aplicacao */
--bg-floor: var(--n-950); /* area do mapa, janelas, sidebar */
--surface-1: var(--n-900); /* tile de sala, card, bolha de outro */
--surface-2: var(--n-850); /* hover de tile, input, linha ativa */
--surface-3: var(--n-800); /* menu, dropdown, popover, toast */
--surface-inverse: #F2F1F2;
--overlay: rgba(6, 6, 8, 0.72);
/* Texto (contraste medido sobre --surface-1) */
--text-strong: #FFFFFF;
--text-1: #F2F1F2; /* 14.9:1 */
--text-2: #9A98A1; /* 5.9:1 secundario, placeholder */
--text-3: #6E6C75; /* 3.2:1 SO desabilitado */
--text-on-inverse: var(--n-1000);
/* Bordas */
--border-subtle: rgba(255, 255, 255, 0.06);
--border-default: rgba(255, 255, 255, 0.10); /* valor do ro.am */
--border-strong: rgba(255, 255, 255, 0.22);
--border-control: rgba(255, 255, 255, 0.36); /* limite de input: >= 3:1 */
--focus-ring: #FFFFFF; /* ro.am usa foco branco */
/* Marca (troca por tenant - secao 5) */
--brand: var(--violet-500);
--on-brand: #FFFFFF;
--brand-hover: color-mix(in oklab, var(--brand), #000 10%);
--brand-press: color-mix(in oklab, var(--brand), #000 20%);
--brand-text: color-mix(in oklab, var(--brand), #fff 38%);
--brand-tint: color-mix(in srgb, var(--brand) 16%, transparent);
--brand-glow: color-mix(in srgb, var(--brand) 45%, transparent);
/* Presenca (usar SOMENTE para presenca; nunca para acao ou marca) */
--status-available: var(--green-400);
--status-meeting: var(--amber-400);
--status-dnd: var(--red-400);
--status-away: var(--gray-400);
--voice: #FFFFFF; /* anel de quem esta falando */
--voice-halo: rgba(255, 255, 255, 0.30);
/* Feedback (mesmos matizes da presenca, papeis diferentes) */
--success: var(--green-400);
--warning: var(--amber-400);
--danger: var(--red-400);
--danger-fill: #D6383E; /* botao Sair/Excluir: branco 4.7:1 */
--info: var(--blue-400);
--success-text: var(--green-400); /* texto de feedback (>= 4.5:1) */
--warning-text: var(--amber-400);
--danger-text: var(--red-400);
/* Elevacao. --shadow-1 e o valor medido no tile do ro.am. */
--shadow-1: 0 1px 1px rgba(0, 0, 0, 0.20), 0 1px 2px 1px rgba(0, 0, 0, 0.10);
--shadow-2: 0 10px 28px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border-default);
--shadow-3: 0 28px 72px -16px rgba(0, 0, 0, 0.70), 0 0 0 1px var(--border-default);
}
/* 3. SEMANTICOS - TEMA CLARO ---------------------------------------------
Nao e inversao: o chao fica levemente acinzentado (#F4F3F6) para o tile
branco se destacar sem sombra pesada; bordas carregam a separacao. */
:root[data-theme="light"] {
color-scheme: light;
--bg-app: var(--n-50);
--bg-floor: var(--n-75);
--surface-1: var(--n-0);
--surface-2: var(--n-25);
--surface-3: var(--n-0);
--surface-inverse: var(--n-925);
--overlay: rgba(20, 18, 30, 0.44);
--text-strong: var(--n-1000);
--text-1: var(--n-925); /* 17.9:1 */
--text-2: var(--n-650); /* 6.5:1 */
--text-3: #A09EA7; /* SO desabilitado */
--text-on-inverse: #FFFFFF;
--border-subtle: rgba(23, 20, 40, 0.06);
--border-default: rgba(23, 20, 40, 0.10);
--border-strong: rgba(23, 20, 40, 0.18);
--border-control: rgba(23, 20, 40, 0.50);
--focus-ring: var(--n-925);
--brand-hover: color-mix(in oklab, var(--brand), #000 10%);
--brand-press: color-mix(in oklab, var(--brand), #000 20%);
--brand-text: color-mix(in oklab, var(--brand), #000 8%);
--brand-tint: color-mix(in srgb, var(--brand) 10%, transparent);
--brand-glow: color-mix(in srgb, var(--brand) 32%, transparent);
--status-available: var(--green-600);
--status-meeting: var(--amber-600);
--status-dnd: var(--red-600);
--status-away: var(--gray-600);
--voice: var(--n-925);
--voice-halo: rgba(23, 22, 26, 0.22);
--success: var(--green-600);
--warning: var(--amber-600);
--danger: var(--red-600);
--danger-fill: var(--red-600);
--info: var(--blue-600);
/* No claro, verde/ambar 600 so passam como grafico (3:1); texto usa estes */
--success-text: #0B7A47; /* 5.4:1 no branco */
--warning-text: #8F5A00; /* 5.7:1 */
--danger-text: #C0262E; /* 5.9:1 */
--shadow-1: 0 1px 2px rgba(23, 20, 40, 0.06), 0 0 0 1px var(--border-default);
--shadow-2: 0 12px 32px -10px rgba(23, 20, 40, 0.22), 0 0 0 1px var(--border-default);
--shadow-3: 0 32px 80px -20px rgba(23, 20, 40, 0.32), 0 0 0 1px var(--border-default);
}
/* 4. MOVIMENTO REDUZIDO ----------------------------------------------------
Deslocamento, loop e salto viram zero. Fades curtos continuam (cor e
opacidade nao causam desconforto vestibular). O componente troca a
animacao pelo equivalente estatico - ver "Movimento" no guia. */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-move: 0ms;
--dur-speak: 0ms;
--dur-reaction: 0ms;
--dur-slow: 120ms;
--ease-spring: var(--ease-standard);
}
}
/* 5. MARCA POR TENANT ------------------------------------------------------
O layout Blazor injeta, DEPOIS deste arquivo, um bloco gerado a partir do
branding do tenant (cor validada no servidor - ver guia, secao Tenant):
--on-brand (preto ou branco) e calculado NO SERVIDOR pelo maior contraste;
CSS nao tem como escolher sozinho de forma confiavel.
Todos os derivados (--brand-hover, --brand-tint, acento DevExpress...)
recalculam sozinhos via color-mix. */
/* 6. PONTE DEVEXPRESS BLAZOR 26.1 - TEMA FLUENT ---------------------------
Nomes conferidos no pacote devexpress.blazor.themes.fluent 26.1.4:
- accents/*.min.css le --dxbl-accent-color-10..170 (com fallback)
- modes/dark e modes/light derivam superficie/texto/borda da escala
--dxds-neutral-10..250 (ex.: escuro usa 230 no fundo, 10 no texto;
claro usa 10 no fundo, 250 no texto)
- core usa --dxds-font-family-sans-serif
Seletor :root:root vence o :root do tema sem depender da ordem dos
. Conferir visualmente ao aplicar (grid, popup, editores). */
:root:root {
--dxds-font-family-sans-serif: var(--font-sans);
/* Acento = escala da marca. 90 = cor cheia (Fluent usa primary-90 como
superficie primaria nos dois modos). */
--dxbl-accent-color-10: color-mix(in oklab, var(--brand), #fff 92%);
--dxbl-accent-color-20: color-mix(in oklab, var(--brand), #fff 84%);
--dxbl-accent-color-30: color-mix(in oklab, var(--brand), #fff 72%);
--dxbl-accent-color-40: color-mix(in oklab, var(--brand), #fff 60%);
--dxbl-accent-color-50: color-mix(in oklab, var(--brand), #fff 48%);
--dxbl-accent-color-60: color-mix(in oklab, var(--brand), #fff 36%);
--dxbl-accent-color-70: color-mix(in oklab, var(--brand), #fff 24%);
--dxbl-accent-color-80: color-mix(in oklab, var(--brand), #fff 12%);
--dxbl-accent-color-90: var(--brand);
--dxbl-accent-color-100: color-mix(in oklab, var(--brand), #000 8%);
--dxbl-accent-color-110: color-mix(in oklab, var(--brand), #000 16%);
--dxbl-accent-color-120: color-mix(in oklab, var(--brand), #000 26%);
--dxbl-accent-color-130: color-mix(in oklab, var(--brand), #000 36%);
--dxbl-accent-color-140: color-mix(in oklab, var(--brand), #000 46%);
--dxbl-accent-color-150: color-mix(in oklab, var(--brand), #000 56%);
--dxbl-accent-color-160: color-mix(in oklab, var(--brand), #000 66%);
--dxbl-accent-color-170: color-mix(in oklab, var(--brand), #000 76%);
/* Neutros do produto na escala do Fluent (mesma escala nos dois modos;
o modo escolhe o degrau). 230/240/250 = tile/janela/fundo do ro.am. */
--dxds-neutral-10: #FFFFFF;
--dxds-neutral-20: #F7F6F9;
--dxds-neutral-30: #EFEEF2;
--dxds-neutral-40: #E6E4EA;
--dxds-neutral-50: #DCDAE1;
--dxds-neutral-60: #D1CFD7;
--dxds-neutral-70: #C5C3CC;
--dxds-neutral-80: #B8B6C0;
--dxds-neutral-90: #ABA9B3;
--dxds-neutral-100: #9E9CA6;
--dxds-neutral-110: #918F99;
--dxds-neutral-120: #84828C;
--dxds-neutral-130: #77757F;
--dxds-neutral-140: #6A6872;
--dxds-neutral-150: #5E5C66;
--dxds-neutral-160: #53515A;
--dxds-neutral-170: #48464F;
--dxds-neutral-180: #3E3C44;
--dxds-neutral-190: #35333A;
--dxds-neutral-200: #2D2B31;
--dxds-neutral-210: #29272B;
--dxds-neutral-220: #242327;
--dxds-neutral-230: #1E1D20;
--dxds-neutral-240: #141315;
--dxds-neutral-250: #0C0C0E;
}