@splunk/themes 1.2.1 → 1.4.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 +18 -0
- package/design-tokens/colors.js +98 -18
- package/design-tokens/deprecated.js +4 -0
- package/enterprise/dark.js +24 -6
- package/enterprise/light.js +25 -7
- package/index.js +57 -1
- package/mixins/prose.js +1 -1
- package/package.json +8 -4
- package/prisma/dark.js +24 -6
- package/prisma/light.js +24 -6
- package/splunk-magnetic/index.js +20 -3
- package/storybook-addon-splunk-themes/SplunkThemesTool.js +14 -14
- package/storybook-addon-splunk-themes/constants.js +6 -1
- package/storybook-addon-splunk-themes/util.js +14 -8
- package/storybook-addon-splunk-themes/withSplunkTheme.js +174 -31
- package/types/design-tokens/colors.d.ts +192 -32
- package/types/design-tokens/deprecated.d.ts +8 -0
- package/types/design-tokens/index.d.ts +21 -4
- package/types/enterprise/dark.d.ts +22 -5
- package/types/enterprise/light.d.ts +22 -5
- package/types/index.d.ts +7 -0
- package/types/mixins/typography.d.ts +1 -1
- package/types/prisma/dark.d.ts +21 -4
- package/types/prisma/light.d.ts +21 -4
- package/types/splunk-magnetic/index.d.ts +148 -46
- package/types/storybook-addon-splunk-themes/constants.d.ts +2 -0
- package/types/storybook-addon-splunk-themes/themeOptions.d.ts +1 -1
- package/types/storybook-addon-splunk-themes/util.d.ts +3 -3
|
@@ -257,6 +257,10 @@ declare const designTokens: {
|
|
|
257
257
|
zindexModal: number;
|
|
258
258
|
zindexPopover: number;
|
|
259
259
|
zindexToastMessages: number;
|
|
260
|
+
contentColorInfo: string;
|
|
261
|
+
contentColorWarning: string;
|
|
262
|
+
contentColorPositive: string;
|
|
263
|
+
contentColorNegativeStrong: string;
|
|
260
264
|
interactiveColorPrimary: string;
|
|
261
265
|
accentColorPositive: string;
|
|
262
266
|
accentColorWarning: string;
|
|
@@ -492,20 +496,19 @@ declare const designTokens: {
|
|
|
492
496
|
notificationColorNegativeStrong: string;
|
|
493
497
|
focusColor: string;
|
|
494
498
|
contentColorLink: string;
|
|
499
|
+
contentColorLinkVisited: string;
|
|
500
|
+
contentColorLinkDisabled: string;
|
|
501
|
+
contentColorLinkVisitedDisabled: string;
|
|
495
502
|
contentColorAccent: string;
|
|
496
503
|
contentColorAccentStrong: string;
|
|
497
504
|
contentColorAccentWeak: string;
|
|
498
505
|
contentColorActive: string;
|
|
499
506
|
contentColorDefault: string;
|
|
500
507
|
contentColorDisabled: string;
|
|
501
|
-
contentColorInfo: string;
|
|
502
508
|
contentColorInverted: string;
|
|
503
509
|
contentColorMuted: string;
|
|
504
510
|
contentColorNegative: string;
|
|
505
|
-
contentColorNegativeStrong: string;
|
|
506
511
|
contentColorNegativeWeak: string;
|
|
507
|
-
contentColorPositive: string;
|
|
508
|
-
contentColorWarning: string;
|
|
509
512
|
backgroundColorNavigation: string;
|
|
510
513
|
backgroundColorPage: string;
|
|
511
514
|
backgroundColorSidebar: string;
|
|
@@ -565,6 +568,20 @@ declare const designTokens: {
|
|
|
565
568
|
actionColorBorderDestructiveSecondaryActive: string;
|
|
566
569
|
actionColorBorderDestructiveSecondaryDisabled: string;
|
|
567
570
|
actionColorBorderDestructiveSecondaryHover: string;
|
|
571
|
+
actionColorContentPrimary: string;
|
|
572
|
+
actionColorContentPrimaryDisabled: string;
|
|
573
|
+
actionColorContentSecondary: string;
|
|
574
|
+
actionColorContentSecondaryDisabled: string;
|
|
575
|
+
actionColorContentSubtleActive: string;
|
|
576
|
+
actionColorContentSubtleHover: string;
|
|
577
|
+
actionColorContentStandalone: string;
|
|
578
|
+
actionColorContentStandaloneActive: string;
|
|
579
|
+
actionColorContentStandaloneDisabled: string;
|
|
580
|
+
actionColorContentStandaloneHover: string;
|
|
581
|
+
actionColorContentDestructive: string;
|
|
582
|
+
actionColorContentDestructiveDisabled: string;
|
|
583
|
+
actionColorContentDestructiveSecondary: string;
|
|
584
|
+
actionColorContentDestructiveSecondaryDisabled: string;
|
|
568
585
|
};
|
|
569
586
|
type DesignTokens = typeof designTokens;
|
|
570
587
|
export type { DesignTokens, Colors, DataViz, Deprecated, Elevation, SpacingSizing, Typography };
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
declare const theme: {
|
|
2
2
|
draggableBackground: string;
|
|
3
|
+
contentColorInfo: string;
|
|
4
|
+
contentColorWarning: string;
|
|
5
|
+
contentColorPositive: string;
|
|
6
|
+
contentColorNegativeStrong: string;
|
|
3
7
|
interactiveColorPrimary: string;
|
|
4
8
|
accentColorPositive: string;
|
|
5
9
|
accentColorWarning: string;
|
|
@@ -56,20 +60,19 @@ declare const theme: {
|
|
|
56
60
|
focusShadow: string;
|
|
57
61
|
focusShadowInset: string;
|
|
58
62
|
contentColorLink: string;
|
|
63
|
+
contentColorLinkVisited: string;
|
|
64
|
+
contentColorLinkDisabled: string;
|
|
65
|
+
contentColorLinkVisitedDisabled: string;
|
|
59
66
|
contentColorAccent: string;
|
|
60
67
|
contentColorAccentStrong: string;
|
|
61
68
|
contentColorAccentWeak: string;
|
|
62
69
|
contentColorActive: string;
|
|
63
70
|
contentColorDefault: string;
|
|
64
71
|
contentColorDisabled: string;
|
|
65
|
-
contentColorInfo: string;
|
|
66
72
|
contentColorInverted: string;
|
|
67
73
|
contentColorMuted: string;
|
|
68
74
|
contentColorNegative: string;
|
|
69
|
-
contentColorNegativeStrong: string;
|
|
70
75
|
contentColorNegativeWeak: string;
|
|
71
|
-
contentColorPositive: string;
|
|
72
|
-
contentColorWarning: string;
|
|
73
76
|
syntaxBlue: string;
|
|
74
77
|
syntaxBrown: string;
|
|
75
78
|
syntaxGray: string;
|
|
@@ -145,6 +148,20 @@ declare const theme: {
|
|
|
145
148
|
actionColorBorderDestructiveSecondaryActive: string;
|
|
146
149
|
actionColorBorderDestructiveSecondaryDisabled: string;
|
|
147
150
|
actionColorBorderDestructiveSecondaryHover: string;
|
|
151
|
+
actionColorContentPrimary: string;
|
|
152
|
+
actionColorContentPrimaryDisabled: string;
|
|
153
|
+
actionColorContentSecondary: string;
|
|
154
|
+
actionColorContentSecondaryDisabled: string;
|
|
155
|
+
actionColorContentSubtleActive: string;
|
|
156
|
+
actionColorContentSubtleHover: string;
|
|
157
|
+
actionColorContentStandalone: string;
|
|
158
|
+
actionColorContentStandaloneActive: string;
|
|
159
|
+
actionColorContentStandaloneDisabled: string;
|
|
160
|
+
actionColorContentStandaloneHover: string;
|
|
161
|
+
actionColorContentDestructive: string;
|
|
162
|
+
actionColorContentDestructiveDisabled: string;
|
|
163
|
+
actionColorContentDestructiveSecondary: string;
|
|
164
|
+
actionColorContentDestructiveSecondaryDisabled: string;
|
|
148
165
|
borderColor: string;
|
|
149
166
|
borderColorWeak: string;
|
|
150
167
|
borderColorStrong: string;
|
|
@@ -163,7 +180,6 @@ declare const theme: {
|
|
|
163
180
|
gray20: string;
|
|
164
181
|
accentColorL50: string;
|
|
165
182
|
accentColorL40: string;
|
|
166
|
-
accentColorL30: string;
|
|
167
183
|
accentColorL20: string;
|
|
168
184
|
accentColorL10: string;
|
|
169
185
|
accentColorD20: string;
|
|
@@ -527,6 +543,7 @@ declare const theme: {
|
|
|
527
543
|
gray60: string;
|
|
528
544
|
gray45: string;
|
|
529
545
|
gray30: string;
|
|
546
|
+
accentColorL30: string;
|
|
530
547
|
accentColor: string;
|
|
531
548
|
accentColorD10: string;
|
|
532
549
|
errorColorL10: string;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
declare const theme: {
|
|
2
|
+
contentColorInfo: string;
|
|
3
|
+
contentColorWarning: string;
|
|
4
|
+
contentColorPositive: string;
|
|
5
|
+
contentColorNegativeStrong: string;
|
|
2
6
|
interactiveColorPrimary: string;
|
|
3
7
|
accentColorPositive: string;
|
|
4
8
|
accentColorWarning: string;
|
|
@@ -47,7 +51,6 @@ declare const theme: {
|
|
|
47
51
|
gray20: string;
|
|
48
52
|
accentColorL50: string;
|
|
49
53
|
accentColorL40: string;
|
|
50
|
-
accentColorL30: string;
|
|
51
54
|
accentColorL20: string;
|
|
52
55
|
accentColorL10: string;
|
|
53
56
|
accentColorD20: string;
|
|
@@ -392,20 +395,19 @@ declare const theme: {
|
|
|
392
395
|
interactiveColorAccentErrorStrong: string;
|
|
393
396
|
interactiveColorAccentErrorWeak: string;
|
|
394
397
|
contentColorLink: string;
|
|
398
|
+
contentColorLinkVisited: string;
|
|
399
|
+
contentColorLinkDisabled: string;
|
|
400
|
+
contentColorLinkVisitedDisabled: string;
|
|
395
401
|
contentColorAccent: string;
|
|
396
402
|
contentColorAccentStrong: string;
|
|
397
403
|
contentColorAccentWeak: string;
|
|
398
404
|
contentColorActive: string;
|
|
399
405
|
contentColorDefault: string;
|
|
400
406
|
contentColorDisabled: string;
|
|
401
|
-
contentColorInfo: string;
|
|
402
407
|
contentColorInverted: string;
|
|
403
408
|
contentColorMuted: string;
|
|
404
409
|
contentColorNegative: string;
|
|
405
|
-
contentColorNegativeStrong: string;
|
|
406
410
|
contentColorNegativeWeak: string;
|
|
407
|
-
contentColorPositive: string;
|
|
408
|
-
contentColorWarning: string;
|
|
409
411
|
lineLength: string;
|
|
410
412
|
lineHeight: string;
|
|
411
413
|
lineHeightSingle: string;
|
|
@@ -509,6 +511,20 @@ declare const theme: {
|
|
|
509
511
|
actionColorBorderDestructiveSecondaryActive: string;
|
|
510
512
|
actionColorBorderDestructiveSecondaryDisabled: string;
|
|
511
513
|
actionColorBorderDestructiveSecondaryHover: string;
|
|
514
|
+
actionColorContentPrimary: string;
|
|
515
|
+
actionColorContentPrimaryDisabled: string;
|
|
516
|
+
actionColorContentSecondary: string;
|
|
517
|
+
actionColorContentSecondaryDisabled: string;
|
|
518
|
+
actionColorContentSubtleActive: string;
|
|
519
|
+
actionColorContentSubtleHover: string;
|
|
520
|
+
actionColorContentStandalone: string;
|
|
521
|
+
actionColorContentStandaloneActive: string;
|
|
522
|
+
actionColorContentStandaloneDisabled: string;
|
|
523
|
+
actionColorContentStandaloneHover: string;
|
|
524
|
+
actionColorContentDestructive: string;
|
|
525
|
+
actionColorContentDestructiveDisabled: string;
|
|
526
|
+
actionColorContentDestructiveSecondary: string;
|
|
527
|
+
actionColorContentDestructiveSecondaryDisabled: string;
|
|
512
528
|
backgroundColorNavigation: string;
|
|
513
529
|
backgroundColorPage: string;
|
|
514
530
|
backgroundColorSidebar: string;
|
|
@@ -525,6 +541,7 @@ declare const theme: {
|
|
|
525
541
|
gray60: string;
|
|
526
542
|
gray45: string;
|
|
527
543
|
gray30: string;
|
|
544
|
+
accentColorL30: string;
|
|
528
545
|
accentColor: string;
|
|
529
546
|
accentColorD10: string;
|
|
530
547
|
errorColorL10: string;
|
package/types/index.d.ts
CHANGED
|
@@ -10,3 +10,10 @@ export { default as withSplunkTheme } from './withSplunkTheme';
|
|
|
10
10
|
export { default as variables } from './variables';
|
|
11
11
|
export { clearAllCaches } from './clearAllCaches';
|
|
12
12
|
export * from './types';
|
|
13
|
+
export { default as unstable_designTokens } from './design-tokens';
|
|
14
|
+
export { default as unstable_designTokensColors } from './design-tokens/colors';
|
|
15
|
+
export { default as unstable_designTokensDataViz } from './design-tokens/dataViz';
|
|
16
|
+
export { default as unstable_designTokensDeprecated } from './design-tokens/deprecated';
|
|
17
|
+
export { default as unstable_designTokensElevation } from './design-tokens/elevation';
|
|
18
|
+
export { default as unstable_designTokensSpacingSizing } from './design-tokens/spacing-sizing';
|
|
19
|
+
export { default as unstable_designTokensTypography } from './design-tokens/typography';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { AnyTheme, Interpolation, ThemedProps } from '../types';
|
|
2
2
|
declare const typographyVariants: readonly ["body", "title1", "title2", "title3", "title4", "title5", "title6", "largeBody", "smallBody", "monoBody", "monoSmallBody"];
|
|
3
|
-
type TypographyVariant = typeof typographyVariants[number];
|
|
3
|
+
type TypographyVariant = (typeof typographyVariants)[number];
|
|
4
4
|
type TypographyTitleVariant = Extract<TypographyVariant, 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6' | 'title7'>;
|
|
5
5
|
interface TypographyParams {
|
|
6
6
|
/**
|
package/types/prisma/dark.d.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
declare const theme: {
|
|
2
|
+
contentColorInfo: string;
|
|
3
|
+
contentColorWarning: string;
|
|
4
|
+
contentColorPositive: string;
|
|
5
|
+
contentColorNegativeStrong: string;
|
|
2
6
|
interactiveColorPrimary: string;
|
|
3
7
|
accentColorPositive: string;
|
|
4
8
|
accentColorWarning: string;
|
|
@@ -55,20 +59,19 @@ declare const theme: {
|
|
|
55
59
|
white: string;
|
|
56
60
|
transparent: string;
|
|
57
61
|
contentColorLink: string;
|
|
62
|
+
contentColorLinkVisited: string;
|
|
63
|
+
contentColorLinkDisabled: string;
|
|
64
|
+
contentColorLinkVisitedDisabled: string;
|
|
58
65
|
contentColorAccent: string;
|
|
59
66
|
contentColorAccentStrong: string;
|
|
60
67
|
contentColorAccentWeak: string;
|
|
61
68
|
contentColorActive: string;
|
|
62
69
|
contentColorDefault: string;
|
|
63
70
|
contentColorDisabled: string;
|
|
64
|
-
contentColorInfo: string;
|
|
65
71
|
contentColorInverted: string;
|
|
66
72
|
contentColorMuted: string;
|
|
67
73
|
contentColorNegative: string;
|
|
68
|
-
contentColorNegativeStrong: string;
|
|
69
74
|
contentColorNegativeWeak: string;
|
|
70
|
-
contentColorPositive: string;
|
|
71
|
-
contentColorWarning: string;
|
|
72
75
|
borderColor: string;
|
|
73
76
|
borderColorWeak: string;
|
|
74
77
|
borderColorStrong: string;
|
|
@@ -133,6 +136,20 @@ declare const theme: {
|
|
|
133
136
|
actionColorBorderDestructiveSecondaryActive: string;
|
|
134
137
|
actionColorBorderDestructiveSecondaryDisabled: string;
|
|
135
138
|
actionColorBorderDestructiveSecondaryHover: string;
|
|
139
|
+
actionColorContentPrimary: string;
|
|
140
|
+
actionColorContentPrimaryDisabled: string;
|
|
141
|
+
actionColorContentSecondary: string;
|
|
142
|
+
actionColorContentSecondaryDisabled: string;
|
|
143
|
+
actionColorContentSubtleActive: string;
|
|
144
|
+
actionColorContentSubtleHover: string;
|
|
145
|
+
actionColorContentStandalone: string;
|
|
146
|
+
actionColorContentStandaloneActive: string;
|
|
147
|
+
actionColorContentStandaloneDisabled: string;
|
|
148
|
+
actionColorContentStandaloneHover: string;
|
|
149
|
+
actionColorContentDestructive: string;
|
|
150
|
+
actionColorContentDestructiveDisabled: string;
|
|
151
|
+
actionColorContentDestructiveSecondary: string;
|
|
152
|
+
actionColorContentDestructiveSecondaryDisabled: string;
|
|
136
153
|
};
|
|
137
154
|
type Dark = typeof theme;
|
|
138
155
|
export default theme;
|
package/types/prisma/light.d.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
declare const theme: {
|
|
2
|
+
contentColorInfo: string;
|
|
3
|
+
contentColorWarning: string;
|
|
4
|
+
contentColorPositive: string;
|
|
5
|
+
contentColorNegativeStrong: string;
|
|
2
6
|
interactiveColorPrimary: string;
|
|
3
7
|
accentColorPositive: string;
|
|
4
8
|
accentColorWarning: string;
|
|
@@ -55,20 +59,19 @@ declare const theme: {
|
|
|
55
59
|
white: string;
|
|
56
60
|
transparent: string;
|
|
57
61
|
contentColorLink: string;
|
|
62
|
+
contentColorLinkVisited: string;
|
|
63
|
+
contentColorLinkDisabled: string;
|
|
64
|
+
contentColorLinkVisitedDisabled: string;
|
|
58
65
|
contentColorAccent: string;
|
|
59
66
|
contentColorAccentStrong: string;
|
|
60
67
|
contentColorAccentWeak: string;
|
|
61
68
|
contentColorActive: string;
|
|
62
69
|
contentColorDefault: string;
|
|
63
70
|
contentColorDisabled: string;
|
|
64
|
-
contentColorInfo: string;
|
|
65
71
|
contentColorInverted: string;
|
|
66
72
|
contentColorMuted: string;
|
|
67
73
|
contentColorNegative: string;
|
|
68
|
-
contentColorNegativeStrong: string;
|
|
69
74
|
contentColorNegativeWeak: string;
|
|
70
|
-
contentColorPositive: string;
|
|
71
|
-
contentColorWarning: string;
|
|
72
75
|
borderColor: string;
|
|
73
76
|
borderColorWeak: string;
|
|
74
77
|
borderColorStrong: string;
|
|
@@ -133,6 +136,20 @@ declare const theme: {
|
|
|
133
136
|
actionColorBorderDestructiveSecondaryActive: string;
|
|
134
137
|
actionColorBorderDestructiveSecondaryDisabled: string;
|
|
135
138
|
actionColorBorderDestructiveSecondaryHover: string;
|
|
139
|
+
actionColorContentPrimary: string;
|
|
140
|
+
actionColorContentPrimaryDisabled: string;
|
|
141
|
+
actionColorContentSecondary: string;
|
|
142
|
+
actionColorContentSecondaryDisabled: string;
|
|
143
|
+
actionColorContentSubtleActive: string;
|
|
144
|
+
actionColorContentSubtleHover: string;
|
|
145
|
+
actionColorContentStandalone: string;
|
|
146
|
+
actionColorContentStandaloneActive: string;
|
|
147
|
+
actionColorContentStandaloneDisabled: string;
|
|
148
|
+
actionColorContentStandaloneHover: string;
|
|
149
|
+
actionColorContentDestructive: string;
|
|
150
|
+
actionColorContentDestructiveDisabled: string;
|
|
151
|
+
actionColorContentDestructiveSecondary: string;
|
|
152
|
+
actionColorContentDestructiveSecondaryDisabled: string;
|
|
136
153
|
};
|
|
137
154
|
type Light = typeof theme;
|
|
138
155
|
export default theme;
|