@psnext/design-system 1.0.0 → 1.2.0

package/dist/styles/generated/slingshot-vars.css

@@ -1,34 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-.theme-slingshot {
-  --brand-neutrals-50: #F9FAFB;
-  --brand-neutrals-100: #F3F4F6;
-  --brand-neutrals-200: #E5E7EB;
-  --brand-neutrals-300: #D1D5DB;
-  --brand-neutrals-400: #9CA3AF;
-  --brand-neutrals-500: #6B7280;
-  --brand-neutrals-600: #4B5563;
-  --brand-neutrals-700: #374151;
-  --brand-neutrals-800: #1F2937;
-  --brand-neutrals-900: #111827;
-  --brand-neutrals-950: #030712;
-  --brand-shades-50: #FEF2F2;
-  --brand-shades-100: #FFE2E2;
-  --brand-shades-200: #FECACA;
-  --brand-shades-300: #FCA5A5;
-  --brand-shades-400: #F87171;
-  --brand-shades-500: #EF4444;
-  --brand-shades-600: #DC2626;
-  --brand-shades-700: #B91C1C;
-  --brand-shades-800: #991B1B;
-  --brand-shades-900: #7F1D1D;
-  --brand-shades-950: #450A0A;
-  --brand-combinations-1-brand: #EF4444;
-  --brand-combinations-1-brand-foreground: #FFFFFF;
-  --brand-combinations-2-brand: #FECACA;
-  --brand-combinations-2-brand-foreground: #991B1B;
-  --brand-combinations-3-brand: #450A0A;
-  --brand-combinations-3-brand-foreground: #FCA5A5;
-}

package/dist/styles/generated/sustain-vars.css

@@ -1,34 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-.theme-sustain {
-  --brand-neutrals-50: #F9FAFB;
-  --brand-neutrals-100: #F3F4F6;
-  --brand-neutrals-200: #E5E7EB;
-  --brand-neutrals-300: #D1D5DB;
-  --brand-neutrals-400: #9CA3AF;
-  --brand-neutrals-500: #6B7280;
-  --brand-neutrals-600: #4B5563;
-  --brand-neutrals-700: #374151;
-  --brand-neutrals-800: #1F2937;
-  --brand-neutrals-900: #111827;
-  --brand-neutrals-950: #030712;
-  --brand-shades-50: #F5F3FF;
-  --brand-shades-100: #EDE9FE;
-  --brand-shades-200: #DDD6FE;
-  --brand-shades-300: #C4B5FD;
-  --brand-shades-400: #A78BFA;
-  --brand-shades-500: #EF4444;
-  --brand-shades-600: #7C3AED;
-  --brand-shades-700: #6D28D9;
-  --brand-shades-800: #5B21B6;
-  --brand-shades-900: #4C1D95;
-  --brand-shades-950: #2E1065;
-  --brand-combinations-1-brand: #EF4444;
-  --brand-combinations-1-brand-foreground: #FFFFFF;
-  --brand-combinations-2-brand: #DDD6FE;
-  --brand-combinations-2-brand-foreground: #5B21B6;
-  --brand-combinations-3-brand: #2E1065;
-  --brand-combinations-3-brand-foreground: #C4B5FD;
-}

package/dist/styles/themes/bodhi.css

@@ -1,166 +0,0 @@
-/* Bodhi Theme — Blue brand */
-
-.theme-bodhi {
-  --bodhi-primary: var(--color-blue-950);
-  --bodhi-secondary: var(--color-blue-300);
-  --bodhi-accent: var(--color-blue-950);
-  --bodhi-surface: var(--color-slate-50);
-  --bodhi-background: var(--color-white);
-
-  --background: var(--bodhi-background);
-  --foreground: var(--color-gray-950);
-  --card: var(--color-white);
-  --card-foreground: var(--color-gray-950);
-  --popover: var(--color-gray-800);
-  --popover-foreground: var(--color-white);
-  --primary: var(--color-gray-950);
-  --primary-foreground: var(--color-gray-50);
-  --secondary: var(--color-gray-100);
-  --secondary-foreground: var(--color-gray-900);
-  --muted: var(--color-gray-100);
-  --muted-foreground: var(--color-gray-500);
-  --accent: var(--color-gray-100);
-  --accent-foreground: var(--color-gray-900);
-  --destructive: var(--color-red-600);
-  --destructive-foreground: var(--color-white);
-  --border: var(--color-gray-200);
-  --input: var(--color-white);
-  --input-background: var(--color-white);
-  --ring: var(--color-gray-300);
-
-  /* Glass morphism — slate tint */
-  --glass-heavy: rgba(248, 250, 252, 0.8);
-  --glass-strong: rgba(248, 250, 252, 0.8);
-  --glass-subtle: rgba(248, 250, 252, 0.3);
-  --glass-light: rgba(248, 250, 252, 0.5);
-  --glass-medium: rgba(226, 232, 240, 0.5);
-
-  --nav-active-bg: var(--color-white);
-  --tile-bg: var(--color-white);
-  --tile-hover-bg: rgba(255, 255, 255, 0.4);
-  --tile-button-bg: var(--color-white);
-  --tile-button-hover-bg: var(--color-gray-900);
-  --tile-button-hover-text: var(--color-gray-50);
-
-  /* Gradient — Bodhi light (blue tint) */
-  --gradient-stop-0: var(--color-slate-200);
-  --gradient-stop-1: var(--bodhi-secondary);
-  --gradient-stop-2: var(--color-slate-200);
-  --radial-gradient-bg: radial-gradient(
-    circle at 90% 10%,
-    var(--gradient-stop-0) 0%,
-    var(--gradient-stop-1) 25%,
-    var(--gradient-stop-2) 60%
-  );
-
-  /* Sidebar */
-  --sidebar: var(--color-gray-50);
-  --sidebar-foreground: var(--color-slate-600);
-  --sidebar-primary: var(--bodhi-primary);
-  --sidebar-primary-foreground: var(--color-white);
-  --sidebar-accent: var(--color-slate-200);
-  --sidebar-accent-foreground: var(--color-slate-800);
-  --sidebar-border: var(--color-slate-200);
-  --sidebar-ring: var(--color-slate-400);
-
-  /* Logo / icon colors */
-  --logo-circle-bg: var(--color-white);
-  --logo-icon-red: var(--color-red-500);
-  --logo-text-dark: var(--color-gray-950);
-
-  --slingshot-primary-red: var(--color-red-500);
-  --slingshot-accent-white: var(--color-white);
-  --slingshot-text-dark: var(--color-gray-950);
-
-  --sustain-primary-red: var(--color-red-500);
-  --sustain-accent-white: var(--color-white);
-  --sustain-text-dark: var(--color-gray-950);
-  --sustain-circle-bg: var(--color-white);
-
-  --psai-primary-red: var(--color-red-500);
-  --psai-accent-white: var(--color-white);
-  --psai-text-dark: var(--color-gray-950);
-}
-
-/* Bodhi Theme — Dark Mode */
-html.theme-bodhi.dark {
-  --bodhi-primary: var(--color-blue-950);
-  --bodhi-secondary: var(--color-blue-950);
-  --bodhi-accent: var(--color-blue-300);
-  --bodhi-surface: var(--color-slate-800);
-  --bodhi-background: var(--color-slate-900);
-
-  --background: var(--bodhi-background);
-  --foreground: var(--color-gray-50);
-  --card: var(--color-gray-800);
-  --card-foreground: var(--color-gray-50);
-  --popover: var(--color-gray-800);
-  --popover-foreground: var(--color-gray-50);
-  --primary: var(--color-gray-50);
-  --primary-foreground: var(--color-gray-900);
-  --secondary: var(--color-gray-700);
-  --secondary-foreground: var(--color-gray-50);
-  --muted: var(--color-gray-700);
-  --muted-foreground: var(--color-gray-400);
-  --accent: var(--color-gray-700);
-  --accent-foreground: var(--color-gray-50);
-  --destructive: var(--color-red-600);
-  --destructive-foreground: var(--color-gray-50);
-  --border: var(--color-gray-700);
-  --input: var(--color-gray-700);
-  --input-background: rgba(255, 255, 255, 0.05);
-  --ring: var(--color-gray-500);
-
-  /* Glass morphism — slate-800 alpha */
-  --glass-heavy: rgba(30, 41, 59, 0.8);
-  --glass-strong: rgba(30, 41, 59, 0.8);
-  --glass-subtle: rgba(30, 41, 59, 0.3);
-  --glass-light: rgba(30, 41, 59, 0.5);
-  --glass-medium: rgba(51, 65, 85, 0.5);
-
-  --nav-active-bg: var(--color-gray-700);
-  --tile-bg: var(--color-gray-800);
-  --tile-hover-bg: rgba(31, 40, 50, 0.4);
-  --tile-button-bg: var(--color-gray-800);
-  --tile-button-hover-bg: var(--color-gray-50);
-  --tile-button-hover-text: var(--color-gray-900);
-
-  /* Gradient — Bodhi dark (deep blue) */
-  --gradient-stop-0: var(--color-gray-950);
-  --gradient-stop-1: var(--color-blue-950);
-  --gradient-stop-2: var(--color-gray-950);
-  --radial-gradient-bg: radial-gradient(
-    circle at 90% 10%,
-    var(--gradient-stop-0) 0%,
-    var(--gradient-stop-1) 25%,
-    var(--gradient-stop-2) 60%
-  );
-
-  /* Sidebar */
-  --sidebar: var(--bodhi-surface);
-  --sidebar-foreground: var(--color-slate-300);
-  --sidebar-primary: var(--bodhi-primary);
-  --sidebar-primary-foreground: var(--color-slate-900);
-  --sidebar-accent: var(--color-slate-700);
-  --sidebar-accent-foreground: var(--color-slate-50);
-  --sidebar-border: var(--color-slate-700);
-  --sidebar-ring: var(--color-slate-500);
-
-  /* Logo / icon colors */
-  --logo-circle-bg: var(--color-neutral-900);
-  --logo-icon-red: var(--color-red-500);
-  --logo-text-dark: var(--color-white);
-
-  --slingshot-primary-red: var(--color-red-500);
-  --slingshot-accent-white: var(--color-gray-200);
-  --slingshot-text-dark: var(--color-gray-950);
-
-  --sustain-primary-red: var(--color-red-500);
-  --sustain-accent-white: var(--color-gray-200);
-  --sustain-text-dark: var(--color-gray-950);
-  --sustain-circle-bg: var(--color-neutral-900);
-
-  --psai-primary-red: var(--color-red-500);
-  --psai-accent-white: var(--color-gray-200);
-  --psai-text-dark: var(--color-white);
-}

package/dist/styles/themes/slingshot.css

@@ -1,144 +0,0 @@
-/* Slingshot Theme — Red brand */
-
-.theme-slingshot {
-  --slingshot-primary: var(--color-red-500);
-  --slingshot-secondary: var(--color-red-200);
-  --slingshot-accent: var(--color-red-500);
-  --slingshot-surface: var(--color-gray-50);
-  --slingshot-background: var(--color-white);
-
-  --background: var(--slingshot-surface);
-  --foreground: var(--color-gray-950);
-  --card: var(--color-white);
-  --card-foreground: var(--color-gray-950);
-  --popover: var(--color-gray-800);
-  --popover-foreground: var(--color-white);
-  --primary: var(--color-gray-950);
-  --primary-foreground: var(--color-gray-50);
-  --secondary: var(--color-gray-100);
-  --secondary-foreground: var(--color-gray-900);
-  --muted: var(--color-gray-100);
-  --muted-foreground: var(--color-gray-500);
-  --accent: var(--color-gray-100);
-  --accent-foreground: var(--color-gray-900);
-  --destructive: var(--color-red-600);
-  --destructive-foreground: var(--color-white);
-  --border: var(--color-gray-200);
-  --input: var(--color-white);
-  --input-background: var(--color-white);
-  --ring: var(--color-gray-300);
-
-  /* Glass morphism */
-  --glass-heavy: rgba(255, 255, 255, 0.6);
-  --glass-strong: rgba(255, 255, 255, 0.6);
-  --glass-subtle: rgba(255, 255, 255, 0.2);
-  --glass-light: rgba(255, 255, 255, 0.4);
-  --glass-medium: rgba(255, 255, 255, 0.5);
-
-  --nav-active-bg: var(--color-white);
-  --tile-bg: var(--color-white);
-  --tile-hover-bg: rgba(255, 255, 255, 0.4);
-  --tile-button-bg: var(--color-white);
-  --tile-button-hover-bg: var(--color-gray-900);
-  --tile-button-hover-text: var(--color-gray-50);
-
-  /* Gradient — Slingshot light (red tint) */
-  --gradient-stop-0: var(--color-slate-200);
-  --gradient-stop-1: var(--slingshot-secondary);
-  --gradient-stop-2: var(--color-slate-200);
-  --radial-gradient-bg: radial-gradient(
-    circle at 90% 10%,
-    var(--gradient-stop-0) 0%,
-    var(--gradient-stop-1) 25%,
-    var(--gradient-stop-2) 60%
-  );
-
-  /* Sidebar */
-  --sidebar: var(--color-gray-50);
-  --sidebar-foreground: var(--color-gray-700);
-  --sidebar-primary: var(--color-gray-900);
-  --sidebar-primary-foreground: var(--color-gray-50);
-  --sidebar-accent: var(--color-gray-100);
-  --sidebar-accent-foreground: var(--color-gray-900);
-  --sidebar-border: var(--color-gray-200);
-  --sidebar-ring: var(--color-gray-300);
-
-  /* Charts */
-  --chart-1: var(--slingshot-secondary);
-  --chart-2: var(--slingshot-accent);
-  --chart-3: var(--color-cyan-900);
-  --chart-4: var(--color-amber-400);
-  --chart-5: var(--color-amber-500);
-}
-
-/* Slingshot Theme — Dark Mode */
-html.theme-slingshot.dark {
-  --slingshot-primary: var(--color-red-500);
-  --slingshot-secondary: var(--color-orange-500);
-  --slingshot-accent: var(--color-red-200);
-  --slingshot-surface: var(--color-gray-800);
-  --slingshot-background: var(--color-gray-900);
-
-  --background: var(--slingshot-surface);
-  --foreground: var(--color-gray-50);
-  --card: var(--color-gray-800);
-  --card-foreground: var(--color-gray-50);
-  --popover: var(--color-gray-800);
-  --popover-foreground: var(--color-gray-50);
-  --primary: var(--color-gray-50);
-  --primary-foreground: var(--color-gray-900);
-  --secondary: var(--color-gray-700);
-  --secondary-foreground: var(--color-gray-50);
-  --muted: var(--color-gray-700);
-  --muted-foreground: var(--color-gray-400);
-  --accent: var(--color-gray-700);
-  --accent-foreground: var(--color-gray-50);
-  --destructive: var(--color-red-600);
-  --destructive-foreground: var(--color-gray-50);
-  --border: var(--color-gray-700);
-  --input: var(--color-gray-700);
-  --input-background: rgba(255, 255, 255, 0.05);
-  --ring: var(--color-gray-500);
-
-  /* Glass morphism */
-  --glass-heavy: rgba(31, 40, 50, 0.8);
-  --glass-strong: rgba(31, 40, 50, 0.8);
-  --glass-subtle: rgba(31, 40, 50, 0.3);
-  --glass-light: rgba(31, 40, 50, 0.5);
-  --glass-medium: rgba(55, 65, 81, 0.5);
-
-  --nav-active-bg: var(--color-gray-700);
-  --tile-bg: var(--color-gray-800);
-  --tile-hover-bg: rgba(31, 40, 50, 0.4);
-  --tile-button-bg: var(--color-gray-800);
-  --tile-button-hover-bg: var(--color-gray-50);
-  --tile-button-hover-text: var(--color-gray-900);
-
-  /* Gradient — Slingshot dark (deep red) */
-  --gradient-stop-0: var(--color-gray-950);
-  --gradient-stop-1: var(--color-red-950);
-  --gradient-stop-2: var(--color-gray-950);
-  --radial-gradient-bg: radial-gradient(
-    circle at 90% 10%,
-    var(--gradient-stop-0) 0%,
-    var(--gradient-stop-1) 25%,
-    var(--gradient-stop-2) 60%
-  );
-
-  /* Sidebar */
-  --sidebar: var(--color-gray-800);
-  --sidebar-foreground: var(--color-gray-300);
-  --sidebar-primary: var(--color-gray-50);
-  --sidebar-primary-foreground: var(--color-gray-900);
-  --sidebar-accent: var(--color-gray-700);
-  --sidebar-accent-foreground: var(--color-gray-50);
-  --sidebar-border: var(--color-gray-700);
-  --sidebar-ring: var(--color-gray-500);
-
-  /* Charts */
-  --chart-1: var(--slingshot-secondary);
-  --chart-2: var(--slingshot-accent);
-  --chart-3: var(--color-cyan-900);
-  --chart-4: var(--color-amber-400);
-  --chart-5: var(--color-amber-500);
-}

package/dist/styles/themes/sustain.css

@@ -1,130 +0,0 @@
-/* Sustain Theme — Indigo brand */
-
-.theme-sustain {
-  --sustain-primary: var(--color-indigo-800);
-  --sustain-secondary: var(--color-indigo-300);
-  --sustain-accent: var(--color-indigo-800);
-  --sustain-surface: var(--color-indigo-50);
-  --sustain-background: var(--color-indigo-50);
-
-  --background: var(--sustain-surface);
-  --foreground: var(--color-gray-950);
-  --card: var(--color-white);
-  --card-foreground: var(--color-gray-950);
-  --popover: var(--color-gray-800);
-  --popover-foreground: var(--color-white);
-  --primary: var(--color-gray-950);
-  --primary-foreground: var(--color-gray-50);
-  --secondary: var(--color-gray-100);
-  --secondary-foreground: var(--color-gray-900);
-  --muted: var(--color-gray-100);
-  --muted-foreground: var(--color-gray-500);
-  --accent: var(--color-gray-100);
-  --accent-foreground: var(--color-gray-900);
-  --destructive: var(--color-red-600);
-  --destructive-foreground: var(--color-white);
-  --border: var(--color-gray-200);
-  --input: var(--color-white);
-  --input-background: var(--color-white);
-  --ring: var(--color-gray-300);
-
-  /* Glass morphism */
-  --glass-heavy: rgba(255, 255, 255, 0.6);
-  --glass-strong: rgba(255, 255, 255, 0.6);
-  --glass-subtle: rgba(255, 255, 255, 0.2);
-  --glass-light: rgba(255, 255, 255, 0.4);
-  --glass-medium: rgba(255, 255, 255, 0.5);
-
-  --nav-active-bg: var(--color-white);
-  --tile-bg: var(--color-white);
-  --tile-hover-bg: rgba(255, 255, 255, 0.4);
-  --tile-button-bg: var(--color-white);
-  --tile-button-hover-bg: var(--color-gray-900);
-  --tile-button-hover-text: var(--color-gray-50);
-
-  /* Gradient — Sustain light (indigo tint) */
-  --gradient-stop-0: var(--color-slate-200);
-  --gradient-stop-1: var(--sustain-secondary);
-  --gradient-stop-2: var(--color-slate-200);
-  --radial-gradient-bg: radial-gradient(
-    circle at 90% 10%,
-    var(--gradient-stop-0) 0%,
-    var(--gradient-stop-1) 25%,
-    var(--gradient-stop-2) 60%
-  );
-
-  /* Sidebar */
-  --sidebar: var(--color-gray-50);
-  --sidebar-foreground: var(--color-gray-700);
-  --sidebar-primary: var(--color-gray-900);
-  --sidebar-primary-foreground: var(--color-gray-50);
-  --sidebar-accent: var(--color-gray-100);
-  --sidebar-accent-foreground: var(--color-gray-900);
-  --sidebar-border: var(--color-gray-200);
-  --sidebar-ring: var(--color-gray-300);
-}
-
-/* Sustain Theme — Dark Mode */
-html.theme-sustain.dark {
-  --sustain-primary: var(--color-indigo-950);
-  --sustain-secondary: var(--color-indigo-950);
-  --sustain-accent: var(--color-indigo-950);
-  --sustain-surface: var(--color-indigo-950);
-  --sustain-background: var(--color-indigo-950);
-
-  --background: var(--sustain-surface);
-  --foreground: var(--color-gray-50);
-  --card: var(--color-gray-800);
-  --card-foreground: var(--color-gray-50);
-  --popover: var(--color-gray-800);
-  --popover-foreground: var(--color-gray-50);
-  --primary: var(--color-gray-50);
-  --primary-foreground: var(--color-gray-900);
-  --secondary: var(--color-gray-700);
-  --secondary-foreground: var(--color-gray-50);
-  --muted: var(--color-gray-700);
-  --muted-foreground: var(--color-gray-400);
-  --accent: var(--color-gray-700);
-  --accent-foreground: var(--color-gray-50);
-  --destructive: var(--color-red-600);
-  --destructive-foreground: var(--color-gray-50);
-  --border: var(--color-gray-700);
-  --input: var(--color-gray-700);
-  --input-background: rgba(255, 255, 255, 0.05);
-  --ring: var(--color-gray-500);
-
-  /* Glass morphism */
-  --glass-heavy: rgba(31, 40, 50, 0.8);
-  --glass-strong: rgba(31, 40, 50, 0.8);
-  --glass-subtle: rgba(31, 40, 50, 0.3);
-  --glass-light: rgba(31, 40, 50, 0.5);
-  --glass-medium: rgba(55, 65, 81, 0.5);
-
-  --nav-active-bg: var(--color-gray-700);
-  --tile-bg: var(--color-gray-800);
-  --tile-hover-bg: rgba(31, 40, 50, 0.4);
-  --tile-button-bg: var(--color-gray-800);
-  --tile-button-hover-bg: var(--color-gray-50);
-  --tile-button-hover-text: var(--color-gray-900);
-
-  /* Gradient — Sustain dark (deep indigo) */
-  --gradient-stop-0: var(--color-gray-950);
-  --gradient-stop-1: var(--sustain-primary);
-  --gradient-stop-2: var(--color-gray-950);
-  --radial-gradient-bg: radial-gradient(
-    circle at 90% 10%,
-    var(--gradient-stop-0) 0%,
-    var(--gradient-stop-1) 25%,
-    var(--gradient-stop-2) 60%
-  );
-
-  /* Sidebar */
-  --sidebar: var(--color-gray-800);
-  --sidebar-foreground: var(--color-gray-300);
-  --sidebar-primary: var(--color-gray-50);
-  --sidebar-primary-foreground: var(--color-gray-900);
-  --sidebar-accent: var(--color-gray-700);
-  --sidebar-accent-foreground: var(--color-gray-50);
-  --sidebar-border: var(--color-gray-700);
-  --sidebar-ring: var(--color-gray-500);
-}