mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 01:56:46 +00:00
refactor(editor): Update CSS primitives structure and naming (no-changelog) (#17731)
This commit is contained in:
Giulio Andreini
@@ -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 {
|
||||
|
||||
@@ -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'] {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -22,47 +22,39 @@ const Template =
|
||||
});
|
||||
|
||||
export const Gray = Template(
|
||||
"<color-circles :colors=\"['--prim-gray-820', '--prim-gray-800', '--prim-gray-740', '--prim-gray-670', '--prim-gray-540', '--prim-gray-490', '--prim-gray-420', '--prim-gray-320', '--prim-gray-200', '--prim-gray-120', '--prim-gray-70', '--prim-gray-30', '--prim-gray-40', '--prim-gray-10', '--prim-gray-0']\" />",
|
||||
"<color-circles :colors=\"['--p-gray-820', '--p-gray-800', '--p-gray-780', '--p-gray-740', '--p-gray-710', '--p-gray-670', '--p-gray-540', '--p-gray-490', '--p-gray-420', '--p-gray-320', '--p-gray-200', '--p-gray-120', '--p-gray-070', '--p-gray-040', '--p-gray-030', '--p-gray-025', '--p-gray-010', '--p-white']\" />",
|
||||
);
|
||||
|
||||
export const Primary = Template(
|
||||
"<color-circles :colors=\"['--prim-color-primary-shade-300', '--prim-color-primary-shade-100', '--prim-color-primary', '--prim-color-primary-tint-100', '--prim-color-primary-tint-200', '--prim-color-primary-tint-250', '--prim-color-primary-tint-300']\" />",
|
||||
"<color-circles :colors=\"['--p-color-primary-420', '--p-color-primary-320', '--p-color-primary-220', '--p-color-primary-120', '--p-color-primary-070', '--p-color-primary-050', '--p-color-primary-030']\" />",
|
||||
);
|
||||
|
||||
export const Secondary = Template(
|
||||
"<color-circles :colors=\"['--prim-color-secondary-shade-250', '--prim-color-secondary-shade-100', '--prim-color-secondary', '--prim-color-secondary-tint-100', '--prim-color-secondary-tint-200', '--prim-color-secondary-tint-300', '--prim-color-secondary-tint-400']\" />",
|
||||
"<color-circles :colors=\"['--p-color-secondary-720','--p-color-secondary-570','--p-color-secondary-470','--p-color-secondary-370','--p-color-secondary-270','--p-color-secondary-170','--p-color-secondary-070']\" />",
|
||||
);
|
||||
|
||||
export const AlternateA = Template(
|
||||
"<color-circles :colors=\"['--prim-color-alt-a-shade-200', '--prim-color-alt-a-shade-100', '--prim-color-alt-a', '--prim-color-alt-a-tint-300', '--prim-color-alt-a-tint-400', '--prim-color-alt-a-tint-500', '--prim-color-alt-a-tint-550']\" />",
|
||||
"<color-circles :colors=\"['--p-color-alt-a-800', '--p-color-alt-a-700', '--p-color-alt-a-600', '--p-color-alt-a-300', '--p-color-alt-a-200', '--p-color-alt-a-100', '--p-color-alt-a-050']\" />",
|
||||
);
|
||||
|
||||
export const AlternateB = Template(
|
||||
"<color-circles :colors=\"['--prim-color-alt-b-shade-350', '--prim-color-alt-b-shade-250', '--prim-color-alt-b-shade-100', '--prim-color-alt-b', '--prim-color-alt-b-tint-150', '--prim-color-alt-b-tint-250', '--prim-color-alt-b-tint-300', '--prim-color-alt-b-tint-400']\" />",
|
||||
"<color-circles :colors=\"['--p-color-alt-b-780', '--p-color-alt-b-680', '--p-color-alt-b-530', '--p-color-alt-b-430', '--p-color-alt-b-280', '--p-color-alt-b-180', '--p-color-alt-b-130', '--p-color-alt-b-030']\" />",
|
||||
);
|
||||
|
||||
export const AlternateC = Template(
|
||||
"<color-circles :colors=\"['--prim-color-alt-c-shade-250', '--prim-color-alt-c-shade-150', '--prim-color-alt-c-shade-100', '--prim-color-alt-c', '--prim-color-alt-c-tint-150', '--prim-color-alt-c-tint-250', '--prim-color-alt-c-tint-300', '--prim-color-alt-c-tint-400', '--prim-color-alt-c-tint-450']\" />",
|
||||
"<color-circles :colors=\"['--p-color-alt-c-730', '--p-color-alt-c-630', '--p-color-alt-c-580', '--p-color-alt-c-480', '--p-color-alt-c-330', '--p-color-alt-c-230', '--p-color-alt-c-180', '--p-color-alt-c-080', '--p-color-alt-c-030']\" />",
|
||||
);
|
||||
|
||||
export const AlternateD = Template(
|
||||
"<color-circles :colors=\"['--prim-color-alt-d-shade-700', '--prim-color-alt-d-shade-600', '--prim-color-alt-d-shade-150', '--prim-color-alt-d']\" />",
|
||||
"<color-circles :colors=\"['--p-color-alt-d-780', '--p-color-alt-d-680', '--p-color-alt-d-230', '--p-color-alt-d-080']\" />",
|
||||
);
|
||||
|
||||
export const AlternateE = Template(
|
||||
"<color-circles :colors=\"['--prim-color-alt-e-shade-350', '--prim-color-alt-e-shade-250', '--prim-color-alt-e-shade-150', '--prim-color-alt-e-shade-100', '--prim-color-alt-e', '--prim-color-alt-e-tint-250', '--prim-color-alt-e-tint-350']\" />",
|
||||
"<color-circles :colors=\"['--p-color-alt-e-780', '--p-color-alt-e-680', '--p-color-alt-e-580', '--p-color-alt-e-530', '--p-color-alt-e-430', '--p-color-alt-e-180', '--p-color-alt-e-080']\" />",
|
||||
);
|
||||
|
||||
export const AlternateF = Template(
|
||||
"<color-circles :colors=\"['--prim-color-alt-f', '--prim-color-alt-f-tint-150']\" />",
|
||||
);
|
||||
export const AlternateF = Template('<color-circles :colors="[\'--p-color-alt-f-560\']" />');
|
||||
|
||||
export const AlternateG = Template(
|
||||
"<color-circles :colors=\"['--prim-color-alt-g', '--prim-color-alt-g-tint-150']\" />",
|
||||
);
|
||||
export const AlternateG = Template('<color-circles :colors="[\'--p-color-alt-g-700\']" />');
|
||||
|
||||
export const AlternateH = Template('<color-circles :colors="[\'--prim-color-alt-h\']" />');
|
||||
|
||||
export const AlternateI = Template('<color-circles :colors="[\'--prim-color-alt-i\']" />');
|
||||
|
||||
export const AlternateJ = Template('<color-circles :colors="[\'--prim-color-alt-j\']" />');
|
||||
export const AlternateH = Template('<color-circles :colors="[\'--p-color-alt-h-310\']" />');
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -110,7 +110,7 @@ const i18n = useI18n();
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: var(--prim-color-primary);
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,6 +4,6 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
i {
|
||||
color: var(--prim-color-alt-a);
|
||||
color: var(--color-success);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user