From 1f209da6c9bf5a6f201621a7fc4a033c5803b1ef Mon Sep 17 00:00:00 2001 From: Giulio Andreini Date: Fri, 8 Aug 2025 11:11:49 +0200 Subject: [PATCH] refactor(editor): Update CSS primitives structure and naming (no-changelog) (#17731) --- .../design-system/src/css/_primitives.scss | 552 ++++-------------- .../design-system/src/css/_tokens.dark.scss | 314 +++++----- .../@n8n/design-system/src/css/_tokens.scss | 337 +++++------ .../design-system/src/css/common/var.scss | 6 - .../styleguide/colorsprimitives.stories.ts | 30 +- .../src/components/MainHeader/MainHeader.vue | 2 +- .../src/components/MfaSetupModal.vue | 2 +- .../FromAiOverrideButton.vue | 2 +- .../editor-ui/src/components/UpdatesPanel.vue | 2 +- .../IconSuccess.vue | 2 +- 10 files changed, 446 insertions(+), 803 deletions(-) diff --git a/packages/frontend/@n8n/design-system/src/css/_primitives.scss b/packages/frontend/@n8n/design-system/src/css/_primitives.scss index 474ba731ea..a0ca851747 100644 --- a/packages/frontend/@n8n/design-system/src/css/_primitives.scss +++ b/packages/frontend/@n8n/design-system/src/css/_primitives.scss @@ -1,481 +1,135 @@ // Primitive Colors -// Primitive colors shouldn't be used directly in components an other UI elements. +// The primitives should not be used directly in components and other UI elements. // They can be only mapped to tokens. -// Tokens should be used instead in components an other UI elements +// Tokens should be used instead in components and other UI elements @mixin primitives { + --h-gray: 220; + // Gray - --prim-gray-h: 220; + --p-gray-820: hsl(var(--h-gray), 1%, 18%); + --p-gray-800: hsl(var(--h-gray), 1%, 20%); + --p-gray-780: hsl(var(--h-gray), 1%, 22%); + --p-gray-740: hsl(var(--h-gray), 2%, 26%); + --p-gray-710: hsl(var(--h-gray), 2%, 29%); + --p-gray-670: hsl(var(--h-gray), 2%, 33%); + --p-gray-540: hsl(var(--h-gray), 4%, 46%); + --p-gray-490: hsl(var(--h-gray), 3%, 51%); + --p-gray-420: hsl(var(--h-gray), 4%, 58%); + --p-gray-320: hsl(var(--h-gray), 10%, 68%); + --p-gray-200: hsl(var(--h-gray), 18%, 80%); + --p-gray-120: hsl(var(--h-gray), 25%, 88%); + --p-gray-070: hsl(var(--h-gray), 32%, 93%); + --p-gray-040: hsl(var(--h-gray), 40%, 96%); + --p-gray-030: hsl(var(--h-gray), 43%, 97%); + --p-gray-025: hsl(var(--h-gray), 50%, 97.5%); + --p-gray-010: hsl(var(--h-gray), 50%, 99%); + --p-white: hsl(var(--h-gray), 50%, 100%); - --prim-gray-820: hsl(var(--prim-gray-h), 1%, 18%); - --prim-gray-800: hsl(var(--prim-gray-h), 1%, 20%); - --prim-gray-780: hsl(var(--prim-gray-h), 1%, 22%); - --prim-gray-740: hsl(var(--prim-gray-h), 2%, 26%); - --prim-gray-710: hsl(var(--prim-gray-h), 2%, 29%); - --prim-gray-670: hsl(var(--prim-gray-h), 2%, 33%); - --prim-gray-540: hsl(var(--prim-gray-h), 4%, 46%); - --prim-gray-490: hsl(var(--prim-gray-h), 3%, 51%); - --prim-gray-420: hsl(var(--prim-gray-h), 4%, 58%); - --prim-gray-320: hsl(var(--prim-gray-h), 10%, 68%); - --prim-gray-320-alpha-010: hsla(var(--prim-gray-h), 10%, 68%, 0.1); - --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), 43%, 97%); - --prim-gray-25: hsl(var(--prim-gray-h), 50%, 97.5%); - --prim-gray-10: hsl(var(--prim-gray-h), 50%, 99%); - --prim-gray-0-alpha-075: hsla(var(--prim-gray-h), 50%, 100%, 0.75); - --prim-gray-0-alpha-030: hsla(var(--prim-gray-h), 50%, 100%, 0.3); - --prim-gray-0-alpha-025: hsla(var(--prim-gray-h), 50%, 100%, 0.25); - --prim-gray-0-alpha-010: hsla(var(--prim-gray-h), 50%, 100%, 0.1); - --prim-gray-0: hsl(var(--prim-gray-h), 50%, 100%); + // Gray alpha + --p-gray-320-a-010: hsla(var(--h-gray), 10%, 68%, 0.1); + --p-gray-70-a-010: hsla(var(--h-gray), 32%, 93%, 0.1); - // Color Primary - --prim-color-primary-h: 7; - --prim-color-primary-s: 100%; - --prim-color-primary-l: 68%; + // White alpha + --p-white-a-075: hsla(var(--h-gray), 50%, 100%, 0.75); + --p-white-a-030: hsla(var(--h-gray), 50%, 100%, 0.3); + --p-white-a-025: hsla(var(--h-gray), 50%, 100%, 0.25); + --p-white-a-020: hsla(var(--h-gray), 50%, 100%, 0.2); + --p-white-a-015: hsla(var(--h-gray), 50%, 100%, 0.15); + --p-white-a-010: hsla(var(--h-gray), 50%, 100%, 0.1); - --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%), - calc(var(--prim-color-primary-l) - 10%) - ); - --prim-color-primary: hsl( - var(--prim-color-primary-h), - var(--prim-color-primary-s), - var(--prim-color-primary-l) - ); - --prim-color-primary-alpha-010: hsla( - var(--prim-color-primary-h), - var(--prim-color-primary-s), - var(--prim-color-primary-l), - 0.1 - ); - --prim-color-primary-alpha-035: hsla( - var(--prim-color-primary-h), - var(--prim-color-primary-s), - var(--prim-color-primary-l), - 0.35 - ); - --prim-color-primary-alpha-050: hsla( - var(--prim-color-primary-h), - var(--prim-color-primary-s), - var(--prim-color-primary-l), - 0.5 - ); - --prim-color-primary-tint-100: hsl( - var(--prim-color-primary-h), - var(--prim-color-primary-s), - calc(var(--prim-color-primary-l) + 10%) - ); - --prim-color-primary-tint-200: hsl( - var(--prim-color-primary-h), - var(--prim-color-primary-s), - calc(var(--prim-color-primary-l) + 20%) - ); - --prim-color-primary-tint-250: hsl( - var(--prim-color-primary-h), - var(--prim-color-primary-s), - calc(var(--prim-color-primary-l) + 25%) - ); - --prim-color-primary-tint-270: hsl( - var(--prim-color-primary-h), - var(--prim-color-primary-s), - calc(var(--prim-color-primary-l) + 27%) - ); - --prim-color-primary-tint-300: hsl( - var(--prim-color-primary-h), - var(--prim-color-primary-s), - calc(var(--prim-color-primary-l) + 30%) - ); + // Primary color + --h-primary: 7; + --s-primary: 100%; + --l-primary: 68%; - // Color Secondary - --prim-color-secondary-h: 247; - --prim-color-secondary-s: 49%; - --prim-color-secondary-l: 53%; + --p-color-primary-420: hsl(7, 85%, 58%); + --p-color-primary-320: hsl(7, 100%, 68%); // Base + --p-color-primary-220: hsl(7, 100%, 78%); + --p-color-primary-120: hsl(7, 100%, 88%); + --p-color-primary-070: hsl(7, 100%, 93%); + --p-color-primary-050: hsl(7, 100%, 95%); + --p-color-primary-030: hsl(7, 100%, 98%); - --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), - calc(var(--prim-color-secondary-l) - 10%) - ); - --prim-color-secondary: hsl( - var(--prim-color-secondary-h), - var(--prim-color-secondary-s), - var(--prim-color-secondary-l) - ); - --prim-color-secondary-alpha-025: hsla( - var(--prim-color-secondary-h), - var(--prim-color-secondary-s), - var(--prim-color-secondary-l), - 0.25 - ); - --prim-color-secondary-alpha-010: hsla( - var(--prim-color-secondary-h), - var(--prim-color-secondary-s), - var(--prim-color-secondary-l), - 0.1 - ); - --prim-color-secondary-tint-100: hsl( - var(--prim-color-secondary-h), - var(--prim-color-secondary-s), - calc(var(--prim-color-secondary-l) + 10%) - ); - --prim-color-secondary-tint-200: hsl( - var(--prim-color-secondary-h), - var(--prim-color-secondary-s), - calc(var(--prim-color-secondary-l) + 20%) - ); - --prim-color-secondary-tint-300: hsl( - var(--prim-color-secondary-h), - var(--prim-color-secondary-s), - calc(var(--prim-color-secondary-l) + 30%) - ); - --prim-color-secondary-tint-400: hsl( - var(--prim-color-secondary-h), - var(--prim-color-secondary-s), - calc(var(--prim-color-secondary-l) + 40%) - ); + --p-color-primary-320-a-010: hsla(7, 100%, 68%, 0.1); + --p-color-primary-320-a-035: hsla(7, 100%, 68%, 0.35); + --p-color-primary-320-a-050: hsla(7, 100%, 68%, 0.5); + + // Secondary color + --p-color-secondary-720: hsl(247, 24%, 28%); + --p-color-secondary-570: hsl(247, 49%, 43%); + --p-color-secondary-470: hsl(247, 49%, 53%); // Base + --p-color-secondary-370: hsl(247, 49%, 63%); + --p-color-secondary-270: hsl(247, 49%, 73%); + --p-color-secondary-170: hsl(247, 49%, 83%); + --p-color-secondary-070: hsl(247, 49%, 93%); + + --p-color-secondary-470-a-010: hsla(247, 49%, 53%, 0.1); + --p-color-secondary-470-a-025: hsla(247, 49%, 53%, 0.25); // Color Alternate A - --prim-color-alt-a-h: 150; - --prim-color-alt-a-s: 60%; - --prim-color-alt-a-l: 40%; + --p-color-alt-a-800: hsl(150, 45%, 20%); + --p-color-alt-a-700: hsl(150, 53%, 30%); + --p-color-alt-a-600: hsl(150, 60%, 40%); // Base + --p-color-alt-a-300: hsl(150, 60%, 70%); + --p-color-alt-a-200: hsl(150, 60%, 80%); + --p-color-alt-a-100: hsl(150, 60%, 90%); + --p-color-alt-a-050: hsl(150, 60%, 95%); - --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), - calc(var(--prim-color-alt-a-s) - 15%), - calc(var(--prim-color-alt-a-l) - 10%) - ); - --prim-color-alt-a: hsl( - var(--prim-color-alt-a-h), - var(--prim-color-alt-a-s), - var(--prim-color-alt-a-l) - ); - --prim-color-alt-a-alpha-025: hsl( - var(--prim-color-alt-a-h), - var(--prim-color-alt-a-s), - var(--prim-color-alt-a-l), - 0.25 - ); - --prim-color-alt-a-alpha-015: hsl( - var(--prim-color-alt-a-h), - var(--prim-color-alt-a-s), - var(--prim-color-alt-a-l), - 0.15 - ); - --prim-color-alt-a-tint-300: hsl( - var(--prim-color-alt-a-h), - var(--prim-color-alt-a-s), - calc(var(--prim-color-alt-a-l) + 30%) - ); - --prim-color-alt-a-tint-400: hsl( - var(--prim-color-alt-a-h), - var(--prim-color-alt-a-s), - calc(var(--prim-color-alt-a-l) + 40%) - ); - --prim-color-alt-a-tint-500: hsl( - var(--prim-color-alt-a-h), - var(--prim-color-alt-a-s), - calc(var(--prim-color-alt-a-l) + 50%) - ); - --prim-color-alt-a-tint-550: hsl( - var(--prim-color-alt-a-h), - var(--prim-color-alt-a-s), - calc(var(--prim-color-alt-a-l) + 55%) - ); + --p-color-alt-a-600-a-015: hsla(150, 60%, 40%, 0.15); + --p-color-alt-a-600-a-025: hsla(150, 60%, 40%, 0.25); // Color Alternate B - --prim-color-alt-b-h: 36; - --prim-color-alt-b-s: 77%; - --prim-color-alt-b-l: 57%; + --p-color-alt-b-780: hsl(36, 42%, 22%); + --p-color-alt-b-680: hsl(36, 42%, 32%); + --p-color-alt-b-530: hsl(36, 77%, 47%); + --p-color-alt-b-430: hsl(36, 77%, 57%); // Base + --p-color-alt-b-280: hsl(36, 77%, 72%); + --p-color-alt-b-180: hsl(36, 77%, 82%); + --p-color-alt-b-130: hsl(36, 77%, 87%); + --p-color-alt-b-030: hsl(36, 77%, 97%); - --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), - calc(var(--prim-color-alt-b-l) - 10%) - ); - --prim-color-alt-b: hsl( - var(--prim-color-alt-b-h), - var(--prim-color-alt-b-s), - var(--prim-color-alt-b-l) - ); - --prim-color-alt-b-alpha-02: hsla( - var(--prim-color-alt-b-h), - var(--prim-color-alt-b-s), - 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), - calc(var(--prim-color-alt-b-l) + 40%) - ); + --p-color-alt-b-430-a-020: hsla(36, 77%, 57%, 0.2); // Color Alternate C - --prim-color-alt-c-h: 355; - --prim-color-alt-c-s: 83%; - --prim-color-alt-c-l: 52%; + --p-color-alt-c-730: hsl(355, 43%, 27%); + --p-color-alt-c-630: hsl(355, 53%, 37%); + --p-color-alt-c-580: hsl(355, 83%, 42%); + --p-color-alt-c-480: hsl(355, 83%, 52%); // Base + --p-color-alt-c-330: hsl(355, 83%, 67%); + --p-color-alt-c-230: hsl(355, 83%, 77%); + --p-color-alt-c-180: hsl(355, 83%, 82%); + --p-color-alt-c-080: hsl(355, 83%, 92%); + --p-color-alt-c-030: hsl(355, 83%, 97%); - --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), - calc(var(--prim-color-alt-c-l) - 10%) - ); - --prim-color-alt-c: hsl( - var(--prim-color-alt-c-h), - var(--prim-color-alt-c-s), - var(--prim-color-alt-c-l) - ); - --prim-color-alt-c-alpha-02: hsl( - var(--prim-color-alt-c-h), - var(--prim-color-alt-c-s), - var(--prim-color-alt-c-l), - 0.2 - ); - --prim-color-alt-c-tint-150: hsl( - var(--prim-color-alt-c-h), - var(--prim-color-alt-c-s), - calc(var(--prim-color-alt-c-l) + 15%) - ); - --prim-color-alt-c-tint-250: hsl( - var(--prim-color-alt-c-h), - 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), - calc(var(--prim-color-alt-c-l) + 40%) - ); - --prim-color-alt-c-tint-450: hsl( - var(--prim-color-alt-c-h), - var(--prim-color-alt-c-s), - calc(var(--prim-color-alt-c-l) + 45%) - ); + --p-color-alt-c-480-a-020: hsla(355, 83%, 52%, 0.2); + --p-color-alt-c-480-a-010: hsla(355, 83%, 52%, 0.1); // Color Alternate D - --prim-color-alt-d-h: 46; - --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), - calc(var(--prim-color-alt-d-l) - 15%) - ); - --prim-color-alt-d: hsl( - var(--prim-color-alt-d-h), - var(--prim-color-alt-d-s), - var(--prim-color-alt-d-l) - ); + --p-color-alt-d-780: hsl(46, 45%, 22%); + --p-color-alt-d-680: hsl(46, 45%, 32%); + --p-color-alt-d-230: hsl(46, 100%, 77%); + --p-color-alt-d-080: hsl(46, 100%, 92%); // Base // Color Alternate E - --prim-color-alt-e-h: 210; - --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), - calc(var(--prim-color-alt-e-l) - 15%) - ); - --prim-color-alt-e-shade-100: hsl( - var(--prim-color-alt-e-h), - var(--prim-color-alt-e-s), - calc(var(--prim-color-alt-e-l) - 10%) - ); - --prim-color-alt-e: hsl( - var(--prim-color-alt-e-h), - var(--prim-color-alt-e-s), - var(--prim-color-alt-e-l) - ); - --prim-color-alt-e-alpha-04: hsla( - var(--prim-color-alt-e-h), - var(--prim-color-alt-e-s), - 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%) - ); + --p-color-alt-e-780: hsl(210, 47%, 22%); + --p-color-alt-e-680: hsl(210, 57%, 32%); + --p-color-alt-e-580: hsl(210, 67%, 42%); + --p-color-alt-e-530: hsl(210, 67%, 47%); + --p-color-alt-e-430: hsl(210, 67%, 57%); // Base + --p-color-alt-e-180: hsl(210, 67%, 82%); + --p-color-alt-e-080: hsl(210, 67%, 92%); // Color Alternate F - --prim-color-alt-f-h: 72; - --prim-color-alt-f-s: 100%; - --prim-color-alt-f-l: 27%; - - --prim-color-alt-f: hsl( - var(--prim-color-alt-f-h), - var(--prim-color-alt-f-s), - var(--prim-color-alt-f-l) - ); - - --prim-color-alt-f-tint-150: hsl( - var(--prim-color-alt-f-h), - var(--prim-color-alt-f-s), - calc(var(--prim-color-alt-f-l) + 15%) - ); + --p-color-alt-f-560: hsl(147, 83%, 44%); // Base // Color Alternate G - --prim-color-alt-g-h: 276; - --prim-color-alt-g-s: 31%; - --prim-color-alt-g-l: 50%; + --p-color-alt-g-700: hsl(247, 10%, 30%); // Base - --prim-color-alt-g: hsl( - var(--prim-color-alt-g-h), - var(--prim-color-alt-g-s), - var(--prim-color-alt-g-l) - ); + --p-color-alt-g-700-a-075: hsla(247, 10%, 30%, 0.75); - --prim-color-alt-g-tint-150: hsl( - var(--prim-color-alt-g-h), - var(--prim-color-alt-g-s), - calc(var(--prim-color-alt-g-l) + 15%) - ); - - // Color Alternate H - --prim-color-alt-h-h: 184; - --prim-color-alt-h-s: 44%; - --prim-color-alt-h-l: 43%; - - --prim-color-alt-h: hsl( - var(--prim-color-alt-h-h), - var(--prim-color-alt-h-s), - var(--prim-color-alt-h-l) - ); - - // Color Alternate I - --prim-color-alt-i-h: 147; - --prim-color-alt-i-s: 83%; - --prim-color-alt-i-l: 44%; - - --prim-color-alt-i: hsl( - var(--prim-color-alt-i-h), - var(--prim-color-alt-i-s), - var(--prim-color-alt-i-l) - ); - - // Color Alternate J - --prim-color-alt-j-h: 247; - --prim-color-alt-j-s: 10%; - --prim-color-alt-j-l: 30%; - - --prim-color-alt-j: hsl( - var(--prim-color-alt-j-h), - var(--prim-color-alt-j-s), - var(--prim-color-alt-j-l) - ); - --prim-color-alt-j-alpha-075: hsla( - var(--prim-color-alt-j-h), - var(--prim-color-alt-j-s), - var(--prim-color-alt-j-l), - 0.75 - ); - - --prim-color-alt-j-alpha-095: hsla( - var(--prim-color-alt-j-h), - var(--prim-color-alt-j-s), - var(--prim-color-alt-j-l), - 0.95 - ); - - // Color Alternate K - Used for errors in dark mode - --prim-color-alt-k-h: 355; - --prim-color-alt-k-s: 100%; - --prim-color-alt-k-l: 69%; - - --prim-color-alt-k: hsl( - var(--prim-color-alt-k-h), - var(--prim-color-alt-k-s), - var(--prim-color-alt-k-l) - ); - - --prim-color-white: hsl(0, 0%, 100%); + // Color Alternate H - Used for errors in dark mode + --p-color-alt-h-310: hsl(355, 100%, 69%); // Base } :root { diff --git a/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss b/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss index 6321beaa3c..1c1bba636d 100644 --- a/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss +++ b/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss @@ -2,7 +2,7 @@ @mixin theme { // Primary tokens - --color-danger: var(--prim-color-alt-k); + --color-danger: var(--p-color-alt-h-310); // Diff colors (dark theme overrides) --diff-new: #38cb7a; @@ -16,27 +16,27 @@ --diff-del-faint: #4d3e3d; // Text - --color-text-dark: var(--prim-gray-40); - --color-text-base: var(--prim-gray-200); - --color-text-light: var(--prim-gray-320); - --color-text-lighter: var(--prim-gray-740); - --color-text-xlight: var(--prim-gray-820); - --color-text-danger: var(--prim-color-alt-c-tint-150); + --color-text-dark: var(--p-gray-040); + --color-text-base: var(--p-gray-200); + --color-text-light: var(--p-gray-320); + --color-text-lighter: var(--p-gray-740); + --color-text-xlight: var(--p-gray-820); + --color-text-danger: var(--p-color-alt-c-330); // Foreground - --color-foreground-xdark: var(--prim-gray-200); - --color-foreground-dark: var(--prim-gray-420); - --color-foreground-base: var(--prim-gray-670); - --color-foreground-light: var(--prim-gray-740); - --color-foreground-xlight: var(--prim-gray-820); + --color-foreground-xdark: var(--p-gray-200); + --color-foreground-dark: var(--p-gray-420); + --color-foreground-base: var(--p-gray-670); + --color-foreground-light: var(--p-gray-740); + --color-foreground-xlight: var(--p-gray-820); // Background - --color-background-dark: var(--prim-gray-70); - --color-background-medium: var(--prim-gray-540); - --color-background-base: var(--prim-gray-670); - --color-background-light-base: var(--prim-gray-780); - --color-background-light: var(--prim-gray-820); - --color-background-xlight: var(--prim-gray-740); + --color-background-dark: var(--p-gray-070); + --color-background-medium: var(--p-gray-540); + --color-background-base: var(--p-gray-670); + --color-background-light-base: var(--p-gray-780); + --color-background-light: var(--p-gray-820); + --color-background-xlight: var(--p-gray-740); --box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.1); --box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2); @@ -68,20 +68,20 @@ ); // LangChain - --color-lm-chat-messages-background: var(--prim-gray-820); - --color-lm-chat-bot-background: var(--prim-gray-740); - --color-lm-chat-bot-border: var(--prim-gray-490); - --color-lm-chat-user-background: var(--prim-color-alt-a-shade-100); - --color-lm-chat-user-border: var(--prim-color-alt-a); + --color-lm-chat-messages-background: var(--p-gray-820); + --color-lm-chat-bot-background: var(--p-gray-740); + --color-lm-chat-bot-border: var(--p-gray-490); + --color-lm-chat-user-background: var(--p-color-alt-a-700); + --color-lm-chat-user-border: var(--p-color-alt-a-600); // Canvas - --color-canvas-background: var(--prim-gray-820); - --color-canvas-background-h: var(--prim-gray-h); // Used for connectors labels background + --color-canvas-background: var(--p-gray-820); + --color-canvas-background-h: var(--h-gray); // Used for connectors labels background --color-canvas-background-s: 1%; --color-canvas-background-l: 18%; - --color-canvas-dot: var(--prim-gray-670); - --color-canvas-read-only-line: var(--prim-gray-800); - --color-canvas-selected: var(--prim-gray-0-alpha-025); + --color-canvas-dot: var(--p-gray-670); + --color-canvas-read-only-line: var(--p-gray-800); + --color-canvas-selected: var(--p-white-a-025); --color-canvas-selected-transparent: var(--color-canvas-selected); --color-canvas-label-background: hsla( var(--color-canvas-background-h), @@ -91,43 +91,43 @@ ); // Nodes - --color-node-background: var(--prim-gray-740); - --color-node-executing-background: var(--prim-gray-670); - --color-node-executing-other-background: var(--prim-gray-670); - --color-node-pinned-border: var(--prim-color-secondary-tint-100); - --node-type-main-color: var(--prim-gray-420); + --color-node-background: var(--p-gray-740); + --color-node-executing-background: var(--p-gray-670); + --color-node-executing-other-background: var(--p-gray-670); + --color-node-pinned-border: var(--p-color-secondary-370); + --node-type-main-color: var(--p-gray-420); // Sticky - --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: var(--p-color-alt-d-780); + --color-sticky-border: var(--p-color-alt-d-680); + --color-sticky-font: var(--p-gray-040); + --color-sticky-code-font: var(--p-color-secondary-170); + --color-sticky-code-background: var(--p-gray-70-a-010); - --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); + --color-sticky-background-1: var(--p-color-alt-d-780); + --color-sticky-border-1: var(--p-color-alt-d-680); + --color-sticky-background-2: var(--p-color-alt-b-780); + --color-sticky-border-2: var(--p-color-alt-b-680); + --color-sticky-background-3: var(--p-color-alt-c-730); + --color-sticky-border-3: var(--p-color-alt-c-630); + --color-sticky-background-4: var(--p-color-alt-a-800); + --color-sticky-border-4: var(--p-color-alt-a-700); + --color-sticky-background-5: var(--p-color-alt-e-780); + --color-sticky-border-5: var(--p-color-alt-e-680); + --color-sticky-background-6: var(--p-color-secondary-720); + --color-sticky-border-6: var(--p-color-secondary-570); + --color-sticky-background-7: var(--p-gray-740); + --color-sticky-border-7: var(--p-gray-670); // NodeIcon - --color-node-icon-gray: var(--prim-gray-120); - --color-node-icon-black: var(--prim-gray-10); + --color-node-icon-gray: var(--p-gray-120); + --color-node-icon-black: var(--p-gray-010); --color-node-icon-blue: #898fff; --color-node-icon-light-blue: #58abff; --color-node-icon-dark-blue: #7ba7ff; - --color-node-icon-orange-red: var(--prim-color-primary); + --color-node-icon-orange-red: var(--p-color-primary-320); --color-node-icon-pink-red: #f85d82; - --color-node-icon-red: var(--prim-color-alt-k); + --color-node-icon-red: var(--p-color-alt-h-310); --color-node-icon-light-green: #20b69e; --color-node-icon-green: #38cb7a; --color-node-icon-dark-green: #86decc; @@ -135,19 +135,19 @@ --color-node-icon-crimson: #f188a2; // Expressions, autocomplete, infobox - --color-valid-resolvable-foreground: var(--prim-color-alt-a-tint-300); - --color-valid-resolvable-background: var(--prim-color-alt-a-alpha-025); - --color-invalid-resolvable-foreground: var(--prim-color-alt-c-tint-250); - --color-invalid-resolvable-background: var(--prim-color-alt-c-alpha-02); + --color-valid-resolvable-foreground: var(--p-color-alt-a-300); + --color-valid-resolvable-background: var(--p-color-alt-a-600-a-025); + --color-invalid-resolvable-foreground: var(--p-color-alt-c-230); + --color-invalid-resolvable-background: var(--p-color-alt-c-480-a-020); --color-pending-resolvable-foreground: var(--color-text-base); - --color-pending-resolvable-background: var(--prim-gray-70-alpha-01); - --color-expression-editor-background: var(--prim-gray-800); - --color-expression-editor-modal-background: var(--prim-gray-800); - --color-expression-syntax-example: var(--prim-gray-670); - --color-autocomplete-item-selected: var(--prim-color-secondary-tint-200); - --color-autocomplete-section-header-border: var(--prim-gray-540); - --color-infobox-background: var(--prim-gray-780); - --color-infobox-examples-border-color: var(--prim-gray-670); + --color-pending-resolvable-background: var(--p-gray-70-a-010); + --color-expression-editor-background: var(--p-gray-800); + --color-expression-editor-modal-background: var(--p-gray-800); + --color-expression-syntax-example: var(--p-gray-670); + --color-autocomplete-item-selected: var(--p-color-secondary-270); + --color-autocomplete-section-header-border: var(--p-gray-540); + --color-infobox-background: var(--p-gray-780); + --color-infobox-examples-border-color: var(--p-gray-670); // Code --color-code-tags-string: #9ecbff; @@ -164,58 +164,58 @@ --color-code-tags-heading: #79b8ff; --color-code-tags-invalid: #f97583; --color-code-tags-comment: #6a737d; - --color-json-default: var(--prim-color-secondary-tint-200); + --color-json-default: var(--p-color-secondary-270); --color-json-null: var(--color-danger); - --color-json-boolean: var(--prim-color-alt-a); - --color-json-number: var(--prim-color-alt-a); - --color-json-string: var(--prim-color-secondary-tint-200); + --color-json-boolean: var(--p-color-alt-a-600); + --color-json-number: var(--p-color-alt-a-600); + --color-json-string: var(--p-color-secondary-270); --color-json-key: var(--color-text-dark); - --color-json-brackets: var(--prim-gray-670); - --color-json-brackets-hover: var(--prim-color-alt-e); - --color-json-line: var(--prim-gray-200); + --color-json-brackets: var(--p-gray-670); + --color-json-brackets-hover: var(--p-color-alt-e-430); + --color-json-line: var(--p-gray-200); --color-json-highlight: var(--color-background-base); - --color-code-background: var(--prim-gray-820); - --color-code-background-readonly: var(--prim-gray-740); - --color-code-lineHighlight: var(--prim-gray-320-alpha-010); - --color-code-foreground: var(--prim-gray-70); - --color-code-caret: var(--prim-gray-10); + --color-code-background: var(--p-gray-820); + --color-code-background-readonly: var(--p-gray-740); + --color-code-lineHighlight: var(--p-gray-320-alpha-010); + --color-code-foreground: var(--p-gray-070); + --color-code-caret: var(--p-gray-010); --color-code-selection: #3392ff44; --color-code-selection-highlight: #17e5e633; - --color-code-gutter-background: var(--prim-gray-820); - --color-code-gutter-foreground: var(--prim-gray-320); - --color-code-gutter-foreground-active: var(--prim-gray-10); - --color-code-indentation-marker: var(--prim-gray-740); - --color-code-indentation-marker-active: var(--prim-gray-670); - --color-line-break: var(--prim-gray-420); - --color-code-line-break: var(--prim-color-secondary-tint-100); + --color-code-gutter-background: var(--p-gray-820); + --color-code-gutter-foreground: var(--p-gray-320); + --color-code-gutter-foreground-active: var(--p-gray-010); + --color-code-indentation-marker: var(--p-gray-740); + --color-code-indentation-marker-active: var(--p-gray-670); + --color-line-break: var(--p-gray-420); + --color-code-line-break: var(--p-color-secondary-370); // Tag - --tag-background-color: var(--prim-gray-670); - --tag-background-hover-color: var(--prim-gray-540); - --tag-border-color: var(--prim-gray-710); - --tag-border-hover-color: var(--prim-gray-670); + --tag-background-color: var(--p-gray-670); + --tag-background-hover-color: var(--p-gray-540); + --tag-border-color: var(--p-gray-710); + --tag-border-hover-color: var(--p-gray-670); --tag-text-color: var(--color-text-dark); // Variables - --color-variables-usage-font: var(--prim-color-alt-a-tint-300); - --color-variables-usage-syntax-bg: var(--prim-color-alt-a-alpha-025); + --color-variables-usage-font: var(--p-color-alt-a-300); + --color-variables-usage-syntax-bg: var(--p-color-alt-a-600-a-025); // Button primary - --color-button-primary-focus-outline: var(--prim-color-primary-alpha-035); - --color-button-primary-disabled-font: var(--prim-gray-0-alpha-030); + --color-button-primary-focus-outline: var(--p-color-primary-320-a-035); + --color-button-primary-disabled-font: var(--p-white-a-030); --color-button-primary-disabled-border: transparent; - --color-button-primary-disabled-background: var(--prim-color-primary-alpha-050); + --color-button-primary-disabled-background: var(--p-color-primary-320-a-050); // Button secondary - --color-button-secondary-font: var(--prim-gray-70); - --color-button-secondary-border: var(--prim-gray-70); + --color-button-secondary-font: var(--p-gray-070); + --color-button-secondary-border: var(--p-gray-070); --color-button-secondary-background: transparent; - --color-button-secondary-hover-active-focus-font: var(--prim-color-primary-tint-100); + --color-button-secondary-hover-active-focus-font: var(--p-color-primary-220); --color-button-secondary-hover-background: transparent; - --color-button-secondary-active-focus-background: var(--prim-color-primary-alpha-010); - --color-button-secondary-focus-outline: var(--prim-color-primary-alpha-035); - --color-button-secondary-disabled-font: var(--prim-gray-0-alpha-030); - --color-button-secondary-disabled-border: var(--prim-gray-0-alpha-030); + --color-button-secondary-active-focus-background: var(--p-color-primary-320-a-010); + --color-button-secondary-focus-outline: var(--p-color-primary-320-a-035); + --color-button-secondary-disabled-font: var(--p-white-a-030); + --color-button-secondary-disabled-border: var(--p-white-a-030); // Button highlight --color-button-highlight-font: var(--prim-gray-320); @@ -230,94 +230,94 @@ --color-button-highlight-disabled-border: transparent; // Button success, warning, danger - --color-button-danger-font: var(--prim-gray-0); + --color-button-danger-font: var(--p-white); --color-button-danger-border: transparent; - --color-button-danger-focus-outline: var(--prim-color-alt-c-tint-250); - --color-button-danger-disabled-font: var(--prim-gray-0-alpha-025); + --color-button-danger-focus-outline: var(--p-color-alt-c-230); + --color-button-danger-disabled-font: var(--p-white-a-025); --color-button-danger-disabled-border: transparent; - --color-button-danger-disabled-background: var(--prim-color-alt-c-alpha-02); + --color-button-danger-disabled-background: var(--p-color-alt-c-480-a-020); // Text button - --color-text-button-secondary-font: var(--prim-gray-320); + --color-text-button-secondary-font: var(--p-gray-320); // Node Creator Button --color-button-node-creator-border-font: var(--color-button-secondary-font); --color-button-node-creator-hover-font: var(--color-button-secondary-hover-active-focus-font); - --color-button-node-creator-hover-border: var(--prim-color-primary); - --color-button-node-creator-background: var(--prim-color-primary-alpha-010); + --color-button-node-creator-hover-border: var(--p-color-primary-320); + --color-button-node-creator-background: var(--p-color-primary-320-a-010); // Table - --color-table-header-background: var(--prim-gray-740); - --color-table-row-background: var(--prim-gray-820); - --color-table-row-even-background: var(--prim-gray-800); - --color-table-row-hover-background: var(--prim-gray-740); + --color-table-header-background: var(--p-gray-740); + --color-table-row-background: var(--p-gray-820); + --color-table-row-even-background: var(--p-gray-800); + --color-table-row-hover-background: var(--p-gray-740); --color-table-row-highlight-background: var(--color-warning-tint-1); // Notification - --color-notification-background: var(--prim-gray-740); + --color-notification-background: var(--p-gray-740); // Execution --execution-card-background: var(--color-foreground-light); --execution-card-background-hover: var(--color-foreground-base); - --execution-selector-background: var(--prim-gray-740); + --execution-selector-background: var(--p-gray-740); --execution-selector-text: var(--color-text-base); --execution-select-all-text: var(--color-text-base); - --execution-card-text-waiting: var(--prim-color-secondary-tint-100); + --execution-card-text-waiting: var(--p-color-secondary-370); // NDV - --color-run-data-background: var(--prim-gray-800); - --color-ndvv2-run-data-background: var(--prim-gray-800); - --color-ndv-droppable-parameter: var(--prim-color-primary); - --color-ndv-droppable-parameter-background: var(--prim-color-primary-alpha-010); - --color-ndv-droppable-parameter-active-background: var(--prim-color-alt-a-alpha-015); - --color-ndv-back-font: var(--prim-gray-0); + --color-run-data-background: var(--p-gray-800); + --color-ndvv2-run-data-background: var(--p-gray-800); + --color-ndv-droppable-parameter: var(--p-color-primary-320); + --color-ndv-droppable-parameter-background: var(--p-color-primary-320-a-010); + --color-ndv-droppable-parameter-active-background: var(--p-color-alt-a-600-a-015); + --color-ndv-back-font: var(--p-white); --color-ndv-overlay-background: var(--prim-color-alt-j-alpha-095); // Notice - --color-notice-warning-border: var(--prim-color-alt-b-tint-250); - --color-notice-warning-background: var(--prim-color-alt-b-alpha-02); - --color-notice-font: var(--prim-gray-0); + --color-notice-warning-border: var(--p-color-alt-b-180); + --color-notice-warning-background: var(--p-color-alt-b-430-a-020); + --color-notice-font: var(--p-white); // Callout - --color-callout-info-border: var(--prim-gray-670); - --color-callout-info-background: var(--prim-gray-740); - --color-callout-info-font: var(--prim-gray-0); + --color-callout-info-border: var(--p-gray-670); + --color-callout-info-background: var(--p-gray-740); + --color-callout-info-font: var(--p-white); --color-callout-success-border: var(--color-success); - --color-callout-success-background: var(--prim-color-alt-a-shade-200); - --color-callout-success-font: var(--prim-gray-0); + --color-callout-success-background: var(--p-color-alt-a-800); + --color-callout-success-font: var(--p-white); --color-callout-warning-border: var(--color-warning); - --color-callout-warning-background: var(--prim-color-alt-b-shade-350); - --color-callout-warning-font: var(--prim-gray-0); + --color-callout-warning-background: var(--p-color-alt-b-780); + --color-callout-warning-font: var(--p-white); --color-callout-danger-border: var(--color-danger); - --color-callout-danger-background: var(--prim-color-alt-c-shade-250); - --color-callout-danger-font: var(--prim-gray-0); + --color-callout-danger-background: var(--p-color-alt-c-730); + --color-callout-danger-font: var(--p-white); --color-callout-danger-icon: var(--color-danger); --color-callout-secondary-border: var(--color-secondary); - --color-callout-secondary-background: var(--prim-color-secondary-alpha-025); - --color-callout-secondary-font: var(--prim-gray-0); + --color-callout-secondary-background: var(--p-color-secondary-470-a-025); + --color-callout-secondary-font: var(--p-white); // Dialogs and overlays - --color-dialog-background: var(--prim-gray-800); - --color-dialog-overlay-background: var(--prim-color-alt-j-alpha-075); - --color-dialog-overlay-background-dark: var(--prim-color-alt-j-alpha-075); + --color-dialog-background: var(--p-gray-800); + --color-dialog-overlay-background: var(--p-color-alt-g-700-a-075); + --color-dialog-overlay-background-dark: var(--p-color-alt-g-700-a-075); // Avatar - --color-avatar-font: var(--prim-gray-0); + --color-avatar-font: var(--p-white); // NPS Survey - --color-nps-survey-background: var(--prim-gray-740); - --color-nps-survey-font: var(--prim-gray-0); + --color-nps-survey-background: var(--p-gray-740); + --color-nps-survey-font: var(--p-white); // Switch (Activation, boolean) - --color-switch-background: var(--prim-gray-820); - --color-switch-border-color: var(--prim-gray-670); - --color-switch-toggle: var(--prim-gray-40); + --color-switch-background: var(--p-gray-820); + --color-switch-border-color: var(--p-gray-670); + --color-switch-toggle: var(--p-gray-040); // Action Dropdown --color-action-dropdown-item-active-background: var(--color-background-xlight); // Input Triple - --color-background-input-triple: var(--prim-gray-800); + --color-background-input-triple: var(--p-gray-800); // Node error --color-node-error-output-text-color: var(--color-danger); @@ -328,7 +328,7 @@ --color-mfa-lose-access-text-color: var(--color-danger); // Text highlight - --color-text-highlight-background: var(--prim-color-alt-d-shade-600); + --color-text-highlight-background: var(--p-color-alt-d-680); // AI --node-type-background-l: 20%; @@ -500,8 +500,8 @@ ); // Various - --color-info-tint-1: var(--prim-gray-420); - --color-info-tint-2: var(--prim-gray-740); + --color-info-tint-1: var(--p-gray-420); + --color-info-tint-2: var(--p-gray-740); --border-color-base: var(--color-foreground-base); --border-color-light: var(--color-foreground-light); --border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base); @@ -512,15 +512,15 @@ var(--node-type-supplemental-label-color-l) ); --color-configurable-node-name: var(--color-text-dark); - --color-secondary-link: var(--prim-color-secondary-tint-200); - --color-secondary-link-hover: var(--prim-color-secondary-tint-100); - // Params + --color-secondary-link: var(--p-color-secondary-270); + --color-secondary-link-hover: var(--p-color-secondary-370); + //Params --color-icon-base: var(--color-text-light); - --color-icon-hover: var(--prim-color-primary); + --color-icon-hover: var(--p-color-primary-320); - --color-menu-background: var(--prim-gray-740); - --color-menu-hover-background: var(--prim-gray-670); - --color-menu-active-background: var(--prim-gray-670); + --color-menu-background: var(--p-gray-740); + --color-menu-hover-background: var(--p-gray-670); + --color-menu-active-background: var(--p-gray-670); } body[data-theme='dark'] { diff --git a/packages/frontend/@n8n/design-system/src/css/_tokens.scss b/packages/frontend/@n8n/design-system/src/css/_tokens.scss index ca6f941527..8e90181b76 100644 --- a/packages/frontend/@n8n/design-system/src/css/_tokens.scss +++ b/packages/frontend/@n8n/design-system/src/css/_tokens.scss @@ -1,46 +1,46 @@ @use 'sass:math'; @mixin theme { - --color-primary-h: var(--prim-color-primary-h); - --color-primary-s: var(--prim-color-primary-s); + --color-primary-h: var(--h-primary); + --color-primary-s: var(--s-primary); --color-primary-l: 68%; // Primary tokens // Primary - --color-primary-shade-1: var(--prim-color-primary-shade-100); - --color-primary: var(--prim-color-primary); - --color-primary-tint-1: var(--prim-color-primary-tint-200); - --color-primary-tint-2: var(--prim-color-primary-tint-250); - --color-primary-tint-3: var(--prim-color-primary-tint-300); + --color-primary-shade-1: var(--p-color-primary-420); + --color-primary: var(--p-color-primary-320); + --color-primary-tint-1: var(--p-color-primary-120); + --color-primary-tint-2: var(--p-color-primary-070); + --color-primary-tint-3: var(--p-color-primary-030); // Secondary - --color-secondary-shade-1: var(--prim-color-secondary-shade-100); - --color-secondary: var(--prim-color-secondary); - --color-secondary-tint-1: var(--prim-color-secondary-tint-300); - --color-secondary-tint-3: var(--prim-color-secondary-tint-400); + --color-secondary-shade-1: var(--p-color-secondary-570); + --color-secondary: var(--p-color-secondary-470); + --color-secondary-tint-1: var(--p-color-secondary-170); + --color-secondary-tint-3: var(--p-color-secondary-070); // Success - --color-success-shade-1: var(--prim-color-alt-a-shade-100); - --color-success: var(--prim-color-alt-a); - --color-success-light: var(--prim-color-alt-a-tint-300); - --color-success-light-2: var(--prim-color-alt-a-tint-400); - --color-success-tint-1: var(--prim-color-alt-a-tint-500); - --color-success-tint-2: var(--prim-color-alt-a-tint-550); + --color-success-shade-1: var(--p-color-alt-a-700); + --color-success: var(--p-color-alt-a-600); + --color-success-light: var(--p-color-alt-a-300); + --color-success-light-2: var(--p-color-alt-a-200); + --color-success-tint-1: var(--p-color-alt-a-100); + --color-success-tint-2: var(--p-color-alt-a-050); // Warning - --color-warning-shade-1: var(--prim-color-alt-b-shade-100); - --color-warning: var(--prim-color-alt-b); - --color-warning-tint-1: var(--prim-color-alt-b-tint-250); - --color-warning-tint-2: var(--prim-color-alt-b-tint-400); + --color-warning-shade-1: var(--p-color-alt-b-530); + --color-warning: var(--p-color-alt-b-430); + --color-warning-tint-1: var(--p-color-alt-b-180); + --color-warning-tint-2: var(--p-color-alt-b-030); // Danger - --color-danger-shade-1: var(--prim-color-alt-c-shade-100); - --color-danger: var(--prim-color-alt-c); - --color-danger-light: var(--prim-color-alt-c-tint-150); - --color-danger-light-2: var(--prim-color-alt-c-tint-250); - --color-danger-tint-1: var(--prim-color-alt-c-tint-400); - --color-danger-tint-2: var(--prim-color-alt-c-tint-450); + --color-danger-shade-1: var(--p-color-alt-c-580); + --color-danger: var(--p-color-alt-c-480); + --color-danger-light: var(--p-color-alt-c-330); + --color-danger-light-2: var(--p-color-alt-c-230); + --color-danger-tint-1: var(--p-color-alt-c-080); + --color-danger-tint-2: var(--p-color-alt-c-030); // Diff colors --diff-new: #0eab54; @@ -54,45 +54,45 @@ --diff-del-faint: #ffedec; // Text - --color-text-dark: var(--prim-gray-740); - --color-text-base: var(--prim-gray-540); - --color-text-light: var(--prim-gray-420); - --color-text-lighter: var(--prim-gray-120); - --color-text-xlight: var(--prim-gray-0); - --color-text-danger: var(--prim-color-alt-c); + --color-text-dark: var(--p-gray-740); + --color-text-base: var(--p-gray-540); + --color-text-light: var(--p-gray-420); + --color-text-lighter: var(--p-gray-120); + --color-text-xlight: var(--p-white); + --color-text-danger: var(--p-color-alt-c-480); // Foreground - --color-foreground-xdark: var(--prim-gray-490); - --color-foreground-dark: var(--prim-gray-200); - --color-foreground-base: var(--prim-gray-120); - --color-foreground-light: var(--prim-gray-70); - --color-foreground-xlight: var(--prim-gray-0); + --color-foreground-xdark: var(--p-gray-490); + --color-foreground-dark: var(--p-gray-200); + --color-foreground-base: var(--p-gray-120); + --color-foreground-light: var(--p-gray-070); + --color-foreground-xlight: var(--p-white); // Background - --color-background-dark: var(--prim-gray-820); - --color-background-medium: var(--prim-gray-120); - --color-background-base: var(--prim-gray-40); - --color-background-light-base: var(--prim-gray-25); - --color-background-light: var(--prim-gray-10); - --color-background-xlight: var(--prim-gray-0); + --color-background-dark: var(--p-gray-820); + --color-background-medium: var(--p-gray-120); + --color-background-base: var(--p-gray-040); + --color-background-light-base: var(--p-gray-025); + --color-background-light: var(--p-gray-010); + --color-background-xlight: var(--p-white); // Secondary tokens // LangChain --color-lm-chat-messages-background: var(--color-background-base); - --color-lm-chat-bot-background: var(--prim-gray-0); - --color-lm-chat-user-background: var(--prim-color-alt-a); + --color-lm-chat-bot-background: var(--p-white); + --color-lm-chat-user-background: var(--p-color-alt-a-600); --color-lm-chat-user-color: var(--color-text-xlight); // Canvas - --color-canvas-background: var(--prim-gray-10); - --color-canvas-background-h: var(--prim-gray-h); // Used for connectors labels background + --color-canvas-background: var(--p-gray-010); + --color-canvas-background-h: var(--h-gray); // Used for connectors labels background --color-canvas-background-s: 47%; --color-canvas-background-l: 99%; - --color-canvas-dot: var(--prim-gray-120); - --color-canvas-read-only-line: var(--prim-gray-30); - --color-canvas-selected: var(--prim-gray-70); - --color-canvas-selected-transparent: hsla(var(--prim-gray-h), 47%, 30%, 0.1); + --color-canvas-dot: var(--p-gray-120); + --color-canvas-read-only-line: var(--p-gray-030); + --color-canvas-selected: var(--p-gray-070); + --color-canvas-selected-transparent: hsla(var(--h-gray), 47%, 30%, 0.1); --color-canvas-label-background: hsla( var(--color-canvas-background-h), var(--color-canvas-background-s), @@ -106,29 +106,29 @@ --color-node-executing-other-background: var(--color-primary-tint-3); --color-node-pinned-border: var(--color-secondary); --color-node-running-border: var(--color-primary); - --node-type-main-color: var(--prim-gray-490); + --node-type-main-color: var(--p-gray-490); // Sticky - --color-sticky-background: var(--prim-color-alt-d); - --color-sticky-border: var(--prim-color-alt-d-shade-150); - --color-sticky-font: var(--prim-gray-740); + --color-sticky-background: var(--p-color-alt-d-080); + --color-sticky-border: var(--p-color-alt-d-230); + --color-sticky-font: var(--p-gray-740); --color-sticky-code-font: var(--color-secondary); --color-sticky-code-background: var(--color-background-base); --color-sticky-background-1: var(--color-sticky-background); --color-sticky-border-1: var(--color-sticky-border); - --color-sticky-background-2: var(--prim-color-alt-b-tint-300); - --color-sticky-border-2: var(--prim-color-alt-b-tint-150); - --color-sticky-background-3: var(--prim-color-alt-c-tint-400); - --color-sticky-border-3: var(--prim-color-alt-c-tint-300); - --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); + --color-sticky-background-2: var(--p-color-alt-b-130); + --color-sticky-border-2: var(--p-color-alt-b-280); + --color-sticky-background-3: var(--p-color-alt-c-080); + --color-sticky-border-3: var(--p-color-alt-c-180); + --color-sticky-background-4: var(--p-color-alt-a-100); + --color-sticky-border-4: var(--p-color-alt-a-300); + --color-sticky-background-5: var(--p-color-alt-e-080); + --color-sticky-border-5: var(--p-color-alt-e-180); + --color-sticky-background-6: var(--p-color-secondary-070); + --color-sticky-border-6: var(--p-color-secondary-170); + --color-sticky-background-7: var(--p-gray-010); + --color-sticky-border-7: var(--p-gray-120); // AI Assistant --color-askAssistant-button-background: var(--color-background-xlight); @@ -164,15 +164,15 @@ ); // NodeIcon - --color-node-icon-gray: var(--prim-gray-420); - --color-node-icon-black: var(--prim-gray-780); + --color-node-icon-gray: var(--p-gray-420); + --color-node-icon-black: var(--p-gray-780); --color-node-icon-blue: #3a42e9; --color-node-icon-light-blue: #5fabf7; --color-node-icon-dark-blue: #353f6e; --color-node-icon-orange: #ff965a; --color-node-icon-orange-red: #ff6d5a; --color-node-icon-pink-red: #ea4b71; - --color-node-icon-red: var(--prim-color-alt-c); + --color-node-icon-red: var(--p-color-alt-c-480); --color-node-icon-light-green: #31c4ab; --color-node-icon-green: #108e49; --color-node-icon-dark-green: #157562; @@ -181,15 +181,15 @@ --color-node-icon-crimson: #724; // Expressions, autocomplete, infobox - --color-valid-resolvable-foreground: var(--prim-color-alt-a); - --color-valid-resolvable-background: var(--prim-color-alt-a-tint-500); - --color-invalid-resolvable-foreground: var(--prim-color-alt-c); - --color-invalid-resolvable-background: var(--prim-color-alt-c-tint-450); + --color-valid-resolvable-foreground: var(--p-color-alt-a-600); + --color-valid-resolvable-background: var(--p-color-alt-a-100); + --color-invalid-resolvable-foreground: var(--p-color-alt-c-480); + --color-invalid-resolvable-background: var(--p-color-alt-c-030); --color-pending-resolvable-foreground: var(--color-text-base); - --color-pending-resolvable-background: var(--prim-gray-40); - --color-expression-editor-background: var(--prim-gray-0); + --color-pending-resolvable-background: var(--p-gray-040); + --color-expression-editor-background: var(--p-white); --color-expression-editor-modal-background: var(--color-background-base); - --color-expression-syntax-example: var(--prim-gray-40); + --color-expression-syntax-example: var(--p-gray-040); --color-autocomplete-item-selected: var(--color-secondary); --color-autocomplete-section-header-border: var(--color-foreground-light); --color-infobox-background: var(--color-background-light-base); @@ -210,38 +210,38 @@ --color-code-tags-heading: #005cc5; --color-code-tags-invalid: #cb2431; --color-code-tags-comment: #6a737d; - --color-json-default: var(--prim-color-secondary-shade-100); - --color-json-null: var(--prim-color-alt-c); - --color-json-boolean: var(--prim-color-alt-a); - --color-json-number: var(--prim-color-alt-a); - --color-json-string: var(--prim-color-secondary-shade-100); - --color-json-key: var(--prim-gray-670); - --color-json-brackets: var(--prim-gray-670); - --color-json-brackets-hover: var(--prim-color-alt-e); - --color-json-line: var(--prim-gray-200); - --color-json-highlight: var(--prim-gray-70); - --color-code-background: var(--prim-gray-0); - --color-code-background-readonly: var(--prim-gray-40); - --color-code-lineHighlight: var(--prim-gray-320-alpha-010); - --color-code-foreground: var(--prim-gray-670); - --color-code-caret: var(--prim-gray-820); + --color-json-default: var(--p-color-secondary-570); + --color-json-null: var(--p-color-alt-c-480); + --color-json-boolean: var(--p-color-alt-a-600); + --color-json-number: var(--p-color-alt-a-600); + --color-json-string: var(--p-color-secondary-570); + --color-json-key: var(--p-gray-670); + --color-json-brackets: var(--p-gray-670); + --color-json-brackets-hover: var(--p-color-alt-e-430); + --color-json-line: var(--p-gray-200); + --color-json-highlight: var(--p-gray-070); + --color-code-background: var(--p-white); + --color-code-background-readonly: var(--p-gray-040); + --color-code-lineHighlight: var(--p-gray-320-a-010); + --color-code-foreground: var(--p-gray-670); + --color-code-caret: var(--p-gray-820); --color-code-selection: #0366d625; --color-code-selection-highlight: #34d05840; - --color-code-gutter-background: var(--prim-gray-0); - --color-code-gutter-foreground: var(--prim-gray-320); - --color-code-gutter-foreground-active: var(--prim-gray-670); - --color-code-indentation-marker: var(--prim-gray-70); - --color-code-indentation-marker-active: var(--prim-gray-200); - --color-line-break: var(--prim-gray-320); - --color-code-line-break: var(--prim-color-secondary-tint-200); + --color-code-gutter-background: var(--p-white); + --color-code-gutter-foreground: var(--p-gray-320); + --color-code-gutter-foreground-active: var(--p-gray-670); + --color-code-indentation-marker: var(--p-gray-070); + --color-code-indentation-marker-active: var(--p-gray-200); + --color-line-break: var(--p-gray-320); + --color-code-line-break: var(--p-color-secondary-270); // Tag --tag-height: 20px; --tag-padding: 0 var(--spacing-4xs); - --tag-background-color: var(--prim-gray-40); - --tag-background-hover-color: var(--prim-gray-70); - --tag-border-color: var(--prim-gray-70); - --tag-border-hover-color: var(--prim-gray-120); + --tag-background-color: var(--p-gray-040); + --tag-background-hover-color: var(--p-gray-070); + --tag-border-color: var(--p-gray-070); + --tag-border-hover-color: var(--p-gray-120); --tag-border-radius: var(--border-radius-base); --tag-text-color: var(--color-text-base); --tag-font-size: var(--font-size-2xs); @@ -253,27 +253,27 @@ --color-variables-usage-syntax-bg: var(--color-success-tint-2); // Button primary - --color-button-primary-font: var(--prim-gray-0); - --color-button-primary-border: var(--prim-color-primary); - --color-button-primary-background: var(--prim-color-primary); - --color-button-primary-hover-active-border: var(--prim-color-primary-shade-100); - --color-button-primary-hover-active-focus-background: var(--prim-color-primary-shade-100); - --color-button-primary-focus-outline: var(--prim-color-primary-alpha-035); - --color-button-primary-disabled-font: var(--prim-gray-0-alpha-075); - --color-button-primary-disabled-border: var(--prim-color-primary-tint-200); - --color-button-primary-disabled-background: var(--prim-color-primary-tint-200); + --color-button-primary-font: var(--p-white); + --color-button-primary-border: var(--p-color-primary-320); + --color-button-primary-background: var(--p-color-primary-320); + --color-button-primary-hover-active-border: var(--p-color-primary-420); + --color-button-primary-hover-active-focus-background: var(--p-color-primary-420); + --color-button-primary-focus-outline: var(--p-color-primary-320-a-035); + --color-button-primary-disabled-font: var(--p-white-a-075); + --color-button-primary-disabled-border: var(--p-color-primary-120); + --color-button-primary-disabled-background: var(--p-color-primary-120); // Button secondary - --color-button-secondary-font: var(--prim-gray-670); - --color-button-secondary-border: var(--prim-gray-320); - --color-button-secondary-background: var(--prim-gray-0); - --color-button-secondary-hover-active-focus-font: var(--prim-color-primary-shade-100); - --color-button-secondary-hover-active-focus-border: var(--prim-color-primary); - --color-button-secondary-hover-background: var(--prim-color-primary-tint-300); - --color-button-secondary-active-focus-background: var(--prim-color-primary-tint-270); - --color-button-secondary-focus-outline: var(--prim-gray-120); - --color-button-secondary-disabled-font: var(--prim-gray-200); - --color-button-secondary-disabled-border: var(--prim-gray-200); + --color-button-secondary-font: var(--p-gray-670); + --color-button-secondary-border: var(--p-gray-320); + --color-button-secondary-background: var(--p-white); + --color-button-secondary-hover-active-focus-font: var(--p-color-primary-420); + --color-button-secondary-hover-active-focus-border: var(--p-color-primary-320); + --color-button-secondary-hover-background: var(--p-color-primary-030); + --color-button-secondary-active-focus-background: var(--p-color-primary-050); + --color-button-secondary-focus-outline: var(--p-gray-120); + --color-button-secondary-disabled-font: var(--p-gray-200); + --color-button-secondary-disabled-border: var(--p-gray-200); // Button highlight --color-button-highlight-font: var(--prim-gray-670); @@ -289,25 +289,25 @@ --color-button-highlight-disabled-background: transparent; // Button success, warning, danger - --color-button-success-font: var(--prim-gray-0); - --color-button-success-disabled-font: var(--prim-gray-0-alpha-075); + --color-button-success-font: var(--p-white); + --color-button-success-disabled-font: var(--p-white-a-075); --color-button-warning-font: var(--color-text-xlight); - --color-button-warning-disabled-font: var(--prim-gray-0-alpha-075); + --color-button-warning-disabled-font: var(--p-white-a-075); --color-button-danger-font: var(--color-text-xlight); --color-button-danger-border: var(--color-danger); --color-button-danger-focus-outline: var(--color-danger-tint-1); - --color-button-danger-disabled-font: var(--prim-gray-0-alpha-075); + --color-button-danger-disabled-font: var(--p-white-a-075); --color-button-danger-disabled-border: var(--color-danger-tint-1); --color-button-danger-disabled-background: var(--color-danger-tint-1); // Text button - --color-text-button-secondary-font: var(--prim-gray-670); + --color-text-button-secondary-font: var(--p-gray-670); // Node Creator Button - --color-button-node-creator-border-font: var(--prim-gray-540); - --color-button-node-creator-hover-font: var(--prim-color-primary); - --color-button-node-creator-hover-border: var(--prim-color-primary); - --color-button-node-creator-background: var(--prim-gray-0); + --color-button-node-creator-border-font: var(--p-gray-540); + --color-button-node-creator-hover-font: var(--p-color-primary-320); + --color-button-node-creator-hover-border: var(--p-color-primary-320); + --color-button-node-creator-background: var(--p-white); // Table --color-table-header-background: var(--color-background-base); @@ -320,12 +320,12 @@ --color-notification-background: var(--color-background-xlight); // Execution - --execution-card-border-new: var(--prim-gray-200); - --execution-card-border-success: var(--prim-color-alt-a-tint-300); - --execution-card-border-error: var(--prim-color-alt-c-tint-250); - --execution-card-border-waiting: var(--prim-color-secondary-tint-300); - --execution-card-border-running: var(--prim-color-alt-b-tint-250); - --execution-card-border-unknown: var(--prim-gray-120); + --execution-card-border-new: var(--p-gray-200); + --execution-card-border-success: var(--p-color-alt-a-300); + --execution-card-border-error: var(--p-color-alt-c-230); + --execution-card-border-waiting: var(--p-color-secondary-170); + --execution-card-border-running: var(--p-color-alt-b-180); + --execution-card-border-unknown: var(--p-gray-120); --execution-card-background: var(--color-foreground-xlight); --execution-card-background-hover: var(--color-foreground-light); --execution-card-text-waiting: var(--color-secondary); @@ -334,13 +334,13 @@ --execution-select-all-text: var(--color-danger); // NDV - --color-run-data-background: var(--prim-gray-70); - --color-ndvv2-run-data-background: var(--prim-gray-40); + --color-run-data-background: var(--p-gray-070); + --color-ndvv2-run-data-background: var(--p-gray-040); --color-ndv-droppable-parameter: var(--color-secondary); - --color-ndv-droppable-parameter-background: var(--prim-color-secondary-alpha-010); - --color-ndv-droppable-parameter-active-background: var(--prim-color-alt-a-alpha-015); + --color-ndv-droppable-parameter-background: var(--p-color-secondary-470-a-010); + --color-ndv-droppable-parameter-active-background: var(--p-color-alt-a-600-a-015); --color-ndv-overlay-background: var(--prim-color-alt-j-alpha-095); - --color-ndv-back-font: var(--prim-gray-0); + --color-ndv-back-font: var(--p-white); // Notice --color-notice-warning-border: var(--color-warning-tint-1); @@ -370,29 +370,29 @@ --color-callout-secondary-icon: var(--color-secondary); // Dialogs and overlays - --color-dialog-background: var(--prim-gray-0); - --color-dialog-overlay-background: var(--prim-gray-0-alpha-075); - --color-dialog-overlay-background-dark: var(--prim-color-alt-j-alpha-075); - --color-block-ui-overlay: var(--prim-gray-820); + --color-dialog-background: var(--p-white); + --color-dialog-overlay-background: var(--p-white-a-075); + --color-dialog-overlay-background-dark: var(--p-color-alt-g-700-a-075); + --color-block-ui-overlay: var(--p-gray-820); // Avatar --color-avatar-font: var(--color-text-xlight); // NPS Survey - --color-nps-survey-background: var(--prim-gray-740); - --color-nps-survey-font: var(--prim-gray-0); + --color-nps-survey-background: var(--p-gray-740); + --color-nps-survey-font: var(--p-white); // Action Dropdown --color-action-dropdown-item-active-background: var(--color-background-base); // Switch (Activation, boolean) - --color-switch-background: var(--prim-gray-420); - --color-switch-active-background: var(--prim-color-alt-i); + --color-switch-background: var(--p-gray-420); + --color-switch-active-background: var(--p-color-alt-f-560); --color-switch-border-color: transparent; - --color-switch-toggle: var(--prim-gray-0); + --color-switch-toggle: var(--p-white); // Feature Request - --color-feature-request-font: var(--prim-gray-0); + --color-feature-request-font: var(--p-white); // Input Triple --color-background-input-triple: var(--color-background-light); @@ -402,11 +402,14 @@ // MFA Recovery codes --color-mfa-recovery-code-background: var(--color-background-base); - --color-mfa-recovery-code-color: var(--prim-gray-490); + --color-mfa-recovery-code-color: var(--p-gray-490); --color-mfa-lose-access-text-color: var(--color-danger); // Text highlight - --color-text-highlight-background: var(--prim-color-alt-d-shade-150); + --color-text-highlight-background: var(--p-color-alt-d-230); + + // MFA Modal + --color-qr-code-border: var(--p-gray-010); // AI --node-type-background-l: 95%; @@ -578,22 +581,22 @@ ); // Various - --color-avatar-accent-1: var(--prim-gray-120); - --color-avatar-accent-2: var(--prim-color-alt-e-shade-100); - --color-info: var(--prim-gray-420); - --color-info-tint-1: var(--prim-gray-120); - --color-info-tint-2: var(--prim-gray-40); - --color-grey: var(--prim-gray-200); - --color-light-grey: var(--prim-gray-120); - --color-neutral: var(--prim-gray-490); + --color-avatar-accent-1: var(--p-gray-120); + --color-avatar-accent-2: var(--p-color-alt-e-530); + --color-info: var(--p-gray-420); + --color-info-tint-1: var(--p-gray-120); + --color-info-tint-2: var(--p-gray-040); + --color-grey: var(--p-gray-200); + --color-light-grey: var(--p-gray-120); + --color-neutral: var(--p-gray-490); --color-configurable-node-name: var(--color-text-dark); --color-secondary-link: var(--color-secondary); --color-secondary-link-hover: var(--color-secondary-shade-1); // Menu - --color-menu-background: var(--prim-gray-0); - --color-menu-hover-background: var(--prim-gray-120); - --color-menu-active-background: var(--prim-gray-120); + --color-menu-background: var(--p-white); + --color-menu-hover-background: var(--p-gray-120); + --color-menu-active-background: var(--p-gray-120); // Generated Color Shades from 50 to 950 // Not yet used in design system @@ -683,7 +686,7 @@ // Params --color-icon-base: var(--color-text-light); - --color-icon-hover: var(--prim-color-primary); + --color-icon-hover: var(--p-color-primary-320); } :root { diff --git a/packages/frontend/@n8n/design-system/src/css/common/var.scss b/packages/frontend/@n8n/design-system/src/css/common/var.scss index aa1fddd842..ee6eabf974 100644 --- a/packages/frontend/@n8n/design-system/src/css/common/var.scss +++ b/packages/frontend/@n8n/design-system/src/css/common/var.scss @@ -22,8 +22,6 @@ $color-white: var(--color-foreground-xlight); $color-black: var(--color-foreground-dark); $color-primary-light-1: var(--color-primary); -$color-primary-light-2: var(--prim-color-primary-tint-100); // ! TODO Token should be used here -$color-primary-light-3: var(--prim-color-primary-tint-100); // ! TODO Token should be used here $color-primary-light-4: var(--color-primary-tint-1); $color-primary-light-5: var(--color-primary-tint-1); $color-primary-light-6: var(--color-primary-tint-2); @@ -42,14 +40,10 @@ $color-warning-light: var(--color-warning-tint-2); $color-warning-lighter: var(--color-warning-tint-2); $color-danger-light-1: var(--color-danger); -$color-danger-light-3: var(--prim-color-alt-c-tint-150); // ! TODO Token should be used here -$color-danger-light-5: var(--prim-color-alt-c-tint-150); // ! TODO Token should be used here $color-danger-light: var(--color-danger-tint-1); $color-danger-lighter: var(--color-danger-tint-2); $color-info-light-1: var(-color-info); -$color-info-light-3: var(--prim-gray-320); // ! TODO Token should be used here -$color-info-light-5: var(--prim-gray-200); // ! TODO Token should be used here $color-info-lighter: var(--color-info-tint-2); // Background diff --git a/packages/frontend/@n8n/design-system/src/styleguide/colorsprimitives.stories.ts b/packages/frontend/@n8n/design-system/src/styleguide/colorsprimitives.stories.ts index 6f041cb13f..2382682e36 100644 --- a/packages/frontend/@n8n/design-system/src/styleguide/colorsprimitives.stories.ts +++ b/packages/frontend/@n8n/design-system/src/styleguide/colorsprimitives.stories.ts @@ -22,47 +22,39 @@ const Template = }); export const Gray = Template( - "", + "", ); export const Primary = Template( - "", + "", ); export const Secondary = Template( - "", + "", ); export const AlternateA = Template( - "", + "", ); export const AlternateB = Template( - "", + "", ); export const AlternateC = Template( - "", + "", ); export const AlternateD = Template( - "", + "", ); export const AlternateE = Template( - "", + "", ); -export const AlternateF = Template( - "", -); +export const AlternateF = Template(''); -export const AlternateG = Template( - "", -); +export const AlternateG = Template(''); -export const AlternateH = Template(''); - -export const AlternateI = Template(''); - -export const AlternateJ = Template(''); +export const AlternateH = Template(''); diff --git a/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue index 38a246df98..6d12aa0f10 100644 --- a/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue +++ b/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue @@ -341,7 +341,7 @@ function hideGithubButton() { cursor: pointer; &:hover { - color: var(--prim-color-primary-shade-100); + color: var(--p-color-primary-420); } } .github-button-container { diff --git a/packages/frontend/editor-ui/src/components/MfaSetupModal.vue b/packages/frontend/editor-ui/src/components/MfaSetupModal.vue index c092439397..c740a69456 100644 --- a/packages/frontend/editor-ui/src/components/MfaSetupModal.vue +++ b/packages/frontend/editor-ui/src/components/MfaSetupModal.vue @@ -315,7 +315,7 @@ onMounted(async () => { text-align: center; canvas { - border: 4px solid var(--prim-gray-10); + border: 4px solid var(--color-qr-code-border); } } diff --git a/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue b/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue index 34e82ab74c..3a0e8ebb3e 100644 --- a/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue +++ b/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue @@ -44,7 +44,7 @@ const emit = defineEmits<{ svg { // ensure enough contrast in both light and dark mode - color: var(--prim-gray-200); + color: var(--p-gray-200); } } } diff --git a/packages/frontend/editor-ui/src/components/UpdatesPanel.vue b/packages/frontend/editor-ui/src/components/UpdatesPanel.vue index 79a0e52a14..679cc555d2 100644 --- a/packages/frontend/editor-ui/src/components/UpdatesPanel.vue +++ b/packages/frontend/editor-ui/src/components/UpdatesPanel.vue @@ -110,7 +110,7 @@ const i18n = useI18n(); } .link:hover { - color: var(--prim-color-primary); + color: var(--color-primary); text-decoration: none; } } diff --git a/packages/frontend/editor-ui/src/views/SetupWorkflowFromTemplateView/IconSuccess.vue b/packages/frontend/editor-ui/src/views/SetupWorkflowFromTemplateView/IconSuccess.vue index 59e5c01481..61f156c7d0 100644 --- a/packages/frontend/editor-ui/src/views/SetupWorkflowFromTemplateView/IconSuccess.vue +++ b/packages/frontend/editor-ui/src/views/SetupWorkflowFromTemplateView/IconSuccess.vue @@ -4,6 +4,6 @@