fix(editor): Dark mode sticky notes (no-changelog) (#7716)

packages/design-system/src/components/N8nMarkdown/Markdown.vue

@@ -320,13 +320,13 @@ export default defineComponent({
 	code {
 		background-color: var(--color-sticky-code-background);
 		padding: 0 var(--spacing-4xs);
-		color: var(--color-secondary);
+		color: var(--color-sticky-code-font);
 	}
 
 	pre > code,
 	li > code,
 	p > code {
-		color: var(--color-secondary);
+		color: var(--color-sticky-code-font);
 	}
 
 	a {

packages/design-system/src/components/N8nSticky/Sticky.vue

@@ -201,6 +201,18 @@ export default defineComponent({
 .sticky {
 	position: absolute;
 	border-radius: var(--border-radius-base);
+
+	background-color: var(--color-sticky-background);
+	border: 1px solid var(--color-sticky-border);
+
+	.wrapper::after {
+		opacity: 0.15;
+		background: linear-gradient(
+			180deg,
+			var(--color-sticky-background) 0.01%,
+			var(--color-sticky-border)
+		);
+	}
 }
 
 .clickable {
@@ -231,98 +243,34 @@ export default defineComponent({
 	justify-content: flex-end;
 }
 
-.color-1 {
-	background-color: var(--sticky-color-1);
-	border: 1px solid var(--color-sticky, var(--sticky-color-1));
-
-	.wrapper::after {
-		background: linear-gradient(
-			180deg,
-			var(--color-sticky, var(--sticky-color-1)),
-			#fff5d600 0.01%,
-			var(--color-sticky, var(--sticky-color-1))
-		);
-	}
-}
-
 .color-2 {
-	background-color: var(--sticky-color-2);
+	--color-sticky-background: var(--color-sticky-background-2);
-	border: 1px solid var(--color-sticky, var(--sticky-color-2));
+	--color-sticky-border: var(--color-sticky-border-2);
-	.wrapper::after {
-		background: linear-gradient(
-			180deg,
-			var(--color-sticky, var(--sticky-color-2)),
-			#fff5d600 0.01%,
-			var(--color-sticky, var(--sticky-color-2))
-		);
-	}
 }
 
 .color-3 {
-	background-color: var(--sticky-color-3);
+	--color-sticky-background: var(--color-sticky-background-3);
-	border: 1px solid var(--color-sticky, var(--sticky-color-3));
+	--color-sticky-border: var(--color-sticky-border-3);
-	.wrapper::after {
-		background: linear-gradient(
-			180deg,
-			var(--color-sticky, var(--sticky-color-3)),
-			#fff5d600 0.01%,
-			var(--color-sticky, var(--sticky-color-3))
-		);
-	}
 }
 
 .color-4 {
-	background-color: var(--sticky-color-4);
+	--color-sticky-background: var(--color-sticky-background-4);
-	border: 1px solid var(--color-sticky, var(--sticky-color-4));
+	--color-sticky-border: var(--color-sticky-border-4);
-	.wrapper::after {
-		background: linear-gradient(
-			180deg,
-			var(--color-sticky, var(--sticky-color-4)),
-			#fff5d600 0.01%,
-			var(--color-sticky, var(--sticky-color-4))
-		);
-	}
 }
 
 .color-5 {
-	background-color: var(--sticky-color-5);
+	--color-sticky-background: var(--color-sticky-background-5);
-	border: 1px solid var(--color-sticky, var(--sticky-color-5));
+	--color-sticky-border: var(--color-sticky-border-5);
-	.wrapper::after {
-		background: linear-gradient(
-			180deg,
-			var(--color-sticky, var(--sticky-color-5)),
-			#fff5d600 0.01%,
-			var(--color-sticky, var(--sticky-color-5))
-		);
-	}
 }
 
 .color-6 {
-	background-color: var(--sticky-color-6);
+	--color-sticky-background: var(--color-sticky-background-6);
-	border: 1px solid var(--color-sticky, var(--sticky-color-6));
+	--color-sticky-border: var(--color-sticky-border-6);
-
-	.wrapper::after {
-		background: linear-gradient(
-			180deg,
-			var(--color-sticky, var(--sticky-color-6)),
-			#fff5d600 0.01%,
-			var(--color-sticky, var(--sticky-color-6))
-		);
-	}
 }
 
 .color-7 {
-	background-color: var(--sticky-color-7);
+	--color-sticky-background: var(--color-sticky-background-7);
-	border: 1px solid var(--color-sticky, var(--sticky-color-7));
+	--color-sticky-border: var(--color-sticky-border-7);
-
-	.wrapper::after {
-		background: linear-gradient(
-			180deg,
-			var(--color-sticky, var(--sticky-color-7)),
-			#fff5d600 0.01%,
-			var(--color-sticky, var(--sticky-color-7))
-		);
-	}
 }
 </style>
 

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

@@ -18,6 +18,7 @@
 	--prim-gray-200: hsl(var(--prim-gray-h), 18%, 80%);
 	--prim-gray-120: hsl(var(--prim-gray-h), 25%, 88%);
 	--prim-gray-70: hsl(var(--prim-gray-h), 32%, 93%);
+	--prim-gray-70-alpha-01: hsla(var(--prim-gray-h), 32%, 93%, 0.1);
 	--prim-gray-40: hsl(var(--prim-gray-h), 40%, 96%);
 	--prim-gray-30: hsl(var(--prim-gray-h), 40%, 97%);
 	--prim-gray-10: hsl(var(--prim-gray-h), 47%, 99%);
@@ -71,6 +72,11 @@
 	--prim-color-secondary-s: 49%;
 	--prim-color-secondary-l: 53%;
 
+	--prim-color-secondary-shade-250: hsl(
+		var(--prim-color-secondary-h),
+		calc(var(--prim-color-secondary-s) - 25%),
+		calc(var(--prim-color-secondary-l) - 25%)
+	);
 	--prim-color-secondary-shade-100: hsl(
 		var(--prim-color-secondary-h),
 		var(--prim-color-secondary-s),
@@ -113,9 +119,14 @@
 	--prim-color-alt-a-s: 60%;
 	--prim-color-alt-a-l: 40%;
 
+	--prim-color-alt-a-shade-200: hsl(
+		var(--prim-color-alt-a-h),
+		calc(var(--prim-color-alt-a-s) - 15%),
+		calc(var(--prim-color-alt-a-l) - 20%)
+	);
 	--prim-color-alt-a-shade-100: hsl(
 		var(--prim-color-alt-a-h),
-		var(--prim-color-alt-a-s),
+		calc(var(--prim-color-alt-a-s) - 15%),
 		calc(var(--prim-color-alt-a-l) - 10%)
 	);
 	--prim-color-alt-a: hsl(
@@ -155,6 +166,16 @@
 	--prim-color-alt-b-s: 77%;
 	--prim-color-alt-b-l: 57%;
 
+	--prim-color-alt-b-shade-350: hsl(
+		var(--prim-color-alt-b-h),
+		calc(var(--prim-color-alt-b-s) - 35%),
+		calc(var(--prim-color-alt-b-l) - 35%)
+	);
+	--prim-color-alt-b-shade-250: hsl(
+		var(--prim-color-alt-b-h),
+		calc(var(--prim-color-alt-b-s) - 35%),
+		calc(var(--prim-color-alt-b-l) - 25%)
+	);
 	--prim-color-alt-b-shade-100: hsl(
 		var(--prim-color-alt-b-h),
 		var(--prim-color-alt-b-s),
@@ -171,11 +192,21 @@
 		var(--prim-color-alt-b-l),
 		0.2
 	);
+	--prim-color-alt-b-tint-150: hsl(
+		var(--prim-color-alt-b-h),
+		var(--prim-color-alt-b-s),
+		calc(var(--prim-color-alt-b-l) + 15%)
+	);
 	--prim-color-alt-b-tint-250: hsl(
 		var(--prim-color-alt-b-h),
 		var(--prim-color-alt-b-s),
 		calc(var(--prim-color-alt-b-l) + 25%)
 	);
+	--prim-color-alt-b-tint-300: hsl(
+		var(--prim-color-alt-b-h),
+		var(--prim-color-alt-b-s),
+		calc(var(--prim-color-alt-b-l) + 30%)
+	);
 	--prim-color-alt-b-tint-400: hsl(
 		var(--prim-color-alt-b-h),
 		var(--prim-color-alt-b-s),
@@ -187,6 +218,16 @@
 	--prim-color-alt-c-s: 83%;
 	--prim-color-alt-c-l: 52%;
 
+	--prim-color-alt-c-shade-250: hsl(
+		var(--prim-color-alt-c-h),
+		calc(var(--prim-color-alt-c-s) - 40%),
+		calc(var(--prim-color-alt-c-l) - 25%)
+	);
+	--prim-color-alt-c-shade-150: hsl(
+		var(--prim-color-alt-c-h),
+		calc(var(--prim-color-alt-c-s) - 40%),
+		calc(var(--prim-color-alt-c-l) - 15%)
+	);
 	--prim-color-alt-c-shade-100: hsl(
 		var(--prim-color-alt-c-h),
 		var(--prim-color-alt-c-s),
@@ -213,6 +254,11 @@
 		var(--prim-color-alt-c-s),
 		calc(var(--prim-color-alt-c-l) + 25%)
 	);
+	--prim-color-alt-c-tint-300: hsl(
+		var(--prim-color-alt-c-h),
+		var(--prim-color-alt-c-s),
+		calc(var(--prim-color-alt-c-l) + 30%)
+	);
 	--prim-color-alt-c-tint-400: hsl(
 		var(--prim-color-alt-c-h),
 		var(--prim-color-alt-c-s),
@@ -229,6 +275,16 @@
 	--prim-color-alt-d-s: 100%;
 	--prim-color-alt-d-l: 92%;
 
+	--prim-color-alt-d-shade-700: hsl(
+		var(--prim-color-alt-d-h),
+		calc(var(--prim-color-alt-d-s) - 55%),
+		calc(var(--prim-color-alt-d-l) - 70%)
+	);
+	--prim-color-alt-d-shade-600: hsl(
+		var(--prim-color-alt-d-h),
+		calc(var(--prim-color-alt-d-s) - 55%),
+		calc(var(--prim-color-alt-d-l) - 60%)
+	);
 	--prim-color-alt-d-shade-150: hsl(
 		var(--prim-color-alt-d-h),
 		var(--prim-color-alt-d-s),
@@ -245,6 +301,16 @@
 	--prim-color-alt-e-s: 67%;
 	--prim-color-alt-e-l: 57%;
 
+	--prim-color-alt-e-shade-350: hsl(
+		var(--prim-color-alt-e-h),
+		calc(var(--prim-color-alt-e-s) - 20%),
+		calc(var(--prim-color-alt-e-l) - 35%)
+	);
+	--prim-color-alt-e-shade-250: hsl(
+		var(--prim-color-alt-e-h),
+		calc(var(--prim-color-alt-e-s) - 20%),
+		calc(var(--prim-color-alt-e-l) - 25%)
+	);
 	--prim-color-alt-e-shade-150: hsl(
 		var(--prim-color-alt-e-h),
 		var(--prim-color-alt-e-s),
@@ -266,6 +332,16 @@
 		var(--prim-color-alt-e-l),
 		0.4
 	);
+	--prim-color-alt-e-tint-250: hsl(
+		var(--prim-color-alt-e-h),
+		var(--prim-color-alt-e-s),
+		calc(var(--prim-color-alt-e-l) + 25%)
+	);
+	--prim-color-alt-e-tint-350: hsl(
+		var(--prim-color-alt-e-h),
+		var(--prim-color-alt-e-s),
+		calc(var(--prim-color-alt-e-l) + 35%)
+	);
 
 	// Color Alternate F
 	--prim-color-alt-f-h: 72;

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

@@ -37,7 +37,26 @@
 	--node-type-main-color: var(--prim-gray-420);
 
 	// Sticky
-	--color-sticky-code-background: var(--prim-gray-40);
+	--color-sticky-background: var(--prim-color-alt-d-shade-700);
+	--color-sticky-border: var(--prim-color-alt-d-shade-600);
+	--color-sticky-font: var(--prim-gray-40);
+	--color-sticky-code-font: var(--prim-color-secondary-tint-300);
+	--color-sticky-code-background: var(--prim-gray-70-alpha-01);
+
+	--color-sticky-background-1: var(--prim-color-alt-d-shade-700);
+	--color-sticky-border-1: var(--prim-color-alt-d-shade-600);
+	--color-sticky-background-2: var(--prim-color-alt-b-shade-350);
+	--color-sticky-border-2: var(--prim-color-alt-b-shade-250);
+	--color-sticky-background-3: var(--prim-color-alt-c-shade-250);
+	--color-sticky-border-3: var(--prim-color-alt-c-shade-150);
+	--color-sticky-background-4: var(--prim-color-alt-a-shade-200);
+	--color-sticky-border-4: var(--prim-color-alt-a-shade-100);
+	--color-sticky-background-5: var(--prim-color-alt-e-shade-350);
+	--color-sticky-border-5: var(--prim-color-alt-e-shade-250);
+	--color-sticky-background-6: var(--prim-color-secondary-shade-250);
+	--color-sticky-border-6: var(--prim-color-secondary-shade-100);
+	--color-sticky-background-7: var(--prim-gray-740);
+	--color-sticky-border-7: var(--prim-gray-670);
 
 	// Expressions
 	--color-valid-resolvable-foreground: var(--prim-color-alt-a-tint-300);

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

@@ -74,18 +74,26 @@
 	--node-type-main-color: var(--prim-gray-490);
 
 	// Sticky
-	--color-sticky-default-background: var(--prim-color-alt-d);
+	--color-sticky-background: var(--prim-color-alt-d);
-	--color-sticky-default-border: var(--prim-color-alt-d-shade-150);
+	--color-sticky-border: var(--prim-color-alt-d-shade-150);
 	--color-sticky-font: var(--prim-gray-740);
+	--color-sticky-code-font: var(--color-secondary);
 	--color-sticky-code-background: var(--color-background-base);
 
-	--sticky-color-7: #f0f3f9;
+	--color-sticky-background-1: var(--color-sticky-background);
-	--sticky-color-6: #e7d6ff;
+	--color-sticky-border-1: var(--color-sticky-border);
-	--sticky-color-5: #d6ebff;
+	--color-sticky-background-2: var(--prim-color-alt-b-tint-300);
-	--sticky-color-4: #dcf9eb;
+	--color-sticky-border-2: var(--prim-color-alt-b-tint-150);
-	--sticky-color-3: #fbdadd;
+	--color-sticky-background-3: var(--prim-color-alt-c-tint-400);
-	--sticky-color-2: #fde9d8;
+	--color-sticky-border-3: var(--prim-color-alt-c-tint-300);
-	--sticky-color-1: #fff5d6;
+	--color-sticky-background-4: var(--prim-color-alt-a-tint-500);
+	--color-sticky-border-4: var(--prim-color-alt-a-tint-300);
+	--color-sticky-background-5: var(--prim-color-alt-e-tint-350);
+	--color-sticky-border-5: var(--prim-color-alt-e-tint-250);
+	--color-sticky-background-6: var(--prim-color-secondary-tint-400);
+	--color-sticky-border-6: var(--prim-color-secondary-tint-300);
+	--color-sticky-background-7: var(--prim-gray-10);
+	--color-sticky-border-7: var(--prim-gray-120);
 
 	// Expressions
 	--color-valid-resolvable-foreground: var(--prim-color-alt-a);

packages/design-system/src/styleguide/colorsprimitives.stories.mdx

@@ -18,7 +18,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="gray">
 		{{
-			template: `<color-circles :colors="['--prim-gray-820', '--prim-gray-800', '--prim-gray-740', '--prim-gray-670', '--prim-gray-540', '--prim-gray-490', '--prim-gray-420', '--prim-gray-320', '--prim-gray-200', '--prim-gray-120', '--prim-gray-70', '--prim-gray-40', '--prim-gray-10', '--prim-gray-0']" />`,
+			template: `<color-circles :colors="['--prim-gray-820', '--prim-gray-800', '--prim-gray-740', '--prim-gray-670', '--prim-gray-540', '--prim-gray-490', '--prim-gray-420', '--prim-gray-320', '--prim-gray-200', '--prim-gray-120', '--prim-gray-70', '--prim-gray-30', '--prim-gray-40', '--prim-gray-10', '--prim-gray-0']" />`,
 			components: {
 				ColorCircles,
 			},
@@ -31,7 +31,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="primary">
 		{{
-			template: `<color-circles :colors="['--prim-color-primary-shade-100', '--prim-color-primary', '--prim-color-primary-tint-100', '--prim-color-primary-tint-200', '--prim-color-primary-tint-250', '--prim-color-primary-tint-300']" />`,
+			template: `<color-circles :colors="['--prim-color-primary-shade-300', '--prim-color-primary-shade-100', '--prim-color-primary', '--prim-color-primary-tint-100', '--prim-color-primary-tint-200', '--prim-color-primary-tint-250', '--prim-color-primary-tint-300']" />`,
 			components: {
 				ColorCircles,
 			},
@@ -44,7 +44,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="secondary">
 		{{
-			template: `<color-circles :colors="['--prim-color-secondary-shade-100', '--prim-color-secondary', '--prim-color-secondary-tint-100', '--prim-color-secondary-tint-200', '--prim-color-secondary-tint-300', '--prim-color-secondary-tint-400']" />`,
+			template: `<color-circles :colors="['--prim-color-secondary-shade-250', '--prim-color-secondary-shade-100', '--prim-color-secondary', '--prim-color-secondary-tint-100', '--prim-color-secondary-tint-200', '--prim-color-secondary-tint-300', '--prim-color-secondary-tint-400']" />`,
 			components: {
 				ColorCircles,
 			},
@@ -57,7 +57,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="alternate-a">
 		{{
-			template: `<color-circles :colors="['--prim-color-alt-a-shade-100', '--prim-color-alt-a', '--prim-color-alt-a-tint-300', '--prim-color-alt-a-tint-400', '--prim-color-alt-a-tint-500', '--prim-color-alt-a-tint-550']" />`,
+			template: `<color-circles :colors="['--prim-color-alt-a-shade-200', '--prim-color-alt-a-shade-100', '--prim-color-alt-a', '--prim-color-alt-a-tint-300', '--prim-color-alt-a-tint-400', '--prim-color-alt-a-tint-500', '--prim-color-alt-a-tint-550']" />`,
 			components: {
 				ColorCircles,
 			},
@@ -70,7 +70,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="alternate-b">
 		{{
-			template: `<color-circles :colors="['--prim-color-alt-b-shade-100', '--prim-color-alt-b', '--prim-color-alt-b-tint-250', '--prim-color-alt-b-tint-400']" />`,
+			template: `<color-circles :colors="['--prim-color-alt-b-shade-350', '--prim-color-alt-b-shade-250', '--prim-color-alt-b-shade-100', '--prim-color-alt-b', '--prim-color-alt-b-tint-150', '--prim-color-alt-b-tint-250', '--prim-color-alt-b-tint-300', '--prim-color-alt-b-tint-400']" />`,
 			components: {
 				ColorCircles,
 			},
@@ -83,7 +83,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="alternate-c">
 		{{
-			template: `<color-circles :colors="['--prim-color-alt-c-shade-100', '--prim-color-alt-c', '--prim-color-alt-c-tint-150', '--prim-color-alt-c-tint-250', '--prim-color-alt-c-tint-400', '--prim-color-alt-c-tint-450']" />`,
+			template: `<color-circles :colors="['--prim-color-alt-c-shade-250', '--prim-color-alt-c-shade-150', '--prim-color-alt-c-shade-100', '--prim-color-alt-c', '--prim-color-alt-c-tint-150', '--prim-color-alt-c-tint-250', '--prim-color-alt-c-tint-300', '--prim-color-alt-c-tint-400', '--prim-color-alt-c-tint-450']" />`,
 			components: {
 				ColorCircles,
 			},
@@ -96,7 +96,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="alternate-d">
 		{{
-			template: `<color-circles :colors="['--prim-color-alt-d-shade-150', '--prim-color-alt-d']" />`,
+			template: `<color-circles :colors="['--prim-color-alt-d-shade-700', '--prim-color-alt-d-shade-600', '--prim-color-alt-d-shade-150', '--prim-color-alt-d']" />`,
 			components: {
 				ColorCircles,
 			},
@@ -109,7 +109,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="alternate-e">
 		{{
-			template: `<color-circles :colors="['--prim-color-alt-e-shade-150', '--prim-color-alt-e-shade-100', '--prim-color-alt-e']" />`,
+			template: `<color-circles :colors="['--prim-color-alt-e-shade-350', '--prim-color-alt-e-shade-250', '--prim-color-alt-e-shade-150', '--prim-color-alt-e-shade-100', '--prim-color-alt-e', '--prim-color-alt-e-tint-250', '--prim-color-alt-e-tint-350']" />`,
 			components: {
 				ColorCircles,
 			},

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

@@ -82,12 +82,12 @@
 							:style="{
 								'border-width': '1px',
 								'border-style': 'solid',
-								'border-color': 'var(--color-text-dark)',
+								'border-color': 'var(--color-foreground-xdark)',
-								'background-color': `var(--sticky-color-${index + 1})`,
+								'background-color': `var(--color-sticky-background-${index + 1})`,
 								'box-shadow':
 									(index === 0 && node?.parameters.color === '') ||
 									index + 1 === node?.parameters.color
-										? `0 0 0 1px var(--sticky-color-${index + 1})`
+										? `0 0 0 1px var(--color-sticky-background-${index + 1})`
 										: 'none',
 							}"
 						></div>