ps-helix 6.2.3 → 7.0.0

package/src/lib/styles/themes/light.css

@@ -1,279 +1,294 @@
 :root {
   /* Surface Colors */
-  --surface-0: #ffffff;
-  --surface-50: #f8fafc;
-  --surface-100: #f1f5f9;
-  --surface-200: #e2e8f0;
-  --surface-300: #cbd5e1;
-  --surface-400: #94a3b8;
-  --surface-500: #64748b;
-  --surface-600: #475569;
-  --surface-700: #334155;
-  --surface-800: #1e293b;
-  --surface-900: #0f172a;
-  --surface-900-rgb: 15, 23, 42;
+  --psh-surface-0: #ffffff;
+  --psh-surface-50: #f8fafc;
+  --psh-surface-100: #f1f5f9;
+  --psh-surface-200: #e2e8f0;
+  --psh-surface-300: #cbd5e1;
+  --psh-surface-400: #94a3b8;
+  --psh-surface-500: #64748b;
+  --psh-surface-600: #475569;
+  --psh-surface-700: #334155;
+  --psh-surface-800: #1e293b;
+  --psh-surface-900: #0f172a;
+  --psh-surface-900-rgb: 15, 23, 42;
 
   /* Functional Colors */
-  --surface-ground: var(--surface-50);
-  --surface-section: var(--surface-0);
+  --psh-surface-ground: var(--psh-surface-50);
+  --psh-surface-section: var(--psh-surface-0);
   
   /* Alert Colors */
-  --alert-info-bg: rgba(11, 1, 145, 0.1);
-  --alert-info-border-color: #0B0191;
-  --alert-info-text-color: #0B0191;
+  --psh-alert-info-bg: rgba(11, 1, 145, 0.1);
+  --psh-alert-info-border-color: #0B0191;
+  --psh-alert-info-text-color: #0B0191;
   
-  --surface-card: var(--surface-0);
-  --surface-overlay: var(--surface-0);
-  --surface-border: var(--surface-200);
-  --surface-hover: var(--surface-100);
+  --psh-surface-card: var(--psh-surface-0);
+  --psh-surface-overlay: var(--psh-surface-0);
+  --psh-surface-border: var(--psh-surface-200);
+  --psh-surface-hover: var(--psh-surface-100);
 
   /* Text Colors */
-  --text-color: var(--surface-800);
-  --text-color-secondary: var(--surface-600);
-  --text-color-tertiary: var(--surface-500);
-  --text-color-disabled: var(--surface-400);
+  --psh-text-color: var(--psh-surface-800);
+  --psh-text-color-secondary: var(--psh-surface-600);
+  --psh-text-color-tertiary: var(--psh-surface-500);
+  --psh-text-color-disabled: var(--psh-surface-400);
 
   /* Text on colored backgrounds */
-  --text-on-primary: #FFFFFF;
-  --text-on-secondary: #FFFFFF;
-  --text-on-success: #FFFFFF;
-  --text-on-warning: #FFFFFF;
-  --text-on-danger: #FFFFFF;
-  --text-on-surface: var(--text-color);
-  --text-on-dark: #FFFFFF;
-  --text-on-light: #0a0d16;
+  --psh-text-on-primary: #FFFFFF;
+  --psh-text-on-secondary: #FFFFFF;
+  --psh-text-on-success: #FFFFFF;
+  --psh-text-on-warning: #FFFFFF;
+  --psh-text-on-danger: #FFFFFF;
+  --psh-text-on-info: #FFFFFF;
+  --psh-text-on-neutral: #FFFFFF;
+  --psh-text-on-surface: var(--psh-text-color);
+  --psh-text-on-dark: #FFFFFF;
+  --psh-text-on-light: #0a0d16;
 
   /* Blue Palette */
-  --blue-50: #EEF2FF;
-  --blue-100: #E0E7FF;
-  --blue-200: #C7D2FE;
-  --blue-300: #A5B4FC;
-  --blue-400: #818CF8;
-  --blue-500: #6366F1;
-  --blue-600: #4F46E5;
-  --blue-700: #4338CA;
-  --blue-800: #3730A3;
-  --blue-900: #312E81;
+  --psh-blue-50: #EEF2FF;
+  --psh-blue-100: #E0E7FF;
+  --psh-blue-200: #C7D2FE;
+  --psh-blue-300: #A5B4FC;
+  --psh-blue-400: #818CF8;
+  --psh-blue-500: #6366F1;
+  --psh-blue-600: #4F46E5;
+  --psh-blue-700: #4338CA;
+  --psh-blue-800: #3730A3;
+  --psh-blue-900: #312E81;
 
   /* Red Palette */
-  --red-50: #FEF2F2;
-  --red-100: #FEE2E2;
-  --red-200: #FECACA;
-  --red-300: #FCA5A5;
-  --red-400: #F87171;
-  --red-500: #EF4444;
-  --red-600: #DC2626;
-  --red-700: #B91C1C;
-  --red-800: #991B1B;
-  --red-900: #7F1D1D;
+  --psh-red-50: #FEF2F2;
+  --psh-red-100: #FEE2E2;
+  --psh-red-200: #FECACA;
+  --psh-red-300: #FCA5A5;
+  --psh-red-400: #F87171;
+  --psh-red-500: #EF4444;
+  --psh-red-600: #DC2626;
+  --psh-red-700: #B91C1C;
+  --psh-red-800: #991B1B;
+  --psh-red-900: #7F1D1D;
 
   /* Green Palette */
-  --green-50: #F0FDF4;
-  --green-100: #DCFCE7;
-  --green-200: #BBF7D0;
-  --green-300: #86EFAC;
-  --green-400: #4ADE80;
-  --green-500: #22C55E;
-  --green-600: #16A34A;
-  --green-700: #15803D;
-  --green-800: #166534;
-  --green-900: #14532D;
+  --psh-green-50: #F0FDF4;
+  --psh-green-100: #DCFCE7;
+  --psh-green-200: #BBF7D0;
+  --psh-green-300: #86EFAC;
+  --psh-green-400: #4ADE80;
+  --psh-green-500: #22C55E;
+  --psh-green-600: #16A34A;
+  --psh-green-700: #15803D;
+  --psh-green-800: #166534;
+  --psh-green-900: #14532D;
 
   /* Orange Palette */
-  --orange-50: #FFF7ED;
-  --orange-100: #FFEDD5;
-  --orange-200: #FED7AA;
-  --orange-300: #FDBA74;
-  --orange-400: #FB923C;
-  --orange-500: #F97316;
-  --orange-600: #EA580C;
-  --orange-700: #C2410C;
-  --orange-800: #9A3412;
-  --orange-900: #7C2D12;
+  --psh-orange-50: #FFF7ED;
+  --psh-orange-100: #FFEDD5;
+  --psh-orange-200: #FED7AA;
+  --psh-orange-300: #FDBA74;
+  --psh-orange-400: #FB923C;
+  --psh-orange-500: #F97316;
+  --psh-orange-600: #EA580C;
+  --psh-orange-700: #C2410C;
+  --psh-orange-800: #9A3412;
+  --psh-orange-900: #7C2D12;
 
   /* Yellow Palette */
-  --yellow-50: #FEFCE8;
-  --yellow-100: #FEF9C3;
-  --yellow-200: #FEF08A;
-  --yellow-300: #FDE047;
-  --yellow-400: #FACC15;
-  --yellow-500: #EAB308;
-  --yellow-600: #CA8A04;
-  --yellow-700: #A16207;
-  --yellow-800: #854D0E;
-  --yellow-900: #713F12;
+  --psh-yellow-50: #FEFCE8;
+  --psh-yellow-100: #FEF9C3;
+  --psh-yellow-200: #FEF08A;
+  --psh-yellow-300: #FDE047;
+  --psh-yellow-400: #FACC15;
+  --psh-yellow-500: #EAB308;
+  --psh-yellow-600: #CA8A04;
+  --psh-yellow-700: #A16207;
+  --psh-yellow-800: #854D0E;
+  --psh-yellow-900: #713F12;
 
   /* Violet Palette */
-  --violet-50: #F5F3FF;
-  --violet-100: #EDE9FE;
-  --violet-200: #DDD6FE;
-  --violet-300: #C4B5FD;
-  --violet-400: #A78BFA;
-  --violet-500: #8B5CF6;
-  --violet-600: #7C3AED;
-  --violet-700: #6D28D9;
-  --violet-800: #5B21B6;
-  --violet-900: #4C1D95;
+  --psh-violet-50: #F5F3FF;
+  --psh-violet-100: #EDE9FE;
+  --psh-violet-200: #DDD6FE;
+  --psh-violet-300: #C4B5FD;
+  --psh-violet-400: #A78BFA;
+  --psh-violet-500: #8B5CF6;
+  --psh-violet-600: #7C3AED;
+  --psh-violet-700: #6D28D9;
+  --psh-violet-800: #5B21B6;
+  --psh-violet-900: #4C1D95;
 
   /* Cyan Palette */
-  --cyan-50: #ECFEFF;
-  --cyan-100: #CFFAFE;
-  --cyan-200: #A5F3FC;
-  --cyan-300: #67E8F9;
-  --cyan-400: #22D3EE;
-  --cyan-500: #06B6D4;
-  --cyan-600: #0891B2;
-  --cyan-700: #0E7490;
-  --cyan-800: #155E75;
-  --cyan-900: #164E63;
+  --psh-cyan-50: #ECFEFF;
+  --psh-cyan-100: #CFFAFE;
+  --psh-cyan-200: #A5F3FC;
+  --psh-cyan-300: #67E8F9;
+  --psh-cyan-400: #22D3EE;
+  --psh-cyan-500: #06B6D4;
+  --psh-cyan-600: #0891B2;
+  --psh-cyan-700: #0E7490;
+  --psh-cyan-800: #155E75;
+  --psh-cyan-900: #164E63;
 
   /* Teal Palette */
-  --teal-50: #F0FDFA;
-  --teal-100: #CCFBF1;
-  --teal-200: #99F6E4;
-  --teal-300: #5EEAD4;
-  --teal-400: #2DD4BF;
-  --teal-500: #14B8A6;
-  --teal-600: #0D9488;
-  --teal-700: #0F766E;
-  --teal-800: #115E59;
-  --teal-900: #134E4A;
+  --psh-teal-50: #F0FDFA;
+  --psh-teal-100: #CCFBF1;
+  --psh-teal-200: #99F6E4;
+  --psh-teal-300: #5EEAD4;
+  --psh-teal-400: #2DD4BF;
+  --psh-teal-500: #14B8A6;
+  --psh-teal-600: #0D9488;
+  --psh-teal-700: #0F766E;
+  --psh-teal-800: #115E59;
+  --psh-teal-900: #134E4A;
 
   /* Emerald Palette */
-  --emerald-50: #ECFDF5;
-  --emerald-100: #D1FAE5;
-  --emerald-200: #A7F3D0;
-  --emerald-300: #6EE7B7;
-  --emerald-400: #34D399;
-  --emerald-500: #10B981;
-  --emerald-600: #059669;
-  --emerald-700: #047857;
-  --emerald-800: #065F46;
-  --emerald-900: #064E3B;
+  --psh-emerald-50: #ECFDF5;
+  --psh-emerald-100: #D1FAE5;
+  --psh-emerald-200: #A7F3D0;
+  --psh-emerald-300: #6EE7B7;
+  --psh-emerald-400: #34D399;
+  --psh-emerald-500: #10B981;
+  --psh-emerald-600: #059669;
+  --psh-emerald-700: #047857;
+  --psh-emerald-800: #065F46;
+  --psh-emerald-900: #064E3B;
 
   /* Indigo Palette */
-  --indigo-50: #EEF2FF;
-  --indigo-100: #E0E7FF;
-  --indigo-200: #C7D2FE;
-  --indigo-300: #A5B4FC;
-  --indigo-400: #818CF8;
-  --indigo-500: #6366F1;
-  --indigo-600: #4F46E5;
-  --indigo-700: #4338CA;
-  --indigo-800: #3730A3;
-  --indigo-900: #312E81;
+  --psh-indigo-50: #EEF2FF;
+  --psh-indigo-100: #E0E7FF;
+  --psh-indigo-200: #C7D2FE;
+  --psh-indigo-300: #A5B4FC;
+  --psh-indigo-400: #818CF8;
+  --psh-indigo-500: #6366F1;
+  --psh-indigo-600: #4F46E5;
+  --psh-indigo-700: #4338CA;
+  --psh-indigo-800: #3730A3;
+  --psh-indigo-900: #312E81;
 
   /* Purple Palette */
-  --purple-50: #FAF5FF;
-  --purple-100: #F3E8FF;
-  --purple-200: #E9D5FF;
-  --purple-300: #D8B4FE;
-  --purple-400: #C084FC;
-  --purple-500: #A855F7;
-  --purple-600: #9333EA;
-  --purple-700: #7C3AED;
-  --purple-800: #6B21A8;
-  --purple-900: #581C87;
+  --psh-purple-50: #FAF5FF;
+  --psh-purple-100: #F3E8FF;
+  --psh-purple-200: #E9D5FF;
+  --psh-purple-300: #D8B4FE;
+  --psh-purple-400: #C084FC;
+  --psh-purple-500: #A855F7;
+  --psh-purple-600: #9333EA;
+  --psh-purple-700: #7C3AED;
+  --psh-purple-800: #6B21A8;
+  --psh-purple-900: #581C87;
 
   /* Fuchsia Palette */
-  --fuchsia-50: #FDF4FF;
-  --fuchsia-100: #FAE8FF;
-  --fuchsia-200: #F5D0FE;
-  --fuchsia-300: #F0ABFC;
-  --fuchsia-400: #E879F9;
-  --fuchsia-500: #D946EF;
-  --fuchsia-600: #C026D3;
-  --fuchsia-700: #A21CAF;
-  --fuchsia-800: #86198F;
-  --fuchsia-900: #701A75;
+  --psh-fuchsia-50: #FDF4FF;
+  --psh-fuchsia-100: #FAE8FF;
+  --psh-fuchsia-200: #F5D0FE;
+  --psh-fuchsia-300: #F0ABFC;
+  --psh-fuchsia-400: #E879F9;
+  --psh-fuchsia-500: #D946EF;
+  --psh-fuchsia-600: #C026D3;
+  --psh-fuchsia-700: #A21CAF;
+  --psh-fuchsia-800: #86198F;
+  --psh-fuchsia-900: #701A75;
 
   /* Rose Palette */
-  --rose-50: #FFF1F2;
-  --rose-100: #FFE4E6;
-  --rose-200: #FECDD3;
-  --rose-300: #FDA4AF;
-  --rose-400: #FB7185;
-  --rose-500: #F43F5E;
-  --rose-600: #E11D48;
-  --rose-700: #BE123C;
-  --rose-800: #9F1239;
-  --rose-900: #881337;
+  --psh-rose-50: #FFF1F2;
+  --psh-rose-100: #FFE4E6;
+  --psh-rose-200: #FECDD3;
+  --psh-rose-300: #FDA4AF;
+  --psh-rose-400: #FB7185;
+  --psh-rose-500: #F43F5E;
+  --psh-rose-600: #E11D48;
+  --psh-rose-700: #BE123C;
+  --psh-rose-800: #9F1239;
+  --psh-rose-900: #881337;
 
   /* Amber Palette */
-  --amber-50: #FFFBEB;
-  --amber-100: #FEF3C7;
-  --amber-200: #FDE68A;
-  --amber-300: #FCD34D;
-  --amber-400: #FBBF24;
-  --amber-500: #F59E0B;
-  --amber-600: #D97706;
-  --amber-700: #B45309;
-  --amber-800: #92400E;
-  --amber-900: #78350F;
+  --psh-amber-50: #FFFBEB;
+  --psh-amber-100: #FEF3C7;
+  --psh-amber-200: #FDE68A;
+  --psh-amber-300: #FCD34D;
+  --psh-amber-400: #FBBF24;
+  --psh-amber-500: #F59E0B;
+  --psh-amber-600: #D97706;
+  --psh-amber-700: #B45309;
+  --psh-amber-800: #92400E;
+  --psh-amber-900: #78350F;
 
   /* Pink Palette */
-  --pink-50: #FDF2F8;
-  --pink-100: #FCE7F3;
-  --pink-200: #FBCFE8;
-  --pink-300: #F9A8D4;
-  --pink-400: #F472B6;
-  --pink-500: #EC4899;
-  --pink-600: #DB2777;
-  --pink-700: #BE185D;
-  --pink-800: #9D174D;
-  --pink-900: #831843;
+  --psh-pink-50: #FDF2F8;
+  --psh-pink-100: #FCE7F3;
+  --psh-pink-200: #FBCFE8;
+  --psh-pink-300: #F9A8D4;
+  --psh-pink-400: #F472B6;
+  --psh-pink-500: #EC4899;
+  --psh-pink-600: #DB2777;
+  --psh-pink-700: #BE185D;
+  --psh-pink-800: #9D174D;
+  --psh-pink-900: #831843;
 
   /* Primary Colors - Use customer context with fallbacks */
-  --primary-color: var(--customer-primary-color, #0B0191);
-  --primary-color-light: var(--customer-primary-color-light, #0F02C4);
-  --primary-color-lighter: var(--customer-primary-color-lighter, #4A3FD9);
-  --primary-color-dark: var(--customer-primary-color-dark, #09017A);
-  --primary-color-darker: var(--customer-primary-color-darker, #07015E);
-  --primary-color-text: var(--customer-primary-color-text, #FFFFFF);
-  --primary-color-rgb: var(--customer-primary-color-rgb, 11, 1, 145);
+  --psh-primary-color: var(--psh-customer-primary-color, var(--customer-primary-color, #0B0191));
+  --psh-primary-color-light: var(--psh-customer-primary-color-light, var(--customer-primary-color-light, #0F02C4));
+  --psh-primary-color-lighter: var(--psh-customer-primary-color-lighter, var(--customer-primary-color-lighter, #4A3FD9));
+  --psh-primary-color-dark: var(--psh-customer-primary-color-dark, var(--customer-primary-color-dark, #09017A));
+  --psh-primary-color-darker: var(--psh-customer-primary-color-darker, var(--customer-primary-color-darker, #07015E));
+  --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, 11, 1, 145));
 
   /* Primary Gradients - Automatically adapt to custom colors */
-  --primary-gradient: linear-gradient(to right, var(--primary-color-darker), var(--primary-color-light));
-  --primary-gradient-hover: linear-gradient(to right, var(--primary-color-dark), var(--primary-color-lighter));
-  --primary-gradient-reversed: linear-gradient(to left, var(--primary-color-darker), var(--primary-color-light));
+  --psh-primary-gradient: linear-gradient(to right, var(--psh-primary-color-darker), var(--psh-primary-color-light));
+  --psh-primary-gradient-hover: linear-gradient(to right, var(--psh-primary-color-dark), var(--psh-primary-color-lighter));
+  --psh-primary-gradient-reversed: linear-gradient(to left, var(--psh-primary-color-darker), var(--psh-primary-color-light));
 
   /* Secondary Colors - Use customer context with fallbacks (gray tones for light theme) */
-  --secondary-color: var(--customer-secondary-color, #5E5E5E);
-  --secondary-color-light: var(--customer-secondary-color-light, #7B7B7B);
-  --secondary-color-lighter: var(--customer-secondary-color-lighter, #969696);
-  --secondary-color-dark: var(--customer-secondary-color-dark, #404040);
-  --secondary-color-darker: var(--customer-secondary-color-darker, #2B2B2B);
-  --secondary-color-text: var(--customer-secondary-color-text, #FFFFFF);
-  --secondary-color-rgb: var(--customer-secondary-color-rgb, 94, 94, 94);
+  --psh-secondary-color: var(--psh-customer-secondary-color, var(--customer-secondary-color, #5E5E5E));
+  --psh-secondary-color-light: var(--psh-customer-secondary-color-light, var(--customer-secondary-color-light, #7B7B7B));
+  --psh-secondary-color-lighter: var(--psh-customer-secondary-color-lighter, var(--customer-secondary-color-lighter, #969696));
+  --psh-secondary-color-dark: var(--psh-customer-secondary-color-dark, var(--customer-secondary-color-dark, #404040));
+  --psh-secondary-color-darker: var(--psh-customer-secondary-color-darker, var(--customer-secondary-color-darker, #2B2B2B));
+  --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, 94, 94, 94));
 
   /* Success Colors */
-  --success-color: #0F853A;
-  --success-color-rgb: 15, 133, 58;
-  --success-color-text: #FFFFFF;
+  --psh-success-color: #0F853A;
+  --psh-success-color-rgb: 15, 133, 58;
+  --psh-success-color-text: #FFFFFF;
+
+  /* Info and Neutral Colors
+     The semantic colour union is the same seven values on every component since 7.0.0, so
+     info and neutral need tokens of their own. Components used to improvise: badge reached
+     for --blue-500 directly, card for a hardcoded rgba, and the rest simply had no way to
+     render those two at all. */
+  --psh-info-color: #1F5FBF;
+  --psh-info-color-rgb: 31, 95, 191;
+  --psh-info-color-text: #FFFFFF;
+
+  --psh-neutral-color: #5A6070;
+  --psh-neutral-color-rgb: 90, 96, 112;
+  --psh-neutral-color-text: #FFFFFF;
 
   /* Warning Colors */
-  --warning-color: #b25310;
-  --warning-color-rgb: 178, 83, 16;
-  --warning-color-text: #FFFFFF;
+  --psh-warning-color: #b25310;
+  --psh-warning-color-rgb: 178, 83, 16;
+  --psh-warning-color-text: #FFFFFF;
 
   /* Danger Colors */
-  --danger-color: #D92626;
-  --danger-color-rgb: 217, 38, 38;
-  --danger-color-text: #FFFFFF;
+  --psh-danger-color: #D92626;
+  --psh-danger-color-rgb: 217, 38, 38;
+  --psh-danger-color-text: #FFFFFF;
 
   /* Chart Colors */
-  --chart-text-color: var(--text-color);
-  --chart-grid-color: var(--surface-200);
-  --chart-primary-color: var(--primary-color);
-  --chart-secondary-color: var(--secondary-color);
-  --chart-success-color: var(--success-color);
-  --chart-warning-color: var(--warning-color);
-  --chart-danger-color: var(--danger-color);
-  --chart-tooltip-background: var(--surface-card);
-  --chart-tooltip-text: var(--text-color);
-  --chart-legend-text: var(--text-color);
+  --psh-chart-text-color: var(--psh-text-color);
+  --psh-chart-grid-color: var(--psh-surface-200);
+  --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 */
-  --background-opacity: 0.5;
-  --body-gradient: radial-gradient(184.52% 111.8% at 100% 0%, #E0E4F7 0%, rgba(255, 255, 255, 0.00) 100%);
+  --psh-background-opacity: 0.5;
+  --psh-body-gradient: radial-gradient(184.52% 111.8% at 100% 0%, #E0E4F7 0%, rgba(255, 255, 255, 0.00) 100%);
 }

package/src/lib/styles/tokens/animations.tokens.css

@@ -1,21 +1,30 @@
-/* Design Tokens - Animation System */
-
-:root {
-  /* Animation durations */
-  --animation-duration-fast: 0.15s;
-  --animation-duration-normal: 0.2s;
-  --animation-duration-default: 0.3s;
-  --animation-duration-slow: 0.5s;
-
-  /* Animation easing functions */
-  --animation-easing-default: ease;
-  --animation-easing-in: ease-in;
-  --animation-easing-out: ease-out;
-  --animation-easing-in-out: ease-in-out;
-  --animation-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
-
-  /* Animation distances */
-  --animation-distance-sm: 10px;
-  --animation-distance-md: 20px;
-  --animation-distance-lg: 30px;
-}
+/* Design Tokens - Animation System */
+
+:root {
+  /* Animation durations */
+  --psh-animation-duration-fast: 0.15s;
+  --psh-animation-duration-normal: 0.2s;
+  --psh-animation-duration-default: 0.3s;
+  --psh-animation-duration-slow: 0.5s;
+
+  /* Animation easing functions */
+  --psh-animation-easing-default: ease;
+  --psh-animation-easing-in: ease-in;
+  --psh-animation-easing-out: ease-out;
+  --psh-animation-easing-in-out: ease-in-out;
+  --psh-animation-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+  --psh-animation-easing-linear: linear;
+
+  /* Looping decorative animations — spinners, skeleton shimmer. A different job from a
+     UI transition, so a separate family: these are cycle lengths, not response times,
+     and they must not be tuned by whoever tunes how fast a button reacts. */
+  --psh-animation-loop-fast: 0.8s;
+  --psh-animation-loop-normal: 1s;
+  --psh-animation-loop-slow: 1.5s;
+  --psh-animation-loop-slower: 2s;
+
+  /* Animation distances */
+  --psh-animation-distance-sm: 10px;
+  --psh-animation-distance-md: 20px;
+  --psh-animation-distance-lg: 30px;
+}

package/src/lib/styles/tokens/breakpoints.tokens.css

@@ -9,12 +9,28 @@
  * queries must inline the literal value. Always use the canonical value from
  * this scale (prefer the em form) rather than an ad-hoc breakpoint, so the
  * library stays consistent across components and utilities.
+ *
+ * `min-width` uses the value above. `max-width` uses the value **minus
+ * 0.0625em** — one pixel at a 16px root — because the two are otherwise both
+ * true at exactly the breakpoint:
+ *
+ *     min-width: 48em        max-width: 47.9375em
+ *
+ * That overlap was live in `responsive.utils.css`, where eight rules paired
+ * `min-width: 48em` with `max-width: 48em`, so at 768px an element was both
+ * "small screen" and "large screen".
+ *
+ * Mixing px and em is not a style preference. An em query scales with the
+ * user's root font size and a px query does not, so at 150% browser zoom a
+ * px-based component has not switched while the em-based one beside it has.
+ * `@container` queries follow the same scale; there, em resolves against the
+ * container's own font size, which is the behaviour you want.
  */
 :root {
-  --breakpoint-xs: 30em; /* 480px */
-  --breakpoint-sm: 40em; /* 640px */
-  --breakpoint-md: 48em; /* 768px */
-  --breakpoint-lg: 64em; /* 1024px */
-  --breakpoint-xl: 80em; /* 1280px */
-  --breakpoint-2xl: 96em; /* 1536px */
+  --psh-breakpoint-xs: 30em; /* 480px */
+  --psh-breakpoint-sm: 40em; /* 640px */
+  --psh-breakpoint-md: 48em; /* 768px */
+  --psh-breakpoint-lg: 64em; /* 1024px */
+  --psh-breakpoint-xl: 80em; /* 1280px */
+  --psh-breakpoint-2xl: 96em; /* 1536px */
 }