styleui-components
Version:
Lightweight, modular UI component library with zero dependencies
384 lines (333 loc) • 10.4 kB
CSS
/**
* StyleUI Styles - CSS Custom Properties
* This file defines all design tokens for the application.
*/
/* Shoelace Component Theme Override */
:root {
--sl-tooltip-background-color: #1a1a1a;
--sl-tooltip-color: #ffffff;
--accent-rgb: 181, 211, 182;
--header-height: 60px;
--footer-height: 60px;
}
/* CSS Custom Properties */
:root {
/* Typography */
--font-family-base: var(--font-system);
--font-system: Inter, 'Noto Sans SC', PingFang SC, 'Microsoft YaHei', Heiti SC, sans-serif;
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
/* Colors - Light Mode (Original Style Guide) */
--bg-layer-0: #a8a8a0;
--bg-layer-1: #b4b4ac;
--bg-layer-2: #c0c0b8;
--bg-layer-3: #9c9c94;
--bg-layer-4: #90908c; /* Darkest background */
--text-primary: #424242;
--text-secondary: #616161;
--text-tertiary: #757575;
--text-quaternary: #9e9e9e;
--text-disabled: #bdbdbd;
--text-placeholder: #e0e0e0;
--border-color: #9e9e9e00;
--border-strong: #bdbdbd;
/* Accent Colors (Original Style Guide) */
--default-accent: #b5d3b6;
--default-accent-hover: #9fc5a1;
--default-accent-dark: #2c592d;
--accent: var(--default-accent);
--accent-hover: var(--default-accent-hover);
--accent-text: var(--default-accent-dark);
/* Semantic Colors (Pastel) */
--primary: #b3d9ff; /* Soft Blue - Primary actions */
--success: #b8e6b8; /* Soft Green - Success states */
--warning: #ffe4a3; /* Soft Amber - Warnings */
--error: #ffb3ba; /* Soft Red - Errors */
--info: #d4c5f9; /* Soft Purple - Information */
--neutral: #e8e3d9; /* Soft Beige - Neutral */
/* RGBA versions for transparent backgrounds */
--primary-rgba: 179, 217, 255;
--success-rgba: 184, 230, 184;
--warning-rgba: 255, 228, 163;
--error-rgba: 255, 179, 186;
--info-rgba: 212, 197, 249;
/* Semantic Hover Colors */
--primary-hover: #a1c9e8;
--success-hover: #a6d4a6;
--warning-hover: #e8d193;
--error-hover: #e8a1a8;
--info-hover: #c2b3e1;
/* Dark Semantic Colors for Text */
--primary-dark: #0059b3;
--success-dark: #1e7e34;
--warning-dark: #856404;
--error-dark: #721c24;
--info-dark: #492a7c;
/* Component-Specific Variables */
--input-background: var(--bg-layer-2);
--input-background-focus: var(--bg-layer-3);
--range-track-background: var(--bg-layer-3);
/* Greyscale Colors */
--grey-50: #fafafa;
--grey-100: #f5f5f5;
--grey-200: #eeeeee;
--grey-300: #e0e0e0;
--grey-400: #bdbdbd;
--grey-500: #9e9e9e;
--grey-600: #757575;
--grey-700: #616161;
--grey-800: #424242;
--grey-900: #212121;
/* Component Dimensions */
--nav-width: 300px;
--nav-width-mobile: 280px;
--card-min-width: 350px;
--card-header-min-height: 60px;
--icon-size-sm: 16px;
--icon-size-md: 20px;
--icon-size-lg: 32px;
--spinner-size-sm: 20px;
--spinner-size-md: 32px;
--spinner-size-lg: 48px;
/* Overlay Colors */
--overlay-light: rgba(0, 0, 0, 0.05);
--overlay-medium: rgba(0, 0, 0, 0.08);
--overlay-backdrop: rgba(0, 0, 0, 0.5);
--overlay-light-dark: rgba(255, 255, 255, 0.05);
--overlay-medium-dark: rgba(255, 255, 255, 0.08);
/* Animation Durations */
--duration-toast: 5000ms;
--duration-modal: 300ms;
/* Font Sizes (Original Style Guide) */
--font-size-3xs: 0.5rem; /* New size for tiny tags */
--font-size-2xs: 0.625rem;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
/* Font Weights */
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
/* Typography Controls */
--h1-letter-spacing: -0.02em;
--h2-letter-spacing: -0.015em;
--h3-letter-spacing: -0.01em;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
/* Spacing */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* Border Radius */
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-full: 9999px;
/* Transitions */
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
/* Z-index */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
/* Breakpoints */
--breakpoint-lg: 1400px;
--breakpoint-md: 1024px;
--breakpoint-sm: 768px;
/* Motion variables */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
/* Accessibility */
--focus-ring: var(--accent);
}
/* Dark Theme */
body.dark {
/* Dark tinted backgrounds - inverted and darkened */
--bg-layer-0: #2a2a28;
--bg-layer-1: #242422;
--bg-layer-2: #1e1e1c;
--bg-layer-3: #323230;
--bg-layer-4: #161614; /* Darkest background */
/* Dimmed text colors for dark theme */
--text-primary: #bbbbbb;
--text-secondary: #8c8c8c;
--text-tertiary: #6c6c6c;
--text-quaternary: #4d4d4d;
--text-disabled: #3e3e3e;
--text-placeholder: #323232;
/* Darker borders for dark theme */
--border-color: #4a4a4a;
--border-strong: #5a5a5a;
/* Same accent colors - they work in both themes */
/* Accent colors are already designed to work on both light and dark backgrounds */
/* Slightly adjusted semantic colors for dark theme - just enough to maintain readability */
--primary: #8fc2f0; /* Slightly darker blue */
--success: #9bd69b; /* Slightly darker green */
--warning: #f0d490; /* Slightly darker amber */
--error: #f09ba2; /* Slightly darker red */
--info: #bbb0e6; /* Slightly darker purple */
--neutral: #d6d1c7; /* Slightly darker beige */
/* Semantic Hover Colors (Dark Theme) */
--primary-hover: #7dafd8;
--success-hover: #89c489;
--warning-hover: #d8bf82;
--error-hover: #d88990;
--info-hover: #a99ed4;
/* Dark Semantic Colors for Text (Dark Theme) */
--primary-dark: #5c9ccc;
--success-dark: #6abf69;
--warning-dark: #d1b160;
--error-dark: #d17d83;
--info-dark: #9a8ec8;
/* Component-Specific Variables */
--input-background: var(--bg-layer-2);
--input-background-focus: var(--bg-layer-4);
--range-track-background: var(--bg-layer-4);
/* Inverted grey scale for dark theme */
--grey-50: #212121;
--grey-100: #424242;
--grey-200: #616161;
--grey-300: #757575;
--grey-400: #9e9e9e;
--grey-500: #bdbdbd;
--grey-600: #e0e0e0;
--grey-700: #eeeeee;
--grey-800: #f5f5f5;
--grey-900: #fafafa;
/* Adjusted overlay colors for dark theme */
--overlay-light: rgba(255, 255, 255, 0.05);
--overlay-medium: rgba(255, 255, 255, 0.08);
--overlay-backdrop: rgba(0, 0, 0, 0.7);
}
/* Theme Tinting System - Only affects background colors, not accent */
/* Tint background colors in light theme */
[data-tint="primary"]:not(.dark) {
--bg-layer-0: #a8b0c0;
--bg-layer-1: #b4bcc8;
--bg-layer-2: #c0c8d4;
--bg-layer-3: #9ca4b4;
--bg-layer-4: #9098a8;
}
[data-tint="success"]:not(.dark) {
--bg-layer-0: #a8b8a8;
--bg-layer-1: #b4c4b4;
--bg-layer-2: #c0d0c0;
--bg-layer-3: #9cac9c;
--bg-layer-4: #90a090;
}
[data-tint="warning"]:not(.dark) {
--bg-layer-0: #c0b8a0;
--bg-layer-1: #ccc4ac;
--bg-layer-2: #d8d0b8;
--bg-layer-3: #b4ac94;
--bg-layer-4: #a8a088;
}
[data-tint="error"]:not(.dark) {
--bg-layer-0: #c0a8ac;
--bg-layer-1: #ccb4b8;
--bg-layer-2: #d8c0c4;
--bg-layer-3: #b49ca0;
--bg-layer-4: #a89094;
}
[data-tint="info"]:not(.dark) {
--bg-layer-0: #b0a8c0;
--bg-layer-1: #bcb4cc;
--bg-layer-2: #c8c0d8;
--bg-layer-3: #a49cb4;
--bg-layer-4: #9890a8;
}
[data-tint="neutral"]:not(.dark) {
--bg-layer-0: #b0aca8;
--bg-layer-1: #bcb8b4;
--bg-layer-2: #d0ccc8;
--bg-layer-3: #a4a09c;
--bg-layer-4: #989490;
}
/* Tint background colors in dark theme */
[data-tint="primary"].dark {
--bg-layer-0: #2a2c30;
--bg-layer-1: #24262a;
--bg-layer-2: #1e2024;
--bg-layer-3: #323438;
--bg-layer-4: #16181a;
}
[data-tint="success"].dark {
--bg-layer-0: #2a302a;
--bg-layer-1: #242a24;
--bg-layer-2: #1e241e;
--bg-layer-3: #323832;
--bg-layer-4: #161a16;
}
[data-tint="warning"].dark {
--bg-layer-0: #302e2a;
--bg-layer-1: #2a2824;
--bg-layer-2: #24221e;
--bg-layer-3: #383632;
--bg-layer-4: #1a1816;
}
[data-tint="error"].dark {
--bg-layer-0: #302a2a;
--bg-layer-1: #2a2424;
--bg-layer-2: #241e1e;
--bg-layer-3: #383232;
--bg-layer-4: #1a1616;
}
[data-tint="info"].dark {
--bg-layer-0: #2c2a30;
--bg-layer-1: #26242a;
--bg-layer-2: #201e24;
--bg-layer-3: #343238;
--bg-layer-4: #18161a;
}
[data-tint="neutral"].dark {
--bg-layer-0: #2c2c2a;
--bg-layer-1: #262624;
--bg-layer-2: #20201e;
--bg-layer-3: #343432;
--bg-layer-4: #181816;
}
body.spacing-compact {
--space-1: 0.125rem;
--space-1-5: 0.25rem;
--space-2: 0.375rem;
--space-3: 0.5rem;
--space-4: 0.75rem;
--space-5: 1rem;
--space-6: 1.25rem;
--space-8: 1.5rem;
--space-10: 2rem;
--space-12: 2.5rem;
--space-16: 3rem;
--space-20: 4rem;
--space-24: 5rem;
}