 DrSmoothl
|
3e943e8f0d
|
feat(ui): refresh theme tokens + add Popover/StatusDot/EmptyState/Kbd
Visual overhaul to give @snowluma/ui a coherent, accessible identity.
Tokens (styles/theme.css)
- Deeper dark-mode surface ramp with more contrast between background /
card / popover so dropdowns and dialogs read clearly in dark mode
- New radius scale (xs → 3xl) anchored at 0.625rem for tighter feel
- Layered shadow tokens (xs/sm/md/lg/xl) that adapt to mode
- Semantic success / warning / info / destructive colour + foreground
pairs replacing ad-hoc lookups
- `--chrome-height` (52px) for consistent top-bar / sidebar header height
- Utilities: `hover-lift`, `surface-glass`, `surface-gloss`; consumer-
scoped scrollbar styling so native scrollbars match
- Note: consumers must also `@import "tw-animate-css";`
Components
- Select: solid bg-popover + ring-1 ring-foreground/5; rotating chevron
on open state; rounded-xl menu with shadow-xl (fixes the transparent
dropdown bug)
- Dialog / AlertDialog: bg-popover + ring; backdrop-blur on overlay;
slide-in motion
- Tooltip: ring + zoom-in motion, max-w-xs for long labels
- Button: explicit transition list with active:translate-y-px; success /
warning variants; icon-xs size
- Input: hover border + focus ring + aria-invalid handling
- Card: tighter line-height + typography
- Badge: variants for success / warning / info / soft, size scale
- ScrollArea: hover-only mode by default, slightly thicker thumb
New components
- Popover (radix wrapper) — for menus / inline overlays
- StatusDot — semantic colored dot (replaces ad-hoc 🟢/🟡/🔴 emoji)
- EmptyState — uniform placeholder for "nothing here yet" surfaces
- Kbd — inline keyboard-key label
|
2026-05-17 13:56:11 +08:00 |
|
|
DrSmoothl
|
a8661ea216
|
feat(ui): add @snowluma/ui shared UI library
Lifts the shadcn primitives + Tailwind 4 theme tokens from webui into a
dedicated workspace package consumable by both webui and SnowLumaDesktop.
- 14 primitives (Button, Dialog, AlertDialog, Input, Label, Checkbox,
Select, Switch, Tabs, Card, Avatar, Badge, Progress, ScrollArea,
Separator, Sheet, Skeleton, Tooltip) + sonner Toaster wrapper
- Tailwind 4 theme tokens exported via styles/theme.css
- tsup ESM build with declaration files
- publishConfig.access=public mirroring @snowluma/sdk
Consumers @import '@snowluma/ui/styles/theme.css' for tokens and add an
@source directive to scan the package for utility classes.
|
2026-05-17 00:23:37 +08:00 |
|