/* ========================================================================== 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(6px); /* popovers pequenos */ --ds-glass-blur-md: blur(12px); /* cards, painéis (depth-1) */ --ds-glass-blur-lg: blur(18px); /* dropdowns, overlays (depth-2) */ --ds-glass-blur-xl: blur(24px); /* 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(110%); /* tooltip — discreto */ --ds-glass-saturate-mid: saturate(120%); /* card — padrão */ --ds-glass-saturate-high: saturate(130%); /* modal — teto visual */ --ds-glass-contrast: contrast(102%); /* 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 + 110% */ --ds-glass-filter-sm: var(--ds-glass-blur-sm) var(--ds-glass-saturate-low); /* 6px + 110% — popovers pequenos */ --ds-glass-filter-surface: var(--ds-glass-blur-md) var(--ds-glass-saturate-mid); /* 12px + 120% — cards, painéis */ --ds-glass-filter-overlay: var(--ds-glass-blur-lg) saturate(125%); /* 18px + 125% — dropdowns */ --ds-glass-filter-modal: var(--ds-glass-blur-xl) var(--ds-glass-saturate-high) contrast(104%); /* 24px + 130% + contrast */ /* ───────────────────────────────────────────────────────────────────── BACKGROUNDS DE VIDRO — Light Theme Quase neutros: material primeiro, acento vem depois. 100 = ultra-leve · 500 = header/sidebar condensado ───────────────────────────────────────────────────────────────────── */ --ds-glass-bg-100: oklch(99% 0.001 240 / 0.82); /* ultra-leve — depth-0 opt-in */ --ds-glass-bg-200: oklch(98% 0.002 240 / 0.90); /* card leve — depth-1 base */ --ds-glass-bg-300: oklch(97% 0.003 240 / 0.94); /* card principal — depth-1 */ --ds-glass-bg-400: oklch(96% 0.004 240 / 0.97); /* modal — depth-3 */ --ds-glass-bg-500: oklch(95% 0.005 240 / 0.985); /* header/sidebar condensado */ /* Fallback opaco — ativado por @supports ou data-glass-reduced */ --ds-glass-bg-solid: oklch(98% 0.002 240 / 1.00); /* ───────────────────────────────────────────────────────────────────── BACKGROUNDS DE VIDRO — Dark Theme Neutros (chroma 0) por design — Option A 2026-05-08. Apple Sonoma chrome lift 2026-05-08: escala desloca pra cima ~5 pontos pra manter a relacao de elevacao com o novo --ds-surface-base oklch(20%). 100 = mais claro (menos imersivo) · 500 = dark glass profundo ───────────────────────────────────────────────────────────────────── */ --ds-glass-dark-100: oklch(28% 0 0 / 0.78); /* surface elevada lighter ≈ #2c2c2c */ --ds-glass-dark-200: oklch(25% 0 0 / 0.84); /* ≈ #262626 */ --ds-glass-dark-300: oklch(22% 0 0 / 0.90); /* ≈ #1f1f1f */ --ds-glass-dark-400: oklch(20% 0 0 / 0.95); /* sidebar glass base ≈ #1c1c1e */ --ds-glass-dark-500: oklch(17% 0 0 / 0.98); /* sidebar glass deep ≈ #181818 */ /* Fallback opaco dark */ --ds-glass-dark-solid: oklch(20% 0 0 / 1.00); /* chrome neutral ≈ #1c1c1e */ /* ───────────────────────────────────────────────────────────────────── 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.32); /* linha superior — forte */ --ds-glass-border-hilight-sm: oklch(100% 0 0 / 0.18); /* linha superior — suave */ --ds-glass-border-default: oklch(100% 0 0 / 0.14); /* 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.38) 0%, oklch(100% 0 0 / 0.10) 35%, transparent 65% ); --ds-glass-specular-dark: linear-gradient( 135deg, oklch(100% 0 0 / 0.14) 0%, oklch(100% 0 0 / 0.04) 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.018; --ds-glass-noise-opacity-dark: 0.030; /* 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 12px oklch(62% 0.22 210 / 0.16); --ds-glass-glow-primary-lg: 0 0 28px oklch(62% 0.22 210 / 0.12); --ds-glass-glow-white: 0 0 12px oklch(100% 0 0 / 0.10); --ds-glass-glow-none: 0 0 0 transparent; /* Budgets de material */ --ds-glass-max-active-surfaces: 3; --ds-glass-max-blur: 24px; /* 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.14); --ds-glass-border-hilight-sm: oklch(100% 0 0 / 0.09); --ds-glass-border-default: oklch(100% 0 0 / 0.12); /* 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); --ds-glass-glow-primary: 0 0 12px oklch(62% 0.22 210 / 0.18); --ds-glass-glow-primary-lg: 0 0 28px oklch(62% 0.22 210 / 0.14); --ds-glass-glow-white: 0 0 12px oklch(100% 0 0 / 0.12); } /* ───────────────────────────────────────────────────────────────────── MODO PRODUTIVIDADE — flat/material restraint Opt-in via [data-material="flat"] ou [data-material="productivity"]. Mantém a semântica de depth, mas remove translucência difusa nas áreas de uso intensivo e devolve superfícies sólidas ao dashboard denso. ───────────────────────────────────────────────────────────────────── */ :root[data-material="flat"], :root[data-material="productivity"], [data-material="flat"], [data-material="productivity"] { --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-surface-base); --ds-glass-bg-200: var(--ds-surface); --ds-glass-bg-300: var(--ds-surface-elevated); --ds-glass-bg-400: var(--ds-surface-elevated); --ds-glass-bg-500: var(--ds-surface-elevated); --ds-glass-bg-solid: var(--ds-surface-elevated); --ds-glass-border-hilight: var(--ds-border-subtle); --ds-glass-border-hilight-sm: var(--ds-border-subtle); --ds-glass-border-default: var(--ds-border-default); --ds-glass-border-accent: color-mix(in oklch, var(--ds-primary) 60%, transparent); --ds-glass-specular-light: linear-gradient(transparent, transparent); --ds-glass-specular-dark: linear-gradient(transparent, transparent); --ds-glass-noise-opacity-light: 0; --ds-glass-noise-opacity-dark: 0; --ds-glass-glow-primary: var(--ds-glass-glow-none); --ds-glass-glow-primary-lg: var(--ds-glass-glow-none); --ds-glass-glow-white: var(--ds-glass-glow-none); } /* ───────────────────────────────────────────────────────────────────── 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); /* 12px → 8px */ --ds-glass-blur-lg: blur(12px); /* 18px → 12px (teto mobile) */ --ds-glass-blur-xl: blur(12px); /* 24px → 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); } } }