@psnext/design-system 1.5.1 → 2.0.0

package/dist/styles/tokens/border-radius.css

@@ -5,14 +5,14 @@
 
 :root {
   --rounded-none: 0;
-  --rounded-xs: 2px;
-  --rounded-sm: 4px;
-  --rounded-5: 5px;
-  --rounded-md: 6px;
-  --rounded-lg: 8px;
+  --rounded-2: 2px;
+  --rounded-4: 4px;
+  --rounded-6: 6px;
+  --rounded-8: 8px;
   --rounded-10: 10px;
-  --rounded-xl: 12px;
-  --rounded-2xl: 16px;
-  --rounded-3xl: 24px;
+  --rounded-12: 12px;
+  --rounded-16: 16px;
+  --rounded-24: 24px;
+  --rounded-32: 32px;
   --rounded-full: 9999px;
 }

package/dist/styles/tokens/mode-dark.css

@@ -4,98 +4,75 @@
  */
 
 .dark {
-  --bg-background: #1f2832; /** Use for general backgrounds. */
-  --bg-primary: #f3f4f6;
-  --bg-secondary: #1f2937;
-  --bg-accent: #111827; /** Level 1, official */
-  --bg-muted: #111827;
-  --bg-destructive: #6c0016;
-  --bg-destructive-alpha: rgb(220 38 38 / 0.2);
-  --bg-destructive-subtle: #3d000d;
-  --bg-input: rgb(255 255 255 / 0.05);
-  --bg-page-bg-brand: #3d000d;
-  --bg-page-bg-neutral: #030712;
-  --bg-info: #075985;
-  --bg-info-subtle: #0c4a6e;
-  --bg-success: #3f6212;
-  --bg-success-subtle: #365314;
-  --bg-warning: #9a3412;
-  --bg-warning-subtle: #431407;
-  --bg-error: #8d011d;
-  --bg-error-subtle: #6c0016;
-  --bg-backdrop: rgb(31 40 50 / 0.4);
-  --content-foreground: #f9fafb;
-  --content-primary-foreground: #030712;
-  --content-secondary-foreground: #f3f4f6;
-  --content-accent-foreground: #f3f4f6;
-  --content-muted-foreground: #9ca3af;
-  --content-destructive-foreground: #ffffff;
-  --content-info: #38bdf8;
-  --content-info-bold: #7dd3fc;
-  --content-success: #84cc16;
-  --content-success-bold: #bef264;
-  --content-warning: #f97316;
-  --content-warning-bold: #fdba74;
-  --content-error: #e90130;
-  --content-error-bold: #f699ac;
-  --content-destructive: #f26783;
-  --content-destructive-subtle: #bc0126;
-  --card-card-100: #1f2832;
-  --card-card-90: rgb(31 40 50 / 0.9);
-  --card-card-80: rgb(31 40 50 / 0.8);
-  --card-card-60: rgb(31 40 50 / 0.6);
-  --card-card-40: rgb(31 40 50 / 0.4);
-  --card-card-20: rgb(31 40 50 / 0.2);
-  --card-card-10: rgb(31 40 50 / 0.1);
-  --card-card-foreground: #ffffff;
-  --brand-colors-brand-50: #3d000d;
-  --brand-colors-brand-100: #6c0016;
-  --brand-colors-brand-200: #8d011d;
-  --brand-colors-brand-300: #bc0126;
-  --brand-colors-brand-400: #d2012b;
-  --brand-colors-brand-500: #e90130;
-  --brand-colors-brand-600: #f26783;
-  --brand-colors-brand-700: #f699ac;
-  --brand-colors-brand-800: #fbccd6;
-  --brand-colors-brand-900: #fde6ea;
-  --brand-colors-brand-950: #fef2f5;
-  --popover-popover: #ffffff;
-  --popover-popover-foreground: #1f2832;
-  --unofficial-foreground-alt: #d1d5db; /** Please use this for body text. */
-  --unofficial-body-background: #030712;
-  --unofficial-mid-alt: #9ca3af;
-  --unofficial-ghost-foreground: #e5e7eb;
-  --unofficial-ghost: rgb(255 255 255 / 0.0001);
-  --unofficial-ghost-hover: rgb(255 255 255 / 0.1);
-  --unofficial-primary-hover: #d1d5db;
-  --unofficial-secondary-hover: #111827;
-  --unofficial-outline: rgb(255 255 255 / 0.05);
-  --unofficial-outline-hover: rgb(255 255 255 / 0.1);
-  --unofficial-outline-active: rgb(255 255 255 / 0.15);
-  --unofficial-accent-0: #030712;
-  --unofficial-accent-2: #1f2937;
-  --unofficial-accent-3: #374151;
-  --border-border-0: #030712;
-  --border-border-1: #111827;
-  --border-border-2: #374151; /** level 2, official. See docs. */
-  --border-border-3: #374151;
-  --border-border-4: #4b5563;
-  --border-border-5: #6b7280;
-  --border-destructive-border: #f26783;
-  --border-success-border: #a3e635;
-  --border-warning-border: #fb923c;
-  --focus-ring: #374151; /** Focus ring */
-  --focus-ring-error: #6d2e2f; /** Focus ring error */
-  --sidebar-sidebar: #030712;
-  --sidebar-sidebar-foreground: #d1d5db;
-  --sidebar-sidebar-accent: #111827;
-  --sidebar-sidebar-accent-foreground: #f3f4f6;
-  --sidebar-sidebar-primary: #f9fafb;
-  --sidebar-sidebar-primary-foreground: #111827;
-  --sidebar-sidebar-border: #1f2937;
-  --sidebar-sidebar-ring: #374151;
-  --sidebar-unofficial-sidebar-muted: #6b7280;
-  --obra-shadcn-docs-obra-shadcn-ui-docs-1: #111628;
-  --obra-shadcn-docs-obra-shadcn-ui-docs-2: #201d1b;
-  --focus-ring-success: var(--content-success-bold); /** Focus ring error */
+  --primary-bg: #111827; /** Use for general backgrounds. */
+  --primary-invert-bg: #ffffff;
+  --secondary-bg: #4b5563;
+  --muted-bg: #111827;
+  --info-bg: #0c4a6e;
+  --success-bg: #365314;
+  --warning-bg: #431407;
+  --danger-bg: #6c0016;
+  --primary-invert-hover-bg: #d1d5db;
+  --secondary-hover-bg: #111827;
+  --outline-bg: rgb(255 255 255 / 0.05);
+  --outline-hover-bg: rgb(255 255 255 / 0.1);
+  --ghost-bg: rgb(255 255 255 / 0.0001);
+  --ghost-hover-bg: rgb(255 255 255 / 0.1);
+  --toggle-active-bg: rgb(255 255 255 / 0.1);
+  --input-bg: #1f2832;
+  --switch-active-bg: #84cc16;
+  --navbar-active-bg: #e90130;
+  --brand-gradient-from: var(--theme-brand-950);
+  --brand-gradient-to: #020617;
+  --overlay-bg: rgb(31 40 50 / 0.4);
+  --primary-txt: #f3f4f6;
+  --primary-invert-txt: #111827;
+  --secondary-txt: #e5e7eb;
+  --muted-txt: #9ca3af;
+  --info-txt: #7dd3fc;
+  --success-txt: #bef264;
+  --warning-txt: #fdba74;
+  --danger-txt: #f699ac;
+  --primary-border: #374151; /** level 2, official. See docs. */
+  --primary-invert-border: #4b5563;
+  --secondary-border: #374151;
+  --muted-border: #111827;
+  --selected-border: #f9fafb;
+  --info-border: #7dd3fc;
+  --success-border: #bef264;
+  --warning-border: #fdba74;
+  --danger-border: #f699ac;
+  --brand-50: #3d000d;
+  --brand-200: #6c0016;
+  --brand-800: var(--theme-brand-200);
+  --brand-950: var(--theme-brand-50);
+  --brand-500-primary: var(--theme-brand-500-primary);
+  --focus: #374151; /** Focus ring */
+  --focus-error: #6c0016; /** Focus ring error */
+  --glass-20-bg: rgb(31 40 50 / 0.2);
+  --glass-40-bg: rgb(31 40 50 / 0.4);
+  --glass-60-bg: rgb(31 40 50 / 0.6);
+  --glass-none-bg: var(--primary-bg);
+  --chart-blue: #1d4ed8;
+  --chart-blue-subtle: #1e3a8a;
+  --chart-emerald: #047857;
+  --chart-emerald-subtle: #064e3b;
+  --chart-amber: #b45309;
+  --chart-amber-subtle: #78350f;
+  --chart-red: #bc0126;
+  --chart-red-subtle: #6c0016;
+  --chart-purple: #7e22ce;
+  --chart-purple-subtle: #581c87;
+  --chart-lime: #4d7c0f;
+  --chart-lime-subtle: #365314;
+  --chart-indigo: #4338ca;
+  --chart-indigo-subtle: #312e81;
+  --chart-orange: #c2410c;
+  --chart-orange-subtle: #7c2d12;
+  --chart-1: #f54a00;
+  --chart-2: #009689;
+  --chart-3: #104e64;
+  --chart-4: #ffb900;
+  --chart-5: #fe9a00;
+  --brand-700: var(--theme-brand-200);
 }

package/dist/styles/tokens/mode-light.css

@@ -4,98 +4,75 @@
  */
 
 :root {
-  --bg-background: #ffffff; /** Use for general backgrounds. */
-  --bg-primary: #111827;
-  --bg-secondary: #f3f4f6;
-  --bg-accent: #f3f4f6; /** Level 1, official */
-  --bg-muted: #f3f4f6;
-  --bg-destructive: #d2012b;
-  --bg-destructive-alpha: rgb(220 38 38 / 0.2);
-  --bg-destructive-subtle: #fef2f5;
-  --bg-input: #ffffff;
-  --bg-page-bg-brand: #fbccd6;
-  --bg-page-bg-neutral: #e2e8f0;
-  --bg-info: #bae6fd;
-  --bg-info-subtle: #e0f2fe;
-  --bg-success: #d9f99d;
-  --bg-success-subtle: #ecfccb;
-  --bg-warning: #fed7aa;
-  --bg-warning-subtle: #ffedd5;
-  --bg-error: #fbccd6;
-  --bg-error-subtle: #fde6ea;
-  --bg-backdrop: rgb(31 40 50 / 0.4);
-  --content-foreground: #030712;
-  --content-primary-foreground: #f9fafb;
-  --content-secondary-foreground: #111827;
-  --content-accent-foreground: #111827;
-  --content-muted-foreground: #6b7280;
-  --content-destructive-foreground: #ffffff;
-  --content-info: #0284c7;
-  --content-info-bold: #075985;
-  --content-success: #65a30d;
-  --content-success-bold: #3f6212;
-  --content-warning: #ea580c;
-  --content-warning-bold: #9a3412;
-  --content-error: #d2012b;
-  --content-error-bold: #8d011d;
-  --content-destructive: #d2012b;
-  --content-destructive-subtle: #f699ac;
-  --card-card-100: #ffffff;
-  --card-card-90: rgb(255 255 255 / 0.9);
-  --card-card-80: rgb(255 255 255 / 0.8);
-  --card-card-60: rgb(255 255 255 / 0.6);
-  --card-card-40: rgb(255 255 255 / 0.4);
-  --card-card-20: rgb(255 255 255 / 0.2);
-  --card-card-10: rgb(255 255 255 / 0.1);
-  --card-card-foreground: #030712;
-  --brand-colors-brand-50: #fef2f5;
-  --brand-colors-brand-100: #fde6ea;
-  --brand-colors-brand-200: #fbccd6;
-  --brand-colors-brand-300: #f699ac;
-  --brand-colors-brand-400: #f26783;
-  --brand-colors-brand-500: #e90130;
-  --brand-colors-brand-600: #d2012b;
-  --brand-colors-brand-700: #bc0126;
-  --brand-colors-brand-800: #8d011d;
-  --brand-colors-brand-900: #6c0016;
-  --brand-colors-brand-950: #3d000d;
-  --popover-popover: #1f2832;
-  --popover-popover-foreground: #ffffff;
-  --unofficial-foreground-alt: #374151; /** Please use this for body text. */
-  --unofficial-body-background: #ffffff;
-  --unofficial-mid-alt: #4b5563;
-  --unofficial-ghost-foreground: #374151;
-  --unofficial-ghost: rgb(255 255 255 / 0.0001);
-  --unofficial-ghost-hover: rgb(31 40 50 / 0.05);
-  --unofficial-primary-hover: #374151;
-  --unofficial-secondary-hover: #f9fafb;
-  --unofficial-outline: rgb(255 255 255 / 0.1);
-  --unofficial-outline-hover: rgb(31 40 50 / 0.0333);
-  --unofficial-outline-active: rgb(31 40 50 / 0.05);
-  --unofficial-accent-0: #f9fafb;
-  --unofficial-accent-2: #e5e7eb;
-  --unofficial-accent-3: #d1d5db;
-  --border-border-0: #f9fafb;
-  --border-border-1: #f3f4f6;
-  --border-border-2: #e5e7eb; /** level 2, official. See docs. */
-  --border-border-3: #d1d5db;
-  --border-border-4: #9ca3af;
-  --border-border-5: #6b7280;
-  --border-destructive-border: #d2012b;
-  --border-success-border: #65a30d;
-  --border-warning-border: #ea580c;
-  --focus-ring: #d1d5db; /** Focus ring */
-  --focus-ring-error: #f699ac; /** Focus ring error */
-  --sidebar-sidebar: #f9fafb;
-  --sidebar-sidebar-foreground: #374151;
-  --sidebar-sidebar-accent: #f3f4f6;
-  --sidebar-sidebar-accent-foreground: #111827;
-  --sidebar-sidebar-primary: #111827;
-  --sidebar-sidebar-primary-foreground: #f9fafb;
-  --sidebar-sidebar-border: #e5e7eb;
-  --sidebar-sidebar-ring: #d1d5db;
-  --sidebar-unofficial-sidebar-muted: #6b7280;
-  --obra-shadcn-docs-obra-shadcn-ui-docs-1: #bfdbfe;
-  --obra-shadcn-docs-obra-shadcn-ui-docs-2: #fef9c3;
-  --focus-ring-success: var(--content-success); /** Focus ring error */
+  --primary-bg: #ffffff; /** Use for general backgrounds. */
+  --primary-invert-bg: #111827;
+  --secondary-bg: #e5e7eb;
+  --muted-bg: #f3f4f6;
+  --info-bg: #e0f2fe;
+  --success-bg: #ecfccb;
+  --warning-bg: #ffedd5;
+  --danger-bg: #fde6ea;
+  --primary-invert-hover-bg: #374151;
+  --secondary-hover-bg: #f9fafb;
+  --outline-bg: rgb(255 255 255 / 0.1);
+  --outline-hover-bg: rgb(31 40 50 / 0.0333);
+  --ghost-bg: rgb(255 255 255 / 0.0001);
+  --ghost-hover-bg: rgb(31 40 50 / 0.05);
+  --toggle-active-bg: rgb(31 40 50 / 0.05);
+  --input-bg: #ffffff;
+  --switch-active-bg: #84cc16;
+  --navbar-active-bg: #e90130;
+  --brand-gradient-from: var(--theme-brand-200);
+  --brand-gradient-to: #e2e8f0;
+  --overlay-bg: rgb(31 40 50 / 0.4);
+  --primary-txt: #111827;
+  --primary-invert-txt: #f3f4f6;
+  --secondary-txt: #374151;
+  --muted-txt: #6b7280;
+  --info-txt: #0369a1;
+  --success-txt: #4d7c0f;
+  --warning-txt: #c2410c;
+  --danger-txt: #bc0126;
+  --primary-border: #e5e7eb; /** level 2, official. See docs. */
+  --primary-invert-border: #9ca3af;
+  --secondary-border: #d1d5db;
+  --muted-border: #f3f4f6;
+  --selected-border: #1f2937;
+  --info-border: #0369a1;
+  --success-border: #4d7c0f;
+  --warning-border: #c2410c;
+  --danger-border: #bc0126;
+  --brand-50: var(--theme-brand-50);
+  --brand-200: var(--theme-brand-200);
+  --brand-800: var(--theme-brand-800);
+  --brand-950: var(--theme-brand-950);
+  --brand-500-primary: var(--theme-brand-500-primary);
+  --focus: #d1d5db; /** Focus ring */
+  --focus-error: #f699ac; /** Focus ring error */
+  --glass-20-bg: rgb(255 255 255 / 0.2);
+  --glass-40-bg: rgb(255 255 255 / 0.4);
+  --glass-60-bg: rgb(255 255 255 / 0.6);
+  --glass-none-bg: var(--primary-bg);
+  --chart-blue: #60a5fa;
+  --chart-blue-subtle: #bfdbfe;
+  --chart-emerald: #34d399;
+  --chart-emerald-subtle: #a7f3d0;
+  --chart-amber: #fbbf24;
+  --chart-amber-subtle: #fde68a;
+  --chart-red: #f26783;
+  --chart-red-subtle: #fbccd6;
+  --chart-purple: #c084fc;
+  --chart-purple-subtle: #e9d5ff;
+  --chart-lime: #a3e635;
+  --chart-lime-subtle: #d9f99d;
+  --chart-indigo: #818cf8;
+  --chart-indigo-subtle: #c7d2fe;
+  --chart-orange: #fb923c;
+  --chart-orange-subtle: #fed7aa;
+  --chart-1: #f54a00;
+  --chart-2: #009689;
+  --chart-3: #104e64;
+  --chart-4: #ffb900;
+  --chart-5: #fe9a00;
+  --brand-700: var(--theme-brand-700);
 }

package/dist/styles/tokens/shadows.css

@@ -4,11 +4,8 @@
  */
 
 :root {
-  --shadow-2xs: 0 1px 0 0 rgb(31 40 50 / 0);
-  --shadow-xs: 0 1px 2px 0 rgb(31 40 50 / 0);
-  --shadow-sm: 0 1px 3px 0 rgb(31 40 50 / 0.1), 0 1px 2px -1px rgb(31 40 50 / 0.1);
-  --shadow-md: 0 4px 6px -1px rgb(31 40 50 / 0.1), 0 2px 4px -2px rgb(31 40 50 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(31 40 50 / 0.1), 0 4px 6px -4px rgb(31 40 50 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(31 40 50 / 0.1), 0 8px 10px -6px rgb(31 40 50 / 0.1);
-  --shadow-2xl: 0 25px 50px -12px rgb(31 40 50 / 0.1);
+  --shadow-sm: 0 1px 3px 0 rgb(31 40 50 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(31 40 50 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(31 40 50 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(31 40 50 / 0.1);
 }

package/dist/styles/tokens/spacing.css

@@ -4,41 +4,21 @@
  */
 
 :root {
-  --spacing-0: 0;
-  --spacing-1: 4px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --spacing-5: 20px;
-  --spacing-6: 24px;
-  --spacing-7: 28px;
-  --spacing-8: 32px;
-  --spacing-9: 36px;
-  --spacing-10: 40px;
-  --spacing-11: 44px;
-  --spacing-12: 48px;
-  --spacing-14: 56px;
-  --spacing-16: 64px;
-  --spacing-20: 80px;
-  --spacing-24: 96px;
-  --spacing-28: 112px;
-  --spacing-32: 128px;
-  --spacing-36: 144px;
-  --spacing-40: 160px;
-  --spacing-44: 176px;
-  --spacing-48: 192px;
-  --spacing-52: 208px;
-  --spacing-56: 224px;
-  --spacing-60: 240px;
-  --spacing-64: 256px;
-  --spacing-72: 288px;
-  --spacing-80: 320px;
-  --spacing-96: 384px;
-  --spacing-0-5: 2px;
-  --spacing-0-75: 3px;
-  --spacing-1-25: 5px;
-  --spacing-1-5: 6px;
-  --spacing-2-5: 10px;
-  --spacing-3-5: 14px;
-  --spacing-infinite: 9999px;
+  --space-0: 0;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-8: 8px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-32: 32px;
+  --space-40: 40px;
+  --space-48: 48px;
+  --space-56: 56px;
+  --space-64: 64px;
+  --space-80: 80px;
+  --space-96: 96px;
+  --space-128: 128px;
+  --space-256: 256px;
 }

package/dist/styles/tokens/theme-bodhi.css

@@ -4,32 +4,10 @@
  */
 
 .theme-bodhi {
-  --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: #eff6ff;
-  --brand-shades-100: #dbeafe;
-  --brand-shades-200: #bfdbfe;
-  --brand-shades-300: #93c5fd;
-  --brand-shades-400: #60a5fa;
-  --brand-shades-500: #3b82f6;
-  --brand-shades-600: #2563eb;
-  --brand-shades-700: #1d4ed8;
-  --brand-shades-800: #1e40af;
-  --brand-shades-900: #1e3a8a;
-  --brand-shades-950: #172554;
-  --brand-combinations-1-brand-foreground: #ffffff;
-  --brand-combinations-1-brand: var(--brand-shades-500);
-  --brand-combinations-2-brand: var(--brand-shades-200);
-  --brand-combinations-2-brand-foreground: var(--brand-shades-800);
-  --brand-combinations-3-brand: var(--brand-shades-950);
-  --brand-combinations-3-brand-foreground: var(--brand-shades-300);
+  --theme-brand-50: #eff6ff;
+  --theme-brand-200: #bfdbfe;
+  --theme-brand-800: #1e40af;
+  --theme-brand-950: #172554;
+  --theme-brand-500-primary: #3b82f6;
+  --theme-brand-700: #1d4ed8; /* code-only stop, not in Figma yet */
 }

package/dist/styles/tokens/theme-slingshot.css

@@ -3,33 +3,12 @@
  * Re-run `pnpm tokens:css` after re-exporting tokens from Figma.
  */
 
+:root,
 .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: #fef2f5;
-  --brand-shades-100: #fde6ea;
-  --brand-shades-200: #fbccd6;
-  --brand-shades-300: #f699ac;
-  --brand-shades-400: #f26783;
-  --brand-shades-500: #e90130;
-  --brand-shades-600: #d2012b;
-  --brand-shades-700: #bc0126;
-  --brand-shades-800: #8d011d;
-  --brand-shades-900: #6c0016;
-  --brand-shades-950: #3d000d;
-  --brand-combinations-1-brand-foreground: #ffffff;
-  --brand-combinations-1-brand: var(--brand-shades-500);
-  --brand-combinations-2-brand: var(--brand-shades-200);
-  --brand-combinations-2-brand-foreground: var(--brand-shades-800);
-  --brand-combinations-3-brand: var(--brand-shades-950);
-  --brand-combinations-3-brand-foreground: var(--brand-shades-300);
+  --theme-brand-50: #fef2f5;
+  --theme-brand-200: #fbccd6;
+  --theme-brand-800: #8d011d;
+  --theme-brand-950: #3d000d;
+  --theme-brand-500-primary: #e90130;
+  --theme-brand-700: #bc0126; /* code-only stop, not in Figma yet */
 }

package/dist/styles/tokens/theme-sustain.css

@@ -4,32 +4,10 @@
  */
 
 .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: #eef2ff;
-  --brand-shades-100: #e0e7ff;
-  --brand-shades-200: #c7d2fe;
-  --brand-shades-300: #a5b4fc;
-  --brand-shades-400: #818cf8;
-  --brand-shades-500: #6366f1;
-  --brand-shades-600: #4f46e5;
-  --brand-shades-700: #4338ca;
-  --brand-shades-800: #3730a3;
-  --brand-shades-900: #312e81;
-  --brand-shades-950: #1e1b4b;
-  --brand-combinations-1-brand-foreground: #ffffff;
-  --brand-combinations-1-brand: var(--brand-shades-500);
-  --brand-combinations-2-brand: var(--brand-shades-200);
-  --brand-combinations-2-brand-foreground: var(--brand-shades-800);
-  --brand-combinations-3-brand: var(--brand-shades-950);
-  --brand-combinations-3-brand-foreground: var(--brand-shades-300);
+  --theme-brand-50: #eef2ff;
+  --theme-brand-200: #c7d2fe;
+  --theme-brand-800: #3730a3;
+  --theme-brand-950: #1e1b4b;
+  --theme-brand-500-primary: #6366f1;
+  --theme-brand-700: #4338ca; /* code-only stop, not in Figma yet */
 }

package/dist/styles/typography.css

@@ -85,14 +85,14 @@
     }
     /* Inline code chip (a bare <code> not inside a <pre>). */
     :not(pre) > code:not([class]):not([data-slot]) {
-      border-radius: var(--rounded-sm);
-      background-color: var(--muted);
+      border-radius: var(--rounded-4);
+      background-color: var(--muted-bg);
       padding: 0.125rem 0.375rem;
     }
     pre:not([class]):not([data-slot]) {
       overflow-x: auto;
-      border-radius: var(--rounded-lg);
-      background-color: var(--muted);
+      border-radius: var(--rounded-8);
+      background-color: var(--muted-bg);
       padding: 1rem;
       font-size: var(--paragraph-small-font-size);
       line-height: var(--paragraph-small-line-height);
@@ -105,22 +105,22 @@
 
     /* ── Blockquote ───────────────────────────────────────────── */
     blockquote:not([class]):not([data-slot]) {
-      border-inline-start: 3px solid var(--border);
+      border-inline-start: 3px solid var(--primary-border);
       padding-inline-start: 1rem;
-      color: var(--muted-foreground);
+      color: var(--muted-txt);
       font-style: italic;
     }
 
     /* ── Rule / media ─────────────────────────────────────────── */
     hr:not([class]):not([data-slot]) {
       border: 0;
-      border-top: 1px solid var(--border);
+      border-top: 1px solid var(--primary-border);
     }
     img:not([class]):not([data-slot]),
     video:not([class]):not([data-slot]) {
       max-width: 100%;
       height: auto;
-      border-radius: var(--rounded-lg);
+      border-radius: var(--rounded-8);
     }
 
     /* ── Tables ───────────────────────────────────────────────── */
@@ -130,7 +130,7 @@
       font-size: var(--paragraph-small-font-size);
     }
     :where(th, td):not([class]):not([data-slot]) {
-      border-bottom: 1px solid var(--border);
+      border-bottom: 1px solid var(--primary-border);
       padding: 0.5rem 0.75rem;
       text-align: start;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@psnext/design-system",
-  "version": "1.5.1",
+  "version": "2.0.0",
   "description": "Sapient AI Products design system — primitives, patterns, and layouts.",
   "license": "UNLICENSED",
   "private": false,
@@ -55,9 +55,15 @@
   "sideEffects": [
     "**/*.css"
   ],
+  "bin": {
+    "psnext-design-system": "./bin/install-agent-skill.mjs"
+  },
   "files": [
     "dist",
-    "README.md"
+    "bin",
+    "README.md",
+    "DESIGN.md",
+    "SKILL.md"
   ],
   "publishConfig": {
     "access": "public",

package/dist/index44.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index44.d.cts","names":[],"sources":["../src/primitives/Pagination/Pagination.tsx"],"mappings":";;;;;;iBAOS,UAAA;;;GAAoC,KAAA,CAAM,wBAAqB,oBAAA,CAAA,GAAA,CAAA;;AAJN,iBAiBzD,iBAAA,CAbU;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAaiC,KAAA,CAAM,cAbvC,CAAA,IAAA,CAAA,CAAA,EAa2D,oBAAA,CAAA,GAAA,CAAA,OAb3D;;iBAwBV,cAAA,CAxBa;EAAA,GAAA;AAAA,CAAA,EAwBgB,KAAA,CAAM,cAxBtB,CAAA,IAAA,CAAA,CAAA,EAwB0C,oBAAA,CAAA,GAAA,CAAA,OAxB1C;KA4BjB,mBAAA,GA5B8C;;EAAqB,QAAA,CAAA,EAAA,OAAA;AAAA,CAAA,GA+BpE,IAlBK,CAkBA,KAAA,CAAM,cAlBW,CAAA,OAkBW,MAlBX,CAAA,EAAA,MAAA,CAAA,GAmBxB,KAAA,CAAM,cAnBkB,CAAA,GAAA,CAAA;;iBAsBjB,cAAA,CAtBoB;EAAA,SAAA;EAAA,QAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAsB6C,mBAtB7C,CAAA,EAsBgE,oBAAA,CAAA,GAAA,CAAA,OAtBhE;;iBAyCpB,kBAAA,CAzCqE;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAyCzB,KAAA,CAAM,cAzCmB,CAAA,OAyCG,cAzCH,CAAA,CAAA,EAyCkB,oBAAA,CAAA,GAAA,CAAA,OAzClB;AAAA;AAAA,iBAwDrE,cAAA,CA7Cc;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA6C0B,KAAA,CAAM,cA7ChC,CAAA,OA6CsD,cA7CtD,CAAA,CAAA,EA6CqE,oBAAA,CAAA,GAAA,CAAA,OA7CrE;;iBA4Dd,kBAAA,CA5DmC;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA4DS,KAAA,CAAM,cA5Df,CAAA,MAAA,CAAA,CAAA,EA4DqC,oBAAA,CAAA,GAAA,CAAA,OA5DrC"}