Block / SubBlock
Поверхневі обгортки. Block = level 1, SubBlock = level 2/3. Передає колір до дочірніх Tabs / Card через Surface context.
Чому Block здається менш фізичним за Button? Surface (під капотом) використовує INVERSE gradient (top-darker, bottom-lighter) — це малює «tinted panel з підсвіткою знизу». Button ж використовує NATURAL gradient (light-top, dark-bottom) + multi-stop + drop shadow → читається як піднята кнопка під overhead-світлом. Опція «Physical recipe» в Options перемикає на Button-style — щоб порівняти.
import { Block, SubBlock } from "@residence/glass-ui"Палітра + Відтінок
3 кроки: палітра (16 + 20 + 18) → hue → stop. Нижче — flat і glass variants на 3 рівнях у обраному кольорі.
Прев'ю · emerald-500
surfaceVariant=glass (3D-плита) vs flat (плоский tinted plane). 3 рівні — глибше = світліше. Опція Physical recipe знизу перемикає glass на Button-стиль (natural-light gradient).
Контент найглибшого рівня. Тут зазвичай форма / дрібний детайл.
canonical (Surface) · glass:
L1 face: #80DDA8 → #BFEFD2 (inverse: top-darker, bottom-lighter)
base: #1AA859
L2 face: #BFEFD2 → #E9F9EF
base: #41C77C
L3 face: #E9F9EF → #ffffff
base: #80DDA8
canonical (Surface) · flat:
L1 face: rgba(128,221,168,0.55) → rgba(233,249,239,0.35)
L2 face: #E9F9EF → #ffffff
L3 bg: #ffffff
structural chrome (NEW — applies to both flat and glass on all levels):
border: rgba(1,22,8,0.18) (was rgba(ramp[S-1], .7) — collapsed on light stops)
bottom rim: inset 0 -1px 0 rgba(1,22,8,0.07)
top inset: inset 0 1px 0 rgba(255,255,255,.78) (glass) / rgba(255,255,255,.85) (flat)
structural ink = darkestInk(ramp) = #011608 (hue's darkest tone for guaranteed shape visibility)