From 6e1c49e90a44187d67cb2a7e4aeb33a96ecc4662 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <mutasem@n8n.io>
Date: Thu, 9 Oct 2025 16:02:05 +0200
Subject: [PATCH] update script to update more primary tokens

---
 .../src/css/_tokens.dark.deprecated.scss      |   4 +
 .../src/css/_tokens.deprecated.scss           |  51 +++++++
 .../@n8n/design-system/src/css/_tokens.scss   | 138 +++++++-----------
 scripts/replace-css-tokens.sh                 |  48 +++++-
 4 files changed, 152 insertions(+), 89 deletions(-)

diff --git a/packages/frontend/@n8n/design-system/src/css/_tokens.dark.deprecated.scss b/packages/frontend/@n8n/design-system/src/css/_tokens.dark.deprecated.scss
index 8f57c128ec4..b9053bc769f 100644
--- a/packages/frontend/@n8n/design-system/src/css/_tokens.dark.deprecated.scss
+++ b/packages/frontend/@n8n/design-system/src/css/_tokens.dark.deprecated.scss
@@ -5,6 +5,10 @@
 **/
 @mixin deprecatedTheme {
 	--color-danger: var(--p--color--alt-h-310);
+
+	--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.1);
+	--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
+	--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
 }
 
 body[data-theme='dark'] {
diff --git a/packages/frontend/@n8n/design-system/src/css/_tokens.deprecated.scss b/packages/frontend/@n8n/design-system/src/css/_tokens.deprecated.scss
index 108e365e16e..fe0aa8b57b4 100644
--- a/packages/frontend/@n8n/design-system/src/css/_tokens.deprecated.scss
+++ b/packages/frontend/@n8n/design-system/src/css/_tokens.deprecated.scss
@@ -67,6 +67,57 @@
 	--color-background-light-base: var(--p--color--gray-025);
 	--color-background-light: var(--p--color--gray-010);
 	--color-background-xlight: var(--p--color--white);
+
+	--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+	--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
+	--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
+
+	--border-radius-xlarge: 12px;
+	--border-radius-large: 8px;
+	--border-radius-base: 4px;
+	--border-radius-small: 2px;
+	--border-color-base: var(--color--foreground);
+	--border-color-light: var(--color--foreground--tint-1);
+
+	--border-style-base: solid;
+	--border-width-base: 1px;
+	--border-base: var(--border-width-base) var(--border-style-base) var(--color--foreground);
+
+	--font-size-4xs: 0.5rem;
+	--font-size-3xs: 0.625rem;
+	--font-size-2xs: 0.75rem;
+	--font-size-xs: 0.8125rem;
+	--font-size-s: 0.875rem;
+	--font-size-m: 1rem;
+	--font-size-l: 1.125rem;
+	--font-size-xl: 1.25rem;
+	--font-size-2xl: 1.75rem;
+
+	--font-line-height-xsmall: 1;
+	--font-line-height-compact: 1.25;
+	--font-line-height-regular: 1.3;
+	--font-line-height-loose: 1.35;
+	--font-line-height-xloose: 1.5;
+
+	--font-weight-regular: 400;
+	--font-weight-medium: 500;
+	--font-weight-bold: 600;
+	--font-family: InterVariable, sans-serif;
+	--font-family-monospace: CommitMono, ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+
+	--spacing-5xs: 0.125rem;
+	--spacing-4xs: 0.25rem;
+	--spacing-3xs: 0.375rem;
+	--spacing-2xs: 0.5rem;
+	--spacing-xs: 0.75rem;
+	--spacing-s: 1rem;
+	--spacing-m: 1.25rem;
+	--spacing-l: 1.5rem;
+	--spacing-xl: 2rem;
+	--spacing-2xl: 3rem;
+	--spacing-3xl: 4rem;
+	--spacing-4xl: 8rem;
+	--spacing-5xl: 16rem;
 }
 
 :root {
diff --git a/packages/frontend/@n8n/design-system/src/css/_tokens.scss b/packages/frontend/@n8n/design-system/src/css/_tokens.scss
index 1ca167b0a9e..08586c8a5ae 100644
--- a/packages/frontend/@n8n/design-system/src/css/_tokens.scss
+++ b/packages/frontend/@n8n/design-system/src/css/_tokens.scss
@@ -65,6 +65,57 @@
 	--color--background--light-2: var(--p--color--gray-010);
 	--color--background--light-3: var(--p--color--white);
 
+	--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+	--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
+	--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
+
+	--border-radius-xlarge: 12px;
+	--border-radius-large: 8px;
+	--border-radius-base: 4px;
+	--border-radius-small: 2px;
+	--border-color-base: var(--color--foreground);
+	--border-color-light: var(--color--foreground--tint-1);
+
+	--border-style-base: solid;
+	--border-width-base: 1px;
+	--border-base: var(--border-width-base) var(--border-style-base) var(--color--foreground);
+
+	--font-size-4xs: 0.5rem;
+	--font-size-3xs: 0.625rem;
+	--font-size-2xs: 0.75rem;
+	--font-size-xs: 0.8125rem;
+	--font-size-s: 0.875rem;
+	--font-size-m: 1rem;
+	--font-size-l: 1.125rem;
+	--font-size-xl: 1.25rem;
+	--font-size-2xl: 1.75rem;
+
+	--font-line-height-xsmall: 1;
+	--font-line-height-compact: 1.25;
+	--font-line-height-regular: 1.3;
+	--font-line-height-loose: 1.35;
+	--font-line-height-xloose: 1.5;
+
+	--font-weight-regular: 400;
+	--font-weight-medium: 500;
+	--font-weight-bold: 600;
+	--font-family: InterVariable, sans-serif;
+	--font-family-monospace: CommitMono, ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+
+	--spacing-5xs: 0.125rem;
+	--spacing-4xs: 0.25rem;
+	--spacing-3xs: 0.375rem;
+	--spacing-2xs: 0.5rem;
+	--spacing-xs: 0.75rem;
+	--spacing-s: 1rem;
+	--spacing-m: 1.25rem;
+	--spacing-l: 1.5rem;
+	--spacing-xl: 2rem;
+	--spacing-2xl: 3rem;
+	--spacing-3xl: 4rem;
+	--spacing-4xl: 8rem;
+	--spacing-5xl: 16rem;
+
 	// Secondary tokens
 
 	// LangChain
@@ -596,7 +647,6 @@
 	--color-info-tint-2: var(--p--color--gray-040);
 	--color-grey: var(--p--color--gray-200);
 	--color-light-grey: var(--p--color--gray-120);
-	--color-neutral: var(--p--color--gray-490);
 	--color-configurable-node-name: var(--color--text--shade-1);
 	--color-secondary-link: var(--color--secondary);
 	--color-secondary-link-hover: var(--color--secondary--shade-1);
@@ -606,92 +656,6 @@
 	--color-menu-hover-background: var(--p--color--gray-120);
 	--color-menu-active-background: var(--p--color--gray-120);
 
-	// Generated Color Shades from 50 to 950
-	// Not yet used in design system
-	@each $color in ('neutral', 'success', 'warning', 'danger') {
-		@each $shade
-			in (
-				50,
-				100,
-				150,
-				200,
-				250,
-				300,
-				350,
-				400,
-				450,
-				500,
-				550,
-				600,
-				650,
-				700,
-				750,
-				800,
-				850,
-				900,
-				950
-			)
-		{
-			--color-#{$color}-#{$shade}-l: #{math.div($shade, 10)}#{'%'};
-			--color-#{$color}-#{$shade}: hsl(
-				var(--color-#{$color}-h),
-				var(--color-#{$color}-s),
-				var(--color-#{$color}-#{$shade}-l)
-			);
-		}
-	}
-
-	--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
-	--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
-	--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
-
-	--border-radius-xlarge: 12px;
-	--border-radius-large: 8px;
-	--border-radius-base: 4px;
-	--border-radius-small: 2px;
-	--border-color-base: var(--color--foreground);
-	--border-color-light: var(--color--foreground--tint-1);
-
-	--border-style-base: solid;
-	--border-width-base: 1px;
-	--border-base: var(--border-width-base) var(--border-style-base) var(--color--foreground);
-
-	--font-size-4xs: 0.5rem;
-	--font-size-3xs: 0.625rem;
-	--font-size-2xs: 0.75rem;
-	--font-size-xs: 0.8125rem;
-	--font-size-s: 0.875rem;
-	--font-size-m: 1rem;
-	--font-size-l: 1.125rem;
-	--font-size-xl: 1.25rem;
-	--font-size-2xl: 1.75rem;
-
-	--font-line-height-xsmall: 1;
-	--font-line-height-compact: 1.25;
-	--font-line-height-regular: 1.3;
-	--font-line-height-loose: 1.35;
-	--font-line-height-xloose: 1.5;
-
-	--font-weight-regular: 400;
-	--font-weight-medium: 500;
-	--font-weight-bold: 600;
-	--font-family: InterVariable, sans-serif;
-	--font-family-monospace: CommitMono, ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
-
-	--spacing-5xs: 0.125rem;
-	--spacing-4xs: 0.25rem;
-	--spacing-3xs: 0.375rem;
-	--spacing-2xs: 0.5rem;
-	--spacing-xs: 0.75rem;
-	--spacing-s: 1rem;
-	--spacing-m: 1.25rem;
-	--spacing-l: 1.5rem;
-	--spacing-xl: 2rem;
-	--spacing-2xl: 3rem;
-	--spacing-3xl: 4rem;
-	--spacing-4xl: 8rem;
-	--spacing-5xl: 16rem;
-
 	// Params
 	--color-icon-base: var(--color--text--tint-1);
 	--color-icon-hover: var(--p--color--primary-320);
diff --git a/scripts/replace-css-tokens.sh b/scripts/replace-css-tokens.sh
index 4a302d4409f..535c5a09b5d 100644
--- a/scripts/replace-css-tokens.sh
+++ b/scripts/replace-css-tokens.sh
@@ -91,7 +91,7 @@ echo "✓ Foreground color tokens replaced"
 echo ""
 
 # Background color tokens
-echo "[8/9] Replacing background color tokens..."
+echo "[8/10] Replacing background color tokens..."
 echo "$files" | xargs perl -pi -e 's/--color-background-medium/--color--background--shade-1/g'
 echo "$files" | xargs perl -pi -e 's/--color-background-dark/--color--background--shade-2/g'
 echo "$files" | xargs perl -pi -e 's/--color-background-xlight/--color--background--light-3/g'
@@ -101,7 +101,51 @@ echo "$files" | xargs perl -pi -e 's/--color-background-base/--color--background
 echo "✓ Background color tokens replaced"
 echo ""
 
-echo "[9/9] Verifying replacements..."
+# Box shadow tokens
+echo "[9/11] Replacing box shadow tokens..."
+echo "$files" | xargs perl -pi -e 's/--box-shadow-light/--shadow--light/g'
+echo "$files" | xargs perl -pi -e 's/--box-shadow-dark/--shadow--dark/g'
+echo "$files" | xargs perl -pi -e 's/--box-shadow-base/--shadow/g'
+echo "✓ Box shadow tokens replaced"
+echo ""
+
+# Border radius tokens
+echo "[10/12] Replacing border radius tokens..."
+echo "$files" | xargs perl -pi -e 's/--border-radius-xlarge/--radius-xl/g'
+echo "$files" | xargs perl -pi -e 's/--border-radius-large/--radius-lg/g'
+echo "$files" | xargs perl -pi -e 's/--border-radius-small/--radius-sm/g'
+echo "$files" | xargs perl -pi -e 's/--border-radius-base/--radius/g'
+echo "✓ Border radius tokens replaced"
+echo ""
+
+# Border tokens (remove -base suffix)
+echo "[11/13] Replacing border tokens..."
+echo "$files" | xargs perl -pi -e 's/--border-style-base/--border-style/g'
+echo "$files" | xargs perl -pi -e 's/--border-width-base/--border-width/g'
+echo "$files" | xargs perl -pi -e 's/--border-color-base/--border-color/g'
+echo "$files" | xargs perl -pi -e 's/--border-base(?!-)/--border/g'
+echo "✓ Border tokens replaced"
+echo ""
+
+# Font line height tokens
+echo "[12/14] Replacing font line height tokens..."
+echo "$files" | xargs perl -pi -e 's/--font-line-height-xsmall/--font-line-height-xs/g'
+echo "$files" | xargs perl -pi -e 's/--font-line-height-compact/--font-line-height-sm/g'
+echo "$files" | xargs perl -pi -e 's/--font-line-height-regular/--font-line-height-md/g'
+echo "$files" | xargs perl -pi -e 's/--font-line-height-loose/--font-line-height-lg/g'
+echo "$files" | xargs perl -pi -e 's/--font-line-height-xloose/--font-line-height-xl/g'
+echo "✓ Font line height tokens replaced"
+echo ""
+
+# Spacing tokens
+echo "[13/13] Replacing spacing tokens..."
+echo "$files" | xargs perl -pi -e 's/--spacing-s(?!-)/--spacing-sm/g'
+echo "$files" | xargs perl -pi -e 's/--spacing-m(?!-)/--spacing-md/g'
+echo "$files" | xargs perl -pi -e 's/--spacing-l(?!-)/--spacing-lg/g'
+echo "✓ Spacing tokens replaced"
+echo ""
+
+echo "[13/13] Verifying replacements..."
 remaining=$(echo "$files" | xargs grep -l "--color-primary\|--color-secondary\|--color-success\|--color-warning\|--color-danger\|--color-text\|--color-foreground\|--color-background" 2>/dev/null | xargs grep "--color-primary\|--color-secondary\|--color-success\|--color-warning\|--color-danger\|--color-text\|--color-foreground\|--color-background" 2>/dev/null | grep -v "\-\-color\-\-" | wc -l | xargs)
 echo "Remaining old tokens found: $remaining"
 echo ""