fix: Fix dark mode small issues (#7573)

Github issue / Community forum post (link here to close automatically):
n8n-io · Nov 1, 2023 · 1d81afc · 1d81afc
1 parent cc2bd2e
commit 1d81afc
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 2 deletions.
diff --git a/packages/design-system/src/components/N8nMarkdown/Markdown.vue b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
@@ -317,7 +317,7 @@ export default defineComponent({
 	}
 
 	code {
-		background-color: var(--color-background-base);
+		background-color: var(--color-sticky-code-background);
 		padding: 0 var(--spacing-4xs);
 		color: var(--color-secondary);
 	}

diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
@@ -36,6 +36,9 @@
 	--color-canvas-selected: var(--prim-gray-0-alpha-025);
 	--node-type-main-color: var(--prim-gray-420);
 
+	// Sticky
+	--color-sticky-code-background: var(--color-background-light);
+
 	// Expressions
 	--color-valid-resolvable-foreground: var(--prim-color-alt-a-tint-300);
 	--color-valid-resolvable-background: var(--prim-color-alt-a-alpha-025);

diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss
@@ -77,6 +77,7 @@
 	--color-sticky-default-background: var(--prim-color-alt-d);
 	--color-sticky-default-border: var(--prim-color-alt-d-shade-150);
 	--color-sticky-font: var(--prim-gray-740);
+	--color-sticky-code-background: var(--color-background-base);
 
 	// Expressions
 	--color-valid-resolvable-foreground: var(--prim-color-alt-a);

diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue
@@ -208,6 +208,7 @@ export default defineComponent({
 		margin-top: var(--spacing-xs);
 
 		.button {
+			color: var(--color-text-dark);
 			font-weight: var(--font-weight-normal);
 			--button-border-color: var(--color-foreground-base);
 			--button-background-color: var(--color-background-base);

diff --git a/packages/editor-ui/src/utils/nodeViewUtils.ts b/packages/editor-ui/src/utils/nodeViewUtils.ts
@@ -596,7 +596,7 @@ export const getBackgroundStyles = (
 		'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`,
 	};
 	if (squareSize > 10.5) {
-		const dotColor = getStyleTokenValue('--color-canvas-dot');
+		const dotColor = getStyleTokenValue('--color-canvas-dot', true);
 		return {
 			...styles,
 			'background-image': `radial-gradient(circle at ${dotPosition}px ${dotPosition}px, ${dotColor} ${dotSize}px, transparent 0)`,