@citizenplane/pimp 9.13.7 → 9.14.1

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

@@ -17,10 +17,10 @@
         <thead class="cpTable__header">
           <tr class="cpTable__row cpTable__row--header">
             <th
-              v-for="column in visibleColumns"
+              v-for="(column, index) in visibleColumns"
               :key="column.id"
               class="cpTable__column"
-              :style="getColumnStyle(column)"
+              :style="getColumnStyle(column, index)"
             >
               <slot :column="column" name="column">
                 {{ column.name }}
@@ -200,6 +200,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
+const FULL_WIDTH_SIZE = 1000
+
 const LoaderColor = '#5341F9'
 
 const uniqueId = useId()
@@ -262,10 +264,25 @@ const getVisibleColumnsIds = () => {
   return normalizedColumns.value.filter(({ isHidden, isProtected }) => !isHidden || isProtected).map(({ id }) => id)
 }
 
+const fullWidthColumn = computed(() => normalizedColumns.value.find(({ isFull }) => isFull))
+
+const hasAFullWidthColumnVisible = computed(() => {
+  if (!fullWidthColumn.value) return false
+  return columnsModel.value.includes(fullWidthColumn.value.id)
+})
+
+const isLastColumn = (idx: number) => idx === visibleColumns.value.length - 1
+
 const columnsModel = ref<string[]>(getVisibleColumnsIds())
 
 watch(columnsModel, (newColumnsModel) => {
-  const newColumns = normalizedColumns.value.map((col) => ({ ...col, isHidden: !newColumnsModel.includes(col.id) }))
+  const newColumns = normalizedColumns.value.map((col) => {
+    return {
+      ...col,
+      isHidden: !newColumnsModel.includes(col.id),
+    }
+  })
+
   emit('onColumnsChanged', newColumns)
 })
 
@@ -481,12 +498,18 @@ const resetScrollPosition = () => {
   }
 }
 
-const getColumnStyle = (columnPayload: CpTableColumnObject) => {
-  const formattedWidth = columnPayload?.width && `${columnPayload.width}px`
+const getColumnStyle = (column: CpTableColumnObject, idx: number) => {
+  let width: string | undefined
+
+  if (!hasAFullWidthColumnVisible.value && isLastColumn(idx)) {
+    width = `${FULL_WIDTH_SIZE}px`
+  } else if (column.width) {
+    width = `${column.width}px`
+  }
 
   return {
-    width: formattedWidth,
-    textAlign: columnPayload.textAlign,
+    width,
+    textAlign: column.textAlign,
   }
 }
 

package/src/constants/CpTableColumn.ts

@@ -1,5 +1,6 @@
 export interface CpTableColumnObject {
   id: string
+  isFull?: boolean
   isHidden?: boolean
   isProtected?: boolean
   name: string

package/src/stories/CpTable.stories.ts

@@ -14,6 +14,7 @@ const meta = {
     backgrounds: {
       default: 'dark',
     },
+    layout: 'padded',
   },
   decorators: [
     () => ({ template: '<div style="padding: 20px; border-radius: 8px; background-color: #fff;"><story/></div>' }),
@@ -66,26 +67,13 @@ export const Default: Story = {
 }
 
 export const EnableColumnEdition: Story = {
-  args: {
-    ...Default.args,
-    columns: [
-      { id: 'name', name: 'Name' },
-      { id: 'age', name: 'Age' },
-      { id: 'email', name: 'Email' },
-      { id: 'status', name: 'Status' },
-    ],
-    enableColumnEdition: true,
-  },
-}
-
-export const EnableColumnEditionWithDefault: Story = {
   args: {
     ...Default.args,
     columns: [
       { id: 'name', name: 'Name', isProtected: true },
       { id: 'age', name: 'Age', isHidden: true, isProtected: true },
       { id: 'email', name: 'Email', isHidden: false },
-      { id: 'status', name: 'Status' },
+      { id: 'status', name: 'Status', isFull: true },
     ],
     enableColumnEdition: true,
   },