@knime/kds-styles 2.3.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/README.md +21 -0
  3. package/dist/tokens/css/_properties-legacy.css +220 -220
  4. package/dist/tokens/css/_properties.css +370 -370
  5. package/dist/tokens/css/_variables-legacy.css +220 -220
  6. package/dist/tokens/css/_variables.css +370 -370
  7. package/dist/tokens/ts/border-radius.d.ts +50 -0
  8. package/dist/tokens/ts/border-radius.js +88 -0
  9. package/dist/tokens/ts/border-width.d.ts +22 -0
  10. package/dist/tokens/ts/border-width.js +32 -0
  11. package/dist/tokens/ts/border.d.ts +118 -0
  12. package/dist/tokens/ts/border.js +316 -0
  13. package/dist/tokens/ts/box-shadow.d.ts +12 -0
  14. package/dist/tokens/ts/box-shadow.js +24 -0
  15. package/dist/tokens/ts/color.d.ts +880 -0
  16. package/dist/tokens/ts/color.js +1658 -0
  17. package/dist/tokens/ts/dimension.d.ts +196 -0
  18. package/dist/tokens/ts/dimension.js +362 -0
  19. package/dist/tokens/ts/elevation.d.ts +37 -0
  20. package/dist/tokens/ts/elevation.js +102 -0
  21. package/dist/tokens/ts/fake-border.d.ts +12 -0
  22. package/dist/tokens/ts/fake-border.js +24 -0
  23. package/dist/tokens/ts/font.d.ts +278 -0
  24. package/dist/tokens/ts/font.js +644 -0
  25. package/dist/tokens/ts/index.d.ts +17 -0
  26. package/dist/tokens/ts/index.js +16 -0
  27. package/dist/tokens/ts/sizing.d.ts +34 -0
  28. package/dist/tokens/ts/sizing.js +56 -0
  29. package/dist/tokens/ts/spacing.d.ts +90 -0
  30. package/dist/tokens/ts/spacing.js +115 -0
  31. package/dist/tokens/ts/types.d.ts +87 -0
  32. package/dist/tokens/ts/types.js +5 -0
  33. package/dist/tokens/ts/width.d.ts +14 -0
  34. package/dist/tokens/ts/width.js +16 -0
  35. package/package.json +6 -3
  36. package/dist/tokens/ts/_tokens.ts +0 -125
package/dist/tokens/css/_variables-legacy.css CHANGED
@@ -3,229 +3,229 @@
3
3
  */
4
4
 
5
5
  :root.kds-legacy, :host.kds-legacy {
6
- --kds-color-surface-default: hsl(0 0% 98%);
7
- --kds-color-surface-muted: hsl(0 0% 94%);
8
- --kds-color-surface-subtle: hsl(0 0% 90%);
9
- --kds-color-page-default: hsl(0 0% 99%);
10
- --kds-color-background-neutral-initial: hsl(330 0% 11% / 0);
11
- --kds-color-background-neutral-hover: hsl(180 0% 48% / 0.1);
12
- --kds-color-background-neutral-active: hsl(180 0% 48% / 0.2);
13
- --kds-color-background-neutral-bold-initial: hsl(330 0% 73% / 0.4);
14
- --kds-color-background-neutral-bold-hover: hsl(330 0% 63.406% / 0.4);
15
- --kds-color-background-neutral-bold-active: hsl(180 0% 60.265% / 0.4);
16
- --kds-color-background-primary-initial: hsl(0 0% 90%);
17
- --kds-color-background-primary-hover: hsl(168 0% 81.947%);
18
- --kds-color-background-primary-active: hsl(330 0% 74.039%);
19
- --kds-color-background-primary-bold-initial: hsl(0 0% 16%);
20
- --kds-color-background-primary-bold-hover: hsl(240 0% 13.84%);
21
- --kds-color-background-primary-bold-active: hsl(340 0% 11.207%);
22
- --kds-color-background-selected-initial: hsl(0 0% 94%);
23
- --kds-color-background-selected-hover: hsl(0 0% 90%);
24
- --kds-color-background-selected-active: hsl(0 0% 73%);
25
- --kds-color-background-selected-bold-initial: hsl(0 0% 19%);
26
- --kds-color-background-selected-bold-hover: hsl(0 0% 16%);
27
- --kds-color-background-selected-bold-active: hsl(0 0% 13%);
28
- --kds-color-background-danger-initial: hsl(0 100% 97%);
29
- --kds-color-background-danger-hover: hsl(2 100% 92%);
30
- --kds-color-background-danger-active: hsl(3 100% 86%);
31
- --kds-color-background-danger-bold-initial: hsl(349 91% 35%);
32
- --kds-color-background-danger-bold-hover: hsl(348 97% 27%);
33
- --kds-color-background-danger-bold-active: hsl(348 94% 21%);
34
- --kds-color-background-input-initial: hsl(0 0% 99%);
6
+ --kds-color-surface-default: hsl(0, 0%, 98%);
7
+ --kds-color-surface-muted: hsl(0, 0%, 94.1%);
8
+ --kds-color-surface-subtle: hsl(0, 0%, 90.2%);
9
+ --kds-color-page-default: hsl(0, 0%, 99%);
10
+ --kds-color-background-neutral-initial: hsl(345 0% 11.4% / 0);
11
+ --kds-color-background-neutral-hover: hsl(340 0% 48.2% / 0.1);
12
+ --kds-color-background-neutral-active: hsl(340 0% 48.2% / 0.2);
13
+ --kds-color-background-neutral-bold-initial: hsl(210 0% 72.5% / 0.4);
14
+ --kds-color-background-neutral-bold-hover: hsl(210 0% 62.977% / 0.4);
15
+ --kds-color-background-neutral-bold-active: hsl(0 0% 59.859% / 0.4);
16
+ --kds-color-background-primary-initial: hsl(0, 0%, 90.2%);
17
+ --kds-color-background-primary-hover: hsl(330 0% 82.128%);
18
+ --kds-color-background-primary-active: hsl(324 0% 74.201%);
19
+ --kds-color-background-primary-bold-initial: hsl(0, 0%, 15.7%);
20
+ --kds-color-background-primary-bold-hover: hsl(345 0% 13.593%);
21
+ --kds-color-background-primary-bold-active: hsl(330 0% 11.024%);
22
+ --kds-color-background-selected-initial: hsl(0, 0%, 94.1%);
23
+ --kds-color-background-selected-hover: hsl(0, 0%, 90.2%);
24
+ --kds-color-background-selected-active: hsl(0, 0%, 72.5%);
25
+ --kds-color-background-selected-bold-initial: hsl(0, 0%, 18.8%);
26
+ --kds-color-background-selected-bold-hover: hsl(0, 0%, 15.7%);
27
+ --kds-color-background-selected-bold-active: hsl(0, 0%, 12.9%);
28
+ --kds-color-background-danger-initial: hsl(0, 100%, 97.1%);
29
+ --kds-color-background-danger-hover: hsl(1.5, 100%, 92.4%);
30
+ --kds-color-background-danger-active: hsl(3.4, 100%, 86.1%);
31
+ --kds-color-background-danger-bold-initial: hsl(348.8, 90.9%, 34.5%);
32
+ --kds-color-background-danger-bold-hover: hsl(347.6, 97.1%, 27.3%);
33
+ --kds-color-background-danger-bold-active: hsl(348, 94.3%, 20.8%);
34
+ --kds-color-background-input-initial: hsl(0, 0%, 99%);
35
35
  --kds-color-background-input-hover: hsl(330 0% 94.521%);
36
36
  --kds-color-background-input-active: hsl(330 0% 85.683%);
37
- --kds-color-background-disabled-default: hsl(180 0% 48% / 0.48);
38
- --kds-color-background-disabled-primary: hsl(0 0% 48%);
39
- --kds-color-background-disabled-danger: hsl(1.5788 43.542% 37.998%);
40
- --kds-color-background-success-bold-initial: hsl(111 48% 31%);
41
- --kds-color-background-info-bold-initial: hsl(209 57% 50%);
42
- --kds-color-background-info-bold-hover: hsl(208 63% 41%);
43
- --kds-color-background-info-bold-active: hsl(208 61% 34%);
44
- --kds-color-background-static-info: hsl(217 100% 97%);
45
- --kds-color-background-static-info-muted: hsl(217.11 100.13% 97.725%);
46
- --kds-color-background-static-warning: hsl(30 95% 92%);
47
- --kds-color-background-static-warning-muted: hsl(29.611 97.821% 95.88%);
48
- --kds-color-background-static-danger: hsl(2 100% 92%);
49
- --kds-color-background-static-danger-muted: hsl(0 100% 97%);
50
- --kds-color-background-static-success: hsl(119.44 95.797% 93.942%);
51
- --kds-color-background-static-success-muted: hsl(124.89 65.088% 97.723%);
52
- --kds-color-background-static-brand: hsl(51 100% 50%);
53
- --kds-color-background-static-overlay: hsl(0 0% 13%);
54
- --kds-color-background-static-chart-0: hsl(0 0% 94%);
55
- --kds-color-background-static-chart-1: hsl(176 67% 22%);
56
- --kds-color-background-static-chart-2: hsl(172 27% 48%);
57
- --kds-color-text-and-icon-neutral: hsl(0 0% 16%);
58
- --kds-color-text-and-icon-muted: hsl(0 0% 32%);
59
- --kds-color-text-and-icon-subtle: hsl(0 0% 43%);
60
- --kds-color-text-and-icon-neutral-inverted: hsl(0 0% 98%);
61
- --kds-color-text-and-icon-primary: hsl(0 0% 16%);
62
- --kds-color-text-and-icon-primary-inverted: hsl(0 0% 98%);
63
- --kds-color-text-and-icon-selected: hsl(0 0% 16%);
64
- --kds-color-text-and-icon-selected-inverted: hsl(0 0% 98%);
65
- --kds-color-text-and-icon-warning: hsl(19 63% 38%);
66
- --kds-color-text-and-icon-warning-inverted: hsl(31 100% 83%);
67
- --kds-color-text-and-icon-danger: hsl(349 91% 35%);
68
- --kds-color-text-and-icon-danger-inverted: hsl(0 100% 97%);
69
- --kds-color-text-and-icon-success: hsl(116 47% 26%);
70
- --kds-color-text-and-icon-success-inverted: hsl(120 95% 92%);
71
- --kds-color-text-and-icon-disabled: hsl(0 0% 64%);
72
- --kds-color-text-and-icon-disabled-inverted: hsl(0 0% 73%);
73
- --kds-color-text-and-icon-info: hsl(208 61% 34%);
74
- --kds-color-text-and-icon-editor: hsl(0 0% 11%);
75
- --kds-color-border-neutral: hsl(345 0% 10% / 0.4);
76
- --kds-color-border-muted: hsl(345 0% 10% / 0.2);
77
- --kds-color-border-subtle: hsl(345 0% 10% / 0.1);
78
- --kds-color-border-primary-bold: hsl(0 0% 13%);
79
- --kds-color-border-primary: hsl(0 0% 73%);
80
- --kds-color-border-selected-bold: hsl(0 0% 19%);
81
- --kds-color-border-selected: hsl(0 0% 32%);
82
- --kds-color-border-selected-accent: hsl(209 57% 50%);
83
- --kds-color-border-warning-bold: hsl(19 63% 38%);
84
- --kds-color-border-warning: hsl(31 79% 74%);
85
- --kds-color-border-danger-bold: hsl(349 91% 35%);
86
- --kds-color-border-danger: hsl(3 100% 86%);
87
- --kds-color-border-success-bold: hsl(116 47% 26%);
88
- --kds-color-border-success: hsl(112 57% 71%);
89
- --kds-color-border-info-bold: hsl(208 61% 34%);
90
- --kds-color-border-info: hsl(215 100% 84%);
91
- --kds-color-border-transparent: hsl(330 0% 11% / 0);
92
- --kds-color-border-disabled: hsl(0 0% 73%);
93
- --kds-color-border-brand: hsl(51 100% 50%);
94
- --kds-color-border-neutral-bold-initial: hsl(345 0% 10% / 0.4);
95
- --kds-color-border-neutral-bold-hover: hsl(345 0% 10% / 0.64);
96
- --kds-color-border-neutral-bold-active: hsl(345 0% 10% / 0.74);
97
- --kds-color-focus-outline: hsl(209 57% 50%);
98
- --kds-color-focus-background: hsl(216 100% 92% / 0.4);
99
- --kds-color-blanket-default: hsl(330 0% 11% / 0.8);
100
- --kds-color-nodes-and-variables-flow-variable: hsl(360 84% 63%);
101
- --kds-color-nodes-and-variables-loop: hsl(188 52% 77%);
102
- --kds-color-nodes-and-variables-manipulator: hsl(51 100% 50%);
103
- --kds-color-nodes-and-variables-predictor: hsl(107 43% 55%);
104
- --kds-color-nodes-and-variables-source: hsl(30 80% 60%);
105
- --kds-color-nodes-and-variables-visualizer: hsl(193 60% 43%);
106
- --kds-color-nodes-and-variables-scope: hsl(305 27% 47%);
107
- --kds-color-nodes-and-variables-learner: hsl(67 68% 55%);
108
- --kds-color-nodes-and-variables-sink: hsl(360 84% 63%);
109
- --kds-color-nodes-and-variables-container: hsl(69 54% 40%);
110
- --kds-color-nodes-and-variables-unknown: hsl(353 75% 45%);
111
- --kds-color-nodes-and-variables-other: hsl(29 43% 58%);
112
- --kds-color-nodes-and-variables-metanode: hsl(0 0% 99%);
113
- --kds-color-nodes-and-variables-metanode-border: hsl(0 0% 32%);
114
- --kds-color-nodes-and-variables-component: hsl(0 0% 73%);
115
- --kds-color-nodes-and-variables-special-state: hsl(0 0% 99%);
116
- --kds-color-nodes-and-variables-forbidden-border: hsl(0 0% 19%);
117
- --kds-color-nodes-and-variables-forbidden: hsl(0 0% 90%);
118
- --kds-color-nodes-and-variables-warning-border: hsl(19 63% 38%);
119
- --kds-color-nodes-and-variables-warning: hsl(31 100% 83%);
120
- --kds-color-nodes-and-variables-error-border: hsl(349 91% 35%);
121
- --kds-color-nodes-and-variables-error: hsl(2 100% 92%);
122
- --kds-color-nodes-and-variables-loading-border: hsl(208 61% 34%);
123
- --kds-color-nodes-and-variables-loading: hsl(216 100% 92%);
124
- --kds-color-nodes-and-variables-configuration: hsl(65 69% 70%);
125
- --kds-color-nodes-and-variables-quickform: hsl(212 78% 68%);
126
- --kds-color-port-data: hsl(0 0% 11%);
127
- --kds-color-port-flow-variable: hsl(360 84% 63%);
128
- --kds-color-port-neutral-inverted: hsl(0 0% 99%);
129
- --kds-color-annotations-special-nodes: hsl(0 0% 73%);
130
- --kds-color-annotations-special-nodes-bold: hsl(0 0% 32%);
131
- --kds-color-annotations-visualizer: hsl(193 60% 43%);
132
- --kds-color-annotations-loading-bold: hsl(208 61% 34%);
133
- --kds-color-annotations-manipulator: hsl(51 100% 50%);
134
- --kds-color-annotations-source: hsl(30 80% 60%);
135
- --kds-color-annotations-sink: hsl(360 84% 63%);
136
- --kds-color-annotations-learner: hsl(67 68% 55%);
137
- --kds-color-annotations-predictor: hsl(107 43% 55%);
138
- --kds-color-annotations-container: hsl(67 64% 80%);
139
- --kds-color-annotations-flow-variable: hsl(173 37% 39%);
140
- --kds-color-annotations-teal-dark: hsl(177 82% 18%);
141
- --kds-color-annotations-other: hsl(29 43% 58%);
142
- --kds-color-annotations-loop: hsl(25 30% 35%);
143
- --kds-color-state-error: hsl(353 75% 45%);
144
- --kds-color-state-error-border: hsl(348 94% 21%);
145
- --kds-color-state-warning: hsl(48 100% 68%);
146
- --kds-color-state-warning-border: hsl(19 63% 38%);
147
- --kds-color-state-success: hsl(107 43% 55%);
148
- --kds-color-state-success-border: hsl(116 47% 26%);
149
- --kds-color-state-loading: hsl(208 61% 34%);
150
- --kds-color-state-inactive: hsl(0 0% 99%);
151
- --kds-color-state-inactive-border: hsl(0 0% 90%);
152
- --kds-color-state-disabled: hsl(0 0% 73%);
153
- --kds-color-state-disabled-border: hsl(0 0% 48%);
154
- --kds-color-state-background: hsl(0 0% 90%);
155
- --kds-color-connector-data: hsl(0 0% 16%);
156
- --kds-color-connector-flow-variable: hsl(360 84% 63%);
157
- --kds-color-elevation-top: hsl(330 0% 73% / 0.32);
158
- --kds-color-elevation-middle: hsl(330 0% 32% / 0.14);
159
- --kds-color-elevation-bottom: hsl(330 0% 32% / 0.12);
160
- --kds-color-elevation-knob: hsl(330 0% 32% / 0.5);
161
- --kds-color-desktop-header-background-default: hsl(0 0% 10%);
162
- --kds-color-desktop-header-background-muted: hsl(0 0% 98%);
163
- --kds-color-desktop-header-background-accent: hsl(0 0% 98%);
164
- --kds-color-desktop-header-text-and-icon-neutral: hsl(0 0% 16%);
165
- --kds-color-desktop-header-text-and-icon-muted: hsl(0 0% 32%);
166
- --kds-color-desktop-header-border-default: hsl(345 0% 10% / 0.1);
167
- --kds-color-table-header-background-default: hsl(0 0% 99%);
168
- --kds-color-toggle-switch-knob-initial: hsl(0 0% 99%);
169
- --kds-color-toggle-switch-knob-disabled: hsl(0 0% 90%);
170
- --kds-color-toggle-switch-icon-on: hsl(0 0% 16%);
171
- --kds-color-toggle-switch-icon-off: hsl(0 0% 43%);
172
- --kds-color-toggle-switch-icon-disabled: hsl(0 0% 64%);
37
+ --kds-color-background-disabled-default: hsl(340 0% 48.2% / 0.48);
38
+ --kds-color-background-disabled-primary: hsl(0, 0%, 48.2%);
39
+ --kds-color-background-disabled-danger: hsl(1.3489 43.031% 37.79%);
40
+ --kds-color-background-success-bold-initial: hsl(111.3, 47.5%, 31.4%);
41
+ --kds-color-background-info-bold-initial: hsl(209.4, 57.3%, 49.6%);
42
+ --kds-color-background-info-bold-hover: hsl(208.2, 62.9%, 41.2%);
43
+ --kds-color-background-info-bold-active: hsl(208.3, 60.5%, 33.7%);
44
+ --kds-color-background-static-info: hsl(216.7, 100%, 96.5%);
45
+ --kds-color-background-static-info-muted: hsl(216.83 100.14% 97.347%);
46
+ --kds-color-background-static-warning: hsl(30, 95.2%, 91.8%);
47
+ --kds-color-background-static-warning-muted: hsl(29.601 98.108% 95.778%);
48
+ --kds-color-background-static-danger: hsl(1.5, 100%, 92.4%);
49
+ --kds-color-background-static-danger-muted: hsl(0, 100%, 97.1%);
50
+ --kds-color-background-static-success: hsl(119.4 96.139% 93.64%);
51
+ --kds-color-background-static-success-muted: hsl(125.38 64.795% 97.496%);
52
+ --kds-color-background-static-brand: hsl(50.8, 100%, 50%);
53
+ --kds-color-background-static-overlay: hsl(0, 0%, 12.9%);
54
+ --kds-color-background-static-chart-0: hsl(0, 0%, 94.1%);
55
+ --kds-color-background-static-chart-1: hsl(176.1, 66.7%, 22.4%);
56
+ --kds-color-background-static-chart-2: hsl(171.8, 27%, 47.8%);
57
+ --kds-color-text-and-icon-neutral: hsl(0, 0%, 15.7%);
58
+ --kds-color-text-and-icon-muted: hsl(0, 0%, 32.2%);
59
+ --kds-color-text-and-icon-subtle: hsl(0, 0%, 43%);
60
+ --kds-color-text-and-icon-neutral-inverted: hsl(0, 0%, 98%);
61
+ --kds-color-text-and-icon-primary: hsl(0, 0%, 15.7%);
62
+ --kds-color-text-and-icon-primary-inverted: hsl(0, 0%, 98%);
63
+ --kds-color-text-and-icon-selected: hsl(0, 0%, 15.7%);
64
+ --kds-color-text-and-icon-selected-inverted: hsl(0, 0%, 98%);
65
+ --kds-color-text-and-icon-warning: hsl(19, 63.1%, 38.2%);
66
+ --kds-color-text-and-icon-warning-inverted: hsl(31, 100%, 82.5%);
67
+ --kds-color-text-and-icon-danger: hsl(348.8, 90.9%, 34.5%);
68
+ --kds-color-text-and-icon-danger-inverted: hsl(0, 100%, 97.1%);
69
+ --kds-color-text-and-icon-success: hsl(116.1, 46.6%, 25.7%);
70
+ --kds-color-text-and-icon-success-inverted: hsl(120, 95.3%, 91.6%);
71
+ --kds-color-text-and-icon-disabled: hsl(0, 0%, 64%);
72
+ --kds-color-text-and-icon-disabled-inverted: hsl(0, 0%, 72.5%);
73
+ --kds-color-text-and-icon-info: hsl(208.3, 60.5%, 33.7%);
74
+ --kds-color-text-and-icon-editor: hsl(0, 0%, 11.4%);
75
+ --kds-color-border-neutral: hsl(330 0% 10.2% / 0.4);
76
+ --kds-color-border-muted: hsl(330 0% 10.2% / 0.2);
77
+ --kds-color-border-subtle: hsl(330 0% 10.2% / 0.1);
78
+ --kds-color-border-primary-bold: hsl(0, 0%, 12.9%);
79
+ --kds-color-border-primary: hsl(0, 0%, 72.5%);
80
+ --kds-color-border-selected-bold: hsl(0, 0%, 18.8%);
81
+ --kds-color-border-selected: hsl(0, 0%, 32.2%);
82
+ --kds-color-border-selected-accent: hsl(209.4, 57.3%, 49.6%);
83
+ --kds-color-border-warning-bold: hsl(19, 63.1%, 38.2%);
84
+ --kds-color-border-warning: hsl(30.8, 79.3%, 73.5%);
85
+ --kds-color-border-danger-bold: hsl(348.8, 90.9%, 34.5%);
86
+ --kds-color-border-danger: hsl(3.4, 100%, 86.1%);
87
+ --kds-color-border-success-bold: hsl(116.1, 46.6%, 25.7%);
88
+ --kds-color-border-success: hsl(112, 56.5%, 71.2%);
89
+ --kds-color-border-info-bold: hsl(208.3, 60.5%, 33.7%);
90
+ --kds-color-border-info: hsl(214.5, 100%, 84.3%);
91
+ --kds-color-border-transparent: hsl(345 0% 11.4% / 0);
92
+ --kds-color-border-disabled: hsl(0, 0%, 72.5%);
93
+ --kds-color-border-brand: hsl(50.8, 100%, 50%);
94
+ --kds-color-border-neutral-bold-initial: hsl(330 0% 10.2% / 0.4);
95
+ --kds-color-border-neutral-bold-hover: hsl(330 0% 10.2% / 0.64);
96
+ --kds-color-border-neutral-bold-active: hsl(330 0% 10.2% / 0.74);
97
+ --kds-color-focus-outline: hsl(209.4, 57.3%, 49.6%);
98
+ --kds-color-focus-background: hsl(215.7 100% 91.8% / 0.4);
99
+ --kds-color-blanket-default: hsl(345 0% 11.4% / 0.8);
100
+ --kds-color-nodes-and-variables-flow-variable: hsl(359.6, 84.3%, 62.5%);
101
+ --kds-color-nodes-and-variables-loop: hsl(187.7, 51.7%, 76.5%);
102
+ --kds-color-nodes-and-variables-manipulator: hsl(50.8, 100%, 50%);
103
+ --kds-color-nodes-and-variables-predictor: hsl(106.5, 42.6%, 54.9%);
104
+ --kds-color-nodes-and-variables-source: hsl(30, 80.4%, 60%);
105
+ --kds-color-nodes-and-variables-visualizer: hsl(193.1, 60.2%, 43.3%);
106
+ --kds-color-nodes-and-variables-scope: hsl(304.6, 27.4%, 46.5%);
107
+ --kds-color-nodes-and-variables-learner: hsl(67.3, 67.8%, 54.9%);
108
+ --kds-color-nodes-and-variables-sink: hsl(359.6, 84.3%, 62.5%);
109
+ --kds-color-nodes-and-variables-container: hsl(69.4, 53.5%, 39.6%);
110
+ --kds-color-nodes-and-variables-unknown: hsl(353, 74.7%, 44.9%);
111
+ --kds-color-nodes-and-variables-other: hsl(29, 43%, 58%);
112
+ --kds-color-nodes-and-variables-metanode: hsl(0, 0%, 99%);
113
+ --kds-color-nodes-and-variables-metanode-border: hsl(0, 0%, 32.2%);
114
+ --kds-color-nodes-and-variables-component: hsl(0, 0%, 72.5%);
115
+ --kds-color-nodes-and-variables-special-state: hsl(0, 0%, 99%);
116
+ --kds-color-nodes-and-variables-forbidden-border: hsl(0, 0%, 18.8%);
117
+ --kds-color-nodes-and-variables-forbidden: hsl(0, 0%, 90.2%);
118
+ --kds-color-nodes-and-variables-warning-border: hsl(19, 63.1%, 38.2%);
119
+ --kds-color-nodes-and-variables-warning: hsl(31, 100%, 82.5%);
120
+ --kds-color-nodes-and-variables-error-border: hsl(348.8, 90.9%, 34.5%);
121
+ --kds-color-nodes-and-variables-error: hsl(1.5, 100%, 92.4%);
122
+ --kds-color-nodes-and-variables-loading-border: hsl(208.3, 60.5%, 33.7%);
123
+ --kds-color-nodes-and-variables-loading: hsl(215.7, 100%, 91.8%);
124
+ --kds-color-nodes-and-variables-configuration: hsl(64.6, 68.6%, 70.0%);
125
+ --kds-color-nodes-and-variables-quickform: hsl(212.1, 78.2%, 67.6%);
126
+ --kds-color-port-data: hsl(0, 0%, 11.4%);
127
+ --kds-color-port-flow-variable: hsl(359.6, 84.3%, 62.5%);
128
+ --kds-color-port-neutral-inverted: hsl(0, 0%, 99%);
129
+ --kds-color-annotations-special-nodes: hsl(0, 0%, 72.5%);
130
+ --kds-color-annotations-special-nodes-bold: hsl(0, 0%, 32.2%);
131
+ --kds-color-annotations-visualizer: hsl(193.1, 60.2%, 43.3%);
132
+ --kds-color-annotations-loading-bold: hsl(208.3, 60.5%, 33.7%);
133
+ --kds-color-annotations-manipulator: hsl(50.8, 100%, 50%);
134
+ --kds-color-annotations-source: hsl(30, 80.4%, 60%);
135
+ --kds-color-annotations-sink: hsl(359.6, 84.3%, 62.5%);
136
+ --kds-color-annotations-learner: hsl(67.3, 67.8%, 54.9%);
137
+ --kds-color-annotations-predictor: hsl(106.5, 42.6%, 54.9%);
138
+ --kds-color-annotations-container: hsl(66.5, 64.4%, 80.2%);
139
+ --kds-color-annotations-flow-variable: hsl(173.4, 37.1%, 38.6%);
140
+ --kds-color-annotations-teal-dark: hsl(176.7, 82%, 17.5%);
141
+ --kds-color-annotations-other: hsl(29, 43%, 58%);
142
+ --kds-color-annotations-loop: hsl(25, 30%, 35%);
143
+ --kds-color-state-error: hsl(353, 74.7%, 44.9%);
144
+ --kds-color-state-error-border: hsl(348, 94.3%, 20.8%);
145
+ --kds-color-state-warning: hsl(47.6, 100%, 67.6%);
146
+ --kds-color-state-warning-border: hsl(19, 63.1%, 38.2%);
147
+ --kds-color-state-success: hsl(106.5, 42.6%, 54.9%);
148
+ --kds-color-state-success-border: hsl(116.1, 46.6%, 25.7%);
149
+ --kds-color-state-loading: hsl(208.3, 60.5%, 33.7%);
150
+ --kds-color-state-inactive: hsl(0, 0%, 99%);
151
+ --kds-color-state-inactive-border: hsl(0, 0%, 90.2%);
152
+ --kds-color-state-disabled: hsl(0, 0%, 72.5%);
153
+ --kds-color-state-disabled-border: hsl(0, 0%, 48.2%);
154
+ --kds-color-state-background: hsl(0, 0%, 90.2%);
155
+ --kds-color-connector-data: hsl(0, 0%, 15.7%);
156
+ --kds-color-connector-flow-variable: hsl(359.6, 84.3%, 62.5%);
157
+ --kds-color-elevation-top: hsl(210 0% 72.5% / 0.32);
158
+ --kds-color-elevation-middle: hsl(180 0% 32.2% / 0.14);
159
+ --kds-color-elevation-bottom: hsl(180 0% 32.2% / 0.12);
160
+ --kds-color-elevation-knob: hsl(180 0% 32.2% / 0.5);
161
+ --kds-color-desktop-header-background-default: hsl(0, 0%, 10.2%);
162
+ --kds-color-desktop-header-background-muted: hsl(0, 0%, 98%);
163
+ --kds-color-desktop-header-background-accent: hsl(0, 0%, 98%);
164
+ --kds-color-desktop-header-text-and-icon-neutral: hsl(0, 0%, 15.7%);
165
+ --kds-color-desktop-header-text-and-icon-muted: hsl(0, 0%, 32.2%);
166
+ --kds-color-desktop-header-border-default: hsl(330 0% 10.2% / 0.1);
167
+ --kds-color-table-header-background-default: hsl(0, 0%, 99%);
168
+ --kds-color-toggle-switch-knob-initial: hsl(0, 0%, 99%);
169
+ --kds-color-toggle-switch-knob-disabled: hsl(0, 0%, 90.2%);
170
+ --kds-color-toggle-switch-icon-on: hsl(0, 0%, 15.7%);
171
+ --kds-color-toggle-switch-icon-off: hsl(0, 0%, 43%);
172
+ --kds-color-toggle-switch-icon-disabled: hsl(0, 0%, 64%);
173
173
  --kds-color-loading-spinner-progress-on-primary: hsl(none 0% 98%);
174
- --kds-color-loading-spinner-progress-on-surface: hsl(0 0% 16%);
174
+ --kds-color-loading-spinner-progress-on-surface: hsl(0, 0%, 15.7%);
175
175
  --kds-color-loading-spinner-track-on-primary: hsl(none 0% 98% / 0.24);
176
- --kds-color-loading-spinner-track-on-surface: hsl(120 0% 16% / 0.24);
177
- --kds-color-tooltip-background-default: hsl(0 0% 13%);
178
- --kds-color-tooltip-text-and-icon-neutral: hsl(0 0% 98%);
179
- --kds-color-text-highlight-background-default: hsl(212 78% 68% / 0.6);
180
- --kds-color-avatar-background-red: hsl(4 100% 80%);
181
- --kds-color-avatar-background-orange: hsl(31 83% 66%);
182
- --kds-color-avatar-background-yellow: hsl(51 100% 50%);
183
- --kds-color-avatar-background-green: hsl(109 47% 61%);
184
- --kds-color-avatar-background-teal: hsl(170 31% 66%);
185
- --kds-color-avatar-background-blue: hsl(214 92% 77%);
186
- --kds-color-avatar-background-purple: hsl(320 45% 82%);
187
- --kds-color-avatar-background-aquamarine: hsl(186 49% 88%);
188
- --kds-color-avatar-background-grassgreen: hsl(63 69% 75%);
189
- --kds-color-avatar-background-brown: hsl(30 47% 68%);
176
+ --kds-color-loading-spinner-track-on-surface: hsl(332.73 0% 15.7% / 0.24);
177
+ --kds-color-tooltip-background-default: hsl(0, 0%, 12.9%);
178
+ --kds-color-tooltip-text-and-icon-neutral: hsl(0, 0%, 98%);
179
+ --kds-color-text-highlight-background-default: hsl(212.1 78.2% 67.6% / 0.6);
180
+ --kds-color-avatar-background-red: hsl(3.5, 100%, 79.6%);
181
+ --kds-color-avatar-background-orange: hsl(31.2, 82.8%, 65.9%);
182
+ --kds-color-avatar-background-yellow: hsl(50.8, 100%, 50%);
183
+ --kds-color-avatar-background-green: hsl(109, 47.2%, 61.4%);
184
+ --kds-color-avatar-background-teal: hsl(169.8, 30.6%, 66.1%);
185
+ --kds-color-avatar-background-blue: hsl(213.6, 91.6%, 76.7%);
186
+ --kds-color-avatar-background-purple: hsl(320.0, 44.7%, 81.6%);
187
+ --kds-color-avatar-background-aquamarine: hsl(185.8, 49.2%, 87.6%);
188
+ --kds-color-avatar-background-grassgreen: hsl(63.4, 68.5%, 75.1%);
189
+ --kds-color-avatar-background-brown: hsl(30, 47%, 68%);
190
190
  --kds-color-avatar-background-empty: hsl(330 0% 94.521%);
191
- --kds-color-avatar-text-and-icon-red: hsl(348 94% 21%);
192
- --kds-color-avatar-text-and-icon-orange: hsl(13 66% 23%);
193
- --kds-color-avatar-text-and-icon-yellow: hsl(44 94% 14%);
194
- --kds-color-avatar-text-and-icon-green: hsl(132 52% 15%);
195
- --kds-color-avatar-text-and-icon-teal: hsl(175 93% 12%);
196
- --kds-color-avatar-text-and-icon-blue: hsl(209 50% 20%);
197
- --kds-color-avatar-text-and-icon-purple: hsl(296 34% 23%);
198
- --kds-color-avatar-text-and-icon-aquamarine: hsl(201 63% 27%);
199
- --kds-color-avatar-text-and-icon-grassgreen: hsl(72 39% 25%);
200
- --kds-color-avatar-text-and-icon-brown: hsl(23 27% 24%);
201
- --kds-border-action-transparent: 1px solid hsl(330 0% 11% / 0);
202
- --kds-border-action-default: 1px solid hsl(345 0% 10% / 0.4);
203
- --kds-border-action-disabled: 1px solid hsl(0 0% 73%);
204
- --kds-border-action-focused: 2px solid hsl(209 57% 50%);
205
- --kds-border-action-selected: 1px solid hsl(0 0% 32%);
206
- --kds-border-action-selected-accent: 1px solid hsl(209 57% 50%);
207
- --kds-border-action-error: 1px solid hsl(349 91% 35%);
208
- --kds-border-action-primary: 1px solid hsl(0 0% 13%);
209
- --kds-border-action-input: 1px solid hsl(345 0% 10% / 0.4);
210
- --kds-border-base-default: 1px solid hsl(345 0% 10% / 0.4);
211
- --kds-border-base-muted: 1px solid hsl(345 0% 10% / 0.2);
212
- --kds-border-base-subtle: 1px solid hsl(345 0% 10% / 0.1);
213
- --kds-border-base-brand: 1px solid hsl(51 100% 50%);
214
- --kds-border-base-danger: 1px solid hsl(3 100% 86%);
215
- --kds-border-base-warning: 1px solid hsl(31 79% 74%);
216
- --kds-border-base-success: 1px solid hsl(112 57% 71%);
217
- --kds-border-base-info: 1px solid hsl(215 100% 84%);
218
- --kds-border-node-status-empty: 1px solid hsl(0 0% 90%);
219
- --kds-border-node-status-error: 1px solid hsl(348 94% 21%);
220
- --kds-border-node-status-warning: 1px solid hsl(19 63% 38%);
221
- --kds-border-node-status-success: 1px solid hsl(116 47% 26%);
222
- --kds-border-resize-handle-initial: 2px solid hsl(345 0% 10% / 0.4);
223
- --kds-border-resize-handle-hover: 2px solid hsl(345 0% 10% / 0.64);
224
- --kds-border-resize-handle-active: 2px solid hsl(345 0% 10% / 0.74);
225
- --kds-border-color-picker-handle-initial: 2px solid hsl(0 0% 99%);
226
- --kds-elevation-level-0: 0 0 0 0 hsl(330 0% 73% / 0.32);
227
- --kds-elevation-level-1: 0 1px 1px 0 hsl(330 0% 73% / 0.32), 0 0 1px 0 hsl(330 0% 32% / 0.14), 0 0 8px 0 hsl(330 0% 32% / 0.12);
228
- --kds-elevation-level-3: 0 2px 4px 0 hsl(330 0% 73% / 0.32), 0 4px 8px 0 hsl(330 0% 32% / 0.14), 0 0 20px 0 hsl(330 0% 32% / 0.12);
229
- --kds-fake-border-xs-muted: 0 0 0 0.5px hsl(345 0% 10% / 0.2);
230
- --kds-box-shadow-knob: 0 1px 2px 0 hsl(330 0% 32% / 0.5);
191
+ --kds-color-avatar-text-and-icon-red: hsl(348, 94.3%, 20.8%);
192
+ --kds-color-avatar-text-and-icon-orange: hsl(13.1, 66.1%, 23.1%);
193
+ --kds-color-avatar-text-and-icon-yellow: hsl(44.3, 94.2%, 13.5%);
194
+ --kds-color-avatar-text-and-icon-green: hsl(132.3, 52%, 14.7%);
195
+ --kds-color-avatar-text-and-icon-teal: hsl(174.5, 93.2%, 11.6%);
196
+ --kds-color-avatar-text-and-icon-blue: hsl(209.4, 49.5%, 20.2%);
197
+ --kds-color-avatar-text-and-icon-purple: hsl(295.5, 33.9%, 23.1%);
198
+ --kds-color-avatar-text-and-icon-aquamarine: hsl(200.9, 63.2%, 26.7%);
199
+ --kds-color-avatar-text-and-icon-grassgreen: hsl(72.2, 39.2%, 24.5%);
200
+ --kds-color-avatar-text-and-icon-brown: hsl(23, 27%, 24%);
201
+ --kds-border-action-transparent: 1px solid hsl(345 0% 11.4% / 0);
202
+ --kds-border-action-default: 1px solid hsl(330 0% 10.2% / 0.4);
203
+ --kds-border-action-disabled: 1px solid hsl(0, 0%, 72.5%);
204
+ --kds-border-action-focused: 2px solid hsl(209.4, 57.3%, 49.6%);
205
+ --kds-border-action-selected: 1px solid hsl(0, 0%, 32.2%);
206
+ --kds-border-action-selected-accent: 1px solid hsl(209.4, 57.3%, 49.6%);
207
+ --kds-border-action-error: 1px solid hsl(348.8, 90.9%, 34.5%);
208
+ --kds-border-action-primary: 1px solid hsl(0, 0%, 12.9%);
209
+ --kds-border-action-input: 1px solid hsl(330 0% 10.2% / 0.4);
210
+ --kds-border-base-default: 1px solid hsl(330 0% 10.2% / 0.4);
211
+ --kds-border-base-muted: 1px solid hsl(330 0% 10.2% / 0.2);
212
+ --kds-border-base-subtle: 1px solid hsl(330 0% 10.2% / 0.1);
213
+ --kds-border-base-brand: 1px solid hsl(50.8, 100%, 50%);
214
+ --kds-border-base-danger: 1px solid hsl(3.4, 100%, 86.1%);
215
+ --kds-border-base-warning: 1px solid hsl(30.8, 79.3%, 73.5%);
216
+ --kds-border-base-success: 1px solid hsl(112, 56.5%, 71.2%);
217
+ --kds-border-base-info: 1px solid hsl(214.5, 100%, 84.3%);
218
+ --kds-border-node-status-empty: 1px solid hsl(0, 0%, 90.2%);
219
+ --kds-border-node-status-error: 1px solid hsl(348, 94.3%, 20.8%);
220
+ --kds-border-node-status-warning: 1px solid hsl(19, 63.1%, 38.2%);
221
+ --kds-border-node-status-success: 1px solid hsl(116.1, 46.6%, 25.7%);
222
+ --kds-border-resize-handle-initial: 2px solid hsl(330 0% 10.2% / 0.4);
223
+ --kds-border-resize-handle-hover: 2px solid hsl(330 0% 10.2% / 0.64);
224
+ --kds-border-resize-handle-active: 2px solid hsl(330 0% 10.2% / 0.74);
225
+ --kds-border-color-picker-handle-initial: 2px solid hsl(0, 0%, 99%);
226
+ --kds-elevation-level-0: 0 0 0 0 hsl(210 0% 72.5% / 0.32);
227
+ --kds-elevation-level-1: 0 1px 1px 0 hsl(210 0% 72.5% / 0.32), 0 0 1px 0 hsl(180 0% 32.2% / 0.14), 0 0 8px 0 hsl(180 0% 32.2% / 0.12);
228
+ --kds-elevation-level-3: 0 2px 4px 0 hsl(210 0% 72.5% / 0.32), 0 4px 8px 0 hsl(180 0% 32.2% / 0.14), 0 0 20px 0 hsl(180 0% 32.2% / 0.12);
229
+ --kds-fake-border-xs-muted: 0 0 0 0.5px hsl(330 0% 10.2% / 0.2);
230
+ --kds-box-shadow-knob: 0 1px 2px 0 hsl(180 0% 32.2% / 0.5);
231
231
  }