@splunk/themes 1.4.1 → 1.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.
- package/CHANGELOG.md +8 -0
- package/design-tokens/colors.js +26 -24
- package/design-tokens/dataViz.js +33 -33
- package/design-tokens/deprecated.js +227 -37
- package/design-tokens/elevation.js +3 -4
- package/design-tokens/spacing-sizing.js +4 -2
- package/design-tokens/typography.js +14 -4
- package/enterprise/dark.js +3 -5
- package/enterprise/light.js +4 -5
- package/getTheme.js +3 -2
- package/mixins/prose.js +6 -6
- package/package.json +5 -1
- package/prisma/base.js +3 -4
- package/prisma/light.js +2 -2
- package/splunk-magnetic/index.js +1 -1
- package/tokens.json +14260 -0
- package/types/design-tokens/colors.d.ts +40 -38
- package/types/design-tokens/dataViz.d.ts +1 -1
- package/types/design-tokens/deprecated.d.ts +440 -71
- package/types/design-tokens/elevation.d.ts +2 -4
- package/types/design-tokens/index.d.ts +2 -1
- package/types/design-tokens/spacing-sizing.d.ts +4 -2
- package/types/design-tokens/typography.d.ts +23 -4
- package/types/enterprise/dark.d.ts +2 -1
- package/types/enterprise/light.d.ts +2 -1
- package/types/mixins/prose.d.ts +4 -4
- package/types/prisma/base.d.ts +2 -1
- package/types/splunk-magnetic/index.d.ts +12 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
Change Log
|
|
2
2
|
============
|
|
3
3
|
|
|
4
|
+
1.5.0 - February 10, 2026
|
|
5
|
+
----------
|
|
6
|
+
New Features:
|
|
7
|
+
* New `lineLengthMinimum` token (SUI-8622).
|
|
8
|
+
|
|
9
|
+
Deprecations:
|
|
10
|
+
* `draggableBackground` has been deprecated (SUI-8623).
|
|
11
|
+
|
|
4
12
|
1.4.1 - December 3, 2025
|
|
5
13
|
----------
|
|
6
14
|
Bug Fixes:
|
package/design-tokens/colors.js
CHANGED
|
@@ -16,7 +16,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
16
16
|
* Action colors are used **exclusively** for styling Buttons borders and backgrounds.
|
|
17
17
|
* They define interaction states for primary, secondary, subtle, and destructive buttons.
|
|
18
18
|
*
|
|
19
|
-
* @
|
|
19
|
+
* @category color
|
|
20
20
|
*/
|
|
21
21
|
var actionColors = {
|
|
22
22
|
/**
|
|
@@ -134,85 +134,85 @@ var actionColors = {
|
|
|
134
134
|
/**
|
|
135
135
|
* Default text color for Primary Buttons.
|
|
136
136
|
*
|
|
137
|
-
* @
|
|
137
|
+
* @previewType font
|
|
138
138
|
*/
|
|
139
139
|
actionColorContentPrimary: '',
|
|
140
140
|
/**
|
|
141
141
|
* Disabled text color for Primary Buttons.
|
|
142
142
|
*
|
|
143
|
-
* @
|
|
143
|
+
* @previewType font
|
|
144
144
|
*/
|
|
145
145
|
actionColorContentPrimaryDisabled: '',
|
|
146
146
|
/**
|
|
147
147
|
* Default text color for Secondary Buttons.
|
|
148
148
|
*
|
|
149
|
-
* @
|
|
149
|
+
* @previewType font
|
|
150
150
|
*/
|
|
151
151
|
actionColorContentSecondary: '',
|
|
152
152
|
/**
|
|
153
153
|
* Disabled text color for Secondary Buttons.
|
|
154
154
|
*
|
|
155
|
-
* @
|
|
155
|
+
* @previewType font
|
|
156
156
|
*/
|
|
157
157
|
actionColorContentSecondaryDisabled: '',
|
|
158
158
|
/**
|
|
159
159
|
* Active text color for Subtle Buttons.
|
|
160
160
|
*
|
|
161
|
-
* @
|
|
161
|
+
* @previewType font
|
|
162
162
|
*/
|
|
163
163
|
actionColorContentSubtleActive: '',
|
|
164
164
|
/**
|
|
165
165
|
* Hover text color for Subtle Buttons.
|
|
166
166
|
*
|
|
167
|
-
* @
|
|
167
|
+
* @previewType font
|
|
168
168
|
*/
|
|
169
169
|
actionColorContentSubtleHover: '',
|
|
170
170
|
/**
|
|
171
171
|
* Default text color for Standalone Buttons.
|
|
172
172
|
*
|
|
173
|
-
* @
|
|
173
|
+
* @previewType font
|
|
174
174
|
*/
|
|
175
175
|
actionColorContentStandalone: '',
|
|
176
176
|
/**
|
|
177
177
|
* Active (pressed) text color for Standalone Buttons.
|
|
178
178
|
*
|
|
179
|
-
* @
|
|
179
|
+
* @previewType font
|
|
180
180
|
*/
|
|
181
181
|
actionColorContentStandaloneActive: '',
|
|
182
182
|
/**
|
|
183
183
|
* Disabled text color for Standalone Buttons.
|
|
184
184
|
*
|
|
185
|
-
* @
|
|
185
|
+
* @previewType font
|
|
186
186
|
*/
|
|
187
187
|
actionColorContentStandaloneDisabled: '',
|
|
188
188
|
/**
|
|
189
189
|
* Hover text color for Standalone Buttons.
|
|
190
190
|
*
|
|
191
|
-
* @
|
|
191
|
+
* @previewType font
|
|
192
192
|
*/
|
|
193
193
|
actionColorContentStandaloneHover: '',
|
|
194
194
|
/**
|
|
195
195
|
* Default text color for Destructive Buttons.
|
|
196
196
|
*
|
|
197
|
-
* @
|
|
197
|
+
* @previewType font
|
|
198
198
|
*/
|
|
199
199
|
actionColorContentDestructive: '',
|
|
200
200
|
/**
|
|
201
201
|
* Disabled text color for Destructive Buttons.
|
|
202
202
|
*
|
|
203
|
-
* @
|
|
203
|
+
* @previewType font
|
|
204
204
|
*/
|
|
205
205
|
actionColorContentDestructiveDisabled: '',
|
|
206
206
|
/**
|
|
207
207
|
* Default text color for Destructive Secondary Buttons.
|
|
208
208
|
*
|
|
209
|
-
* @
|
|
209
|
+
* @previewType font
|
|
210
210
|
*/
|
|
211
211
|
actionColorContentDestructiveSecondary: '',
|
|
212
212
|
/**
|
|
213
213
|
* Disabled text color for Destructive Secondary Buttons.
|
|
214
214
|
*
|
|
215
|
-
* @
|
|
215
|
+
* @previewType font
|
|
216
216
|
*/
|
|
217
217
|
actionColorContentDestructiveSecondaryDisabled: ''
|
|
218
218
|
};
|
|
@@ -225,7 +225,7 @@ var actionColors = {
|
|
|
225
225
|
* "Overlay" colors are intended to be placed over the default background color, such as `interactiveColorAccent`.
|
|
226
226
|
* If the default background color is not transparent, the `blend` mixin can be used to create a new color that combines the two.
|
|
227
227
|
*
|
|
228
|
-
* @
|
|
228
|
+
* @category color
|
|
229
229
|
*/
|
|
230
230
|
var interactiveColors = {
|
|
231
231
|
/**
|
|
@@ -292,7 +292,7 @@ var interactiveColors = {
|
|
|
292
292
|
* Neutral colors should be used sparingly. Prefer to use more semantic tokens for backgrounds and borders.
|
|
293
293
|
* These colors must not be used for content as they will not pass the required contrast ratio (instead, use [Content colors](#Content Colors)).
|
|
294
294
|
*
|
|
295
|
-
* @
|
|
295
|
+
* @category color
|
|
296
296
|
*/
|
|
297
297
|
var neutralColors = {
|
|
298
298
|
/**
|
|
@@ -337,7 +337,7 @@ var neutralColors = {
|
|
|
337
337
|
* #### Background colors
|
|
338
338
|
* Use background colors for page backgrounds and containers such as cards, modals, panels or popups.
|
|
339
339
|
*
|
|
340
|
-
* @
|
|
340
|
+
* @category color
|
|
341
341
|
*/
|
|
342
342
|
var backgroundColors = {
|
|
343
343
|
/**
|
|
@@ -378,7 +378,8 @@ var backgroundColors = {
|
|
|
378
378
|
* #### Content colors
|
|
379
379
|
* Use content colors to create visual hierarchy, convey status or importance for plain text content.
|
|
380
380
|
*
|
|
381
|
-
* @
|
|
381
|
+
* @category color
|
|
382
|
+
* @previewType font
|
|
382
383
|
*/
|
|
383
384
|
var contentColors = {
|
|
384
385
|
/**
|
|
@@ -442,7 +443,7 @@ var contentColors = {
|
|
|
442
443
|
/**
|
|
443
444
|
* #### UI Colors
|
|
444
445
|
*
|
|
445
|
-
* @
|
|
446
|
+
* @category color
|
|
446
447
|
*/
|
|
447
448
|
var uiColors = {
|
|
448
449
|
/**
|
|
@@ -459,7 +460,7 @@ var uiColors = {
|
|
|
459
460
|
*
|
|
460
461
|
* Weak variants do not meet graphical or text contrast and should only be used decoratively.
|
|
461
462
|
*
|
|
462
|
-
* @
|
|
463
|
+
* @category color
|
|
463
464
|
*/
|
|
464
465
|
var notificationColors = {
|
|
465
466
|
notificationColorInfoWeak: '',
|
|
@@ -482,7 +483,7 @@ var notificationColors = {
|
|
|
482
483
|
* Use severity colors for icons, indicators, and visual signals to help users quickly scan for criticality, risk, or state without relying only on text.
|
|
483
484
|
* Severity colors should be used to aid identifying the semantic meaning of an element; not used to communicate tone.
|
|
484
485
|
*
|
|
485
|
-
* @
|
|
486
|
+
* @category color
|
|
486
487
|
*/
|
|
487
488
|
var severityColors = {
|
|
488
489
|
severityColorCustom: '',
|
|
@@ -504,7 +505,8 @@ var severityColors = {
|
|
|
504
505
|
* Prefer to use the `Code` component rather than these tokens directly as it does this mapping automatically.
|
|
505
506
|
* See [Content Colors](#Content Colors)
|
|
506
507
|
*
|
|
507
|
-
* @
|
|
508
|
+
* @category color
|
|
509
|
+
* @previewType font
|
|
508
510
|
*/
|
|
509
511
|
var syntaxColors = {
|
|
510
512
|
syntaxBlue: '',
|
|
@@ -523,7 +525,7 @@ var syntaxColors = {
|
|
|
523
525
|
*
|
|
524
526
|
* Border color should be used to outline or divide content and UI elements.
|
|
525
527
|
*
|
|
526
|
-
* @
|
|
528
|
+
* @category color
|
|
527
529
|
*/
|
|
528
530
|
var borderColors = {
|
|
529
531
|
/**
|
package/design-tokens/dataViz.js
CHANGED
|
@@ -13,7 +13,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
13
13
|
/**
|
|
14
14
|
* #### Static colors
|
|
15
15
|
*
|
|
16
|
-
* @
|
|
16
|
+
* @category color
|
|
17
17
|
*/
|
|
18
18
|
var staticColors = {
|
|
19
19
|
static1: '',
|
|
@@ -41,7 +41,7 @@ var staticColors = {
|
|
|
41
41
|
/**
|
|
42
42
|
* #### Categorical 1D
|
|
43
43
|
*
|
|
44
|
-
* @
|
|
44
|
+
* @category color
|
|
45
45
|
*/
|
|
46
46
|
var categorical1D = {
|
|
47
47
|
categorical1D1: '',
|
|
@@ -56,7 +56,7 @@ var categorical1D = {
|
|
|
56
56
|
/**
|
|
57
57
|
* #### Categorical 1L
|
|
58
58
|
*
|
|
59
|
-
* @
|
|
59
|
+
* @category color
|
|
60
60
|
*/
|
|
61
61
|
var categorical1L = {
|
|
62
62
|
categorical1L1: '',
|
|
@@ -71,7 +71,7 @@ var categorical1L = {
|
|
|
71
71
|
/**
|
|
72
72
|
* #### Categorical 2D
|
|
73
73
|
*
|
|
74
|
-
* @
|
|
74
|
+
* @category color
|
|
75
75
|
*/
|
|
76
76
|
var categorical2D = {
|
|
77
77
|
categorical2D1: '',
|
|
@@ -86,7 +86,7 @@ var categorical2D = {
|
|
|
86
86
|
/**
|
|
87
87
|
* #### Categorical 2L
|
|
88
88
|
*
|
|
89
|
-
* @
|
|
89
|
+
* @category color
|
|
90
90
|
*/
|
|
91
91
|
var categorical2L = {
|
|
92
92
|
categorical2L1: '',
|
|
@@ -102,7 +102,7 @@ var categorical = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, ca
|
|
|
102
102
|
/**
|
|
103
103
|
* #### Divergent 1D
|
|
104
104
|
*
|
|
105
|
-
* @
|
|
105
|
+
* @category color
|
|
106
106
|
*/
|
|
107
107
|
var divergent1D = {
|
|
108
108
|
divergent1D1: '',
|
|
@@ -117,7 +117,7 @@ var divergent1D = {
|
|
|
117
117
|
/**
|
|
118
118
|
* #### Divergent 1L
|
|
119
119
|
*
|
|
120
|
-
* @
|
|
120
|
+
* @category color
|
|
121
121
|
*/
|
|
122
122
|
var divergent1L = {
|
|
123
123
|
divergent1L1: '',
|
|
@@ -132,7 +132,7 @@ var divergent1L = {
|
|
|
132
132
|
/**
|
|
133
133
|
* #### Divergent 2D
|
|
134
134
|
*
|
|
135
|
-
* @
|
|
135
|
+
* @category color
|
|
136
136
|
*/
|
|
137
137
|
var divergent2D = {
|
|
138
138
|
divergent2D1: '',
|
|
@@ -147,7 +147,7 @@ var divergent2D = {
|
|
|
147
147
|
/**
|
|
148
148
|
* #### Divergent 2L
|
|
149
149
|
*
|
|
150
|
-
* @
|
|
150
|
+
* @category color
|
|
151
151
|
*/
|
|
152
152
|
var divergent2L = {
|
|
153
153
|
divergent2L1: '',
|
|
@@ -162,7 +162,7 @@ var divergent2L = {
|
|
|
162
162
|
/**
|
|
163
163
|
* #### Divergent 3D
|
|
164
164
|
*
|
|
165
|
-
* @
|
|
165
|
+
* @category color
|
|
166
166
|
*/
|
|
167
167
|
var divergent3D = {
|
|
168
168
|
divergent3D1: '',
|
|
@@ -177,7 +177,7 @@ var divergent3D = {
|
|
|
177
177
|
/**
|
|
178
178
|
* #### Divergent 3L
|
|
179
179
|
*
|
|
180
|
-
* @
|
|
180
|
+
* @category color
|
|
181
181
|
*/
|
|
182
182
|
var divergent3L = {
|
|
183
183
|
divergent3L1: '',
|
|
@@ -192,7 +192,7 @@ var divergent3L = {
|
|
|
192
192
|
/**
|
|
193
193
|
* #### Divergent 4D
|
|
194
194
|
*
|
|
195
|
-
* @
|
|
195
|
+
* @category color
|
|
196
196
|
*/
|
|
197
197
|
var divergent4D = {
|
|
198
198
|
divergent4D1: '',
|
|
@@ -207,7 +207,7 @@ var divergent4D = {
|
|
|
207
207
|
/**
|
|
208
208
|
* #### Divergent 4L
|
|
209
209
|
*
|
|
210
|
-
* @
|
|
210
|
+
* @category color
|
|
211
211
|
*/
|
|
212
212
|
var divergent4L = {
|
|
213
213
|
divergent4L1: '',
|
|
@@ -223,7 +223,7 @@ var divergent = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectS
|
|
|
223
223
|
/**
|
|
224
224
|
* #### Sequential 1D
|
|
225
225
|
*
|
|
226
|
-
* @
|
|
226
|
+
* @category color
|
|
227
227
|
*/
|
|
228
228
|
var sequential1D = {
|
|
229
229
|
sequential1D1: '',
|
|
@@ -238,7 +238,7 @@ var sequential1D = {
|
|
|
238
238
|
/**
|
|
239
239
|
* #### Sequential 1L
|
|
240
240
|
*
|
|
241
|
-
* @
|
|
241
|
+
* @category color
|
|
242
242
|
*/
|
|
243
243
|
var sequential1L = {
|
|
244
244
|
sequential1L1: '',
|
|
@@ -253,7 +253,7 @@ var sequential1L = {
|
|
|
253
253
|
/**
|
|
254
254
|
* #### Sequential 2D
|
|
255
255
|
*
|
|
256
|
-
* @
|
|
256
|
+
* @category color
|
|
257
257
|
*/
|
|
258
258
|
var sequential2D = {
|
|
259
259
|
sequential2D1: '',
|
|
@@ -268,7 +268,7 @@ var sequential2D = {
|
|
|
268
268
|
/**
|
|
269
269
|
* #### Sequential 2L
|
|
270
270
|
*
|
|
271
|
-
* @
|
|
271
|
+
* @category color
|
|
272
272
|
*/
|
|
273
273
|
var sequential2L = {
|
|
274
274
|
sequential2L1: '',
|
|
@@ -283,7 +283,7 @@ var sequential2L = {
|
|
|
283
283
|
/**
|
|
284
284
|
* #### Sequential 3D
|
|
285
285
|
*
|
|
286
|
-
* @
|
|
286
|
+
* @category color
|
|
287
287
|
*/
|
|
288
288
|
var sequential3D = {
|
|
289
289
|
sequential3D1: '',
|
|
@@ -298,7 +298,7 @@ var sequential3D = {
|
|
|
298
298
|
/**
|
|
299
299
|
* #### Sequential 3L
|
|
300
300
|
*
|
|
301
|
-
* @
|
|
301
|
+
* @category color
|
|
302
302
|
*/
|
|
303
303
|
var sequential3L = {
|
|
304
304
|
sequential3L1: '',
|
|
@@ -313,7 +313,7 @@ var sequential3L = {
|
|
|
313
313
|
/**
|
|
314
314
|
* #### Sequential 4D
|
|
315
315
|
*
|
|
316
|
-
* @
|
|
316
|
+
* @category color
|
|
317
317
|
*/
|
|
318
318
|
var sequential4D = {
|
|
319
319
|
sequential4D1: '',
|
|
@@ -328,7 +328,7 @@ var sequential4D = {
|
|
|
328
328
|
/**
|
|
329
329
|
* #### Sequential 4L
|
|
330
330
|
*
|
|
331
|
-
* @
|
|
331
|
+
* @category color
|
|
332
332
|
*/
|
|
333
333
|
var sequential4L = {
|
|
334
334
|
sequential4L1: '',
|
|
@@ -343,7 +343,7 @@ var sequential4L = {
|
|
|
343
343
|
/**
|
|
344
344
|
* #### Sequential 5D
|
|
345
345
|
*
|
|
346
|
-
* @
|
|
346
|
+
* @category color
|
|
347
347
|
*/
|
|
348
348
|
var sequential5D = {
|
|
349
349
|
sequential5D1: '',
|
|
@@ -358,7 +358,7 @@ var sequential5D = {
|
|
|
358
358
|
/**
|
|
359
359
|
* #### Sequential 5L
|
|
360
360
|
*
|
|
361
|
-
* @
|
|
361
|
+
* @category color
|
|
362
362
|
*/
|
|
363
363
|
var sequential5L = {
|
|
364
364
|
sequential5L1: '',
|
|
@@ -373,7 +373,7 @@ var sequential5L = {
|
|
|
373
373
|
/**
|
|
374
374
|
* #### Sequential 6D
|
|
375
375
|
*
|
|
376
|
-
* @
|
|
376
|
+
* @category color
|
|
377
377
|
*/
|
|
378
378
|
var sequential6D = {
|
|
379
379
|
sequential6D1: '',
|
|
@@ -388,7 +388,7 @@ var sequential6D = {
|
|
|
388
388
|
/**
|
|
389
389
|
* #### Sequential 6L
|
|
390
390
|
*
|
|
391
|
-
* @
|
|
391
|
+
* @category color
|
|
392
392
|
*/
|
|
393
393
|
var sequential6L = {
|
|
394
394
|
sequential6L1: '',
|
|
@@ -404,7 +404,7 @@ var sequential = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_object
|
|
|
404
404
|
/**
|
|
405
405
|
* #### High low 1D
|
|
406
406
|
*
|
|
407
|
-
* @
|
|
407
|
+
* @category color
|
|
408
408
|
*/
|
|
409
409
|
var highLow1D = {
|
|
410
410
|
highLow1DHigh: '',
|
|
@@ -414,7 +414,7 @@ var highLow1D = {
|
|
|
414
414
|
/**
|
|
415
415
|
* #### High low 1L
|
|
416
416
|
*
|
|
417
|
-
* @
|
|
417
|
+
* @category color
|
|
418
418
|
*/
|
|
419
419
|
var highLow1L = {
|
|
420
420
|
highLow1LHigh: '',
|
|
@@ -424,7 +424,7 @@ var highLow1L = {
|
|
|
424
424
|
/**
|
|
425
425
|
* #### High low 2D
|
|
426
426
|
*
|
|
427
|
-
* @
|
|
427
|
+
* @category color
|
|
428
428
|
*/
|
|
429
429
|
var highLow2D = {
|
|
430
430
|
highLow2DHigh: '',
|
|
@@ -434,7 +434,7 @@ var highLow2D = {
|
|
|
434
434
|
/**
|
|
435
435
|
* #### High low 2L
|
|
436
436
|
*
|
|
437
|
-
* @
|
|
437
|
+
* @category color
|
|
438
438
|
*/
|
|
439
439
|
var highLow2L = {
|
|
440
440
|
highLow2LHigh: '',
|
|
@@ -444,7 +444,7 @@ var highLow2L = {
|
|
|
444
444
|
/**
|
|
445
445
|
* #### High low 3D
|
|
446
446
|
*
|
|
447
|
-
* @
|
|
447
|
+
* @category color
|
|
448
448
|
*/
|
|
449
449
|
var highLow3D = {
|
|
450
450
|
highLow3DHigh: '',
|
|
@@ -454,7 +454,7 @@ var highLow3D = {
|
|
|
454
454
|
/**
|
|
455
455
|
* #### High low 3L
|
|
456
456
|
*
|
|
457
|
-
* @
|
|
457
|
+
* @category color
|
|
458
458
|
*/
|
|
459
459
|
var highLow3L = {
|
|
460
460
|
highLow3LHigh: '',
|
|
@@ -464,7 +464,7 @@ var highLow3L = {
|
|
|
464
464
|
/**
|
|
465
465
|
* #### High low 4D
|
|
466
466
|
*
|
|
467
|
-
* @
|
|
467
|
+
* @category color
|
|
468
468
|
*/
|
|
469
469
|
var highLow4D = {
|
|
470
470
|
highLow4DHigh: '',
|
|
@@ -474,7 +474,7 @@ var highLow4D = {
|
|
|
474
474
|
/**
|
|
475
475
|
* #### High low 4L
|
|
476
476
|
*
|
|
477
|
-
* @
|
|
477
|
+
* @category color
|
|
478
478
|
*/
|
|
479
479
|
var highLow4L = {
|
|
480
480
|
highLow4LHigh: '',
|