@knime/kds-styles 0.0.9 → 0.0.11

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.
@@ -2345,7 +2345,7 @@ syntax: "<string>";
2345
2345
  @property --kds-border-action-input {
2346
2346
  syntax: "<string>";
2347
2347
  inherits: false;
2348
- initial-value: 1px none light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.5));
2348
+ initial-value: 1px solid light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.5));
2349
2349
  }
2350
2350
 
2351
2351
  @property --kds-border-base-default {
@@ -0,0 +1,205 @@
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%);
8
+ --kds-color-surface-subtle: hsl(0 0% 90%);
9
+ --kds-color-background-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.16);
12
+ --kds-color-background-neutral-active: hsl(180 0% 48% / 0.32);
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(2.4731 100% 96.876%);
29
+ --kds-color-background-danger-hover: hsl(3 100% 86%);
30
+ --kds-color-background-danger-active: hsl(4 100% 80%);
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-warning-initial: hsl(29.514 98.554% 96.838%);
35
+ --kds-color-background-warning-hover: hsl(29.512 39.352% 92.463%);
36
+ --kds-color-background-warning-active: hsl(29.51 23.726% 88.128%);
37
+ --kds-color-background-warning-bold-initial: hsl(22 60% 45%);
38
+ --kds-color-background-warning-bold-hover: hsl(21.929 58.367% 37.68%);
39
+ --kds-color-background-warning-bold-active: hsl(21.825 55.638% 28.836%);
40
+ --kds-color-background-success-initial: hsl(118.68 97.025% 96.828%);
41
+ --kds-color-background-success-hover: hsl(118.68 38.813% 92.454%);
42
+ --kds-color-background-success-active: hsl(118.67 23.411% 88.119%);
43
+ --kds-color-background-success-bold-initial: hsl(111 48% 31%);
44
+ --kds-color-background-success-bold-hover: hsl(110.47 45.877% 26.246%);
45
+ --kds-color-background-success-bold-active: hsl(109.63 42.516% 20.454%);
46
+ --kds-color-background-info-initial: hsl(216.77 100% 96.851%);
47
+ --kds-color-background-info-hover: hsl(216.77 39.826% 92.476%);
48
+ --kds-color-background-info-active: hsl(216.78 23.993% 88.14%);
49
+ --kds-color-background-info-bold-initial: hsl(208 63% 41%);
50
+ --kds-color-background-info-bold-hover: hsl(208.92 58.259% 34.934%);
51
+ --kds-color-background-info-bold-active: hsl(210.19 52% 27.273%);
52
+ --kds-color-background-brand-initial: hsl(51 100% 50%);
53
+ --kds-color-background-brand-hover: hsl(50.165 84.159% 44.695%);
54
+ --kds-color-background-brand-active: hsl(49.385 73.102% 35.333%);
55
+ --kds-color-background-input-initial: hsl(0 0% 99%);
56
+ --kds-color-background-input-hover: hsl(330 0% 94.521%);
57
+ --kds-color-background-input-active: hsl(330 0% 85.683%);
58
+ --kds-color-background-disabled-default: hsl(180 0% 48% / 0.48);
59
+ --kds-color-background-disabled-primary: hsl(173.77 18.031% 40.307%);
60
+ --kds-color-background-disabled-danger: hsl(1.5788 43.542% 37.998%);
61
+ --kds-color-background-disabled-primary-copy: hsl(240 0% 37.873%);
62
+ --kds-color-text-and-icon-neutral: hsl(0 0% 16%);
63
+ --kds-color-text-and-icon-muted: hsl(0 0% 32%);
64
+ --kds-color-text-and-icon-subtle: hsl(0 0% 43%);
65
+ --kds-color-text-and-icon-neutral-inverted: hsl(0 0% 98%);
66
+ --kds-color-text-and-icon-primary: hsl(0 0% 16%);
67
+ --kds-color-text-and-icon-primary-inverted: hsl(0 0% 98%);
68
+ --kds-color-text-and-icon-selected: hsl(0 0% 16%);
69
+ --kds-color-text-and-icon-selected-inverted: hsl(0 0% 98%);
70
+ --kds-color-text-and-icon-warning: hsl(19 63% 38%);
71
+ --kds-color-text-and-icon-warning-inverted: hsl(31 100% 83%);
72
+ --kds-color-text-and-icon-danger: hsl(349 91% 35%);
73
+ --kds-color-text-and-icon-danger-inverted: hsl(0 100% 97%);
74
+ --kds-color-text-and-icon-success: hsl(116 47% 26%);
75
+ --kds-color-text-and-icon-success-inverted: hsl(120 95% 92%);
76
+ --kds-color-text-and-icon-disabled: hsl(0 0% 64%);
77
+ --kds-color-text-and-icon-disabled-inverted: hsl(0 0% 73%);
78
+ --kds-color-text-and-icon-info: hsl(208 61% 34%);
79
+ --kds-color-text-and-icon-editor: hsl(0 0% 11%);
80
+ --kds-color-border-neutral: hsl(345 0% 10% / 0.4);
81
+ --kds-color-border-muted: hsl(345 0% 10% / 0.2);
82
+ --kds-color-border-subtle: hsl(345 0% 10% / 0.1);
83
+ --kds-color-border-primary-bold: hsl(0 0% 13%);
84
+ --kds-color-border-primary: hsl(0 0% 73%);
85
+ --kds-color-border-selected-bold: hsl(0 0% 19%);
86
+ --kds-color-border-selected: hsl(0 0% 32%);
87
+ --kds-color-border-selected-accent: hsl(209 57% 50%);
88
+ --kds-color-border-warning-bold: hsl(19 63% 38%);
89
+ --kds-color-border-warning: hsl(31 79% 74%);
90
+ --kds-color-border-danger-bold: hsl(349 91% 35%);
91
+ --kds-color-border-danger: hsl(3 100% 86%);
92
+ --kds-color-border-success-bold: hsl(116 47% 26%);
93
+ --kds-color-border-success: hsl(112 57% 71%);
94
+ --kds-color-border-info-bold: hsl(208 61% 34%);
95
+ --kds-color-border-info: hsl(215 100% 84%);
96
+ --kds-color-border-transparent: hsl(330 0% 11% / 0);
97
+ --kds-color-border-disabled: hsl(0 0% 73%);
98
+ --kds-color-border-brand: hsl(51 100% 50%);
99
+ --kds-color-border-neutral-bold-initial: hsl(345 0% 10% / 0.4);
100
+ --kds-color-border-neutral-bold-hover: hsl(345 0% 10% / 0.64);
101
+ --kds-color-border-neutral-bold-active: hsl(345 0% 10% / 0.74);
102
+ --kds-color-focus-outline: hsl(209 57% 50%);
103
+ --kds-color-focus-background: hsl(217 100% 97%);
104
+ --kds-color-blanket-default: hsl(330 0% 11% / 0.8);
105
+ --kds-color-nodes-and-variables-flow-variable: hsl(360 84% 63%);
106
+ --kds-color-nodes-and-variables-loop: hsl(188 52% 77%);
107
+ --kds-color-nodes-and-variables-manipulator: hsl(51 100% 50%);
108
+ --kds-color-nodes-and-variables-predictor: hsl(107 43% 55%);
109
+ --kds-color-nodes-and-variables-source: hsl(30 80% 60%);
110
+ --kds-color-nodes-and-variables-visualizer: hsl(193 60% 43%);
111
+ --kds-color-nodes-and-variables-scope: hsl(305 27% 47%);
112
+ --kds-color-nodes-and-variables-learner: hsl(67 68% 55%);
113
+ --kds-color-nodes-and-variables-sink: hsl(360 84% 63%);
114
+ --kds-color-nodes-and-variables-container: hsl(69 54% 40%);
115
+ --kds-color-nodes-and-variables-unknown: hsl(353 75% 45%);
116
+ --kds-color-nodes-and-variables-other: hsl(29 43% 58%);
117
+ --kds-color-nodes-and-variables-special-nodes-bold: hsl(0 0% 32%);
118
+ --kds-color-nodes-and-variables-special-nodes: hsl(0 0% 73%);
119
+ --kds-color-nodes-and-variables-special-nodes-muted: hsl(0 0% 90%);
120
+ --kds-color-nodes-and-variables-special-nodes-border: hsl(0 0% 19%);
121
+ --kds-color-nodes-and-variables-special-nodes-background: hsl(0 0% 99%);
122
+ --kds-color-nodes-and-variables-warning-bold: hsl(19 63% 38%);
123
+ --kds-color-nodes-and-variables-warning: hsl(31 100% 83%);
124
+ --kds-color-nodes-and-variables-error-bold: hsl(349 91% 35%);
125
+ --kds-color-nodes-and-variables-error: hsl(2 100% 92%);
126
+ --kds-color-nodes-and-variables-loading-bold: hsl(208 61% 34%);
127
+ --kds-color-nodes-and-variables-loading: hsl(216 100% 92%);
128
+ --kds-color-nodes-and-variables-configuration: hsl(65 69% 70%);
129
+ --kds-color-port-data: hsl(0 0% 11%);
130
+ --kds-color-port-flow-variable: hsl(360 84% 63%);
131
+ --kds-color-port-neutral-inverted: hsl(0 0% 99%);
132
+ --kds-color-annotations-special-nodes: hsl(0 0% 73%);
133
+ --kds-color-annotations-special-nodes-bold: hsl(0 0% 32%);
134
+ --kds-color-annotations-visualizer: hsl(193 60% 43%);
135
+ --kds-color-annotations-loading-bold: hsl(208 61% 34%);
136
+ --kds-color-annotations-manipulator: hsl(51 100% 50%);
137
+ --kds-color-annotations-source: hsl(30 80% 60%);
138
+ --kds-color-annotations-sink: hsl(360 84% 63%);
139
+ --kds-color-annotations-learner: hsl(67 68% 55%);
140
+ --kds-color-annotations-predictor: hsl(107 43% 55%);
141
+ --kds-color-annotations-container: hsl(67 64% 80%);
142
+ --kds-color-annotations-flow-variable: hsl(173 37% 39%);
143
+ --kds-color-annotations-teal-dark: hsl(177 82% 18%);
144
+ --kds-color-annotations-other: hsl(29 43% 58%);
145
+ --kds-color-annotations-loop: hsl(25 30% 35%);
146
+ --kds-color-node-state-error: hsl(353 75% 45%);
147
+ --kds-color-node-state-error-border: hsl(348 94% 21%);
148
+ --kds-color-node-state-warning: hsl(51 100% 50%);
149
+ --kds-color-node-state-warning-border: hsl(43 100% 19%);
150
+ --kds-color-node-state-executed: hsl(107 43% 55%);
151
+ --kds-color-node-state-executed-border: hsl(116 47% 26%);
152
+ --kds-color-node-state-executing: hsl(208 63% 41%);
153
+ --kds-color-node-state-inactive: hsl(0 0% 99%);
154
+ --kds-color-node-state-inactive-border: hsl(0 0% 73%);
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%);
173
+ --kds-color-loading-spinner-progress-on-filled: hsl(none 0% 98%);
174
+ --kds-color-loading-spinner-progress-on-transparent: hsl(0 0% 16%);
175
+ --kds-color-loading-spinner-track-on-filled: hsl(none 0% 98% / 0.24);
176
+ --kds-color-loading-spinner-track-on-transparent: hsl(120 0% 16% / 0.24);
177
+ --kds-border-action-transparent: 0 solid hsl(330 0% 11% / 0);
178
+ --kds-border-action-default: 1px solid hsl(345 0% 10% / 0.4);
179
+ --kds-border-action-disabled: 1px solid hsl(0 0% 73%);
180
+ --kds-border-action-focused: 2px solid hsl(209 57% 50%);
181
+ --kds-border-action-selected: 1px solid hsl(0 0% 32%);
182
+ --kds-border-action-selected-accent: 1px solid hsl(209 57% 50%);
183
+ --kds-border-action-error: 1px solid hsl(349 91% 35%);
184
+ --kds-border-action-primary: 1px solid hsl(0 0% 13%);
185
+ --kds-border-action-input: 1px solid hsl(345 0% 10% / 0.4);
186
+ --kds-border-base-default: 1px solid hsl(345 0% 10% / 0.4);
187
+ --kds-border-base-muted: 1px solid hsl(345 0% 10% / 0.2);
188
+ --kds-border-base-subtle: 1px solid hsl(345 0% 10% / 0.1);
189
+ --kds-border-base-brand: 1px solid hsl(51 100% 50%);
190
+ --kds-border-base-danger: 1px solid hsl(3 100% 86%);
191
+ --kds-border-base-warning: 1px solid hsl(31 79% 74%);
192
+ --kds-border-base-success: 1px solid hsl(112 57% 71%);
193
+ --kds-border-base-info: 1px solid hsl(215 100% 84%);
194
+ --kds-border-node-status-empty: 1px solid hsl(0 0% 73%);
195
+ --kds-border-node-status-idle: 1px solid hsl(348 94% 21%);
196
+ --kds-border-node-status-warning: 1px solid hsl(43 100% 19%);
197
+ --kds-border-node-status-executed: 1px solid hsl(116 47% 26%);
198
+ --kds-border-resize-handle-initial: 2px solid hsl(345 0% 10% / 0.4);
199
+ --kds-border-resize-handle-hover: 2px solid hsl(345 0% 10% / 0.64);
200
+ --kds-border-resize-handle-active: 2px solid hsl(345 0% 10% / 0.74);
201
+ --kds-elevation-level-0: 0 0 0 0 hsl(330 0% 73% / 0.32);
202
+ --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);
203
+ --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);
204
+ --kds-box-shadow-knob: 0 1px 2px 0 hsl(330 0% 32% / 0.5);
205
+ }
@@ -393,7 +393,7 @@
393
393
  --kds-border-action-selected-accent: 1px solid light-dark(hsl(209 57% 50%), hsl(214 92% 77%));
394
394
  --kds-border-action-error: 1px solid light-dark(hsl(349 91% 35%), hsl(4 100% 80%));
395
395
  --kds-border-action-primary: 1px solid hsl(177 82% 18%);
396
- --kds-border-action-input: 1px none light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.5));
396
+ --kds-border-action-input: 1px solid light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.5));
397
397
  --kds-border-base-default: 1px solid light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.5));
398
398
  --kds-border-base-muted: 1px solid light-dark(hsl(345 0% 10% / 0.2), hsl(330 0% 99% / 0.2));
399
399
  --kds-border-base-subtle: 1px solid light-dark(hsl(345 0% 10% / 0.1), hsl(330 0% 99% / 0.1));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@knime/kds-styles",
3
- "version": "0.0.9",
3
+ "version": "0.0.11",
4
4
  "description": "Package containing the design tokens and icons for the KNIME Design System",
5
5
  "repository": {
6
6
  "type": "git",
@@ -14,13 +14,13 @@
14
14
  "modern-normalize": "3.0.1"
15
15
  },
16
16
  "devDependencies": {
17
- "@knime/styles": "^1.10.0",
17
+ "@knime/styles": "^1.14.3",
18
18
  "@tokens-studio/sd-transforms": "^2.0.1",
19
19
  "@types/jsdom": "^21.1.7",
20
20
  "@types/node": "^24.2.0",
21
21
  "consola": "^3.4.2",
22
22
  "jsdom": "^27.0.0",
23
- "style-dictionary": "^5.0.4",
23
+ "style-dictionary": "^5.1.1",
24
24
  "svgo": "^4.0.0",
25
25
  "typescript": "^5.9.2"
26
26
  },
@@ -31,7 +31,7 @@
31
31
  "./index.css": "./dist/css/index.css",
32
32
  "./kds-variables.css": "./dist/tokens/css/_variables.css",
33
33
  "./kds-properties.css": "./dist/tokens/css/_properties.css",
34
- "./kds-legacy-theme.css": "./dist/css/legacy/legacy-theme.css",
34
+ "./kds-legacy-theme.css": "./dist/tokens/css/_variables-legacy.css",
35
35
  "./img/*": "./dist/img/*.svg",
36
36
  "./img/*/def": "./dist/img/*/def.ts"
37
37
  },
@@ -1,20 +0,0 @@
1
- :root.kds-legacy {
2
- --primary-initial: var(--kds-core-color-neutral-650);
3
- --primary-bold: var(--kds-core-color-neutral-650);
4
- --selected-initial: var(--kds-core-color-neutral-175);
5
- --selected-hover: var(--kds-core-color-neutral-250);
6
- --selected-active: var(--kds-core-color-neutral-275);
7
- --selected-bold-initial: var(--kds-core-color-neutral-550);
8
- --selected-bold-hover: var(--kds-core-color-neutral-650);
9
- --selected-bold-active: var(--kds-core-color-neutral-725);
10
- --disabled-primary-input: var(--kds-core-color-neutral-650);
11
- --text-an-icon-primary: var(--kds-core-color-neutral-650);
12
- --text-an-icon-primary-inverted: var(--kds-core-color-neutral-100);
13
- --text-an-icon-selected: var(--kds-core-color-neutral-650);
14
- --text-an-icon-selected-inverted: var(--kds-core-color-neutral-100);
15
- --text-an-icon-disabled-inverted: var(--kds-core-color-neutral-275);
16
- --border-primary-bold: var(--kds-core-color-neutral-725);
17
- --border-primary: var(--kds-core-color-neutral-250);
18
- --border-selected-bold: var(--kds-core-color-neutral-550);
19
- --border-selected: var(--kds-core-color-neutral-400);
20
- }