ps-helix 6.2.3 → 7.0.0

package/src/lib/styles/themes/dark-auto.css

@@ -0,0 +1,315 @@
+/*
+ * Generated by scripts/generate-auto-dark.mjs — do not edit.
+ *
+ * The dark tokens again, behind the OS preference, so the stylesheet is correct without
+ * PshThemeService and on the SSR first paint. `:not([data-theme="light"])` means an explicit
+ * choice by the consumer always beats the OS.
+ *
+ * Edit themes/dark.css; `npm run docs:auto-dark` regenerates this and
+ * `npm run verify:auto-dark` fails CI if the two have drifted.
+ */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    /* Surface Colors */
+    --psh-surface-0: #0a0d16;
+    --psh-surface-50: #141a27;
+    --psh-surface-100: #1e293b;
+    --psh-surface-200: #334155;
+    --psh-surface-300: #475569;
+    --psh-surface-400: #64748b;
+    --psh-surface-500: #94a3b8;
+    --psh-surface-600: #cbd5e1;
+    --psh-surface-700: #e2e8f0;
+    --psh-surface-800: #f1f5f9;
+    --psh-surface-900: #f8fafc;
+    --psh-surface-900-rgb: 248, 250, 252;
+
+    /* Teal Palette */
+    --psh-teal-50: #134E4A;
+    --psh-teal-100: #115E59;
+    --psh-teal-200: #0F766E;
+    --psh-teal-300: #0D9488;
+    --psh-teal-400: #14B8A6;
+    --psh-teal-500: #2DD4BF;
+    --psh-teal-600: #5EEAD4;
+    --psh-teal-700: #99F6E4;
+    --psh-teal-800: #CCFBF1;
+    --psh-teal-900: #F0FDFA;
+
+    /* Emerald Palette */
+    --psh-emerald-50: #064E3B;
+    --psh-emerald-100: #065F46;
+    --psh-emerald-200: #047857;
+    --psh-emerald-300: #059669;
+    --psh-emerald-400: #10B981;
+    --psh-emerald-500: #34D399;
+    --psh-emerald-600: #6EE7B7;
+    --psh-emerald-700: #A7F3D0;
+    --psh-emerald-800: #D1FAE5;
+    --psh-emerald-900: #ECFDF5;
+
+    /* Indigo Palette */
+    --psh-indigo-50: #312E81;
+    --psh-indigo-100: #3730A3;
+    --psh-indigo-200: #4338CA;
+    --psh-indigo-300: #4F46E5;
+    --psh-indigo-400: #6366F1;
+    --psh-indigo-500: #818CF8;
+    --psh-indigo-600: #A5B4FC;
+    --psh-indigo-700: #C7D2FE;
+    --psh-indigo-800: #E0E7FF;
+    --psh-indigo-900: #EEF2FF;
+
+    /* Purple Palette */
+    --psh-purple-50: #581C87;
+    --psh-purple-100: #6B21A8;
+    --psh-purple-200: #7C3AED;
+    --psh-purple-300: #9333EA;
+    --psh-purple-400: #A855F7;
+    --psh-purple-500: #C084FC;
+    --psh-purple-600: #D8B4FE;
+    --psh-purple-700: #E9D5FF;
+    --psh-purple-800: #F3E8FF;
+    --psh-purple-900: #FAF5FF;
+
+    /* Fuchsia Palette */
+    --psh-fuchsia-50: #701A75;
+    --psh-fuchsia-100: #86198F;
+    --psh-fuchsia-200: #A21CAF;
+    --psh-fuchsia-300: #C026D3;
+    --psh-fuchsia-400: #D946EF;
+    --psh-fuchsia-500: #E879F9;
+    --psh-fuchsia-600: #F0ABFC;
+    --psh-fuchsia-700: #F5D0FE;
+    --psh-fuchsia-800: #FAE8FF;
+    --psh-fuchsia-900: #FDF4FF;
+
+    /* Rose Palette */
+    --psh-rose-50: #881337;
+    --psh-rose-100: #9F1239;
+    --psh-rose-200: #BE123C;
+    --psh-rose-300: #E11D48;
+    --psh-rose-400: #F43F5E;
+    --psh-rose-500: #FB7185;
+    --psh-rose-600: #FDA4AF;
+    --psh-rose-700: #FECDD3;
+    --psh-rose-800: #FFE4E6;
+    --psh-rose-900: #FFF1F2;
+
+    /* Amber Palette */
+    --psh-amber-50: #78350F;
+    --psh-amber-100: #92400E;
+    --psh-amber-200: #B45309;
+    --psh-amber-300: #D97706;
+    --psh-amber-400: #F59E0B;
+    --psh-amber-500: #FBBF24;
+    --psh-amber-600: #FCD34D;
+    --psh-amber-700: #FDE68A;
+    --psh-amber-800: #FEF3C7;
+    --psh-amber-900: #FFFBEB;
+
+    /* Pink Palette */
+    --psh-pink-50: #831843;
+    --psh-pink-100: #9D174D;
+    --psh-pink-200: #BE185D;
+    --psh-pink-300: #DB2777;
+    --psh-pink-400: #EC4899;
+    --psh-pink-500: #F472B6;
+    --psh-pink-600: #F9A8D4;
+    --psh-pink-700: #FBCFE8;
+    --psh-pink-800: #FCE7F3;
+    --psh-pink-900: #FDF2F8;
+
+    /* ------------------------------------------------------------------------
+       These seven families were defined in light.css but never inverted here, so
+       --psh-blue-500, --psh-red-500 and friends kept their light values in dark mode —
+       breaking contrast for every consumer of the raw palette and of the
+       .psh-bg-red-500 / .psh-text-blue-600 utilities. Inverted on the same rule as
+       the eight families above: dark-50 = light-900 … dark-900 = light-50.
+       ------------------------------------------------------------------------ */
+
+    /* Blue Palette */
+    --psh-blue-50: #312E81;
+    --psh-blue-100: #3730A3;
+    --psh-blue-200: #4338CA;
+    --psh-blue-300: #4F46E5;
+    --psh-blue-400: #6366F1;
+    --psh-blue-500: #818CF8;
+    --psh-blue-600: #A5B4FC;
+    --psh-blue-700: #C7D2FE;
+    --psh-blue-800: #E0E7FF;
+    --psh-blue-900: #EEF2FF;
+
+    /* Red Palette */
+    --psh-red-50: #7F1D1D;
+    --psh-red-100: #991B1B;
+    --psh-red-200: #B91C1C;
+    --psh-red-300: #DC2626;
+    --psh-red-400: #EF4444;
+    --psh-red-500: #F87171;
+    --psh-red-600: #FCA5A5;
+    --psh-red-700: #FECACA;
+    --psh-red-800: #FEE2E2;
+    --psh-red-900: #FEF2F2;
+
+    /* Green Palette */
+    --psh-green-50: #14532D;
+    --psh-green-100: #166534;
+    --psh-green-200: #15803D;
+    --psh-green-300: #16A34A;
+    --psh-green-400: #22C55E;
+    --psh-green-500: #4ADE80;
+    --psh-green-600: #86EFAC;
+    --psh-green-700: #BBF7D0;
+    --psh-green-800: #DCFCE7;
+    --psh-green-900: #F0FDF4;
+
+    /* Orange Palette */
+    --psh-orange-50: #7C2D12;
+    --psh-orange-100: #9A3412;
+    --psh-orange-200: #C2410C;
+    --psh-orange-300: #EA580C;
+    --psh-orange-400: #F97316;
+    --psh-orange-500: #FB923C;
+    --psh-orange-600: #FDBA74;
+    --psh-orange-700: #FED7AA;
+    --psh-orange-800: #FFEDD5;
+    --psh-orange-900: #FFF7ED;
+
+    /* Yellow Palette */
+    --psh-yellow-50: #713F12;
+    --psh-yellow-100: #854D0E;
+    --psh-yellow-200: #A16207;
+    --psh-yellow-300: #CA8A04;
+    --psh-yellow-400: #EAB308;
+    --psh-yellow-500: #FACC15;
+    --psh-yellow-600: #FDE047;
+    --psh-yellow-700: #FEF08A;
+    --psh-yellow-800: #FEF9C3;
+    --psh-yellow-900: #FEFCE8;
+
+    /* Violet Palette */
+    --psh-violet-50: #4C1D95;
+    --psh-violet-100: #5B21B6;
+    --psh-violet-200: #6D28D9;
+    --psh-violet-300: #7C3AED;
+    --psh-violet-400: #8B5CF6;
+    --psh-violet-500: #A78BFA;
+    --psh-violet-600: #C4B5FD;
+    --psh-violet-700: #DDD6FE;
+    --psh-violet-800: #EDE9FE;
+    --psh-violet-900: #F5F3FF;
+
+    /* Cyan Palette */
+    --psh-cyan-50: #164E63;
+    --psh-cyan-100: #155E75;
+    --psh-cyan-200: #0E7490;
+    --psh-cyan-300: #0891B2;
+    --psh-cyan-400: #06B6D4;
+    --psh-cyan-500: #22D3EE;
+    --psh-cyan-600: #67E8F9;
+    --psh-cyan-700: #A5F3FC;
+    --psh-cyan-800: #CFFAFE;
+    --psh-cyan-900: #ECFEFF;
+
+    /* Functional Colors */
+    --psh-surface-ground: var(--psh-surface-0);
+    --psh-surface-section: var(--psh-surface-50);
+  
+    /* Alert Colors */
+    --psh-alert-info-bg: rgba(107, 95, 227, 0.15);
+    --psh-alert-info-border-color: #6B5FE3;
+    --psh-alert-info-text-color: #A5B4FC;
+  
+    --psh-surface-card: var(--psh-surface-50);
+    --psh-surface-overlay: var(--psh-surface-200);
+    --psh-surface-border: var(--psh-surface-300);
+    --psh-surface-hover: rgba(255, 255, 255, 0.05);
+
+    /* Text Colors */
+    --psh-text-color: rgba(255, 255, 255, 0.95);
+    --psh-text-color-secondary: rgba(255, 255, 255, 0.75);
+    --psh-text-color-tertiary: rgba(255, 255, 255, 0.6);
+    --psh-text-color-disabled: rgba(255, 255, 255, 0.4);
+
+    /* Text on colored backgrounds */
+    --psh-text-on-primary: #FFFFFF;
+    --psh-text-on-secondary: #FFFFFF;
+    --psh-text-on-success: #000000;
+    --psh-text-on-warning: #000000;
+    --psh-text-on-danger: #000000;
+    --psh-text-on-info: #000000;
+    /* Neutral is a light slate in dark mode, so its text is dark: white on #9AA0B0 is
+       about 2.5:1, well under the 4.5:1 floor. */
+    --psh-text-on-neutral: #000000;
+    --psh-text-on-surface: var(--psh-text-color);
+    --psh-text-on-dark: #FFFFFF;
+    --psh-text-on-light: #0a0d16;
+
+    /* Primary Colors - Use customer context with fallbacks (lighter shades for dark theme contrast) */
+    --psh-primary-color: var(--psh-customer-primary-color, var(--customer-primary-color, #8178F7));
+    --psh-primary-color-light: var(--psh-customer-primary-color-light, var(--customer-primary-color-light, #8A7FED));
+    --psh-primary-color-lighter: var(--psh-customer-primary-color-lighter, var(--customer-primary-color-lighter, #A99FF7));
+    --psh-primary-color-dark: var(--psh-customer-primary-color-dark, var(--customer-primary-color-dark, #4A3FD9));
+    --psh-primary-color-darker: var(--psh-customer-primary-color-darker, var(--customer-primary-color-darker, #3730A3));
+    --psh-primary-color-text: var(--psh-customer-primary-color-text, var(--customer-primary-color-text, #FFFFFF));
+    --psh-primary-color-rgb: var(--psh-customer-primary-color-rgb, var(--customer-primary-color-rgb, 107, 95, 227));
+
+    /* Primary Gradients - Automatically adapt to custom colors */
+    --psh-primary-gradient: linear-gradient(to right, var(--psh-primary-color), var(--psh-primary-color-light));
+    --psh-primary-gradient-hover: linear-gradient(to right, var(--psh-primary-color), var(--psh-primary-color-lighter));
+    --psh-primary-gradient-reversed: linear-gradient(to left, var(--psh-primary-color-dark), var(--psh-primary-color-light));
+
+    /* Secondary Colors - Use customer context with fallbacks (gray tones for dark theme) */
+    --psh-secondary-color: var(--psh-customer-secondary-color, var(--customer-secondary-color, #5B5A5A));
+    --psh-secondary-color-light: var(--psh-customer-secondary-color-light, var(--customer-secondary-color-light, #838181));
+    --psh-secondary-color-lighter: var(--psh-customer-secondary-color-lighter, var(--customer-secondary-color-lighter, #9E9D9D));
+    --psh-secondary-color-dark: var(--psh-customer-secondary-color-dark, var(--customer-secondary-color-dark, #4E4D4D));
+    --psh-secondary-color-darker: var(--psh-customer-secondary-color-darker, var(--customer-secondary-color-darker, #3D3838));
+    --psh-secondary-color-text: var(--psh-customer-secondary-color-text, var(--customer-secondary-color-text, #FFFFFF));
+    --psh-secondary-color-rgb: var(--psh-customer-secondary-color-rgb, var(--customer-secondary-color-rgb, 48, 48, 48));
+
+    /* Success Colors */
+    /* No -light / -dark variants: light.css defines those only for primary and secondary,
+       and these three had zero consumers. A token that exists in one theme only is a
+       contract the other theme cannot honour. */
+    --psh-success-color: #12B94F;
+    --psh-success-color-rgb: 18, 185, 79;
+    --psh-success-color-text: #000000;
+
+    /* Info and Neutral Colors — see light.css for why these exist. */
+    --psh-info-color: #5B9BFF;
+    --psh-info-color-rgb: 91, 155, 255;
+    --psh-info-color-text: #000000;
+
+    --psh-neutral-color: #9AA0B0;
+    --psh-neutral-color-rgb: 154, 160, 176;
+    --psh-neutral-color-text: #000000;
+
+    /* Warning Colors */
+    --psh-warning-color: #E07518;
+    --psh-warning-color-rgb: 224, 117, 24;
+    --psh-warning-color-text: #000000;
+
+    /* Danger Colors */
+    --psh-danger-color: #FF4040;
+    --psh-danger-color-rgb: 255, 64, 64;
+    --psh-danger-color-text: #000000;
+
+    /* Chart Colors */
+    --psh-chart-text-color: var(--psh-text-color);
+    --psh-chart-grid-color: var(--psh-surface-border);
+    --psh-chart-primary-color: var(--psh-primary-color);
+    --psh-chart-secondary-color: var(--psh-secondary-color);
+    --psh-chart-success-color: var(--psh-success-color);
+    --psh-chart-warning-color: var(--psh-warning-color);
+    --psh-chart-danger-color: var(--psh-danger-color);
+    --psh-chart-tooltip-background: var(--psh-surface-card);
+    --psh-chart-tooltip-text: var(--psh-text-color);
+    --psh-chart-legend-text: var(--psh-text-color);
+
+    /* Background */
+    --psh-background-opacity: 0.3;
+    --psh-body-gradient: radial-gradient(325.86% 141.42% at 100% 0%, #1A1F33 0%, #0A0D16 100%);
+  }
+}