feat: Add complete Agentic Compaction & Pipeline System
- Context Compaction System with token counting and summarization - Deterministic State Machine for flow control (no LLM decisions) - Parallel Execution Engine (up to 12 concurrent sessions) - Event-Driven Coordination via Event Bus - Agent Workspace Isolation (tools, memory, identity, files) - YAML Workflow Integration (OpenClaw/Lobster compatible) - Claude Code integration layer - Complete demo UI with real-time visualization - Comprehensive documentation and README Components: - agent-system/: Context management, token counting, subagent spawning - pipeline-system/: State machine, parallel executor, event bus, workflows - skills/: AI capabilities (LLM, ASR, TTS, VLM, image generation, etc.) - src/app/: Next.js demo application Total: ~100KB of production-ready TypeScript code
This commit is contained in:
Z User
842
skills/frontend-design/examples/css/components.css
Executable file
842
skills/frontend-design/examples/css/components.css
Executable file
@@ -0,0 +1,842 @@
|
||||
/**
|
||||
* Component Styles — Production-Ready UI Components
|
||||
*
|
||||
* This file provides complete component implementations using the design token system.
|
||||
* All components include full state coverage and accessibility features.
|
||||
*
|
||||
* Location: {project_path}/skills/frontend-design/examples/css/components.css
|
||||
*
|
||||
* Dependencies: tokens.css must be imported first
|
||||
*/
|
||||
|
||||
/* Import design tokens */
|
||||
@import './tokens.css';
|
||||
|
||||
|
||||
/* ============================================
|
||||
BUTTONS
|
||||
============================================ */
|
||||
|
||||
/* Base button styles */
|
||||
.btn {
|
||||
/* Layout */
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-2);
|
||||
|
||||
/* Sizing */
|
||||
height: var(--button-height-md);
|
||||
padding-inline: var(--spacing-6);
|
||||
|
||||
/* Typography */
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
||||
/* Appearance */
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
/* Transitions */
|
||||
transition: var(--transition-colors), var(--transition-transform);
|
||||
|
||||
/* Accessibility */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: var(--focus-ring-offset);
|
||||
}
|
||||
|
||||
/* Primary button */
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background-color: var(--primary-hover);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary:active:not(:disabled) {
|
||||
background-color: var(--primary-active);
|
||||
transform: translateY(1px);
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
|
||||
/* Secondary button */
|
||||
.btn-secondary {
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-foreground);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary:active:not(:disabled) {
|
||||
background-color: var(--secondary-active);
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
/* Outline button */
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
color: var(--text);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.btn-outline:hover:not(:disabled) {
|
||||
background-color: var(--surface-hover);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.btn-outline:active:not(:disabled) {
|
||||
background-color: var(--surface-subtle);
|
||||
}
|
||||
|
||||
/* Ghost button */
|
||||
.btn-ghost {
|
||||
background-color: transparent;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn-ghost:hover:not(:disabled) {
|
||||
background-color: var(--surface-hover);
|
||||
}
|
||||
|
||||
.btn-ghost:active:not(:disabled) {
|
||||
background-color: var(--surface-subtle);
|
||||
}
|
||||
|
||||
/* Danger button */
|
||||
.btn-danger {
|
||||
background-color: var(--danger);
|
||||
color: var(--danger-foreground);
|
||||
}
|
||||
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background-color: oklch(from var(--danger) calc(l - 0.05) c h);
|
||||
}
|
||||
|
||||
/* Button sizes */
|
||||
.btn-sm {
|
||||
height: var(--button-height-sm);
|
||||
padding-inline: var(--spacing-4);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
height: var(--button-height-lg);
|
||||
padding-inline: var(--spacing-8);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
/* Icon-only button */
|
||||
.btn-icon {
|
||||
padding: 0;
|
||||
width: var(--button-height-md);
|
||||
}
|
||||
|
||||
.btn-icon.btn-sm {
|
||||
width: var(--button-height-sm);
|
||||
}
|
||||
|
||||
.btn-icon.btn-lg {
|
||||
width: var(--button-height-lg);
|
||||
}
|
||||
|
||||
/* Disabled state */
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Loading state */
|
||||
.btn-loading {
|
||||
position: relative;
|
||||
color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-loading::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: var(--radius-full);
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
INPUTS & FORMS
|
||||
============================================ */
|
||||
|
||||
/* Input base */
|
||||
.input {
|
||||
/* Layout */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: var(--input-height-md);
|
||||
padding-inline: var(--spacing-4);
|
||||
|
||||
/* Typography */
|
||||
font-size: var(--font-size-base);
|
||||
line-height: 1.5;
|
||||
color: var(--text);
|
||||
|
||||
/* Appearance */
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
|
||||
/* Transitions */
|
||||
transition: var(--transition-colors), border-color var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.input:hover:not(:disabled):not(:focus) {
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px var(--primary-subtle);
|
||||
}
|
||||
|
||||
.input:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background-color: var(--surface-subtle);
|
||||
}
|
||||
|
||||
/* Input with error */
|
||||
.input-error {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.input-error:focus {
|
||||
border-color: var(--danger);
|
||||
box-shadow: 0 0 0 3px var(--danger-subtle);
|
||||
}
|
||||
|
||||
/* Input sizes */
|
||||
.input-sm {
|
||||
height: var(--input-height-sm);
|
||||
padding-inline: var(--spacing-3);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.input-lg {
|
||||
height: var(--input-height-lg);
|
||||
padding-inline: var(--spacing-6);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
/* Textarea */
|
||||
.textarea {
|
||||
min-height: 5rem;
|
||||
padding-block: var(--spacing-3);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.label {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--text);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.label-required::after {
|
||||
content: ' *';
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* Helper text */
|
||||
.helper-text {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-muted);
|
||||
margin-top: var(--spacing-1-5);
|
||||
}
|
||||
|
||||
.helper-text-error {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* Form group */
|
||||
.form-group {
|
||||
margin-bottom: var(--spacing-6);
|
||||
}
|
||||
|
||||
/* Select */
|
||||
.select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M4.5 6L8 9.5L11.5 6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right var(--spacing-3) center;
|
||||
padding-right: var(--spacing-10);
|
||||
}
|
||||
|
||||
/* Checkbox & Radio */
|
||||
.checkbox,
|
||||
.radio {
|
||||
appearance: none;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: var(--radius-xs);
|
||||
background-color: var(--background);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: var(--transition-colors);
|
||||
}
|
||||
|
||||
.radio {
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.checkbox:checked,
|
||||
.radio:checked {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.checkbox:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 5px;
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
border: 2px solid white;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.radio:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: white;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
CARDS
|
||||
============================================ */
|
||||
|
||||
.card {
|
||||
background-color: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-6);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: var(--transition-all);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
margin-bottom: var(--spacing-4);
|
||||
padding-bottom: var(--spacing-4);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--spacing-2);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
margin-top: var(--spacing-4);
|
||||
padding-top: var(--spacing-4);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
/* Card variants */
|
||||
.card-interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-interactive:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.card-interactive:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
BADGES & TAGS
|
||||
============================================ */
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-1);
|
||||
padding: var(--spacing-0-5) var(--spacing-2);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1;
|
||||
border-radius: var(--radius-xs);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background-color: var(--primary-subtle);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
background-color: var(--secondary-subtle);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background-color: var(--success-subtle);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background-color: var(--warning-subtle);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background-color: var(--danger-subtle);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
ALERTS
|
||||
============================================ */
|
||||
|
||||
.alert {
|
||||
padding: var(--spacing-4);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid transparent;
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
flex-shrink: 0;
|
||||
width: var(--icon-lg);
|
||||
height: var(--icon-lg);
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
margin-bottom: var(--spacing-1);
|
||||
}
|
||||
|
||||
.alert-description {
|
||||
font-size: var(--font-size-sm);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: var(--info-subtle);
|
||||
color: var(--info);
|
||||
border-color: var(--info);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: var(--success-subtle);
|
||||
color: var(--success);
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: var(--warning-subtle);
|
||||
color: var(--warning);
|
||||
border-color: var(--warning);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: var(--danger-subtle);
|
||||
color: var(--danger);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
MODALS
|
||||
============================================ */
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: var(--overlay);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-4);
|
||||
z-index: var(--z-modal-backdrop);
|
||||
animation: fade-in var(--duration-base) var(--ease-out);
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: var(--surface);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-2xl);
|
||||
max-width: 32rem;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
overflow: auto;
|
||||
animation: modal-enter var(--duration-base) var(--ease-out);
|
||||
z-index: var(--z-modal);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: var(--spacing-6);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: var(--spacing-2);
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: var(--transition-colors);
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background-color: var(--surface-hover);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: var(--spacing-6);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: var(--spacing-6);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-1rem) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
TOOLTIPS
|
||||
============================================ */
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-0.5rem);
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
background-color: var(--text);
|
||||
color: var(--text-inverse);
|
||||
font-size: var(--font-size-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: var(--transition-opacity);
|
||||
z-index: var(--z-tooltip);
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltip-content {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tooltip-content::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 4px solid transparent;
|
||||
border-top-color: var(--text);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
LOADING SKELETON
|
||||
============================================ */
|
||||
|
||||
.skeleton {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--surface-subtle) 0%,
|
||||
var(--surface-hover) 50%,
|
||||
var(--surface-subtle) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s ease-in-out infinite;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.skeleton-text {
|
||||
height: 1em;
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.skeleton-title {
|
||||
height: 1.5em;
|
||||
width: 60%;
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
.skeleton-avatar {
|
||||
width: var(--avatar-md);
|
||||
height: var(--avatar-md);
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
height: 12rem;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
AVATARS
|
||||
============================================ */
|
||||
|
||||
.avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--avatar-md);
|
||||
height: var(--avatar-md);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
background-color: var(--surface-subtle);
|
||||
color: var(--text);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
width: var(--avatar-sm);
|
||||
height: var(--avatar-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
width: var(--avatar-lg);
|
||||
height: var(--avatar-lg);
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
EMPTY STATES
|
||||
============================================ */
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: var(--spacing-16) var(--spacing-8);
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
width: var(--spacing-16);
|
||||
height: var(--spacing-16);
|
||||
margin: 0 auto var(--spacing-6);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-state-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.empty-state-description {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-6);
|
||||
max-width: 28rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.empty-state-action {
|
||||
margin-top: var(--spacing-6);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
ERROR STATES
|
||||
============================================ */
|
||||
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: var(--spacing-12) var(--spacing-8);
|
||||
background-color: var(--danger-subtle);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--danger);
|
||||
}
|
||||
|
||||
.error-state-icon {
|
||||
width: var(--spacing-12);
|
||||
height: var(--spacing-12);
|
||||
margin: 0 auto var(--spacing-4);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.error-state-title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--danger);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.error-state-message {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--text);
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
.error-state-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
justify-content: center;
|
||||
margin-top: var(--spacing-4);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE UTILITIES
|
||||
============================================ */
|
||||
|
||||
/* Hide on mobile */
|
||||
@media (max-width: 767px) {
|
||||
.hide-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide on tablet and up */
|
||||
@media (min-width: 768px) {
|
||||
.hide-tablet {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide on desktop */
|
||||
@media (min-width: 1024px) {
|
||||
.hide-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
525
skills/frontend-design/examples/css/tokens.css
Executable file
525
skills/frontend-design/examples/css/tokens.css
Executable file
@@ -0,0 +1,525 @@
|
||||
/**
|
||||
* Design Tokens — Complete CSS Custom Properties System
|
||||
*
|
||||
* This file provides a comprehensive design token system for consistent UI development.
|
||||
* It includes semantic color slots, typography scales, spacing, radius, shadows, and motion.
|
||||
*
|
||||
* Usage:
|
||||
* 1. Import this file in your globals.css: @import './tokens.css';
|
||||
* 2. Reference tokens using var(--token-name)
|
||||
* 3. Override in [data-theme="dark"] for dark mode
|
||||
*
|
||||
* Location: {project_path}/skills/frontend-design/examples/css/tokens.css
|
||||
*/
|
||||
|
||||
/* ============================================
|
||||
COLOR SYSTEM - Semantic Tokens
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* Background & Surfaces */
|
||||
--background: oklch(99% 0 0); /* Main page background */
|
||||
--surface: oklch(100% 0 0); /* Card/panel background */
|
||||
--surface-subtle: oklch(98% 0.005 250); /* Subtle surface variant */
|
||||
--surface-hover: oklch(97% 0.01 250); /* Hover state for surfaces */
|
||||
|
||||
/* Text Colors */
|
||||
--text: oklch(20% 0.01 250); /* Primary text */
|
||||
--text-secondary: oklch(45% 0.015 250); /* Secondary text */
|
||||
--text-muted: oklch(60% 0.01 250); /* Muted/helper text */
|
||||
--text-inverse: oklch(98% 0 0); /* Text on dark backgrounds */
|
||||
|
||||
/* Borders */
|
||||
--border: oklch(90% 0.005 250); /* Standard borders */
|
||||
--border-subtle: oklch(95% 0.003 250); /* Subtle dividers */
|
||||
--border-strong: oklch(75% 0.01 250); /* Emphasized borders */
|
||||
|
||||
/* Primary Brand */
|
||||
--primary: oklch(55% 0.18 250); /* Primary brand color */
|
||||
--primary-hover: oklch(50% 0.20 250); /* Primary hover state */
|
||||
--primary-active: oklch(45% 0.22 250); /* Primary active/pressed */
|
||||
--primary-subtle: oklch(95% 0.03 250); /* Primary tint background */
|
||||
--primary-muted: oklch(85% 0.08 250); /* Primary muted variant */
|
||||
--primary-foreground: oklch(98% 0.01 250); /* Text on primary */
|
||||
|
||||
/* Secondary */
|
||||
--secondary: oklch(65% 0.08 280); /* Secondary accent */
|
||||
--secondary-hover: oklch(60% 0.10 280); /* Secondary hover */
|
||||
--secondary-active: oklch(55% 0.12 280); /* Secondary active */
|
||||
--secondary-subtle: oklch(95% 0.02 280); /* Secondary tint */
|
||||
--secondary-foreground: oklch(98% 0.01 280); /* Text on secondary */
|
||||
|
||||
/* Accent */
|
||||
--accent: oklch(70% 0.15 160); /* Accent highlights */
|
||||
--accent-hover: oklch(65% 0.17 160); /* Accent hover */
|
||||
--accent-foreground: oklch(10% 0.01 160); /* Text on accent */
|
||||
|
||||
/* Semantic Colors */
|
||||
--success: oklch(65% 0.15 145); /* Success states */
|
||||
--success-subtle: oklch(95% 0.03 145); /* Success background */
|
||||
--success-foreground: oklch(98% 0.01 145); /* Text on success */
|
||||
|
||||
--warning: oklch(75% 0.15 85); /* Warning states */
|
||||
--warning-subtle: oklch(95% 0.05 85); /* Warning background */
|
||||
--warning-foreground: oklch(15% 0.02 85); /* Text on warning */
|
||||
|
||||
--danger: oklch(60% 0.20 25); /* Error/danger states */
|
||||
--danger-subtle: oklch(95% 0.04 25); /* Error background */
|
||||
--danger-foreground: oklch(98% 0.01 25); /* Text on danger */
|
||||
|
||||
--info: oklch(65% 0.12 230); /* Info states */
|
||||
--info-subtle: oklch(95% 0.02 230); /* Info background */
|
||||
--info-foreground: oklch(98% 0.01 230); /* Text on info */
|
||||
|
||||
/* Overlays & Scrim */
|
||||
--overlay: oklch(0% 0 0 / 0.5); /* Modal overlay */
|
||||
--scrim: oklch(0% 0 0 / 0.3); /* Backdrop scrim */
|
||||
}
|
||||
|
||||
/* Dark Mode Color Adjustments */
|
||||
[data-theme="dark"] {
|
||||
/* Background & Surfaces */
|
||||
--background: oklch(15% 0.01 250);
|
||||
--surface: oklch(20% 0.015 250);
|
||||
--surface-subtle: oklch(25% 0.02 250);
|
||||
--surface-hover: oklch(30% 0.025 250);
|
||||
|
||||
/* Text Colors */
|
||||
--text: oklch(95% 0.01 250);
|
||||
--text-secondary: oklch(70% 0.015 250);
|
||||
--text-muted: oklch(55% 0.01 250);
|
||||
--text-inverse: oklch(15% 0 0);
|
||||
|
||||
/* Borders */
|
||||
--border: oklch(35% 0.01 250);
|
||||
--border-subtle: oklch(25% 0.005 250);
|
||||
--border-strong: oklch(50% 0.015 250);
|
||||
|
||||
/* Primary Brand (adjusted for dark) */
|
||||
--primary: oklch(65% 0.18 250);
|
||||
--primary-hover: oklch(70% 0.20 250);
|
||||
--primary-active: oklch(75% 0.22 250);
|
||||
--primary-subtle: oklch(25% 0.08 250);
|
||||
--primary-muted: oklch(35% 0.12 250);
|
||||
--primary-foreground: oklch(10% 0.01 250);
|
||||
|
||||
/* Secondary */
|
||||
--secondary: oklch(70% 0.08 280);
|
||||
--secondary-hover: oklch(75% 0.10 280);
|
||||
--secondary-active: oklch(80% 0.12 280);
|
||||
--secondary-subtle: oklch(25% 0.04 280);
|
||||
--secondary-foreground: oklch(10% 0.01 280);
|
||||
|
||||
/* Accent */
|
||||
--accent: oklch(75% 0.15 160);
|
||||
--accent-hover: oklch(80% 0.17 160);
|
||||
--accent-foreground: oklch(10% 0.01 160);
|
||||
|
||||
/* Semantic Colors (adjusted) */
|
||||
--success: oklch(70% 0.15 145);
|
||||
--success-subtle: oklch(22% 0.06 145);
|
||||
|
||||
--warning: oklch(80% 0.15 85);
|
||||
--warning-subtle: oklch(25% 0.08 85);
|
||||
|
||||
--danger: oklch(65% 0.20 25);
|
||||
--danger-subtle: oklch(22% 0.08 25);
|
||||
|
||||
--info: oklch(70% 0.12 230);
|
||||
--info-subtle: oklch(22% 0.05 230);
|
||||
|
||||
/* Overlays */
|
||||
--overlay: oklch(0% 0 0 / 0.7);
|
||||
--scrim: oklch(0% 0 0 / 0.5);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
TYPOGRAPHY SCALE
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* Font Families */
|
||||
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-serif: 'Merriweather', Georgia, serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
|
||||
/* Font Sizes - Using clamp() for fluid typography */
|
||||
--font-size-xs: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem); /* 12-14px */
|
||||
--font-size-sm: clamp(0.875rem, 0.8rem + 0.2vw, 1rem); /* 14-16px */
|
||||
--font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16-18px */
|
||||
--font-size-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18-20px */
|
||||
--font-size-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); /* 20-24px */
|
||||
--font-size-2xl: clamp(1.5rem, 1.35rem + 0.6vw, 2rem); /* 24-32px */
|
||||
--font-size-3xl: clamp(1.875rem, 1.65rem + 0.9vw, 2.5rem); /* 30-40px */
|
||||
--font-size-4xl: clamp(2.25rem, 1.95rem + 1.2vw, 3.5rem); /* 36-56px */
|
||||
--font-size-5xl: clamp(3rem, 2.5rem + 2vw, 4.5rem); /* 48-72px */
|
||||
|
||||
/* Line Heights */
|
||||
--line-height-none: 1;
|
||||
--line-height-tight: 1.25;
|
||||
--line-height-snug: 1.375;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.625;
|
||||
--line-height-loose: 2;
|
||||
|
||||
/* Font Weights */
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-extrabold: 800;
|
||||
|
||||
/* Letter Spacing */
|
||||
--letter-spacing-tighter: -0.05em;
|
||||
--letter-spacing-tight: -0.025em;
|
||||
--letter-spacing-normal: 0;
|
||||
--letter-spacing-wide: 0.025em;
|
||||
--letter-spacing-wider: 0.05em;
|
||||
--letter-spacing-widest: 0.1em;
|
||||
}
|
||||
|
||||
/* Typography Presets */
|
||||
.text-display {
|
||||
font-size: var(--font-size-5xl);
|
||||
line-height: var(--line-height-tight);
|
||||
font-weight: var(--font-weight-extrabold);
|
||||
letter-spacing: var(--letter-spacing-tighter);
|
||||
}
|
||||
|
||||
.text-h1 {
|
||||
font-size: var(--font-size-4xl);
|
||||
line-height: var(--line-height-tight);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: var(--letter-spacing-tight);
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: var(--font-size-3xl);
|
||||
line-height: var(--line-height-snug);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.text-h3 {
|
||||
font-size: var(--font-size-2xl);
|
||||
line-height: var(--line-height-snug);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.text-h4 {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--line-height-normal);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.text-body {
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-relaxed);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
.text-small {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-normal);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
.text-caption {
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: var(--line-height-normal);
|
||||
font-weight: var(--font-weight-normal);
|
||||
letter-spacing: var(--letter-spacing-wide);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
SPACING SCALE (8px System)
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
--spacing-0: 0;
|
||||
--spacing-px: 1px;
|
||||
--spacing-0-5: 0.125rem; /* 2px */
|
||||
--spacing-1: 0.25rem; /* 4px */
|
||||
--spacing-1-5: 0.375rem; /* 6px */
|
||||
--spacing-2: 0.5rem; /* 8px */
|
||||
--spacing-2-5: 0.625rem; /* 10px */
|
||||
--spacing-3: 0.75rem; /* 12px */
|
||||
--spacing-4: 1rem; /* 16px */
|
||||
--spacing-5: 1.25rem; /* 20px */
|
||||
--spacing-6: 1.5rem; /* 24px */
|
||||
--spacing-7: 1.75rem; /* 28px */
|
||||
--spacing-8: 2rem; /* 32px */
|
||||
--spacing-9: 2.25rem; /* 36px */
|
||||
--spacing-10: 2.5rem; /* 40px */
|
||||
--spacing-12: 3rem; /* 48px */
|
||||
--spacing-14: 3.5rem; /* 56px */
|
||||
--spacing-16: 4rem; /* 64px */
|
||||
--spacing-20: 5rem; /* 80px */
|
||||
--spacing-24: 6rem; /* 96px */
|
||||
--spacing-28: 7rem; /* 112px */
|
||||
--spacing-32: 8rem; /* 128px */
|
||||
--spacing-36: 9rem; /* 144px */
|
||||
--spacing-40: 10rem; /* 160px */
|
||||
--spacing-48: 12rem; /* 192px */
|
||||
--spacing-56: 14rem; /* 224px */
|
||||
--spacing-64: 16rem; /* 256px */
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
BORDER RADIUS SCALE
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
--radius-none: 0;
|
||||
--radius-xs: 0.125rem; /* 2px - badges, tags */
|
||||
--radius-sm: 0.25rem; /* 4px - buttons, small inputs */
|
||||
--radius-md: 0.375rem; /* 6px - inputs, cards */
|
||||
--radius-lg: 0.5rem; /* 8px - large cards */
|
||||
--radius-xl: 0.75rem; /* 12px - modals, panels */
|
||||
--radius-2xl: 1rem; /* 16px - hero sections */
|
||||
--radius-3xl: 1.5rem; /* 24px - special elements */
|
||||
--radius-full: 9999px; /* Pills, avatars, circles */
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
SHADOW SCALE
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* Light Mode Shadows */
|
||||
--shadow-xs: 0 1px 2px 0 oklch(0% 0 0 / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0 oklch(0% 0 0 / 0.1),
|
||||
0 1px 2px -1px oklch(0% 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1),
|
||||
0 2px 4px -2px oklch(0% 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.1),
|
||||
0 4px 6px -4px oklch(0% 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.1),
|
||||
0 8px 10px -6px oklch(0% 0 0 / 0.1);
|
||||
--shadow-2xl: 0 25px 50px -12px oklch(0% 0 0 / 0.25);
|
||||
|
||||
/* Colored Shadows (for accents) */
|
||||
--shadow-primary: 0 4px 12px -2px var(--primary),
|
||||
0 2px 6px -2px var(--primary);
|
||||
--shadow-secondary: 0 4px 12px -2px var(--secondary),
|
||||
0 2px 6px -2px var(--secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
/* Stronger shadows for dark mode */
|
||||
--shadow-xs: 0 1px 2px 0 oklch(0% 0 0 / 0.3);
|
||||
--shadow-sm: 0 1px 3px 0 oklch(0% 0 0 / 0.4),
|
||||
0 1px 2px -1px oklch(0% 0 0 / 0.3);
|
||||
--shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.4),
|
||||
0 2px 4px -2px oklch(0% 0 0 / 0.3);
|
||||
--shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.5),
|
||||
0 4px 6px -4px oklch(0% 0 0 / 0.4);
|
||||
--shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.5),
|
||||
0 8px 10px -6px oklch(0% 0 0 / 0.4);
|
||||
--shadow-2xl: 0 25px 50px -12px oklch(0% 0 0 / 0.6);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
MOTION TOKENS
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* Duration */
|
||||
--duration-instant: 0ms;
|
||||
--duration-fast: 150ms;
|
||||
--duration-base: 220ms;
|
||||
--duration-slow: 300ms;
|
||||
--duration-slower: 400ms;
|
||||
|
||||
/* Easing Functions */
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
/* Common Transitions */
|
||||
--transition-colors: color var(--duration-fast) var(--ease-out),
|
||||
background-color var(--duration-fast) var(--ease-out),
|
||||
border-color var(--duration-fast) var(--ease-out);
|
||||
--transition-transform: transform var(--duration-base) var(--ease-out);
|
||||
--transition-opacity: opacity var(--duration-base) var(--ease-out);
|
||||
--transition-all: all var(--duration-base) var(--ease-in-out);
|
||||
}
|
||||
|
||||
/* Respect Reduced Motion Preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
:root {
|
||||
--duration-instant: 0ms;
|
||||
--duration-fast: 0ms;
|
||||
--duration-base: 0ms;
|
||||
--duration-slow: 0ms;
|
||||
--duration-slower: 0ms;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
LAYOUT & CONTAINER
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* Container widths */
|
||||
--container-sm: 640px;
|
||||
--container-md: 768px;
|
||||
--container-lg: 1024px;
|
||||
--container-xl: 1280px;
|
||||
--container-2xl: 1536px;
|
||||
|
||||
/* Breakpoints (for reference in JS) */
|
||||
--breakpoint-sm: 640px;
|
||||
--breakpoint-md: 768px;
|
||||
--breakpoint-lg: 1024px;
|
||||
--breakpoint-xl: 1280px;
|
||||
--breakpoint-2xl: 1536px;
|
||||
|
||||
/* Z-index scale */
|
||||
--z-base: 0;
|
||||
--z-dropdown: 1000;
|
||||
--z-sticky: 1100;
|
||||
--z-fixed: 1200;
|
||||
--z-modal-backdrop: 1300;
|
||||
--z-modal: 1400;
|
||||
--z-popover: 1500;
|
||||
--z-tooltip: 1600;
|
||||
--z-notification: 1700;
|
||||
--z-max: 9999;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
COMPONENT DENSITY
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* Button heights */
|
||||
--button-height-sm: 2.25rem; /* 36px */
|
||||
--button-height-md: 2.75rem; /* 44px */
|
||||
--button-height-lg: 3rem; /* 48px */
|
||||
|
||||
/* Input heights */
|
||||
--input-height-sm: 2.25rem; /* 36px */
|
||||
--input-height-md: 2.5rem; /* 40px */
|
||||
--input-height-lg: 3rem; /* 48px */
|
||||
|
||||
/* Icon sizes */
|
||||
--icon-xs: 0.75rem; /* 12px */
|
||||
--icon-sm: 1rem; /* 16px */
|
||||
--icon-md: 1.25rem; /* 20px */
|
||||
--icon-lg: 1.5rem; /* 24px */
|
||||
--icon-xl: 2rem; /* 32px */
|
||||
--icon-2xl: 2.5rem; /* 40px */
|
||||
|
||||
/* Avatar sizes */
|
||||
--avatar-xs: 1.5rem; /* 24px */
|
||||
--avatar-sm: 2rem; /* 32px */
|
||||
--avatar-md: 2.5rem; /* 40px */
|
||||
--avatar-lg: 3rem; /* 48px */
|
||||
--avatar-xl: 4rem; /* 64px */
|
||||
--avatar-2xl: 6rem; /* 96px */
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
FOCUS & ACCESSIBILITY
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
--focus-ring-width: 2px;
|
||||
--focus-ring-offset: 2px;
|
||||
--focus-ring-color: var(--primary);
|
||||
}
|
||||
|
||||
/* Default focus style */
|
||||
:focus-visible {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: var(--focus-ring-offset);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* Remove default outline, apply custom */
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
*:focus-visible {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: var(--focus-ring-offset);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
USAGE EXAMPLES
|
||||
============================================ */
|
||||
|
||||
/*
|
||||
Example 1: Button with tokens
|
||||
.button {
|
||||
height: var(--button-height-md);
|
||||
padding-inline: var(--spacing-6);
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
transition: var(--transition-colors);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background-color: var(--primary-active);
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
Example 2: Card with tokens
|
||||
.card {
|
||||
background-color: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-6);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: var(--transition-all);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
Example 3: Typography with tokens
|
||||
.heading {
|
||||
font-size: var(--font-size-3xl);
|
||||
line-height: var(--line-height-tight);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--text);
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-relaxed);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-6);
|
||||
}
|
||||
*/
|
||||
616
skills/frontend-design/examples/typescript/design-tokens.ts
Executable file
616
skills/frontend-design/examples/typescript/design-tokens.ts
Executable file
@@ -0,0 +1,616 @@
|
||||
/**
|
||||
* Design Tokens — Type-Safe Token Definitions
|
||||
*
|
||||
* This file provides TypeScript interfaces and types for the design token system.
|
||||
* Use these to ensure type safety when working with design tokens programmatically.
|
||||
*
|
||||
* Location: {project_path}/skills/frontend-design/examples/typescript/design-tokens.ts
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// Color Tokens
|
||||
// ============================================
|
||||
|
||||
export interface ColorTokens {
|
||||
// Background & Surfaces
|
||||
background: string;
|
||||
surface: string;
|
||||
surfaceSubtle: string;
|
||||
surfaceHover: string;
|
||||
|
||||
// Text
|
||||
text: string;
|
||||
textSecondary: string;
|
||||
textMuted: string;
|
||||
textInverse: string;
|
||||
|
||||
// Borders
|
||||
border: string;
|
||||
borderSubtle: string;
|
||||
borderStrong: string;
|
||||
|
||||
// Primary
|
||||
primary: string;
|
||||
primaryHover: string;
|
||||
primaryActive: string;
|
||||
primarySubtle: string;
|
||||
primaryMuted: string;
|
||||
primaryForeground: string;
|
||||
|
||||
// Secondary
|
||||
secondary: string;
|
||||
secondaryHover: string;
|
||||
secondaryActive: string;
|
||||
secondarySubtle: string;
|
||||
secondaryForeground: string;
|
||||
|
||||
// Accent
|
||||
accent: string;
|
||||
accentHover: string;
|
||||
accentForeground: string;
|
||||
|
||||
// Semantic Colors
|
||||
success: string;
|
||||
successSubtle: string;
|
||||
successForeground: string;
|
||||
|
||||
warning: string;
|
||||
warningSubtle: string;
|
||||
warningForeground: string;
|
||||
|
||||
danger: string;
|
||||
dangerSubtle: string;
|
||||
dangerForeground: string;
|
||||
|
||||
info: string;
|
||||
infoSubtle: string;
|
||||
infoForeground: string;
|
||||
|
||||
// Overlays
|
||||
overlay: string;
|
||||
scrim: string;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Typography Tokens
|
||||
// ============================================
|
||||
|
||||
export interface TypographyToken {
|
||||
fontSize: string;
|
||||
lineHeight: string;
|
||||
fontWeight: number;
|
||||
letterSpacing?: string;
|
||||
}
|
||||
|
||||
export interface TypographyTokens {
|
||||
display: TypographyToken;
|
||||
h1: TypographyToken;
|
||||
h2: TypographyToken;
|
||||
h3: TypographyToken;
|
||||
h4: TypographyToken;
|
||||
body: TypographyToken;
|
||||
bodySmall: TypographyToken;
|
||||
caption: TypographyToken;
|
||||
mono: TypographyToken;
|
||||
}
|
||||
|
||||
// Font families
|
||||
export interface FontFamilies {
|
||||
sans: string;
|
||||
serif: string;
|
||||
mono: string;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Spacing Tokens
|
||||
// ============================================
|
||||
|
||||
export interface SpacingTokens {
|
||||
0: string;
|
||||
px: string;
|
||||
0.5: string;
|
||||
1: string;
|
||||
1.5: string;
|
||||
2: string;
|
||||
2.5: string;
|
||||
3: string;
|
||||
4: string;
|
||||
5: string;
|
||||
6: string;
|
||||
7: string;
|
||||
8: string;
|
||||
9: string;
|
||||
10: string;
|
||||
12: string;
|
||||
14: string;
|
||||
16: string;
|
||||
20: string;
|
||||
24: string;
|
||||
28: string;
|
||||
32: string;
|
||||
36: string;
|
||||
40: string;
|
||||
48: string;
|
||||
56: string;
|
||||
64: string;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Radius Tokens
|
||||
// ============================================
|
||||
|
||||
export interface RadiusTokens {
|
||||
none: string;
|
||||
xs: string;
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
xl: string;
|
||||
'2xl': string;
|
||||
'3xl': string;
|
||||
full: string;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Shadow Tokens
|
||||
// ============================================
|
||||
|
||||
export interface ShadowTokens {
|
||||
xs: string;
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
xl: string;
|
||||
'2xl': string;
|
||||
primary: string;
|
||||
secondary: string;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Motion Tokens
|
||||
// ============================================
|
||||
|
||||
export interface MotionTokens {
|
||||
// Durations
|
||||
instant: string;
|
||||
fast: string;
|
||||
base: string;
|
||||
slow: string;
|
||||
slower: string;
|
||||
|
||||
// Easings
|
||||
easeIn: string;
|
||||
easeOut: string;
|
||||
easeInOut: string;
|
||||
easeBounce: string;
|
||||
|
||||
// Common transitions
|
||||
transitionColors: string;
|
||||
transitionTransform: string;
|
||||
transitionOpacity: string;
|
||||
transitionAll: string;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Component Size Tokens
|
||||
// ============================================
|
||||
|
||||
export interface ComponentSizeTokens {
|
||||
button: {
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
};
|
||||
input: {
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
};
|
||||
icon: {
|
||||
xs: string;
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
xl: string;
|
||||
'2xl': string;
|
||||
};
|
||||
avatar: {
|
||||
xs: string;
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
xl: string;
|
||||
'2xl': string;
|
||||
};
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Z-Index Tokens
|
||||
// ============================================
|
||||
|
||||
export interface ZIndexTokens {
|
||||
base: number;
|
||||
dropdown: number;
|
||||
sticky: number;
|
||||
fixed: number;
|
||||
modalBackdrop: number;
|
||||
modal: number;
|
||||
popover: number;
|
||||
tooltip: number;
|
||||
notification: number;
|
||||
max: number;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Complete Design System
|
||||
// ============================================
|
||||
|
||||
export interface DesignTokens {
|
||||
colors: ColorTokens;
|
||||
typography: TypographyTokens;
|
||||
fontFamilies: FontFamilies;
|
||||
spacing: SpacingTokens;
|
||||
radius: RadiusTokens;
|
||||
shadows: ShadowTokens;
|
||||
motion: MotionTokens;
|
||||
componentSizes: ComponentSizeTokens;
|
||||
zIndex: ZIndexTokens;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Theme Type
|
||||
// ============================================
|
||||
|
||||
export type Theme = 'light' | 'dark' | 'system';
|
||||
|
||||
export interface ThemeConfig {
|
||||
theme: Theme;
|
||||
tokens: DesignTokens;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Token Helpers
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Get CSS variable name for a token
|
||||
* @param tokenPath - Dot-separated path to token (e.g., 'colors.primary')
|
||||
* @returns CSS variable name (e.g., '--primary')
|
||||
*/
|
||||
export function getCSSVariable(tokenPath: string): string {
|
||||
const parts = tokenPath.split('.');
|
||||
const tokenName = parts[parts.length - 1];
|
||||
|
||||
// Convert camelCase to kebab-case
|
||||
const kebabCase = tokenName.replace(/([A-Z])/g, '-$1').toLowerCase();
|
||||
|
||||
return `var(--${kebabCase})`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get token value from design system
|
||||
* @param tokens - Design tokens object
|
||||
* @param path - Dot-separated path to token
|
||||
* @returns Token value or undefined
|
||||
*/
|
||||
export function getTokenValue(tokens: DesignTokens, path: string): string | undefined {
|
||||
const parts = path.split('.');
|
||||
let value: any = tokens;
|
||||
|
||||
for (const part of parts) {
|
||||
if (value && typeof value === 'object' && part in value) {
|
||||
value = value[part];
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
return typeof value === 'string' ? value : undefined;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Default Light Theme Tokens
|
||||
// ============================================
|
||||
|
||||
export const lightThemeTokens: DesignTokens = {
|
||||
colors: {
|
||||
background: 'oklch(99% 0 0)',
|
||||
surface: 'oklch(100% 0 0)',
|
||||
surfaceSubtle: 'oklch(98% 0.005 250)',
|
||||
surfaceHover: 'oklch(97% 0.01 250)',
|
||||
|
||||
text: 'oklch(20% 0.01 250)',
|
||||
textSecondary: 'oklch(45% 0.015 250)',
|
||||
textMuted: 'oklch(60% 0.01 250)',
|
||||
textInverse: 'oklch(98% 0 0)',
|
||||
|
||||
border: 'oklch(90% 0.005 250)',
|
||||
borderSubtle: 'oklch(95% 0.003 250)',
|
||||
borderStrong: 'oklch(75% 0.01 250)',
|
||||
|
||||
primary: 'oklch(55% 0.18 250)',
|
||||
primaryHover: 'oklch(50% 0.20 250)',
|
||||
primaryActive: 'oklch(45% 0.22 250)',
|
||||
primarySubtle: 'oklch(95% 0.03 250)',
|
||||
primaryMuted: 'oklch(85% 0.08 250)',
|
||||
primaryForeground: 'oklch(98% 0.01 250)',
|
||||
|
||||
secondary: 'oklch(65% 0.08 280)',
|
||||
secondaryHover: 'oklch(60% 0.10 280)',
|
||||
secondaryActive: 'oklch(55% 0.12 280)',
|
||||
secondarySubtle: 'oklch(95% 0.02 280)',
|
||||
secondaryForeground: 'oklch(98% 0.01 280)',
|
||||
|
||||
accent: 'oklch(70% 0.15 160)',
|
||||
accentHover: 'oklch(65% 0.17 160)',
|
||||
accentForeground: 'oklch(10% 0.01 160)',
|
||||
|
||||
success: 'oklch(65% 0.15 145)',
|
||||
successSubtle: 'oklch(95% 0.03 145)',
|
||||
successForeground: 'oklch(98% 0.01 145)',
|
||||
|
||||
warning: 'oklch(75% 0.15 85)',
|
||||
warningSubtle: 'oklch(95% 0.05 85)',
|
||||
warningForeground: 'oklch(15% 0.02 85)',
|
||||
|
||||
danger: 'oklch(60% 0.20 25)',
|
||||
dangerSubtle: 'oklch(95% 0.04 25)',
|
||||
dangerForeground: 'oklch(98% 0.01 25)',
|
||||
|
||||
info: 'oklch(65% 0.12 230)',
|
||||
infoSubtle: 'oklch(95% 0.02 230)',
|
||||
infoForeground: 'oklch(98% 0.01 230)',
|
||||
|
||||
overlay: 'oklch(0% 0 0 / 0.5)',
|
||||
scrim: 'oklch(0% 0 0 / 0.3)',
|
||||
},
|
||||
|
||||
typography: {
|
||||
display: {
|
||||
fontSize: 'clamp(3rem, 2.5rem + 2vw, 4.5rem)',
|
||||
lineHeight: '1.1',
|
||||
fontWeight: 800,
|
||||
letterSpacing: '-0.05em',
|
||||
},
|
||||
h1: {
|
||||
fontSize: 'clamp(2.25rem, 1.95rem + 1.2vw, 3.5rem)',
|
||||
lineHeight: '1.2',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '-0.025em',
|
||||
},
|
||||
h2: {
|
||||
fontSize: 'clamp(1.875rem, 1.65rem + 0.9vw, 2.5rem)',
|
||||
lineHeight: '1.3',
|
||||
fontWeight: 700,
|
||||
},
|
||||
h3: {
|
||||
fontSize: 'clamp(1.5rem, 1.35rem + 0.6vw, 2rem)',
|
||||
lineHeight: '1.4',
|
||||
fontWeight: 600,
|
||||
},
|
||||
h4: {
|
||||
fontSize: 'clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem)',
|
||||
lineHeight: '1.5',
|
||||
fontWeight: 600,
|
||||
},
|
||||
body: {
|
||||
fontSize: 'clamp(1rem, 0.95rem + 0.25vw, 1.125rem)',
|
||||
lineHeight: '1.6',
|
||||
fontWeight: 400,
|
||||
},
|
||||
bodySmall: {
|
||||
fontSize: 'clamp(0.875rem, 0.8rem + 0.2vw, 1rem)',
|
||||
lineHeight: '1.5',
|
||||
fontWeight: 400,
|
||||
},
|
||||
caption: {
|
||||
fontSize: 'clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem)',
|
||||
lineHeight: '1.4',
|
||||
fontWeight: 400,
|
||||
letterSpacing: '0.025em',
|
||||
},
|
||||
mono: {
|
||||
fontSize: '0.875rem',
|
||||
lineHeight: '1.5',
|
||||
fontWeight: 400,
|
||||
},
|
||||
},
|
||||
|
||||
fontFamilies: {
|
||||
sans: "'Inter', system-ui, -apple-system, sans-serif",
|
||||
serif: "'Merriweather', Georgia, serif",
|
||||
mono: "'JetBrains Mono', 'Fira Code', monospace",
|
||||
},
|
||||
|
||||
spacing: {
|
||||
0: '0',
|
||||
px: '1px',
|
||||
0.5: '0.125rem',
|
||||
1: '0.25rem',
|
||||
1.5: '0.375rem',
|
||||
2: '0.5rem',
|
||||
2.5: '0.625rem',
|
||||
3: '0.75rem',
|
||||
4: '1rem',
|
||||
5: '1.25rem',
|
||||
6: '1.5rem',
|
||||
7: '1.75rem',
|
||||
8: '2rem',
|
||||
9: '2.25rem',
|
||||
10: '2.5rem',
|
||||
12: '3rem',
|
||||
14: '3.5rem',
|
||||
16: '4rem',
|
||||
20: '5rem',
|
||||
24: '6rem',
|
||||
28: '7rem',
|
||||
32: '8rem',
|
||||
36: '9rem',
|
||||
40: '10rem',
|
||||
48: '12rem',
|
||||
56: '14rem',
|
||||
64: '16rem',
|
||||
},
|
||||
|
||||
radius: {
|
||||
none: '0',
|
||||
xs: '0.125rem',
|
||||
sm: '0.25rem',
|
||||
md: '0.375rem',
|
||||
lg: '0.5rem',
|
||||
xl: '0.75rem',
|
||||
'2xl': '1rem',
|
||||
'3xl': '1.5rem',
|
||||
full: '9999px',
|
||||
},
|
||||
|
||||
shadows: {
|
||||
xs: '0 1px 2px 0 oklch(0% 0 0 / 0.05)',
|
||||
sm: '0 1px 3px 0 oklch(0% 0 0 / 0.1), 0 1px 2px -1px oklch(0% 0 0 / 0.1)',
|
||||
md: '0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.1)',
|
||||
lg: '0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -4px oklch(0% 0 0 / 0.1)',
|
||||
xl: '0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 8px 10px -6px oklch(0% 0 0 / 0.1)',
|
||||
'2xl': '0 25px 50px -12px oklch(0% 0 0 / 0.25)',
|
||||
primary: '0 4px 12px -2px oklch(55% 0.18 250), 0 2px 6px -2px oklch(55% 0.18 250)',
|
||||
secondary: '0 4px 12px -2px oklch(65% 0.08 280), 0 2px 6px -2px oklch(65% 0.08 280)',
|
||||
},
|
||||
|
||||
motion: {
|
||||
instant: '0ms',
|
||||
fast: '150ms',
|
||||
base: '220ms',
|
||||
slow: '300ms',
|
||||
slower: '400ms',
|
||||
|
||||
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
|
||||
easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
|
||||
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
easeBounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
|
||||
|
||||
transitionColors: 'color 150ms cubic-bezier(0, 0, 0.2, 1), background-color 150ms cubic-bezier(0, 0, 0.2, 1), border-color 150ms cubic-bezier(0, 0, 0.2, 1)',
|
||||
transitionTransform: 'transform 220ms cubic-bezier(0, 0, 0.2, 1)',
|
||||
transitionOpacity: 'opacity 220ms cubic-bezier(0, 0, 0.2, 1)',
|
||||
transitionAll: 'all 220ms cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
},
|
||||
|
||||
componentSizes: {
|
||||
button: {
|
||||
sm: '2.25rem',
|
||||
md: '2.75rem',
|
||||
lg: '3rem',
|
||||
},
|
||||
input: {
|
||||
sm: '2.25rem',
|
||||
md: '2.5rem',
|
||||
lg: '3rem',
|
||||
},
|
||||
icon: {
|
||||
xs: '0.75rem',
|
||||
sm: '1rem',
|
||||
md: '1.25rem',
|
||||
lg: '1.5rem',
|
||||
xl: '2rem',
|
||||
'2xl': '2.5rem',
|
||||
},
|
||||
avatar: {
|
||||
xs: '1.5rem',
|
||||
sm: '2rem',
|
||||
md: '2.5rem',
|
||||
lg: '3rem',
|
||||
xl: '4rem',
|
||||
'2xl': '6rem',
|
||||
},
|
||||
},
|
||||
|
||||
zIndex: {
|
||||
base: 0,
|
||||
dropdown: 1000,
|
||||
sticky: 1100,
|
||||
fixed: 1200,
|
||||
modalBackdrop: 1300,
|
||||
modal: 1400,
|
||||
popover: 1500,
|
||||
tooltip: 1600,
|
||||
notification: 1700,
|
||||
max: 9999,
|
||||
},
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// Dark Theme Tokens (Overrides only)
|
||||
// ============================================
|
||||
|
||||
export const darkThemeColorOverrides: Partial<ColorTokens> = {
|
||||
background: 'oklch(15% 0.01 250)',
|
||||
surface: 'oklch(20% 0.015 250)',
|
||||
surfaceSubtle: 'oklch(25% 0.02 250)',
|
||||
surfaceHover: 'oklch(30% 0.025 250)',
|
||||
|
||||
text: 'oklch(95% 0.01 250)',
|
||||
textSecondary: 'oklch(70% 0.015 250)',
|
||||
textMuted: 'oklch(55% 0.01 250)',
|
||||
textInverse: 'oklch(15% 0 0)',
|
||||
|
||||
border: 'oklch(35% 0.01 250)',
|
||||
borderSubtle: 'oklch(25% 0.005 250)',
|
||||
borderStrong: 'oklch(50% 0.015 250)',
|
||||
|
||||
primary: 'oklch(65% 0.18 250)',
|
||||
primaryHover: 'oklch(70% 0.20 250)',
|
||||
primaryActive: 'oklch(75% 0.22 250)',
|
||||
primarySubtle: 'oklch(25% 0.08 250)',
|
||||
primaryMuted: 'oklch(35% 0.12 250)',
|
||||
primaryForeground: 'oklch(10% 0.01 250)',
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// Type Guards
|
||||
// ============================================
|
||||
|
||||
export function isValidTheme(theme: string): theme is Theme {
|
||||
return ['light', 'dark', 'system'].includes(theme);
|
||||
}
|
||||
|
||||
export function isColorToken(token: any): token is keyof ColorTokens {
|
||||
return typeof token === 'string' && token in lightThemeTokens.colors;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Utility Functions
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Merge default tokens with custom overrides
|
||||
*/
|
||||
export function mergeTokens(
|
||||
base: DesignTokens,
|
||||
overrides: Partial<DesignTokens>
|
||||
): DesignTokens {
|
||||
return {
|
||||
...base,
|
||||
...overrides,
|
||||
colors: { ...base.colors, ...(overrides.colors || {}) },
|
||||
typography: { ...base.typography, ...(overrides.typography || {}) },
|
||||
spacing: { ...base.spacing, ...(overrides.spacing || {}) },
|
||||
radius: { ...base.radius, ...(overrides.radius || {}) },
|
||||
shadows: { ...base.shadows, ...(overrides.shadows || {}) },
|
||||
motion: { ...base.motion, ...(overrides.motion || {}) },
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate token value format
|
||||
*/
|
||||
export function validateTokenValue(value: string, type: 'color' | 'spacing' | 'radius' | 'shadow'): boolean {
|
||||
switch (type) {
|
||||
case 'color':
|
||||
return /^(oklch|rgb|hsl|#)/.test(value);
|
||||
case 'spacing':
|
||||
case 'radius':
|
||||
return /^\d+(\.\d+)?(px|rem|em|%)$/.test(value);
|
||||
case 'shadow':
|
||||
return value.includes('oklch') || value.includes('rgb') || value === 'none';
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
}
|
||||
685
skills/frontend-design/examples/typescript/sample-components.tsx
Executable file
685
skills/frontend-design/examples/typescript/sample-components.tsx
Executable file
@@ -0,0 +1,685 @@
|
||||
/**
|
||||
* Sample Components — Production-Ready React Components
|
||||
*
|
||||
* This file demonstrates how to build type-safe, accessible React components
|
||||
* using the design token system.
|
||||
*
|
||||
* Location: {project_path}/skills/frontend-design/examples/typescript/sample-components.tsx
|
||||
*
|
||||
* All components include:
|
||||
* - Full TypeScript type safety
|
||||
* - Complete state coverage (default/hover/active/focus/disabled/loading/error)
|
||||
* - Accessibility (ARIA labels, keyboard navigation)
|
||||
* - Responsive design
|
||||
* - Token-based styling
|
||||
*/
|
||||
|
||||
import React, { useState, forwardRef, InputHTMLAttributes, ButtonHTMLAttributes } from 'react';
|
||||
import { cn } from './utils'; // Utility for classname merging
|
||||
|
||||
// ============================================
|
||||
// BUTTON COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
isLoading?: boolean;
|
||||
leftIcon?: React.ReactNode;
|
||||
rightIcon?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
(
|
||||
{
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
isLoading = false,
|
||||
disabled,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const baseClasses = 'btn';
|
||||
const variantClasses = {
|
||||
primary: 'btn-primary',
|
||||
secondary: 'btn-secondary',
|
||||
outline: 'btn-outline',
|
||||
ghost: 'btn-ghost',
|
||||
danger: 'btn-danger',
|
||||
};
|
||||
const sizeClasses = {
|
||||
sm: 'btn-sm',
|
||||
md: '',
|
||||
lg: 'btn-lg',
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
className={cn(
|
||||
baseClasses,
|
||||
variantClasses[variant],
|
||||
sizeClasses[size],
|
||||
isLoading && 'btn-loading',
|
||||
className
|
||||
)}
|
||||
disabled={disabled || isLoading}
|
||||
{...props}
|
||||
>
|
||||
{!isLoading && leftIcon && <span className="btn-icon-left">{leftIcon}</span>}
|
||||
<span className={isLoading ? 'opacity-0' : ''}>{children}</span>
|
||||
{!isLoading && rightIcon && <span className="btn-icon-right">{rightIcon}</span>}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Button.displayName = 'Button';
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<Button variant="primary" size="md">
|
||||
Click me
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" isLoading>
|
||||
Loading...
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="primary"
|
||||
leftIcon={<PlusIcon />}
|
||||
rightIcon={<ArrowRightIcon />}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// INPUT COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string;
|
||||
error?: string;
|
||||
helperText?: string;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
leftIcon?: React.ReactNode;
|
||||
rightIcon?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
(
|
||||
{
|
||||
label,
|
||||
error,
|
||||
helperText,
|
||||
size = 'md',
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
className,
|
||||
id,
|
||||
required,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
|
||||
const errorId = error ? `${inputId}-error` : undefined;
|
||||
const helperId = helperText ? `${inputId}-helper` : undefined;
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'input-sm',
|
||||
md: '',
|
||||
lg: 'input-lg',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="form-group">
|
||||
{label && (
|
||||
<label htmlFor={inputId} className={cn('label', required && 'label-required')}>
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div className="relative">
|
||||
{leftIcon && (
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted">
|
||||
{leftIcon}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<input
|
||||
ref={ref}
|
||||
id={inputId}
|
||||
className={cn(
|
||||
'input',
|
||||
sizeClasses[size],
|
||||
error && 'input-error',
|
||||
leftIcon && 'pl-10',
|
||||
rightIcon && 'pr-10',
|
||||
className
|
||||
)}
|
||||
aria-invalid={error ? 'true' : 'false'}
|
||||
aria-describedby={cn(errorId, helperId)}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
{rightIcon && (
|
||||
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted">
|
||||
{rightIcon}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<span id={errorId} className="helper-text helper-text-error" role="alert">
|
||||
{error}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!error && helperText && (
|
||||
<span id={helperId} className="helper-text">
|
||||
{helperText}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Input.displayName = 'Input';
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
required
|
||||
leftIcon={<MailIcon />}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Password"
|
||||
type="password"
|
||||
error="Password must be at least 8 characters"
|
||||
helperText="Use a strong, unique password"
|
||||
/>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// CARD COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface CardProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
interactive?: boolean;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export function Card({ children, className, interactive = false, onClick }: CardProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'card',
|
||||
interactive && 'card-interactive',
|
||||
className
|
||||
)}
|
||||
onClick={onClick}
|
||||
role={interactive ? 'button' : undefined}
|
||||
tabIndex={interactive ? 0 : undefined}
|
||||
onKeyDown={
|
||||
interactive
|
||||
? (e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
onClick?.();
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardHeader({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return <div className={cn('card-header', className)}>{children}</div>;
|
||||
}
|
||||
|
||||
export function CardTitle({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return <h3 className={cn('card-title', className)}>{children}</h3>;
|
||||
}
|
||||
|
||||
export function CardDescription({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return <p className={cn('card-description', className)}>{children}</p>;
|
||||
}
|
||||
|
||||
export function CardBody({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return <div className={cn('card-body', className)}>{children}</div>;
|
||||
}
|
||||
|
||||
export function CardFooter({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return <div className={cn('card-footer', className)}>{children}</div>;
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Project Overview</CardTitle>
|
||||
<CardDescription>Track your project's progress</CardDescription>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>Your project is 75% complete</p>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Button variant="primary">View Details</Button>
|
||||
<Button variant="outline">Share</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card interactive onClick={() => console.log('Clicked')}>
|
||||
<CardBody>Click me!</CardBody>
|
||||
</Card>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// BADGE COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface BadgeProps {
|
||||
children: React.ReactNode;
|
||||
variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Badge({ children, variant = 'primary', className }: BadgeProps) {
|
||||
const variantClasses = {
|
||||
primary: 'badge-primary',
|
||||
secondary: 'badge-secondary',
|
||||
success: 'badge-success',
|
||||
warning: 'badge-warning',
|
||||
danger: 'badge-danger',
|
||||
outline: 'badge-outline',
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={cn('badge', variantClasses[variant], className)}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<Badge variant="success">Active</Badge>
|
||||
<Badge variant="warning">Pending</Badge>
|
||||
<Badge variant="danger">Failed</Badge>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// ALERT COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface AlertProps {
|
||||
children: React.ReactNode;
|
||||
variant?: 'info' | 'success' | 'warning' | 'danger';
|
||||
title?: string;
|
||||
onClose?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Alert({ children, variant = 'info', title, onClose, className }: AlertProps) {
|
||||
const variantClasses = {
|
||||
info: 'alert-info',
|
||||
success: 'alert-success',
|
||||
warning: 'alert-warning',
|
||||
danger: 'alert-danger',
|
||||
};
|
||||
|
||||
const icons = {
|
||||
info: (
|
||||
<svg className="alert-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
),
|
||||
success: (
|
||||
<svg className="alert-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
),
|
||||
warning: (
|
||||
<svg className="alert-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
),
|
||||
danger: (
|
||||
<svg className="alert-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn('alert', variantClasses[variant], className)} role="alert">
|
||||
{icons[variant]}
|
||||
<div className="alert-content">
|
||||
{title && <div className="alert-title">{title}</div>}
|
||||
<div className="alert-description">{children}</div>
|
||||
</div>
|
||||
{onClose && (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="ml-auto text-current hover:opacity-70 transition-opacity"
|
||||
aria-label="Close alert"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<Alert variant="success" title="Success">
|
||||
Your changes have been saved successfully.
|
||||
</Alert>
|
||||
|
||||
<Alert variant="danger" title="Error" onClose={() => console.log('Closed')}>
|
||||
Failed to save changes. Please try again.
|
||||
</Alert>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// MODAL COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
children: React.ReactNode;
|
||||
title?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Modal({ isOpen, onClose, children, title, className }: ModalProps) {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="modal-overlay" onClick={onClose}>
|
||||
<div
|
||||
className={cn('modal', className)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby={title ? 'modal-title' : undefined}
|
||||
>
|
||||
{title && (
|
||||
<div className="modal-header">
|
||||
<h2 id="modal-title" className="modal-title">
|
||||
{title}
|
||||
</h2>
|
||||
<button onClick={onClose} className="modal-close" aria-label="Close modal">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ModalBody({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return <div className={cn('modal-body', className)}>{children}</div>;
|
||||
}
|
||||
|
||||
export function ModalFooter({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return <div className={cn('modal-footer', className)}>{children}</div>;
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
function Example() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={() => setIsOpen(true)}>Open Modal</Button>
|
||||
|
||||
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Confirm Action">
|
||||
<ModalBody>
|
||||
<p>Are you sure you want to proceed with this action?</p>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button variant="outline" onClick={() => setIsOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="primary" onClick={() => setIsOpen(false)}>
|
||||
Confirm
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// SKELETON LOADING COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface SkeletonProps {
|
||||
className?: string;
|
||||
variant?: 'text' | 'title' | 'avatar' | 'card' | 'rect';
|
||||
width?: string;
|
||||
height?: string;
|
||||
}
|
||||
|
||||
export function Skeleton({ className, variant = 'text', width, height }: SkeletonProps) {
|
||||
const variantClasses = {
|
||||
text: 'skeleton-text',
|
||||
title: 'skeleton-title',
|
||||
avatar: 'skeleton-avatar',
|
||||
card: 'skeleton-card',
|
||||
rect: '',
|
||||
};
|
||||
|
||||
const style: React.CSSProperties = {};
|
||||
if (width) style.width = width;
|
||||
if (height) style.height = height;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn('skeleton', variantClasses[variant], className)}
|
||||
style={style}
|
||||
aria-label="Loading"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
// Loading card
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton variant="title" />
|
||||
<Skeleton variant="text" width="60%" />
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Skeleton variant="text" />
|
||||
<Skeleton variant="text" />
|
||||
<Skeleton variant="text" width="80%" />
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
// Loading list
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="flex items-center gap-4">
|
||||
<Skeleton variant="avatar" />
|
||||
<div className="flex-1">
|
||||
<Skeleton variant="text" width="40%" />
|
||||
<Skeleton variant="text" width="60%" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// EMPTY STATE COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface EmptyStateProps {
|
||||
icon?: React.ReactNode;
|
||||
title: string;
|
||||
description?: string;
|
||||
action?: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
|
||||
return (
|
||||
<div className={cn('empty-state', className)}>
|
||||
{icon && <div className="empty-state-icon">{icon}</div>}
|
||||
<h3 className="empty-state-title">{title}</h3>
|
||||
{description && <p className="empty-state-description">{description}</p>}
|
||||
{action && <div className="empty-state-action">{action}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<EmptyState
|
||||
icon={<FolderIcon />}
|
||||
title="No projects yet"
|
||||
description="Get started by creating your first project"
|
||||
action={
|
||||
<Button variant="primary" leftIcon={<PlusIcon />}>
|
||||
Create Project
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// ERROR STATE COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface ErrorStateProps {
|
||||
title: string;
|
||||
message: string;
|
||||
onRetry?: () => void;
|
||||
onGoBack?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ErrorState({ title, message, onRetry, onGoBack, className }: ErrorStateProps) {
|
||||
return (
|
||||
<div className={cn('error-state', className)}>
|
||||
<svg className="error-state-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||
/>
|
||||
</svg>
|
||||
<h3 className="error-state-title">{title}</h3>
|
||||
<p className="error-state-message">{message}</p>
|
||||
<div className="error-state-actions">
|
||||
{onGoBack && (
|
||||
<Button variant="outline" onClick={onGoBack}>
|
||||
Go Back
|
||||
</Button>
|
||||
)}
|
||||
{onRetry && (
|
||||
<Button variant="primary" onClick={onRetry}>
|
||||
Try Again
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<ErrorState
|
||||
title="Failed to load data"
|
||||
message="We couldn't load your projects. Please check your connection and try again."
|
||||
onRetry={() => refetch()}
|
||||
onGoBack={() => navigate('/')}
|
||||
/>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// AVATAR COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface AvatarProps {
|
||||
src?: string;
|
||||
alt?: string;
|
||||
fallback?: string;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Avatar({ src, alt, fallback, size = 'md', className }: AvatarProps) {
|
||||
const [imageError, setImageError] = useState(false);
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'avatar-sm',
|
||||
md: '',
|
||||
lg: 'avatar-lg',
|
||||
};
|
||||
|
||||
const showFallback = !src || imageError;
|
||||
const initials = fallback
|
||||
? fallback
|
||||
.split(' ')
|
||||
.map((n) => n[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.slice(0, 2)
|
||||
: '?';
|
||||
|
||||
return (
|
||||
<div className={cn('avatar', sizeClasses[size], className)}>
|
||||
{showFallback ? (
|
||||
<span>{initials}</span>
|
||||
) : (
|
||||
<img
|
||||
src={src}
|
||||
alt={alt || fallback || 'Avatar'}
|
||||
onError={() => setImageError(true)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<Avatar src="/user.jpg" alt="John Doe" fallback="John Doe" />
|
||||
<Avatar fallback="Jane Smith" size="lg" />
|
||||
<Avatar src="/broken.jpg" fallback="Error" /> // Falls back to initials
|
||||
*/
|
||||
399
skills/frontend-design/examples/typescript/theme-provider.tsx
Executable file
399
skills/frontend-design/examples/typescript/theme-provider.tsx
Executable file
@@ -0,0 +1,399 @@
|
||||
/**
|
||||
* Theme Provider — Theme Management System
|
||||
*
|
||||
* This file provides a complete theme management system with:
|
||||
* - Light/dark/system theme support
|
||||
* - Theme persistence (localStorage)
|
||||
* - System preference detection
|
||||
* - Type-safe theme context
|
||||
*
|
||||
* Location: {project_path}/skills/frontend-design/examples/typescript/theme-provider.tsx
|
||||
*
|
||||
* Usage:
|
||||
* ```tsx
|
||||
* import { ThemeProvider, useTheme } from './theme-provider';
|
||||
*
|
||||
* function App() {
|
||||
* return (
|
||||
* <ThemeProvider defaultTheme="system">
|
||||
* <YourApp />
|
||||
* </ThemeProvider>
|
||||
* );
|
||||
* }
|
||||
*
|
||||
* function ThemeToggle() {
|
||||
* const { theme, setTheme } = useTheme();
|
||||
* return <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle</button>;
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
|
||||
import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
|
||||
import { Theme } from './design-tokens';
|
||||
|
||||
// ============================================
|
||||
// Types
|
||||
// ============================================
|
||||
|
||||
interface ThemeProviderProps {
|
||||
children: ReactNode;
|
||||
defaultTheme?: Theme;
|
||||
storageKey?: string;
|
||||
}
|
||||
|
||||
interface ThemeContextType {
|
||||
theme: Theme;
|
||||
effectiveTheme: 'light' | 'dark'; // Resolved theme (system → light/dark)
|
||||
setTheme: (theme: Theme) => void;
|
||||
toggleTheme: () => void;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Context
|
||||
// ============================================
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
||||
|
||||
// ============================================
|
||||
// Provider Component
|
||||
// ============================================
|
||||
|
||||
export function ThemeProvider({
|
||||
children,
|
||||
defaultTheme = 'system',
|
||||
storageKey = 'ui-theme',
|
||||
}: ThemeProviderProps) {
|
||||
const [theme, setThemeState] = useState<Theme>(() => {
|
||||
// Load theme from localStorage if available
|
||||
if (typeof window !== 'undefined') {
|
||||
const stored = localStorage.getItem(storageKey);
|
||||
if (stored && ['light', 'dark', 'system'].includes(stored)) {
|
||||
return stored as Theme;
|
||||
}
|
||||
}
|
||||
return defaultTheme;
|
||||
});
|
||||
|
||||
const [effectiveTheme, setEffectiveTheme] = useState<'light' | 'dark'>(() => {
|
||||
if (theme === 'system') {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
return theme;
|
||||
});
|
||||
|
||||
// Update effective theme when theme or system preference changes
|
||||
useEffect(() => {
|
||||
const root = window.document.documentElement;
|
||||
|
||||
// Remove previous theme classes
|
||||
root.classList.remove('light', 'dark');
|
||||
|
||||
if (theme === 'system') {
|
||||
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
: 'light';
|
||||
root.classList.add(systemTheme);
|
||||
root.setAttribute('data-theme', systemTheme);
|
||||
setEffectiveTheme(systemTheme);
|
||||
} else {
|
||||
root.classList.add(theme);
|
||||
root.setAttribute('data-theme', theme);
|
||||
setEffectiveTheme(theme);
|
||||
}
|
||||
}, [theme]);
|
||||
|
||||
// Listen for system theme changes when in system mode
|
||||
useEffect(() => {
|
||||
if (theme !== 'system') return;
|
||||
|
||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
const handleChange = (e: MediaQueryListEvent) => {
|
||||
const systemTheme = e.matches ? 'dark' : 'light';
|
||||
const root = window.document.documentElement;
|
||||
root.classList.remove('light', 'dark');
|
||||
root.classList.add(systemTheme);
|
||||
root.setAttribute('data-theme', systemTheme);
|
||||
setEffectiveTheme(systemTheme);
|
||||
};
|
||||
|
||||
// Modern browsers
|
||||
if (mediaQuery.addEventListener) {
|
||||
mediaQuery.addEventListener('change', handleChange);
|
||||
return () => mediaQuery.removeEventListener('change', handleChange);
|
||||
}
|
||||
// Legacy browsers
|
||||
else if (mediaQuery.addListener) {
|
||||
mediaQuery.addListener(handleChange);
|
||||
return () => mediaQuery.removeListener(handleChange);
|
||||
}
|
||||
}, [theme]);
|
||||
|
||||
const setTheme = (newTheme: Theme) => {
|
||||
localStorage.setItem(storageKey, newTheme);
|
||||
setThemeState(newTheme);
|
||||
};
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(effectiveTheme === 'light' ? 'dark' : 'light');
|
||||
};
|
||||
|
||||
const value: ThemeContextType = {
|
||||
theme,
|
||||
effectiveTheme,
|
||||
setTheme,
|
||||
toggleTheme,
|
||||
};
|
||||
|
||||
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Hook
|
||||
// ============================================
|
||||
|
||||
export function useTheme(): ThemeContextType {
|
||||
const context = useContext(ThemeContext);
|
||||
|
||||
if (context === undefined) {
|
||||
throw new Error('useTheme must be used within a ThemeProvider');
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Theme Toggle Component
|
||||
// ============================================
|
||||
|
||||
interface ThemeToggleProps {
|
||||
className?: string;
|
||||
iconSize?: number;
|
||||
}
|
||||
|
||||
export function ThemeToggle({ className = '', iconSize = 20 }: ThemeToggleProps) {
|
||||
const { theme, effectiveTheme, setTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => setTheme(effectiveTheme === 'light' ? 'dark' : 'light')}
|
||||
className={`btn btn-ghost btn-icon ${className}`}
|
||||
aria-label="Toggle theme"
|
||||
title="Toggle theme"
|
||||
>
|
||||
{effectiveTheme === 'light' ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="5" />
|
||||
<line x1="12" y1="1" x2="12" y2="3" />
|
||||
<line x1="12" y1="21" x2="12" y2="23" />
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
||||
<line x1="1" y1="12" x2="3" y2="12" />
|
||||
<line x1="21" y1="12" x2="23" y2="12" />
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Theme Selector Component (Dropdown)
|
||||
// ============================================
|
||||
|
||||
interface ThemeSelectorProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ThemeSelector({ className = '' }: ThemeSelectorProps) {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const themes: { value: Theme; label: string; icon: JSX.Element }[] = [
|
||||
{
|
||||
value: 'light',
|
||||
label: 'Light',
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<circle cx="12" cy="12" r="5" />
|
||||
<line x1="12" y1="1" x2="12" y2="3" />
|
||||
<line x1="12" y1="21" x2="12" y2="23" />
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
||||
<line x1="1" y1="12" x2="3" y2="12" />
|
||||
<line x1="21" y1="12" x2="23" y2="12" />
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: 'dark',
|
||||
label: 'Dark',
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: 'system',
|
||||
label: 'System',
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" />
|
||||
<line x1="8" y1="21" x2="16" y2="21" />
|
||||
<line x1="12" y1="17" x2="12" y2="21" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={`relative ${className}`}>
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="btn btn-outline flex items-center gap-2"
|
||||
aria-label="Select theme"
|
||||
>
|
||||
{themes.find((t) => t.value === theme)?.icon}
|
||||
<span>{themes.find((t) => t.value === theme)?.label}</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className={`transition-transform ${isOpen ? 'rotate-180' : ''}`}
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 z-40"
|
||||
onClick={() => setIsOpen(false)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-surface border border-border z-50">
|
||||
<div className="py-1" role="menu">
|
||||
{themes.map((t) => (
|
||||
<button
|
||||
key={t.value}
|
||||
onClick={() => {
|
||||
setTheme(t.value);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
className={`
|
||||
w-full flex items-center gap-3 px-4 py-2 text-sm
|
||||
hover:bg-surface-hover transition-colors
|
||||
${theme === t.value ? 'bg-surface-subtle font-medium' : ''}
|
||||
`}
|
||||
role="menuitem"
|
||||
>
|
||||
{t.icon}
|
||||
<span>{t.label}</span>
|
||||
{theme === t.value && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className="ml-auto"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Utility: Apply theme class to body
|
||||
// ============================================
|
||||
|
||||
export function useThemeClass() {
|
||||
const { effectiveTheme } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
const root = window.document.documentElement;
|
||||
root.classList.remove('light', 'dark');
|
||||
root.classList.add(effectiveTheme);
|
||||
root.setAttribute('data-theme', effectiveTheme);
|
||||
}, [effectiveTheme]);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Higher-Order Component for Theme
|
||||
// ============================================
|
||||
|
||||
export function withTheme<P extends object>(
|
||||
Component: React.ComponentType<P & { theme: ThemeContextType }>
|
||||
) {
|
||||
return function ThemedComponent(props: P) {
|
||||
const theme = useTheme();
|
||||
return <Component {...props} theme={theme} />;
|
||||
};
|
||||
}
|
||||
354
skills/frontend-design/examples/typescript/utils.ts
Executable file
354
skills/frontend-design/examples/typescript/utils.ts
Executable file
@@ -0,0 +1,354 @@
|
||||
/**
|
||||
* Utility Functions
|
||||
*
|
||||
* Location: {project_path}/skills/frontend-design/examples/typescript/utils.ts
|
||||
*/
|
||||
|
||||
import { type ClassValue, clsx } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
/**
|
||||
* Merge Tailwind CSS classes with proper precedence
|
||||
* Combines clsx and tailwind-merge for optimal class handling
|
||||
*
|
||||
* @param inputs - Class values to merge
|
||||
* @returns Merged class string
|
||||
*
|
||||
* @example
|
||||
* cn('px-4 py-2', 'px-6') // => 'py-2 px-6' (px-6 overwrites px-4)
|
||||
* cn('text-red-500', condition && 'text-blue-500') // => conditional classes
|
||||
*/
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
/**
|
||||
* Format file size in human-readable format
|
||||
*
|
||||
* @param bytes - File size in bytes
|
||||
* @param decimals - Number of decimal places (default: 2)
|
||||
* @returns Formatted string (e.g., "1.5 MB")
|
||||
*/
|
||||
export function formatFileSize(bytes: number, decimals: number = 2): string {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
|
||||
const k = 1024;
|
||||
const dm = decimals < 0 ? 0 : decimals;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Debounce function to limit execution rate
|
||||
*
|
||||
* @param func - Function to debounce
|
||||
* @param wait - Wait time in milliseconds
|
||||
* @returns Debounced function
|
||||
*/
|
||||
export function debounce<T extends (...args: any[]) => any>(
|
||||
func: T,
|
||||
wait: number
|
||||
): (...args: Parameters<T>) => void {
|
||||
let timeout: NodeJS.Timeout | null = null;
|
||||
|
||||
return function executedFunction(...args: Parameters<T>) {
|
||||
const later = () => {
|
||||
timeout = null;
|
||||
func(...args);
|
||||
};
|
||||
|
||||
if (timeout) clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Throttle function to limit execution frequency
|
||||
*
|
||||
* @param func - Function to throttle
|
||||
* @param limit - Time limit in milliseconds
|
||||
* @returns Throttled function
|
||||
*/
|
||||
export function throttle<T extends (...args: any[]) => any>(
|
||||
func: T,
|
||||
limit: number
|
||||
): (...args: Parameters<T>) => void {
|
||||
let inThrottle: boolean;
|
||||
|
||||
return function executedFunction(...args: Parameters<T>) {
|
||||
if (!inThrottle) {
|
||||
func(...args);
|
||||
inThrottle = true;
|
||||
setTimeout(() => (inThrottle = false), limit);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate a random ID
|
||||
*
|
||||
* @param length - Length of the ID (default: 8)
|
||||
* @returns Random ID string
|
||||
*/
|
||||
export function generateId(length: number = 8): string {
|
||||
return Math.random()
|
||||
.toString(36)
|
||||
.substring(2, 2 + length);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if code is running in browser
|
||||
*/
|
||||
export const isBrowser = typeof window !== 'undefined';
|
||||
|
||||
/**
|
||||
* Safely access localStorage
|
||||
*/
|
||||
export const storage = {
|
||||
get: (key: string): string | null => {
|
||||
if (!isBrowser) return null;
|
||||
try {
|
||||
return localStorage.getItem(key);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
set: (key: string, value: string): void => {
|
||||
if (!isBrowser) return;
|
||||
try {
|
||||
localStorage.setItem(key, value);
|
||||
} catch {
|
||||
// Handle quota exceeded or other errors
|
||||
}
|
||||
},
|
||||
remove: (key: string): void => {
|
||||
if (!isBrowser) return;
|
||||
try {
|
||||
localStorage.removeItem(key);
|
||||
} catch {
|
||||
// Handle errors
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Copy text to clipboard
|
||||
*
|
||||
* @param text - Text to copy
|
||||
* @returns Promise<boolean> - Success status
|
||||
*/
|
||||
export async function copyToClipboard(text: string): Promise<boolean> {
|
||||
if (!isBrowser) return false;
|
||||
|
||||
try {
|
||||
if (navigator.clipboard) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return true;
|
||||
} else {
|
||||
// Fallback for older browsers
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = text;
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.opacity = '0';
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
const success = document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
return success;
|
||||
}
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Format date in relative time (e.g., "2 hours ago")
|
||||
*
|
||||
* @param date - Date to format
|
||||
* @returns Formatted relative time string
|
||||
*/
|
||||
export function formatRelativeTime(date: Date): string {
|
||||
const now = new Date();
|
||||
const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
|
||||
|
||||
if (diffInSeconds < 60) return 'just now';
|
||||
if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
|
||||
if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
|
||||
if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}d ago`;
|
||||
if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 604800)}w ago`;
|
||||
if (diffInSeconds < 31536000) return `${Math.floor(diffInSeconds / 2592000)}mo ago`;
|
||||
return `${Math.floor(diffInSeconds / 31536000)}y ago`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Truncate text with ellipsis
|
||||
*
|
||||
* @param text - Text to truncate
|
||||
* @param maxLength - Maximum length
|
||||
* @returns Truncated text
|
||||
*/
|
||||
export function truncate(text: string, maxLength: number): string {
|
||||
if (text.length <= maxLength) return text;
|
||||
return text.slice(0, maxLength - 3) + '...';
|
||||
}
|
||||
|
||||
/**
|
||||
* Sleep/delay function
|
||||
*
|
||||
* @param ms - Milliseconds to sleep
|
||||
* @returns Promise that resolves after delay
|
||||
*/
|
||||
export function sleep(ms: number): Promise<void> {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
/**
|
||||
* Clamp a number between min and max
|
||||
*
|
||||
* @param value - Value to clamp
|
||||
* @param min - Minimum value
|
||||
* @param max - Maximum value
|
||||
* @returns Clamped value
|
||||
*/
|
||||
export function clamp(value: number, min: number, max: number): number {
|
||||
return Math.min(Math.max(value, min), max);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if user prefers reduced motion
|
||||
*/
|
||||
export function prefersReducedMotion(): boolean {
|
||||
if (!isBrowser) return false;
|
||||
return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if user prefers dark mode
|
||||
*/
|
||||
export function prefersDarkMode(): boolean {
|
||||
if (!isBrowser) return false;
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format number with commas
|
||||
*
|
||||
* @param num - Number to format
|
||||
* @returns Formatted number string
|
||||
*
|
||||
* @example
|
||||
* formatNumber(1000) // => "1,000"
|
||||
* formatNumber(1000000) // => "1,000,000"
|
||||
*/
|
||||
export function formatNumber(num: number): string {
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
}
|
||||
|
||||
/**
|
||||
* Abbreviate large numbers
|
||||
*
|
||||
* @param num - Number to abbreviate
|
||||
* @returns Abbreviated number string
|
||||
*
|
||||
* @example
|
||||
* abbreviateNumber(1000) // => "1K"
|
||||
* abbreviateNumber(1000000) // => "1M"
|
||||
* abbreviateNumber(1500000) // => "1.5M"
|
||||
*/
|
||||
export function abbreviateNumber(num: number): string {
|
||||
if (num < 1000) return num.toString();
|
||||
if (num < 1000000) return `${(num / 1000).toFixed(1).replace(/\.0$/, '')}K`;
|
||||
if (num < 1000000000) return `${(num / 1000000).toFixed(1).replace(/\.0$/, '')}M`;
|
||||
return `${(num / 1000000000).toFixed(1).replace(/\.0$/, '')}B`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get initials from name
|
||||
*
|
||||
* @param name - Full name
|
||||
* @param maxLength - Maximum number of initials (default: 2)
|
||||
* @returns Initials string
|
||||
*
|
||||
* @example
|
||||
* getInitials("John Doe") // => "JD"
|
||||
* getInitials("Mary Jane Watson") // => "MJ"
|
||||
*/
|
||||
export function getInitials(name: string, maxLength: number = 2): string {
|
||||
return name
|
||||
.split(' ')
|
||||
.map((n) => n[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.slice(0, maxLength);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate email format
|
||||
*
|
||||
* @param email - Email to validate
|
||||
* @returns True if valid email format
|
||||
*/
|
||||
export function isValidEmail(email: string): boolean {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate URL format
|
||||
*
|
||||
* @param url - URL to validate
|
||||
* @returns True if valid URL format
|
||||
*/
|
||||
export function isValidUrl(url: string): boolean {
|
||||
try {
|
||||
new URL(url);
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove HTML tags from string
|
||||
*
|
||||
* @param html - HTML string
|
||||
* @returns Plain text
|
||||
*/
|
||||
export function stripHtml(html: string): string {
|
||||
if (!isBrowser) return html;
|
||||
const tmp = document.createElement('div');
|
||||
tmp.innerHTML = html;
|
||||
return tmp.textContent || tmp.innerText || '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Capitalize first letter of string
|
||||
*
|
||||
* @param str - String to capitalize
|
||||
* @returns Capitalized string
|
||||
*/
|
||||
export function capitalize(str: string): string {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert camelCase to kebab-case
|
||||
*
|
||||
* @param str - camelCase string
|
||||
* @returns kebab-case string
|
||||
*/
|
||||
export function camelToKebab(str: string): string {
|
||||
return str.replace(/([A-Z])/g, '-$1').toLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert kebab-case to camelCase
|
||||
*
|
||||
* @param str - kebab-case string
|
||||
* @returns camelCase string
|
||||
*/
|
||||
export function kebabToCamel(str: string): string {
|
||||
return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
||||
}
|
||||
Reference in New Issue
Block a user