fix: DockerSecretsResolver - don't normalize absolute paths like /var/www/html/...
Some checks failed
Deploy Application / deploy (push) Has been cancelled
Some checks failed
Deploy Application / deploy (push) Has been cancelled
This commit is contained in:
@@ -28,16 +28,16 @@
|
||||
--admin-container-wide: 1400px;
|
||||
|
||||
/* Sidebar Widths per Breakpoint */
|
||||
--admin-sidebar-width-mobile: 100%;
|
||||
--admin-sidebar-width-tablet: 250px;
|
||||
--admin-sidebar-width-desktop: 250px;
|
||||
--admin-sidebar-width-wide: 280px;
|
||||
--sidebar-width-mobile: 100%;
|
||||
--sidebar-width-tablet: 250px;
|
||||
--sidebar-width-desktop: 250px;
|
||||
--sidebar-width-wide: 280px;
|
||||
|
||||
/* Header Heights per Breakpoint */
|
||||
--admin-header-height-mobile: 3.5rem;
|
||||
--admin-header-height-tablet: 4rem;
|
||||
--admin-header-height-desktop: 4rem;
|
||||
--admin-header-height-wide: 4.5rem;
|
||||
--header-height-mobile: 2.5rem;
|
||||
--header-height-tablet: 3rem;
|
||||
--header-height-desktop: 3rem;
|
||||
--header-height-wide: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,16 +4,123 @@
|
||||
* This file is automatically generated from AdminTokenRegistry.
|
||||
* To modify tokens, edit: src/Application/Admin/ValueObjects/AdminTokenRegistry.php
|
||||
*
|
||||
* Generated: 2025-11-07 (Placeholder - run 'php console.php design:generate-tokens --scope=admin' to regenerate)
|
||||
* Generated: 2025-11-21 13:01:06
|
||||
* Source: AdminTokenRegistry
|
||||
* Scope: admin
|
||||
* Architecture: ITCSS
|
||||
*
|
||||
* NOTE: This is a placeholder file. Run the following command to generate the actual tokens:
|
||||
* php console.php design:generate-tokens --scope=admin
|
||||
*/
|
||||
|
||||
@layer admin-settings {
|
||||
/* Placeholder - tokens will be generated by design:generate-tokens command */
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-primary: oklch(98% 0.01 280); /* Color: bg-primary */
|
||||
--bg-secondary: oklch(95% 0.01 280); /* Color: bg-secondary */
|
||||
--bg-tertiary: oklch(92% 0.01 280); /* Color: bg-tertiary */
|
||||
--sidebar-bg: oklch(25% 0.02 280); /* Color: sidebar-bg */
|
||||
--sidebar-text: oklch(90% 0.01 280); /* Color: sidebar-text */
|
||||
--sidebar-text-hover: oklch(100% 0 0); /* Color: sidebar-text-hover */
|
||||
--sidebar-active: oklch(45% 0.15 280); /* Color: sidebar-active */
|
||||
--sidebar-border: oklch(30% 0.02 280); /* Color: sidebar-border */
|
||||
--header-bg: oklch(100% 0 0); /* Color: header-bg */
|
||||
--header-border: oklch(85% 0.01 280); /* Color: header-border */
|
||||
--header-text: oklch(20% 0.02 280); /* Color: header-text */
|
||||
--content-bg: oklch(100% 0 0); /* Color: content-bg */
|
||||
--content-text: oklch(20% 0.02 280); /* Color: content-text */
|
||||
--link-color: oklch(55% 0.2 260); /* Color: link-color */
|
||||
--link-hover: oklch(45% 0.25 260); /* Color: link-hover */
|
||||
--link-active: oklch(35% 0.3 260); /* Color: link-active */
|
||||
--accent-primary: oklch(60% 0.2 280); /* Color: accent-primary */
|
||||
--accent-success: oklch(65% 0.2 145); /* Color: accent-success */
|
||||
--accent-warning: oklch(70% 0.2 85); /* Color: accent-warning */
|
||||
--accent-error: oklch(60% 0.25 25); /* Color: accent-error */
|
||||
--accent-info: oklch(65% 0.2 240); /* Color: accent-info */
|
||||
--border-light: oklch(90% 0.01 280); /* Color: border-light */
|
||||
--border-medium: oklch(80% 0.02 280); /* Color: border-medium */
|
||||
--border-dark: oklch(70% 0.02 280); /* Color: border-dark */
|
||||
--focus-ring: oklch(55% 0.2 260); /* Color: focus-ring */
|
||||
--hover-overlay: oklch(0% 0 0 / 0.05); /* Color: hover-overlay */
|
||||
--spacing-xs: 0.25rem; /* Extra small spacing */
|
||||
--spacing-sm: 0.5rem; /* Small spacing */
|
||||
--spacing-md: 1rem; /* Medium spacing */
|
||||
--spacing-lg: 1.5rem; /* Large spacing */
|
||||
--spacing-xl: 2rem; /* Extra large spacing */
|
||||
--spacing-2xl: 3rem; /* Double extra large spacing */
|
||||
--spacing-sidebar: 250px; /* Sidebar width */
|
||||
--spacing-sidebar-wide: 280px; /* Sidebar width on wide screens */
|
||||
--spacing-header: 4rem; /* Header height */
|
||||
--spacing-content-padding: 2rem; /* Content padding */
|
||||
--spacing-content-max-width: 1400px; /* Content maximum width */
|
||||
--font-size-xs: 0.75rem; /* Extra small font size */
|
||||
--font-size-sm: 0.875rem; /* Small font size */
|
||||
--font-size-base: 1rem; /* Base font size */
|
||||
--font-size-lg: 1.125rem; /* Large font size */
|
||||
--font-size-xl: 1.25rem; /* Extra large font size */
|
||||
--font-size-2xl: 1.5rem; /* Double extra large font size */
|
||||
--font-size-3xl: 1.875rem; /* Triple extra large font size */
|
||||
--radius-sm: 0.25rem; /* Small border radius */
|
||||
--radius-md: 0.375rem; /* Medium border radius */
|
||||
--radius-lg: 0.5rem; /* Large border radius */
|
||||
--radius-xl: 0.75rem; /* Extra large border radius */
|
||||
--radius-full: 9999px; /* Full border radius (pill shape) */
|
||||
--transition-fast: 0.15s ease; /* Fast transition */
|
||||
--transition-base: 0.2s ease; /* Base transition */
|
||||
--transition-slow: 0.3s ease; /* Slow transition */
|
||||
--shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.05); /* Small shadow */
|
||||
--shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -1px oklch(0% 0 0 / 0.06); /* Medium shadow */
|
||||
--shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -2px oklch(0% 0 0 / 0.05); /* Large shadow */
|
||||
--shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 10px 10px -5px oklch(0% 0 0 / 0.04); /* Extra large shadow */
|
||||
--icon-size-sm: 16px; /* Small icon size */
|
||||
--icon-size-md: 18px; /* Medium icon size */
|
||||
--icon-size-lg: 24px; /* Large icon size */
|
||||
--z-base: 1; /* Base z-index */
|
||||
--z-header: 90; /* Header z-index */
|
||||
--z-sidebar: 100; /* Sidebar z-index */
|
||||
--z-dropdown: 110; /* Dropdown z-index */
|
||||
--z-overlay: 120; /* Overlay z-index */
|
||||
--z-modal: 130; /* Modal z-index */
|
||||
--z-tooltip: 140; /* Tooltip z-index */
|
||||
--z-toast: 150; /* Toast z-index */
|
||||
--line-height-tight: 1.25; /* Tight line height */
|
||||
--line-height-normal: 1.5; /* Normal line height */
|
||||
--line-height-relaxed: 1.75; /* Relaxed line height */
|
||||
--container-mobile: 100px; /* Mobile container width (100%) */
|
||||
--container-tablet: 720px; /* Tablet container width */
|
||||
--container-desktop: 960px; /* Desktop container width */
|
||||
--container-wide: 1400px; /* Wide container width */
|
||||
--breakpoint-tablet: 768px; /* Tablet breakpoint */
|
||||
--breakpoint-desktop: 1024px; /* Desktop breakpoint */
|
||||
--breakpoint-wide: 1440px; /* Wide breakpoint */
|
||||
}
|
||||
@media (dynamic-range: high) {
|
||||
}
|
||||
@supports (color: color(display-p3 1 0 0)) {
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-primary: oklch(20% 0.02 280); /* Dark mode variant */
|
||||
--bg-secondary: oklch(23% 0.02 280); /* Dark mode variant */
|
||||
--bg-tertiary: oklch(26% 0.02 280); /* Dark mode variant */
|
||||
--sidebar-bg: oklch(15% 0.02 280); /* Dark mode variant */
|
||||
--sidebar-text: oklch(75% 0.02 280); /* Dark mode variant */
|
||||
--sidebar-text-hover: oklch(95% 0.01 280); /* Dark mode variant */
|
||||
--sidebar-active: oklch(35% 0.2 280); /* Dark mode variant */
|
||||
--sidebar-border: oklch(25% 0.02 280); /* Dark mode variant */
|
||||
--header-bg: oklch(18% 0.02 280); /* Dark mode variant */
|
||||
--header-border: oklch(30% 0.02 280); /* Dark mode variant */
|
||||
--header-text: oklch(90% 0.01 280); /* Dark mode variant */
|
||||
--content-bg: oklch(20% 0.02 280); /* Dark mode variant */
|
||||
--content-text: oklch(90% 0.01 280); /* Dark mode variant */
|
||||
--link-color: oklch(70% 0.2 260); /* Dark mode variant */
|
||||
--link-hover: oklch(80% 0.22 260); /* Dark mode variant */
|
||||
--link-active: oklch(85% 0.25 260); /* Dark mode variant */
|
||||
--accent-primary: oklch(65% 0.22 280); /* Dark mode variant */
|
||||
--accent-success: oklch(70% 0.22 145); /* Dark mode variant */
|
||||
--accent-warning: oklch(75% 0.22 85); /* Dark mode variant */
|
||||
--accent-error: oklch(65% 0.27 25); /* Dark mode variant */
|
||||
--accent-info: oklch(70% 0.22 240); /* Dark mode variant */
|
||||
--border-light: oklch(30% 0.02 280); /* Dark mode variant */
|
||||
--border-medium: oklch(35% 0.02 280); /* Dark mode variant */
|
||||
--border-dark: oklch(40% 0.02 280); /* Dark mode variant */
|
||||
--focus-ring: oklch(70% 0.2 260); /* Dark mode variant */
|
||||
--hover-overlay: oklch(100% 0 0 / 0.05); /* Dark mode variant */
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -10,77 +10,77 @@
|
||||
/* Color Tokens - OKLCH (Perceptual Color Space) */
|
||||
|
||||
/* Primary Background Colors */
|
||||
--admin-bg-primary: oklch(98% 0.01 280);
|
||||
--admin-bg-secondary: oklch(95% 0.01 280);
|
||||
--admin-bg-tertiary: oklch(92% 0.01 280);
|
||||
--bg-primary: oklch(98% 0.01 280);
|
||||
--bg-secondary: oklch(95% 0.01 280);
|
||||
--bg-tertiary: oklch(92% 0.01 280);
|
||||
|
||||
/* Sidebar Colors */
|
||||
--admin-sidebar-bg: oklch(25% 0.02 280);
|
||||
--admin-sidebar-text: oklch(90% 0.01 280);
|
||||
--admin-sidebar-text-hover: oklch(100% 0 0);
|
||||
--admin-sidebar-active: oklch(45% 0.15 280);
|
||||
--admin-sidebar-border: oklch(30% 0.02 280);
|
||||
--sidebar-bg: oklch(25% 0.02 280);
|
||||
--sidebar-text: oklch(90% 0.01 280);
|
||||
--sidebar-text-hover: oklch(100% 0 0);
|
||||
--sidebar-active: oklch(45% 0.15 280);
|
||||
--sidebar-border: oklch(30% 0.02 280);
|
||||
|
||||
/* Header Colors */
|
||||
--admin-header-bg: oklch(100% 0 0);
|
||||
--admin-header-border: oklch(85% 0.01 280);
|
||||
--admin-header-text: oklch(20% 0.02 280);
|
||||
--header-bg: oklch(100% 0 0);
|
||||
--header-border: oklch(85% 0.01 280);
|
||||
--header-text: oklch(20% 0.02 280);
|
||||
|
||||
/* Content Area */
|
||||
--admin-content-bg: oklch(100% 0 0);
|
||||
--admin-content-text: oklch(20% 0.02 280);
|
||||
--content-bg: oklch(100% 0 0);
|
||||
--content-text: oklch(20% 0.02 280);
|
||||
|
||||
/* Interactive Elements */
|
||||
--admin-link-color: oklch(55% 0.2 260);
|
||||
--admin-link-hover: oklch(45% 0.25 260);
|
||||
--admin-link-active: oklch(35% 0.3 260);
|
||||
--link-color: oklch(55% 0.2 260);
|
||||
--link-hover: oklch(45% 0.25 260);
|
||||
--link-active: oklch(35% 0.3 260);
|
||||
|
||||
/* Accent Colors - WCAG AA Compliant (4.5:1 minimum) */
|
||||
--admin-accent-primary: oklch(60% 0.2 280);
|
||||
--admin-accent-success: oklch(58% 0.22 145); /* Fixed: 4.8:1 contrast */
|
||||
--admin-accent-warning: oklch(62% 0.22 85); /* Fixed: 4.6:1 contrast */
|
||||
--admin-accent-error: oklch(60% 0.25 25);
|
||||
--admin-accent-info: oklch(58% 0.22 240); /* Fixed: 5.1:1 contrast */
|
||||
--accent-primary: oklch(60% 0.2 280);
|
||||
--accent-success: oklch(58% 0.22 145); /* Fixed: 4.8:1 contrast */
|
||||
--accent-warning: oklch(62% 0.22 85); /* Fixed: 4.6:1 contrast */
|
||||
--accent-error: oklch(60% 0.25 25);
|
||||
--accent-info: oklch(58% 0.22 240); /* Fixed: 5.1:1 contrast */
|
||||
|
||||
/* Border Colors - WCAG AA Compliant (3:1 for UI components) */
|
||||
--admin-border-light: oklch(75% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--admin-border-medium: oklch(70% 0.02 280); /* Already compliant: 3.5:1 */
|
||||
--admin-border-dark: oklch(70% 0.02 280);
|
||||
--border-light: oklch(75% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--border-medium: oklch(70% 0.02 280); /* Already compliant: 3.5:1 */
|
||||
--border-dark: oklch(70% 0.02 280);
|
||||
|
||||
/* Focus/Hover States */
|
||||
--admin-focus-ring: oklch(55% 0.2 260);
|
||||
--admin-hover-overlay: oklch(0% 0 0 / 0.05);
|
||||
--focus-ring: oklch(55% 0.2 260);
|
||||
--hover-overlay: oklch(0% 0 0 / 0.05);
|
||||
|
||||
/* Spacing Tokens */
|
||||
|
||||
/* Layout Spacing */
|
||||
--admin-spacing-sidebar: 250px;
|
||||
--admin-spacing-header: 4rem;
|
||||
--admin-spacing-content-padding: 2rem;
|
||||
--admin-spacing-content-max-width: 1400px;
|
||||
--spacing-sidebar: 250px;
|
||||
--spacing-header: 4rem;
|
||||
--spacing-content-padding: 2rem;
|
||||
--spacing-content-max-width: 1400px;
|
||||
|
||||
/* Component Spacing */
|
||||
--admin-spacing-xs: 0.25rem;
|
||||
--admin-spacing-sm: 0.5rem;
|
||||
--admin-spacing-md: 1rem;
|
||||
--admin-spacing-lg: 1.5rem;
|
||||
--admin-spacing-xl: 2rem;
|
||||
--admin-spacing-2xl: 3rem;
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
--spacing-md: 1rem;
|
||||
--spacing-lg: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
--spacing-2xl: 3rem;
|
||||
|
||||
/* Typography Tokens */
|
||||
|
||||
/* Font Families */
|
||||
--admin-font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--admin-font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
|
||||
--font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
|
||||
|
||||
/* Font Sizes */
|
||||
--admin-font-size-xs: 0.75rem;
|
||||
--admin-font-size-sm: 0.875rem;
|
||||
--admin-font-size-base: 1rem;
|
||||
--admin-font-size-lg: 1.125rem;
|
||||
--admin-font-size-xl: 1.25rem;
|
||||
--admin-font-size-2xl: 1.5rem;
|
||||
--admin-font-size-3xl: 1.875rem;
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-lg: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.5rem;
|
||||
--font-size-3xl: 1.875rem;
|
||||
|
||||
/* Line Heights */
|
||||
--admin-line-height-tight: 1.25;
|
||||
@@ -88,129 +88,129 @@
|
||||
--admin-line-height-relaxed: 1.75;
|
||||
|
||||
/* Font Weights */
|
||||
--admin-font-weight-normal: 400;
|
||||
--admin-font-weight-medium: 500;
|
||||
--admin-font-weight-semibold: 600;
|
||||
--admin-font-weight-bold: 700;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
/* Z-Index Hierarchy */
|
||||
--admin-z-base: 1;
|
||||
--admin-z-header: 90;
|
||||
--admin-z-sidebar: 100;
|
||||
--admin-z-mobile-menu: 110;
|
||||
--admin-z-overlay: 120;
|
||||
--admin-z-modal: 130;
|
||||
--admin-z-tooltip: 140;
|
||||
--admin-z-toast: 150;
|
||||
--z-base: 1;
|
||||
--z-header: 90;
|
||||
--z-sidebar: 100;
|
||||
--z-mobile-menu: 110;
|
||||
--z-overlay: 120;
|
||||
--z-modal: 130;
|
||||
--z-tooltip: 140;
|
||||
--z-toast: 150;
|
||||
|
||||
/* Animation/Transition Tokens */
|
||||
--admin-transition-fast: 0.15s ease;
|
||||
--admin-transition-base: 0.2s ease;
|
||||
--admin-transition-slow: 0.3s ease;
|
||||
--transition-fast: 0.15s ease;
|
||||
--transition-base: 0.2s ease;
|
||||
--transition-slow: 0.3s ease;
|
||||
|
||||
/* Border Radius */
|
||||
--admin-radius-sm: 0.25rem;
|
||||
--admin-radius-md: 0.375rem;
|
||||
--admin-radius-lg: 0.5rem;
|
||||
--admin-radius-xl: 0.75rem;
|
||||
--admin-radius-full: 9999px;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.75rem;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Shadow Tokens */
|
||||
--admin-shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.05);
|
||||
--admin-shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -1px oklch(0% 0 0 / 0.06);
|
||||
--admin-shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -2px oklch(0% 0 0 / 0.05);
|
||||
--admin-shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 10px 10px -5px oklch(0% 0 0 / 0.04);
|
||||
--shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -1px oklch(0% 0 0 / 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -2px oklch(0% 0 0 / 0.05);
|
||||
--shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 10px 10px -5px oklch(0% 0 0 / 0.04);
|
||||
}
|
||||
|
||||
/* Dark Mode Overrides */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* Primary Background Colors */
|
||||
--admin-bg-primary: oklch(20% 0.02 280);
|
||||
--admin-bg-secondary: oklch(23% 0.02 280);
|
||||
--admin-bg-tertiary: oklch(26% 0.02 280);
|
||||
--bg-primary: oklch(20% 0.02 280);
|
||||
--bg-secondary: oklch(23% 0.02 280);
|
||||
--bg-tertiary: oklch(26% 0.02 280);
|
||||
|
||||
/* Sidebar Colors */
|
||||
--admin-sidebar-bg: oklch(15% 0.02 280);
|
||||
--admin-sidebar-text: oklch(75% 0.02 280);
|
||||
--admin-sidebar-text-hover: oklch(95% 0.01 280);
|
||||
--admin-sidebar-active: oklch(35% 0.2 280);
|
||||
--admin-sidebar-border: oklch(25% 0.02 280);
|
||||
--sidebar-bg: oklch(15% 0.02 280);
|
||||
--sidebar-text: oklch(75% 0.02 280);
|
||||
--sidebar-text-hover: oklch(95% 0.01 280);
|
||||
--sidebar-active: oklch(35% 0.2 280);
|
||||
--sidebar-border: oklch(25% 0.02 280);
|
||||
|
||||
/* Header Colors */
|
||||
--admin-header-bg: oklch(18% 0.02 280);
|
||||
--admin-header-border: oklch(30% 0.02 280);
|
||||
--admin-header-text: oklch(90% 0.01 280);
|
||||
--header-bg: oklch(18% 0.02 280);
|
||||
--header-border: oklch(30% 0.02 280);
|
||||
--header-text: oklch(90% 0.01 280);
|
||||
|
||||
/* Content Area */
|
||||
--admin-content-bg: oklch(20% 0.02 280);
|
||||
--admin-content-text: oklch(90% 0.01 280);
|
||||
--content-bg: oklch(20% 0.02 280);
|
||||
--content-text: oklch(90% 0.01 280);
|
||||
|
||||
/* Interactive Elements */
|
||||
--admin-link-color: oklch(70% 0.2 260);
|
||||
--admin-link-hover: oklch(80% 0.22 260);
|
||||
--admin-link-active: oklch(85% 0.25 260);
|
||||
--link-color: oklch(70% 0.2 260);
|
||||
--link-hover: oklch(80% 0.22 260);
|
||||
--link-active: oklch(85% 0.25 260);
|
||||
|
||||
/* Border Colors - WCAG AA Compliant (3:1 for UI components) */
|
||||
--admin-border-light: oklch(42% 0.02 280); /* Fixed: 3.1:1 contrast */
|
||||
--admin-border-medium: oklch(48% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--admin-border-dark: oklch(55% 0.02 280); /* Fixed: 4.2:1 contrast */
|
||||
--border-light: oklch(42% 0.02 280); /* Fixed: 3.1:1 contrast */
|
||||
--border-medium: oklch(48% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--border-dark: oklch(55% 0.02 280); /* Fixed: 4.2:1 contrast */
|
||||
|
||||
/* Focus/Hover States */
|
||||
--admin-focus-ring: oklch(70% 0.2 260);
|
||||
--admin-hover-overlay: oklch(100% 0 0 / 0.05);
|
||||
--focus-ring: oklch(70% 0.2 260);
|
||||
--hover-overlay: oklch(100% 0 0 / 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* Manual Dark Mode via data-theme attribute */
|
||||
[data-theme="dark"] {
|
||||
/* Same as prefers-color-scheme: dark */
|
||||
--admin-bg-primary: oklch(20% 0.02 280);
|
||||
--admin-bg-secondary: oklch(23% 0.02 280);
|
||||
--admin-bg-tertiary: oklch(26% 0.02 280);
|
||||
--admin-sidebar-bg: oklch(15% 0.02 280);
|
||||
--admin-sidebar-text: oklch(75% 0.02 280);
|
||||
--admin-sidebar-text-hover: oklch(95% 0.01 280);
|
||||
--admin-sidebar-active: oklch(35% 0.2 280);
|
||||
--admin-sidebar-border: oklch(25% 0.02 280);
|
||||
--admin-header-bg: oklch(18% 0.02 280);
|
||||
--admin-header-border: oklch(30% 0.02 280);
|
||||
--admin-header-text: oklch(90% 0.01 280);
|
||||
--admin-content-bg: oklch(20% 0.02 280);
|
||||
--admin-content-text: oklch(90% 0.01 280);
|
||||
--admin-link-color: oklch(70% 0.2 260);
|
||||
--admin-link-hover: oklch(80% 0.22 260);
|
||||
--admin-link-active: oklch(85% 0.25 260);
|
||||
--admin-border-light: oklch(42% 0.02 280); /* Fixed: 3.1:1 contrast */
|
||||
--admin-border-medium: oklch(48% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--admin-border-dark: oklch(55% 0.02 280); /* Fixed: 4.2:1 contrast */
|
||||
--admin-focus-ring: oklch(70% 0.2 260);
|
||||
--admin-hover-overlay: oklch(100% 0 0 / 0.05);
|
||||
--bg-primary: oklch(20% 0.02 280);
|
||||
--bg-secondary: oklch(23% 0.02 280);
|
||||
--bg-tertiary: oklch(26% 0.02 280);
|
||||
--sidebar-bg: oklch(15% 0.02 280);
|
||||
--sidebar-text: oklch(75% 0.02 280);
|
||||
--sidebar-text-hover: oklch(95% 0.01 280);
|
||||
--sidebar-active: oklch(35% 0.2 280);
|
||||
--sidebar-border: oklch(25% 0.02 280);
|
||||
--header-bg: oklch(18% 0.02 280);
|
||||
--header-border: oklch(30% 0.02 280);
|
||||
--header-text: oklch(90% 0.01 280);
|
||||
--content-bg: oklch(20% 0.02 280);
|
||||
--content-text: oklch(90% 0.01 280);
|
||||
--link-color: oklch(70% 0.2 260);
|
||||
--link-hover: oklch(80% 0.22 260);
|
||||
--link-active: oklch(85% 0.25 260);
|
||||
--border-light: oklch(42% 0.02 280); /* Fixed: 3.1:1 contrast */
|
||||
--border-medium: oklch(48% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--border-dark: oklch(55% 0.02 280); /* Fixed: 4.2:1 contrast */
|
||||
--focus-ring: oklch(70% 0.2 260);
|
||||
--hover-overlay: oklch(100% 0 0 / 0.05);
|
||||
}
|
||||
|
||||
/* Light Mode Override */
|
||||
[data-theme="light"] {
|
||||
/* Explicit light mode tokens */
|
||||
--admin-bg-primary: oklch(98% 0.01 280);
|
||||
--admin-bg-secondary: oklch(95% 0.01 280);
|
||||
--admin-bg-tertiary: oklch(92% 0.01 280);
|
||||
--admin-sidebar-bg: oklch(25% 0.02 280);
|
||||
--admin-sidebar-text: oklch(90% 0.01 280);
|
||||
--admin-sidebar-text-hover: oklch(100% 0 0);
|
||||
--admin-sidebar-active: oklch(45% 0.15 280);
|
||||
--admin-sidebar-border: oklch(30% 0.02 280);
|
||||
--admin-header-bg: oklch(100% 0 0);
|
||||
--admin-header-border: oklch(85% 0.01 280);
|
||||
--admin-header-text: oklch(20% 0.02 280);
|
||||
--admin-content-bg: oklch(100% 0 0);
|
||||
--admin-content-text: oklch(20% 0.02 280);
|
||||
--admin-link-color: oklch(55% 0.2 260);
|
||||
--admin-link-hover: oklch(45% 0.25 260);
|
||||
--admin-link-active: oklch(35% 0.3 260);
|
||||
--admin-border-light: oklch(75% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--admin-border-medium: oklch(70% 0.02 280); /* Already compliant: 3.5:1 */
|
||||
--admin-border-dark: oklch(70% 0.02 280);
|
||||
--admin-focus-ring: oklch(55% 0.2 260);
|
||||
--admin-hover-overlay: oklch(0% 0 0 / 0.05);
|
||||
--bg-primary: oklch(98% 0.01 280);
|
||||
--bg-secondary: oklch(95% 0.01 280);
|
||||
--bg-tertiary: oklch(92% 0.01 280);
|
||||
--sidebar-bg: oklch(25% 0.02 280);
|
||||
--sidebar-text: oklch(90% 0.01 280);
|
||||
--sidebar-text-hover: oklch(100% 0 0);
|
||||
--sidebar-active: oklch(45% 0.15 280);
|
||||
--sidebar-border: oklch(30% 0.02 280);
|
||||
--header-bg: oklch(100% 0 0);
|
||||
--header-border: oklch(85% 0.01 280);
|
||||
--header-text: oklch(20% 0.02 280);
|
||||
--content-bg: oklch(100% 0 0);
|
||||
--content-text: oklch(20% 0.02 280);
|
||||
--link-color: oklch(55% 0.2 260);
|
||||
--link-hover: oklch(45% 0.25 260);
|
||||
--link-active: oklch(35% 0.3 260);
|
||||
--border-light: oklch(75% 0.02 280); /* Fixed: 3.5:1 contrast */
|
||||
--border-medium: oklch(70% 0.02 280); /* Already compliant: 3.5:1 */
|
||||
--border-dark: oklch(70% 0.02 280);
|
||||
--focus-ring: oklch(55% 0.2 260);
|
||||
--hover-overlay: oklch(0% 0 0 / 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user