/* ============================================================ ELVEN OBSERVABILITY — CHANGELOG · CONTROLES DE FORMULÁRIO Acabamento dos elementos nativos (select, input, textarea, checkbox, radio, botão) para eles pertencerem à mesma UI que o app.css já define. Não redesenha nada: reaproveita os mesmos tokens, raios, pesos e transições. ORDEM DE CARGA: depois de app.css. ESTRATÉGIA DE CASCATA (por que os seletores são o que são): - O grosso da base vai dentro de :where(), que tem especificidade ZERO. Assim tudo que o app.css já opinou (.fld input, .install select, .ainput, .dta, .radios input…) continua vencendo e nenhuma métrica aprovada muda. - Só sobe de especificidade o que PRECISA vencer o app.css para o controle não ficar quebrado (ex.: o padding à direita do select, senão o texto passa por baixo da seta). - Zero !important. Zero JS. Nenhum token redefinido — as variáveis criadas aqui usam o prefixo --ctl- e são locais de componente, derivadas dos tokens existentes. ============================================================ */ /* ------------------------------------------------------------ 1. VARIÁVEIS LOCAIS DE COMPONENTE (não são tokens de marca) Só duas precisam de variante por tema: a seta do select (data-URI não enxerga currentColor) e a cor sobre o accent. As demais saem de color-mix() sobre tokens e já acompanham o tema sozinhas. ------------------------------------------------------------ */ :root { --ctl-h: 2.25rem; /* altura mínima de controle em .campo */ --ctl-pad-y: .5rem; --ctl-pad-x: .625rem; --ctl-fs: .9375rem; --ctl-mark: 1.125rem; /* lado do checkbox/radio desenhado */ /* hairlines: discretos, mas presentes. O border puro some em superfície elevada; o mix dá o mínimo de definição. */ --ctl-border-hover: color-mix(in srgb, var(--text-3) 45%, var(--border)); --ctl-border-forte: color-mix(in srgb, var(--text-3) 55%, var(--border)); --ctl-on-accent: #FFFFFF; /* texto/marca sobre --accent */ --ctl-chevron: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E"); } /* No tema escuro o accent (#00BFA5) é claro demais para texto branco (≈1.9:1). Marca e rótulo sobre o accent viram tinta. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ctl-on-accent: #0F1923; --ctl-chevron: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238B98A5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E"); } } :root[data-theme="dark"] { --ctl-on-accent: #0F1923; --ctl-chevron: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238B98A5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------ 2. BASE COMPARTILHADA range/color/file ficam nativos de propósito: o app não usa nenhum dos três, e meio-estilizado é pior que nativo. Nunca uso o atalho `background` aqui — ele zeraria o background-image da seta do select. Só longhands. ------------------------------------------------------------ */ :where( input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea ) { background-color: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--ctl-pad-y) var(--ctl-pad-x); font-family: var(--font-sans); font-size: var(--ctl-fs); line-height: 1.25rem; caret-color: var(--accent); accent-color: var(--accent); /* pinta o que sobrou de nativo */ transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); } /* `color` fica FORA do :where() acima de propósito: o app.css tem `input, select, textarea { color: inherit }` (0,0,1), que venceria a especificidade zero e faria o valor do campo herdar a cor do container (text-2 dentro de .esummary, por exemplo). Aqui a cor do valor é sempre a cor de texto primária. */ :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) { color: var(--text-1); } /* Firefox baixa a opacidade do placeholder por conta própria. */ :where(input, textarea)::placeholder { color: var(--text-3); opacity: 1; } /* color-scheme é o único jeito de fazer o navegador desenhar o POPUP do select, o painel do date picker, os spinners e as barras de rolagem internas no tema certo. Aplico no controle (e não no :root) para não mexer no resto da página. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :where(input, select, textarea, .btn) { color-scheme: dark; } } :root[data-theme="dark"] :where(input, select, textarea, .btn) { color-scheme: dark; } :root[data-theme="light"] :where(input, select, textarea, .btn) { color-scheme: light; } /* Hover: sobe a especificidade porque .fld/.install/.ainput já declaram border-color e venceriam um :where(). */ :is( input:not([type="checkbox"]):not([type="radio"]), select, textarea ):hover:not(:disabled):not([readonly]) { border-color: var(--ctl-border-hover); } /* Disabled. -webkit-text-fill-color existe porque o Safari lava o texto de controles desabilitados ignorando `color`. */ :where(input, select, textarea):disabled { opacity: .55; cursor: not-allowed; -webkit-text-fill-color: currentColor; background-color: var(--surface); border-color: var(--border-soft); } :where(input, select, textarea)[readonly] { background-color: var(--surface); color: var(--text-2); } /* Inválido por validação nativa. :user-invalid só marca DEPOIS da interação — :invalid pintaria o formulário de vermelho antes de o usuário digitar a primeira letra. */ :where(input, select, textarea):user-invalid { border-color: var(--danger); } /* ------------------------------------------------------------ 3. SELECT appearance:none porque a seta nativa (e, no macOS, o relevo e o cantinho azul do sistema) é o que mais destoa da UI. Trocada por um chevron fino em SVG data-URI. Por que data-URI e não mask+currentColor: