From 2e439d43c0f28050f52bcb42ba7dfd5431aac41b Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Fri, 13 Dec 2024 14:29:53 +0200
Subject: [PATCH 1/3] feat(dashboard): design system tokens

---
 apps/dashboard/src/index.css      | 289 +++++++++++++++++-
 apps/dashboard/tailwind.config.js | 466 +++++++++++++++++++++++++++++-
 2 files changed, 728 insertions(+), 27 deletions(-)

diff --git a/apps/dashboard/src/index.css b/apps/dashboard/src/index.css
index c2eef11e4a2..a19dc9a225e 100644
--- a/apps/dashboard/src/index.css
+++ b/apps/dashboard/src/index.css
@@ -3,6 +3,23 @@
 @tailwind utilities;
 @layer base {
   :root {
+    --gray-0: 210 10% 100%;
+    --gray-50: 0 0% 98%;
+    --gray-100: 210 30% 96%;
+    --gray-200: 220 18% 90%;
+    --gray-300: 219 15% 82%;
+    --gray-400: 220 11% 64%;
+    --gray-500: 221 8% 48%;
+    --gray-600: 222 11% 36%;
+    --gray-700: 221 16% 20%;
+    --gray-800: 227 17% 16%;
+    --gray-900: 226 21% 12%;
+    --gray-950: 222 32% 8%;
+
+    --gray-alpha-24: 220 11% 64% / 24%;
+    --gray-alpha-16: 220 11% 64% / 16%;
+    --gray-alpha-10: 220 11% 64% / 10%;
+
     --background: 0 0% 100%;
 
     --foreground-0: 210 10% 100%;
@@ -18,7 +35,27 @@
     --foreground-900: 226 21% 12%;
     --foreground-950: 222 32% 8%;
 
-    --primary: 346 73% 50%;
+    --novu-800: 346 72% 42%;
+    --novu-700: 346 70% 50%;
+    --novu-500: 346 73% 50%;
+    --novu-400: 346 73% 50% / 0.8;
+    --novu-300: 346 73% 50% / 0.6;
+    --novu-200: 346 73% 50% / 0.4;
+    --novu-100: 346 73% 50% / 0.2;
+    --novu-50: 346 73% 50% / 0.1;
+
+    --novu-alpha-24: 346 73% 50% / 24%;
+    --novu-alpha-16: 346 73% 50% / 16%;
+    --novu-alpha-10: 346 73% 50% / 10%;
+
+    --primary: var(--novu-500);
+    --primary-dark: var(--novu-800);
+    --primary-darker: var(--novu-700);
+    --primary-base: var(--novu-500);
+    --primary-alpha-24: var(--novu-alpha-24);
+    --primary-alpha-16: var(--novu-alpha-16);
+    --primary-alpha-10: var(--novu-alpha-10);
+
     --primary-foreground: 0 0% 100%;
 
     --neutral-0: 210 10% 100%;
@@ -37,6 +74,10 @@
     --neutral-foreground: 0 0% 100%;
 
     /* Neutral scale in alpha that looks the same on white background */
+    --neutral-alpha-24: var(--neutral-alpha-24);
+    --neutral-alpha-16: var(--neutral-alpha-16);
+    --neutral-alpha-10: var(--neutral-alpha-10);
+
     --neutral-alpha-50: 0 0% 69% / 0.05;
     --neutral-alpha-100: 210 30% 61% / 0.1;
     --neutral-alpha-200: 220 18% 50% / 0.2;
@@ -49,33 +90,253 @@
     --neutral-alpha-900: 231 100% 3% / 0.9;
     --neutral-alpha-950: 219 88% 3% / 0.95;
 
-    --accent: 0 0% 96.1%;
+    --blue-950: 228 70% 24%;
+    --blue-500: 227.94 100% 60%;
+    --blue-400: 222.12 100% 70.39%;
+    --blue-300: 219.81 100% 79.61%;
+    --blue-200: 220 100% 87.65%;
+    --blue-100: 221.43 100% 91.76%;
+    --blue-50: 222 100% 96.08%;
 
-    --destructive: 355 96% 60%;
-    --destructive-foreground: 0 0% 100%;
+    --blue-alpha-24: 228 100% 64% / 24%;
+    --blue-alpha-16: 228 100% 64% / 16%;
+    --blue-alpha-10: 228 100% 64% / 10%;
+
+    --orange-950: 20 70% 24%;
+    --orange-900: 20 71% 32%;
+    --orange-800: 20 70% 40%;
+    --orange-700: 20 69% 48%;
+    --orange-600: 20 80% 56%;
+    --orange-500: 20 100% 64%;
+    --orange-300: 20 100% 64% / 60%;
+    --orange-200: 20 100% 64% / 40%;
+    --orange-100: 20 100% 64% / 20%;
+    --orange-50: 20 100% 64% / 10%;
+
+    --orange-alpha-24: 20 100% 64% / 24%;
+    --orange-alpha-16: 20 100% 64% / 16%;
+    --orange-alpha-10: 20 100% 64% / 10%;
+
+    --red-950: 355 70% 24%;
+    --red-900: 355 71% 32%;
+    --red-800: 355 70% 40%;
+    --red-700: 355 70% 48%;
+    --red-600: 355 80% 56%;
+    --red-500: 355 96% 60%;
+    --red-400: 355 96% 60% / 80%;
+    --red-300: 355 96% 60% / 60%;
+    --red-200: 355 96% 60% / 40%;
+    --red-100: 355 96% 60% / 20%;
+    --red-50: 355 96% 60% / 10%;
+
+    --red-alpha-24: 355 96% 60% / 24%;
+    --red-alpha-16: 355 96% 60% / 16%;
+    --red-alpha-10: 355 96% 60% / 10%;
+
+    --green-950: 148 73% 16%;
+    --green-900: 148 64% 24%;
+    --green-800: 148 64% 28%;
+    --green-700: 148 72% 32%;
+    --green-600: 148 72% 40%;
+    --green-500: 148 72% 44%;
+    --green-400: 148 72% 44% / 80%;
+    --green-300: 148 72% 44% / 60%;
+    --green-200: 148 72% 44% / 40%;
+    --green-100: 148 72% 44% / 20%;
+    --green-50: 148 72% 44% / 10%;
+
+    --green-alpha-24: 148 72% 44% / 24%;
+    --green-alpha-16: 148 72% 44% / 16%;
+    --green-alpha-10: 148 72% 44% / 10%;
+
+    --yellow-950: 42 61% 24%;
+    --yellow-900: 42 64% 32%;
+    --yellow-800: 42 64% 40%;
+    --yellow-700: 42 64% 48%;
+    --yellow-600: 42 80% 50%;
+    --yellow-500: 42 92% 54%;
+    --yellow-400: 42 92% 54% / 80%;
+    --yellow-300: 42 92% 54% / 60%;
+    --yellow-200: 42 92% 54% / 40%;
+    --yellow-100: 42 92% 54% / 20%;
+    --yellow-50: 42 92% 54% / 10%;
+
+    --yellow-alpha-24: 42 92% 64% / 24%;
+    --yellow-alpha-16: 42 92% 64% / 16%;
+    --yellow-alpha-10: 42 92% 64% / 10%;
+
+    --purple-950: 258 64% 28%;
+    --purple-900: 258 64% 32%;
+    --purple-800: 258 64% 40%;
+    --purple-700: 258 64% 48%;
+    --purple-600: 256 72% 56%;
+    --purple-500: 256 88% 64%;
+    --purple-400: 256 88% 64% / 80%;
+    --purple-300: 256 88% 64% / 60%;
+    --purple-200: 256 88% 64% / 40%;
+    --purple-100: 256 88% 64% / 20%;
+    --purple-50: 256 88% 64% / 10%;
+
+    --purple-alpha-24: 256 84% 62% / 24%;
+    --purple-alpha-16: 256 84% 62% / 16%;
+    --purple-alpha-10: 256 84% 62% / 10%;
+
+    --sky-950: 200 70% 24%;
+    --sky-900: 200 71% 32%;
+    --sky-800: 200 70% 40%;
+    --sky-700: 200 70% 48%;
+    --sky-600: 200 80% 56%;
+    --sky-500: 200 100% 64%;
+    --sky-400: 200 100% 64% / 80%;
+    --sky-300: 200 100% 64% / 60%;
+    --sky-200: 200 100% 64% / 40%;
+    --sky-100: 200 100% 64% / 20%;
+    --sky-50: 200 100% 64% / 10%;
+
+    --sky-alpha-24: 200 100% 64% / 24%;
+    --sky-alpha-16: 200 100% 64% / 16%;
+    --sky-alpha-10: 200 100% 64% / 10%;
 
-    --success: 148 72% 44%;
+    --pink-950: 330 70% 24%;
+    --pink-900: 330 71% 32%;
+    --pink-800: 330 70% 40%;
+    --pink-700: 330 70% 48%;
+    --pink-600: 330 80% 56%;
+    --pink-500: 330 96% 64%;
+    --pink-400: 330 96% 64% / 80%;
+    --pink-300: 330 96% 64% / 60%;
+    --pink-200: 330 96% 64% / 40%;
+    --pink-100: 330 96% 64% / 20%;
+    --pink-50: 330 96% 64% / 10%;
 
-    --warning: 20 100% 64%;
+    --pink-alpha-24: 330 96% 64% / 24%;
+    --pink-alpha-16: 330 96% 64% / 16%;
+    --pink-alpha-10: 330 96% 64% / 10%;
 
-    --feature: 256 88% 64%;
+    --teal-950: 172 73% 16%;
+    --teal-900: 172 64% 24%;
+    --teal-800: 172 64% 28%;
+    --teal-700: 172 72% 32%;
+    --teal-600: 172 72% 40%;
+    --teal-500: 172 72% 48%;
+    --teal-400: 172 72% 48% / 80%;
+    --teal-300: 172 72% 48% / 60%;
+    --teal-200: 172 72% 48% / 40%;
+    --teal-100: 172 72% 48% / 20%;
+    --teal-50: 172 72% 48% / 10%;
 
-    --information: 228 100% 60%;
+    --teal-alpha-24: 172 72% 48% / 24%;
+    --teal-alpha-16: 172 72% 48% / 16%;
+    --teal-alpha-10: 172 72% 48% / 10%;
 
-    --highlighted: 330 96% 64%;
+    --white-alpha-24: 0 0% 100% / 24%;
+    --white-alpha-16: 0 0% 100% / 16%;
+    --white-alpha-10: 0 0% 100% / 10%;
 
-    --stable: 172 72% 48%;
+    --black-alpha-24: 222 32% 8% / 24%;
+    --black-alpha-16: 222 32% 8% / 16%;
+    --black-alpha-10: 222 32% 8% / 10%;
 
-    --alert: 42 92% 54%;
+    /* Misc */
 
-    --verified: 200 100% 64%;
+    --static-black: var(--neutral-950);
+    --static-white: var(--neutral-0);
 
-    --input: 220 18% 90%;
-    --ring: 346 73% 50%;
+    --bg-strong: var(--neutral-950);
+    --bg-surface: var(--neutral-800);
+    --bg-sub: var(--neutral-300);
+    --bg-soft: var(--neutral-200);
+    --bg-weak: var(--neutral-50);
+    --bg-white: var(--neutral-0);
+
+    --text-strong: var(--neutral-950);
+    --text-sub: var(--neutral-600);
+    --text-soft: var(--neutral-400);
+    --text-disabled: var(--neutral-300);
+    --text-white: var(--neutral-0);
+
+    --icon-strong: var(--neutral-950);
+    --icon-sub: var(--neutral-600);
+    --icon-soft: var(--neutral-400);
+    --icon-disabled: var(--neutral-300);
+    --icon-white: var(--neutral-0);
+
+    --stroke-strong: var(--neutral-950);
+    --stroke-sub: var(--neutral-300);
+    --stroke-soft: var(--neutral-200);
+    --stroke-white: var(--neutral-0);
+
+    --faded-dark: var(--neutral-800);
+    --faded-base: var(--neutral-500);
+    --faded-light: var(--neutral-200);
+    --faded-lighter: var(--neutral-100);
+
+    --information: var(--blue-500);
+    --information-dark: var(--blue-950);
+    --information-base: var(--blue-500);
+    --information-light: var(--blue-200);
+    --information-lighter: var(--blue-50);
+
+    --warning: var(--orange-500);
+    --warning-dark: var(--orange-950);
+    --warning-base: var(--orange-500);
+    --warning-light: var(--orange-200);
+    --warning-lighter: var(--orange-50);
+
+    --error-dark: var(--red-950);
+    --error-base: var(--red-500);
+    --error-light: var(--red-200);
+    --error-lighter: var(--red-50);
+
+    --success: var(--green-500);
+    --success-dark: var(--green-950);
+    --success-base: var(--green-500);
+    --success-light: var(--green-200);
+    --success-lighter: var(--green-50);
+
+    --away-dark: var(--yellow-950);
+    --away-base: var(--yellow-500);
+    --away-light: var(--yellow-200);
+    --away-lighter: var(--yellow-50);
+
+    --feature: var(--purple-500);
+    --feature-dark: var(--purple-950);
+    --feature-base: var(--purple-500);
+    --feature-light: var(--purple-200);
+    --feature-lighter: var(--purple-50);
+
+    --verified: var(--sky-500);
+    --verified-dark: var(--sky-950);
+    --verified-base: var(--sky-500);
+    --verified-light: var(--sky-200);
+    --verified-lighter: var(--sky-50);
+
+    --highlighted: var(--pink-500);
+    --highlighted-dark: var(--pink-950);
+    --highlighted-base: var(--pink-500);
+    --highlighted-light: var(--pink-200);
+    --highlighted-lighter: var(--pink-50);
+
+    --stable: var(--teal-500);
+    --stable-dark: var(--teal-950);
+    --stable-base: var(--teal-500);
+    --stable-light: var(--teal-200);
+    --stable-lighter: var(--teal-50);
+
+    --accent: 0 0% 96.1%;
+
+    --destructive: var(--red-500);
+    --destructive-foreground: 0 0% 100%;
+
+    --alert: var(--yellow-500);
+
+    --input: var(--neutral-200);
+    --ring: var(--novu-500);
 
     --radius: 0.5rem;
   }
 }
+
 @layer base {
   * {
     @apply border-neutral-alpha-200 focus-visible:outline-primary;
diff --git a/apps/dashboard/tailwind.config.js b/apps/dashboard/tailwind.config.js
index 1809d3f63c7..94c736fb0b7 100644
--- a/apps/dashboard/tailwind.config.js
+++ b/apps/dashboard/tailwind.config.js
@@ -1,20 +1,367 @@
 /** @type {import('tailwindcss').Config} */
+
+export const texts = {
+  'title-h1': [
+    '3.5rem',
+    {
+      lineHeight: '4rem',
+      letterSpacing: '-0.035em',
+      fontWeight: '500',
+    },
+  ],
+  'title-h2': [
+    '3rem',
+    {
+      lineHeight: '3.5rem',
+      letterSpacing: '-0.035em',
+      fontWeight: '500',
+    },
+  ],
+  'title-h3': [
+    '2.5rem',
+    {
+      lineHeight: '3rem',
+      letterSpacing: '-0.035em',
+      fontWeight: '500',
+    },
+  ],
+  'title-h4': [
+    '2rem',
+    {
+      lineHeight: '2.5rem',
+      letterSpacing: '-0.01em',
+      fontWeight: '500',
+    },
+  ],
+  'title-h5': [
+    '1.5rem',
+    {
+      lineHeight: '2rem',
+      letterSpacing: '0em',
+      fontWeight: '500',
+    },
+  ],
+  'title-h6': [
+    '1.25rem',
+    {
+      lineHeight: '1.75rem',
+      letterSpacing: '0em',
+      fontWeight: '500',
+    },
+  ],
+  'label-xl': [
+    '1.5rem',
+    {
+      lineHeight: '2rem',
+      letterSpacing: '-0.0225em',
+      fontWeight: '500',
+    },
+  ],
+  'label-lg': [
+    '1.125rem',
+    {
+      lineHeight: '1.5rem',
+      letterSpacing: '-0.0225em',
+      fontWeight: '500',
+    },
+  ],
+  'label-md': [
+    '1rem',
+    {
+      lineHeight: '1.5rem',
+      letterSpacing: '-0.011em',
+      fontWeight: '500',
+    },
+  ],
+  'label-sm': [
+    '.875rem',
+    {
+      lineHeight: '1.25rem',
+      letterSpacing: '-0.00525em',
+      fontWeight: '500',
+    },
+  ],
+  'label-xs': [
+    '.75rem',
+    {
+      lineHeight: '1rem',
+      letterSpacing: '0em',
+      fontWeight: '500',
+    },
+  ],
+  'paragraph-xl': [
+    '1.5rem',
+    {
+      lineHeight: '2rem',
+      letterSpacing: '-0.0225em',
+      fontWeight: '400',
+    },
+  ],
+  'paragraph-lg': [
+    '1.125rem',
+    {
+      lineHeight: '1.5rem',
+      letterSpacing: '-0.016875em',
+      fontWeight: '400',
+    },
+  ],
+  'paragraph-md': [
+    '1rem',
+    {
+      lineHeight: '1.5rem',
+      letterSpacing: '-0.011em',
+      fontWeight: '400',
+    },
+  ],
+  'paragraph-sm': [
+    '.875rem',
+    {
+      lineHeight: '1.25rem',
+      letterSpacing: '-0.00525em',
+      fontWeight: '400',
+    },
+  ],
+  'paragraph-xs': [
+    '.75rem',
+    {
+      lineHeight: '1rem',
+      letterSpacing: '0em',
+      fontWeight: '400',
+    },
+  ],
+  'subheading-md': [
+    '1rem',
+    {
+      lineHeight: '1.5rem',
+      letterSpacing: '0.06em',
+      fontWeight: '500',
+    },
+  ],
+  'subheading-sm': [
+    '.875rem',
+    {
+      lineHeight: '1.25rem',
+      letterSpacing: '0.05em',
+      fontWeight: '500',
+    },
+  ],
+  'subheading-xs': [
+    '.75rem',
+    {
+      lineHeight: '1rem',
+      letterSpacing: '0.03em',
+      fontWeight: '500',
+    },
+  ],
+  'subheading-2xs': [
+    '.6875rem',
+    {
+      lineHeight: '.75rem',
+      letterSpacing: '0.01375em',
+      fontWeight: '500',
+    },
+  ],
+  'code-sm': [
+    '0.75rem',
+    {
+      lineHeight: '1rem',
+      letterSpacing: '-0.015em',
+      fontWeight: '500',
+    },
+  ],
+};
+
+export const shadows = {
+  xs: '0px 1px 2px 0px rgba(10, 13, 20, 0.03)',
+  sm: '0px 1px 2px 0px #1018280F,0px 1px 3px 0px #1018281A',
+  md: '0px 16px 32px -12px rgba(14, 18, 27, 0.10)',
+  DEFAULT: '0px 16px 32px -12px #0E121B1A',
+};
+
 export default {
   darkMode: ['class'],
   content: ['./index.html', './src/**/*.{ts,tsx}'],
   theme: {
     boxShadow: {
-      xs: '0px 1px 2px 0px rgba(10, 13, 20, 0.03)',
-      sm: '0px 1px 2px 0px #1018280F,0px 1px 3px 0px #1018281A',
-      md: '0px 16px 32px -12px rgba(14, 18, 27, 0.10)',
-      DEFAULT: '0px 16px 32px -12px #0E121B1A',
+      ...shadows,
     },
 
     colors: {
-      black: 'black',
-      white: 'white',
+      white: {
+        DEFAULT: '#fff',
+        'alpha-24': 'hsl(var(--white-alpha-24))',
+        'alpha-16': 'hsl(var(--white-alpha-16))',
+        'alpha-10': 'hsl(var(--white-alpha-10))',
+      },
+      black: {
+        DEFAULT: '#000',
+        'alpha-24': 'hsl(var(--black-alpha-24))',
+        'alpha-16': 'hsl(var(--black-alpha-16))',
+        'alpha-10': 'hsl(var(--black-alpha-10))',
+      },
       transparent: 'transparent',
       background: 'hsl(var(--background))',
+      gray: {
+        0: 'hsl(var(--gray-0))',
+        50: 'hsl(var(--gray-50))',
+        100: 'hsl(var(--gray-100))',
+        200: 'hsl(var(--gray-200))',
+        300: 'hsl(var(--gray-300))',
+        400: 'hsl(var(--gray-400))',
+        500: 'hsl(var(--gray-500))',
+        600: 'hsl(var(--gray-600))',
+        700: 'hsl(var(--gray-700))',
+        800: 'hsl(var(--gray-800))',
+        900: 'hsl(var(--gray-900))',
+        950: 'hsl(var(--gray-950))',
+        'alpha-24': 'hsl(var(--gray-alpha-24))',
+        'alpha-16': 'hsl(var(--gray-alpha-16))',
+        'alpha-10': 'hsl(var(--gray-alpha-10))',
+      },
+      blue: {
+        50: 'hsl(var(--blue-50))',
+        100: 'hsl(var(--blue-100))',
+        200: 'hsl(var(--blue-200))',
+        300: 'hsl(var(--blue-300))',
+        400: 'hsl(var(--blue-400))',
+        500: 'hsl(var(--blue-500))',
+        600: 'hsl(var(--blue-600))',
+        700: 'hsl(var(--blue-700))',
+        800: 'hsl(var(--blue-800))',
+        900: 'hsl(var(--blue-900))',
+        950: 'hsl(var(--blue-950))',
+        'alpha-24': 'hsl(var(--blue-alpha-24))',
+        'alpha-16': 'hsl(var(--blue-alpha-16))',
+        'alpha-10': 'hsl(var(--blue-alpha-10))',
+      },
+      orange: {
+        50: 'hsl(var(--orange-50))',
+        100: 'hsl(var(--orange-100))',
+        200: 'hsl(var(--orange-200))',
+        300: 'hsl(var(--orange-300))',
+        400: 'hsl(var(--orange-400))',
+        500: 'hsl(var(--orange-500))',
+        600: 'hsl(var(--orange-600))',
+        700: 'hsl(var(--orange-700))',
+        800: 'hsl(var(--orange-800))',
+        900: 'hsl(var(--orange-900))',
+        950: 'hsl(var(--orange-950))',
+        'alpha-24': 'hsl(var(--orange-alpha-24))',
+        'alpha-16': 'hsl(var(--orange-alpha-16))',
+        'alpha-10': 'hsl(var(--orange-alpha-10))',
+      },
+      red: {
+        50: 'hsl(var(--red-50))',
+        100: 'hsl(var(--red-100))',
+        200: 'hsl(var(--red-200))',
+        300: 'hsl(var(--red-300))',
+        400: 'hsl(var(--red-400))',
+        500: 'hsl(var(--red-500))',
+        600: 'hsl(var(--red-600))',
+        700: 'hsl(var(--red-700))',
+        800: 'hsl(var(--red-800))',
+        900: 'hsl(var(--red-900))',
+        950: 'hsl(var(--red-950))',
+        'alpha-24': 'hsl(var(--red-alpha-24))',
+        'alpha-16': 'hsl(var(--red-alpha-16))',
+        'alpha-10': 'hsl(var(--red-alpha-10))',
+      },
+      green: {
+        50: 'hsl(var(--green-50))',
+        100: 'hsl(var(--green-100))',
+        200: 'hsl(var(--green-200))',
+        300: 'hsl(var(--green-300))',
+        400: 'hsl(var(--green-400))',
+        500: 'hsl(var(--green-500))',
+        600: 'hsl(var(--green-600))',
+        700: 'hsl(var(--green-700))',
+        800: 'hsl(var(--green-800))',
+        900: 'hsl(var(--green-900))',
+        950: 'hsl(var(--green-950))',
+        'alpha-24': 'hsl(var(--green-alpha-24))',
+        'alpha-16': 'hsl(var(--green-alpha-16))',
+        'alpha-10': 'hsl(var(--green-alpha-10))',
+      },
+      yellow: {
+        50: 'hsl(var(--yellow-50))',
+        100: 'hsl(var(--yellow-100))',
+        200: 'hsl(var(--yellow-200))',
+        300: 'hsl(var(--yellow-300))',
+        400: 'hsl(var(--yellow-400))',
+        500: 'hsl(var(--yellow-500))',
+        600: 'hsl(var(--yellow-600))',
+        700: 'hsl(var(--yellow-700))',
+        800: 'hsl(var(--yellow-800))',
+        900: 'hsl(var(--yellow-900))',
+        950: 'hsl(var(--yellow-950))',
+        'alpha-24': 'hsl(var(--yellow-alpha-24))',
+        'alpha-16': 'hsl(var(--yellow-alpha-16))',
+        'alpha-10': 'hsl(var(--yellow-alpha-10))',
+      },
+      purple: {
+        50: 'hsl(var(--purple-50))',
+        100: 'hsl(var(--purple-100))',
+        200: 'hsl(var(--purple-200))',
+        300: 'hsl(var(--purple-300))',
+        400: 'hsl(var(--purple-400))',
+        500: 'hsl(var(--purple-500))',
+        600: 'hsl(var(--purple-600))',
+        700: 'hsl(var(--purple-700))',
+        800: 'hsl(var(--purple-800))',
+        900: 'hsl(var(--purple-900))',
+        950: 'hsl(var(--purple-950))',
+        'alpha-24': 'hsl(var(--purple-alpha-24))',
+        'alpha-16': 'hsl(var(--purple-alpha-16))',
+        'alpha-10': 'hsl(var(--purple-alpha-10))',
+      },
+      sky: {
+        50: 'hsl(var(--sky-50))',
+        100: 'hsl(var(--sky-100))',
+        200: 'hsl(var(--sky-200))',
+        300: 'hsl(var(--sky-300))',
+        400: 'hsl(var(--sky-400))',
+        500: 'hsl(var(--sky-500))',
+        600: 'hsl(var(--sky-600))',
+        700: 'hsl(var(--sky-700))',
+        800: 'hsl(var(--sky-800))',
+        900: 'hsl(var(--sky-900))',
+        950: 'hsl(var(--sky-950))',
+        'alpha-24': 'hsl(var(--sky-alpha-24))',
+        'alpha-16': 'hsl(var(--sky-alpha-16))',
+        'alpha-10': 'hsl(var(--sky-alpha-10))',
+      },
+      pink: {
+        50: 'hsl(var(--pink-50))',
+        100: 'hsl(var(--pink-100))',
+        200: 'hsl(var(--pink-200))',
+        300: 'hsl(var(--pink-300))',
+        400: 'hsl(var(--pink-400))',
+        500: 'hsl(var(--pink-500))',
+        600: 'hsl(var(--pink-600))',
+        700: 'hsl(var(--pink-700))',
+        800: 'hsl(var(--pink-800))',
+        900: 'hsl(var(--pink-900))',
+        950: 'hsl(var(--pink-950))',
+        'alpha-24': 'hsl(var(--pink-alpha-24))',
+        'alpha-16': 'hsl(var(--pink-alpha-16))',
+        'alpha-10': 'hsl(var(--pink-alpha-10))',
+      },
+      teal: {
+        50: 'hsl(var(--teal-50))',
+        100: 'hsl(var(--teal-100))',
+        200: 'hsl(var(--teal-200))',
+        300: 'hsl(var(--teal-300))',
+        400: 'hsl(var(--teal-400))',
+        500: 'hsl(var(--teal-500))',
+        600: 'hsl(var(--teal-600))',
+        700: 'hsl(var(--teal-700))',
+        800: 'hsl(var(--teal-800))',
+        900: 'hsl(var(--teal-900))',
+        950: 'hsl(var(--teal-950))',
+        'alpha-24': 'hsl(var(--teal-alpha-24))',
+        'alpha-16': 'hsl(var(--teal-alpha-16))',
+        'alpha-10': 'hsl(var(--teal-alpha-10))',
+      },
       foreground: {
         0: 'hsl(var(--foreground-0))',
         50: 'hsl(var(--foreground-50))',
@@ -44,6 +391,9 @@ export default {
         900: 'hsl(var(--neutral-900))',
         950: 'hsl(var(--neutral-950))',
         1000: 'hsl(var(--neutral-1000))',
+        'alpha-24': 'hsl(var(--neutral-alpha-24))',
+        'alpha-16': 'hsl(var(--neutral-alpha-16))',
+        'alpha-10': 'hsl(var(--neutral-alpha-10))',
         foreground: 'hsl(var(--neutral-foreground))',
       },
       'neutral-alpha': {
@@ -62,43 +412,120 @@ export default {
       },
       primary: {
         DEFAULT: 'hsl(var(--primary))',
+        dark: 'hsl(var(--primary-dark))',
+        darker: 'hsl(var(--primary-darker))',
+        base: 'hsl(var(--primary-base))',
+        'alpha-24': 'hsl(var(--primary-alpha-24))',
+        'alpha-16': 'hsl(var(--primary-alpha-16))',
+        'alpha-10': 'hsl(var(--primary-alpha-10))',
         foreground: 'hsl(var(--primary-foreground))',
       },
+      bg: {
+        strong: 'hsl(var(--bg-strong))',
+        surface: 'hsl(var(--bg-surface))',
+        sub: 'hsl(var(--bg-sub))',
+        soft: 'hsl(var(--bg-soft))',
+        weak: 'hsl(var(--bg-weak))',
+        white: 'hsl(var(--bg-white))',
+      },
+      stroke: {
+        strong: 'hsl(var(--stroke-strong))',
+        sub: 'hsl(var(--stroke-sub))',
+        soft: 'hsl(var(--stroke-soft))',
+        white: 'hsl(var(--stroke-white))',
+      },
+      faded: {
+        dark: 'hsl(var(--faded-dark))',
+        base: 'hsl(var(--faded-base))',
+        light: 'hsl(var(--faded-light))',
+        lighter: 'hsl(var(--faded-lighter))',
+      },
+      information: {
+        DEFAULT: 'hsl(var(--information))',
+        dark: 'hsl(var(--information-dark))',
+        base: 'hsl(var(--information-base))',
+        light: 'hsl(var(--information-light))',
+        lighter: 'hsl(var(--information-lighter))',
+      },
+      static: {
+        black: 'hsl(var(--static-black))',
+        white: 'hsl(var(--static-white))',
+      },
       accent: {
-        DEFAULT: 'hsl(var(--accent))',
+        DEFAULT: 'hsl(var(--accent))', // DEPRECATED
       },
       destructive: {
-        DEFAULT: 'hsl(var(--destructive))',
-        foreground: 'hsl(var(--destructive-foreground))',
+        DEFAULT: 'hsl(var(--destructive))', // DEPRECATED
+        foreground: 'hsl(var(--destructive-foreground))', // DEPRECATED
       },
       success: {
         DEFAULT: 'hsl(var(--success))',
+        dark: 'hsl(var(--success-dark))',
+        base: 'hsl(var(--success-base))',
+        light: 'hsl(var(--success-light))',
+        lighter: 'hsl(var(--success-lighter))',
       },
       warning: {
         DEFAULT: 'hsl(var(--warning))',
+        dark: 'hsl(var(--warning-dark))',
+        base: 'hsl(var(--warning-base))',
+        light: 'hsl(var(--warning-light))',
+        lighter: 'hsl(var(--warning-lighter))',
+      },
+      away: {
+        dark: 'hsl(var(--away-dark))',
+        base: 'hsl(var(--away-base))',
+        light: 'hsl(var(--away-light))',
+        lighter: 'hsl(var(--away-lighter))',
+      },
+      error: {
+        DEFAULT: 'hsl(var(--error))',
+        dark: 'hsl(var(--error-dark))',
+        base: 'hsl(var(--error-base))',
+        light: 'hsl(var(--error-light))',
+        lighter: 'hsl(var(--error-lighter))',
       },
       feature: {
         DEFAULT: 'hsl(var(--feature))',
+        dark: 'hsl(var(--feature-dark))',
+        base: 'hsl(var(--feature-base))',
+        light: 'hsl(var(--feature-light))',
+        lighter: 'hsl(var(--feature-lighter))',
       },
-      information: {
-        DEFAULT: 'hsl(var(--information))',
-      },
+
       highlighted: {
         DEFAULT: 'hsl(var(--highlighted))',
+        dark: 'hsl(var(--highlighted-dark))',
+        base: 'hsl(var(--highlighted-base))',
+        light: 'hsl(var(--highlighted-light))',
+        lighter: 'hsl(var(--highlighted-lighter))',
       },
       stable: {
         DEFAULT: 'hsl(var(--stable))',
+        dark: 'hsl(var(--stable-dark))',
+        base: 'hsl(var(--stable-base))',
+        light: 'hsl(var(--stable-light))',
+        lighter: 'hsl(var(--stable-lighter))',
       },
       verified: {
         DEFAULT: 'hsl(var(--verified))',
+        dark: 'hsl(var(--verified-dark))',
+        base: 'hsl(var(--verified-base))',
+        light: 'hsl(var(--verified-light))',
+        lighter: 'hsl(var(--verified-lighter))',
       },
       alert: {
-        DEFAULT: 'hsl(var(--alert))',
+        DEFAULT: 'hsl(var(--alert))', // DEPRECATED
+      },
+      overlay: {
+        DEFAULT: 'hsl(var(--overlay))',
       },
       input: 'hsl(var(--input))',
       ring: 'hsl(var(--ring))',
+      current: 'currentColor',
     },
     fontSize: {
+      // DEPRECATED
       '2xs': ['0.625rem', '0.875rem'], // 10px font size, 14px line height
       xs: ['0.75rem', '1rem'], // 12px font size, 16px line height
       sm: ['0.875rem', '1.25rem'], // 14px font size, 20px line height
@@ -113,6 +540,10 @@ export default {
       '7xl': ['4.5rem', '1'], // 72px font size, 1 line height
       '8xl': ['6rem', '1'], // 96px font size, 1 line height
       '9xl': ['8rem', '1'], // 128px font size, 1 line height
+      // END DEPRECATED
+
+      inherit: 'inherit',
+      ...texts,
     },
     extend: {
       fontFamily: {
@@ -122,6 +553,15 @@ export default {
         2.5: 0.025,
       },
       borderRadius: {
+        4: '.25rem',
+        6: '.375rem',
+        8: '.5rem',
+        10: '.625rem',
+        12: '.75rem',
+        16: '1rem',
+        20: '1.25rem',
+        24: '1.5rem',
+        full: '999px',
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',

From 116aca7e54ae40b04e07b1abad89e15a3bccc9a4 Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Fri, 13 Dec 2024 14:33:25 +0200
Subject: [PATCH 2/3] Update tailwind.config.js

---
 apps/dashboard/tailwind.config.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/tailwind.config.js b/apps/dashboard/tailwind.config.js
index 94c736fb0b7..1a653cdfd85 100644
--- a/apps/dashboard/tailwind.config.js
+++ b/apps/dashboard/tailwind.config.js
@@ -562,9 +562,9 @@ export default {
         20: '1.25rem',
         24: '1.5rem',
         full: '999px',
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
+        lg: 'var(--radius)', // DEPRECATED
+        md: 'calc(var(--radius) - 2px)', // DEPRECATED
+        sm: 'calc(var(--radius) - 4px)', // DEPRECATED
       },
       keyframes: {
         'pulse-shadow': {

From dc607b783ef35ec5ffe1be806181cafadaac721b Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Fri, 13 Dec 2024 14:47:55 +0200
Subject: [PATCH 3/3] Update tailwind.config.js

---
 apps/dashboard/tailwind.config.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/apps/dashboard/tailwind.config.js b/apps/dashboard/tailwind.config.js
index 1a653cdfd85..94ef7ef32e1 100644
--- a/apps/dashboard/tailwind.config.js
+++ b/apps/dashboard/tailwind.config.js
@@ -129,6 +129,14 @@ export const texts = {
       fontWeight: '400',
     },
   ],
+  'paragraph-2xs': [
+    '0.625rem',
+    {
+      lineHeight: '0.875rem',
+      letterSpacing: '0em',
+      fontWeight: '400',
+    },
+  ],
   'subheading-md': [
     '1rem',
     {