@splunk/themes 1.0.0-beta.2 → 1.0.0-beta.4

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 (45) hide show
  1. package/CHANGELOG.v1.md +34 -1
  2. package/design-tokens/colors.js +48 -81
  3. package/design-tokens/deprecated.js +75 -0
  4. package/design-tokens/elevation.js +2 -1
  5. package/design-tokens/spacing-sizing.js +6 -0
  6. package/enterprise/comfortable.js +1 -7
  7. package/enterprise/compact.js +1 -7
  8. package/enterprise/dark.js +51 -90
  9. package/enterprise/dataViz.js +0 -77
  10. package/enterprise/light.js +51 -116
  11. package/mixins/tests/utilityMixins.unit.js +1 -1
  12. package/mixins/utilityMixins.js +4 -4
  13. package/package.json +5 -5
  14. package/prisma/base.js +1 -40
  15. package/prisma/comfortable.js +1 -7
  16. package/prisma/compact.js +1 -11
  17. package/prisma/dark.js +53 -95
  18. package/prisma/dataViz.js +0 -197
  19. package/prisma/light.js +53 -95
  20. package/splunk-magnetic/index.js +3 -1
  21. package/types/design-tokens/colors.d.ts +74 -158
  22. package/types/design-tokens/deprecated.d.ts +150 -0
  23. package/types/design-tokens/elevation.d.ts +2 -2
  24. package/types/design-tokens/index.d.ts +43 -20
  25. package/types/design-tokens/spacing-sizing.d.ts +7 -0
  26. package/types/enterprise/comfortable.d.ts +1 -0
  27. package/types/enterprise/compact.d.ts +1 -0
  28. package/types/enterprise/dark.d.ts +45 -33
  29. package/types/enterprise/dataViz.d.ts +0 -5
  30. package/types/enterprise/light.d.ts +44 -33
  31. package/types/getTheme.d.ts +0 -1
  32. package/types/mixins/index.d.ts +1 -1
  33. package/types/mixins/utilityMixins.d.ts +6 -6
  34. package/types/prisma/base.d.ts +1 -1
  35. package/types/prisma/comfortable.d.ts +0 -7
  36. package/types/prisma/compact.d.ts +0 -11
  37. package/types/prisma/dark.d.ts +42 -25
  38. package/types/prisma/dataViz.d.ts +0 -5
  39. package/types/prisma/light.d.ts +42 -25
  40. package/types/splunk-magnetic/index.d.ts +196 -58
  41. package/types/storybook-addon-splunk-themes/constants.d.ts +4 -4
  42. package/types/storybook-addon-splunk-themes/preview.d.ts +4 -4
  43. package/types/storybook-addon-splunk-themes/themes.d.ts +3 -4
  44. package/types/storybook-addon-splunk-themes/withSplunkTheme.d.ts +1 -1
  45. package/types/utils.d.ts +0 -1
@@ -46,6 +46,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
46
46
  borderColor: string;
47
47
  borderColorStrong: string;
48
48
  borderColorWeak: string;
49
+ borderRadius: string;
49
50
  contentBackgroundColorNegativeWeak: string;
50
51
  contentColorActive: string;
51
52
  contentColorDefault: string;
@@ -56,6 +57,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
56
57
  embossShadow: string;
57
58
  focusColor: string;
58
59
  focusShadow: string;
60
+ inputBorderWidth: string;
59
61
  interactiveColorAccent: string;
60
62
  interactiveColorAccentError: string;
61
63
  interactiveColorAccentErrorStrong: string;
@@ -112,6 +114,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
112
114
  fontFamily: string;
113
115
  fontFamilyTitle: string;
114
116
  monoFontFamily: string;
117
+ interactiveColorPrimary: string;
115
118
  accentColorPositive: string;
116
119
  accentColorWarning: string;
117
120
  accentColorAlert: string;
@@ -123,6 +126,14 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
123
126
  textDisabledColor: string;
124
127
  backgroundColor: string;
125
128
  border: string;
129
+ borderActiveColor: string;
130
+ backgroundColorHover: string;
131
+ statusColorLow: string;
132
+ statusColorLowWeak: string;
133
+ statusColorLowStrong: string;
134
+ statusColorCritical: string;
135
+ statusColorCriticalWeak: string;
136
+ statusColorCriticalStrong: string;
126
137
  brandColorL50: string;
127
138
  brandColorL40: string;
128
139
  brandColorL30: string;
@@ -440,7 +451,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
440
451
  zindexModal: number;
441
452
  zindexPopover: number;
442
453
  zindexToastMessages: number;
443
- interactiveColorPrimary: string;
444
454
  interactiveColorBorderActive: string;
445
455
  interactiveColorOverlaySelected: string;
446
456
  interactiveColorOverlayHover: string;
@@ -472,8 +482,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
472
482
  serifFontFamily: string;
473
483
  focusShadowInset: string;
474
484
  draggableBackground: string;
475
- borderActiveColor: string;
476
- backgroundColorHover: string;
477
485
  syntaxBlue: string;
478
486
  syntaxBrown: string;
479
487
  syntaxGray: string;
@@ -484,13 +492,29 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
484
492
  syntaxRed: string;
485
493
  syntaxTeal: string;
486
494
  dragShadow: string;
487
- statusColorLow: string;
488
- statusColorLowWeak: string;
489
- statusColorLowStrong: string;
490
- statusColorCritical: string;
491
- statusColorCriticalWeak: string;
492
- statusColorCriticalStrong: string;
495
+ severityColorCustom: string;
496
+ severityColorUnknown: string;
497
+ severityColorInfo: string;
498
+ severityColorNormal: string;
499
+ severityColorNotice: string;
500
+ severityColorWarning: string;
501
+ severityColorAlert: string;
502
+ severityColorCritical: string;
503
+ severityColorEmergency: string;
504
+ notificationColorInfoWeak: string;
505
+ notificationColorInfo: string;
506
+ notificationColorInfoStrong: string;
507
+ notificationColorPositiveWeak: string;
508
+ notificationColorPositive: string;
509
+ notificationColorPositiveStrong: string;
510
+ notificationColorCautionWeak: string;
511
+ notificationColorCaution: string;
512
+ notificationColorCautionStrong: string;
513
+ notificationColorNegativeWeak: string;
514
+ notificationColorNegative: string;
515
+ notificationColorNegativeStrong: string;
493
516
  black: string;
517
+ neutral50: string;
494
518
  neutral100: string;
495
519
  neutral200: string;
496
520
  neutral300: string;
@@ -527,7 +551,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
527
551
  spacingQuarter: string;
528
552
  spacingHalf: string;
529
553
  spacing: string;
530
- borderRadius: string;
531
554
  inputHeight: string;
532
555
  spacingXSmall: string;
533
556
  spacingSmall: string;
@@ -592,6 +615,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
592
615
  borderColor: string;
593
616
  borderColorStrong: string;
594
617
  borderColorWeak: string;
618
+ borderRadius: string;
595
619
  contentBackgroundColorNegativeWeak: string;
596
620
  contentColorActive: string;
597
621
  contentColorDefault: string;
@@ -602,6 +626,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
602
626
  embossShadow: string;
603
627
  focusColor: string;
604
628
  focusShadow: string;
629
+ inputBorderWidth: string;
605
630
  interactiveColorAccent: string;
606
631
  interactiveColorAccentError: string;
607
632
  interactiveColorAccentErrorStrong: string;
@@ -658,6 +683,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
658
683
  fontFamily: string;
659
684
  fontFamilyTitle: string;
660
685
  monoFontFamily: string;
686
+ interactiveColorPrimary: string;
661
687
  accentColorPositive: string;
662
688
  accentColorWarning: string;
663
689
  accentColorAlert: string;
@@ -669,6 +695,14 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
669
695
  textDisabledColor: string;
670
696
  backgroundColor: string;
671
697
  border: string;
698
+ borderActiveColor: string;
699
+ backgroundColorHover: string;
700
+ statusColorLow: string;
701
+ statusColorLowWeak: string;
702
+ statusColorLowStrong: string;
703
+ statusColorCritical: string;
704
+ statusColorCriticalWeak: string;
705
+ statusColorCriticalStrong: string;
672
706
  brandColorL50: string;
673
707
  brandColorL40: string;
674
708
  brandColorL30: string;
@@ -986,7 +1020,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
986
1020
  zindexModal: number;
987
1021
  zindexPopover: number;
988
1022
  zindexToastMessages: number;
989
- interactiveColorPrimary: string;
990
1023
  interactiveColorBorderActive: string;
991
1024
  interactiveColorOverlaySelected: string;
992
1025
  interactiveColorOverlayHover: string;
@@ -1018,8 +1051,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1018
1051
  serifFontFamily: string;
1019
1052
  focusShadowInset: string;
1020
1053
  draggableBackground: string;
1021
- borderActiveColor: string;
1022
- backgroundColorHover: string;
1023
1054
  syntaxBlue: string;
1024
1055
  syntaxBrown: string;
1025
1056
  syntaxGray: string;
@@ -1030,13 +1061,29 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1030
1061
  syntaxRed: string;
1031
1062
  syntaxTeal: string;
1032
1063
  dragShadow: string;
1033
- statusColorLow: string;
1034
- statusColorLowWeak: string;
1035
- statusColorLowStrong: string;
1036
- statusColorCritical: string;
1037
- statusColorCriticalWeak: string;
1038
- statusColorCriticalStrong: string;
1064
+ severityColorCustom: string;
1065
+ severityColorUnknown: string;
1066
+ severityColorInfo: string;
1067
+ severityColorNormal: string;
1068
+ severityColorNotice: string;
1069
+ severityColorWarning: string;
1070
+ severityColorAlert: string;
1071
+ severityColorCritical: string;
1072
+ severityColorEmergency: string;
1073
+ notificationColorInfoWeak: string;
1074
+ notificationColorInfo: string;
1075
+ notificationColorInfoStrong: string;
1076
+ notificationColorPositiveWeak: string;
1077
+ notificationColorPositive: string;
1078
+ notificationColorPositiveStrong: string;
1079
+ notificationColorCautionWeak: string;
1080
+ notificationColorCaution: string;
1081
+ notificationColorCautionStrong: string;
1082
+ notificationColorNegativeWeak: string;
1083
+ notificationColorNegative: string;
1084
+ notificationColorNegativeStrong: string;
1039
1085
  black: string;
1086
+ neutral50: string;
1040
1087
  neutral100: string;
1041
1088
  neutral200: string;
1042
1089
  neutral300: string;
@@ -1073,7 +1120,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1073
1120
  spacingQuarter: string;
1074
1121
  spacingHalf: string;
1075
1122
  spacing: string;
1076
- borderRadius: string;
1077
1123
  inputHeight: string;
1078
1124
  spacingXSmall: string;
1079
1125
  spacingSmall: string;
@@ -1138,6 +1184,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1138
1184
  borderColor: string;
1139
1185
  borderColorStrong: string;
1140
1186
  borderColorWeak: string;
1187
+ borderRadius: string;
1141
1188
  contentBackgroundColorNegativeWeak: string;
1142
1189
  contentColorActive: string;
1143
1190
  contentColorDefault: string;
@@ -1148,6 +1195,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1148
1195
  embossShadow: string;
1149
1196
  focusColor: string;
1150
1197
  focusShadow: string;
1198
+ inputBorderWidth: string;
1151
1199
  interactiveColorAccent: string;
1152
1200
  interactiveColorAccentError: string;
1153
1201
  interactiveColorAccentErrorStrong: string;
@@ -1205,6 +1253,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1205
1253
  fontFamilyTitle: string;
1206
1254
  monoFontFamily: string;
1207
1255
  draggableBackground: string;
1256
+ interactiveColorPrimary: string;
1208
1257
  accentColorPositive: string;
1209
1258
  accentColorWarning: string;
1210
1259
  accentColorAlert: string;
@@ -1218,7 +1267,14 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1218
1267
  border: string;
1219
1268
  borderDark: string;
1220
1269
  borderLight: string;
1221
- interactiveColorPrimary: string;
1270
+ borderActiveColor: string;
1271
+ backgroundColorHover: string;
1272
+ statusColorLow: string;
1273
+ statusColorLowWeak: string;
1274
+ statusColorLowStrong: string;
1275
+ statusColorCritical: string;
1276
+ statusColorCriticalWeak: string;
1277
+ statusColorCriticalStrong: string;
1222
1278
  interactiveColorBorderActive: string;
1223
1279
  interactiveColorOverlaySelected: string;
1224
1280
  interactiveColorOverlayHover: string;
@@ -1245,6 +1301,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1245
1301
  syntaxRed: string;
1246
1302
  syntaxTeal: string;
1247
1303
  black: string;
1304
+ neutral50: string;
1248
1305
  neutral100: string;
1249
1306
  neutral200: string;
1250
1307
  neutral300: string;
@@ -1253,14 +1310,27 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1253
1310
  white: string;
1254
1311
  transparent: string;
1255
1312
  backgroundColorFloating: string;
1256
- statusColorLow: string;
1257
- statusColorLowWeak: string;
1258
- statusColorLowStrong: string;
1259
- statusColorCritical: string;
1260
- statusColorCriticalWeak: string;
1261
- statusColorCriticalStrong: string;
1262
- backgroundColorHover: string;
1263
- borderActiveColor: string;
1313
+ severityColorCustom: string;
1314
+ severityColorUnknown: string;
1315
+ severityColorInfo: string;
1316
+ severityColorNormal: string;
1317
+ severityColorNotice: string;
1318
+ severityColorWarning: string;
1319
+ severityColorAlert: string;
1320
+ severityColorCritical: string;
1321
+ severityColorEmergency: string;
1322
+ notificationColorInfoWeak: string;
1323
+ notificationColorInfo: string;
1324
+ notificationColorInfoStrong: string;
1325
+ notificationColorPositiveWeak: string;
1326
+ notificationColorPositive: string;
1327
+ notificationColorPositiveStrong: string;
1328
+ notificationColorCautionWeak: string;
1329
+ notificationColorCaution: string;
1330
+ notificationColorCautionStrong: string;
1331
+ notificationColorNegativeWeak: string;
1332
+ notificationColorNegative: string;
1333
+ notificationColorNegativeStrong: string;
1264
1334
  brandColorL50: string;
1265
1335
  brandColorL40: string;
1266
1336
  brandColorL30: string;
@@ -1621,7 +1691,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1621
1691
  spacingQuarter: string;
1622
1692
  spacingHalf: string;
1623
1693
  spacing: string;
1624
- borderRadius: string;
1625
1694
  inputHeight: string;
1626
1695
  spacingXSmall: string;
1627
1696
  spacingSmall: string;
@@ -1686,6 +1755,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1686
1755
  borderColor: string;
1687
1756
  borderColorStrong: string;
1688
1757
  borderColorWeak: string;
1758
+ borderRadius: string;
1689
1759
  contentBackgroundColorNegativeWeak: string;
1690
1760
  contentColorActive: string;
1691
1761
  contentColorDefault: string;
@@ -1696,6 +1766,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1696
1766
  embossShadow: string;
1697
1767
  focusColor: string;
1698
1768
  focusShadow: string;
1769
+ inputBorderWidth: string;
1699
1770
  interactiveColorAccent: string;
1700
1771
  interactiveColorAccentError: string;
1701
1772
  interactiveColorAccentErrorStrong: string;
@@ -1753,6 +1824,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1753
1824
  fontFamilyTitle: string;
1754
1825
  monoFontFamily: string;
1755
1826
  draggableBackground: string;
1827
+ interactiveColorPrimary: string;
1756
1828
  accentColorPositive: string;
1757
1829
  accentColorWarning: string;
1758
1830
  accentColorAlert: string;
@@ -1766,7 +1838,14 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1766
1838
  border: string;
1767
1839
  borderDark: string;
1768
1840
  borderLight: string;
1769
- interactiveColorPrimary: string;
1841
+ borderActiveColor: string;
1842
+ backgroundColorHover: string;
1843
+ statusColorLow: string;
1844
+ statusColorLowWeak: string;
1845
+ statusColorLowStrong: string;
1846
+ statusColorCritical: string;
1847
+ statusColorCriticalWeak: string;
1848
+ statusColorCriticalStrong: string;
1770
1849
  interactiveColorBorderActive: string;
1771
1850
  interactiveColorOverlaySelected: string;
1772
1851
  interactiveColorOverlayHover: string;
@@ -1793,6 +1872,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1793
1872
  syntaxRed: string;
1794
1873
  syntaxTeal: string;
1795
1874
  black: string;
1875
+ neutral50: string;
1796
1876
  neutral100: string;
1797
1877
  neutral200: string;
1798
1878
  neutral300: string;
@@ -1801,14 +1881,27 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1801
1881
  white: string;
1802
1882
  transparent: string;
1803
1883
  backgroundColorFloating: string;
1804
- statusColorLow: string;
1805
- statusColorLowWeak: string;
1806
- statusColorLowStrong: string;
1807
- statusColorCritical: string;
1808
- statusColorCriticalWeak: string;
1809
- statusColorCriticalStrong: string;
1810
- backgroundColorHover: string;
1811
- borderActiveColor: string;
1884
+ severityColorCustom: string;
1885
+ severityColorUnknown: string;
1886
+ severityColorInfo: string;
1887
+ severityColorNormal: string;
1888
+ severityColorNotice: string;
1889
+ severityColorWarning: string;
1890
+ severityColorAlert: string;
1891
+ severityColorCritical: string;
1892
+ severityColorEmergency: string;
1893
+ notificationColorInfoWeak: string;
1894
+ notificationColorInfo: string;
1895
+ notificationColorInfoStrong: string;
1896
+ notificationColorPositiveWeak: string;
1897
+ notificationColorPositive: string;
1898
+ notificationColorPositiveStrong: string;
1899
+ notificationColorCautionWeak: string;
1900
+ notificationColorCaution: string;
1901
+ notificationColorCautionStrong: string;
1902
+ notificationColorNegativeWeak: string;
1903
+ notificationColorNegative: string;
1904
+ notificationColorNegativeStrong: string;
1812
1905
  brandColorL50: string;
1813
1906
  brandColorL40: string;
1814
1907
  brandColorL30: string;
@@ -2169,7 +2262,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2169
2262
  spacingQuarter: string;
2170
2263
  spacingHalf: string;
2171
2264
  spacing: string;
2172
- borderRadius: string;
2173
2265
  inputHeight: string;
2174
2266
  spacingXSmall: string;
2175
2267
  spacingSmall: string;
@@ -2234,6 +2326,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2234
2326
  borderColor: string;
2235
2327
  borderColorStrong: string;
2236
2328
  borderColorWeak: string;
2329
+ borderRadius: string;
2237
2330
  contentBackgroundColorNegativeWeak: string;
2238
2331
  contentColorActive: string;
2239
2332
  contentColorDefault: string;
@@ -2244,6 +2337,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2244
2337
  embossShadow: string;
2245
2338
  focusColor: string;
2246
2339
  focusShadow: string;
2340
+ inputBorderWidth: string;
2247
2341
  interactiveColorAccent: string;
2248
2342
  interactiveColorAccentError: string;
2249
2343
  interactiveColorAccentErrorStrong: string;
@@ -2300,6 +2394,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2300
2394
  fontFamily: string;
2301
2395
  fontFamilyTitle: string;
2302
2396
  monoFontFamily: string;
2397
+ hoverShadow: string;
2303
2398
  zindexLayer: number;
2304
2399
  zindexFixedNavbar: number;
2305
2400
  zindexModalBackdrop: number;
@@ -2308,7 +2403,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2308
2403
  zindexToastMessages: number;
2309
2404
  draggableBackground: string;
2310
2405
  focusShadowInset: string;
2311
- hoverShadow: string;
2312
2406
  highLow4LHigh: string;
2313
2407
  highLow4LLow: string;
2314
2408
  highLow4DHigh: string;
@@ -2500,10 +2594,17 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2500
2594
  fontWeightExtraBold: number;
2501
2595
  sansFontFamily: string;
2502
2596
  serifFontFamily: string;
2597
+ interactiveColorPrimary: string;
2503
2598
  accentColorPositive: string;
2504
2599
  accentColorWarning: string;
2505
2600
  accentColorAlert: string;
2506
2601
  accentColorNegative: string;
2602
+ statusColorLow: string;
2603
+ statusColorLowWeak: string;
2604
+ statusColorLowStrong: string;
2605
+ statusColorCritical: string;
2606
+ statusColorCriticalWeak: string;
2607
+ statusColorCriticalStrong: string;
2507
2608
  syntaxBlue: string;
2508
2609
  syntaxBrown: string;
2509
2610
  syntaxGray: string;
@@ -2513,13 +2614,13 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2513
2614
  syntaxPurple: string;
2514
2615
  syntaxRed: string;
2515
2616
  syntaxTeal: string;
2516
- interactiveColorPrimary: string;
2517
2617
  interactiveColorBorderActive: string;
2518
2618
  interactiveColorOverlaySelected: string;
2519
2619
  interactiveColorOverlayHover: string;
2520
2620
  interactiveColorOverlayActive: string;
2521
2621
  interactiveColorOverlayDrag: string;
2522
2622
  black: string;
2623
+ neutral50: string;
2523
2624
  neutral100: string;
2524
2625
  neutral200: string;
2525
2626
  neutral300: string;
@@ -2538,13 +2639,27 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2538
2639
  contentColorWarning: string;
2539
2640
  backgroundColorFloating: string;
2540
2641
  dragShadow: string;
2541
- statusColorLow: string;
2542
- statusColorLowWeak: string;
2543
- statusColorLowStrong: string;
2544
- statusColorCritical: string;
2545
- statusColorCriticalWeak: string;
2546
- statusColorCriticalStrong: string;
2547
- borderRadius: string;
2642
+ severityColorCustom: string;
2643
+ severityColorUnknown: string;
2644
+ severityColorInfo: string;
2645
+ severityColorNormal: string;
2646
+ severityColorNotice: string;
2647
+ severityColorWarning: string;
2648
+ severityColorAlert: string;
2649
+ severityColorCritical: string;
2650
+ severityColorEmergency: string;
2651
+ notificationColorInfoWeak: string;
2652
+ notificationColorInfo: string;
2653
+ notificationColorInfoStrong: string;
2654
+ notificationColorPositiveWeak: string;
2655
+ notificationColorPositive: string;
2656
+ notificationColorPositiveStrong: string;
2657
+ notificationColorCautionWeak: string;
2658
+ notificationColorCaution: string;
2659
+ notificationColorCautionStrong: string;
2660
+ notificationColorNegativeWeak: string;
2661
+ notificationColorNegative: string;
2662
+ notificationColorNegativeStrong: string;
2548
2663
  inputHeight: string;
2549
2664
  spacingXSmall: string;
2550
2665
  spacingSmall: string;
@@ -2609,6 +2724,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2609
2724
  borderColor: string;
2610
2725
  borderColorStrong: string;
2611
2726
  borderColorWeak: string;
2727
+ borderRadius: string;
2612
2728
  contentBackgroundColorNegativeWeak: string;
2613
2729
  contentColorActive: string;
2614
2730
  contentColorDefault: string;
@@ -2619,6 +2735,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2619
2735
  embossShadow: string;
2620
2736
  focusColor: string;
2621
2737
  focusShadow: string;
2738
+ inputBorderWidth: string;
2622
2739
  interactiveColorAccent: string;
2623
2740
  interactiveColorAccentError: string;
2624
2741
  interactiveColorAccentErrorStrong: string;
@@ -2675,6 +2792,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2675
2792
  fontFamily: string;
2676
2793
  fontFamilyTitle: string;
2677
2794
  monoFontFamily: string;
2795
+ hoverShadow: string;
2678
2796
  zindexLayer: number;
2679
2797
  zindexFixedNavbar: number;
2680
2798
  zindexModalBackdrop: number;
@@ -2683,7 +2801,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2683
2801
  zindexToastMessages: number;
2684
2802
  draggableBackground: string;
2685
2803
  focusShadowInset: string;
2686
- hoverShadow: string;
2687
2804
  highLow4LHigh: string;
2688
2805
  highLow4LLow: string;
2689
2806
  highLow4DHigh: string;
@@ -2875,10 +2992,17 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2875
2992
  fontWeightExtraBold: number;
2876
2993
  sansFontFamily: string;
2877
2994
  serifFontFamily: string;
2995
+ interactiveColorPrimary: string;
2878
2996
  accentColorPositive: string;
2879
2997
  accentColorWarning: string;
2880
2998
  accentColorAlert: string;
2881
2999
  accentColorNegative: string;
3000
+ statusColorLow: string;
3001
+ statusColorLowWeak: string;
3002
+ statusColorLowStrong: string;
3003
+ statusColorCritical: string;
3004
+ statusColorCriticalWeak: string;
3005
+ statusColorCriticalStrong: string;
2882
3006
  syntaxBlue: string;
2883
3007
  syntaxBrown: string;
2884
3008
  syntaxGray: string;
@@ -2888,13 +3012,13 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2888
3012
  syntaxPurple: string;
2889
3013
  syntaxRed: string;
2890
3014
  syntaxTeal: string;
2891
- interactiveColorPrimary: string;
2892
3015
  interactiveColorBorderActive: string;
2893
3016
  interactiveColorOverlaySelected: string;
2894
3017
  interactiveColorOverlayHover: string;
2895
3018
  interactiveColorOverlayActive: string;
2896
3019
  interactiveColorOverlayDrag: string;
2897
3020
  black: string;
3021
+ neutral50: string;
2898
3022
  neutral100: string;
2899
3023
  neutral200: string;
2900
3024
  neutral300: string;
@@ -2913,13 +3037,27 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2913
3037
  contentColorWarning: string;
2914
3038
  backgroundColorFloating: string;
2915
3039
  dragShadow: string;
2916
- statusColorLow: string;
2917
- statusColorLowWeak: string;
2918
- statusColorLowStrong: string;
2919
- statusColorCritical: string;
2920
- statusColorCriticalWeak: string;
2921
- statusColorCriticalStrong: string;
2922
- borderRadius: string;
3040
+ severityColorCustom: string;
3041
+ severityColorUnknown: string;
3042
+ severityColorInfo: string;
3043
+ severityColorNormal: string;
3044
+ severityColorNotice: string;
3045
+ severityColorWarning: string;
3046
+ severityColorAlert: string;
3047
+ severityColorCritical: string;
3048
+ severityColorEmergency: string;
3049
+ notificationColorInfoWeak: string;
3050
+ notificationColorInfo: string;
3051
+ notificationColorInfoStrong: string;
3052
+ notificationColorPositiveWeak: string;
3053
+ notificationColorPositive: string;
3054
+ notificationColorPositiveStrong: string;
3055
+ notificationColorCautionWeak: string;
3056
+ notificationColorCaution: string;
3057
+ notificationColorCautionStrong: string;
3058
+ notificationColorNegativeWeak: string;
3059
+ notificationColorNegative: string;
3060
+ notificationColorNegativeStrong: string;
2923
3061
  inputHeight: string;
2924
3062
  spacingXSmall: string;
2925
3063
  spacingSmall: string;
@@ -1,6 +1,6 @@
1
1
  export declare const ADDON_ID = "@splunk/themes";
2
2
  export declare const PARAM_KEY = "splunkThemes";
3
- export declare const UPDATE: string;
4
- export declare const CONFIGURE: string;
5
- export declare const SET: string;
6
- export declare const CHANGED: string;
3
+ export declare const UPDATE = "@splunk/themes/update";
4
+ export declare const CONFIGURE = "@splunk/themes/configure";
5
+ export declare const SET = "@splunk/themes/default";
6
+ export declare const CHANGED = "@splunk/themes/changed";
@@ -1,10 +1,10 @@
1
- export declare const decorators: import("@storybook/react").Decorator<import("@storybook/types").StrictArgs>[];
1
+ export declare const decorators: import("@storybook/react").Decorator[];
2
2
  export declare const parameters: {
3
3
  docs: {
4
4
  container: ({ children, context, }: {
5
- children: import("react").ReactNode;
6
- context: import("@storybook/types").DocsContextProps<import("@storybook/types").Renderer>;
7
- }) => import("react").ReactNode;
5
+ children: React.ReactNode;
6
+ context: import("@storybook/types").DocsContextProps;
7
+ }) => React.ReactNode;
8
8
  };
9
9
  splunkThemes: {
10
10
  family: string;
@@ -1,6 +1,5 @@
1
- /// <reference types="react" />
2
- export declare const GlobalStyles: import("styled-components").GlobalStyleComponent<import("../types").OptionalThemedProps<import("../types").AnyTheme> & import("../types").ThemedProps<import("../types").AnyTheme>, import("styled-components").DefaultTheme>;
1
+ export declare const GlobalStyles: import("styled-components").GlobalStyleComponent<import("..").OptionalThemedProps<import("..").AnyTheme> & import("..").ThemedProps, import("styled-components").DefaultTheme>;
3
2
  export declare const TooltipSectionTitle: import("@storybook/theming").StyledComponent<{
4
- theme?: import("@storybook/theming").Theme | undefined;
5
- as?: import("react").ElementType<any> | undefined;
3
+ theme?: import("@storybook/theming").Theme;
4
+ as?: React.ElementType;
6
5
  }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -1,2 +1,2 @@
1
1
  import { Decorator } from '@storybook/react';
2
- export declare const withSplunkTheme: Decorator<import("@storybook/types").StrictArgs>;
2
+ export declare const withSplunkTheme: Decorator;
package/types/utils.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- /// <reference types="lodash" />
2
1
  import { ThemeSettings, CustomizeTheme, AnyTheme } from './types';
3
2
  /**
4
3
  * Accepts a theme object and returns supported values and defaults.