Форми

Switch

Бінарний перемикач (role=switch, ←/→ keyboard за WAI-ARIA). Експлорер: палітра → hue → stop, далі всі розміри / стани в обраному кольорі. Track-on тримає той самий gradient-recipe, що й solid-Badge (S → S+3), тож вибір hue × stop тут синхронний з рештою системи.

import { Switch } from "@residence/glass-ui"

Палітра + Відтінок

3 кроки: палітра (16 + 20 + 18) → hue → stop. Нижче — все, що тільки вміє Switch, рендериться в обраному кольорі.

01 · Палітра

02 · Hue · Смарагд

03 · Stop · 500

Прев'ю · emerald-500

Сайз/стан/підпис рендеряться в обраному hue × stop. Окремий ряд знизу показує цей самий hue у всіх 11 стопах одночасно — корисно щоб вибрати найкращий stop для дизайн-токену.

Sizessm / md / lg — клікни щоб переключити

Stateschecked / unchecked / disabled-on / disabled-off

checked

unchecked

disabled · on

disabled · off

With labelтиповий useage — Switch + text inline

Сповіщення електронною поштоющодня о 09:00

Темна теманаслідувати систему

Маркетингові розсилки

All stops · emeraldтой самий hue у 11 стопах — порівняй між собою, обери токен

Recipetrack-on — same gradient as Badge solid · default shade

track-on: linear-gradient(180deg,
  #0F8945 0%,
  #053D1F 100%)
border:   rgba(11,111,55,0.28)
thumb:    #ffffff (round, with tactile drop-shadow)
track-off: sunken slate channel (hue-agnostic — same as real Switch)

contrast-of-thumb on track-on
  top lum=0.184   bot lum=0.035   avg=0.109   threshold=0.5
text-ink-on-track: #ffffff  (інформативно — Switch сам по собі не має тексту)