/* ========================================================================== DS v3 — Tokens de Easing (easing.css) Issue: #211 · Parent: #188 (FASE-0) ========================================================================== Dois sistemas de curvas, propósitos distintos: 1. SPRING PHYSICS via CSS `linear()` Simula sistema massa-mola amortecido via amostragem a 5% de intervalo. Formula: x(t) = 1 - e^(-ζω₀t) * [cos(ω_d*t) + (ζω₀/ω_d)*sin(ω_d*t)] spring-1 — stiffness 300, damping 20 — ζ≈0.577 — pico: ~+10.8% Mais rígido, menor overshoot. Micro-interações, hover. spring-2 — stiffness 250, damping 18 — ζ≈0.569 — pico: ~+11.4% Equilíbrio. Dropdowns, expansões de painel. spring-3 — stiffness 200, damping 15 — ζ≈0.530 — pico: ~+14.1% Mais suave, maior overshoot. Modais, drawers, entradas dramáticas. 21 amostras uniformes (5% cada) = curva com resolução suficiente para representar overshoot e multiple oscillations sem artefatos visuais. 2. CUBIC-BEZIER CLÁSSICAS Para transições previsíveis sem overshoot: fade, slide, opacity. Suporte linear(): Chrome 113+, Edge 113+, Firefox 112+, Safari 17.2+ Fallback: em browsers sem suporte a linear(), var(--ds-ease-spring-*) resolve para o initial de transition-timing-function → `ease`. Animação ocorre sem spring, sem quebra. Fallback explícito (cubic-bezier) deve ser declarado no site de uso se necessário — não aqui nos tokens. Depende de: nenhuma dependência Consumido por: utilities/glass.css, todos os componentes com transition/animation ========================================================================== */ @layer ds-tokens { :root { /* ───────────────────────────────────────────────────────────────────── SPRING PHYSICS — via CSS linear() Valores amostrados da equação diferencial de mola amortecida. Cada token tem 21 Y-values uniformemente espaçados (0%–100%, passo 5%). O browser interpola linearmente entre as amostras. IMPORTANTE: estes tokens definem a CURVA, não a duração. Defina animation-duration (ou transition-duration) separadamente: • spring-1 → usar com --ds-duration-fast (150ms) • spring-2 → usar com --ds-duration-normal (250ms) • spring-3 → usar com --ds-duration-slow (400ms) ───────────────────────────────────────────────────────────────────── */ /* spring-1: leve — hover, focus rings, micro-interações ω₀=17.32 rad/s, ω_d=14.14 rad/s, τ_settle≈0.7s Pico máximo teórico: 1.108 (ocorre em ~30% da duração) */ --ds-ease-spring-1: linear( 0, .143, /* 5% */ .434, /* 10% */ .722, /* 15% */ .940, /* 20% */ 1.061, /* 25% — ascendendo ao pico */ 1.106, /* 30% — PICO máximo (+10.6%) */ 1.101, /* 35% */ 1.073, /* 40% */ 1.040, /* 45% */ 1.014, /* 50% — cruzando 1.0 novamente */ .997, /* 55% */ .990, /* 60% */ .988, /* 65% — mínimo secundário */ .991, /* 70% */ .995, /* 75% */ .998, /* 80% */ .999, /* 85% */ 1, /* 90% */ 1, /* 95% */ 1 /* 100% */ ); /* spring-2: médio — dropdowns, expansões, accordions ω₀=15.81 rad/s, ω_d=13.00 rad/s, τ_settle≈0.8s Pico máximo teórico: 1.114 (ocorre em ~30% da duração) */ --ds-ease-spring-2: linear( 0, .154, /* 5% */ .466, /* 10% */ .761, /* 15% */ .976, /* 20% */ 1.083, /* 25% — ascendendo ao pico */ 1.114, /* 30% — PICO máximo (+11.4%) */ 1.097, /* 35% */ 1.063, /* 40% */ 1.028, /* 45% */ 1.004, /* 50% — cruzando 1.0 */ .991, /* 55% */ .987, /* 60% — mínimo secundário */ .988, /* 65% */ .991, /* 70% */ .994, /* 75% */ .997, /* 80% */ .999, /* 85% */ 1, /* 90% */ 1, /* 95% */ 1 /* 100% */ ); /* spring-3: forte — modais, drawers, bottom sheets, entradas dramáticas ω₀=14.14 rad/s, ω_d=11.99 rad/s, τ_settle≈1.0s Pico máximo teórico: 1.141 (ocorre em ~25% da duração) */ --ds-ease-spring-3: linear( 0, .190, /* 5% */ .554, /* 10% */ .876, /* 15% */ 1.070, /* 20% — overshoot começa antes */ 1.138, /* 25% — PICO máximo (+13.8%) */ 1.124, /* 30% */ 1.075, /* 35% */ 1.027, /* 40% */ .995, /* 45% */ .982, /* 50% — mínimo secundário (mais pronunciado) */ .982, /* 55% */ .988, /* 60% */ .995, /* 65% */ 1, /* 70% */ 1.002, /* 75% — terceiro overshoot mínimo */ 1.001, /* 80% */ 1, /* 85% */ 1, /* 90% */ 1, /* 95% */ 1 /* 100% */ ); /* ───────────────────────────────────────────────────────────────────── CURVAS CLÁSSICAS — cubic-bezier Para transições sem overshoot: fade, slide, colour, opacity. Compatíveis com todos os browsers modernos. ───────────────────────────────────────────────────────────────────── */ /* out-expo: desaceleração exponencial — saída rápida, chegada suave. Uso: transições de entrada de elementos (slide-in, fade-in). */ --ds-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); /* out-back: desaceleração com leve recuo — similar ao spring sem múltiplas oscilações. Uso: confirmações, checkmarks, elementos que "encaixam". */ --ds-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* in-expo: aceleração exponencial — partida lenta, saída brusca. Uso: saída de elementos (slide-out, fade-out). Par de out-expo. */ --ds-ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); /* sharp: aceleração e desaceleração simétrica, mais agressiva que ease. Uso: mudanças de estado que exigem clareza (ativo/inativo, show/hide). */ --ds-ease-sharp: cubic-bezier(0.4, 0, 0.6, 1); /* ───────────────────────────────────────────────────────────────────── DURAÇÕES Escala de 5 passos cobrindo micro-feedback a transições lentas. Regra: nunca use durações hardcoded nos componentes — sempre var(). ───────────────────────────────────────────────────────────────────── */ --ds-duration-micro: 80ms; /* feedback imediato: ripple, glow toggle */ --ds-duration-fast: 150ms; /* hover, focus, badge update */ --ds-duration-normal: 250ms; /* dropdown open, tab switch, accordion */ --ds-duration-slow: 400ms; /* modal entry, page transition, sidebar */ --ds-duration-xslow: 600ms; /* onboarding, splash, drawer full-height */ } /* ───────────────────────────────────────────────────────────────────── REDUCED MOTION Colapsa todas as durações para 1ms — NÃO para 0ms. Razão: com 0ms, transitionend/animationend não disparam em alguns browsers, quebrando componentes que dependem desses eventos (ex: hx-trigger="transitionend", Dialogs que aguardam animação de saída antes de fechar). Com 1ms o evento dispara quase instantaneamente sem movimento perceptível. Os componentes NÃO precisam testar esta media query diretamente: basta usar var(--ds-duration-*) e este override se aplica globalmente. ───────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --ds-duration-micro: 1ms; --ds-duration-fast: 1ms; --ds-duration-normal: 1ms; --ds-duration-slow: 1ms; --ds-duration-xslow: 1ms; } } }