ui
This commit is contained in:
Gaurav Kumar
@@ -1,367 +0,0 @@
|
||||
// ========================================
|
||||
// DYNAMIC THEME VARIABLES
|
||||
// ========================================
|
||||
@import './design-tokens';
|
||||
// CSS Custom Properties for Dynamic Theming
|
||||
// These variables will be set by the ThemeService at runtime
|
||||
|
||||
:root {
|
||||
// Default theme variables (fallback values)
|
||||
--theme-primary: #0ea5e9;
|
||||
--theme-secondary: #64748b;
|
||||
--theme-accent: #8b5cf6;
|
||||
--theme-background: #f8fafc;
|
||||
--theme-surface: #ffffff;
|
||||
--theme-text: #111827;
|
||||
--theme-text-secondary: #6b7280;
|
||||
|
||||
// Font variables
|
||||
--theme-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--theme-font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--theme-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
|
||||
|
||||
// Other theme properties
|
||||
--theme-border-radius: 0.75rem;
|
||||
--theme-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
// Derived colors for better theme integration
|
||||
--theme-primary-50: #{rgba(#0ea5e9, 0.05)};
|
||||
--theme-primary-100: #{rgba(#0ea5e9, 0.1)};
|
||||
--theme-primary-200: #{rgba(#0ea5e9, 0.2)};
|
||||
--theme-primary-300: #{rgba(#0ea5e9, 0.3)};
|
||||
--theme-primary-500: #0ea5e9;
|
||||
--theme-primary-600: #{darken(#0ea5e9, 10%)};
|
||||
--theme-primary-700: #{darken(#0ea5e9, 20%)};
|
||||
--theme-primary-800: #{darken(#0ea5e9, 30%)};
|
||||
--theme-primary-900: #{darken(#0ea5e9, 40%)};
|
||||
|
||||
// Gradient definitions using theme colors
|
||||
--theme-gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-700) 100%);
|
||||
--theme-gradient-secondary: linear-gradient(135deg, var(--theme-secondary) 0%, #{darken(#64748b, 20%)} 100%);
|
||||
--theme-gradient-accent: linear-gradient(135deg, var(--theme-accent) 0%, #{darken(#8b5cf6, 20%)} 100%);
|
||||
|
||||
// Glassmorphism effects
|
||||
--theme-glass-bg: rgba(255, 255, 255, 0.1);
|
||||
--theme-glass-border: rgba(255, 255, 255, 0.2);
|
||||
--theme-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
}
|
||||
|
||||
// Dark theme overrides
|
||||
[data-theme="dark"] {
|
||||
--theme-background: #111827;
|
||||
--theme-surface: #1f2937;
|
||||
--theme-text: #f9fafb;
|
||||
--theme-text-secondary: #d1d5db;
|
||||
--theme-glass-bg: rgba(0, 0, 0, 0.1);
|
||||
--theme-glass-border: rgba(255, 255, 255, 0.1);
|
||||
--theme-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
// Theme-aware utility classes
|
||||
// ========================================
|
||||
|
||||
// Background colors
|
||||
.bg-theme-primary { background-color: var(--theme-primary) !important; }
|
||||
.bg-theme-secondary { background-color: var(--theme-secondary) !important; }
|
||||
.bg-theme-accent { background-color: var(--theme-accent) !important; }
|
||||
.bg-theme-background { background-color: var(--theme-background) !important; }
|
||||
.bg-theme-surface { background-color: var(--theme-surface) !important; }
|
||||
|
||||
// Text colors
|
||||
.text-theme-primary { color: var(--theme-primary) !important; }
|
||||
.text-theme-secondary { color: var(--theme-secondary) !important; }
|
||||
.text-theme-accent { color: var(--theme-accent) !important; }
|
||||
.text-theme-text { color: var(--theme-text) !important; }
|
||||
.text-theme-text-secondary { color: var(--theme-text-secondary) !important; }
|
||||
|
||||
// Border colors
|
||||
.border-theme-primary { border-color: var(--theme-primary) !important; }
|
||||
.border-theme-secondary { border-color: var(--theme-secondary) !important; }
|
||||
.border-theme-accent { border-color: var(--theme-accent) !important; }
|
||||
|
||||
// Gradients
|
||||
.bg-gradient-theme-primary { background: var(--theme-gradient-primary) !important; }
|
||||
.bg-gradient-theme-secondary { background: var(--theme-gradient-secondary) !important; }
|
||||
.bg-gradient-theme-accent { background: var(--theme-gradient-accent) !important; }
|
||||
|
||||
// Font families
|
||||
.font-theme-primary { font-family: var(--theme-font-primary) !important; }
|
||||
.font-theme-secondary { font-family: var(--theme-font-secondary) !important; }
|
||||
.font-theme-mono { font-family: var(--theme-font-mono) !important; }
|
||||
|
||||
// Border radius
|
||||
.rounded-theme { border-radius: var(--theme-border-radius) !important; }
|
||||
|
||||
// Shadows
|
||||
.shadow-theme { box-shadow: var(--theme-shadow) !important; }
|
||||
|
||||
// Glassmorphism effects
|
||||
.glass-theme {
|
||||
background: var(--theme-glass-bg) !important;
|
||||
backdrop-filter: blur(16px) !important;
|
||||
border: 1px solid var(--theme-glass-border) !important;
|
||||
box-shadow: var(--theme-glass-shadow) !important;
|
||||
}
|
||||
|
||||
// Theme-aware component overrides
|
||||
// ========================================
|
||||
|
||||
// Update existing component styles to use theme variables
|
||||
.modern-card {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border: 1px solid rgba(var(--theme-text-secondary), 0.1);
|
||||
box-shadow: var(--theme-shadow);
|
||||
}
|
||||
|
||||
.modern-btn {
|
||||
&.btn-primary {
|
||||
background: var(--theme-gradient-primary);
|
||||
color: white;
|
||||
border-color: var(--theme-primary-600);
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.2);
|
||||
}
|
||||
|
||||
&.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--theme-primary);
|
||||
border-color: var(--theme-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.modern-form-group {
|
||||
.form-label {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.form-input {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.2);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px var(--theme-primary-100);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modern-table {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
|
||||
thead {
|
||||
background: var(--theme-background);
|
||||
|
||||
th {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modern-alert {
|
||||
&.alert-info {
|
||||
background: var(--theme-primary-100);
|
||||
border-color: var(--theme-primary-200);
|
||||
color: var(--theme-primary-800);
|
||||
}
|
||||
|
||||
&.alert-success {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border-color: rgba(16, 185, 129, 0.2);
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
&.alert-warning {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
border-color: rgba(245, 158, 11, 0.2);
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
&.alert-error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-color: rgba(239, 68, 68, 0.2);
|
||||
color: #991b1b;
|
||||
}
|
||||
}
|
||||
|
||||
// Layout component theme integration
|
||||
// ========================================
|
||||
|
||||
.modern-layout {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
.modern-header {
|
||||
background: rgba(var(--theme-surface), 0.95);
|
||||
border-bottom: 1px solid rgba(var(--theme-text-secondary), 0.1);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.modern-branding {
|
||||
.company-title {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.company-subtitle {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.modern-sidebar {
|
||||
background: rgba(var(--theme-surface), 0.98);
|
||||
border-right: 1px solid rgba(var(--theme-text-secondary), 0.05);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.modern-nav-link,
|
||||
.modern-nav-link-single {
|
||||
color: var(--theme-text-secondary);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-primary-100);
|
||||
color: var(--theme-primary-700);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--theme-primary-100);
|
||||
color: var(--theme-primary-800);
|
||||
}
|
||||
}
|
||||
|
||||
.modern-user-button {
|
||||
background: transparent;
|
||||
color: var(--theme-text);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.2);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.modern-dropdown-menu {
|
||||
background: var(--theme-surface);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.2);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.modern-dropdown-item {
|
||||
color: var(--theme-text);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
|
||||
// Dashboard theme integration
|
||||
// ========================================
|
||||
|
||||
.modern-dashboard {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
background: var(--theme-gradient-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border: 1px solid rgba(var(--theme-text-secondary), 0.1);
|
||||
|
||||
.stats-value {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.action-card {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.2);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-primary-300);
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.activity-card {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
|
||||
.activity-item {
|
||||
border-bottom-color: rgba(var(--theme-text-secondary), 0.1);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
.activity-title {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive theme adjustments
|
||||
// ========================================
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme]) {
|
||||
--theme-background: #111827;
|
||||
--theme-surface: #1f2937;
|
||||
--theme-text: #f9fafb;
|
||||
--theme-text-secondary: #d1d5db;
|
||||
}
|
||||
}
|
||||
|
||||
// Print styles
|
||||
// ========================================
|
||||
|
||||
@media print {
|
||||
:root {
|
||||
--theme-background: white;
|
||||
--theme-surface: white;
|
||||
--theme-text: black;
|
||||
--theme-text-secondary: #666;
|
||||
--theme-shadow: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user