@splunk/themes 0.22.0 → 0.23.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 +5 -0
- package/SplunkThemeProvider.js +18 -31
- package/enterprise/comfortable.js +0 -1
- package/enterprise/compact.js +0 -1
- package/enterprise/dark.js +10 -17
- package/enterprise/index.js +8 -16
- package/enterprise/light.js +24 -31
- package/enterprise/prismaAliases.js +3 -11
- package/getSettingsFromThemedProps.js +4 -8
- package/getTheme.js +13 -26
- package/index.js +1 -13
- package/mixins/index.js +8 -18
- package/mixins/tests/typography.unit.js +39 -85
- package/mixins/tests/utilityMixins.unit.js +2 -10
- package/mixins/typography.js +21 -52
- package/mixins/utilityMixins.js +11 -34
- package/package.json +18 -10
- package/pick.js +7 -18
- package/pickVariant.js +1 -7
- package/prisma/base.js +13 -20
- package/prisma/comfortable.js +0 -1
- package/prisma/compact.js +0 -1
- package/prisma/dark.js +15 -16
- package/prisma/dataViz.js +38 -49
- package/prisma/index.js +8 -16
- package/prisma/light.js +15 -16
- package/storybook-addon-splunk-themes/SplunkThemesTool.js +20 -42
- package/storybook-addon-splunk-themes/ThemedDocsContainer.js +3 -13
- package/storybook-addon-splunk-themes/index.js +0 -4
- package/storybook-addon-splunk-themes/manager.js +1 -7
- package/storybook-addon-splunk-themes/preview.js +4 -8
- package/storybook-addon-splunk-themes/tests/util.unit.js +0 -1
- package/storybook-addon-splunk-themes/themeOptions.js +0 -1
- package/storybook-addon-splunk-themes/themes.js +4 -15
- package/storybook-addon-splunk-themes/util.js +21 -39
- package/storybook-addon-splunk-themes/withSplunkTheme.js +27 -65
- package/useSplunkTheme.js +14 -22
- package/utils.js +25 -35
- package/variables.js +17 -31
- package/withSplunkTheme.js +26 -36
package/prisma/base.js
CHANGED
|
@@ -4,21 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
|
|
8
7
|
var _dataViz = _interopRequireDefault(require("./dataViz"));
|
|
9
|
-
|
|
10
8
|
var _light = _interopRequireDefault(require("./light"));
|
|
11
|
-
|
|
12
9
|
var _dark = _interopRequireDefault(require("./dark"));
|
|
13
|
-
|
|
14
|
-
function
|
|
15
|
-
|
|
16
|
-
function
|
|
17
|
-
|
|
18
|
-
function
|
|
19
|
-
|
|
20
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
21
|
-
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
12
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
14
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
15
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
16
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
22
17
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
|
23
18
|
function createPrismaBase(_ref) {
|
|
24
19
|
var colorScheme = _ref.colorScheme;
|
|
@@ -26,48 +21,48 @@ function createPrismaBase(_ref) {
|
|
|
26
21
|
light: _light["default"],
|
|
27
22
|
dark: _dark["default"]
|
|
28
23
|
}[colorScheme];
|
|
24
|
+
|
|
29
25
|
/**
|
|
30
26
|
* ## Misc. colors
|
|
31
27
|
*
|
|
32
28
|
* @colorSet verbose
|
|
33
29
|
*/
|
|
34
|
-
|
|
35
30
|
var usageColors = {
|
|
36
31
|
focusColor: colorSchemeVars.interactiveColorPrimary,
|
|
37
32
|
transparent: 'transparent',
|
|
38
33
|
linkColor: colorSchemeVars.interactiveColorPrimary
|
|
39
34
|
};
|
|
35
|
+
|
|
40
36
|
/**
|
|
41
37
|
* ## Interactive state shadows
|
|
42
38
|
*
|
|
43
39
|
* @shadowSet
|
|
44
40
|
*
|
|
45
41
|
*/
|
|
46
|
-
|
|
47
42
|
var shadows = {
|
|
48
43
|
hoverShadow: "0 0 0 2px ".concat(colorSchemeVars.backgroundColorPage, ", 0 0 0 5px ").concat(colorSchemeVars.interactiveColorOverlayHover),
|
|
49
44
|
focusShadow: "0 0 0 2px ".concat(colorSchemeVars.backgroundColorPage, ", 0 0 0 5px ").concat(usageColors.focusColor),
|
|
50
45
|
focusShadowInset: "inset 0 0 0 3px ".concat(usageColors.focusColor)
|
|
51
46
|
};
|
|
47
|
+
|
|
52
48
|
/**
|
|
53
49
|
* ## Borders
|
|
54
50
|
*
|
|
55
51
|
* @borderSet
|
|
56
52
|
*
|
|
57
53
|
*/
|
|
58
|
-
|
|
59
54
|
var borders = {
|
|
60
55
|
activeBorder: "double ".concat(colorSchemeVars.interactiveColorBorderActive),
|
|
61
56
|
borderColor: "".concat(colorSchemeVars.neutral200),
|
|
62
57
|
borderColorWeak: "".concat(colorSchemeVars.neutral100),
|
|
63
58
|
borderColorStrong: "".concat(colorSchemeVars.neutral300)
|
|
64
59
|
};
|
|
60
|
+
|
|
65
61
|
/**
|
|
66
62
|
* ## Backgrounds
|
|
67
63
|
*
|
|
68
64
|
* @colorSet verbose
|
|
69
65
|
*/
|
|
70
|
-
|
|
71
66
|
var backgrounds = {
|
|
72
67
|
draggableBackground: "radial-gradient(circle at 1px 1px, ".concat(colorSchemeVars.contentColorMuted, ", ").concat(colorSchemeVars.contentColorMuted, " 1px, transparent 1px) 0 0 / 4px 6px")
|
|
73
68
|
};
|
|
@@ -77,13 +72,13 @@ function createPrismaBase(_ref) {
|
|
|
77
72
|
*
|
|
78
73
|
* @valueSet
|
|
79
74
|
*/
|
|
80
|
-
|
|
81
75
|
var fontFamily = {
|
|
82
76
|
sansFontFamily: sansFontFamily,
|
|
83
77
|
serifFontFamily: "Georgia, 'Times New Roman', Times, serif",
|
|
84
78
|
monoFontFamily: "'Splunk Platform Mono', 'Roboto Mono', Consolas, 'Droid Sans Mono', Monaco, 'Courier New', Courier, monospace",
|
|
85
79
|
fontFamily: sansFontFamily
|
|
86
80
|
};
|
|
81
|
+
|
|
87
82
|
/**
|
|
88
83
|
* ## Font weights
|
|
89
84
|
*
|
|
@@ -91,7 +86,6 @@ function createPrismaBase(_ref) {
|
|
|
91
86
|
*
|
|
92
87
|
* @valueSet
|
|
93
88
|
*/
|
|
94
|
-
|
|
95
89
|
var fontWeights = {
|
|
96
90
|
fontWeightLight: 300,
|
|
97
91
|
fontWeightNormal: 400,
|
|
@@ -100,13 +94,13 @@ function createPrismaBase(_ref) {
|
|
|
100
94
|
fontWeightHeavy: 800,
|
|
101
95
|
fontWeightExtraBold: 900
|
|
102
96
|
};
|
|
97
|
+
|
|
103
98
|
/**
|
|
104
99
|
* ## Layers
|
|
105
100
|
* If a variable does not suit your purpose, set a value relatively, such as zindexModal +1.
|
|
106
101
|
*
|
|
107
102
|
* @valueSet
|
|
108
103
|
*/
|
|
109
|
-
|
|
110
104
|
var zindexes = {
|
|
111
105
|
zindexLayer: 1000,
|
|
112
106
|
zindexFixedNavbar: 1030,
|
|
@@ -117,6 +111,5 @@ function createPrismaBase(_ref) {
|
|
|
117
111
|
};
|
|
118
112
|
return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fontFamily), fontWeights), usageColors), _dataViz["default"]), shadows), borders), backgrounds), zindexes);
|
|
119
113
|
}
|
|
120
|
-
|
|
121
114
|
var _default = createPrismaBase;
|
|
122
115
|
exports["default"] = _default;
|
package/prisma/comfortable.js
CHANGED
package/prisma/compact.js
CHANGED
package/prisma/dark.js
CHANGED
|
@@ -4,23 +4,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
|
|
8
7
|
var _tinycolor = _interopRequireDefault(require("tinycolor2"));
|
|
9
|
-
|
|
10
|
-
function
|
|
11
|
-
|
|
12
|
-
function
|
|
13
|
-
|
|
14
|
-
function
|
|
15
|
-
|
|
16
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
17
|
-
|
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
9
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
10
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
11
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
12
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
13
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
14
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
18
15
|
/**
|
|
19
16
|
* ## Background colors
|
|
20
17
|
* Background colors should be used only for backgrounds of higher level sections & containers of a UI.
|
|
21
18
|
*
|
|
22
19
|
* @colorSet verbose
|
|
23
20
|
*/
|
|
21
|
+
|
|
24
22
|
var backgroundColors = {
|
|
25
23
|
backgroundColorPopup: '#27292e',
|
|
26
24
|
backgroundColorSection: '#1a1c20',
|
|
@@ -31,6 +29,7 @@ var backgroundColors = {
|
|
|
31
29
|
backgroundColorDialog: '#1e2024',
|
|
32
30
|
backgroundColorScrim: 'rgba(0, 0, 0, 0.8)'
|
|
33
31
|
};
|
|
32
|
+
|
|
34
33
|
/**
|
|
35
34
|
* ## Content colors
|
|
36
35
|
* Content colors should be used for text, icons and dividers.
|
|
@@ -45,6 +44,7 @@ var contentColors = {
|
|
|
45
44
|
contentColorInverted: '#000000',
|
|
46
45
|
contentColorMuted: '#909090'
|
|
47
46
|
};
|
|
47
|
+
|
|
48
48
|
/**
|
|
49
49
|
* ## Interactive colors
|
|
50
50
|
* Interactive colors are specifically chosen for borders and backgrounds of controls and other interactive content.
|
|
@@ -67,6 +67,7 @@ var interactiveColors = {
|
|
|
67
67
|
interactiveColorBackground: '#272a2f',
|
|
68
68
|
interactiveColorBackgroundDisabled: 'rgba(255, 255, 255, 0.15)'
|
|
69
69
|
};
|
|
70
|
+
|
|
70
71
|
/**
|
|
71
72
|
* ## Neutral colors
|
|
72
73
|
* Neutrals are used for dividers and as backup colors that can sparingly be used for cases, when the other defined colors are not enough.
|
|
@@ -83,13 +84,13 @@ var neutralColors = {
|
|
|
83
84
|
neutral500: '#acacad',
|
|
84
85
|
white: '#ffffff'
|
|
85
86
|
};
|
|
87
|
+
|
|
86
88
|
/**
|
|
87
89
|
* ## Status colors
|
|
88
90
|
* Status colors are reserved for communicating urgency and severity associated with data objects and to categorize the visual communication of system responses.
|
|
89
91
|
*
|
|
90
92
|
* @colorSet verbose
|
|
91
93
|
*/
|
|
92
|
-
|
|
93
94
|
var statusColors = {
|
|
94
95
|
statusColorInfo: '#61cafa',
|
|
95
96
|
statusColorInfoWeak: (0, _tinycolor["default"])('#61cafa').darken(10).toHexString(),
|
|
@@ -110,39 +111,39 @@ var statusColors = {
|
|
|
110
111
|
statusColorCriticalWeak: (0, _tinycolor["default"])('#ff3361').darken(10).toHexString(),
|
|
111
112
|
statusColorCriticalStrong: (0, _tinycolor["default"])('#ff3361').lighten(10).toHexString()
|
|
112
113
|
};
|
|
114
|
+
|
|
113
115
|
/**
|
|
114
116
|
* ## Accent colors
|
|
115
117
|
* Accent colors aid and categorize the visual communication of the system response.
|
|
116
118
|
*
|
|
117
119
|
* @colorSet verbose
|
|
118
120
|
*/
|
|
119
|
-
|
|
120
121
|
var accentColors = {
|
|
121
122
|
accentColorPositive: statusColors.statusColorNormal,
|
|
122
123
|
accentColorWarning: statusColors.statusColorMedium,
|
|
123
124
|
accentColorAlert: '#f0581f',
|
|
124
125
|
accentColorNegative: statusColors.statusColorHigh
|
|
125
126
|
};
|
|
127
|
+
|
|
126
128
|
/**
|
|
127
129
|
* ## Elevation shadows
|
|
128
130
|
*
|
|
129
131
|
* @shadowSet
|
|
130
132
|
*
|
|
131
133
|
*/
|
|
132
|
-
|
|
133
134
|
var elevationShadows = {
|
|
134
135
|
embossShadow: '0px 1px 5px rgba(0, 0, 0, 0.35), 0px 0px 1px rgba(0, 0, 0, 0.35)',
|
|
135
136
|
overlayShadow: '0px 26px 103px rgba(0, 0, 0, 0.64), 0px 11px 18px rgba(0, 0, 0, 0.32), 0px 3px 6px rgba(0, 0, 0, 0.3)',
|
|
136
137
|
dragShadow: '0px 26px 103px rgba(0, 0, 0, 0.64), 0px 11px 18px rgba(0, 0, 0, 0.32), 0px 3px 6px rgba(0, 0, 0, 0.3)',
|
|
137
138
|
modalShadow: '0px 50px 200px #000000, 0px 29px 66px rgba(0, 0, 0, 0.41), 0px 14px 47px rgba(0, 0, 0, 0.17), 0px 5px 10px rgba(0, 0, 0, 0.15)'
|
|
138
139
|
};
|
|
140
|
+
|
|
139
141
|
/**
|
|
140
142
|
* ## Syntax colors
|
|
141
143
|
* Syntax colors are used only for code blocks.
|
|
142
144
|
*
|
|
143
145
|
* @colorSet verbose alphabetical
|
|
144
146
|
*/
|
|
145
|
-
|
|
146
147
|
var syntaxColors = {
|
|
147
148
|
syntaxBlue: '#6cd0f0',
|
|
148
149
|
syntaxBrown: '#fccf87',
|
|
@@ -154,8 +155,6 @@ var syntaxColors = {
|
|
|
154
155
|
syntaxRed: '#e9627f',
|
|
155
156
|
syntaxTeal: '#45d4ba'
|
|
156
157
|
};
|
|
157
|
-
|
|
158
158
|
var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, accentColors), statusColors), elevationShadows), backgroundColors), contentColors), neutralColors), interactiveColors), syntaxColors);
|
|
159
|
-
|
|
160
159
|
var _default = theme;
|
|
161
160
|
exports["default"] = _default;
|