/* Nocturne — tokens do design system. Tres camadas: eixos, rampas, apelidos. */ /* ============================================================ Nocturne — tokens do design system (fonte: _ds/nocturne/styles.css). Reorganizado em tres camadas para permitir personalizacao: 1. EIXOS Os seis numeros que o usuario mexe em Configuracoes > Aparencia. Tudo abaixo deriva deles. 2. RAMPAS Triplas `H S% L%` CRUAS, uma versao por tema. Ficam sem hsl() em volta de proposito: quem precisa de alfa escreve hsl(var(--acRaw) / .12) no ponto de uso. Era exatamente isso que antes obrigava a repetir hsl(var(--acRaw)/...) em 26 lugares e hsl(var(--veuRaw)/...) em 46 — cada um deles um literal que nenhum tema conseguia trocar. 3. APELIDOS Os nomes antigos (--d900, --verde, --blur...), porque o JS monta HTML com var(--...) espalhado em varios lugares. Regra que sustenta o tema claro: NENHUMA regra abaixo do :root pode saber qual tema esta ativo. Se uma precisar saber, o token e que esta faltando. Sem vermelho em nenhum estado — a urgencia vem do pulso. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root{ /* ---------- 1. eixos de personalizacao ---------- */ --hAc:248; /* matiz do acento */ --hNe:231; /* matiz dos neutros */ --satAc:1; /* saturacao do acento, multiplicador */ --satNe:1; /* saturacao dos neutros, multiplicador */ --vidro:20px; /* raio do desfoque das superficies de vidro */ --opq:.72; /* opacidade das superficies de vidro */ /* ---------- 2. rampas — tema escuro ---------- */ --acRaw : var(--hAc) calc(52% * var(--satAc)) 68%; --ac2Raw: var(--hAc) calc(90% * var(--satAc)) 95%; --ac3Raw: var(--hAc) calc(95% * var(--satAc)) 90%; --ac4Raw: var(--hAc) calc(92% * var(--satAc)) 83%; --ac6Raw: var(--hAc) calc(38% * var(--satAc)) 59%; --ac7Raw: var(--hAc) calc(29% * var(--satAc)) 45%; --ac8Raw: var(--hAc) calc(30% * var(--satAc)) 32%; --ac9Raw: var(--hAc) calc(26% * var(--satAc)) 20%; /* O veu e a cor dos hovers e das linhas. Separado do texto de proposito: no tema claro, texto quase preto a 9% de alfa da um cinza sujo — o veu precisa de um grafite medio. Um token, nao 46 calc() no ponto de uso. */ --veuRaw : var(--hNe) 9% 92%; --txRaw : var(--hNe) 9% 92%; --tx2Raw : var(--hNe) 18% 75%; --tx3Raw : var(--hNe) 13% 62%; --tx4Raw : var(--hNe) 9% 50%; --bg : hsl(var(--hNe) calc(27% * var(--satNe)) 12%); --surface: hsl(var(--hNe) calc(18% * var(--satNe)) 17%); --fundo2 : hsl(var(--hNe) calc(21% * var(--satNe)) 13%); --fundo3 : hsl(var(--hNe) calc(27% * var(--satNe)) 10%); --chao : hsl(var(--hNe) calc(28% * var(--satNe)) 6%); --d500 : hsl(var(--hNe) calc(10% * var(--satNe)) 27%); --palco1 : hsl(var(--hNe) calc(24% * var(--satNe)) 15%); /* topo do .estadoPalco */ --palco2 : hsl(var(--hNe) calc(33% * var(--satNe)) 9%); /* base do .estadoPalco */ --erroBg : hsl(var(--hAc) calc(22% * var(--satAc)) 13%); /* .msg.err */ /* o avatar mistura a cor da pessoa com esta base; ela fica escura nos DOIS temas, senao no claro o avatar vira pastel e o #fff some */ --avBase : hsl(var(--hNe) calc(20% * var(--satNe)) 14%); --brilhoA: .10; /* alfa do brilho color-dodge que segue o cursor no card */ /* Superficies elevadas (cartao, hover, ativo). Precisam de token proprio, e nao do veu generico, porque o mesmo alfa NAO rende igual nos dois temas: veu claro a 3,5% sobre painel escuro (L 15) muda a luminancia em 18% relativos e salta aos olhos; veu escuro a 3,5% sobre painel claro (L 98) muda 2% e some. A percepcao e relativa ao fundo — por isso o tema claro pede alfa maior, nao so cor mais escura. */ --sup1 : hsl(var(--veuRaw)/.035); /* cartao em repouso */ --sup1Anel: hsl(var(--veuRaw)/.05); /* contorno do cartao */ --sup2 : hsl(var(--veuRaw)/.06); /* hover */ --sup3 : hsl(var(--veuRaw)/.08); /* ativo / pressionado */ /* vidro em duas familias: painel (mais claro) e barra (mais escura) */ --vidroPRaw : var(--hNe) 19% 15%; --vidroBRaw : var(--hNe) 23% 10%; --campo : hsl(var(--hNe) 24% 6% / .5); /* fundo de input */ --vinhetaRaw: var(--hNe) 24% 6%; /* vinheta sobre video */ --scrimRaw : var(--hNe) 30% 4%; /* fundo atras de modal */ --sombraRaw : var(--hNe) 40% 2%; --sombraF : 1; /* forca das sombras */ --malhaL : 58%; /* luminosidade das manchas do fundo */ --malhaA : .38; /* alfa base das manchas */ /* os tres degraus da base do fundo. Explicitos por tema, nao derivados por multiplicador: um fator que clareia no escuro escurece no claro. */ --malhaB1 : 12%; --malhaB2: 7%; --malhaB3: 11%; /* ---------- 3. derivados e apelidos ---------- */ --ac :hsl(var(--acRaw)); --ac2:hsl(var(--ac2Raw)); --ac3:hsl(var(--ac3Raw)); --ac4:hsl(var(--ac4Raw)); --ac6:hsl(var(--ac6Raw)); --ac7:hsl(var(--ac7Raw)); --ac8:hsl(var(--ac8Raw)); --ac9:hsl(var(--ac9Raw)); --tx :hsl(var(--txRaw)); --tx2:hsl(var(--tx2Raw)); --tx3:hsl(var(--tx3Raw)); --tx4:hsl(var(--tx4Raw)); --linha:hsl(var(--veuRaw)/.09); --linha2:hsl(var(--veuRaw)/.14); --r:8px; --rlg:14px; /* sombras com nome (§5 do roadmap): a mesma receita aparecia copiada em seis lugares, com variacoes que ninguem escolheu */ --anel :0 0 0 1px var(--linha); --sombra1 :0 14px 34px hsl(var(--sombraRaw)/calc(.50 * var(--sombraF))); --sombra2 :0 18px 44px hsl(var(--sombraRaw)/calc(.50 * var(--sombraF))); --sombra3 :0 24px 60px hsl(var(--sombraRaw)/calc(.70 * var(--sombraF))); --sombraPop:0 16px 40px hsl(var(--sombraRaw)/calc(.65 * var(--sombraF))); --vidroSombra:var(--anel),var(--sombra2); /* apelidos para o codigo existente */ --d900:var(--fundo3); --d800:var(--fundo2); --d700:var(--bg); --d650:hsl(var(--veuRaw)/.05); --d600:hsl(var(--veuRaw)/.07); --blur:var(--ac); --blur2:var(--ac6); --verde:var(--ac4); --vermelho:var(--ac3); --amarelo:var(--ac4); --ok:var(--ac4); --tally:var(--tx4); --legenda:var(--tx3); --tinta3:var(--tx4); --avme:var(--ac8); } /* Tema claro. So a camada 2 muda — e a rampa do acento INVERTE de ponta a ponta: --ac2, que no escuro e o quase-branco escrito SOBRE acento, aqui tem que ser o acento escuro escrito sobre claro; --ac9, que era fundo escuro, vira fundo claro. Por isso a inversao nao pode ser um filtro global nem um multiplicador: cada degrau da rampa tem papel proprio. Quem consome os tokens nao muda uma linha. Excecao consciente: o letterbox continua #000 (regras de #remote, video, .tile e as molduras de embed). Barra clara em volta de video escuro cansa a vista, e nenhum player do mundo faz isso. */ :root[data-tema="claro"]{ --acRaw : var(--hAc) calc(45% * var(--satAc)) 52%; --ac2Raw: var(--hAc) calc(60% * var(--satAc)) 26%; --ac3Raw: var(--hAc) calc(55% * var(--satAc)) 34%; --ac4Raw: var(--hAc) calc(52% * var(--satAc)) 42%; --ac6Raw: var(--hAc) calc(38% * var(--satAc)) 58%; --ac7Raw: var(--hAc) calc(45% * var(--satAc)) 70%; --ac8Raw: var(--hAc) calc(55% * var(--satAc)) 88%; --ac9Raw: var(--hAc) calc(62% * var(--satAc)) 94%; --veuRaw : var(--hNe) 22% 34%; --txRaw : var(--hNe) 26% 14%; --tx2Raw : var(--hNe) 16% 32%; --tx3Raw : var(--hNe) 12% 44%; --tx4Raw : var(--hNe) 10% 55%; --bg : hsl(var(--hNe) calc(30% * var(--satNe)) 95%); --surface: hsl(var(--hNe) calc(40% * var(--satNe)) 99%); --fundo2 : hsl(var(--hNe) calc(32% * var(--satNe)) 93%); --fundo3 : hsl(var(--hNe) calc(34% * var(--satNe)) 90%); --d500 : hsl(var(--hNe) calc(12% * var(--satNe)) 72%); --palco1 : hsl(var(--hNe) calc(40% * var(--satNe)) 99%); --palco2 : hsl(var(--hNe) calc(32% * var(--satNe)) 92%); --erroBg : hsl(var(--hAc) calc(60% * var(--satAc)) 96%); --avBase : hsl(var(--hNe) calc(25% * var(--satNe)) 30%); --brilhoA: 0; /* color-dodge com branco estoura sobre superficie clara */ --sup1 : hsl(var(--hNe) 26% 38%/.11); --sup1Anel: hsl(var(--hNe) 26% 32%/.20); --sup2 : hsl(var(--hNe) 26% 38%/.16); --sup3 : hsl(var(--hNe) 26% 38%/.22); --vidroPRaw : var(--hNe) 40% 98%; --vidroBRaw : var(--hNe) 34% 95%; --campo : hsl(var(--hNe) 30% 40% / .07); --scrimRaw : var(--hNe) 22% 32%; /* --vinhetaRaw e --chao NAO sao redefinidos aqui, de proposito. Os dois pintam a SUPERFICIE DE MIDIA, nao o cromo. Quando eram invertidos, a vinheta virava um veu quase branco a 86% sobre as bordas do video — dava para ver a barra de tarefas de quem transmitia mudando de cor, um "papel filme" por cima da transmissao alheia. Escura serve melhor aos DOIS temas: painel claro sobre video escurecido tem mais contraste que painel escuro, nao menos. O tema claro troca a cor dos menus; o video e tratado igual nos dois. */ --sombraRaw : var(--hNe) 45% 26%; --sombraF : .32; --malhaL : 74%; --malhaA : .30; --malhaB1 : 97%; --malhaB2: 93%; --malhaB3: 95%; }