mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: Fix dark mode small issues (#7573)

Browse source 
Github issue / Community forum post (link here to close automatically):
This commit is contained in:
Mutasem Aldmour 2023-11-01 16:27:32 +01:00 committed by GitHub
parent cc2bd2e19c
commit 1d81afcbdf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/design-system/src/components/N8nMarkdown/Markdown.vue
View file

@ -317,7 +317,7 @@ export default defineComponent({
} }
code { code {
background-color: var(--color-background-base); background-color: var(--color-sticky-code-background);
padding: 0 var(--spacing-4xs); padding: 0 var(--spacing-4xs);
color: var(--color-secondary); color: var(--color-secondary);
} }

3
packages/design-system/src/css/_tokens.dark.scss
View file

@ -36,6 +36,9 @@
--color-canvas-selected: var(--prim-gray-0-alpha-025); --color-canvas-selected: var(--prim-gray-0-alpha-025);
--node-type-main-color: var(--prim-gray-420); --node-type-main-color: var(--prim-gray-420);
// Sticky
--color-sticky-code-background: var(--color-background-light);
// Expressions // Expressions
--color-valid-resolvable-foreground: var(--prim-color-alt-a-tint-300); --color-valid-resolvable-foreground: var(--prim-color-alt-a-tint-300);
--color-valid-resolvable-background: var(--prim-color-alt-a-alpha-025); --color-valid-resolvable-background: var(--prim-color-alt-a-alpha-025);

1
packages/design-system/src/css/_tokens.scss
View file

@ -77,6 +77,7 @@
--color-sticky-default-background: var(--prim-color-alt-d); --color-sticky-default-background: var(--prim-color-alt-d);
--color-sticky-default-border: var(--prim-color-alt-d-shade-150); --color-sticky-default-border: var(--prim-color-alt-d-shade-150);
--color-sticky-font: var(--prim-gray-740); --color-sticky-font: var(--prim-gray-740);
--color-sticky-code-background: var(--color-background-base);
// Expressions // Expressions
--color-valid-resolvable-foreground: var(--prim-color-alt-a); --color-valid-resolvable-foreground: var(--prim-color-alt-a);

1
packages/editor-ui/src/components/CollectionParameter.vue
View file

@ -208,6 +208,7 @@ export default defineComponent({
margin-top: var(--spacing-xs); margin-top: var(--spacing-xs);
.button { .button {
color: var(--color-text-dark);
font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal);
--button-border-color: var(--color-foreground-base); --button-border-color: var(--color-foreground-base);
--button-background-color: var(--color-background-base); --button-background-color: var(--color-background-base);

2
packages/editor-ui/src/utils/nodeViewUtils.ts
View file

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