@citizenplane/pimp 9.13.6 → 9.14.0

package/src/assets/styles/variables/_tokens.scss

@@ -0,0 +1,426 @@
+@use './colors';
+@use './dimensions';
+@use './easings';
+@use './shadows';
+@use './sizing';
+@use './spacing';
+
+:root {
+  /**
+  * COLORS
+  */
+
+  --pimp-background-accent-primary: var(--pimp-colors-violet-50);
+  --pimp-background-accent-primary-hover: var(--pimp-colors-violet-100);
+  --pimp-background-accent-secondary: var(--pimp-colors-violet-100);
+  --pimp-background-accent-secondary-hover: var(--pimp-colors-violet-200);
+  --pimp-background-accent-solid: var(--pimp-colors-violet-500);
+  --pimp-background-accent-solid-hover: var(--pimp-colors-violet-600);
+  --pimp-background-blue-primary: var(--pimp-colors-blue-50);
+  --pimp-background-blue-primary-hover: var(--pimp-colors-blue-100);
+  --pimp-background-blue-secondary: var(--pimp-colors-blue-100);
+  --pimp-background-blue-secondary-hover: var(--pimp-colors-blue-200);
+  --pimp-background-blue-solid: var(--pimp-colors-blue-500);
+  --pimp-background-blue-solid-hover: var(--pimp-colors-blue-600);
+  --pimp-background-disabled: var(--pimp-colors-grey-50);
+  --pimp-background-error-primary: var(--pimp-colors-red-50);
+  --pimp-background-error-primary-hover: var(--pimp-colors-red-100);
+  --pimp-background-error-secondary: var(--pimp-colors-red-100);
+  --pimp-background-error-secondary-hover: var(--pimp-colors-red-200);
+  --pimp-background-error-solid: var(--pimp-colors-red-500);
+  --pimp-background-error-solid-hover: var(--pimp-colors-red-600);
+  --pimp-background-inverse-hover: rgba(255, 255, 255, 0.1);
+  --pimp-background-magenta-primary: var(--pimp-colors-magenta-50);
+  --pimp-background-magenta-primary-hover: var(--pimp-colors-magenta-100);
+  --pimp-background-magenta-secondary: var(--pimp-colors-magenta-100);
+  --pimp-background-magenta-secondary-hover: var(--pimp-colors-magenta-200);
+  --pimp-background-magenta-solid: var(--pimp-colors-magenta-500);
+  --pimp-background-magenta-solid-hover: var(--pimp-colors-magenta-600);
+  --pimp-background-pink-primary: var(--pimp-colors-pink-50);
+  --pimp-background-pink-primary-hover: var(--pimp-colors-pink-100);
+  --pimp-background-pink-secondary: var(--pimp-colors-pink-100);
+  --pimp-background-pink-secondary-hover: var(--pimp-colors-pink-200);
+  --pimp-background-pink-solid: var(--pimp-colors-pink-500);
+  --pimp-background-pink-solid-hover: var(--pimp-colors-pink-600);
+  --pimp-background-primary: var(--pimp-colors-white);
+  --pimp-background-primary-hover: var(--pimp-colors-grey-100);
+  --pimp-background-primary-hover-alt: var(--pimp-colors-violet-100);
+  --pimp-background-quaternary: var(--pimp-colors-grey-200);
+  --pimp-background-quaternary-hover: var(--pimp-colors-grey-300);
+  --pimp-background-secondary: var(--pimp-colors-grey-50);
+  --pimp-background-secondary-hover: var(--pimp-colors-grey-100);
+  --pimp-background-solid: var(--pimp-colors-grey-900);
+  --pimp-background-success-primary: var(--pimp-colors-green-50);
+  --pimp-background-success-primary-hover: var(--pimp-colors-green-100);
+  --pimp-background-success-secondary: var(--pimp-colors-green-100);
+  --pimp-background-success-secondary-hover: var(--pimp-colors-green-200);
+  --pimp-background-success-solid: var(--pimp-colors-green-400);
+  --pimp-background-success-solid-hover: var(--pimp-colors-green-500);
+  --pimp-background-surface: var(--pimp-colors-white);
+  --pimp-background-tertiary: var(--pimp-colors-grey-100);
+  --pimp-background-tertiary-hover: var(--pimp-colors-grey-200);
+  --pimp-background-warning-primary: var(--pimp-colors-orange-50);
+  --pimp-background-warning-primary-hover: var(--pimp-colors-orange-100);
+  --pimp-background-warning-secondary: var(--pimp-colors-orange-100);
+  --pimp-background-warning-secondary-hover: var(--pimp-colors-orange-200);
+  --pimp-background-warning-solid: var(--pimp-colors-orange-400);
+  --pimp-background-warning-solid-hover: var(--pimp-colors-orange-500);
+  --pimp-background-yellow-primary: var(--pimp-colors-yellow-50);
+  --pimp-background-yellow-primary-hover: var(--pimp-colors-yellow-100);
+  --pimp-background-yellow-secondary: var(--pimp-colors-yellow-100);
+  --pimp-background-yellow-secondary-hover: var(--pimp-colors-yellow-200);
+  --pimp-background-yellow-solid: var(--pimp-colors-yellow-300);
+  --pimp-background-yellow-solid-hover: var(--pimp-colors-yellow-400);
+
+  --pimp-border-accent-primary: var(--pimp-colors-violet-200);
+  --pimp-border-accent-primary-hover: var(--pimp-colors-violet-300);
+  --pimp-border-accent-solid: var(--pimp-colors-violet-500);
+  --pimp-border-blue-primary: var(--pimp-colors-blue-200);
+  --pimp-border-blue-solid: var(--pimp-colors-blue-500);
+  --pimp-border-disabled: var(--pimp-colors-grey-100);
+  --pimp-border-error-primary: var(--pimp-colors-red-200);
+  --pimp-border-error-solid: var(--pimp-colors-red-500);
+  --pimp-border-magenta-primary: var(--pimp-colors-magenta-200);
+  --pimp-border-magenta-solid: var(--pimp-colors-magenta-500);
+  --pimp-border-pink-primary: var(--pimp-colors-pink-200);
+  --pimp-border-pink-solid: var(--pimp-colors-pink-500);
+  --pimp-border-soft: var(--pimp-colors-grey-200);
+  --pimp-border-soft-hover: var(--pimp-colors-grey-300);
+  --pimp-border-solid: var(--pimp-colors-grey-800);
+  --pimp-border-strong: var(--pimp-colors-grey-300);
+  --pimp-border-strong-hover: var(--pimp-colors-grey-400);
+  --pimp-border-success-primary: var(--pimp-colors-green-200);
+  --pimp-border-success-solid: var(--pimp-colors-green-400);
+  --pimp-border-warning-primary: var(--pimp-colors-orange-200);
+  --pimp-border-warning-solid: var(--pimp-colors-orange-400);
+  --pimp-border-yellow-primary: var(--pimp-colors-yellow-200);
+  --pimp-border-yellow-solid: var(--pimp-colors-yellow-500);
+
+  --pimp-foreground-accent-primary: var(--pimp-colors-violet-500);
+  --pimp-foreground-accent-primary-hover: var(--pimp-colors-violet-600);
+  --pimp-foreground-accent-secondary: var(--pimp-colors-violet-400);
+  --pimp-foreground-accent-secondary-hover: var(--pimp-colors-violet-500);
+  --pimp-foreground-blue-primary: var(--pimp-colors-blue-500);
+  --pimp-foreground-blue-primary-hover: var(--pimp-colors-blue-600);
+  --pimp-foreground-blue-secondary: var(--pimp-colors-blue-400);
+  --pimp-foreground-blue-secondary-hover: var(--pimp-colors-blue-500);
+  --pimp-foreground-disabled: var(--pimp-colors-grey-400);
+  --pimp-foreground-error-primary: var(--pimp-colors-red-500);
+  --pimp-foreground-error-primary-hover: var(--pimp-colors-red-600);
+  --pimp-foreground-error-secondary: var(--pimp-colors-red-400);
+  --pimp-foreground-error-secondary-hover: var(--pimp-colors-red-500);
+  --pimp-foreground-magenta-primary: var(--pimp-colors-magenta-500);
+  --pimp-foreground-magenta-primary-hover: var(--pimp-colors-magenta-600);
+  --pimp-foreground-magenta-secondary: var(--pimp-colors-magenta-400);
+  --pimp-foreground-magenta-secondary-hover: var(--pimp-colors-magenta-500);
+  --pimp-foreground-pink-primary: var(--pimp-colors-pink-500);
+  --pimp-foreground-pink-primary-hover: var(--pimp-colors-pink-600);
+  --pimp-foreground-pink-secondary: var(--pimp-colors-pink-400);
+  --pimp-foreground-pink-secondary-hover: var(--pimp-colors-pink-500);
+  --pimp-foreground-placeholder: var(--pimp-colors-grey-500);
+  --pimp-foreground-primary: var(--pimp-colors-grey-800);
+  --pimp-foreground-quaternary: var(--pimp-colors-grey-300);
+  --pimp-foreground-secondary: var(--pimp-colors-grey-600);
+  --pimp-foreground-secondary-hover: var(--pimp-colors-grey-800);
+  --pimp-foreground-success-primary: var(--pimp-colors-green-500);
+  --pimp-foreground-success-primary-hover: var(--pimp-colors-green-600);
+  --pimp-foreground-success-secondary: var(--pimp-colors-green-400);
+  --pimp-foreground-success-secondary-hover: var(--pimp-colors-green-500);
+  --pimp-foreground-tertiary: var(--pimp-colors-grey-500);
+  --pimp-foreground-warning-primary: var(--pimp-colors-orange-500);
+  --pimp-foreground-warning-primary-hover: var(--pimp-colors-orange-600);
+  --pimp-foreground-warning-secondary: var(--pimp-colors-orange-400);
+  --pimp-foreground-warning-secondary-hover: var(--pimp-colors-orange-500);
+  --pimp-foreground-white: var(--pimp-colors-white);
+  --pimp-foreground-yellow-primary: var(--pimp-colors-yellow-500);
+  --pimp-foreground-yellow-primary-hover: var(--pimp-colors-yellow-600);
+  --pimp-foreground-yellow-secondary: var(--pimp-colors-yellow-400);
+  --pimp-foreground-yellow-secondary-hover: var(--pimp-colors-yellow-500);
+
+  --pimp-text-accent-primary: var(--pimp-colors-violet-500);
+  --pimp-text-accent-primary-hover: var(--pimp-colors-violet-600);
+  --pimp-text-accent-secondary: var(--pimp-colors-violet-700);
+  --pimp-text-accent-secondary-hover: var(--pimp-colors-violet-800);
+  --pimp-text-blue-primary: var(--pimp-colors-blue-500);
+  --pimp-text-blue-primary-hover: var(--pimp-colors-blue-600);
+  --pimp-text-blue-secondary: var(--pimp-colors-blue-700);
+  --pimp-text-blue-secondary-hover: var(--pimp-colors-blue-800);
+  --pimp-text-disabled: var(--pimp-colors-grey-400);
+  --pimp-text-error-primary: var(--pimp-colors-red-500);
+  --pimp-text-error-primary-hover: var(--pimp-colors-red-600);
+  --pimp-text-error-secondary: var(--pimp-colors-red-700);
+  --pimp-text-error-secondary-hover: var(--pimp-colors-red-800);
+  --pimp-text-magenta-primary: var(--pimp-colors-magenta-500);
+  --pimp-text-magenta-primary-hover: var(--pimp-colors-magenta-600);
+  --pimp-text-magenta-secondary: var(--pimp-colors-magenta-700);
+  --pimp-text-magenta-secondary-hover: var(--pimp-colors-magenta-800);
+  --pimp-text-pink-primary: var(--pimp-colors-pink-500);
+  --pimp-text-pink-primary-hover: var(--pimp-colors-pink-600);
+  --pimp-text-pink-secondary: var(--pimp-colors-pink-700);
+  --pimp-text-pink-secondary-hover: var(--pimp-colors-pink-800);
+  --pimp-text-placeholder: var(--pimp-colors-grey-500);
+  --pimp-text-primary: var(--pimp-colors-grey-800);
+  --pimp-text-secondary: var(--pimp-colors-grey-600);
+  --pimp-text-secondary-hover: var(--pimp-colors-grey-800);
+  --pimp-text-success-primary: var(--pimp-colors-green-500);
+  --pimp-text-success-primary-hover: var(--pimp-colors-green-600);
+  --pimp-text-success-secondary: var(--pimp-colors-green-700);
+  --pimp-text-success-secondary-hover: var(--pimp-colors-green-800);
+  --pimp-text-tertiary: var(--pimp-colors-grey-500);
+  --pimp-text-warning-primary: var(--pimp-colors-orange-500);
+  --pimp-text-warning-primary-hover: var(--pimp-colors-orange-600);
+  --pimp-text-warning-secondary: var(--pimp-colors-orange-700);
+  --pimp-text-warning-secondary-hover: var(--pimp-colors-orange-800);
+  --pimp-text-white: var(--pimp-colors-white);
+  --pimp-text-yellow-primary: var(--pimp-colors-yellow-500);
+  --pimp-text-yellow-primary-hover: var(--pimp-colors-yellow-600);
+  --pimp-text-yellow-secondary: var(--pimp-colors-yellow-700);
+  --pimp-text-yellow-secondary-hover: var(--pimp-colors-yellow-800);
+
+  --pimp-utility-accent-100: var(--pimp-colors-violet-100);
+  --pimp-utility-accent-1000: var(--pimp-colors-violet-1000);
+  --pimp-utility-accent-200: var(--pimp-colors-violet-200);
+  --pimp-utility-accent-300: var(--pimp-colors-violet-300);
+  --pimp-utility-accent-400: var(--pimp-colors-violet-400);
+  --pimp-utility-accent-50: var(--pimp-colors-violet-50);
+  --pimp-utility-accent-500: var(--pimp-colors-violet-500);
+  --pimp-utility-accent-600: var(--pimp-colors-violet-600);
+  --pimp-utility-accent-700: var(--pimp-colors-violet-700);
+  --pimp-utility-accent-800: var(--pimp-colors-violet-800);
+  --pimp-utility-accent-900: var(--pimp-colors-violet-900);
+  --pimp-utility-blue-100: var(--pimp-colors-blue-100);
+  --pimp-utility-blue-1000: var(--pimp-colors-blue-1000);
+  --pimp-utility-blue-200: var(--pimp-colors-blue-200);
+  --pimp-utility-blue-300: var(--pimp-colors-blue-300);
+  --pimp-utility-blue-400: var(--pimp-colors-blue-400);
+  --pimp-utility-blue-50: var(--pimp-colors-blue-50);
+  --pimp-utility-blue-500: var(--pimp-colors-blue-500);
+  --pimp-utility-blue-600: var(--pimp-colors-blue-600);
+  --pimp-utility-blue-700: var(--pimp-colors-blue-700);
+  --pimp-utility-blue-800: var(--pimp-colors-blue-800);
+  --pimp-utility-blue-900: var(--pimp-colors-blue-900);
+  --pimp-utility-error-100: var(--pimp-colors-red-100);
+  --pimp-utility-error-1000: var(--pimp-colors-red-1000);
+  --pimp-utility-error-200: var(--pimp-colors-red-200);
+  --pimp-utility-error-300: var(--pimp-colors-red-300);
+  --pimp-utility-error-400: var(--pimp-colors-red-400);
+  --pimp-utility-error-50: var(--pimp-colors-red-50);
+  --pimp-utility-error-500: var(--pimp-colors-red-500);
+  --pimp-utility-error-600: var(--pimp-colors-red-600);
+  --pimp-utility-error-700: var(--pimp-colors-red-700);
+  --pimp-utility-error-800: var(--pimp-colors-red-800);
+  --pimp-utility-error-900: var(--pimp-colors-red-900);
+  --pimp-utility-magenta-100: var(--pimp-colors-magenta-100);
+  --pimp-utility-magenta-1000: var(--pimp-colors-magenta-1000);
+  --pimp-utility-magenta-200: var(--pimp-colors-magenta-200);
+  --pimp-utility-magenta-300: var(--pimp-colors-magenta-300);
+  --pimp-utility-magenta-400: var(--pimp-colors-magenta-400);
+  --pimp-utility-magenta-50: var(--pimp-colors-magenta-50);
+  --pimp-utility-magenta-500: var(--pimp-colors-magenta-500);
+  --pimp-utility-magenta-600: var(--pimp-colors-magenta-600);
+  --pimp-utility-magenta-700: var(--pimp-colors-magenta-700);
+  --pimp-utility-magenta-800: var(--pimp-colors-magenta-800);
+  --pimp-utility-magenta-900: var(--pimp-colors-magenta-900);
+  --pimp-utility-neutral-100: var(--pimp-colors-grey-100);
+  --pimp-utility-neutral-1000: var(--pimp-colors-grey-1000);
+  --pimp-utility-neutral-200: var(--pimp-colors-grey-200);
+  --pimp-utility-neutral-300: var(--pimp-colors-grey-300);
+  --pimp-utility-neutral-400: var(--pimp-colors-grey-400);
+  --pimp-utility-neutral-50: var(--pimp-colors-grey-50);
+  --pimp-utility-neutral-500: var(--pimp-colors-grey-500);
+  --pimp-utility-neutral-600: var(--pimp-colors-grey-600);
+  --pimp-utility-neutral-700: var(--pimp-colors-grey-700);
+  --pimp-utility-neutral-800: var(--pimp-colors-grey-800);
+  --pimp-utility-neutral-900: var(--pimp-colors-grey-900);
+  --pimp-utility-pink-100: var(--pimp-colors-pink-100);
+  --pimp-utility-pink-1000: var(--pimp-colors-pink-1000);
+  --pimp-utility-pink-200: var(--pimp-colors-pink-200);
+  --pimp-utility-pink-300: var(--pimp-colors-pink-300);
+  --pimp-utility-pink-400: var(--pimp-colors-pink-400);
+  --pimp-utility-pink-50: var(--pimp-colors-pink-50);
+  --pimp-utility-pink-500: var(--pimp-colors-pink-500);
+  --pimp-utility-pink-600: var(--pimp-colors-pink-600);
+  --pimp-utility-pink-700: var(--pimp-colors-pink-700);
+  --pimp-utility-pink-800: var(--pimp-colors-pink-800);
+  --pimp-utility-pink-900: var(--pimp-colors-pink-900);
+  --pimp-utility-success-100: var(--pimp-colors-green-100);
+  --pimp-utility-success-1000: var(--pimp-colors-green-1000);
+  --pimp-utility-success-200: var(--pimp-colors-green-200);
+  --pimp-utility-success-300: var(--pimp-colors-green-300);
+  --pimp-utility-success-400: var(--pimp-colors-green-400);
+  --pimp-utility-success-50: var(--pimp-colors-green-50);
+  --pimp-utility-success-500: var(--pimp-colors-green-500);
+  --pimp-utility-success-600: var(--pimp-colors-green-600);
+  --pimp-utility-success-700: var(--pimp-colors-green-700);
+  --pimp-utility-success-800: var(--pimp-colors-green-800);
+  --pimp-utility-success-900: var(--pimp-colors-green-900);
+  --pimp-utility-warning-100: var(--pimp-colors-orange-100);
+  --pimp-utility-warning-1000: var(--pimp-colors-orange-1000);
+  --pimp-utility-warning-200: var(--pimp-colors-orange-200);
+  --pimp-utility-warning-300: var(--pimp-colors-orange-300);
+  --pimp-utility-warning-400: var(--pimp-colors-orange-400);
+  --pimp-utility-warning-50: var(--pimp-colors-orange-50);
+  --pimp-utility-warning-500: var(--pimp-colors-orange-500);
+  --pimp-utility-warning-600: var(--pimp-colors-orange-600);
+  --pimp-utility-warning-700: var(--pimp-colors-orange-700);
+  --pimp-utility-warning-800: var(--pimp-colors-orange-800);
+  --pimp-utility-warning-900: var(--pimp-colors-orange-900);
+  --pimp-utility-yellow-100: var(--pimp-colors-yellow-100);
+  --pimp-utility-yellow-1000: var(--pimp-colors-yellow-1000);
+  --pimp-utility-yellow-200: var(--pimp-colors-yellow-200);
+  --pimp-utility-yellow-300: var(--pimp-colors-yellow-300);
+  --pimp-utility-yellow-400: var(--pimp-colors-yellow-400);
+  --pimp-utility-yellow-50: var(--pimp-colors-yellow-50);
+  --pimp-utility-yellow-500: var(--pimp-colors-yellow-500);
+  --pimp-utility-yellow-600: var(--pimp-colors-yellow-600);
+  --pimp-utility-yellow-700: var(--pimp-colors-yellow-700);
+  --pimp-utility-yellow-800: var(--pimp-colors-yellow-800);
+  --pimp-utility-yellow-900: var(--pimp-colors-yellow-900);
+
+  /** 
+  * DIMENSIONS
+  */
+
+  --pimp-breakpoint-2xl: var(--pimp-dimensions-384);
+  --pimp-breakpoint-lg: var(--pimp-dimensions-256);
+  --pimp-breakpoint-md: var(--pimp-dimensions-192);
+  --pimp-breakpoint-sm: var(--pimp-dimensions-160);
+  --pimp-breakpoint-xl: var(--pimp-dimensions-320);
+
+  --pimp-radius-2xl: var(--pimp-dimensions-6);
+  --pimp-radius-full: 2147483648; // BIGINT
+  --pimp-radius-lg: var(--pimp-dimensions-3);
+  --pimp-radius-md: var(--pimp-dimensions-2);
+  --pimp-radius-md-lg: var(--pimp-dimensions-2_5);
+  --pimp-radius-none: var(--pimp-dimensions-0);
+  --pimp-radius-sm: var(--pimp-dimensions-1);
+  --pimp-radius-sm-md: var(--pimp-dimensions-1_5);
+  --pimp-radius-xl: var(--pimp-dimensions-4);
+  --pimp-radius-xs: var(--pimp-dimensions-0_5);
+  --pimp-spacing-2xl: var(--pimp-dimensions-6);
+  --pimp-spacing-3xl: var(--pimp-dimensions-8);
+  --pimp-spacing-4xl: var(--pimp-dimensions-10);
+  --pimp-spacing-lg: var(--pimp-dimensions-3);
+  --pimp-spacing-md: var(--pimp-dimensions-2);
+  --pimp-spacing-none: var(--pimp-dimensions-0);
+  --pimp-spacing-sm: var(--pimp-dimensions-1);
+  --pimp-spacing-sm-md: var(--pimp-dimensions-1_5);
+  --pimp-spacing-xl: var(--pimp-dimensions-4);
+  --pimp-spacing-xs: var(--pimp-dimensions-0_5);
+  --pimp-width-2xs: var(--pimp-dimensions-2);
+  --pimp-width-lg: var(--pimp-dimensions-6);
+  --pimp-width-md: var(--pimp-dimensions-5);
+  --pimp-width-sm: var(--pimp-dimensions-4);
+  --pimp-width-xl: var(--pimp-dimensions-8);
+  --pimp-width-xs: var(--pimp-dimensions-3);
+
+  /**
+  * TYPO
+  */
+
+  --pimp-text-xs--pimp-font-normal: var(--pimp-size-xs);
+  --pimp-text-xs--pimp-font-normal--pimp-line-height: var(--pimp-line-height-xs);
+  --pimp-text-xs--pimp-font-normal--pimp-letter-spacing: var(--pimp-letter-spacing-xs);
+
+  --pimp-text-sm--pimp-font-normal: var(--pimp-size-sm);
+  --pimp-text-sm--pimp-font-normal--pimp-line-height: var(--pimp-line-height-sm);
+  --pimp-text-sm--pimp-font-normal--pimp-letter-spacing: var(--pimp-letter-spacing-sm);
+
+  --pimp-text-md--pimp-font-normal: var(--pimp-size-md);
+  --pimp-text-md--pimp-font-normal--pimp-line-height: var(--pimp-line-height-md);
+  --pimp-text-md--pimp-font-normal--pimp-letter-spacing: var(--pimp-letter-spacing-md);
+
+  --pimp-text-lg--pimp-font-normal: var(--pimp-size-lg);
+  --pimp-text-lg--pimp-font-normal--pimp-line-height: var(--pimp-line-height-lg);
+  --pimp-text-lg--pimp-font-normal--pimp-letter-spacing: var(--pimp-letter-spacing-lg);
+
+  --pimp-text-xl--pimp-font-normal: var(--pimp-size-xl);
+  --pimp-text-xl--pimp-font-normal--pimp-line-height: var(--pimp-line-height-xl);
+  --pimp-text-xl--pimp-font-normal--pimp-letter-spacing: var(--pimp-letter-spacing-xl);
+
+  --pimp-text-2xl--pimp-font-normal: var(--pimp-size-2xl);
+  --pimp-text-2xl--pimp-font-normal--pimp-line-height: var(--pimp-line-height-2xl);
+  --pimp-text-2xl--pimp-font-normal--pimp-letter-spacing: var(--pimp-letter-spacing-2xl);
+
+  --pimp-text-3xl--pimp-font-normal: var(--pimp-size-3xl);
+  --pimp-text-3xl--pimp-font-normal--pimp-line-height: var(--pimp-line-height-3xl);
+  --pimp-text-3xl--pimp-font-normal--pimp-letter-spacing: var(--pimp-letter-spacing-3xl);
+
+  --pimp-text-4xl--pimp-font-normal: var(--pimp-size-4xl);
+  --pimp-text-4xl--pimp-font-normal--pimp-line-height: var(--pimp-line-height-4xl);
+  --pimp-text-4xl--pimp-font-normal--pimp-letter-spacing: var(--pimp-letter-spacing-4xl);
+
+  --pimp-text-5xl--pimp-font-normal: var(--pimp-size-5xl);
+  --pimp-text-5xl--pimp-font-normal--pimp-line-height: var(--pimp-line-height-5xl);
+  --pimp-text-5xl--pimp-font-normal--pimp-letter-spacing: var(--pimp-letter-spacing-5xl);
+
+  --pimp-text-6xl--pimp-font-normal: var(--pimp-size-6xl);
+  --pimp-text-6xl--pimp-font-normal--pimp-line-height: var(--pimp-line-height-6xl);
+  --pimp-text-6xl--pimp-font-normal--pimp-letter-spacing: var(--pimp-letter-spacing-6xl);
+
+  --pimp-text-7xl--pimp-font-normal: var(--pimp-size-7xl);
+  --pimp-text-7xl--pimp-font-normal--pimp-line-height: var(--pimp-line-height-7xl);
+  --pimp-text-7xl--pimp-font-normal--pimp-letter-spacing: var(--pimp-letter-spacing-7xl);
+
+  --pimp-text-8xl--pimp-font-normal: var(--pimp-size-8xl);
+  --pimp-text-8xl--pimp-font-normal--pimp-line-height: var(--pimp-line-height-8xl);
+  --pimp-text-8xl--pimp-font-normal--pimp-letter-spacing: var(--pimp-letter-spacing-8xl);
+
+  --pimp-text-9xl--pimp-font-normal: var(--pimp-size-9xl);
+  --pimp-text-9xl--pimp-font-normal--pimp-line-height: var(--pimp-line-height-9xl);
+  --pimp-text-9xl--pimp-font-normal--pimp-letter-spacing: var(--pimp-letter-spacing-9xl);
+
+  /* monospace text-size styles */
+
+  --pimp-monospace-xs--pimp-font-light: var(--pimp-size-xs);
+  --pimp-monospace-xs--pimp-font-light--pimp-line-height: var(--pimp-line-height-xs);
+  --pimp-monospace-xs--pimp-font-light--pimp-letter-spacing: var(--pimp-letter-spacing-xs);
+
+  --pimp-monospace-sm--pimp-font-light: var(--pimp-size-sm);
+  --pimp-monospace-sm--pimp-font-light--pimp-line-height: var(--pimp-line-height-sm);
+  --pimp-monospace-sm--pimp-font-light--pimp-letter-spacing: var(--pimp-letter-spacing-sm);
+
+  --pimp-monospace-md--pimp-font-light: var(--pimp-size-md);
+  --pimp-monospace-md--pimp-font-light--pimp-line-height: var(--pimp-line-height-md);
+  --pimp-monospace-md--pimp-font-light--pimp-letter-spacing: var(--pimp-letter-spacing-md);
+
+  /**
+  * SHADOWS
+  */
+
+  --pimp-shadows--pimp-3xs: var(--pimp-drop-shadow-3xs-offset-x) var(--pimp-drop-shadow-3xs-offset-y)
+    var(--pimp-drop-shadow-3xs-blur) var(--pimp-drop-shadow-3xs-spread) var(--pimp-drop-shadow-3xs-color);
+  --pimp-shadows--pimp-2xs: var(--pimp-drop-shadow-2xs-offset-x) var(--pimp-drop-shadow-2xs-offset-y)
+    var(--pimp-drop-shadow-2xs-blur) var(--pimp-drop-shadow-2xs-spread) var(--pimp-drop-shadow-2xs-color);
+  --pimp-shadows--pimp-xs: var(--pimp-drop-shadow-xs-offset-x) var(--pimp-drop-shadow-xs-offset-y)
+    var(--pimp-drop-shadow-xs-blur) var(--pimp-drop-shadow-xs-spread) var(--pimp-drop-shadow-xs-color);
+  --pimp-shadows--pimp-sm: var(--pimp-drop-shadow-sm-offset-x) var(--pimp-drop-shadow-sm-offset-y)
+    var(--pimp-drop-shadow-sm-blur) var(--pimp-drop-shadow-sm-spread) var(--pimp-drop-shadow-sm-color);
+  --pimp-shadows--pimp-md: var(--pimp-drop-shadow-md-offset-x) var(--pimp-drop-shadow-md-offset-y)
+    var(--pimp-drop-shadow-md-blur) var(--pimp-drop-shadow-md-spread) var(--pimp-drop-shadow-md-color);
+  --pimp-shadows--pimp-lg: var(--pimp-drop-shadow-lg-offset-x) var(--pimp-drop-shadow-lg-offset-y)
+    var(--pimp-drop-shadow-lg-blur) var(--pimp-drop-shadow-lg-spread) var(--pimp-drop-shadow-lg-color);
+  --pimp-shadows--pimp-xl: var(--pimp-drop-shadow-xl-offset-x) var(--pimp-drop-shadow-xl-offset-y)
+    var(--pimp-drop-shadow-xl-blur) var(--pimp-drop-shadow-xl-spread) var(--pimp-drop-shadow-xl-color);
+  --pimp-shadows--pimp-side-panel: var(--pimp-drop-shadow-side-panel-offset-x)
+    var(--pimp-drop-shadow-side-panel-offset-y) var(--pimp-drop-shadow-side-panel-blur)
+    var(--pimp-drop-shadow-side-panel-spread) var(--pimp-drop-shadow-side-panel-color);
+
+  /* overlay shadows are multi-layered; keep linked to primitives */
+  --pimp-shadows--pimp-overlay:
+    var(--pimp-drop-shadow-overlay-1-offset-x) var(--pimp-drop-shadow-overlay-1-offset-y)
+      var(--pimp-drop-shadow-overlay-1-blur) var(--pimp-drop-shadow-overlay-1-spread)
+      var(--pimp-drop-shadow-overlay-1-color),
+    var(--pimp-drop-shadow-overlay-2-offset-x) var(--pimp-drop-shadow-overlay-2-offset-y)
+      var(--pimp-drop-shadow-overlay-2-blur) var(--pimp-drop-shadow-overlay-2-spread)
+      var(--pimp-drop-shadow-overlay-2-color),
+    var(--pimp-drop-shadow-overlay-3-offset-x) var(--pimp-drop-shadow-overlay-3-offset-y)
+      var(--pimp-drop-shadow-overlay-3-blur) var(--pimp-drop-shadow-overlay-3-spread)
+      var(--pimp-drop-shadow-overlay-3-color),
+    var(--pimp-drop-shadow-overlay-4-offset-x) var(--pimp-drop-shadow-overlay-4-offset-y)
+      var(--pimp-drop-shadow-overlay-4-blur) var(--pimp-drop-shadow-overlay-4-spread)
+      var(--pimp-drop-shadow-overlay-4-color),
+    var(--pimp-drop-shadow-overlay-5-offset-x) var(--pimp-drop-shadow-overlay-5-offset-y)
+      var(--pimp-drop-shadow-overlay-5-blur) var(--pimp-drop-shadow-overlay-5-spread)
+      var(--pimp-drop-shadow-overlay-5-color);
+}

package/src/components/CpTable.vue

@@ -124,7 +124,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, useId } from 'vue'
+import { ref, computed, useId, watch } from 'vue'
 
 import { CpTableColumnObject } from '@/constants/CpTableColumn'
 
@@ -136,9 +136,9 @@ import { camelize, decamelize } from '@/helpers/string'
 import { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from '@/constants'
 
 interface Emits {
-  (e: 'onRowClick', data: Record<string, unknown>): void
-  (e: 'onNextClick'): void
-  (e: 'onPreviousClick'): void
+  (evt: 'onRowClick', data: Record<string, unknown>): void
+  (evt: 'onNextClick' | 'onPreviousClick'): void
+  (evt: 'onColumnsChanged', columns: CpTableColumnObject[]): void
 }
 
 interface PaginationServer {
@@ -235,35 +235,42 @@ const containerDOMElement = computed(() => cpTableContainer.value)
 const mainClasses = computed(() => ({ 'cpTable--isLoading': props.isLoading }))
 const containerClasses = computed(() => ({ 'cpTable__container--hasPagination': hasPagination.value }))
 
+const formatColumns = (column: CpTableColumnObject | string) => {
+  if (typeof column === 'string') {
+    return {
+      id: camelize(column),
+      name: decamelize(column),
+      isHidden: false,
+    }
+  }
+
+  return {
+    ...column,
+    id: column.id || camelize(column.name),
+  }
+}
+
 const normalizedColumns = computed<CpTableColumnObject[]>(() => {
   if (!props.columns) return []
 
   const columns = props.columns.length ? [...props.columns] : [...columnsFromRows.value]
 
-  return columns.map((column) => {
-    if (typeof column === 'string') {
-      return {
-        id: camelize(column),
-        name: decamelize(column),
-        isHidden: false,
-      }
-    }
-
-    return {
-      ...column,
-      id: column.id || camelize(column.name),
-    }
-  })
+  return columns.map(formatColumns)
 })
 
-const visibleColumns = computed(() => normalizedColumns.value.filter(({ id }) => columnsModel.value.includes(id)))
-
 const getVisibleColumnsIds = () => {
   return normalizedColumns.value.filter(({ isHidden, isProtected }) => !isHidden || isProtected).map(({ id }) => id)
 }
 
 const columnsModel = ref<string[]>(getVisibleColumnsIds())
 
+watch(columnsModel, (newColumnsModel) => {
+  const newColumns = normalizedColumns.value.map((col) => ({ ...col, isHidden: !newColumnsModel.includes(col.id) }))
+  emit('onColumnsChanged', newColumns)
+})
+
+const visibleColumns = computed(() => normalizedColumns.value.filter(({ id }) => columnsModel.value.includes(id)))
+
 const numberOfColumns = computed(() => visibleColumns.value.length)
 
 const hasGroupBy = computed(() => {

package/src/stories/CpTable.stories.ts

@@ -1,3 +1,4 @@
+import { action } from 'storybook/actions'
 import { ref, computed } from 'vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
@@ -9,56 +10,6 @@ import { PAGINATION_FORMATS } from '@/constants'
 const meta = {
   title: 'CpTable',
   component: CpTable,
-  argTypes: {
-    caption: {
-      control: 'text',
-      description: 'Table caption for accessibility',
-    },
-    columns: {
-      control: 'object',
-      description: 'Array of column definitions',
-    },
-    data: {
-      control: 'object',
-      description: 'Array of data objects to display',
-    },
-    pagination: {
-      control: 'object',
-      description: 'Pagination configuration (boolean or object)',
-    },
-    areRowsClickable: {
-      control: 'boolean',
-      description: 'Whether rows can be clicked',
-    },
-    emptyCellPlaceholder: {
-      control: 'text',
-      description: 'Placeholder text for empty cells',
-    },
-    noResultPlaceholder: {
-      control: 'text',
-      description: 'Placeholder text when no results found',
-    },
-    isLoading: {
-      control: 'boolean',
-      description: 'Whether the table is in loading state',
-    },
-    enableRowOptions: {
-      control: 'boolean',
-      description: 'Whether to show row options menu',
-    },
-    rowOptions: {
-      control: 'object',
-      description: 'Array of row options to display',
-    },
-    quickOptionsLimit: {
-      control: 'number',
-      description: 'Maximum number of quick options to display before showing the more button',
-    },
-    onRowClick: { action: 'row-clicked' },
-    onRowRightClick: { action: 'row-right-clicked' },
-    onNextClick: { action: 'next-clicked' },
-    onPreviousClick: { action: 'previous-clicked' },
-  },
   parameters: {
     backgrounds: {
       default: 'dark',
@@ -96,6 +47,10 @@ export const Default: Story = {
     pagination: {
       enabled: true,
     },
+    onOnRowClick: action('on-row-click'),
+    onOnPreviousClick: action('on-previous-click'),
+    onOnNextClick: action('on-next-click'),
+    onOnColumnsChanged: action('on-columns-changed'),
   },
   render: (args) => ({
     components: { CpTable },