/* ========================================================================== DS v3 — Tokens de Superfície de Vidro (glass.css) Issue: #206 · Parent: #188 (FASE-0) ========================================================================== Primitivas completas do sistema glass do DS v3 Spatial Glass: - Blur scale e saturação - Filtros compostos por nível de uso - Backgrounds translúcidos light e dark - Bordas, specular gradients, noise texture, glow - Dark theme overrides via [data-theme="dark"] Depende de: color.css (--ds-cyan-500 para border-accent e glow) Consumido por: depth.css, utilities/glass.css, componentes DS v3 ========================================================================== */ @layer ds-tokens { :root { /* ───────────────────────────────────────────────────────────────────── BLUR SCALE Escala linear de desfoque — do menor ao máximo suportado. Regra: só aplicar diretamente via backdrop-filter nos componentes; use os filtros compostos abaixo para o sistema glass. ───────────────────────────────────────────────────────────────────── */ --ds-glass-blur-xs: blur(4px); /* tooltip, micro-elementos */ --ds-glass-blur-sm: blur(8px); /* popovers pequenos */ --ds-glass-blur-md: blur(16px); /* cards, painéis (depth-1) */ --ds-glass-blur-lg: blur(28px); /* dropdowns, overlays (depth-2) */ --ds-glass-blur-xl: blur(48px); /* modais, drawers (depth-3/4) */ /* ───────────────────────────────────────────────────────────────────── SATURAÇÃO E CONTRASTE ADICIONAIS Aplicados junto ao blur para amplificar as cores do conteúdo abaixo. ───────────────────────────────────────────────────────────────────── */ --ds-glass-saturate-low: saturate(120%); /* tooltip — discreto */ --ds-glass-saturate-mid: saturate(150%); /* card — padrão */ --ds-glass-saturate-high: saturate(180%); /* modal — máximo */ --ds-glass-contrast: contrast(104%); /* micro-boost em modais */ /* ───────────────────────────────────────────────────────────────────── FILTROS COMPOSTOS Combinações pré-compostas por nível semântico de uso. Use ESTES tokens nos componentes, não o blur/saturate diretamente. ───────────────────────────────────────────────────────────────────── */ --ds-glass-filter-tooltip: var(--ds-glass-blur-xs) var(--ds-glass-saturate-low); /* 4px + 120% */ --ds-glass-filter-sm: var(--ds-glass-blur-sm) var(--ds-glass-saturate-low); /* 8px + 120% — popovers pequenos */ --ds-glass-filter-surface: var(--ds-glass-blur-md) var(--ds-glass-saturate-mid); /* 16px + 150% — cards, painéis */ --ds-glass-filter-overlay: var(--ds-glass-blur-lg) saturate(160%); /* 28px + 160% — dropdowns */ --ds-glass-filter-modal: var(--ds-glass-blur-xl) var(--ds-glass-saturate-high) contrast(108%); /* 48px + 180% + contrast */ /* ───────────────────────────────────────────────────────────────────── BACKGROUNDS DE VIDRO — Light Theme Tintados de cyan (hue 210), opacidade cresce com o nível de profundidade. 100 = ultra-leve · 500 = header/sidebar condensado ───────────────────────────────────────────────────────────────────── */ --ds-glass-bg-100: oklch(99% 0.003 210 / 0.70); /* ultra-leve — depth-0 opt-in */ --ds-glass-bg-200: oklch(97% 0.006 210 / 0.78); /* card leve — depth-1 base */ --ds-glass-bg-300: oklch(95% 0.010 210 / 0.84); /* card principal — depth-1 */ --ds-glass-bg-400: oklch(93% 0.012 210 / 0.88); /* modal — depth-3 */ --ds-glass-bg-500: oklch(90% 0.015 210 / 0.93); /* header/sidebar condensado */ /* Fallback opaco — ativado por @supports ou data-glass-reduced */ --ds-glass-bg-solid: oklch(97% 0.006 210 / 1.00); /* ───────────────────────────────────────────────────────────────────── BACKGROUNDS DE VIDRO — Dark Theme Base slate (hue 230) com progressão de L invertida. 100 = mais claro (menos imersivo) · 500 = dark glass profundo ───────────────────────────────────────────────────────────────────── */ --ds-glass-dark-100: oklch(25% 0.015 230 / 0.62); --ds-glass-dark-200: oklch(21% 0.018 230 / 0.70); --ds-glass-dark-300: oklch(17% 0.020 230 / 0.77); --ds-glass-dark-400: oklch(14% 0.022 230 / 0.85); --ds-glass-dark-500: oklch(11% 0.018 230 / 0.92); /* sidebar dark glass base */ /* Fallback opaco dark */ --ds-glass-dark-solid: oklch(12% 0.018 230 / 1.00); /* ───────────────────────────────────────────────────────────────────── BORDAS DE VIDRO Baseadas em branco puro (oklch(100% 0 0)) com opacidades variadas. Hilight = borda superior iluminada (simula reflexo de luz de cima) ───────────────────────────────────────────────────────────────────── */ --ds-glass-border-hilight: oklch(100% 0 0 / 0.50); /* linha superior — forte */ --ds-glass-border-hilight-sm: oklch(100% 0 0 / 0.28); /* linha superior — suave */ --ds-glass-border-default: oklch(100% 0 0 / 0.18); /* borda principal */ --ds-glass-border-dark: oklch(100% 0 0 / 0.09); /* borda dark theme */ --ds-glass-border-accent: oklch(62% 0.22 210 / 0.45); /* cyan semi-transparente — variant accent */ /* ───────────────────────────────────────────────────────────────────── REFLEXO ESPECULAR (SPECULAR GRADIENTS) Simula reflexo de luz proveniente do canto superior esquerdo. Aplicado via ::before nos componentes glass. ───────────────────────────────────────────────────────────────────── */ --ds-glass-specular-light: linear-gradient( 135deg, oklch(100% 0 0 / 0.55) 0%, oklch(100% 0 0 / 0.15) 35%, transparent 65% ); --ds-glass-specular-dark: linear-gradient( 135deg, oklch(100% 0 0 / 0.18) 0%, oklch(100% 0 0 / 0.06) 35%, transparent 65% ); /* ───────────────────────────────────────────────────────────────────── NOISE TEXTURE (GRAIN DE VIDRO) SVG fractalNoise como data URI — zero requisição HTTP. Reutilizado via variável global (1 por página, nunca inline). Aplicado via ::after com mix-blend-mode: overlay. ───────────────────────────────────────────────────────────────────── */ --ds-glass-noise-opacity-light: 0.028; --ds-glass-noise-opacity-dark: 0.045; /* SVG fractal noise — compartilhado globalmente (FASE-4 polish #224) Melhorias em relação ao SVG inicial: seed='42' — padrão reproduzível entre browsers (sem seed = aleatório por renderização) feColorMatrix type='saturate' values='0' — força grayscale puro. Sem isso, feTurbulence produz RGBA com leve variação cromática que, sobre surfaces tintadas, pode criar manchas coloridas imperceptíveis em resoluções altas (HiDPI). Grayscale garante o grain neutro. color-interpolation-filters='sRGB' — cálculo em sRGB (padrão visual) vs linearRGB que clareia patches de ruído em displays calibrados. opacity='1' removido do — o controle de opacidade é feito via CSS (--ds-glass-noise-opacity-light/dark) em cada site de uso. ATENÇÃO: Não duplicar este SVG em componentes individuais. Usar SEMPRE via var(--ds-glass-noise-url) para garantir 1 instância de dados por página (compartilhado pelo parser CSS, não pelo DOM). */ --ds-glass-noise-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' seed='42' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); /* ───────────────────────────────────────────────────────────────────── GLOW (EMISSÃO DE LUZ AMBIENTE) Aplicado via box-shadow nos componentes accent e interactive. none = desativa glow (para reduced-motion ou performance budget). ───────────────────────────────────────────────────────────────────── */ --ds-glass-glow-primary: 0 0 20px oklch(62% 0.22 210 / 0.25); --ds-glass-glow-primary-lg: 0 0 40px oklch(62% 0.22 210 / 0.20); --ds-glass-glow-white: 0 0 20px oklch(100% 0 0 / 0.15); --ds-glass-glow-none: 0 0 0 transparent; /* Custom properties para highlight cursor-driven (GlassTilt) */ --ds-glass-hilight-x: 50%; --ds-glass-hilight-y: 0%; } /* ───────────────────────────────────────────────────────────────────── DARK THEME OVERRIDES Quando data-theme="dark" ou data-theme-effective="dark". Redireciona bg-100..500 para as variantes dark, e suaviza bordas. ───────────────────────────────────────────────────────────────────── */ [data-theme="dark"], :root[data-theme-effective="dark"] { /* Redireciona backgrounds para versões dark */ --ds-glass-bg-100: var(--ds-glass-dark-100); --ds-glass-bg-200: var(--ds-glass-dark-200); --ds-glass-bg-300: var(--ds-glass-dark-300); --ds-glass-bg-400: var(--ds-glass-dark-400); --ds-glass-bg-500: var(--ds-glass-dark-500); --ds-glass-bg-solid: var(--ds-glass-dark-solid); /* Bordas mais discretas no dark (luz ambiente menor) */ --ds-glass-border-hilight: oklch(100% 0 0 / 0.16); --ds-glass-border-hilight-sm: oklch(100% 0 0 / 0.10); --ds-glass-border-default: oklch(100% 0 0 / 0.13); /* Specular mais sutil no dark */ --ds-glass-specular-light: var(--ds-glass-specular-dark); /* Noise mais visível no dark (maior contraste) */ --ds-glass-noise-opacity-light: var(--ds-glass-noise-opacity-dark); /* ───────────────────────────────────────────────────────────────────── LUMINESCÊNCIA CYAN — Dark Theme Override (#225) Dark glass é intencionalmente mais expressivo que light: emissão cyan mais intensa no contexto escuro cria maior presença visual sem saturar (análogo a néon vívido em ambiente escurecido vs luz difusa ao dia). A diferença 0.25 → 0.30 é deliberada — não visa equivalência perceptual com o light, mas expressividade máxima sem exagero dentro do orçamento de luminescência do sistema. Sidebar usa 0.14 lateral (glow direcional offset 2px); aqui o glow é radial centrado (0 0 R), tolerando opacidade ligeiramente maior. ───────────────────────────────────────────────────────────────────── */ --ds-glass-glow-primary: 0 0 20px oklch(62% 0.22 210 / 0.30); /* light: 0.25 → dark: 0.30 */ --ds-glass-glow-primary-lg: 0 0 40px oklch(62% 0.22 210 / 0.22); /* light: 0.20 → dark: 0.22 */ --ds-glass-glow-white: 0 0 20px oklch(100% 0 0 / 0.20); /* light: 0.15 → dark: 0.20 */ } /* ───────────────────────────────────────────────────────────────────── PERFORMANCE BUDGET — data-glass-reduced Ativado por performance-guard.ts em dispositivos lentos/saveData/ prefers-reduced-motion. Desativa backdrop-filter globalmente. ───────────────────────────────────────────────────────────────────── */ [data-glass-reduced] { --ds-glass-filter-tooltip: none; --ds-glass-filter-sm: none; --ds-glass-filter-surface: none; --ds-glass-filter-overlay: none; --ds-glass-filter-modal: none; --ds-glass-bg-100: var(--ds-glass-bg-solid); --ds-glass-bg-200: var(--ds-glass-bg-solid); --ds-glass-bg-300: var(--ds-glass-bg-solid); --ds-glass-bg-400: var(--ds-glass-bg-solid); --ds-glass-bg-500: var(--ds-glass-bg-solid); } /* ───────────────────────────────────────────────────────────────────── MOBILE PERFORMANCE BUDGET — max-width: 768px Limita backdrop-filter a blur(12px) em telas pequenas. A GPU de dispositivos móveis tem orçamento de compositing reduzido — blurs acima de 12px causam queda de frame rate em hardware integrado. Aplica-se automaticamente a todos os filtros compostos que consomem --ds-glass-blur-*, --ds-depth-*-blur e --ds-glass-filter-*. Componentes com blur hardcoded (ds-header, ds-sidebar) têm override dedicado em seus respectivos arquivos de componente. ───────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { :root { --ds-glass-blur-sm: blur(6px); /* 8px → 6px */ --ds-glass-blur-md: blur(8px); /* 16px → 8px (gap 4px vs lg=12px — perceptível) */ --ds-glass-blur-lg: blur(12px); /* 28px → 12px (teto mobile) */ --ds-glass-blur-xl: blur(12px); /* 48px → 12px (teto mobile) */ /* --ds-glass-blur-xs permanece blur(4px) — já dentro do orçamento */ } } /* ───────────────────────────────────────────────────────────────────── ALTO CONTRASTE — prefers-contrast: more Desativa translucência completamente para garantir legibilidade máxima. ───────────────────────────────────────────────────────────────────── */ @media (prefers-contrast: more) { :root { --ds-glass-filter-tooltip: none; --ds-glass-filter-sm: none; --ds-glass-filter-surface: none; --ds-glass-filter-overlay: none; --ds-glass-filter-modal: none; --ds-glass-bg-100: var(--ds-glass-bg-solid); --ds-glass-bg-200: var(--ds-glass-bg-solid); --ds-glass-bg-300: var(--ds-glass-bg-solid); --ds-glass-bg-400: var(--ds-glass-bg-solid); --ds-glass-bg-500: var(--ds-glass-bg-solid); --ds-glass-border-default: oklch(0% 0 0 / 0.35); --ds-glass-border-hilight: oklch(0% 0 0 / 0.35); --ds-glass-border-hilight-sm: oklch(0% 0 0 / 0.25); } } }