@citizenplane/pimp 9.13.7 → 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/assets/css/fonts.css

@@ -1,185 +0,0 @@
-/** Proxima Nova **/
-
-@font-face {
-  font-family: 'Proxima Nova';
-  src: url('../fonts/proxima_nova/proxima_nova_black.eot');
-  src:
-    url('../fonts/proxima_nova/proxima_nova_black.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/proxima_nova/proxima_nova_black.woff') format('woff'),
-    url('../fonts/proxima_nova/proxima_nova_black.svg#ProximaNova-Black') format('svg');
-  font-weight: 900;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Proxima Nova';
-  src: url('../fonts/proxima_nova/proxima_nova_bold.eot');
-  src:
-    url('../fonts/proxima_nova/proxima_nova_bold.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/proxima_nova/proxima_nova_bold.woff') format('woff'),
-    url('../fonts/proxima_nova/proxima_nova_bold.svg#ProximaNova-Bold') format('svg');
-  font-weight: 600;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Proxima Nova';
-  src: url('../fonts/proxima_nova/proxima_nova_demibold.eot');
-  src:
-    url('../fonts/proxima_nova/proxima_nova_demibold.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/proxima_nova/proxima_nova_demibold.woff') format('woff'),
-    url('../fonts/proxima_nova/proxima_nova_demibold.svg#ProximaNova-SemiBold') format('svg');
-  font-weight: 500;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Proxima Nova';
-  src: url('../fonts/proxima_nova/proxima_nova_regular.eot');
-  src:
-    url('../fonts/proxima_nova/proxima_nova_regular.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/proxima_nova/proxima_nova_regular.woff') format('woff'),
-    url('../fonts/proxima_nova/proxima_nova_regular.svg#ProximaNova-Regular') format('svg');
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'GTAmerica';
-  src:
-    url('../fonts/gt_america/GT-America-Standard-Ultra-Light.eot') format('eot'),
-    url('../fonts/gt_america/GT-America-Standard-Ultra-Light.woff') format('woff'),
-    url('../fonts/gt_america/GT-America-Standard-Ultra-Light.woff2') format('woff2');
-  font-weight: 100;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'GTAmerica';
-  src:
-    url('../fonts/gt_america/GT-America-Standard-Ultra-Light-Italic.eot') format('eot'),
-    url('../fonts/gt_america/GT-America-Standard-Ultra-Light-Italic.woff') format('woff'),
-    url('../fonts/gt_america/GT-America-Standard-Ultra-Light-Italic.woff2') format('woff2');
-  font-weight: 100;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'GTAmerica';
-  src:
-    url('../fonts/gt_america/GT-America-Standard-Light.eot') format('eot'),
-    url('../fonts/gt_america/GT-America-Standard-Light.woff') format('woff'),
-    url('../fonts/gt_america/GT-America-Standard-Light.woff2') format('woff2');
-  font-weight: 200;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'GTAmerica';
-  src:
-    url('../fonts/gt_america/GT-America-Standard-Light-Italic.eot') format('eot'),
-    url('../fonts/gt_america/GT-America-Standard-Light-Italic.woff') format('woff'),
-    url('../fonts/gt_america/GT-America-Standard-Light-Italic.woff2') format('woff2');
-  font-weight: 200;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'GTAmerica';
-  src:
-    url('../fonts/gt_america/GT-America-Standard-Thin.eot') format('eot'),
-    url('../fonts/gt_america/GT-America-Standard-Thin.woff') format('woff'),
-    url('../fonts/gt_america/GT-America-Standard-Thin.woff2') format('woff2');
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'GTAmerica';
-  src:
-    url('../fonts/gt_america/GT-America-Standard-Thin-Italic.eot') format('eot'),
-    url('../fonts/gt_america/GT-America-Standard-Thin-Italic.woff') format('woff'),
-    url('../fonts/gt_america/GT-America-Standard-Thin-Italic.woff2') format('woff2');
-  font-weight: 300;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'GTAmerica';
-  src:
-    url('../fonts/gt_america/GT-America-Standard-Regular.eot') format('eot'),
-    url('../fonts/gt_america/GT-America-Standard-Regular.woff') format('woff'),
-    url('../fonts/gt_america/GT-America-Standard-Regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'GTAmerica';
-  src:
-    url('../fonts/gt_america/GT-America-Standard-Regular-Italic.eot') format('eot'),
-    url('../fonts/gt_america/GT-America-Standard-Regular-Italic.woff') format('woff'),
-    url('../fonts/gt_america/GT-America-Standard-Regular-Italic.woff2') format('woff2');
-  font-weight: 400;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'GTAmerica';
-  src:
-    url('../fonts/gt_america/GT-America-Standard-Medium.eot') format('eot'),
-    url('../fonts/gt_america/GT-America-Standard-Medium.woff') format('woff'),
-    url('../fonts/gt_america/GT-America-Standard-Medium.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'GTAmerica';
-  src:
-    url('../fonts/gt_america/GT-America-Standard-Medium-Italic.eot') format('eot'),
-    url('../fonts/gt_america/GT-America-Standard-Medium-Italic.woff') format('woff'),
-    url('../fonts/gt_america/GT-America-Standard-Medium-Italic.woff2') format('woff2');
-  font-weight: 500;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'GTAmerica';
-  src:
-    url('../fonts/gt_america/GT-America-Standard-Bold.eot') format('eot'),
-    url('../fonts/gt_america/GT-America-Standard-Bold.woff') format('woff'),
-    url('../fonts/gt_america/GT-America-Standard-Bold.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'GTAmerica';
-  src:
-    url('../fonts/gt_america/GT-America-Standard-Bold-Italic.eot') format('eot'),
-    url('../fonts/gt_america/GT-America-Standard-Bold-Italic.woff') format('woff'),
-    url('../fonts/gt_america/GT-America-Standard-Bold-Italic.woff2') format('woff2');
-  font-weight: 700;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'GTAmerica';
-  src:
-    url('../fonts/gt_america/GT-America-Standard-Black.eot') format('eot'),
-    url('../fonts/gt_america/GT-America-Standard-Black.woff') format('woff'),
-    url('../fonts/gt_america/GT-America-Standard-Black.woff2') format('woff2');
-  font-weight: 900;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'GTAmerica';
-  src:
-    url('../fonts/gt_america/GT-America-Standard-Black-Italic.eot') format('eot'),
-    url('../fonts/gt_america/GT-America-Standard-Black-Italic.woff') format('woff'),
-    url('../fonts/gt_america/GT-America-Standard-Black-Italic.woff2') format('woff2');
-  font-weight: 900;
-  font-style: italic;
-}