diff --git a/packages/design-system/src/css/_primitives.scss b/packages/design-system/src/css/_primitives.scss index 348d10f1c9..0ee7c9b378 100644 --- a/packages/design-system/src/css/_primitives.scss +++ b/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), diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss index 19462f1a27..d64a807afa 100644 --- a/packages/design-system/src/css/_tokens.dark.scss +++ b/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'] { diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss index b0a4313497..888fac193a 100644 --- a/packages/design-system/src/css/_tokens.scss +++ b/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 diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index 98284c93a8..1bb21ee86e 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/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 {