Індикація

Badge

Compact status / metadata primitive — filters, counters, row chips, inline state. Експлорер: палітра → hue → stop, далі всі варіанти / shades / розміри / icon-dot-count / pill-disabled-loading в обраному кольорі. Реальна Badge тримає 21 hue у централізованому реєстрі; тут можна побачити, як виглядав би будь-який hue × stop із 54 у трьох сім'ях.

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

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

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

01 · Палітра

02 · Hue · Смарагд

03 · Stop · 500

Прев'ю · emerald-500

Усе, що вміє Badge — variants, shades, sizes, icon/dot/count, pill/disabled/loading — у вибраному hue × stop. Текст обирається за luminance-threshold (≈0.60 на avg(top,bot) градієнта) — так amber-400 / sunflower-500 / citrine-500 правильно отримують білий, а pearl-700 / champagne-600 — тёмний.

Variantssolid / subtle / outline / ghost

solidsolid

subtlesubtle

outlineoutline

ghostghost

Shades (variant=solid)light = S-1→S+1 · default = S→S+3 · dark = S+1→S+3

lightlight

defaultdefault

darkdark

Sizesxs / sm / md / lg / xl · solid

xsxs

smsm

mdmd

lglg

xlxl

With icon · dot · count

ГотовоleftIcon · solid

В очікуванніleftIcon · subtle

Простроченоdot · subtle

Активноdot · solid

Мешканці42count · subtle

Завдання7count · outline

Pill · disabled · loading

pill shapepill · solid

pill subtlepill · subtle

disableddisabled · outline

saving…loading · solid

loadingloading · subtle

Recipesolid · default shade — linear-gradient для emerald-500

face: linear-gradient(180deg,
  #0F8945 0%,
  #053D1F 100%)
border: rgba(11,111,55,0.28)
text: #ffffff   top lum=0.184   bot lum=0.035   avg=0.109   threshold=0.5