utility-css-library
Version:
Modern utility CSS library with intelligent theming, automatic contrast calculation, and seamless dark/light mode support
227 lines (195 loc) • 20.9 kB
HTML
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Utility CSS Library - Demo</title><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"><style>/* Demo-specific styles */
body {
margin: 0;
padding: 0;
background: var(--color-background, #ffffff);
color: var(--color-foreground, #09090b);
transition: background-color 0.3s ease, color 0.3s ease;
}
.demo-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif);
}
.demo-section {
margin-bottom: 3rem;
padding: 2rem;
border: 1px solid var(--color-border-default, #e4e4e7);
border-radius: var(--border-radius-lg, 0.5rem);
background: var(--color-surface-card, #ffffff);
transition: all 0.3s ease;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.color-demo {
padding: 1rem;
border-radius: var(--border-radius-md, 0.375rem);
text-align: center;
font-weight: 500;
transition: transform 0.2s ease;
cursor: pointer;
}
.color-demo:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
}
.theme-controls {
position: fixed;
top: 1rem;
right: 1rem;
background: var(--color-surface-card, #ffffff);
padding: 1rem;
border: 1px solid var(--color-border-default, #e4e4e7);
border-radius: var(--border-radius-lg, 0.5rem);
box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
z-index: 1000;
}
.btn {
padding: 0.5rem 1rem;
border: none;
border-radius: var(--border-radius-md, 0.375rem);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
margin: 0.25rem;
font-size: 0.875rem;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}
/* Semantic color buttons with automatic contrast */
.btn-primary {
background-color: var(--color-primary, #6C5CE7);
color: var(--color-primary-foreground, #ffffff);
}
.btn-primary:hover {
background-color: var(--color-primary-hover, #5a4fcf);
}
.btn-doom {
background-color: var(--color-doom, #2B2B2B);
color: var(--color-doom-foreground, #ffffff);
}
.btn-doom:hover {
background-color: var(--color-doom-hover, #1a1a1a);
}
.btn-critical {
background-color: var(--color-critical, #E62E5C);
color: var(--color-critical-foreground, #ffffff);
}
.btn-critical:hover {
background-color: var(--color-critical-hover, #d11a47);
}
.btn-warning {
background-color: var(--color-warning, #E6E35C);
color: var(--color-warning-foreground, #000000);
}
.btn-warning:hover {
background-color: var(--color-warning-hover, #ddd947);
}
.btn-success {
background-color: var(--color-success, #37B26C);
color: var(--color-success-foreground, #ffffff);
}
.btn-success:hover {
background-color: var(--color-success-hover, #2d9157);
}
.btn-interactive {
background-color: var(--color-interactive, #0984E3);
color: var(--color-interactive-foreground, #ffffff);
}
.btn-interactive:hover {
background-color: var(--color-interactive-hover, #0770c4);
}
.btn-white {
background-color: var(--color-white, #FFFFFF);
color: var(--color-white-foreground, #000000);
border: 1px solid var(--color-border-default, #e4e4e7);
}
/* Opacity variants demo */
.opacity-demo {
display: flex;
gap: 0.5rem;
align-items: center;
margin-top: 0.5rem;
}
.opacity-sample {
width: 2rem;
height: 2rem;
border-radius: var(--border-radius-sm, 0.125rem);
}
/* Typography demo */
.text-demo {
margin: 1rem 0;
}
.text-xs { font-size: var(--font-size-xs, 0.75rem); }
.text-sm { font-size: var(--font-size-sm, 0.875rem); }
.text-base { font-size: var(--font-size-base, 1rem); }
.text-lg { font-size: var(--font-size-lg, 1.125rem); }
.text-xl { font-size: var(--font-size-xl, 1.25rem); }
.text-2xl { font-size: var(--font-size-2xl, 1.5rem); }
.text-3xl { font-size: var(--font-size-3xl, 1.875rem); }
.font-light { font-weight: var(--font-weight-light, 300); }
.font-normal { font-weight: var(--font-weight-normal, 400); }
.font-medium { font-weight: var(--font-weight-medium, 500); }
.font-semibold { font-weight: var(--font-weight-semibold, 600); }
.font-bold { font-weight: var(--font-weight-bold, 700); }
/* Dark mode styles */
:root.dark,
[data-mode="dark"] {
--color-background: #09090b;
--color-foreground: #fafafa;
}
/* Fallback styles */
.fallback-text-primary { color: var(--color-text-primary, #09090b); }
.fallback-text-secondary { color: var(--color-text-secondary, #71717a); }
.fallback-text-tertiary { color: var(--color-text-tertiary, #a1a1aa); }</style><script defer="defer" src="vendors.bdb9fe0eb9b3c9f86e28.js"></script><script defer="defer" src="main.92d28e0365aa6ee49373.js"></script><link href="main.f37ab056627069feb73b.css" rel="stylesheet"></head><body><div class="theme-controls"><h3 style="margin: 0 0 1rem 0;" class="fallback-text-primary">Theme Controls</h3><button class="btn btn-primary" onclick="toggleMode()">🌓 Toggle Dark/Light</button><div style="margin-top: 0.5rem; font-size: 0.875rem;" class="fallback-text-secondary">Current mode: <span id="current-mode">light</span></div></div><div class="demo-container"><header style="text-align: center; margin-bottom: 3rem;"><h1 class="text-3xl font-bold fallback-text-primary" style="margin-bottom: 1rem;">Utility CSS Library + Material Icons</h1><p class="text-lg fallback-text-secondary">Semantic utility classes with intelligent theming and 7400+ Material Design Icons</p></header><section class="demo-section"><h2 class="text-2xl font-semibold fallback-text-primary" style="margin-bottom: 1rem;">Semantic Colors with Intelligent Contrast</h2><p class="fallback-text-secondary" style="margin-bottom: 1rem;">Each color automatically calculates the optimal text color for maximum readability. Notice how yellow buttons use black text while dark colors use white text.</p><div class="demo-grid"><div class="color-demo" style="background-color: var(--color-primary, #6C5CE7); color: var(--color-primary-foreground, #ffffff);">Primary<div style="font-size: 0.875rem; opacity: 0.8; margin-top: 0.5rem;">#6C5CE7</div></div><div class="color-demo" style="background-color: var(--color-doom, #2B2B2B); color: var(--color-doom-foreground, #ffffff);">Doom<div style="font-size: 0.875rem; opacity: 0.8; margin-top: 0.5rem;">#2B2B2B</div></div><div class="color-demo" style="background-color: var(--color-white, #FFFFFF); color: var(--color-white-foreground, #000000); border: 1px solid var(--color-border-default, #e4e4e7);">White<div style="font-size: 0.875rem; opacity: 0.8; margin-top: 0.5rem;">#FFFFFF</div></div><div class="color-demo" style="background-color: var(--color-critical, #E62E5C); color: var(--color-critical-foreground, #ffffff);">Critical<div style="font-size: 0.875rem; opacity: 0.8; margin-top: 0.5rem;">#E62E5C</div></div><div class="color-demo" style="background-color: var(--color-warning, #E6E35C); color: var(--color-warning-foreground, #000000);">Warning<div style="font-size: 0.875rem; opacity: 0.8; margin-top: 0.5rem;">#E6E35C</div></div><div class="color-demo" style="background-color: var(--color-success, #37B26C); color: var(--color-success-foreground, #ffffff);">Success<div style="font-size: 0.875rem; opacity: 0.8; margin-top: 0.5rem;">#37B26C</div></div><div class="color-demo" style="background-color: var(--color-interactive, #0984E3); color: var(--color-interactive-foreground, #ffffff);">Interactive<div style="font-size: 0.875rem; opacity: 0.8; margin-top: 0.5rem;">#0984E3</div></div></div></section><section class="demo-section"><h2 class="text-2xl font-semibold fallback-text-primary" style="margin-bottom: 1rem;">Interactive Button Examples</h2><p class="fallback-text-secondary" style="margin-bottom: 1rem;">Buttons with automatic hover states and intelligent text contrast.</p><div style="display: flex; flex-wrap: wrap; gap: 1rem;"><button class="btn btn-primary">Primary Action</button> <button class="btn btn-doom">Doom Action</button> <button class="btn btn-white">White Action</button> <button class="btn btn-critical">Critical Action</button> <button class="btn btn-warning">Warning Action</button> <button class="btn btn-success">Success Action</button> <button class="btn btn-interactive">Interactive Action</button></div></section><section class="demo-section"><h2 class="text-2xl font-semibold fallback-text-primary" style="margin-bottom: 1rem;">Color Opacity Variants</h2><p class="fallback-text-secondary" style="margin-bottom: 1rem;">Each semantic color comes with predefined opacity variants for subtle backgrounds and overlays.</p><div><h3 class="fallback-text-primary" style="margin: 1rem 0 0.5rem 0;">Primary Color Variants</h3><div class="opacity-demo"><div class="opacity-sample" style="background-color: var(--color-primary-10, rgba(108, 92, 231, 0.1));"></div><div class="opacity-sample" style="background-color: var(--color-primary-20, rgba(108, 92, 231, 0.2));"></div><div class="opacity-sample" style="background-color: var(--color-primary-30, rgba(108, 92, 231, 0.3));"></div><div class="opacity-sample" style="background-color: var(--color-primary-50, rgba(108, 92, 231, 0.5));"></div><div class="opacity-sample" style="background-color: var(--color-primary-70, rgba(108, 92, 231, 0.7));"></div><div class="opacity-sample" style="background-color: var(--color-primary, #6C5CE7);"></div><span class="fallback-text-secondary" style="font-size: 0.875rem;">10% → 20% → 30% → 50% → 70% → 100%</span></div><h3 class="fallback-text-primary" style="margin: 1rem 0 0.5rem 0;">Warning Color Variants</h3><div class="opacity-demo"><div class="opacity-sample" style="background-color: var(--color-warning-10, rgba(230, 227, 92, 0.1));"></div><div class="opacity-sample" style="background-color: var(--color-warning-20, rgba(230, 227, 92, 0.2));"></div><div class="opacity-sample" style="background-color: var(--color-warning-30, rgba(230, 227, 92, 0.3));"></div><div class="opacity-sample" style="background-color: var(--color-warning-50, rgba(230, 227, 92, 0.5));"></div><div class="opacity-sample" style="background-color: var(--color-warning-70, rgba(230, 227, 92, 0.7));"></div><div class="opacity-sample" style="background-color: var(--color-warning, #E6E35C);"></div><span class="fallback-text-secondary" style="font-size: 0.875rem;">10% → 20% → 30% → 50% → 70% → 100%</span></div></div></section><section class="demo-section"><h2 class="text-2xl font-semibold fallback-text-primary" style="margin-bottom: 1rem;">Material Design Icons System</h2><p class="fallback-text-secondary" style="margin-bottom: 1rem;">Complete icon library with 7400+ Material Design Icons. All icons are SVG-based for crisp rendering at any size.</p><div style="margin-bottom: 2rem;"><h3 class="fallback-text-primary" style="margin: 1rem 0 0.5rem 0;">Popular Icons</h3><div id="popular-icons" class="icon-grid" style="grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); max-height: 300px; overflow-y: auto;"></div></div><div style="margin-bottom: 2rem;"><h3 class="fallback-text-primary" style="margin: 1rem 0 0.5rem 0;">Icon Sizes</h3><div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;"><div style="display: flex; align-items: center; gap: 0.5rem;"><span id="icon-xs" class="mdi-icon mdi-icon--xs" data-icon="mdiHome"></span> <span class="fallback-text-secondary" style="font-size: 0.875rem;">XS (12px)</span></div><div style="display: flex; align-items: center; gap: 0.5rem;"><span id="icon-sm" class="mdi-icon mdi-icon--sm" data-icon="mdiHook"></span> <span class="fallback-text-secondary" style="font-size: 0.875rem;">SM (16px)</span></div><div style="display: flex; align-items: center; gap: 0.5rem;"><span id="icon-md" class="mdi-icon mdi-icon--md" data-icon="mdiHome"></span> <span class="fallback-text-secondary" style="font-size: 0.875rem;">MD (24px)</span></div><div style="display: flex; align-items: center; gap: 0.5rem;"><span id="icon-lg" class="mdi-icon mdi-icon--lg" data-icon="mdiHome"></span> <span class="fallback-text-secondary" style="font-size: 0.875rem;">LG (32px)</span></div><div style="display: flex; align-items: center; gap: 0.5rem;"><span id="icon-xl" class="mdi-icon mdi-icon--xl" data-icon="mdiHome"></span> <span class="fallback-text-secondary" style="font-size: 0.875rem;">XL (48px)</span></div></div></div><div style="margin-bottom: 2rem;"><h3 class="fallback-text-primary" style="margin: 1rem 0 0.5rem 0;">Icon Colors</h3><div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;"><span id="icon-primary" class="mdi-icon mdi-icon--md mdi-icon--primary" data-icon="mdiStar"></span> <span id="icon-success" class="mdi-icon mdi-icon--md mdi-icon--success" data-icon="mdiCheckCircle"></span> <span id="icon-warning" class="mdi-icon mdi-icon--md mdi-icon--warning" data-icon="mdiAlert"></span> <span id="icon-critical" class="mdi-icon mdi-icon--md mdi-icon--critical" data-icon="mdiCloseCircle"></span> <span id="icon-interactive" class="mdi-icon mdi-icon--md mdi-icon--interactive" data-icon="mdiInformation"></span> <span id="icon-doom" class="mdi-icon mdi-icon--md mdi-icon--doom" data-icon="mdiShield"></span></div></div><div style="margin-bottom: 2rem;"><h3 class="fallback-text-primary" style="margin: 1rem 0 0.5rem 0;">Interactive Icons</h3><div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;"><span id="icon-interactive-1" class="mdi-icon mdi-icon--lg mdi-icon--primary mdi-icon--interactive" data-icon="mdiHeart" title="Click me!"></span> <span id="icon-interactive-2" class="mdi-icon mdi-icon--lg mdi-icon--success mdi-icon--interactive" data-icon="mdiThumbUp" title="Click me!"></span> <span id="icon-interactive-3" class="mdi-icon mdi-icon--lg mdi-icon--critical mdi-icon--interactive" data-icon="mdiBookmark" title="Click me!"></span> <span id="icon-interactive-4" class="mdi-icon mdi-icon--lg mdi-icon--interactive mdi-icon--interactive" data-icon="mdiShare" title="Click me!"></span></div></div><div style="margin-bottom: 1rem;"><h3 class="fallback-text-primary" style="margin: 1rem 0 0.5rem 0;">Icon Search</h3><div style="display: flex; gap: 0.5rem; margin-bottom: 1rem;"><input id="icon-search" placeholder="Search icons..." style="flex: 1; padding: 0.5rem; border: 1px solid var(--color-border-default, #e4e4e7); border-radius: var(--border-radius-md, 0.375rem);"> <button id="search-btn" class="btn btn-primary">Search</button></div><div id="search-results" class="icon-grid" style="max-height: 300px; overflow-y: auto; display: none;"></div></div></section><section class="demo-section"><h2 class="text-2xl font-semibold fallback-text-primary" style="margin-bottom: 1rem;">Typography System</h2><p class="fallback-text-secondary" style="margin-bottom: 1rem;">Consistent typography scales with proper contrast in both light and dark modes.</p><div class="text-demo text-3xl font-bold fallback-text-primary">Heading 1 - Bold</div><div class="text-demo text-2xl font-semibold fallback-text-primary">Heading 2 - Semibold</div><div class="text-demo text-xl font-medium fallback-text-primary">Heading 3 - Medium</div><div class="text-demo text-lg font-normal fallback-text-primary">Large Text - Normal</div><div class="text-demo text-base font-normal fallback-text-primary">Body Text - Normal</div><div class="text-demo text-sm font-normal fallback-text-secondary">Small Text - Secondary</div><div class="text-demo text-xs font-light fallback-text-tertiary">Extra Small - Light</div></section><section class="demo-section"><h2 class="text-2xl font-semibold fallback-text-primary" style="margin-bottom: 1rem;">Dark Mode Features</h2><p class="fallback-text-secondary" style="margin-bottom: 1rem;">Switch between light and dark modes using the toggle in the top-right corner. All colors automatically adjust for optimal contrast and readability.</p><div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem;"><div style="padding: 1rem; background: var(--color-surface-secondary, #f8fafc); border-radius: var(--border-radius-md, 0.375rem);"><h4 class="fallback-text-primary" style="margin: 0 0 0.5rem 0;">Surface Colors</h4><p class="fallback-text-secondary" style="font-size: 0.875rem; margin: 0;">Background surfaces adapt automatically</p></div><div style="padding: 1rem; background: var(--color-surface-tertiary, #f1f5f9); border-radius: var(--border-radius-md, 0.375rem);"><h4 class="fallback-text-primary" style="margin: 0 0 0.5rem 0;">Text Contrast</h4><p class="fallback-text-secondary" style="font-size: 0.875rem; margin: 0;">Text maintains proper contrast ratios</p></div><div style="padding: 1rem; background: var(--color-surface-elevated, #ffffff); border-radius: var(--border-radius-md, 0.375rem); box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));"><h4 class="fallback-text-primary" style="margin: 0 0 0.5rem 0;">Elevated Elements</h4><p class="fallback-text-secondary" style="font-size: 0.875rem; margin: 0;">Shadows and elevation work in both modes</p></div></div></section></div><script>// Theme toggle functionality
function toggleMode() {
if (window.themeManager) {
window.themeManager.toggleMode();
updateModeDisplay();
} else {
// Fallback toggle
const root = document.documentElement;
const currentMode = root.classList.contains('dark') ? 'light' : 'dark';
root.classList.toggle('dark');
root.setAttribute('data-mode', currentMode);
updateModeDisplay(currentMode);
}
}
function updateModeDisplay(mode) {
const currentModeElement = document.getElementById('current-mode');
if (currentModeElement) {
if (window.themeManager) {
currentModeElement.textContent = window.themeManager.getCurrentMode();
} else {
currentModeElement.textContent = mode || (document.documentElement.classList.contains('dark') ? 'dark' : 'light');
}
}
}
// Initialize theme display
document.addEventListener('DOMContentLoaded', function() {
updateModeDisplay();
// Listen for theme changes if themeManager is available
if (window.themeManager) {
window.themeManager.subscribe(() => {
updateModeDisplay();
});
}
// Add click handlers to color demos for interaction
const colorDemos = document.querySelectorAll('.color-demo');
colorDemos.forEach(demo => {
demo.addEventListener('click', function() {
// Simple animation on click
this.style.transform = 'scale(0.95)';
setTimeout(() => {
this.style.transform = '';
}, 150);
});
});
});</script><script src="demo.js"></script></body></html>