diff --git a/packages/design-system/src/components/N8nMarkdown/Markdown.vue b/packages/design-system/src/components/N8nMarkdown/Markdown.vue index 456ff338bdfaa..42fb662b7fe58 100644 --- 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 index 5771a88a98885..19462f1a27caf 100644 --- 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 index cc58b8612832a..b0a4313497664 100644 --- 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 index e8fe3283cf766..91d5a83893595 100644 --- 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 index 682a1a31e0832..6f7ee1b8d90ba 100644 --- 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)`,