chore: Update most secondary tokens

[mutdmour]

Summary

• Update secondary tokens to match new CSS guidelines using replace_css_tokens script
• Add a few more custom components to replace
• Fix generated css classes like ".mb-xs"
• Disable chat package in replace_css_tokens script

Related Linear tickets, Github issues, and Community forum posts

Review / Merge checklist

• PR title and summary are descriptive. (conventions)
• Docs updated or follow-up ticket created.
• Tests included.
• PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

[bundlemon]

BundleMon

Files added (2)

Status	Path	Size	Limits
✅	WASM Dependencies tree-sitter-bash.wasm	+181.26KB	-
✅	WASM Dependencies tree-sitter.wasm	+74.47KB	-

Total files change +255.73KB

Groups added (2)

Status	Path	Size	Limits
✅	**/*.js	+5.77MB	-
✅	**/*.css	+201.95KB	-

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history

[codecov]

Codecov Report

❌ Patch coverage is 75.00000% with 23 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...es/frontend/editor-ui/src/views/EntityNotFound.vue	0.00%	15 Missing ⚠️
...editor-ui/src/features/workflow-diff/DiffBadge.vue	0.00%	3 Missing ⚠️
...rontend/editor-ui/src/views/EntityUnAuthorised.vue	0.00%	2 Missing ⚠️
...@n8n/design-system/src/components/N8nIcon/Icon.vue	0.00%	1 Missing ⚠️
...components/elements/edges/CanvasConnectionLine.vue	0.00%	1 Missing ⚠️
...es/canvas/components/elements/edges/CanvasEdge.vue	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[cubic-dev-ai]

2 issues found across 181 files

Note: This PR contains a large number of files. cubic only reviews up to 150 files per PR, so some files may not have been reviewed.

Prompt for AI agents (all 2 issues)

Understand the root cause of the following 2 issues and fix them.


<file name="packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.vue">

<violation number="1" location="packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.vue:128">
The new CSS variable --ndv--color--background is not defined anywhere, so this change removes the selectable pill background (the variable resolves to nothing). Please switch to a defined token.</violation>
</file>

<file name="packages/frontend/@n8n/design-system/src/css/_primitives.scss">

<violation number="1" location="packages/frontend/@n8n/design-system/src/css/_primitives.scss:42">
Renaming the primary hue/saturation/light primitives adds an extra dash in the variable name, but deprecated tokens still reference the old identifiers, leaving them undefined and breaking all legacy primary color tokens.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

[cubic-dev-ai]

The new CSS variable --ndv--color--background is not defined anywhere, so this change removes the selectable pill background (the variable resolves to nothing). Please switch to a defined token.

Prompt for AI agents

Address the following comment on packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.vue at line 128:

<comment>The new CSS variable --ndv--color--background is not defined anywhere, so this change removes the selectable pill background (the variable resolves to nothing). Please switch to a defined token.</comment>

<file context>
@@ -125,13 +125,13 @@ function itemComparator(a: Item, b: Item) {
 	font-size: small;
-	background-color: var(--color-ndv-background);
-	color: var(--text-color-dark);
+	background-color: var(--ndv--color--background);
+	color: var(--color--text--shade-1);
 
</file context>

[cubic-dev-ai]

Renaming the primary hue/saturation/light primitives adds an extra dash in the variable name, but deprecated tokens still reference the old identifiers, leaving them undefined and breaking all legacy primary color tokens.

Prompt for AI agents

Address the following comment on packages/frontend/@n8n/design-system/src/css/_primitives.scss at line 42:

<comment>Renaming the primary hue/saturation/light primitives adds an extra dash in the variable name, but deprecated tokens still reference the old identifiers, leaving them undefined and breaking all legacy primary color tokens.</comment>

<file context>
@@ -39,9 +39,9 @@
-	--p--color--primary-h: 7;
-	--p--color--primary-s: 100%;
-	--p--color--primary-l: 68%;
+	--p--color--primary--h: 7;
+	--p--color--primary--s: 100%;
+	--p--color--primary--l: 68%;
</file context>