/* ========================================================================== MigraSpace — tokens.css FONTE ÚNICA DE VERDADE DE COR / RAIO / SOMBRA. Este é o ÚNICO ficheiro que precisas de tocar para mudar o visual do site inteiro. Todos os outros CSS (style.css, theme-monzo.css, palette-blue-green.css) foram reescritos para não terem uma única cor escrita à mão: usam apenas as variáveis definidas aqui. Como mudar a cor de todo o site: - Escala neutra -> bloco "RAMPA NEUTRA" (--ms-0 ... --ms-1000) - Cor de destaque (botões primários, links ativos) -> --ms-ui-accent - Estados (erro / sucesso / aviso) -> bloco "ESTADOS" Se um dia quiseres voltar a ter cor de marca, basta trocar --ms-ui-accent e --ms-ui-accent-ink. Não é preciso mexer em mais nada. Estética atual: monocromática, referência Threads. ========================================================================== */ :root { color-scheme: light; /* --------------------------------------------------------------------- RAMPA NEUTRA Cada degrau existe em duas formas: --ms-N -> hex, para usar direto --ms-N-rgb -> tripleto "r g b", para usar com alpha: rgb(var(--ms-200-rgb) / .5) Mudar um degrau aqui muda-o em todas as páginas do site. --------------------------------------------------------------------- */ --ms-0: #FFFFFF; --ms-0-rgb: 255 255 255; --ms-25: #FCFCFC; --ms-25-rgb: 252 252 252; --ms-50: #FAFAFA; --ms-50-rgb: 250 250 250; --ms-100: #F5F5F5; --ms-100-rgb: 245 245 245; --ms-150: #EFEFEF; --ms-150-rgb: 239 239 239; --ms-200: #E5E5E5; --ms-200-rgb: 229 229 229; --ms-250: #DBDBDB; --ms-250-rgb: 219 219 219; --ms-300: #CCCCCC; --ms-300-rgb: 204 204 204; --ms-400: #B0B0B0; --ms-400-rgb: 176 176 176; --ms-500: #999999; --ms-500-rgb: 153 153 153; --ms-600: #6E6E6E; --ms-600-rgb: 110 110 110; /* >=4.5:1 sobre branco */ --ms-700: #5C5C5C; --ms-700-rgb: 92 92 92; --ms-800: #3D3D3D; --ms-800-rgb: 61 61 61; --ms-900: #1F1F1F; --ms-900-rgb: 31 31 31; --ms-950: #0F0F0F; --ms-950-rgb: 15 15 15; --ms-1000: #000000; --ms-1000-rgb: 0 0 0; /* --------------------------------------------------------------------- PAPÉIS SEMÂNTICOS Preferir estes nos CSS novos, em vez dos degraus crus. --------------------------------------------------------------------- */ /* Superfícies */ --ms-ui-bg: var(--ms-50); /* fundo da página */ --ms-ui-surface: var(--ms-0); /* cartões, painéis */ --ms-ui-surface-2: var(--ms-100); /* superfície secundária, inputs */ --ms-ui-surface-3: var(--ms-150); /* hover de superfície */ --ms-ui-overlay: rgb(var(--ms-1000-rgb) / .55); /* Traços */ --ms-ui-border: var(--ms-200); /* borda padrão */ --ms-ui-border-soft: var(--ms-150); /* divisórias muito leves */ --ms-ui-border-strong: var(--ms-300); /* foco, ênfase */ /* Texto */ --ms-ui-text: var(--ms-1000); /* primário */ --ms-ui-text-2: var(--ms-700); /* corpo secundário */ --ms-ui-text-3: var(--ms-600); /* legendas, metadados (AA) */ --ms-ui-text-faint: var(--ms-500); /* placeholders, desativado */ --ms-ui-text-invert: var(--ms-0); /* Cor de texto "por cima da superfície atual". Por defeito é escura. As poucas superfícies que continuam escuras (botão primário, avatar, badge, toast, filtro ativo) redefinem estas duas variáveis para branco — e como as custom properties se herdam, todos os descendentes seguem sozinhos. É isto que impede texto branco sobre fundo claro sem ter de caçar componente a componente. */ --ms-ui-on: var(--ms-ui-text); --ms-ui-on-rgb: var(--ms-1000-rgb); /* NÃO criar aqui um "--ms-ui-on-muted: rgb(var(--ms-ui-on-rgb) / .62)". Uma variável que usa outra é resolvida onde é DEFINIDA, não onde é usada: ficaria congelada no preto do :root e não acompanharia as superfícies escuras. Para texto secundário adaptativo escreve-se a expressão à mão, no sítio onde é precisa: color: rgb(var(--ms-ui-on-rgb) / .62); */ /* Destaque — botão primário, link ativo, estado selecionado. TROCA AQUI para dar cor de marca ao site inteiro. */ --ms-ui-accent: var(--ms-1000); --ms-ui-accent-hover: var(--ms-900); --ms-ui-accent-soft: var(--ms-100); /* fundo de chip/badge ativo */ --ms-ui-accent-line: var(--ms-250); --ms-ui-accent-ink: var(--ms-0); /* texto por cima de --ms-ui-accent */ /* --------------------------------------------------------------------- ESTADOS Único ponto onde há cor. Discretos de propósito. --------------------------------------------------------------------- */ --ms-danger: #C4362F; --ms-danger-strong: #9B2A24; --ms-danger-soft: #FBF0EF; --ms-danger-line: #F0D6D4; --ms-success: #2F7A4B; --ms-success-strong:#215939; --ms-success-soft: #F0F6F2; --ms-success-line: #D4E5DA; --ms-warning: #9A6B14; --ms-warning-strong:#7A5310; --ms-warning-soft: #F8F4EC; --ms-warning-line: #E8DCC6; /* --------------------------------------------------------------------- SELOS DE VERIFICAÇÃO A segunda (e última) exceção ao monocromático, a par dos estados: os três níveis têm de distinguir-se à primeira vista, e é para isso que existem. Tons contidos, não berrantes — todos passam 4,5:1 sobre branco. --------------------------------------------------------------------- */ --ms-badge-silver: #7C838A; --ms-badge-silver-ink: #FFFFFF; --ms-badge-blue: #1668C4; --ms-badge-blue-ink: #FFFFFF; --ms-badge-gold: #9A6B14; --ms-badge-gold-ink: #FFFFFF; --ms-info: var(--ms-800); --ms-info-soft: var(--ms-100); --ms-info-line: var(--ms-200); /* --------------------------------------------------------------------- SOMBRAS — quase inexistentes, como no Threads. A separação faz-se por linha, não por sombra. --------------------------------------------------------------------- */ --ms-shadow-none: none; --ms-shadow-xs: 0 1px 2px rgb(var(--ms-1000-rgb) / .04); --ms-shadow-sm: 0 1px 3px rgb(var(--ms-1000-rgb) / .06); --ms-shadow-md: 0 2px 8px rgb(var(--ms-1000-rgb) / .07); --ms-shadow-lg: 0 8px 24px rgb(var(--ms-1000-rgb) / .10); --ms-shadow-focus: 0 0 0 2px var(--ms-0), 0 0 0 4px rgb(var(--ms-1000-rgb) / .35); /* --------------------------------------------------------------------- RAIOS — Threads é generoso mas não circular em tudo. --------------------------------------------------------------------- */ --ms-radius-xs: 6px; --ms-radius-sm: 10px; --ms-radius-md: 14px; --ms-radius-lg: 18px; --ms-radius-xl: 24px; --ms-radius-pill: 999px; } /* ========================================================================== TEMA ESCURO Só a rampa inverte — todos os papéis semânticos acima seguem sozinhos. (Hoje o site força data-theme="light" no head.php; isto fica pronto para quando quiseres ligar o modo escuro.) ========================================================================== */ html[data-theme="dark"] { color-scheme: dark; --ms-0: #000000; --ms-0-rgb: 0 0 0; --ms-25: #060606; --ms-25-rgb: 6 6 6; --ms-50: #0A0A0A; --ms-50-rgb: 10 10 10; --ms-100: #141414; --ms-100-rgb: 20 20 20; --ms-150: #1C1C1C; --ms-150-rgb: 28 28 28; --ms-200: #262626; --ms-200-rgb: 38 38 38; --ms-250: #303030; --ms-250-rgb: 48 48 48; --ms-300: #3D3D3D; --ms-300-rgb: 61 61 61; --ms-400: #575757; --ms-400-rgb: 87 87 87; --ms-500: #777777; --ms-500-rgb: 119 119 119; --ms-600: #969696; --ms-600-rgb: 150 150 150; --ms-700: #B3B3B3; --ms-700-rgb: 179 179 179; --ms-800: #D1D1D1; --ms-800-rgb: 209 209 209; --ms-900: #E8E8E8; --ms-900-rgb: 232 232 232; --ms-950: #F4F4F4; --ms-950-rgb: 244 244 244; --ms-1000: #FFFFFF; --ms-1000-rgb: 255 255 255; --ms-danger: #E8736B; --ms-danger-strong: #F0938C; --ms-danger-soft: #241413; --ms-danger-line: #3A1F1D; --ms-success: #6BBE8B; --ms-success-strong:#8ED0A6; --ms-success-soft: #101B14; --ms-success-line: #1D2F23; --ms-warning: #D3A64E; --ms-warning-strong:#E2BC71; --ms-warning-soft: #1C1710; --ms-warning-line: #2E2619; --ms-badge-silver: #A9B0B7; --ms-badge-blue: #5FA3EE; --ms-badge-gold: #D3A64E; }