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

34
packages/ui/src/components/Modal.tsx
View File

@@ -25,7 +25,8 @@ export function Modal({
const dialogRef = useRef<HTMLDivElement>(null);
const modalId = useRef(`modal-${Math.random().toString(36).substring(2, 11)}`);
const sizeStyles = {
type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
const sizeStyles: Record<ModalSize, string> = {
sm: "max-w-md",
md: "max-w-lg",
lg: "max-w-2xl",
@@ -65,7 +66,8 @@ export function Modal({
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4"
className="fixed inset-0 z-50 flex items-center justify-center p-4"
style={{ background: "rgba(0,0,0,0.5)" }}
onClick={handleOverlayClick}
role="dialog"
aria-modal="true"
@@ -75,18 +77,30 @@ export function Modal({
<div
ref={dialogRef}
tabIndex={-1}
className={`bg-white rounded-lg shadow-xl w-full ${sizeStyles[size]} ${className}`}
className={`rounded-lg w-full ${sizeStyles[size]} ${className}`}
style={{
background: "var(--surface)",
border: "1px solid var(--border)",
}}
role="document"
>
{title && (
<div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
<h2 id={`${modalId.current}-title`} className="text-lg font-semibold text-gray-900">
<div
className="px-6 py-4 flex items-center justify-between"
style={{ borderBottom: "1px solid var(--border)" }}
>
<h2
id={`${modalId.current}-title`}
className="text-lg font-semibold"
style={{ color: "var(--text)" }}
>
{title}
</h2>
<button
type="button"
onClick={onClose}
className="text-gray-400 hover:text-gray-600 transition-colors p-1 rounded hover:bg-gray-100"
className="transition-colors p-1 rounded"
style={{ color: "var(--muted)" }}
aria-label="Close modal"
>
<svg
@@ -108,7 +122,13 @@ export function Modal({
)}
<div className="px-6 py-4 max-h-[70vh] overflow-y-auto">{children}</div>
{footer && (
<div className="px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg flex justify-end gap-2">
<div
className="px-6 py-4 rounded-b-lg flex justify-end gap-2"
style={{
borderTop: "1px solid var(--border)",
background: "var(--bg-mid)",
}}
>
{footer}
</div>
)}