@knime/kds-styles 2.9.0 → 4.0.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 (11) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +0 -1
  3. package/dist/css/fonts.css +1 -1
  4. package/dist/tokens/css/_properties.css +20 -2
  5. package/dist/tokens/css/_variables.css +5 -2
  6. package/dist/tokens/ts/font.js +5 -5
  7. package/dist/tokens/ts/spacing.d.ts +8 -0
  8. package/dist/tokens/ts/spacing.js +16 -0
  9. package/package.json +1 -2
  10. package/dist/tokens/css/_properties-legacy.css +0 -1539
  11. package/dist/tokens/css/_variables-legacy.css +0 -262
package/dist/tokens/css/_variables-legacy.css DELETED
@@ -1,262 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
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.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
- --kds-color-background-input-hover: hsl(330 0% 94.521%);
36
- --kds-color-background-input-active: hsl(330 0% 85.683%);
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-text-and-icon-neutral: hsl(0, 0%, 15.7%);
55
- --kds-color-text-and-icon-muted: hsl(0, 0%, 32.2%);
56
- --kds-color-text-and-icon-subtle: hsl(0, 0%, 43%);
57
- --kds-color-text-and-icon-neutral-inverted: hsl(0, 0%, 98%);
58
- --kds-color-text-and-icon-primary: hsl(0, 0%, 15.7%);
59
- --kds-color-text-and-icon-primary-inverted: hsl(0, 0%, 98%);
60
- --kds-color-text-and-icon-selected: hsl(0, 0%, 15.7%);
61
- --kds-color-text-and-icon-selected-inverted: hsl(0, 0%, 98%);
62
- --kds-color-text-and-icon-warning: hsl(19, 63.1%, 38.2%);
63
- --kds-color-text-and-icon-warning-inverted: hsl(31, 100%, 82.5%);
64
- --kds-color-text-and-icon-danger: hsl(348.8, 90.9%, 34.5%);
65
- --kds-color-text-and-icon-danger-inverted: hsl(0, 100%, 97.1%);
66
- --kds-color-text-and-icon-success: hsl(116.1, 46.6%, 25.7%);
67
- --kds-color-text-and-icon-success-inverted: hsl(120, 95.3%, 91.6%);
68
- --kds-color-text-and-icon-disabled: hsl(0, 0%, 64%);
69
- --kds-color-text-and-icon-disabled-inverted: hsl(0, 0%, 72.5%);
70
- --kds-color-text-and-icon-info: hsl(208.3, 60.5%, 33.7%);
71
- --kds-color-text-and-icon-editor: hsl(0, 0%, 11.4%);
72
- --kds-color-border-neutral: hsl(330 0% 10.2% / 0.4);
73
- --kds-color-border-muted: hsl(330 0% 10.2% / 0.2);
74
- --kds-color-border-subtle: hsl(330 0% 10.2% / 0.1);
75
- --kds-color-border-primary-bold: hsl(0, 0%, 12.9%);
76
- --kds-color-border-primary: hsl(0, 0%, 72.5%);
77
- --kds-color-border-selected-bold: hsl(0, 0%, 18.8%);
78
- --kds-color-border-selected: hsl(0, 0%, 32.2%);
79
- --kds-color-border-selected-accent: hsl(209.4, 57.3%, 49.6%);
80
- --kds-color-border-warning-bold: hsl(19, 63.1%, 38.2%);
81
- --kds-color-border-warning: hsl(30.8, 79.3%, 73.5%);
82
- --kds-color-border-danger-bold: hsl(348.8, 90.9%, 34.5%);
83
- --kds-color-border-danger: hsl(3.4, 100%, 86.1%);
84
- --kds-color-border-success-bold: hsl(116.1, 46.6%, 25.7%);
85
- --kds-color-border-success: hsl(112, 56.5%, 71.2%);
86
- --kds-color-border-info-bold: hsl(208.3, 60.5%, 33.7%);
87
- --kds-color-border-info: hsl(214.5, 100%, 84.3%);
88
- --kds-color-border-transparent: hsl(345 0% 11.4% / 0);
89
- --kds-color-border-disabled: hsl(0, 0%, 72.5%);
90
- --kds-color-border-brand: hsl(50.8, 100%, 50%);
91
- --kds-color-border-neutral-bold-initial: hsl(330 0% 10.2% / 0.4);
92
- --kds-color-border-neutral-bold-hover: hsl(330 0% 10.2% / 0.64);
93
- --kds-color-border-neutral-bold-active: hsl(330 0% 10.2% / 0.74);
94
- --kds-color-focus-outline: hsl(209.4, 57.3%, 49.6%);
95
- --kds-color-focus-background: hsl(215.7 100% 91.8% / 0.4);
96
- --kds-color-blanket-default: hsl(345 0% 11.4% / 0.8);
97
- --kds-color-chart-data-series-1: hsl(173.4, 37.1%, 38.6%);
98
- --kds-color-chart-data-series-2: hsl(211.3, 67.3%, 59.2%);
99
- --kds-color-chart-data-series-3: hsl(359.6, 84.3%, 62.5%);
100
- --kds-color-chart-data-series-4: hsl(0, 0%, 22%);
101
- --kds-color-chart-data-series-5: hsl(28, 39%, 50%);
102
- --kds-color-chart-data-series-6: hsl(208.2, 62.9%, 41.2%);
103
- --kds-color-chart-data-series-7: hsl(71.1, 46.3%, 32.2%);
104
- --kds-color-chart-data-series-8: hsl(308.3, 31.6%, 55.3%);
105
- --kds-color-chart-data-series-9: hsl(193.1, 60.2%, 43.3%);
106
- --kds-color-chart-data-track: hsl(0, 0%, 94.1%);
107
- --kds-color-chart-status-positive: hsl(107.4, 42.2%, 44.1%);
108
- --kds-color-chart-status-negative: hsl(356.3, 76.8%, 54.3%);
109
- --kds-color-chart-status-warning: hsl(19, 63.1%, 38.2%);
110
- --kds-color-chart-status-error: hsl(348.8, 90.9%, 34.5%);
111
- --kds-color-chart-scaffolding-axis: hsl(330 0% 10.2% / 0.2);
112
- --kds-color-chart-scaffolding-grid: hsl(330 0% 10.2% / 0.1);
113
- --kds-color-chart-scaffolding-border: hsl(330 0% 10.2% / 0.1);
114
- --kds-color-chart-scaffolding-segment: hsl(0, 0%, 98%);
115
- --kds-color-chart-scaffolding-surface: hsl(0, 0%, 98%);
116
- --kds-color-chart-scaffolding-tooltip-surface: hsl(0, 0%, 12.9%);
117
- --kds-color-chart-control-default: hsl(0, 0%, 43%);
118
- --kds-color-chart-control-hover: hsl(0, 0%, 15.7%);
119
- --kds-color-chart-control-selected: hsl(0, 0%, 18.8%);
120
- --kds-color-chart-control-disabled: hsl(0, 0%, 64%);
121
- --kds-color-chart-text-title: hsl(0, 0%, 15.7%);
122
- --kds-color-chart-text-subtitle: hsl(0, 0%, 43%);
123
- --kds-color-chart-text-axis-name: hsl(0, 0%, 43%);
124
- --kds-color-chart-text-axis-label: hsl(0, 0%, 43%);
125
- --kds-color-chart-text-legend: hsl(0, 0%, 15.7%);
126
- --kds-color-chart-text-tooltip: hsl(0, 0%, 98%);
127
- --kds-color-chart-text-label: hsl(0, 0%, 15.7%);
128
- --kds-color-chart-text-on-fill-dark: hsl(0, 0%, 15.7%);
129
- --kds-color-chart-text-on-fill-light: hsl(0, 0%, 98%);
130
- --kds-color-nodes-and-variables-flow-variable: hsl(359.6, 84.3%, 62.5%);
131
- --kds-color-nodes-and-variables-loop: hsl(187.7, 51.7%, 76.5%);
132
- --kds-color-nodes-and-variables-manipulator: hsl(50.8, 100%, 50%);
133
- --kds-color-nodes-and-variables-predictor: hsl(106.5, 42.6%, 54.9%);
134
- --kds-color-nodes-and-variables-source: hsl(30, 80.4%, 60%);
135
- --kds-color-nodes-and-variables-visualizer: hsl(193.1, 60.2%, 43.3%);
136
- --kds-color-nodes-and-variables-widget: hsl(193.1, 60.2%, 43.3%);
137
- --kds-color-nodes-and-variables-scope: hsl(304.6, 27.4%, 46.5%);
138
- --kds-color-nodes-and-variables-learner: hsl(67.3, 67.8%, 54.9%);
139
- --kds-color-nodes-and-variables-sink: hsl(359.6, 84.3%, 62.5%);
140
- --kds-color-nodes-and-variables-container: hsl(69.4, 53.5%, 39.6%);
141
- --kds-color-nodes-and-variables-unknown: hsl(353, 74.7%, 44.9%);
142
- --kds-color-nodes-and-variables-other: hsl(29, 43%, 58%);
143
- --kds-color-nodes-and-variables-metanode: hsl(0, 0%, 99%);
144
- --kds-color-nodes-and-variables-metanode-border: hsl(0, 0%, 32.2%);
145
- --kds-color-nodes-and-variables-component: hsl(0, 0%, 72.5%);
146
- --kds-color-nodes-and-variables-special-state: hsl(0, 0%, 99%);
147
- --kds-color-nodes-and-variables-forbidden-border: hsl(0, 0%, 18.8%);
148
- --kds-color-nodes-and-variables-forbidden: hsl(0, 0%, 90.2%);
149
- --kds-color-nodes-and-variables-warning-border: hsl(19, 63.1%, 38.2%);
150
- --kds-color-nodes-and-variables-warning: hsl(31, 100%, 82.5%);
151
- --kds-color-nodes-and-variables-error-border: hsl(348.8, 90.9%, 34.5%);
152
- --kds-color-nodes-and-variables-error: hsl(1.5, 100%, 92.4%);
153
- --kds-color-nodes-and-variables-loading-border: hsl(208.3, 60.5%, 33.7%);
154
- --kds-color-nodes-and-variables-loading: hsl(215.7, 100%, 91.8%);
155
- --kds-color-nodes-and-variables-configuration: hsl(64.6, 68.6%, 70.0%);
156
- --kds-color-nodes-and-variables-quickform: hsl(212.1, 78.2%, 67.6%);
157
- --kds-color-port-data: hsl(0, 0%, 11.4%);
158
- --kds-color-port-flow-variable: hsl(359.6, 84.3%, 62.5%);
159
- --kds-color-port-neutral-inverted: hsl(0, 0%, 99%);
160
- --kds-color-annotations-special-nodes: hsl(0, 0%, 72.5%);
161
- --kds-color-annotations-special-nodes-bold: hsl(0, 0%, 32.2%);
162
- --kds-color-annotations-visualizer: hsl(193.1, 60.2%, 43.3%);
163
- --kds-color-annotations-loading-bold: hsl(208.3, 60.5%, 33.7%);
164
- --kds-color-annotations-manipulator: hsl(50.8, 100%, 50%);
165
- --kds-color-annotations-source: hsl(30, 80.4%, 60%);
166
- --kds-color-annotations-sink: hsl(359.6, 84.3%, 62.5%);
167
- --kds-color-annotations-learner: hsl(67.3, 67.8%, 54.9%);
168
- --kds-color-annotations-predictor: hsl(106.5, 42.6%, 54.9%);
169
- --kds-color-annotations-container: hsl(66.5, 64.4%, 80.2%);
170
- --kds-color-annotations-flow-variable: hsl(173.4, 37.1%, 38.6%);
171
- --kds-color-annotations-teal-dark: hsl(176.7, 82%, 17.5%);
172
- --kds-color-annotations-other: hsl(29, 43%, 58%);
173
- --kds-color-annotations-loop: hsl(25, 30%, 35%);
174
- --kds-color-state-error: hsl(353, 74.7%, 44.9%);
175
- --kds-color-state-error-border: hsl(348, 94.3%, 20.8%);
176
- --kds-color-state-warning: hsl(47.6, 100%, 67.6%);
177
- --kds-color-state-warning-border: hsl(19, 63.1%, 38.2%);
178
- --kds-color-state-success: hsl(106.5, 42.6%, 54.9%);
179
- --kds-color-state-success-border: hsl(116.1, 46.6%, 25.7%);
180
- --kds-color-state-loading: hsl(208.3, 60.5%, 33.7%);
181
- --kds-color-state-inactive: hsl(0, 0%, 99%);
182
- --kds-color-state-inactive-border: hsl(0, 0%, 90.2%);
183
- --kds-color-state-disabled: hsl(0, 0%, 72.5%);
184
- --kds-color-state-disabled-border: hsl(0, 0%, 48.2%);
185
- --kds-color-state-background: hsl(0, 0%, 90.2%);
186
- --kds-color-connector-data: hsl(0, 0%, 15.7%);
187
- --kds-color-connector-flow-variable: hsl(359.6, 84.3%, 62.5%);
188
- --kds-color-elevation-top: hsl(210 0% 72.5% / 0.32);
189
- --kds-color-elevation-middle: hsl(180 0% 32.2% / 0.14);
190
- --kds-color-elevation-bottom: hsl(180 0% 32.2% / 0.12);
191
- --kds-color-elevation-knob: hsl(180 0% 32.2% / 0.5);
192
- --kds-color-desktop-header-background-default: hsl(0, 0%, 10.2%);
193
- --kds-color-desktop-header-background-muted: hsl(0, 0%, 98%);
194
- --kds-color-desktop-header-background-accent: hsl(0, 0%, 98%);
195
- --kds-color-desktop-header-text-and-icon-neutral: hsl(0, 0%, 15.7%);
196
- --kds-color-desktop-header-text-and-icon-muted: hsl(0, 0%, 32.2%);
197
- --kds-color-desktop-header-border-default: hsl(330 0% 10.2% / 0.1);
198
- --kds-color-table-header-background-default: hsl(0, 0%, 99%);
199
- --kds-color-toggle-switch-knob-initial: hsl(0, 0%, 99%);
200
- --kds-color-toggle-switch-knob-disabled: hsl(0, 0%, 90.2%);
201
- --kds-color-toggle-switch-icon-on: hsl(0, 0%, 15.7%);
202
- --kds-color-toggle-switch-icon-off: hsl(0, 0%, 43%);
203
- --kds-color-toggle-switch-icon-disabled: hsl(0, 0%, 64%);
204
- --kds-color-loading-spinner-progress-on-primary: hsl(none 0% 98%);
205
- --kds-color-loading-spinner-progress-on-surface: hsl(0, 0%, 15.7%);
206
- --kds-color-loading-spinner-track-on-primary: hsl(none 0% 98% / 0.24);
207
- --kds-color-loading-spinner-track-on-surface: hsl(332.73 0% 15.7% / 0.24);
208
- --kds-color-tooltip-background-default: hsl(0, 0%, 12.9%);
209
- --kds-color-tooltip-text-and-icon-neutral: hsl(0, 0%, 98%);
210
- --kds-color-text-highlight-background-default: hsl(212.1 78.2% 67.6% / 0.6);
211
- --kds-color-avatar-background-red: hsl(3.5, 100%, 79.6%);
212
- --kds-color-avatar-background-orange: hsl(31.2, 82.8%, 65.9%);
213
- --kds-color-avatar-background-yellow: hsl(50.8, 100%, 50%);
214
- --kds-color-avatar-background-green: hsl(109, 47.2%, 61.4%);
215
- --kds-color-avatar-background-teal: hsl(169.8, 30.6%, 66.1%);
216
- --kds-color-avatar-background-blue: hsl(213.6, 91.6%, 76.7%);
217
- --kds-color-avatar-background-purple: hsl(320.0, 44.7%, 81.6%);
218
- --kds-color-avatar-background-aquamarine: hsl(185.8, 49.2%, 87.6%);
219
- --kds-color-avatar-background-grassgreen: hsl(63.4, 68.5%, 75.1%);
220
- --kds-color-avatar-background-brown: hsl(30, 47%, 68%);
221
- --kds-color-avatar-background-empty: hsl(330 0% 94.521%);
222
- --kds-color-avatar-text-and-icon-red: hsl(348, 94.3%, 20.8%);
223
- --kds-color-avatar-text-and-icon-orange: hsl(13.1, 66.1%, 23.1%);
224
- --kds-color-avatar-text-and-icon-yellow: hsl(44.3, 94.2%, 13.5%);
225
- --kds-color-avatar-text-and-icon-green: hsl(132.3, 52%, 14.7%);
226
- --kds-color-avatar-text-and-icon-teal: hsl(174.5, 93.2%, 11.6%);
227
- --kds-color-avatar-text-and-icon-blue: hsl(209.4, 49.5%, 20.2%);
228
- --kds-color-avatar-text-and-icon-purple: hsl(295.5, 33.9%, 23.1%);
229
- --kds-color-avatar-text-and-icon-aquamarine: hsl(200.9, 63.2%, 26.7%);
230
- --kds-color-avatar-text-and-icon-grassgreen: hsl(72.2, 39.2%, 24.5%);
231
- --kds-color-avatar-text-and-icon-brown: hsl(23, 27%, 24%);
232
- --kds-border-action-transparent: 1px solid hsl(345 0% 11.4% / 0);
233
- --kds-border-action-default: 1px solid hsl(330 0% 10.2% / 0.4);
234
- --kds-border-action-disabled: 1px solid hsl(0, 0%, 72.5%);
235
- --kds-border-action-focused: 2px solid hsl(209.4, 57.3%, 49.6%);
236
- --kds-border-action-selected: 1px solid hsl(0, 0%, 32.2%);
237
- --kds-border-action-selected-accent: 1px solid hsl(209.4, 57.3%, 49.6%);
238
- --kds-border-action-error: 1px solid hsl(348.8, 90.9%, 34.5%);
239
- --kds-border-action-primary: 1px solid hsl(0, 0%, 12.9%);
240
- --kds-border-action-input: 1px solid hsl(330 0% 10.2% / 0.4);
241
- --kds-border-base-default: 1px solid hsl(330 0% 10.2% / 0.4);
242
- --kds-border-base-muted: 1px solid hsl(330 0% 10.2% / 0.2);
243
- --kds-border-base-subtle: 1px solid hsl(330 0% 10.2% / 0.1);
244
- --kds-border-base-brand: 1px solid hsl(50.8, 100%, 50%);
245
- --kds-border-base-danger: 1px solid hsl(3.4, 100%, 86.1%);
246
- --kds-border-base-warning: 1px solid hsl(30.8, 79.3%, 73.5%);
247
- --kds-border-base-success: 1px solid hsl(112, 56.5%, 71.2%);
248
- --kds-border-base-info: 1px solid hsl(214.5, 100%, 84.3%);
249
- --kds-border-node-status-empty: 1px solid hsl(0, 0%, 90.2%);
250
- --kds-border-node-status-error: 1px solid hsl(348, 94.3%, 20.8%);
251
- --kds-border-node-status-warning: 1px solid hsl(19, 63.1%, 38.2%);
252
- --kds-border-node-status-success: 1px solid hsl(116.1, 46.6%, 25.7%);
253
- --kds-border-resize-handle-initial: 2px solid hsl(330 0% 10.2% / 0.4);
254
- --kds-border-resize-handle-hover: 2px solid hsl(330 0% 10.2% / 0.64);
255
- --kds-border-resize-handle-active: 2px solid hsl(330 0% 10.2% / 0.74);
256
- --kds-border-color-picker-handle-initial: 2px solid hsl(0, 0%, 99%);
257
- --kds-elevation-level-0: 0 0 0 0 hsl(210 0% 72.5% / 0.32);
258
- --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);
259
- --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);
260
- --kds-fake-border-xs-muted: 0 0 0 0.5px hsl(330 0% 10.2% / 0.2);
261
- --kds-box-shadow-knob: 0 1px 2px 0 hsl(180 0% 32.2% / 0.5);
262
- }