@splunk/themes 1.4.1 → 1.6.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 +19 -0
- package/design-tokens/colors.js +27 -25
- package/design-tokens/dataViz.js +33 -33
- package/design-tokens/deprecated.js +233 -39
- 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 +5 -6
- package/getTheme.js +3 -2
- package/mixins/prose.js +6 -6
- package/mixins/resets.js +2 -2
- 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 +15153 -0
- package/types/design-tokens/colors.d.ts +41 -39
- package/types/design-tokens/dataViz.d.ts +1 -1
- package/types/design-tokens/deprecated.d.ts +452 -75
- 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
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Action colors are used **exclusively** for styling Buttons borders and backgrounds.
|
|
5
5
|
* They define interaction states for primary, secondary, subtle, and destructive buttons.
|
|
6
6
|
*
|
|
7
|
-
* @
|
|
7
|
+
* @category color
|
|
8
8
|
*/
|
|
9
9
|
declare const actionColors: {
|
|
10
10
|
/**
|
|
@@ -122,85 +122,85 @@ declare const actionColors: {
|
|
|
122
122
|
/**
|
|
123
123
|
* Default text color for Primary Buttons.
|
|
124
124
|
*
|
|
125
|
-
* @
|
|
125
|
+
* @previewType font
|
|
126
126
|
*/
|
|
127
127
|
actionColorContentPrimary: string;
|
|
128
128
|
/**
|
|
129
129
|
* Disabled text color for Primary Buttons.
|
|
130
130
|
*
|
|
131
|
-
* @
|
|
131
|
+
* @previewType font
|
|
132
132
|
*/
|
|
133
133
|
actionColorContentPrimaryDisabled: string;
|
|
134
134
|
/**
|
|
135
135
|
* Default text color for Secondary Buttons.
|
|
136
136
|
*
|
|
137
|
-
* @
|
|
137
|
+
* @previewType font
|
|
138
138
|
*/
|
|
139
139
|
actionColorContentSecondary: string;
|
|
140
140
|
/**
|
|
141
141
|
* Disabled text color for Secondary Buttons.
|
|
142
142
|
*
|
|
143
|
-
* @
|
|
143
|
+
* @previewType font
|
|
144
144
|
*/
|
|
145
145
|
actionColorContentSecondaryDisabled: string;
|
|
146
146
|
/**
|
|
147
147
|
* Active text color for Subtle Buttons.
|
|
148
148
|
*
|
|
149
|
-
* @
|
|
149
|
+
* @previewType font
|
|
150
150
|
*/
|
|
151
151
|
actionColorContentSubtleActive: string;
|
|
152
152
|
/**
|
|
153
153
|
* Hover text color for Subtle Buttons.
|
|
154
154
|
*
|
|
155
|
-
* @
|
|
155
|
+
* @previewType font
|
|
156
156
|
*/
|
|
157
157
|
actionColorContentSubtleHover: string;
|
|
158
158
|
/**
|
|
159
159
|
* Default text color for Standalone Buttons.
|
|
160
160
|
*
|
|
161
|
-
* @
|
|
161
|
+
* @previewType font
|
|
162
162
|
*/
|
|
163
163
|
actionColorContentStandalone: string;
|
|
164
164
|
/**
|
|
165
165
|
* Active (pressed) text color for Standalone Buttons.
|
|
166
166
|
*
|
|
167
|
-
* @
|
|
167
|
+
* @previewType font
|
|
168
168
|
*/
|
|
169
169
|
actionColorContentStandaloneActive: string;
|
|
170
170
|
/**
|
|
171
171
|
* Disabled text color for Standalone Buttons.
|
|
172
172
|
*
|
|
173
|
-
* @
|
|
173
|
+
* @previewType font
|
|
174
174
|
*/
|
|
175
175
|
actionColorContentStandaloneDisabled: string;
|
|
176
176
|
/**
|
|
177
177
|
* Hover text color for Standalone Buttons.
|
|
178
178
|
*
|
|
179
|
-
* @
|
|
179
|
+
* @previewType font
|
|
180
180
|
*/
|
|
181
181
|
actionColorContentStandaloneHover: string;
|
|
182
182
|
/**
|
|
183
183
|
* Default text color for Destructive Buttons.
|
|
184
184
|
*
|
|
185
|
-
* @
|
|
185
|
+
* @previewType font
|
|
186
186
|
*/
|
|
187
187
|
actionColorContentDestructive: string;
|
|
188
188
|
/**
|
|
189
189
|
* Disabled text color for Destructive Buttons.
|
|
190
190
|
*
|
|
191
|
-
* @
|
|
191
|
+
* @previewType font
|
|
192
192
|
*/
|
|
193
193
|
actionColorContentDestructiveDisabled: string;
|
|
194
194
|
/**
|
|
195
195
|
* Default text color for Destructive Secondary Buttons.
|
|
196
196
|
*
|
|
197
|
-
* @
|
|
197
|
+
* @previewType font
|
|
198
198
|
*/
|
|
199
199
|
actionColorContentDestructiveSecondary: string;
|
|
200
200
|
/**
|
|
201
201
|
* Disabled text color for Destructive Secondary Buttons.
|
|
202
202
|
*
|
|
203
|
-
* @
|
|
203
|
+
* @previewType font
|
|
204
204
|
*/
|
|
205
205
|
actionColorContentDestructiveSecondaryDisabled: string;
|
|
206
206
|
};
|
|
@@ -212,7 +212,7 @@ declare const actionColors: {
|
|
|
212
212
|
* "Overlay" colors are intended to be placed over the default background color, such as `interactiveColorAccent`.
|
|
213
213
|
* If the default background color is not transparent, the `blend` mixin can be used to create a new color that combines the two.
|
|
214
214
|
*
|
|
215
|
-
* @
|
|
215
|
+
* @category color
|
|
216
216
|
*/
|
|
217
217
|
declare const interactiveColors: {
|
|
218
218
|
/**
|
|
@@ -278,7 +278,7 @@ declare const interactiveColors: {
|
|
|
278
278
|
* Neutral colors should be used sparingly. Prefer to use more semantic tokens for backgrounds and borders.
|
|
279
279
|
* These colors must not be used for content as they will not pass the required contrast ratio (instead, use [Content colors](#Content Colors)).
|
|
280
280
|
*
|
|
281
|
-
* @
|
|
281
|
+
* @category color
|
|
282
282
|
*/
|
|
283
283
|
declare const neutralColors: {
|
|
284
284
|
/**
|
|
@@ -322,7 +322,7 @@ declare const neutralColors: {
|
|
|
322
322
|
* #### Background colors
|
|
323
323
|
* Use background colors for page backgrounds and containers such as cards, modals, panels or popups.
|
|
324
324
|
*
|
|
325
|
-
* @
|
|
325
|
+
* @category color
|
|
326
326
|
*/
|
|
327
327
|
declare const backgroundColors: {
|
|
328
328
|
/**
|
|
@@ -362,7 +362,8 @@ declare const backgroundColors: {
|
|
|
362
362
|
* #### Content colors
|
|
363
363
|
* Use content colors to create visual hierarchy, convey status or importance for plain text content.
|
|
364
364
|
*
|
|
365
|
-
* @
|
|
365
|
+
* @category color
|
|
366
|
+
* @previewType font
|
|
366
367
|
*/
|
|
367
368
|
declare const contentColors: {
|
|
368
369
|
/**
|
|
@@ -425,7 +426,7 @@ declare const contentColors: {
|
|
|
425
426
|
/**
|
|
426
427
|
* #### UI Colors
|
|
427
428
|
*
|
|
428
|
-
* @
|
|
429
|
+
* @category color
|
|
429
430
|
*/
|
|
430
431
|
declare const uiColors: {
|
|
431
432
|
/**
|
|
@@ -437,11 +438,11 @@ declare const uiColors: {
|
|
|
437
438
|
* #### Notification colors
|
|
438
439
|
*
|
|
439
440
|
* Use notifications colors to communicate messages and guidance directly to users.
|
|
440
|
-
* For example in Message Bars
|
|
441
|
+
* For example in Message Bars to set tone and urgency in a conversational context.
|
|
441
442
|
*
|
|
442
443
|
* Weak variants do not meet graphical or text contrast and should only be used decoratively.
|
|
443
444
|
*
|
|
444
|
-
* @
|
|
445
|
+
* @category color
|
|
445
446
|
*/
|
|
446
447
|
declare const notificationColors: {
|
|
447
448
|
notificationColorInfoWeak: string;
|
|
@@ -463,7 +464,7 @@ declare const notificationColors: {
|
|
|
463
464
|
* Use severity colors for icons, indicators, and visual signals to help users quickly scan for criticality, risk, or state without relying only on text.
|
|
464
465
|
* Severity colors should be used to aid identifying the semantic meaning of an element; not used to communicate tone.
|
|
465
466
|
*
|
|
466
|
-
* @
|
|
467
|
+
* @category color
|
|
467
468
|
*/
|
|
468
469
|
declare const severityColors: {
|
|
469
470
|
severityColorCustom: string;
|
|
@@ -484,7 +485,8 @@ declare const severityColors: {
|
|
|
484
485
|
* Prefer to use the `Code` component rather than these tokens directly as it does this mapping automatically.
|
|
485
486
|
* See [Content Colors](#Content Colors)
|
|
486
487
|
*
|
|
487
|
-
* @
|
|
488
|
+
* @category color
|
|
489
|
+
* @previewType font
|
|
488
490
|
*/
|
|
489
491
|
declare const syntaxColors: {
|
|
490
492
|
syntaxBlue: string;
|
|
@@ -502,7 +504,7 @@ declare const syntaxColors: {
|
|
|
502
504
|
*
|
|
503
505
|
* Border color should be used to outline or divide content and UI elements.
|
|
504
506
|
*
|
|
505
|
-
* @
|
|
507
|
+
* @category color
|
|
506
508
|
*/
|
|
507
509
|
declare const borderColors: {
|
|
508
510
|
/**
|
|
@@ -860,85 +862,85 @@ declare const colors: {
|
|
|
860
862
|
/**
|
|
861
863
|
* Default text color for Primary Buttons.
|
|
862
864
|
*
|
|
863
|
-
* @
|
|
865
|
+
* @previewType font
|
|
864
866
|
*/
|
|
865
867
|
actionColorContentPrimary: string;
|
|
866
868
|
/**
|
|
867
869
|
* Disabled text color for Primary Buttons.
|
|
868
870
|
*
|
|
869
|
-
* @
|
|
871
|
+
* @previewType font
|
|
870
872
|
*/
|
|
871
873
|
actionColorContentPrimaryDisabled: string;
|
|
872
874
|
/**
|
|
873
875
|
* Default text color for Secondary Buttons.
|
|
874
876
|
*
|
|
875
|
-
* @
|
|
877
|
+
* @previewType font
|
|
876
878
|
*/
|
|
877
879
|
actionColorContentSecondary: string;
|
|
878
880
|
/**
|
|
879
881
|
* Disabled text color for Secondary Buttons.
|
|
880
882
|
*
|
|
881
|
-
* @
|
|
883
|
+
* @previewType font
|
|
882
884
|
*/
|
|
883
885
|
actionColorContentSecondaryDisabled: string;
|
|
884
886
|
/**
|
|
885
887
|
* Active text color for Subtle Buttons.
|
|
886
888
|
*
|
|
887
|
-
* @
|
|
889
|
+
* @previewType font
|
|
888
890
|
*/
|
|
889
891
|
actionColorContentSubtleActive: string;
|
|
890
892
|
/**
|
|
891
893
|
* Hover text color for Subtle Buttons.
|
|
892
894
|
*
|
|
893
|
-
* @
|
|
895
|
+
* @previewType font
|
|
894
896
|
*/
|
|
895
897
|
actionColorContentSubtleHover: string;
|
|
896
898
|
/**
|
|
897
899
|
* Default text color for Standalone Buttons.
|
|
898
900
|
*
|
|
899
|
-
* @
|
|
901
|
+
* @previewType font
|
|
900
902
|
*/
|
|
901
903
|
actionColorContentStandalone: string;
|
|
902
904
|
/**
|
|
903
905
|
* Active (pressed) text color for Standalone Buttons.
|
|
904
906
|
*
|
|
905
|
-
* @
|
|
907
|
+
* @previewType font
|
|
906
908
|
*/
|
|
907
909
|
actionColorContentStandaloneActive: string;
|
|
908
910
|
/**
|
|
909
911
|
* Disabled text color for Standalone Buttons.
|
|
910
912
|
*
|
|
911
|
-
* @
|
|
913
|
+
* @previewType font
|
|
912
914
|
*/
|
|
913
915
|
actionColorContentStandaloneDisabled: string;
|
|
914
916
|
/**
|
|
915
917
|
* Hover text color for Standalone Buttons.
|
|
916
918
|
*
|
|
917
|
-
* @
|
|
919
|
+
* @previewType font
|
|
918
920
|
*/
|
|
919
921
|
actionColorContentStandaloneHover: string;
|
|
920
922
|
/**
|
|
921
923
|
* Default text color for Destructive Buttons.
|
|
922
924
|
*
|
|
923
|
-
* @
|
|
925
|
+
* @previewType font
|
|
924
926
|
*/
|
|
925
927
|
actionColorContentDestructive: string;
|
|
926
928
|
/**
|
|
927
929
|
* Disabled text color for Destructive Buttons.
|
|
928
930
|
*
|
|
929
|
-
* @
|
|
931
|
+
* @previewType font
|
|
930
932
|
*/
|
|
931
933
|
actionColorContentDestructiveDisabled: string;
|
|
932
934
|
/**
|
|
933
935
|
* Default text color for Destructive Secondary Buttons.
|
|
934
936
|
*
|
|
935
|
-
* @
|
|
937
|
+
* @previewType font
|
|
936
938
|
*/
|
|
937
939
|
actionColorContentDestructiveSecondary: string;
|
|
938
940
|
/**
|
|
939
941
|
* Disabled text color for Destructive Secondary Buttons.
|
|
940
942
|
*
|
|
941
|
-
* @
|
|
943
|
+
* @previewType font
|
|
942
944
|
*/
|
|
943
945
|
actionColorContentDestructiveSecondaryDisabled: string;
|
|
944
946
|
};
|