mosaic/stack
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat(ui): align design tokens and update component variants (MS15-UI-001, MS15-UI-002)

Browse Source 
Replace hardcoded Tailwind color classes with CSS custom property inline
styles across all packages/ui components (Button, Card, Badge, Input,
Select, Textarea, Avatar, Modal, Toast).

Badge: add new variants (badge-teal, badge-amber, badge-blue, badge-purple,
badge-pulse) with mono font and pill shape.

Button: add success variant, hover states via React state.

Card: flat design, no shadows, semantic border/surface tokens.

New: Dot component (teal, blue, amber, red, muted) with glow effect.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jason Woltje
2026-02-22 15:04:00 -06:00
parent a5ed260fbd
commit 44011f4e27
11 changed files with 568 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/ui/src/components/Toast.tsx
View File

@@ -97,13 +97,37 @@ interface ToastItemProps {
onRemove: (id: string) => void;
}
interface ToastVariantStyle {
background: string;
border: string;
color: string;
}
const variantStyles: Record<ToastVariant, ToastVariantStyle> = {
success: {
background: "rgba(20,184,166,0.15)",
border: "1px solid rgba(20,184,166,0.35)",
color: "var(--success)",
},
error: {
background: "rgba(229,72,77,0.15)",
border: "1px solid rgba(229,72,77,0.35)",
color: "var(--danger)",
},
warning: {
background: "rgba(245,158,11,0.15)",
border: "1px solid rgba(245,158,11,0.35)",
color: "var(--warn)",
},
info: {
background: "rgba(47,128,255,0.15)",
border: "1px solid rgba(47,128,255,0.35)",
color: "var(--info)",
},
};
function ToastItem({ toast, onRemove }: ToastItemProps): ReactElement {
const variantStyles: Record<ToastVariant, string> = {
success: "bg-green-500 text-white border-green-600",
error: "bg-red-500 text-white border-red-600",
warning: "bg-yellow-500 text-white border-yellow-600",
info: "bg-blue-500 text-white border-blue-600",
};
const vStyle = variantStyles[toast.variant ?? "info"];
const icon: Record<ToastVariant, ReactNode> = {
success: (
@@ -146,7 +170,12 @@ function ToastItem({ toast, onRemove }: ToastItemProps): ReactElement {
return (
<div
className={`${variantStyles[toast.variant ?? "info"]} border rounded-md shadow-lg px-4 py-3 flex items-center gap-3 min-w-[300px] max-w-md`}
className="rounded-md px-4 py-3 flex items-center gap-3 min-w-[300px] max-w-md"
style={{
background: vStyle.background,
border: vStyle.border,
color: vStyle.color,
}}
role="alert"
>
<span className="flex-shrink-0">{icon[toast.variant ?? "info"]}</span>
@@ -155,7 +184,7 @@ function ToastItem({ toast, onRemove }: ToastItemProps): ReactElement {
onClick={() => {
onRemove(toast.id);
}}
className="flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity p-0.5 rounded hover:bg-white/20"
className="flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity p-0.5 rounded"
aria-label="Close notification"
>
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">