fix(editor): Fix more dark mode issues (no-changelog) (#7578)

Github issue / Community forum post (link here to close automatically):

---------

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
Co-authored-by: Giulio Andreini <andreini@netseven.it>

packages/design-system/src/css/_primitives.scss

@@ -30,6 +30,11 @@
 	--prim-color-primary-s: 100%;
 	--prim-color-primary-l: 68%;
 
+	--prim-color-primary-shade-300: hsl(
+		var(--prim-color-primary-h),
+		calc(var(--prim-color-primary-s) - 60%),
+		calc(var(--prim-color-primary-l) - 30%)
+	);
 	--prim-color-primary-shade-100: hsl(
 		var(--prim-color-primary-h),
 		calc(var(--prim-color-primary-s) - 15%),
@@ -40,12 +45,6 @@
 		var(--prim-color-primary-s),
 		var(--prim-color-primary-l)
 	);
-	--prim-color-primary-alpha-04: hsla(
-		var(--prim-color-primary-h),
-		var(--prim-color-primary-s),
-		var(--prim-color-primary-l),
-		0.4
-	);
 	--prim-color-primary-tint-100: hsl(
 		var(--prim-color-primary-h),
 		var(--prim-color-primary-s),

packages/design-system/src/css/_tokens.dark.scss

@@ -37,7 +37,7 @@
 	--node-type-main-color: var(--prim-gray-420);
 
 	// Sticky
-	--color-sticky-code-background: var(--color-background-light);
+	--color-sticky-code-background: var(--prim-gray-40);
 
 	// Expressions
 	--color-valid-resolvable-foreground: var(--prim-color-alt-a-tint-300);
@@ -81,7 +81,7 @@
 	// Button primary
 	--color-button-primary-disabled-font: var(--prim-gray-0-alpha-025);
 	--color-button-primary-disabled-border: transparent;
-	--color-button-primary-disabled-background: var(--prim-color-primary-alpha-04);
+	--color-button-primary-disabled-background: var(--prim-color-primary-shade-300);
 
 	// Button secondary
 	--color-button-secondary-border: var(--prim-gray-420);
@@ -141,6 +141,13 @@
 	--border-color-light: var(--color-foreground-light);
 
 	--border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+
+	// Various
+	--color-info-tint-1: var(--prim-gray-420);
+	--color-info-tint-2: var(--prim-gray-740);
+
+	--node-type-supplemental-label-color-l: 100%;
+	--color-configurable-node-name: var(--color-text-lighter);
 }
 
 body[data-theme='dark'] {

packages/design-system/src/css/_tokens.scss

@@ -229,6 +229,7 @@
 	--color-light-grey: var(--prim-gray-120);
 	--color-neutral: var(--prim-gray-490);
 	--color-switch: var(--prim-color-alt-i);
+	--color-configurable-node-name: var(--color-text-dark);
 
 	// Generated Color Shades from 50 to 950
 	// Not yet used in design system

packages/editor-ui/src/components/Node.vue

@@ -1004,6 +1004,9 @@ export default defineComponent({
 						--configurable-node-icon-size
 					) - 2 * var(--spacing-s)
 			);
+			.node-name > p {
+				color: var(--color-configurable-node-name);
+			}
 		}
 
 		.node-default {