@knime/kds-styles 6.12.2 → 7.1.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 (9) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +3 -3
  3. package/dist/tokens/ts/border.js +50 -50
  4. package/dist/tokens/ts/box-shadow.js +2 -2
  5. package/dist/tokens/ts/color.js +458 -458
  6. package/dist/tokens/ts/elevation.js +14 -14
  7. package/dist/tokens/ts/fake-border.js +2 -2
  8. package/dist/tokens/ts/types.d.ts +3 -3
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @knime/kds-styles
2
2
 
3
+ ## 7.1.0
4
+
5
+ ## 7.0.0
6
+
7
+ ### Major Changes
8
+
9
+ - f9928f3: BREAKING CHANGES:
10
+
11
+ - `KdsColorValue`: renamed the `alpha` component to `a` (matching `h`/`s`/`l`). Update any code reading `color.light.alpha` / `color.dark.alpha` to `.a`.
12
+
3
13
  ## 6.12.2
4
14
 
5
15
  ## 6.12.1
package/README.md CHANGED
@@ -67,15 +67,15 @@ import { color, dimension, font } from "@knime/kds-styles/tokens";
67
67
 
68
68
  dimension.component.height["1.5x"].value; // 24 (px)
69
69
  dimension.component.height["1.5x"].css.value; // "24px"
70
- color.surface.default.light; // { h: 0, s: 0, l: 98, alpha: 1 }
71
- color.surface.default.dark; // { h: 0, s: 0, l: 15.7, alpha: 1 }
70
+ color.surface.default.light; // { h: 0, s: 0, l: 98, a: 1 }
71
+ color.surface.default.dark; // { h: 0, s: 0, l: 15.7, a: 1 }
72
72
  color.surface.default.css.value; // "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))"
73
73
  color.surface.default.css.variable; // "var(--kds-color-surface-default)"
74
74
  font.base.display.small.fontSize; // { value: 20, unit: "px" }
75
75
  font.base.display.small.css.value; // "700 20px/normal Roboto, sans-serif"
76
76
  ```
77
77
 
78
- The exports mirror the token JSON structure (without the `kds` root): one constant per top-level token group plus the value types (`KdsColor`, `KdsDimension`, `KdsTypography`, ...). Dimensional values are `{ value, unit }` objects, color values are always `{ light, dark }` pairs of HSL component objects (equivalent to the CSS color `hsl(<h> <s>% <l>% / <alpha>)`), and composite tokens (border, elevation, typography) remain structured objects. Every token additionally carries its CSS representation in `css`: the exact value from the emitted CSS custom properties (`css.value`, including `light-dark()` for colors and complete shorthands for composite tokens) and the custom property reference (`css.variable`). The internal `core` primitives are intentionally not emitted — their values are already inlined into the semantic tokens, which are the only ones consumers should use.
78
+ The exports mirror the token JSON structure (without the `kds` root): one constant per top-level token group plus the value types (`KdsColor`, `KdsDimension`, `KdsTypography`, ...). Dimensional values are `{ value, unit }` objects, color values are always `{ light, dark }` pairs of HSL component objects (equivalent to the CSS color `hsl(<h> <s>% <l>% / <a>)`), and composite tokens (border, elevation, typography) remain structured objects. Every token additionally carries its CSS representation in `css`: the exact value from the emitted CSS custom properties (`css.value`, including `light-dark()` for colors and complete shorthands for composite tokens) and the custom property reference (`css.variable`). The internal `core` primitives are intentionally not emitted — their values are already inlined into the semantic tokens, which are the only ones consumers should use.
79
79
 
80
80
  ## Important Scripts
81
81
 
package/dist/tokens/ts/border.js CHANGED
@@ -6,8 +6,8 @@ export const border = {
6
6
  action: {
7
7
  transparent: {
8
8
  color: {
9
- light: { h: 345, s: 0, l: 11.4, alpha: 0 },
10
- dark: { h: 345, s: 0, l: 11.4, alpha: 0 },
9
+ light: { h: 345, s: 0, l: 11.4, a: 0 },
10
+ dark: { h: 345, s: 0, l: 11.4, a: 0 },
11
11
  },
12
12
  width: { value: 1, unit: "px" },
13
13
  style: "solid",
@@ -18,8 +18,8 @@ export const border = {
18
18
  },
19
19
  default: {
20
20
  color: {
21
- light: { h: 330, s: 0, l: 10.2, alpha: 0.4 },
22
- dark: { h: 330, s: 0, l: 99, alpha: 0.5 },
21
+ light: { h: 330, s: 0, l: 10.2, a: 0.4 },
22
+ dark: { h: 330, s: 0, l: 99, a: 0.5 },
23
23
  },
24
24
  width: { value: 1, unit: "px" },
25
25
  style: "solid",
@@ -30,8 +30,8 @@ export const border = {
30
30
  },
31
31
  disabled: {
32
32
  color: {
33
- light: { h: 0, s: 0, l: 72.5, alpha: 1 },
34
- dark: { h: 0, s: 0, l: 48.2, alpha: 1 },
33
+ light: { h: 0, s: 0, l: 72.5, a: 1 },
34
+ dark: { h: 0, s: 0, l: 48.2, a: 1 },
35
35
  },
36
36
  width: { value: 1, unit: "px" },
37
37
  style: "solid",
@@ -42,8 +42,8 @@ export const border = {
42
42
  },
43
43
  focused: {
44
44
  color: {
45
- light: { h: 209.4, s: 57.3, l: 49.6, alpha: 1 },
46
- dark: { h: 213.6, s: 91.6, l: 76.7, alpha: 1 },
45
+ light: { h: 209.4, s: 57.3, l: 49.6, a: 1 },
46
+ dark: { h: 213.6, s: 91.6, l: 76.7, a: 1 },
47
47
  },
48
48
  width: { value: 2, unit: "px" },
49
49
  style: "solid",
@@ -54,8 +54,8 @@ export const border = {
54
54
  },
55
55
  selected: {
56
56
  color: {
57
- light: { h: 171.8, s: 27, l: 47.8, alpha: 1 },
58
- dark: { h: 168, s: 46.7, l: 85.3, alpha: 1 },
57
+ light: { h: 171.8, s: 27, l: 47.8, a: 1 },
58
+ dark: { h: 168, s: 46.7, l: 85.3, a: 1 },
59
59
  },
60
60
  width: { value: 1, unit: "px" },
61
61
  style: "solid",
@@ -66,8 +66,8 @@ export const border = {
66
66
  },
67
67
  "selected-accent": {
68
68
  color: {
69
- light: { h: 209.4, s: 57.3, l: 49.6, alpha: 1 },
70
- dark: { h: 213.6, s: 91.6, l: 76.7, alpha: 1 },
69
+ light: { h: 209.4, s: 57.3, l: 49.6, a: 1 },
70
+ dark: { h: 213.6, s: 91.6, l: 76.7, a: 1 },
71
71
  },
72
72
  width: { value: 1, unit: "px" },
73
73
  style: "solid",
@@ -78,8 +78,8 @@ export const border = {
78
78
  },
79
79
  error: {
80
80
  color: {
81
- light: { h: 348.8, s: 90.9, l: 34.5, alpha: 1 },
82
- dark: { h: 3.5, s: 100, l: 79.6, alpha: 1 },
81
+ light: { h: 348.8, s: 90.9, l: 34.5, a: 1 },
82
+ dark: { h: 3.5, s: 100, l: 79.6, a: 1 },
83
83
  },
84
84
  width: { value: 1, unit: "px" },
85
85
  style: "solid",
@@ -90,8 +90,8 @@ export const border = {
90
90
  },
91
91
  primary: {
92
92
  color: {
93
- light: { h: 176.7, s: 82, l: 17.5, alpha: 1 },
94
- dark: { h: 176.7, s: 82, l: 17.5, alpha: 1 },
93
+ light: { h: 176.7, s: 82, l: 17.5, a: 1 },
94
+ dark: { h: 176.7, s: 82, l: 17.5, a: 1 },
95
95
  },
96
96
  width: { value: 1, unit: "px" },
97
97
  style: "solid",
@@ -102,8 +102,8 @@ export const border = {
102
102
  },
103
103
  input: {
104
104
  color: {
105
- light: { h: 330, s: 0, l: 10.2, alpha: 0.4 },
106
- dark: { h: 330, s: 0, l: 99, alpha: 0.5 },
105
+ light: { h: 330, s: 0, l: 10.2, a: 0.4 },
106
+ dark: { h: 330, s: 0, l: 99, a: 0.5 },
107
107
  },
108
108
  width: { value: 1, unit: "px" },
109
109
  style: "solid",
@@ -116,8 +116,8 @@ export const border = {
116
116
  base: {
117
117
  default: {
118
118
  color: {
119
- light: { h: 330, s: 0, l: 10.2, alpha: 0.4 },
120
- dark: { h: 330, s: 0, l: 99, alpha: 0.5 },
119
+ light: { h: 330, s: 0, l: 10.2, a: 0.4 },
120
+ dark: { h: 330, s: 0, l: 99, a: 0.5 },
121
121
  },
122
122
  width: { value: 1, unit: "px" },
123
123
  style: "solid",
@@ -128,8 +128,8 @@ export const border = {
128
128
  },
129
129
  muted: {
130
130
  color: {
131
- light: { h: 330, s: 0, l: 10.2, alpha: 0.2 },
132
- dark: { h: 330, s: 0, l: 99, alpha: 0.2 },
131
+ light: { h: 330, s: 0, l: 10.2, a: 0.2 },
132
+ dark: { h: 330, s: 0, l: 99, a: 0.2 },
133
133
  },
134
134
  width: { value: 1, unit: "px" },
135
135
  style: "solid",
@@ -140,8 +140,8 @@ export const border = {
140
140
  },
141
141
  subtle: {
142
142
  color: {
143
- light: { h: 330, s: 0, l: 10.2, alpha: 0.1 },
144
- dark: { h: 330, s: 0, l: 99, alpha: 0.1 },
143
+ light: { h: 330, s: 0, l: 10.2, a: 0.1 },
144
+ dark: { h: 330, s: 0, l: 99, a: 0.1 },
145
145
  },
146
146
  width: { value: 1, unit: "px" },
147
147
  style: "solid",
@@ -152,8 +152,8 @@ export const border = {
152
152
  },
153
153
  brand: {
154
154
  color: {
155
- light: { h: 50.8, s: 100, l: 50, alpha: 1 },
156
- dark: { h: 50.8, s: 100, l: 50, alpha: 1 },
155
+ light: { h: 50.8, s: 100, l: 50, a: 1 },
156
+ dark: { h: 50.8, s: 100, l: 50, a: 1 },
157
157
  },
158
158
  width: { value: 1, unit: "px" },
159
159
  style: "solid",
@@ -164,8 +164,8 @@ export const border = {
164
164
  },
165
165
  danger: {
166
166
  color: {
167
- light: { h: 3.4, s: 100, l: 86.1, alpha: 1 },
168
- dark: { h: 348, s: 94.3, l: 20.8, alpha: 1 },
167
+ light: { h: 3.4, s: 100, l: 86.1, a: 1 },
168
+ dark: { h: 348, s: 94.3, l: 20.8, a: 1 },
169
169
  },
170
170
  width: { value: 1, unit: "px" },
171
171
  style: "solid",
@@ -176,8 +176,8 @@ export const border = {
176
176
  },
177
177
  warning: {
178
178
  color: {
179
- light: { h: 30.8, s: 79.3, l: 73.5, alpha: 1 },
180
- dark: { h: 13.1, s: 66.1, l: 23.1, alpha: 1 },
179
+ light: { h: 30.8, s: 79.3, l: 73.5, a: 1 },
180
+ dark: { h: 13.1, s: 66.1, l: 23.1, a: 1 },
181
181
  },
182
182
  width: { value: 1, unit: "px" },
183
183
  style: "solid",
@@ -188,8 +188,8 @@ export const border = {
188
188
  },
189
189
  success: {
190
190
  color: {
191
- light: { h: 112, s: 56.5, l: 71.2, alpha: 1 },
192
- dark: { h: 123.7, s: 46.7, l: 20.6, alpha: 1 },
191
+ light: { h: 112, s: 56.5, l: 71.2, a: 1 },
192
+ dark: { h: 123.7, s: 46.7, l: 20.6, a: 1 },
193
193
  },
194
194
  width: { value: 1, unit: "px" },
195
195
  style: "solid",
@@ -200,8 +200,8 @@ export const border = {
200
200
  },
201
201
  info: {
202
202
  color: {
203
- light: { h: 214.5, s: 100, l: 84.3, alpha: 1 },
204
- dark: { h: 210, s: 50, l: 27.5, alpha: 1 },
203
+ light: { h: 214.5, s: 100, l: 84.3, a: 1 },
204
+ dark: { h: 210, s: 50, l: 27.5, a: 1 },
205
205
  },
206
206
  width: { value: 1, unit: "px" },
207
207
  style: "solid",
@@ -214,8 +214,8 @@ export const border = {
214
214
  "node-status": {
215
215
  empty: {
216
216
  color: {
217
- light: { h: 0, s: 0, l: 90.2, alpha: 1 },
218
- dark: { h: 0, s: 0, l: 32.2, alpha: 1 },
217
+ light: { h: 0, s: 0, l: 90.2, a: 1 },
218
+ dark: { h: 0, s: 0, l: 32.2, a: 1 },
219
219
  },
220
220
  width: { value: 1, unit: "px" },
221
221
  style: "solid",
@@ -226,8 +226,8 @@ export const border = {
226
226
  },
227
227
  error: {
228
228
  color: {
229
- light: { h: 348, s: 94.3, l: 20.8, alpha: 1 },
230
- dark: { h: 2.6, s: 100, l: 72.4, alpha: 1 },
229
+ light: { h: 348, s: 94.3, l: 20.8, a: 1 },
230
+ dark: { h: 2.6, s: 100, l: 72.4, a: 1 },
231
231
  },
232
232
  width: { value: 1, unit: "px" },
233
233
  style: "solid",
@@ -238,8 +238,8 @@ export const border = {
238
238
  },
239
239
  warning: {
240
240
  color: {
241
- light: { h: 19, s: 63.1, l: 38.2, alpha: 1 },
242
- dark: { h: 49.1, s: 99.1, l: 43.7, alpha: 1 },
241
+ light: { h: 19, s: 63.1, l: 38.2, a: 1 },
242
+ dark: { h: 49.1, s: 99.1, l: 43.7, a: 1 },
243
243
  },
244
244
  width: { value: 1, unit: "px" },
245
245
  style: "solid",
@@ -250,8 +250,8 @@ export const border = {
250
250
  },
251
251
  success: {
252
252
  color: {
253
- light: { h: 116.1, s: 46.6, l: 25.7, alpha: 1 },
254
- dark: { h: 106.5, s: 42.6, l: 54.9, alpha: 1 },
253
+ light: { h: 116.1, s: 46.6, l: 25.7, a: 1 },
254
+ dark: { h: 106.5, s: 42.6, l: 54.9, a: 1 },
255
255
  },
256
256
  width: { value: 1, unit: "px" },
257
257
  style: "solid",
@@ -264,8 +264,8 @@ export const border = {
264
264
  ResizeHandle: {
265
265
  initial: {
266
266
  color: {
267
- light: { h: 330, s: 0, l: 10.2, alpha: 0.4 },
268
- dark: { h: 330, s: 0, l: 99, alpha: 0.4 },
267
+ light: { h: 330, s: 0, l: 10.2, a: 0.4 },
268
+ dark: { h: 330, s: 0, l: 99, a: 0.4 },
269
269
  },
270
270
  width: { value: 2, unit: "px" },
271
271
  style: "solid",
@@ -276,8 +276,8 @@ export const border = {
276
276
  },
277
277
  hover: {
278
278
  color: {
279
- light: { h: 330, s: 0, l: 10.2, alpha: 0.64 },
280
- dark: { h: 330, s: 0, l: 99, alpha: 0.58 },
279
+ light: { h: 330, s: 0, l: 10.2, a: 0.64 },
280
+ dark: { h: 330, s: 0, l: 99, a: 0.58 },
281
281
  },
282
282
  width: { value: 2, unit: "px" },
283
283
  style: "solid",
@@ -288,8 +288,8 @@ export const border = {
288
288
  },
289
289
  active: {
290
290
  color: {
291
- light: { h: 330, s: 0, l: 10.2, alpha: 0.74 },
292
- dark: { h: 330, s: 0, l: 99, alpha: 0.68 },
291
+ light: { h: 330, s: 0, l: 10.2, a: 0.74 },
292
+ dark: { h: 330, s: 0, l: 99, a: 0.68 },
293
293
  },
294
294
  width: { value: 2, unit: "px" },
295
295
  style: "solid",
@@ -302,8 +302,8 @@ export const border = {
302
302
  ColorPickerHandle: {
303
303
  initial: {
304
304
  color: {
305
- light: { h: 0, s: 0, l: 99, alpha: 1 },
306
- dark: { h: 0, s: 0, l: 99, alpha: 1 },
305
+ light: { h: 0, s: 0, l: 99, a: 1 },
306
+ dark: { h: 0, s: 0, l: 99, a: 1 },
307
307
  },
308
308
  width: { value: 2, unit: "px" },
309
309
  style: "solid",
package/dist/tokens/ts/box-shadow.js CHANGED
@@ -11,8 +11,8 @@ export const boxShadow = {
11
11
  blur: { value: 2, unit: "px" },
12
12
  spread: { value: 0, unit: "px" },
13
13
  color: {
14
- light: { h: 180, s: 0, l: 32.2, alpha: 0.5 },
15
- dark: { h: 330, s: 0, l: 10.2, alpha: 0.6 },
14
+ light: { h: 180, s: 0, l: 32.2, a: 0.5 },
15
+ dark: { h: 330, s: 0, l: 10.2, a: 0.6 },
16
16
  },
17
17
  },
18
18
  ],