From 0b82ff4ebb62171f0b4fbcb1ecf0ecf64539f441 Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Mon, 27 Oct 2025 16:46:28 +0100
Subject: [PATCH] New color palettes (#6945)

* debug runs text fix

* New color palette

* Remove luminance-blue

* replace hardcoded flow node colors

* nit
---
 frontend/src/lib/assets/tokens/tokens.json    |  67 ++++++--
 frontend/src/lib/components/Toggle.svelte     |   2 +-
 .../apps/editor/AppEditorHeader.svelte        |   2 +-
 .../src/lib/components/common/alert/model.ts  |   9 +-
 .../lib/components/common/badge/Badge.svelte  |  11 +-
 .../components/common/button/Button.svelte    |   2 +-
 .../src/lib/components/common/button/model.ts |  14 +-
 .../ConfirmationModal.svelte                  |   2 +-
 frontend/src/lib/components/graph/util.ts     |  18 +--
 frontend/tailwind.config.cjs                  | 146 ++++++++----------
 10 files changed, 149 insertions(+), 124 deletions(-)

diff --git a/frontend/src/lib/assets/tokens/tokens.json b/frontend/src/lib/assets/tokens/tokens.json
index 3dd358a9a7..61ada10cac 100644
--- a/frontend/src/lib/assets/tokens/tokens.json
+++ b/frontend/src/lib/assets/tokens/tokens.json
@@ -123,16 +123,16 @@
 			"deep-blue-200": "#9da6ca",
 			"deep-blue-100": "#c3c9df",
 			"deep-blue-50": "#e7eaf2",
-			"luminance-blue-900": "#1e3a8a",
-			"luminance-blue-800": "#0d3cc5",
-			"luminance-blue-700": "#1847d2",
-			"luminance-blue-600": "#2652df",
-			"luminance-blue-500": "#2c5beb",
-			"luminance-blue-400": "#5074f6",
-			"luminance-blue-300": "#758ff8",
-			"luminance-blue-200": "#a0affa",
-			"luminance-blue-100": "#c7cefc",
-			"luminance-blue-50": "#e9ecfe",
+			"blue-900": "#1e3a8a",
+			"blue-800": "#183faf",
+			"blue-700": "#1847d2",
+			"blue-600": "#2652df",
+			"blue-500": "#2c5beb",
+			"blue-400": "#5074f6",
+			"blue-300": "#758ff8",
+			"blue-200": "#a0affa",
+			"blue-100": "#c7cefc",
+			"blue-50": "#e9ecfe",
 			"nord-0": "#2e3440",
 			"nord-1": "#3b4252",
 			"nord-2": "#434c5e",
@@ -148,7 +148,52 @@
 			"nord-12": "#d08770",
 			"nord-13": "#ebcb8b",
 			"nord-14": "#a3be8c",
-			"nord-15": "#b48ead"
+			"nord-15": "#b48ead",
+			"red-800": "#693237",
+			"red-600": "#aa3e47",
+			"red-500": "#e63b49",
+			"red-400": "#f87171",
+			"red-200": "#fecaca",
+			"red-950": "#392b31",
+			"red-100": "#fee2e2",
+			"red-900": "#4c2d32",
+			"red-700": "#81383f",
+			"red-300": "#fca5a5",
+			"red-50": "#fef2f2",
+			"green-50": "#f0fdf4",
+			"green-100": "#dcfce7",
+			"green-200": "#bbf7d0",
+			"green-300": "#96f2b7",
+			"green-400": "#62e993",
+			"green-500": "#32c76d",
+			"green-600": "#319e69",
+			"green-700": "#3b7a5b",
+			"green-800": "#3b6054",
+			"green-900": "#284945",
+			"green-950": "#263b3d",
+			"orange-50": "#fff7ed",
+			"orange-100": "#ffedd5",
+			"orange-200": "#fed7aa",
+			"orange-300": "#fdba74",
+			"orange-400": "#fb923c",
+			"orange-500": "#f0721b",
+			"orange-600": "#cd6230",
+			"orange-700": "#905035",
+			"orange-800": "#654338",
+			"orange-900": "#4b3531",
+			"orange-950": "#3c2c2ddb",
+			"purple-50": "#faf5ff",
+			"purple-100": "#f3e8ff",
+			"purple-200": "#e5cdff",
+			"purple-300": "#cfa5fc",
+			"purple-400": "#b267fd",
+			"purple-500": "#9939f5",
+			"purple-600": "#8143ba",
+			"purple-700": "#5f407d",
+			"purple-800": "#483c60",
+			"purple-900": "#3a3549",
+			"purple-950": "#31313f",
+			"blue-950": "#213263"
 		}
 	},
 	"guidelines": { "mode-1": { "blue": "#5e81ac", "demo-background": "#ffffff00" } },
diff --git a/frontend/src/lib/components/Toggle.svelte b/frontend/src/lib/components/Toggle.svelte
index 1189980cf3..6b502bcbfa 100644
--- a/frontend/src/lib/components/Toggle.svelte
+++ b/frontend/src/lib/components/Toggle.svelte
@@ -112,7 +112,7 @@
 				color == 'red'
 					? 'peer-checked:bg-red-600'
 					: color == 'blue'
-						? 'peer-checked:bg-luminance-blue-400 '
+						? 'peer-checked:bg-blue-400 '
 						: 'peer-checked:bg-nord-950 dark:peer-checked:bg-nord-900',
 				size === 'md'
 					? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 59fb4b73e1..e7ad74af92 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -1296,7 +1296,7 @@
 			>
 				<div class="flex flex-row gap-1 items-center">
 					<div>Debug runs</div>
-					<div class="text-2xs text-primary"
+					<div class="text-2xs {hasErrors ? '' : 'text-primary'}"
 						>({$jobs?.length > 99 ? '99+' : ($jobs?.length ?? 0)})</div
 					>
 					{#if hasErrors}
diff --git a/frontend/src/lib/components/common/alert/model.ts b/frontend/src/lib/components/common/alert/model.ts
index d7d8883554..356701e06d 100644
--- a/frontend/src/lib/components/common/alert/model.ts
+++ b/frontend/src/lib/components/common/alert/model.ts
@@ -2,11 +2,10 @@ export type AlertType = 'success' | 'error' | 'warning' | 'info'
 
 export const classes: Record<AlertType, Record<string, string>> = {
 	info: {
-		bgClass:
-			'bg-luminance-blue-50 border-luminance-blue-100 border dark:bg-luminance-blue-900/60 dark:border-luminance-blue-700/40',
-		iconClass: 'text-luminance-blue-600 dark:text-luminance-blue-50',
-		titleClass: 'text-luminance-blue-700 dark:text-luminance-blue-50',
-		descriptionClass: 'text-luminance-blue-600 dark:text-luminance-blue-50/80'
+		bgClass: 'bg-blue-50 border-blue-100 border dark:bg-blue-900/60 dark:border-blue-700/40',
+		iconClass: 'text-blue-600 dark:text-blue-50',
+		titleClass: 'text-blue-700 dark:text-blue-50',
+		descriptionClass: 'text-blue-600 dark:text-blue-50/80'
 	},
 	warning: {
 		bgClass:
diff --git a/frontend/src/lib/components/common/badge/Badge.svelte b/frontend/src/lib/components/common/badge/Badge.svelte
index fa3f06d7e3..91429bd291 100644
--- a/frontend/src/lib/components/common/badge/Badge.svelte
+++ b/frontend/src/lib/components/common/badge/Badge.svelte
@@ -48,7 +48,7 @@
 	let hidden = $state(false)
 	const colors: Record<BadgeColor, string> = {
 		gray: 'bg-surface-sunken text-primary',
-		blue: 'bg-luminance-blue-50 text-luminance-blue-800 dark:text-luminance-blue-100 dark:bg-luminance-blue-700/40',
+		blue: 'bg-blue-50 text-blue-800 dark:text-blue-100 dark:bg-blue-700/40',
 		red: 'bg-red-100 text-red-800 dark:bg-red-700/40 dark:text-red-100',
 		green: 'bg-green-100 text-green-700 dark:bg-green-700/40 dark:text-green-100',
 		yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-700/40 dark:text-yellow-100',
@@ -68,7 +68,7 @@
 
 	const selectedColors: Record<BadgeColor, string> = {
 		gray: 'bg-surface-input text-primary',
-		blue: 'bg-luminance-blue-500 text-white dark:bg-luminance-blue-600',
+		blue: 'bg-blue-500 text-white dark:bg-blue-600',
 		red: 'bg-red-500 text-white dark:bg-red-600',
 		green: 'bg-green-500 text-white dark:bg-green-600',
 		yellow: 'bg-yellow-500 text-white dark:bg-yellow-600',
@@ -76,8 +76,7 @@
 		indigo: 'bg-indigo-500 text-white dark:bg-indigo-600',
 		violet: 'bg-violet-500 text-white dark:bg-violet-600',
 		['dark-gray']: 'bg-gray-700 text-gray-100 dark:bg-gray-800 dark:text-gray-200',
-		['dark-blue']:
-			'bg-luminance-blue-700 text-luminance-blue-100 dark:bg-luminance-blue-800 dark:text-luminance-blue-200',
+		['dark-blue']: 'bg-blue-700 text-blue-100 dark:bg-blue-800 dark:text-blue-200',
 		['dark-red']: 'bg-red-700 text-white dark:bg-red-800 dark:text-red-100',
 		['dark-green']: 'bg-green-700 text-green-100 dark:bg-green-800 dark:text-green-200',
 		['dark-yellow']: 'bg-yellow-600 text-white dark:bg-yellow-700 dark:text-yellow-100',
@@ -89,7 +88,7 @@
 
 	const hovers: Partial<Record<BadgeColor, string>> = {
 		gray: 'hover:bg-surface-hover',
-		blue: 'hover:bg-luminance-blue-200 dark:hover:bg-luminance-blue-700/40',
+		blue: 'hover:bg-blue-200 dark:hover:bg-blue-700/40',
 		red: 'hover:bg-red-200 dark:hover:bg-red-500/25',
 		green: 'hover:bg-green-200 dark:hover:bg-green-500/25',
 		yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-500/25',
@@ -97,7 +96,7 @@
 		orange: 'hover:bg-orange-200 dark:hover:bg-orange-500/25',
 		violet: 'hover:bg-violet-200 dark:hover:bg-violet-500/25',
 		['dark-gray']: 'hover:bg-gray-600 dark:hover:bg-gray-700',
-		['dark-blue']: 'hover:bg-luminance-blue-600 dark:hover:bg-luminance-blue-700',
+		['dark-blue']: 'hover:bg-blue-600 dark:hover:bg-blue-700',
 		['dark-red']: 'hover:bg-red-600 dark:hover:bg-red-700',
 		['dark-green']: 'hover:bg-green-600 dark:hover:bg-green-700',
 		['dark-yellow']: 'hover:bg-yellow-600 dark:hover:bg-yellow-700',
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 9ed11fb094..0345e4a8fc 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -215,7 +215,7 @@
 		if (variant === 'default') {
 			return 'border border-border-light divide-x divide-border-light'
 		} else if (variant === 'accent') {
-			return 'divide-x divide-luminance-blue-100 dark:divide-luminance-blue-200'
+			return 'divide-x divide-blue-100 dark:divide-blue-200'
 		} else if (variant === 'accent-secondary') {
 			return 'divide-x divide-deep-blue-400 dark:divide-deep-blue-100'
 		} else if (variant === 'subtle') {
diff --git a/frontend/src/lib/components/common/button/model.ts b/frontend/src/lib/components/common/button/model.ts
index 1a0922e5f8..eda59146c7 100644
--- a/frontend/src/lib/components/common/button/model.ts
+++ b/frontend/src/lib/components/common/button/model.ts
@@ -114,10 +114,10 @@ export namespace ButtonType {
 
 		blue: {
 			border:
-				'border-luminance-blue-500 dark:border-luminance-blue-300 hover:border-luminance-blue-700 focus-visible:border-luminance-blue-700 bg-surface hover:bg-luminance-blue-100 dark:hover:bg-luminance-blue-900/40 focus-visible:bg-luminance-blue-100 focus-visible:dark:text-luminance-blue-100 dark:focus-visible:bg-luminance-blue-900 text-luminance-blue-500 dark:text-luminance-blue-300 dark:hover:text-luminance-blue-200 hover:text-luminance-blue-700 focus-visible:text-luminance-blue-700 focus-visible:ring-luminance-blue-300',
+				'border-blue-500 dark:border-blue-300 hover:border-blue-700 focus-visible:border-blue-700 bg-surface hover:bg-blue-100 dark:hover:bg-blue-900/40 focus-visible:bg-blue-100 focus-visible:dark:text-blue-100 dark:focus-visible:bg-blue-900 text-blue-500 dark:text-blue-300 dark:hover:text-blue-200 hover:text-blue-700 focus-visible:text-blue-700 focus-visible:ring-blue-300',
 			contained:
-				'bg-luminance-blue-300 hover:bg-luminance-blue-400 focus-visible:bg-luminance-blue-500 text-white focus-visible:ring-luminance-blue-300',
-			divider: 'divide-x divide-luminance-blue-600'
+				'bg-blue-300 hover:bg-blue-400 focus-visible:bg-blue-500 text-white focus-visible:ring-blue-300',
+			divider: 'divide-x divide-blue-600'
 		},
 		marine: {
 			border:
@@ -173,13 +173,13 @@ export namespace ButtonType {
 	export const VariantStyles: Record<'accent-secondary' | 'accent' | 'default' | 'subtle', string> =
 		{
 			'accent-secondary':
-				'bg-surface-accent-secondary hover:bg-surface-accent-secondary-hover focus-visible:bg-surface-accent-secondary-clicked text-white dark:text-deep-blue-900 focus-visible:ring-luminance-blue-300',
+				'bg-surface-accent-secondary hover:bg-surface-accent-secondary-hover focus-visible:bg-surface-accent-secondary-clicked text-white dark:text-deep-blue-900 focus-visible:ring-blue-300',
 			accent:
-				'bg-surface-accent-primary hover:bg-surface-accent-hover focus-visible:bg-surface-accent-clicked text-white focus-visible:ring-luminance-blue-300',
+				'bg-surface-accent-primary hover:bg-surface-accent-hover focus-visible:bg-surface-accent-clicked text-white focus-visible:ring-blue-300',
 			default:
-				'border border-border-light bg-transparent hover:bg-surface-hover text-primary focus-visible:bg-surface-hover focus-visible:ring-luminance-blue-300',
+				'border border-border-light bg-transparent hover:bg-surface-hover text-primary focus-visible:bg-surface-hover focus-visible:ring-blue-300',
 			subtle:
-				'bg-transparent hover:bg-surface-hover text-primary focus-visible:bg-surface-hover focus-visible:ring-luminance-blue-300'
+				'bg-transparent hover:bg-surface-hover text-primary focus-visible:bg-surface-hover focus-visible:ring-blue-300'
 		}
 
 	export const DestructiveVariantStyles: Record<
diff --git a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
index bdc900f3f8..23d91f790a 100644
--- a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
@@ -69,7 +69,7 @@
 			Icon: RefreshCcw,
 			color: 'dark',
 			classes: {
-				icon: 'text-blue-500 dark:text-blue-400',
+				icon: 'text-blue-700 dark:text-blue-300',
 				iconWrapper: 'bg-blue-100 dark:bg-blue-800/50'
 			}
 		}
diff --git a/frontend/src/lib/components/graph/util.ts b/frontend/src/lib/components/graph/util.ts
index 437e3f1352..8969f460c4 100644
--- a/frontend/src/lib/components/graph/util.ts
+++ b/frontend/src/lib/components/graph/util.ts
@@ -36,13 +36,13 @@ export function getNodeColorClasses(state: FlowNodeState, selected: boolean): Fl
 	} satisfies Record<any, FlowNodeColorClasses>
 	let orangeStyle = {
 		selected: {
-			bg: 'bg-orange-200 dark:bg-[#905036]',
+			bg: 'bg-orange-200 dark:bg-orange-700',
 			outline: 'outline-orange-500' + outlined,
 			text: 'text-orange-800 dark:text-orange-200',
 			badge: 'bg-orange-100 text-orange-700'
 		},
 		notSelected: {
-			bg: 'bg-orange-100 dark:bg-[#654338]',
+			bg: 'bg-orange-100 dark:bg-orange-800',
 			outline: '',
 			text: 'text-orange-700 dark:text-orange-300',
 			badge: 'bg-orange-200 text-orange-700'
@@ -60,7 +60,7 @@ export function getNodeColorClasses(state: FlowNodeState, selected: boolean): Fl
 		_Skipped: {
 			selected: defaultStyle.selected,
 			notSelected: {
-				bg: 'bg-blue-100 dark:bg-[#2D3B63]',
+				bg: 'bg-blue-100 dark:bg-blue-950',
 				outline: '',
 				text: 'text-blue-600 dark:text-blue-200',
 				badge: 'bg-blue-200 outline-border-selected text-blue-800'
@@ -68,13 +68,13 @@ export function getNodeColorClasses(state: FlowNodeState, selected: boolean): Fl
 		},
 		Success: {
 			selected: {
-				bg: 'bg-green-200 dark:bg-[#329E6A]',
+				bg: 'bg-green-200 dark:bg-green-600',
 				outline: 'outline-green-500 dark:outline-green-400' + outlined,
 				text: 'text-green-800 dark:text-green-100',
 				badge: 'bg-green-100 text-green-700'
 			},
 			notSelected: {
-				bg: 'bg-green-100 dark:bg-[#3B7B5B]',
+				bg: 'bg-green-100 dark:bg-green-700',
 				outline: '',
 				text: 'text-green-700 dark:text-green-100',
 				badge: 'bg-green-200 text-green-700'
@@ -82,13 +82,13 @@ export function getNodeColorClasses(state: FlowNodeState, selected: boolean): Fl
 		},
 		Failure: {
 			selected: {
-				bg: 'bg-red-200 dark:bg-[#AA3E47]',
+				bg: 'bg-red-200 dark:bg-red-600',
 				outline: 'outline-red-500' + outlined,
 				text: 'text-red-800 dark:text-red-100',
 				badge: 'bg-red-100 text-red-700'
 			},
 			notSelected: {
-				bg: 'bg-red-100 dark:bg-[#81383F]',
+				bg: 'bg-red-100 dark:bg-red-700',
 				outline: '',
 				text: 'text-red-700 dark:text-red-200',
 				badge: 'bg-red-200 text-red-700'
@@ -98,13 +98,13 @@ export function getNodeColorClasses(state: FlowNodeState, selected: boolean): Fl
 		WaitingForExecutor: orangeStyle,
 		WaitingForEvents: {
 			selected: {
-				bg: 'bg-purple-200 dark:bg-[#8243BB]',
+				bg: 'bg-purple-200 dark:bg-purple-600',
 				outline: 'outline-purple-500' + outlined,
 				text: 'text-purple-800 dark:text-purple-100',
 				badge: 'bg-purple-100 text-purple-700'
 			},
 			notSelected: {
-				bg: 'bg-purple-100 dark:bg-[#5F417E]',
+				bg: 'bg-purple-100 dark:bg-purple-700',
 				outline: '',
 				text: 'text-purple-700 dark:text-purple-200',
 				badge: 'bg-purple-200 text-purple-700'
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index a3540878ea..bb9d2ee3a3 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -110,17 +110,70 @@ const config = {
 				800: `rgb(${primitives['deep-blue-800']})`,
 				900: `rgb(${primitives['deep-blue-900']})`
 			},
-			'luminance-blue': {
-				50: `rgb(${primitives['luminance-blue-50']})`,
-				100: `rgb(${primitives['luminance-blue-100']})`,
-				200: `rgb(${primitives['luminance-blue-200']})`,
-				300: `rgb(${primitives['luminance-blue-300']})`,
-				400: `rgb(${primitives['luminance-blue-400']})`,
-				500: `rgb(${primitives['luminance-blue-500']})`,
-				600: `rgb(${primitives['luminance-blue-600']})`,
-				700: `rgb(${primitives['luminance-blue-700']})`,
-				800: `rgb(${primitives['luminance-blue-800']})`,
-				900: `rgb(${primitives['luminance-blue-900']})`
+			red: {
+				50: `rgb(${primitives['red-50']})`,
+				100: `rgb(${primitives['red-100']})`,
+				200: `rgb(${primitives['red-200']})`,
+				300: `rgb(${primitives['red-300']})`,
+				400: `rgb(${primitives['red-400']})`,
+				500: `rgb(${primitives['red-500']})`,
+				600: `rgb(${primitives['red-600']})`,
+				700: `rgb(${primitives['red-700']})`,
+				800: `rgb(${primitives['red-800']})`,
+				900: `rgb(${primitives['red-900']})`,
+				950: `rgb(${primitives['red-950']})`
+			},
+			blue: {
+				50: `rgb(${primitives['blue-50']})`,
+				100: `rgb(${primitives['blue-100']})`,
+				200: `rgb(${primitives['blue-200']})`,
+				300: `rgb(${primitives['blue-300']})`,
+				400: `rgb(${primitives['blue-400']})`,
+				500: `rgb(${primitives['blue-500']})`,
+				600: `rgb(${primitives['blue-600']})`,
+				700: `rgb(${primitives['blue-700']})`,
+				800: `rgb(${primitives['blue-800']})`,
+				900: `rgb(${primitives['blue-900']})`,
+				950: `rgb(${primitives['blue-950']})`
+			},
+			green: {
+				50: `rgb(${primitives['green-50']})`,
+				100: `rgb(${primitives['green-100']})`,
+				200: `rgb(${primitives['green-200']})`,
+				300: `rgb(${primitives['green-300']})`,
+				400: `rgb(${primitives['green-400']})`,
+				500: `rgb(${primitives['green-500']})`,
+				600: `rgb(${primitives['green-600']})`,
+				700: `rgb(${primitives['green-700']})`,
+				800: `rgb(${primitives['green-800']})`,
+				900: `rgb(${primitives['green-900']})`,
+				950: `rgb(${primitives['green-950']})`
+			},
+			orange: {
+				50: `rgb(${primitives['orange-50']})`,
+				100: `rgb(${primitives['orange-100']})`,
+				200: `rgb(${primitives['orange-200']})`,
+				300: `rgb(${primitives['orange-300']})`,
+				400: `rgb(${primitives['orange-400']})`,
+				500: `rgb(${primitives['orange-500']})`,
+				600: `rgb(${primitives['orange-600']})`,
+				700: `rgb(${primitives['orange-700']})`,
+				800: `rgb(${primitives['orange-800']})`,
+				900: `rgb(${primitives['orange-900']})`,
+				950: `rgb(${primitives['orange-950']})`
+			},
+			purple: {
+				50: `rgb(${primitives['purple-50']})`,
+				100: `rgb(${primitives['purple-100']})`,
+				200: `rgb(${primitives['purple-200']})`,
+				300: `rgb(${primitives['purple-300']})`,
+				400: `rgb(${primitives['purple-400']})`,
+				500: `rgb(${primitives['purple-500']})`,
+				600: `rgb(${primitives['purple-600']})`,
+				700: `rgb(${primitives['purple-700']})`,
+				800: `rgb(${primitives['purple-800']})`,
+				900: `rgb(${primitives['purple-900']})`,
+				950: `rgb(${primitives['purple-950']})`
 			},
 			slate: {
 				50: '#f8fafc',
@@ -170,18 +223,6 @@ const config = {
 				800: '#292524',
 				900: '#1c1917'
 			},
-			orange: {
-				50: '#fff7ed',
-				100: '#ffedd5',
-				200: '#fed7aa',
-				300: '#fdba74',
-				400: '#fb923c',
-				500: '#f97316',
-				600: '#ea580c',
-				700: '#c2410c',
-				800: '#9a3412',
-				900: '#7c2d12'
-			},
 			amber: {
 				50: '#fffbeb',
 				100: '#fef3c7',
@@ -266,18 +307,6 @@ const config = {
 				800: '#5b21b6',
 				900: '#4c1d95'
 			},
-			purple: {
-				50: '#faf5ff',
-				100: '#f3e8ff',
-				200: '#e9d5ff',
-				300: '#d8b4fe',
-				400: '#c084fc',
-				500: '#a855f7',
-				600: '#9333ea',
-				700: '#7e22ce',
-				800: '#6b21a8',
-				900: '#581c87'
-			},
 			fuchsia: {
 				50: '#fdf4ff',
 				100: '#fae8ff',
@@ -326,28 +355,6 @@ const config = {
 				800: '#1f2937',
 				900: '#111827'
 			},
-			red: {
-				50: '#fef2f2',
-				100: '#fee2e2',
-				200: '#fecaca',
-				300: '#fca5a5',
-				400: '#f87171',
-				500: '#ef4444',
-				600: '#dc2626',
-				700: '#b91c1c',
-				800: '#991b1b',
-				900: '#7f1d1d'
-			},
-			orange: {
-				100: '#ffedd5',
-				200: '#ffedd5',
-				300: '#FDC089',
-				400: '#fb923c',
-				500: '#f97316',
-				600: '#ea580c',
-				700: '#c2410c',
-				800: '#c2410c'
-			},
 			yellow: {
 				50: '#fefce8',
 				100: '#fef9c3',
@@ -360,31 +367,6 @@ const config = {
 				800: '#854d0e',
 				900: '#713f12'
 			},
-			green: {
-				50: '#f0fdf4',
-				100: '#dcfce7',
-				200: '#bbf7d0',
-				300: '#86efac',
-				400: '#4ade80',
-				500: '#22c55e',
-				600: '#16a34a',
-				700: '#15803d',
-				800: '#166534',
-				900: '#14532d'
-			},
-			blue: {
-				50: '#eff6ff',
-				100: '#dbeafe',
-				200: '#bfdbfe',
-				300: '#93c5fd',
-				400: '#60a5fa',
-				500: '#3b82f6',
-				600: '#2563eb',
-				700: '#1d4ed8',
-				800: '#1e40af',
-				900: '#1e3a8a'
-			},
-
 			indigo: {
 				50: '#eef2ff',
 				100: '#e0e7ff',