@tamyla/ui-components-react
Version:
React-based UI component library with Factory Bridge pattern - integrates seamlessly with @tamyla/ui-components. Enhanced AI agent discoverability with structured component registry, comprehensive Storybook (8 components), and detailed guides.
170 lines (148 loc) • 6.06 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Theming Test</title>
<style>
/* CSS Custom Properties for theming */
:root {
--primary-600: #2563eb;
--primary-700: #1d4ed8;
--neutral-50: #f9fafb;
--neutral-100: #f3f4f6;
--neutral-900: #111827;
--color-error-border: #ef4444;
--color-error-bg: #fee2e2;
--color-error-text: #dc2626;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--border-radius-md: 0.375rem;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--background: #ffffff;
--foreground: #111827;
--text-primary: #111827;
--text-secondary: #6b7280;
--border: #e5e7eb;
}
[data-theme="dark"] {
--background: #111827;
--foreground: #f9fafb;
--text-primary: #f9fafb;
--text-secondary: #e5e7eb;
--border: #374151;
}
* { box-sizing: border-box; }
body {
font-family: var(--font-family);
margin: 0;
padding: 0;
background: var(--background);
color: var(--foreground);
line-height: 1.6;
transition: background-color 0.3s ease, color 0.3s ease;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: var(--spacing-4);
}
.header {
background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
color: white;
padding: var(--spacing-8) var(--spacing-4);
text-align: center;
margin-bottom: var(--spacing-8);
}
.theme-toggle {
position: fixed;
top: var(--spacing-4);
right: var(--spacing-4);
background: var(--neutral-100);
border: 1px solid var(--border);
border-radius: var(--border-radius-md);
padding: var(--spacing-4);
cursor: pointer;
font-size: 14px;
color: var(--text-primary);
transition: all 0.2s ease;
z-index: 1000;
}
.card {
background: var(--background);
border: 1px solid var(--border);
border-radius: var(--border-radius-md);
padding: var(--spacing-6);
box-shadow: var(--shadow-sm);
margin-bottom: var(--spacing-4);
transition: all 0.2s ease;
}
.alert {
padding: var(--spacing-4);
border-radius: var(--border-radius-md);
border: 1px solid var(--color-error-border);
background: var(--color-error-bg);
color: var(--color-error-text);
margin-bottom: var(--spacing-4);
}
h1 { font-size: 2rem; margin: 0 0 0.5rem 0; }
h3 { font-size: 1.25rem; margin: 0 0 1rem 0; color: var(--text-primary); }
p { margin: 0 0 1rem 0; color: var(--text-secondary); }
@media (max-width: 768px) {
.container { padding: 1rem; }
h1 { font-size: 1.5rem; }
}
</style>
</head>
<body>
<button class="theme-toggle" onclick="toggleTheme()" id="themeToggle">
🌙 Dark Mode
</button>
<div class="header">
<h1>Theming & Responsive Test</h1>
<p>Testing CSS custom properties and theme switching</p>
</div>
<div class="container">
<div class="alert">
🎨 <strong>Theme System Active:</strong> This page demonstrates CSS custom properties working with theme switching. All colors use design tokens instead of hardcoded values.
</div>
<div class="card">
<h3>✅ Theme Features Working</h3>
<p>Click the theme toggle button to switch between light and dark modes.</p>
<p>Current window width: <span id="width">Loading...</span>px</p>
<p>All styling uses CSS custom properties for consistent theming.</p>
</div>
<div class="card">
<h3>📱 Responsive Design</h3>
<p>This layout adapts to different screen sizes using CSS media queries.</p>
<p>Try resizing your browser window to see the responsive behavior.</p>
</div>
<div class="card">
<h3>🛠️ Technical Details</h3>
<p>✅ Zero hardcoded colors - all use CSS custom properties</p>
<p>✅ Semantic color tokens for error states</p>
<p>✅ Design token integration</p>
<p>✅ Mobile-first responsive design</p>
</div>
</div>
<script>
let currentTheme = 'light';
function toggleTheme() {
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', currentTheme);
const button = document.getElementById('themeToggle');
button.textContent = currentTheme === 'light' ? '🌙 Dark Mode' : '☀️ Light Mode';
}
function updateWidth() {
document.getElementById('width').textContent = window.innerWidth;
}
window.addEventListener('resize', updateWidth);
updateWidth();
console.log('✅ Theme system loaded successfully');
console.log('✅ CSS custom properties active');
console.log('✅ Responsive design enabled');
</script>
</body>
</html>