@splunk/themes 1.2.1 → 1.3.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 (22) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/design-tokens/colors.js +86 -18
  3. package/design-tokens/deprecated.js +4 -0
  4. package/enterprise/dark.js +20 -5
  5. package/enterprise/light.js +20 -5
  6. package/index.js +57 -1
  7. package/mixins/prose.js +1 -1
  8. package/package.json +8 -4
  9. package/prisma/dark.js +20 -5
  10. package/prisma/light.js +20 -5
  11. package/splunk-magnetic/index.js +20 -3
  12. package/types/design-tokens/colors.d.ts +168 -32
  13. package/types/design-tokens/deprecated.d.ts +8 -0
  14. package/types/design-tokens/index.d.ts +18 -4
  15. package/types/enterprise/dark.d.ts +18 -4
  16. package/types/enterprise/light.d.ts +18 -4
  17. package/types/index.d.ts +7 -0
  18. package/types/mixins/typography.d.ts +1 -1
  19. package/types/prisma/dark.d.ts +18 -4
  20. package/types/prisma/light.d.ts +18 -4
  21. package/types/splunk-magnetic/index.d.ts +126 -42
  22. package/types/storybook-addon-splunk-themes/themeOptions.d.ts +1 -1
package/types/splunk-magnetic/index.d.ts CHANGED
@@ -35,6 +35,20 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
35
35
  actionColorDestructive: string;
36
36
  actionColorDestructiveStrong: string;
37
37
  actionColorDestructiveWeak: string;
38
+ actionColorContentPrimary: string;
39
+ actionColorContentPrimaryDisabled: string;
40
+ actionColorContentSecondary: string;
41
+ actionColorContentSecondaryDisabled: string;
42
+ actionColorContentSubtleActive: string;
43
+ actionColorContentSubtleHover: string;
44
+ actionColorContentStandalone: string;
45
+ actionColorContentStandaloneActive: string;
46
+ actionColorContentStandaloneDisabled: string;
47
+ actionColorContentStandaloneHover: string;
48
+ actionColorContentDestructive: string;
49
+ actionColorContentDestructiveDisabled: string;
50
+ actionColorContentDestructiveSecondary: string;
51
+ actionColorContentDestructiveSecondaryDisabled: string;
38
52
  backgroundColorDialog: string;
39
53
  backgroundColorInverted: string;
40
54
  backgroundColorPage: string;
@@ -75,6 +89,9 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
75
89
  neutral300: string;
76
90
  neutral400: string;
77
91
  neutral500: string;
92
+ notificationColorNegativeWeak: string;
93
+ notificationColorNegativeStrong: string;
94
+ notificationColorNegative: string;
78
95
  overlayShadow: string;
79
96
  statusColorHigh: string;
80
97
  statusColorHighStrong: string;
@@ -129,6 +146,10 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
129
146
  fontFamilyTitle: string;
130
147
  sansFontFamily: string;
131
148
  monoFontFamily: string;
149
+ contentColorInfo: string;
150
+ contentColorWarning: string;
151
+ contentColorPositive: string;
152
+ contentColorNegativeStrong: string;
132
153
  interactiveColorPrimary: string;
133
154
  accentColorPositive: string;
134
155
  accentColorWarning: string;
@@ -475,11 +496,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
475
496
  contentColorAccent: string;
476
497
  contentColorAccentStrong: string;
477
498
  contentColorAccentWeak: string;
478
- contentColorInfo: string;
479
- contentColorNegativeStrong: string;
480
499
  contentColorNegativeWeak: string;
481
- contentColorPositive: string;
482
- contentColorWarning: string;
483
500
  lineLength: string;
484
501
  lineHeight: string;
485
502
  lineHeightSingle: string;
@@ -522,9 +539,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
522
539
  notificationColorCautionWeak: string;
523
540
  notificationColorCaution: string;
524
541
  notificationColorCautionStrong: string;
525
- notificationColorNegativeWeak: string;
526
- notificationColorNegative: string;
527
- notificationColorNegativeStrong: string;
528
542
  black: string;
529
543
  white: string;
530
544
  transparent: string;
@@ -610,6 +624,20 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
610
624
  actionColorDestructive: string;
611
625
  actionColorDestructiveStrong: string;
612
626
  actionColorDestructiveWeak: string;
627
+ actionColorContentPrimary: string;
628
+ actionColorContentPrimaryDisabled: string;
629
+ actionColorContentSecondary: string;
630
+ actionColorContentSecondaryDisabled: string;
631
+ actionColorContentSubtleActive: string;
632
+ actionColorContentSubtleHover: string;
633
+ actionColorContentStandalone: string;
634
+ actionColorContentStandaloneActive: string;
635
+ actionColorContentStandaloneDisabled: string;
636
+ actionColorContentStandaloneHover: string;
637
+ actionColorContentDestructive: string;
638
+ actionColorContentDestructiveDisabled: string;
639
+ actionColorContentDestructiveSecondary: string;
640
+ actionColorContentDestructiveSecondaryDisabled: string;
613
641
  backgroundColorDialog: string;
614
642
  backgroundColorInverted: string;
615
643
  backgroundColorPage: string;
@@ -650,6 +678,9 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
650
678
  neutral300: string;
651
679
  neutral400: string;
652
680
  neutral500: string;
681
+ notificationColorNegativeWeak: string;
682
+ notificationColorNegativeStrong: string;
683
+ notificationColorNegative: string;
653
684
  overlayShadow: string;
654
685
  statusColorHigh: string;
655
686
  statusColorHighStrong: string;
@@ -704,6 +735,10 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
704
735
  fontFamilyTitle: string;
705
736
  sansFontFamily: string;
706
737
  monoFontFamily: string;
738
+ contentColorInfo: string;
739
+ contentColorWarning: string;
740
+ contentColorPositive: string;
741
+ contentColorNegativeStrong: string;
707
742
  interactiveColorPrimary: string;
708
743
  accentColorPositive: string;
709
744
  accentColorWarning: string;
@@ -1050,11 +1085,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1050
1085
  contentColorAccent: string;
1051
1086
  contentColorAccentStrong: string;
1052
1087
  contentColorAccentWeak: string;
1053
- contentColorInfo: string;
1054
- contentColorNegativeStrong: string;
1055
1088
  contentColorNegativeWeak: string;
1056
- contentColorPositive: string;
1057
- contentColorWarning: string;
1058
1089
  lineLength: string;
1059
1090
  lineHeight: string;
1060
1091
  lineHeightSingle: string;
@@ -1097,9 +1128,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1097
1128
  notificationColorCautionWeak: string;
1098
1129
  notificationColorCaution: string;
1099
1130
  notificationColorCautionStrong: string;
1100
- notificationColorNegativeWeak: string;
1101
- notificationColorNegative: string;
1102
- notificationColorNegativeStrong: string;
1103
1131
  black: string;
1104
1132
  white: string;
1105
1133
  transparent: string;
@@ -1185,6 +1213,20 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1185
1213
  actionColorDestructive: string;
1186
1214
  actionColorDestructiveStrong: string;
1187
1215
  actionColorDestructiveWeak: string;
1216
+ actionColorContentPrimary: string;
1217
+ actionColorContentPrimaryDisabled: string;
1218
+ actionColorContentSecondary: string;
1219
+ actionColorContentSecondaryDisabled: string;
1220
+ actionColorContentSubtleActive: string;
1221
+ actionColorContentSubtleHover: string;
1222
+ actionColorContentStandalone: string;
1223
+ actionColorContentStandaloneActive: string;
1224
+ actionColorContentStandaloneDisabled: string;
1225
+ actionColorContentStandaloneHover: string;
1226
+ actionColorContentDestructive: string;
1227
+ actionColorContentDestructiveDisabled: string;
1228
+ actionColorContentDestructiveSecondary: string;
1229
+ actionColorContentDestructiveSecondaryDisabled: string;
1188
1230
  backgroundColorDialog: string;
1189
1231
  backgroundColorInverted: string;
1190
1232
  backgroundColorPage: string;
@@ -1225,6 +1267,9 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1225
1267
  neutral300: string;
1226
1268
  neutral400: string;
1227
1269
  neutral500: string;
1270
+ notificationColorNegativeWeak: string;
1271
+ notificationColorNegativeStrong: string;
1272
+ notificationColorNegative: string;
1228
1273
  overlayShadow: string;
1229
1274
  statusColorHigh: string;
1230
1275
  statusColorHighStrong: string;
@@ -1280,6 +1325,10 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1280
1325
  sansFontFamily: string;
1281
1326
  monoFontFamily: string;
1282
1327
  draggableBackground: string;
1328
+ contentColorInfo: string;
1329
+ contentColorWarning: string;
1330
+ contentColorPositive: string;
1331
+ contentColorNegativeStrong: string;
1283
1332
  interactiveColorPrimary: string;
1284
1333
  accentColorPositive: string;
1285
1334
  accentColorWarning: string;
@@ -1313,11 +1362,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1313
1362
  contentColorAccent: string;
1314
1363
  contentColorAccentStrong: string;
1315
1364
  contentColorAccentWeak: string;
1316
- contentColorInfo: string;
1317
- contentColorNegativeStrong: string;
1318
1365
  contentColorNegativeWeak: string;
1319
- contentColorPositive: string;
1320
- contentColorWarning: string;
1321
1366
  black: string;
1322
1367
  white: string;
1323
1368
  transparent: string;
@@ -1340,9 +1385,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1340
1385
  notificationColorCautionWeak: string;
1341
1386
  notificationColorCaution: string;
1342
1387
  notificationColorCautionStrong: string;
1343
- notificationColorNegativeWeak: string;
1344
- notificationColorNegative: string;
1345
- notificationColorNegativeStrong: string;
1346
1388
  brandColorL50: string;
1347
1389
  brandColorL40: string;
1348
1390
  brandColorL30: string;
@@ -1762,6 +1804,20 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1762
1804
  actionColorDestructive: string;
1763
1805
  actionColorDestructiveStrong: string;
1764
1806
  actionColorDestructiveWeak: string;
1807
+ actionColorContentPrimary: string;
1808
+ actionColorContentPrimaryDisabled: string;
1809
+ actionColorContentSecondary: string;
1810
+ actionColorContentSecondaryDisabled: string;
1811
+ actionColorContentSubtleActive: string;
1812
+ actionColorContentSubtleHover: string;
1813
+ actionColorContentStandalone: string;
1814
+ actionColorContentStandaloneActive: string;
1815
+ actionColorContentStandaloneDisabled: string;
1816
+ actionColorContentStandaloneHover: string;
1817
+ actionColorContentDestructive: string;
1818
+ actionColorContentDestructiveDisabled: string;
1819
+ actionColorContentDestructiveSecondary: string;
1820
+ actionColorContentDestructiveSecondaryDisabled: string;
1765
1821
  backgroundColorDialog: string;
1766
1822
  backgroundColorInverted: string;
1767
1823
  backgroundColorPage: string;
@@ -1802,6 +1858,9 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1802
1858
  neutral300: string;
1803
1859
  neutral400: string;
1804
1860
  neutral500: string;
1861
+ notificationColorNegativeWeak: string;
1862
+ notificationColorNegativeStrong: string;
1863
+ notificationColorNegative: string;
1805
1864
  overlayShadow: string;
1806
1865
  statusColorHigh: string;
1807
1866
  statusColorHighStrong: string;
@@ -1857,6 +1916,10 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1857
1916
  sansFontFamily: string;
1858
1917
  monoFontFamily: string;
1859
1918
  draggableBackground: string;
1919
+ contentColorInfo: string;
1920
+ contentColorWarning: string;
1921
+ contentColorPositive: string;
1922
+ contentColorNegativeStrong: string;
1860
1923
  interactiveColorPrimary: string;
1861
1924
  accentColorPositive: string;
1862
1925
  accentColorWarning: string;
@@ -1890,11 +1953,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1890
1953
  contentColorAccent: string;
1891
1954
  contentColorAccentStrong: string;
1892
1955
  contentColorAccentWeak: string;
1893
- contentColorInfo: string;
1894
- contentColorNegativeStrong: string;
1895
1956
  contentColorNegativeWeak: string;
1896
- contentColorPositive: string;
1897
- contentColorWarning: string;
1898
1957
  black: string;
1899
1958
  white: string;
1900
1959
  transparent: string;
@@ -1917,9 +1976,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
1917
1976
  notificationColorCautionWeak: string;
1918
1977
  notificationColorCaution: string;
1919
1978
  notificationColorCautionStrong: string;
1920
- notificationColorNegativeWeak: string;
1921
- notificationColorNegative: string;
1922
- notificationColorNegativeStrong: string;
1923
1979
  brandColorL50: string;
1924
1980
  brandColorL40: string;
1925
1981
  brandColorL30: string;
@@ -2339,6 +2395,20 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2339
2395
  actionColorDestructive: string;
2340
2396
  actionColorDestructiveStrong: string;
2341
2397
  actionColorDestructiveWeak: string;
2398
+ actionColorContentPrimary: string;
2399
+ actionColorContentPrimaryDisabled: string;
2400
+ actionColorContentSecondary: string;
2401
+ actionColorContentSecondaryDisabled: string;
2402
+ actionColorContentSubtleActive: string;
2403
+ actionColorContentSubtleHover: string;
2404
+ actionColorContentStandalone: string;
2405
+ actionColorContentStandaloneActive: string;
2406
+ actionColorContentStandaloneDisabled: string;
2407
+ actionColorContentStandaloneHover: string;
2408
+ actionColorContentDestructive: string;
2409
+ actionColorContentDestructiveDisabled: string;
2410
+ actionColorContentDestructiveSecondary: string;
2411
+ actionColorContentDestructiveSecondaryDisabled: string;
2342
2412
  backgroundColorDialog: string;
2343
2413
  backgroundColorInverted: string;
2344
2414
  backgroundColorPage: string;
@@ -2379,6 +2449,9 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2379
2449
  neutral300: string;
2380
2450
  neutral400: string;
2381
2451
  neutral500: string;
2452
+ notificationColorNegativeWeak: string;
2453
+ notificationColorNegativeStrong: string;
2454
+ notificationColorNegative: string;
2382
2455
  overlayShadow: string;
2383
2456
  statusColorHigh: string;
2384
2457
  statusColorHighStrong: string;
@@ -2639,6 +2712,10 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2639
2712
  fontWeightHeavy: number;
2640
2713
  fontWeightExtraBold: number;
2641
2714
  serifFontFamily: string;
2715
+ contentColorInfo: string;
2716
+ contentColorWarning: string;
2717
+ contentColorPositive: string;
2718
+ contentColorNegativeStrong: string;
2642
2719
  interactiveColorPrimary: string;
2643
2720
  accentColorPositive: string;
2644
2721
  accentColorWarning: string;
@@ -2662,11 +2739,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2662
2739
  contentColorAccent: string;
2663
2740
  contentColorAccentStrong: string;
2664
2741
  contentColorAccentWeak: string;
2665
- contentColorInfo: string;
2666
- contentColorNegativeStrong: string;
2667
2742
  contentColorNegativeWeak: string;
2668
- contentColorPositive: string;
2669
- contentColorWarning: string;
2670
2743
  backgroundColorFloating: string;
2671
2744
  dragShadow: string;
2672
2745
  severityColorCustom: string;
@@ -2687,9 +2760,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2687
2760
  notificationColorCautionWeak: string;
2688
2761
  notificationColorCaution: string;
2689
2762
  notificationColorCautionStrong: string;
2690
- notificationColorNegativeWeak: string;
2691
- notificationColorNegative: string;
2692
- notificationColorNegativeStrong: string;
2693
2763
  inputHeight: string;
2694
2764
  spacingXSmall: string;
2695
2765
  spacingSmall: string;
@@ -2743,6 +2813,20 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2743
2813
  actionColorDestructive: string;
2744
2814
  actionColorDestructiveStrong: string;
2745
2815
  actionColorDestructiveWeak: string;
2816
+ actionColorContentPrimary: string;
2817
+ actionColorContentPrimaryDisabled: string;
2818
+ actionColorContentSecondary: string;
2819
+ actionColorContentSecondaryDisabled: string;
2820
+ actionColorContentSubtleActive: string;
2821
+ actionColorContentSubtleHover: string;
2822
+ actionColorContentStandalone: string;
2823
+ actionColorContentStandaloneActive: string;
2824
+ actionColorContentStandaloneDisabled: string;
2825
+ actionColorContentStandaloneHover: string;
2826
+ actionColorContentDestructive: string;
2827
+ actionColorContentDestructiveDisabled: string;
2828
+ actionColorContentDestructiveSecondary: string;
2829
+ actionColorContentDestructiveSecondaryDisabled: string;
2746
2830
  backgroundColorDialog: string;
2747
2831
  backgroundColorInverted: string;
2748
2832
  backgroundColorPage: string;
@@ -2783,6 +2867,9 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
2783
2867
  neutral300: string;
2784
2868
  neutral400: string;
2785
2869
  neutral500: string;
2870
+ notificationColorNegativeWeak: string;
2871
+ notificationColorNegativeStrong: string;
2872
+ notificationColorNegative: string;
2786
2873
  overlayShadow: string;
2787
2874
  statusColorHigh: string;
2788
2875
  statusColorHighStrong: string;
@@ -3043,6 +3130,10 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
3043
3130
  fontWeightHeavy: number;
3044
3131
  fontWeightExtraBold: number;
3045
3132
  serifFontFamily: string;
3133
+ contentColorInfo: string;
3134
+ contentColorWarning: string;
3135
+ contentColorPositive: string;
3136
+ contentColorNegativeStrong: string;
3046
3137
  interactiveColorPrimary: string;
3047
3138
  accentColorPositive: string;
3048
3139
  accentColorWarning: string;
@@ -3066,11 +3157,7 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
3066
3157
  contentColorAccent: string;
3067
3158
  contentColorAccentStrong: string;
3068
3159
  contentColorAccentWeak: string;
3069
- contentColorInfo: string;
3070
- contentColorNegativeStrong: string;
3071
3160
  contentColorNegativeWeak: string;
3072
- contentColorPositive: string;
3073
- contentColorWarning: string;
3074
3161
  backgroundColorFloating: string;
3075
3162
  dragShadow: string;
3076
3163
  severityColorCustom: string;
@@ -3091,9 +3178,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
3091
3178
  notificationColorCautionWeak: string;
3092
3179
  notificationColorCaution: string;
3093
3180
  notificationColorCautionStrong: string;
3094
- notificationColorNegativeWeak: string;
3095
- notificationColorNegative: string;
3096
- notificationColorNegativeStrong: string;
3097
3181
  inputHeight: string;
3098
3182
  spacingXSmall: string;
3099
3183
  spacingSmall: string;
package/types/storybook-addon-splunk-themes/themeOptions.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ThemeSettings } from '../types';
2
2
  export declare const themeOptionsKeys: readonly ["family", "colorScheme", "density"];
3
- export type ThemeOptionKeys = typeof themeOptionsKeys[number];
3
+ export type ThemeOptionKeys = (typeof themeOptionsKeys)[number];
4
4
  type ThemeOption = {
5
5
  name: ThemeOptionKeys;
6
6
  values: string[];