@knime/kds-components 0.0.7 → 0.0.9

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 (30) hide show
  1. package/dist/index.css +219 -107
  2. package/dist/index.js +173 -34
  3. package/dist/index.js.map +1 -1
  4. package/dist/src/Button/BaseButton.vue.d.ts +42 -0
  5. package/dist/src/Button/BaseButton.vue.d.ts.map +1 -0
  6. package/dist/src/Button/Button.vue.d.ts +16 -22
  7. package/dist/src/Button/Button.vue.d.ts.map +1 -1
  8. package/dist/src/Button/LinkButton.vue.d.ts +36 -0
  9. package/dist/src/Button/LinkButton.vue.d.ts.map +1 -0
  10. package/dist/src/Icon/DataType.vue.d.ts +1 -1
  11. package/dist/src/Icon/DataType.vue.d.ts.map +1 -1
  12. package/dist/src/Icon/Icon.vue.d.ts +0 -1
  13. package/dist/src/Icon/Icon.vue.d.ts.map +1 -1
  14. package/dist/src/Icon/types.d.ts +3 -1
  15. package/dist/src/Icon/types.d.ts.map +1 -1
  16. package/dist/src/constants.d.ts +2 -0
  17. package/dist/src/constants.d.ts.map +1 -0
  18. package/dist/src/index.d.ts +2 -0
  19. package/dist/src/index.d.ts.map +1 -1
  20. package/dist/src/types.d.ts +3 -0
  21. package/dist/src/types.d.ts.map +1 -0
  22. package/dist/src/util/index.d.ts +2 -0
  23. package/dist/src/util/index.d.ts.map +1 -1
  24. package/dist/src/util/nuxtComponentResolver.d.ts +2 -0
  25. package/dist/src/util/nuxtComponentResolver.d.ts.map +1 -0
  26. package/dist/src/util/useDarkMode.d.ts +4 -0
  27. package/dist/src/util/useDarkMode.d.ts.map +1 -1
  28. package/dist/src/util/useLegacyMode.d.ts +5 -0
  29. package/dist/src/util/useLegacyMode.d.ts.map +1 -0
  30. package/package.json +11 -5
package/dist/index.css CHANGED
@@ -1,220 +1,332 @@
1
1
  .kds-icon {
2
- &[data-v-e17d6dd9] {
2
+ &[data-v-757e0464] {
3
3
  --icon-width: var(--kds-dimension-icon-1x);
4
4
  --icon-height: var(--kds-dimension-icon-1x);
5
5
  --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
6
6
 
7
7
  display: inline-block;
8
- vertical-align: middle;
9
- shape-rendering: geometricprecision;
10
8
  width: var(--icon-width);
9
+ /* min sizes, otherwise they might collapse if there is not enough space */
10
+ min-width: var(--icon-width);
11
11
  height: var(--icon-height);
12
+ min-height: var(--icon-height);
13
+ vertical-align: middle;
12
14
  stroke-width: var(--icon-stroke-width);
15
+ shape-rendering: geometricprecision;
13
16
  }
14
- &.x-small[data-v-e17d6dd9] {
17
+ &.xsmall[data-v-757e0464] {
15
18
  --icon-width: var(--kds-dimension-icon-0-56x);
16
19
  --icon-height: var(--kds-dimension-icon-0-56x);
17
20
  --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
18
- }
19
- &.small[data-v-e17d6dd9] {
21
+ @media (max-resolution: 1.5dppx) {
22
+ /* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel
23
+ rendering issues which manifests in misaligned or 'jumping' svg content.
24
+ Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
25
+ CSS transform. Thus the position of the SVG elements stays intact. */
26
+ &[data-v-757e0464] {
27
+ --scaling-factor: 0.75;
28
+ --icon-width: var(--kds-dimension-icon-0-75x);
29
+ --icon-height: var(--kds-dimension-icon-0-75x);
30
+ --icon-stroke-width: calc(
31
+ var(--kds-border-width-icon-stroke-s) / var(--scaling-factor)
32
+ );
33
+ shape-rendering: crispEdges;
34
+ transform: scale(var(--scaling-factor));
35
+ }
36
+ }
37
+ }
38
+ &.small[data-v-757e0464] {
20
39
  --icon-width: var(--kds-dimension-icon-0-75x);
21
40
  --icon-height: var(--kds-dimension-icon-0-75x);
22
41
  --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
23
42
  }
24
- &.large[data-v-e17d6dd9] {
43
+ &.large[data-v-757e0464] {
25
44
  --icon-width: var(--kds-dimension-icon-1-25x);
26
45
  --icon-height: var(--kds-dimension-icon-1-25x);
27
46
  --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
28
47
  }
29
48
  }
30
49
 
31
- /* stylelint-disable */
50
+ html.kds-legacy {
51
+ --kds-legacy-button-border-radius: var(--kds-border-radius-container-pill);
52
+ }
53
+
32
54
  .button {
33
- &[data-v-20a2767d] {
34
- text-rendering: geometricprecision;
35
- font: var(--kds-font-interactive-medium-m);
55
+ &[data-v-580fb18a] {
36
56
  position: relative;
37
57
  display: flex;
38
- height: var(--kds-dimension-action-height-1-75x);
39
- padding: 0 var(--kds-spacing-container-0-5x);
40
- justify-content: center;
41
- align-items: center;
42
58
  flex-shrink: 0;
43
- gap: var(--kds-spacing-container-0-25x);
44
- border-radius: var(--kds-border-radius-container-0-37x);
59
+ align-items: center;
60
+ justify-content: center;
61
+ width: fit-content;
62
+ min-width: 15px;
63
+ max-width: 100%;
64
+ overflow: hidden;
45
65
  cursor: pointer;
46
- transition: all var(--transition-speed) ease;
47
- }
48
- & .button-label[data-v-20a2767d] {
49
- padding: 0 var(--kds-spacing-container-0-25x);
50
- }
51
- &.button--medium[data-v-20a2767d] {
52
- /* Default styles are already set */
53
- }
54
- &.button--large[data-v-20a2767d] {
55
- height: var(--kds-dimension-action-height-2-25x);
56
- font-size: var(--font-size-large);
57
- padding: 0 var(--kds-spacing-container-0-75x);
58
- border-radius: var(--kds-border-radius-container-0-50x);
59
- }
60
- &.button--small[data-v-20a2767d] {
61
- height: var(--kds-dimension-action-height-1_5x);
62
- gap: var(--kds-spacing-container-0_12x);
63
- font-size: var(--font-size-small);
66
+
67
+ /* for LinkButton */
64
68
  }
65
- &[data-v-20a2767d]:focus-visible {
66
- outline: 2px solid var(--kds-color-focus-outline);
69
+ &[data-v-580fb18a]:is(a) {
70
+ text-decoration: none;
67
71
  }
68
- &[data-v-20a2767d]:disabled {
72
+ &.disabled[data-v-580fb18a] {
69
73
  cursor: not-allowed;
70
74
  }
71
- &.button--filled {
72
- &[data-v-20a2767d] {
75
+ &[data-v-580fb18a]:focus-visible {
76
+ outline: var(--kds-border-action-focused);
77
+ outline-offset: var(--kds-focus-outline-offset);
78
+ }
79
+ &.filled {
80
+ &[data-v-580fb18a] {
73
81
  color: var(--kds-color-text-and-icon-primary-inverted);
74
82
  background-color: var(--kds-color-background-primary-bold-initial);
75
83
  border: var(--kds-border-action-transparent);
76
-
77
- /* apply semi transparent overlay for disabled state */
78
84
  }
79
- &:not(:disabled) {
80
- &[data-v-20a2767d]:hover {
85
+ &.disabled[data-v-580fb18a] {
86
+ color: var(--kds-color-text-and-icon-disabled-inverted);
87
+ background-color: var(--kds-color-background-disabled-primary);
88
+ }
89
+ &:not(.disabled) {
90
+ &[data-v-580fb18a]:hover {
81
91
  background-color: var(--kds-color-background-primary-bold-hover);
82
92
  }
83
- &[data-v-20a2767d]:active {
93
+ &[data-v-580fb18a]:active {
84
94
  background-color: var(--kds-color-background-primary-bold-active);
85
95
  }
86
96
  }
87
- &.button--disabled[data-v-20a2767d]::before {
88
- content: "";
89
- position: absolute;
90
- top: calc(-1 * var(--border-width));
91
- left: calc(-1 * var(--border-width));
92
- width: calc(100% + 2 * var(--border-width));
93
- height: calc(100% + 2 * var(--border-width));
94
- background-color: var(--kds-color-background-disabled-default);
95
- pointer-events: none;
96
- border-radius: inherit;
97
+ &.destructive {
98
+ &[data-v-580fb18a] {
99
+ color: var(--kds-color-text-and-icon-danger-inverted);
100
+ background-color: var(--kds-color-background-danger-bold-initial);
97
101
  }
102
+ &.disabled[data-v-580fb18a] {
103
+ color: var(--kds-color-text-and-icon-disabled-inverted);
104
+ background-color: var(--kds-color-background-disabled-danger);
105
+ }
106
+ &:not(.disabled) {
107
+ &[data-v-580fb18a]:hover {
108
+ background-color: var(--kds-color-background-danger-bold-hover);
109
+ }
110
+ &[data-v-580fb18a]:active {
111
+ background-color: var(--kds-color-background-danger-bold-active);
98
112
  }
99
- &.button--outlined {
100
- &[data-v-20a2767d] {
101
- background-color: var(--kds-color-background-neutral-initial);
102
- color: var(--kds-color-text-and-icon-neutral);
103
- border: var(--kds-border-action-default);
104
113
  }
105
- &:not(:disabled) {
106
- &[data-v-20a2767d]:hover {
107
- background-color: var(--kds-color-background-primary-hover);
108
- color: var(--kds-color-text-and-icon-primary-bold);
109
114
  }
110
- &[data-v-20a2767d]:active {
111
- background-color: var(--kds-color-background-primary-active);
112
- color: var(--kds-color-text-and-icon-primary);
113
115
  }
116
+ &.outlined {
117
+ &[data-v-580fb18a] {
118
+ color: var(--kds-color-text-and-icon-neutral);
119
+ background-color: var(--kds-color-background-neutral-initial);
120
+ border: var(--kds-border-action-default);
114
121
  }
115
- &.button--disabled[data-v-20a2767d] {
122
+ &.disabled[data-v-580fb18a] {
116
123
  color: var(--kds-color-text-and-icon-disabled);
117
124
  border: var(--kds-border-action-disabled);
118
125
  }
126
+ &:not(.disabled) {
127
+ &[data-v-580fb18a]:hover {
128
+ background-color: var(--kds-color-background-neutral-hover);
129
+ }
130
+ &[data-v-580fb18a]:active {
131
+ background-color: var(--kds-color-background-neutral-active);
132
+ }
133
+ }
134
+ &.destructive {
135
+ &[data-v-580fb18a] {
136
+ color: var(--kds-color-text-and-icon-danger);
137
+ border: var(--kds-border-action-error);
138
+ }
139
+ &.disabled[data-v-580fb18a] {
140
+ color: var(--kds-color-text-and-icon-disabled);
141
+ border: var(--kds-border-action-disabled);
142
+ }
143
+ &:not(.disabled) {
144
+ &[data-v-580fb18a]:hover {
145
+ background-color: var(--kds-color-background-danger-hover);
119
146
  }
120
- &.button--transparent {
121
- &[data-v-20a2767d] {
147
+ &[data-v-580fb18a]:active {
148
+ background-color: var(--kds-color-background-danger-active);
149
+ }
150
+ }
151
+ }
152
+ }
153
+ &.transparent {
154
+ &[data-v-580fb18a] {
155
+ color: var(--kds-color-text-and-icon-neutral);
122
156
  background-color: var(--kds-color-background-neutral-initial);
123
157
  border: var(--kds-border-action-transparent);
124
- color: var(--kds-color-text-and-icon-neutral);
125
158
  }
126
- &:not(:disabled) {
127
- &[data-v-20a2767d]:hover {
128
- background-color: var(--kds-color-background-primary-hover);
129
- color: var(--kds-color-text-and-icon-primary-bold);
159
+ &.disabled[data-v-580fb18a] {
160
+ color: var(--kds-color-text-and-icon-disabled);
130
161
  }
131
- &[data-v-20a2767d]:active {
132
- background-color: var(--kds-color-background-primary-active);
133
- color: var(--kds-color-text-and-icon-primary);
162
+ &:not(.disabled) {
163
+ &[data-v-580fb18a]:hover {
164
+ background-color: var(--kds-color-background-neutral-hover);
134
165
  }
166
+ &[data-v-580fb18a]:active {
167
+ background-color: var(--kds-color-background-neutral-active);
135
168
  }
136
- &.button--disabled[data-v-20a2767d] {
137
- color: var(--kds-color-text-and-icon-disabled);
138
169
  }
170
+ &.destructive {
171
+ &[data-v-580fb18a] {
172
+ color: var(--kds-color-text-and-icon-danger);
139
173
  }
140
- &.button__icon {
141
- &[data-v-20a2767d] {
142
- font-size: 1.2em;
143
- line-height: 0;
174
+ &.disabled[data-v-580fb18a] {
175
+ color: var(--kds-color-text-and-icon-disabled);
144
176
  }
145
- &.button--leading[data-v-20a2767d] {
146
- margin-right: var(--spacing-xs);
177
+ &:not(.disabled) {
178
+ &[data-v-580fb18a]:hover {
179
+ background-color: var(--kds-color-background-danger-hover);
180
+ }
181
+ &[data-v-580fb18a]:active {
182
+ background-color: var(--kds-color-background-danger-active);
183
+ }
184
+ }
185
+ }
186
+ }
187
+ & .label[data-v-580fb18a] {
188
+ max-width: 200px;
189
+ padding: 0 var(--kds-spacing-container-0-12x);
190
+ overflow: hidden;
191
+ text-overflow: ellipsis;
192
+ white-space: nowrap;
193
+ text-rendering: geometricprecision;
194
+ }
195
+ &.xsmall[data-v-580fb18a] {
196
+ gap: var(--kds-spacing-container-0-12x);
197
+ height: var(--kds-dimension-component-height-1-25x);
198
+ padding: 0
199
+ calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
200
+
201
+ font: var(--kds-font-base-interactive-xsmall-strong);
202
+ border-radius: var(
203
+ --kds-legacy-button-border-radius,
204
+ var(--kds-border-radius-container-0-25x)
205
+ );
206
+ }
207
+ &.small[data-v-580fb18a] {
208
+ gap: var(--kds-spacing-container-0-12x);
209
+ height: var(--kds-dimension-component-height-1-5x);
210
+ padding: 0
211
+ calc(var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
212
+
213
+ font: var(--kds-font-base-interactive-small-strong);
214
+ border-radius: var(
215
+ --kds-legacy-button-border-radius,
216
+ var(--kds-border-radius-container-0-37x)
217
+ );
218
+ }
219
+ &.medium[data-v-580fb18a] {
220
+ gap: var(--kds-spacing-container-0-25x);
221
+ height: var(--kds-dimension-component-height-1-75x);
222
+ padding: 0
223
+ calc(var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
224
+
225
+ font: var(--kds-font-base-interactive-medium-strong);
226
+ border-radius: var(
227
+ --kds-legacy-button-border-radius,
228
+ var(--kds-border-radius-container-0-37x)
229
+ );
230
+ }
231
+ &.large {
232
+ &[data-v-580fb18a] {
233
+ gap: var(--kds-spacing-container-0-25x);
234
+ height: var(--kds-dimension-component-height-2-25x);
235
+ padding: 0
236
+ calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
237
+
238
+ font: var(--kds-font-base-interactive-large-strong);
239
+ border-radius: var(
240
+ --kds-legacy-button-border-radius,
241
+ var(--kds-border-radius-container-0-50x)
242
+ );
147
243
  }
148
- &.button--trailing[data-v-20a2767d] {
149
- margin-left: var(--spacing-xs);
244
+ & .label[data-v-580fb18a] {
245
+ padding: 0 var(--kds-spacing-container-0-25x);
150
246
  }
151
247
  }
152
248
  }
153
249
  .kds-icon {
154
- &[data-v-38f09fe6] {
250
+ &[data-v-84ed8d14] {
155
251
  --icon-width: var(--kds-dimension-icon-1x);
156
252
  --icon-height: var(--kds-dimension-icon-1x);
157
253
  --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
158
254
 
159
255
  display: inline-block;
160
- vertical-align: middle;
161
- shape-rendering: geometricprecision;
162
256
  width: var(--icon-width);
257
+ /* min sizes, otherwise they might collapse if there is not enough space */
258
+ min-width: var(--icon-width);
163
259
  height: var(--icon-height);
260
+ min-height: var(--icon-height);
261
+ vertical-align: middle;
164
262
  stroke-width: var(--icon-stroke-width);
263
+ shape-rendering: geometricprecision;
165
264
  }
166
- &.x-small[data-v-38f09fe6] {
265
+ &.xsmall[data-v-84ed8d14] {
167
266
  --icon-width: var(--kds-dimension-icon-0-56x);
168
267
  --icon-height: var(--kds-dimension-icon-0-56x);
169
268
  --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
170
- }
171
- &.small[data-v-38f09fe6] {
269
+ @media (max-resolution: 1.5dppx) {
270
+ /* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel
271
+ rendering issues which manifests in misaligned or 'jumping' svg content.
272
+ Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
273
+ CSS transform. Thus the position of the SVG elements stays intact. */
274
+ &[data-v-84ed8d14] {
275
+ --scaling-factor: 0.75;
276
+ --icon-width: var(--kds-dimension-icon-0-75x);
277
+ --icon-height: var(--kds-dimension-icon-0-75x);
278
+ --icon-stroke-width: calc(
279
+ var(--kds-border-width-icon-stroke-s) / var(--scaling-factor)
280
+ );
281
+ shape-rendering: crispEdges;
282
+ transform: scale(var(--scaling-factor));
283
+ }
284
+ }
285
+ }
286
+ &.small[data-v-84ed8d14] {
172
287
  --icon-width: var(--kds-dimension-icon-0-75x);
173
288
  --icon-height: var(--kds-dimension-icon-0-75x);
174
289
  --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
175
290
  }
176
- &.large[data-v-38f09fe6] {
291
+ &.large[data-v-84ed8d14] {
177
292
  --icon-width: var(--kds-dimension-icon-1-25x);
178
293
  --icon-height: var(--kds-dimension-icon-1-25x);
179
294
  --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
180
295
  }
181
296
  }
182
297
  .kds-data-type-icon-container {
183
- &[data-v-38f09fe6] {
298
+ &[data-v-84ed8d14] {
184
299
  --data-type-height: var(--kds-dimension-component-height-1x);
185
300
  --data-type-width: var(--kds-dimension-component-width-1x);
186
301
  --data-type-padding: var(--kds-spacing-container-0-12x);
187
302
 
188
- height: var(--data-type-height);
303
+ display: inline-flex;
304
+ align-items: center;
305
+ justify-content: center;
189
306
  width: var(--data-type-width);
307
+ height: var(--data-type-height);
190
308
  padding: var(--data-type-padding);
191
309
  color: var(--kds-color-desktop-header-text-and-icon-muted);
192
310
  background-color: var(--kds-color-background-page-default);
193
311
  border: var(--kds-border-base-muted);
194
312
  border-radius: var(--kds-border-radius-container-0-12x);
195
- display: inline-flex;
196
- justify-content: center;
197
- align-items: center;
198
313
 
199
314
  /* The kds-data-type-icon class is needed to increase the specificity to overwrite the icon-stroke-width */
200
315
  }
201
- &.small[data-v-38f09fe6] {
316
+ &.small[data-v-84ed8d14] {
202
317
  --data-type-height: var(--kds-dimension-icon-0-75x);
203
318
  --data-type-width: var(--kds-dimension-icon-0-75x);
204
319
  --data-type-padding: var(--kds-spacing-container-none);
205
320
  }
206
- &.large[data-v-38f09fe6] {
321
+ &.large[data-v-84ed8d14] {
207
322
  --data-type-height: var(--kds-dimension-component-height-1-25x);
208
323
  --data-type-width: var(--kds-dimension-component-width-1-25x);
209
324
  }
210
325
  & .kds-icon.kds-data-type-icon {
211
- &.x-small[data-v-38f09fe6] {
212
- --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
213
- }
214
- &.small[data-v-38f09fe6] {
326
+ &.small[data-v-84ed8d14] {
215
327
  --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
216
328
  }
217
- &.medium[data-v-38f09fe6] {
329
+ &.medium[data-v-84ed8d14] {
218
330
  --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
219
331
  }
220
332
  }