Дії

Button

Tactile 3D-button. Експлорер: палітра → hue → stop, далі всі варіанти / розміри / іконки / стани в обраному кольорі. Це той самий <Button> з @residence/glass-ui — змінив колір тут, побачив у всіх застосунках одразу.

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

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

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

01 · Палітра

02 · Hue · Сапфір

03 · Stop · 500

Прев'ю · sapphire-500

Усе, що вміє Button — variants, sizes, icons, states — рендериться в обраному hue × stop через prop'и `ramp` + `stop`. Колір тексту обирається за luminance-threshold (≈0.60 на avg(mid,bot) градієнта), а не за номером stop — так amber-400 / sunflower-500 / citrine-500 правильно отримують білий, а pearl-700 / champagne-600 — тёмний.

Variantssolid / soft / subtle / outline / ghost

solid

soft

subtle

outline

ghost

Flat modifierorthogonal — той самий variant без rise, base wall і inset shadow

solid · flat

soft · flat

subtle · flat

outline · flat

ghost · flat

Sizesxs / sm / md / lg / xl · solid

Icons / iconOnlyleft / right / iconOnly у різних variant'ах

leftIcon · solid

rightIcon · soft

leftIcon · outline

leftIcon · subtle

iconOnly · ghost

iconOnly · subtle

iconOnly · solid

Statesloading / disabled / full-width

loading · solid

loading · soft

disabled (hue-agnostic)

full-width · solid

Recipesolid · linear-gradient(180deg) для sapphire-500

face: linear-gradient(180deg,
  #2C5BDF 0%,
  #1B45C8 44%,
  #1538A6 100%)
base: linear-gradient(180deg,
  #1B45C8 0%,
  #1538A6 56%,
  #102B82 100%)
text: #ffffff   mid lum=0.087   bot lum=0.057   avg=0.072   threshold=0.5