ps-helix 6.2.3 → 7.0.0

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

@@ -1,39 +1,39 @@
 /* Design Tokens - Visual Effects */
 
 :root {
-  /* Border Radii - Semantic aliases for sizing.tokens.css radius scale */
-  --border-radius: var(--radius-lg);        /* 0.5rem / 8px - Default radius */
-  --border-radius-lg: var(--radius-xl);     /* 0.75rem / 12px - Large radius */
-  --border-radius-full: var(--radius-full); /* 9999px - Full circle */
+  /* Border radii live in sizing.tokens.css. They used to be shadowed here by a shifted
+     alias layer — --border-radius resolved to --radius-lg, --border-radius-lg to
+     --radius-xl — which is why the library carried two competing scales. The aliases are
+     gone and their consumers now point at the step they actually rendered. */
 
   /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --psh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --psh-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --psh-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 
   /* Z-Index System */
-  --z-index-navigation: 50;
-  --z-index-dropdown: 100;
-  --z-index-tooltip: 200;
-  --z-index-modal-backdrop: 999;
-  --z-index-modal: 1000;
-  --z-index-overlay: 1100; /* body-teleported popovers (select/dropdown/menu) above modals */
-  --z-index-toast: 9999;
+  --psh-z-index-navigation: 50;
+  --psh-z-index-dropdown: 100;
+  --psh-z-index-tooltip: 200;
+  --psh-z-index-modal-backdrop: 999;
+  --psh-z-index-modal: 1000;
+  --psh-z-index-overlay: 1100; /* body-teleported popovers (select/dropdown/menu) above modals */
+  --psh-z-index-toast: 9999;
 
   /* Focus System */
-  --focus-outline-width: 2px;
-  --focus-outline-style: solid;
-  --focus-outline-color: var(--primary-color);
-  --focus-outline-offset: 2px;
-  --focus-ring-width: 3px;
-  --focus-ring-color: rgba(var(--primary-color-rgb), 0.2);
+  --psh-focus-outline-width: 2px;
+  --psh-focus-outline-style: solid;
+  --psh-focus-outline-color: var(--psh-primary-color);
+  --psh-focus-outline-offset: 2px;
+  --psh-focus-ring-width: 3px;
+  --psh-focus-ring-color: rgba(var(--psh-primary-color-rgb), 0.2);
 
   /* Focus variants */
-  --focus-ring-error: rgba(var(--danger-color-rgb), 0.2);
-  --focus-ring-success: rgba(var(--success-color-rgb), 0.2);
-  --focus-ring-warning: rgba(var(--warning-color-rgb), 0.2);
+  --psh-focus-ring-error: rgba(var(--psh-danger-color-rgb), 0.2);
+  --psh-focus-ring-success: rgba(var(--psh-success-color-rgb), 0.2);
+  --psh-focus-ring-warning: rgba(var(--psh-warning-color-rgb), 0.2);
 
   /* Opacity System */
-  --opacity-disabled: 0.6;
-  --opacity-loading: 0.7;
+  --psh-opacity-disabled: 0.6;
+  --psh-opacity-loading: 0.7;
 }

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

@@ -1,32 +1,32 @@
-/* Design Tokens - Layout System */
-
-:root {
-  /* Container System */
-  --container-padding-sm: var(--spacing-md);
-  --container-padding-md: var(--spacing-lg);
-  --container-padding-lg: var(--spacing-xl);
-  --container-max-width: 80rem; /* 1280px */
-
-  /* Grid System */
-  --grid-gap-sm: var(--spacing-sm);
-  --grid-gap-md: var(--spacing-md);
-  --grid-gap-lg: var(--spacing-lg);
-
-  /* Flexbox variables */
-  --flex-none: 0 0 auto;
-  --flex-auto: 1 1 auto;
-  --flex-initial: 0 1 auto;
-
-  /* Grid variables */
-  --grid-cols-1: repeat(1, minmax(0, 1fr));
-  --grid-cols-2: repeat(2, minmax(0, 1fr));
-  --grid-cols-3: repeat(3, minmax(0, 1fr));
-  --grid-cols-4: repeat(4, minmax(0, 1fr));
-  --grid-cols-6: repeat(6, minmax(0, 1fr));
-  --grid-cols-12: repeat(12, minmax(0, 1fr));
-
-  /* Select component specific */
-  --select-max-width: var(--container-sm);
-  --dropdown-max-height: var(--size-52);
-  --select-checkbox-size: var(--size-4-5);
-}
+/* Design Tokens - Layout System */
+
+:root {
+  /* Container System */
+  --psh-container-padding-sm: var(--psh-spacing-md);
+  --psh-container-padding-md: var(--psh-spacing-lg);
+  --psh-container-padding-lg: var(--psh-spacing-xl);
+  --psh-container-max-width: 80rem; /* 1280px */
+
+  /* Grid System */
+  --psh-grid-gap-sm: var(--psh-spacing-sm);
+  --psh-grid-gap-md: var(--psh-spacing-md);
+  --psh-grid-gap-lg: var(--psh-spacing-lg);
+
+  /* Flexbox variables */
+  --psh-flex-none: 0 0 auto;
+  --psh-flex-auto: 1 1 auto;
+  --psh-flex-initial: 0 1 auto;
+
+  /* Grid variables */
+  --psh-grid-cols-1: repeat(1, minmax(0, 1fr));
+  --psh-grid-cols-2: repeat(2, minmax(0, 1fr));
+  --psh-grid-cols-3: repeat(3, minmax(0, 1fr));
+  --psh-grid-cols-4: repeat(4, minmax(0, 1fr));
+  --psh-grid-cols-6: repeat(6, minmax(0, 1fr));
+  --psh-grid-cols-12: repeat(12, minmax(0, 1fr));
+
+  /* Select component specific */
+  --psh-select-max-width: var(--psh-container-sm);
+  --psh-dropdown-max-height: var(--psh-size-52);
+  --psh-select-checkbox-size: var(--psh-size-4-5);
+}

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

@@ -2,93 +2,105 @@
 
 :root {
   /* Base sizing scale - All measurements in rem for accessibility */
-  --size-0: 0;
-  --size-px: 0.0625rem;     /* 1px */
-  --size-0-5: 0.125rem;     /* 2px */
-  --size-1: 0.25rem;        /* 4px */
-  --size-1-5: 0.375rem;     /* 6px */
-  --size-2: 0.5rem;         /* 8px */
-  --size-2-5: 0.625rem;     /* 10px */
-  --size-3: 0.75rem;        /* 12px */
-  --size-3-5: 0.875rem;     /* 14px */
-  --size-4: 1rem;           /* 16px */
-  --size-4-5: 1.125rem;     /* 18px */
-  --size-5: 1.25rem;        /* 20px */
-  --size-5-5: 1.375rem;     /* 22px */
-  --size-6: 1.5rem;         /* 24px */
-  --size-6-5: 1.625rem;     /* 26px */
-  --size-7: 1.75rem;        /* 28px */
-  --size-8: 2rem;           /* 32px */
-  --size-8-5: 2.125rem;     /* 34px */
-  --size-9: 2.25rem;        /* 36px */
-  --size-10: 2.5rem;        /* 40px */
-  --size-11: 2.75rem;       /* 44px */
-  --size-12: 3rem;          /* 48px */
-  --size-14: 3.5rem;        /* 56px */
-  --size-16: 4rem;          /* 64px */
-  --size-18: 4.5rem;        /* 72px */
-  --size-20: 5rem;          /* 80px */
-  --size-24: 6rem;          /* 96px */
-  --size-28: 7rem;          /* 112px */
-  --size-32: 8rem;          /* 128px */
-  --size-36: 9rem;          /* 144px */
-  --size-40: 10rem;         /* 160px */
-  --size-44: 11rem;         /* 176px */
-  --size-48: 12rem;         /* 192px */
-  --size-52: 13rem;         /* 208px */
-  --size-56: 14rem;         /* 224px */
-  --size-60: 15rem;         /* 240px */
-  --size-64: 16rem;         /* 256px */
-  --size-72: 18rem;         /* 288px */
-  --size-80: 20rem;         /* 320px */
-  --size-96: 24rem;         /* 384px */
+  --psh-size-0: 0;
+  --psh-size-px: 0.0625rem;     /* 1px */
+  --psh-size-0-5: 0.125rem;     /* 2px */
+  --psh-size-1: 0.25rem;        /* 4px */
+  --psh-size-1-5: 0.375rem;     /* 6px */
+  --psh-size-2: 0.5rem;         /* 8px */
+  --psh-size-2-5: 0.625rem;     /* 10px */
+  --psh-size-3: 0.75rem;        /* 12px */
+  --psh-size-3-5: 0.875rem;     /* 14px */
+  --psh-size-4: 1rem;           /* 16px */
+  --psh-size-4-5: 1.125rem;     /* 18px */
+  --psh-size-5: 1.25rem;        /* 20px */
+  --psh-size-5-5: 1.375rem;     /* 22px */
+  --psh-size-6: 1.5rem;         /* 24px */
+  --psh-size-6-5: 1.625rem;     /* 26px */
+  --psh-size-7: 1.75rem;        /* 28px */
+  --psh-size-8: 2rem;           /* 32px */
+  --psh-size-8-5: 2.125rem;     /* 34px */
+  --psh-size-9: 2.25rem;        /* 36px */
+  --psh-size-10: 2.5rem;        /* 40px */
+  --psh-size-11: 2.75rem;       /* 44px */
+  --psh-size-12: 3rem;          /* 48px */
+  --psh-size-14: 3.5rem;        /* 56px */
+  --psh-size-16: 4rem;          /* 64px */
+  --psh-size-18: 4.5rem;        /* 72px */
+  --psh-size-20: 5rem;          /* 80px */
+  --psh-size-24: 6rem;          /* 96px */
+  --psh-size-28: 7rem;          /* 112px */
+  --psh-size-32: 8rem;          /* 128px */
+  --psh-size-36: 9rem;          /* 144px */
+  --psh-size-40: 10rem;         /* 160px */
+  --psh-size-44: 11rem;         /* 176px */
+  --psh-size-48: 12rem;         /* 192px */
+  --psh-size-52: 13rem;         /* 208px */
+  --psh-size-56: 14rem;         /* 224px */
+  --psh-size-60: 15rem;         /* 240px */
+  --psh-size-64: 16rem;         /* 256px */
+  --psh-size-72: 18rem;         /* 288px */
+  --psh-size-80: 20rem;         /* 320px */
+  --psh-size-96: 24rem;         /* 384px */
 
   /* Icon sizes */
-  --icon-size-xs: 0.75rem;      /* 12px */
-  --icon-size-sm: 1rem;         /* 16px */
-  --icon-size-md: 1.25rem;      /* 20px */
-  --icon-size-lg: 1.5rem;       /* 24px */
-  --icon-size-xl: 2rem;         /* 32px */
-  --icon-size-2xl: 3rem;        /* 48px */
+  --psh-icon-size-xs: 0.75rem;      /* 12px */
+  --psh-icon-size-sm: 1rem;         /* 16px */
+  --psh-icon-size-md: 1.25rem;      /* 20px */
+  --psh-icon-size-lg: 1.5rem;       /* 24px */
+  --psh-icon-size-xl: 2rem;         /* 32px */
+  --psh-icon-size-2xl: 3rem;        /* 48px */
 
   /* Border widths - keeping px for subpixel rendering */
-  --border-width-0: 0;
-  --border-width-1: 1px;
-  --border-width-2: 2px;
-  --border-width-4: 4px;
-  --border-width-8: 8px;
+  --psh-border-width-0: 0;
+  --psh-border-width-1: 1px;
+  --psh-border-width-2: 2px;
+  --psh-border-width-4: 4px;
+  --psh-border-width-8: 8px;
 
   /* Border radius scale */
-  --radius-none: 0;
-  --radius-sm: 0.125rem;        /* 2px */
-  --radius-base: 0.25rem;       /* 4px */
-  --radius-md: 0.375rem;        /* 6px */
-  --radius-lg: 0.5rem;          /* 8px */
-  --radius-xl: 0.75rem;         /* 12px */
-  --radius-2xl: 1rem;           /* 16px */
-  --radius-3xl: 1.5rem;         /* 24px */
-  --radius-full: 9999px;
+  --psh-radius-none: 0;
+  --psh-radius-sm: 0.125rem;        /* 2px */
+  --psh-radius-base: 0.25rem;       /* 4px */
+  --psh-radius-md: 0.375rem;        /* 6px */
+  --psh-radius-lg: 0.5rem;          /* 8px */
+  --psh-radius-xl: 0.75rem;         /* 12px */
+  --psh-radius-2xl: 1rem;           /* 16px */
+  --psh-radius-3xl: 1.5rem;         /* 24px */
+  --psh-radius-full: 9999px;
 
   /* Container max-widths */
-  --container-xs: 20rem;        /* 320px */
-  --container-sm: 24rem;        /* 384px */
-  --container-md: 28rem;        /* 448px */
-  --container-lg: 32rem;        /* 512px */
-  --container-xl: 36rem;        /* 576px */
-  --container-2xl: 42rem;       /* 672px */
-  --container-3xl: 48rem;       /* 768px */
-  --container-4xl: 56rem;       /* 896px */
-  --container-5xl: 64rem;       /* 1024px */
-  --container-6xl: 72rem;       /* 1152px */
-  --container-7xl: 80rem;       /* 1280px */
+  --psh-container-xs: 20rem;        /* 320px */
+  --psh-container-sm: 24rem;        /* 384px */
+  --psh-container-md: 28rem;        /* 448px */
+  --psh-container-lg: 32rem;        /* 512px */
+  --psh-container-xl: 36rem;        /* 576px */
+  --psh-container-2xl: 42rem;       /* 672px */
+  --psh-container-3xl: 48rem;       /* 768px */
+  --psh-container-4xl: 56rem;       /* 896px */
+  --psh-container-5xl: 64rem;       /* 1024px */
+  --psh-container-6xl: 72rem;       /* 1152px */
+  --psh-container-7xl: 80rem;       /* 1280px */
 
   /* Input component heights */
-  --height-input-sm: 2rem;      /* 32px */
-  --height-input-md: 2.5rem;    /* 40px */
-  --height-input-lg: 3rem;      /* 48px */
+  --psh-control-height-sm: 2rem;      /* 32px */
+  --psh-control-height-md: 2.5rem;    /* 40px */
+  --psh-control-height-lg: 3rem;      /* 48px */
+
+  /*
+   * Minimum hit area for anything tappable.
+   *
+   * WCAG 2.5.8 (AA) asks for 24px and 2.5.5 (AAA) for 44. The library had neither an opinion
+   * nor a token, and shipped targets at 24, 32 and 36px — so the smallest one was exactly at
+   * the AA floor and nothing was near AAA.
+   *
+   * It bounds the *target*, not the drawing: a 24px icon inside a 44px button looks the same
+   * and is twice as easy to hit.
+   */
+  --psh-touch-target-min: 2.75rem; /* 44px */
 
   /* Scrollbar width compensation */
-  --scrollbar-width: 0;
+  --psh-scrollbar-width: 0;
 
   /* Breakpoints - See tokens/breakpoints.tokens.css for the responsive scale */
 }

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

@@ -2,26 +2,26 @@
 
 :root {
   /* Positive spacing scale */
-  --spacing-xxs: 0.125rem;    /* 2px */
-  --spacing-xs: 0.25rem;      /* 4px */
-  --spacing-sm: 0.5rem;       /* 8px */
-  --spacing-md: 1rem;         /* 16px */
-  --spacing-lg: 1.5rem;       /* 24px */
-  --spacing-xl: 2rem;         /* 32px */
-  --spacing-2xl: 3rem;        /* 48px */
-  --spacing-3xl: 4rem;        /* 64px */
-  --spacing-4xl: 5rem;        /* 80px */
+  --psh-spacing-xxs: 0.125rem;    /* 2px */
+  --psh-spacing-xs: 0.25rem;      /* 4px */
+  --psh-spacing-sm: 0.5rem;       /* 8px */
+  --psh-spacing-md: 1rem;         /* 16px */
+  --psh-spacing-lg: 1.5rem;       /* 24px */
+  --psh-spacing-xl: 2rem;         /* 32px */
+  --psh-spacing-2xl: 3rem;        /* 48px */
+  --psh-spacing-3xl: 4rem;        /* 64px */
+  --psh-spacing-4xl: 5rem;        /* 80px */
 
   /* Form field semantic spacing */
-  --form-field-gap: var(--spacing-xs);  /* label <-> control <-> message */
-  --form-label-gap: var(--spacing-sm);  /* control <-> inline label (checkbox/radio/switch) */
+  --psh-form-field-gap: var(--psh-spacing-xs);  /* label <-> control <-> message */
+  --psh-form-label-gap: var(--psh-spacing-sm);  /* control <-> inline label (checkbox/radio/switch) */
 
   /* Negative spacing scale (for negative margins) */
-  --negative-spacing-xxs: -0.125rem;
-  --negative-spacing-xs: -0.25rem;
-  --negative-spacing-sm: -0.5rem;
-  --negative-spacing-md: -1rem;
-  --negative-spacing-lg: -1.5rem;
-  --negative-spacing-xl: -2rem;
-  --negative-spacing-2xl: -3rem;
+  --psh-negative-spacing-xxs: -0.125rem;
+  --psh-negative-spacing-xs: -0.25rem;
+  --psh-negative-spacing-sm: -0.5rem;
+  --psh-negative-spacing-md: -1rem;
+  --psh-negative-spacing-lg: -1.5rem;
+  --psh-negative-spacing-xl: -2rem;
+  --psh-negative-spacing-2xl: -3rem;
 }

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

@@ -1,34 +1,34 @@
-/* Design Tokens - Typography System */
-
-:root {
-  /* Font family */
-  --font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-
-  /* Font Sizes - Fluid Typography with clamp() */
-  --font-size-xs: clamp(0.6875rem, 0.5vw + 0.625rem, 0.75rem);      /* 11-12px */
-  --font-size-sm: clamp(0.8125rem, 0.5vw + 0.75rem, 0.875rem);      /* 13-14px */
-  --font-size-base: clamp(0.9375rem, 0.5vw + 0.875rem, 1rem);       /* 15-16px */
-  --font-size-lg: clamp(1.0625rem, 0.75vw + 0.9375rem, 1.125rem);   /* 17-18px */
-  --font-size-xl: clamp(1.125rem, 1vw + 1rem, 1.25rem);             /* 18-20px */
-  --font-size-2xl: clamp(1.25rem, 1.5vw + 1rem, 1.5rem);            /* 20-24px */
-  --font-size-3xl: clamp(1.5rem, 2vw + 1.125rem, 1.875rem);         /* 24-30px */
-  --font-size-4xl: clamp(1.75rem, 2.5vw + 1.25rem, 2.25rem);        /* 28-36px */
-
-  /* Font Weights */
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  /* Line Heights */
-  --line-height-tight: 1.25;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.75;
-
-  /* Letter Spacing */
-  --letter-spacing-tight: -0.025em;
-  --letter-spacing-normal: 0;
-  --letter-spacing-wide: 0.025em;
-  --letter-spacing-wider: 0.05em;
-  --letter-spacing-widest: 0.1em;
-}
+/* Design Tokens - Typography System */
+
+:root {
+  /* Font family */
+  --psh-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+  /* Font Sizes - Fluid Typography with clamp() */
+  --psh-font-size-xs: clamp(0.6875rem, 0.5vw + 0.625rem, 0.75rem);      /* 11-12px */
+  --psh-font-size-sm: clamp(0.8125rem, 0.5vw + 0.75rem, 0.875rem);      /* 13-14px */
+  --psh-font-size-base: clamp(0.9375rem, 0.5vw + 0.875rem, 1rem);       /* 15-16px */
+  --psh-font-size-lg: clamp(1.0625rem, 0.75vw + 0.9375rem, 1.125rem);   /* 17-18px */
+  --psh-font-size-xl: clamp(1.125rem, 1vw + 1rem, 1.25rem);             /* 18-20px */
+  --psh-font-size-2xl: clamp(1.25rem, 1.5vw + 1rem, 1.5rem);            /* 20-24px */
+  --psh-font-size-3xl: clamp(1.5rem, 2vw + 1.125rem, 1.875rem);         /* 24-30px */
+  --psh-font-size-4xl: clamp(1.75rem, 2.5vw + 1.25rem, 2.25rem);        /* 28-36px */
+
+  /* Font Weights */
+  --psh-font-weight-normal: 400;
+  --psh-font-weight-medium: 500;
+  --psh-font-weight-semibold: 600;
+  --psh-font-weight-bold: 700;
+
+  /* Line Heights */
+  --psh-line-height-tight: 1.25;
+  --psh-line-height-normal: 1.5;
+  --psh-line-height-relaxed: 1.75;
+
+  /* Letter Spacing */
+  --psh-letter-spacing-tight: -0.025em;
+  --psh-letter-spacing-normal: 0;
+  --psh-letter-spacing-wide: 0.025em;
+  --psh-letter-spacing-wider: 0.05em;
+  --psh-letter-spacing-widest: 0.1em;
+}

package/src/lib/styles/utilities/animations.utils.css

@@ -13,7 +13,7 @@
 @keyframes fadeInUp {
   from {
     opacity: 0;
-    transform: translateY(var(--animation-distance-md));
+    transform: translateY(var(--psh-animation-distance-md));
   }
   to {
     opacity: 1;
@@ -35,7 +35,7 @@
 @keyframes slideInDown {
   from {
     opacity: 0;
-    transform: translateY(calc(-1 * var(--animation-distance-md)));
+    transform: translateY(calc(-1 * var(--psh-animation-distance-md)));
   }
   to {
     opacity: 1;
@@ -46,7 +46,7 @@
 @keyframes slideInLeft {
   from {
     opacity: 0;
-    transform: translateX(calc(-1 * var(--animation-distance-md)));
+    transform: translateX(calc(-1 * var(--psh-animation-distance-md)));
   }
   to {
     opacity: 1;
@@ -57,7 +57,7 @@
 @keyframes slideInRight {
   from {
     opacity: 0;
-    transform: translateX(var(--animation-distance-md));
+    transform: translateX(var(--psh-animation-distance-md));
   }
   to {
     opacity: 1;
@@ -87,7 +87,7 @@
     transform: translateY(0);
   }
   50% {
-    transform: translateY(calc(-1 * var(--animation-distance-sm)));
+    transform: translateY(calc(-1 * var(--psh-animation-distance-sm)));
   }
 }
 
@@ -104,54 +104,54 @@
 
 /* Animation utility classes */
 .psh-animate-fade-in {
-  animation: fadeIn var(--animation-duration-default) var(--animation-easing-default);
+  animation: fadeIn var(--psh-animation-duration-default) var(--psh-animation-easing-default);
 }
 
 .psh-animate-fade-in-up {
-  animation: fadeInUp var(--animation-duration-default) var(--animation-easing-default);
+  animation: fadeInUp var(--psh-animation-duration-default) var(--psh-animation-easing-default);
 }
 
 .psh-animate-slide-in {
-  animation: slideIn var(--animation-duration-default) var(--animation-easing-default);
+  animation: slideIn var(--psh-animation-duration-default) var(--psh-animation-easing-default);
 }
 
 .psh-animate-slide-in-down {
-  animation: slideInDown var(--animation-duration-default) var(--animation-easing-default);
+  animation: slideInDown var(--psh-animation-duration-default) var(--psh-animation-easing-default);
 }
 
 .psh-animate-slide-in-left {
-  animation: slideInLeft var(--animation-duration-default) var(--animation-easing-default);
+  animation: slideInLeft var(--psh-animation-duration-default) var(--psh-animation-easing-default);
 }
 
 .psh-animate-slide-in-right {
-  animation: slideInRight var(--animation-duration-default) var(--animation-easing-default);
+  animation: slideInRight var(--psh-animation-duration-default) var(--psh-animation-easing-default);
 }
 
 .psh-animate-scale-in {
-  animation: scaleIn var(--animation-duration-fast) var(--animation-easing-smooth);
+  animation: scaleIn var(--psh-animation-duration-fast) var(--psh-animation-easing-smooth);
 }
 
 .psh-animate-spin {
-  animation: spin 1s linear infinite;
+  animation: spin var(--psh-animation-loop-normal) var(--psh-animation-easing-linear) infinite;
 }
 
 .psh-animate-bounce {
-  animation: bounce var(--animation-duration-slow) var(--animation-easing-default) infinite;
+  animation: bounce var(--psh-animation-duration-slow) var(--psh-animation-easing-default) infinite;
 }
 
 .psh-animate-pulse {
-  animation: pulse var(--animation-duration-slow) var(--animation-easing-default) infinite;
+  animation: pulse var(--psh-animation-duration-slow) var(--psh-animation-easing-default) infinite;
 }
 
 /* Animation control utilities */
 .psh-animate-fast {
-  animation-duration: var(--animation-duration-fast) !important;
+  animation-duration: var(--psh-animation-duration-fast) !important;
 }
 
 .psh-animate-slow {
-  animation-duration: var(--animation-duration-slow) !important;
+  animation-duration: var(--psh-animation-duration-slow) !important;
 }
 
 .psh-animate-smooth {
-  animation-timing-function: var(--animation-easing-smooth) !important;
+  animation-timing-function: var(--psh-animation-easing-smooth) !important;
 }