A comprehensive design system for building consistent and accessible user interfaces
npm install worklist-yh-design-systembash
npm install worklist-yh-design-system
`
$3
You MUST wrap your app with ThemeProvider for colors to work properly!
`tsx
import { ThemeProvider } from 'worklist-yh-design-system';
function App() {
return (
);
}
`
🎨 Built-in Color System
$3
- Primary: #00aae7 (Blue)
- Secondary: #0081af (Dark Blue)
- Background: #1e2530 (Dark)
- Text: #d0d0d0 (Light Gray)
- Border: #3f4859 (Medium Gray)
$3
- Blue (default): #00aae7
- Green: #10b981
- Purple: #8b5cf6
- Orange: #f59e0b
$3
`tsx
import { ThemeProvider, ThemeToggle } from 'worklist-yh-design-system';
function App() {
return (
{/ Toggle between dark/light mode /}
);
}
`
🧩 Components
$3
`tsx
import { Button } from 'worklist-yh-design-system';
// Variants
// Sizes
// States
`
$3
`tsx
import { Input } from 'worklist-yh-design-system';
// Basic usage
// Sizes
// States
`
$3
`tsx
import { Select } from 'worklist-yh-design-system';
// With states
`
$3
`tsx
import { Card } from 'worklist-yh-design-system';
// Variants
Default Card
Elevated Card
Outlined Card
Filled Card
// Sizes
Small Card
Medium Card
Large Card
// Interactive
Hoverable Card
Selectable Card
console.log('clicked')}>Clickable Card
`
$3
`tsx
import { Modal, ModalFooterDefault } from 'worklist-yh-design-system';
function MyModal() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
isOpen={isOpen}
onClose={() => setIsOpen(false)}
title="Modal Title"
size="md"
closable={true}
>
Modal content goes here
>
);
}
// With footer
isOpen={isOpen}
onClose={() => setIsOpen(false)}
title="Modal with Footer"
footer={
onCancel={() => setIsOpen(false)}
onConfirm={() => console.log('confirmed')}
cancelText="Cancel"
confirmText="Save"
confirmVariant="primary"
/>
}
>
Modal with action buttons
// Sizes
Small Modal
Medium Modal
Large Modal
Extra Large Modal
Full Screen Modal
`
$3
`tsx
import {
Table,
TableHeader,
TableBody,
TableRow,
TableHeaderCell,
TableCell,
TablePaginationContainer
} from 'worklist-yh-design-system';
function DataTable() {
const data = [
{ id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' },
];
return (
ID
Name
Email
Status
{data.map((item) => (
console.log('Row clicked')}>
{item.id}
{item.name}
{item.email}
{item.status}
))}
);
}
// Advanced Table with Expandable Rows
function AdvancedTable() {
const [expandedRows, setExpandedRows] = useState([]);
const toggleRow = (id: number) => {
setExpandedRows(prev =>
prev.includes(id)
? prev.filter(rowId => rowId !== id)
: [...prev, id]
);
};
return (
#
Name
Email
Status
Actions
{data.map((item) => (
onClick={() => toggleRow(item.id)}
isExpanded={expandedRows.includes(item.id)}
>
{item.id}
{item.name}
{item.email}
{item.status}
{expandedRows.includes(item.id) && (
Additional details for {item.name}
Email: {item.email}
)}
))}
Page 1 of 10
);
}
`
$3
`tsx
import { Icon } from 'worklist-yh-design-system';
// Available icons
// Traced versions
`
🎨 Theme System
$3
`tsx
import { ThemeProvider } from 'worklist-yh-design-system';
function App() {
return (
);
}
`
$3
`tsx
import { ThemeToggle } from 'worklist-yh-design-system';
function Header() {
return (
);
}
`
$3
`tsx
// Mode options
{ mode: 'dark' | 'light' }
// Color options
{ color: 'blue' | 'green' | 'purple' | 'orange' }
// Examples
`
🎨 Design Tokens
$3
All design tokens are automatically available as CSS variables:
`css
:root {
/ Brand Colors /
--color-brand-primary: #00aae7;
--color-brand-secondary: #0081af;
--color-brand-accent: #4b94fa;
/ Background Colors /
--color-brand-background-primary: #1e2530;
--color-brand-background-secondary: #2c3340;
--color-brand-background-tertiary: #3f4859;
/ Text Colors /
--color-brand-text-primary: #d0d0d0;
--color-brand-text-secondary: #acafb8;
--color-brand-text-inverse: #ffffff;
/ Border Colors /
--color-brand-border-primary: #3f4859;
--color-brand-border-secondary: #444;
/ Semantic Colors /
--color-brand-semantic-success-500: #10b981;
--color-brand-semantic-warning-500: #f59e0b;
--color-brand-semantic-error-500: #ef4444;
--color-brand-semantic-info-500: #3b82f6;
/ Spacing /
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
/ Typography /
--typography-fontSize-xs: 0.75rem;
--typography-fontSize-sm: 0.875rem;
--typography-fontSize-base: 1rem;
--typography-fontSize-lg: 1.125rem;
--typography-fontSize-xl: 1.25rem;
}
`
$3
`tsx
const CustomComponent = styled.div
;
`
📖 Documentation
All components are fully documented with examples in this README. Each component section includes:
- Complete usage examples with all variants and props
- Interactive code samples you can copy and use
- TypeScript type definitions for full IDE support
- CSS variable references for custom styling
🔧 Configuration
$3
All components and tokens include TypeScript type definitions.
$3
Design tokens are automatically injected as CSS variables when using ThemeProvider`.