@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/utils.js
CHANGED
|
@@ -4,38 +4,33 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getCustomizedTheme = exports.addThemeDefaults = void 0;
|
|
7
|
-
|
|
8
7
|
var _memoize = _interopRequireDefault(require("lodash/memoize"));
|
|
9
|
-
|
|
10
8
|
var _getTheme = _interopRequireDefault(require("./getTheme"));
|
|
11
|
-
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
|
-
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
14
10
|
/**
|
|
15
11
|
* Accepts a theme object and returns supported values and defaults.
|
|
16
12
|
* @private
|
|
17
13
|
*/
|
|
18
14
|
var addThemeDefaults = function addThemeDefaults() {
|
|
19
15
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
16
|
+
_ref$family = _ref.family,
|
|
17
|
+
family = _ref$family === void 0 ? 'prisma' : _ref$family,
|
|
18
|
+
_ref$colorScheme = _ref.colorScheme,
|
|
19
|
+
colorScheme = _ref$colorScheme === void 0 ? 'dark' : _ref$colorScheme,
|
|
20
|
+
_ref$density = _ref.density,
|
|
21
|
+
density = _ref$density === void 0 ? 'comfortable' : _ref$density,
|
|
22
|
+
_ref$isPrisma = _ref.isPrisma,
|
|
23
|
+
isPrisma = _ref$isPrisma === void 0 ? true : _ref$isPrisma,
|
|
24
|
+
_ref$isEnterprise = _ref.isEnterprise,
|
|
25
|
+
isEnterprise = _ref$isEnterprise === void 0 ? false : _ref$isEnterprise,
|
|
26
|
+
_ref$isComfortable = _ref.isComfortable,
|
|
27
|
+
isComfortable = _ref$isComfortable === void 0 ? true : _ref$isComfortable,
|
|
28
|
+
_ref$isCompact = _ref.isCompact,
|
|
29
|
+
isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
|
|
30
|
+
_ref$isDark = _ref.isDark,
|
|
31
|
+
isDark = _ref$isDark === void 0 ? true : _ref$isDark,
|
|
32
|
+
_ref$isLight = _ref.isLight,
|
|
33
|
+
isLight = _ref$isLight === void 0 ? false : _ref$isLight;
|
|
39
34
|
return {
|
|
40
35
|
family: family,
|
|
41
36
|
colorScheme: colorScheme,
|
|
@@ -48,30 +43,25 @@ var addThemeDefaults = function addThemeDefaults() {
|
|
|
48
43
|
isLight: isLight
|
|
49
44
|
};
|
|
50
45
|
};
|
|
51
|
-
|
|
52
46
|
exports.addThemeDefaults = addThemeDefaults;
|
|
53
|
-
|
|
54
47
|
function getCustomizedThemeUnmemo(settings, customizer) {
|
|
55
48
|
var variables = (0, _getTheme["default"])(settings);
|
|
56
|
-
|
|
57
49
|
if (!customizer) {
|
|
58
50
|
return variables;
|
|
59
51
|
}
|
|
60
|
-
|
|
61
52
|
return customizer(variables);
|
|
62
53
|
}
|
|
63
54
|
/**
|
|
64
55
|
* Accepts a theme object and customizer, and returns supported values and defaults.
|
|
65
56
|
* @private
|
|
66
57
|
*/
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
58
|
+
var getCustomizedTheme = (0, _memoize["default"])(getCustomizedThemeUnmemo,
|
|
59
|
+
// eslint-disable-next-line default-param-last
|
|
60
|
+
function () {
|
|
70
61
|
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
62
|
+
family = _ref2.family,
|
|
63
|
+
colorScheme = _ref2.colorScheme,
|
|
64
|
+
density = _ref2.density;
|
|
75
65
|
var customizer = arguments.length > 1 ? arguments[1] : undefined;
|
|
76
66
|
return "".concat(family, "-").concat(colorScheme, "-").concat(density, "-").concat(!!customizer);
|
|
77
67
|
});
|
package/variables.js
CHANGED
|
@@ -4,21 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.clearVariablesCache = exports["default"] = void 0;
|
|
7
|
-
|
|
8
7
|
var _memoize = _interopRequireDefault(require("lodash/memoize"));
|
|
9
|
-
|
|
10
8
|
var _getTheme = _interopRequireDefault(require("./getTheme"));
|
|
11
|
-
|
|
12
9
|
var _utils = require("./utils");
|
|
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
|
/**
|
|
23
18
|
* @file
|
|
24
19
|
* ## Theme Variables
|
|
@@ -82,27 +77,23 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
82
77
|
var getThemeVariable = function getThemeVariable(name, settings, customizer) {
|
|
83
78
|
var theme = (0, _utils.getCustomizedTheme)(settings, customizer);
|
|
84
79
|
var returnValue = theme[name];
|
|
85
|
-
|
|
86
80
|
if (false && typeof returnValue === 'undefined') {
|
|
87
81
|
// eslint-disable-next-line no-console
|
|
88
82
|
console.warn("The variable '".concat(String(name), "' does not exist in the theme '").concat(theme.family, " ").concat(theme.colorScheme, " ").concat(theme.density, "'."));
|
|
89
83
|
}
|
|
90
|
-
|
|
91
84
|
return returnValue;
|
|
92
85
|
};
|
|
93
|
-
|
|
94
86
|
var getThemeVariableMemoized = (0, _memoize["default"])(getThemeVariable, function (name, _ref, customizer) {
|
|
95
87
|
var family = _ref.family,
|
|
96
|
-
|
|
97
|
-
|
|
88
|
+
colorScheme = _ref.colorScheme,
|
|
89
|
+
density = _ref.density;
|
|
98
90
|
return "".concat(name, "-").concat(family, "-").concat(colorScheme, "-").concat(density, "-").concat(!!customizer);
|
|
99
91
|
});
|
|
100
|
-
|
|
101
92
|
var clearVariablesCache = function clearVariablesCache() {
|
|
102
93
|
var _getThemeVariableMemo, _getThemeVariableMemo2;
|
|
103
|
-
|
|
104
94
|
return (_getThemeVariableMemo = (_getThemeVariableMemo2 = getThemeVariableMemoized.cache).clear) === null || _getThemeVariableMemo === void 0 ? void 0 : _getThemeVariableMemo.call(_getThemeVariableMemo2);
|
|
105
95
|
};
|
|
96
|
+
|
|
106
97
|
/**
|
|
107
98
|
* The `get` helper will insert a theme variable into a `styled-components` css template.
|
|
108
99
|
* Note, this will return `undefined` if the variable does not exist in the current theme.
|
|
@@ -118,22 +109,17 @@ var clearVariablesCache = function clearVariablesCache() {
|
|
|
118
109
|
* @returns {function} The returned function is called by `styled-components`, which provides the theme context.
|
|
119
110
|
* @private
|
|
120
111
|
*/
|
|
121
|
-
|
|
122
|
-
|
|
123
112
|
exports.clearVariablesCache = clearVariablesCache;
|
|
124
|
-
|
|
125
113
|
var get = function get(name) {
|
|
126
114
|
return function (_ref2) {
|
|
127
115
|
var _ref2$theme = _ref2.theme;
|
|
128
116
|
_ref2$theme = _ref2$theme === void 0 ? {} : _ref2$theme;
|
|
129
117
|
var splunkThemeV1 = _ref2$theme.splunkThemeV1;
|
|
130
|
-
|
|
131
118
|
var _ref3 = splunkThemeV1 || {},
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
119
|
+
family = _ref3.family,
|
|
120
|
+
colorScheme = _ref3.colorScheme,
|
|
121
|
+
density = _ref3.density,
|
|
122
|
+
customizer = _ref3.customizer;
|
|
137
123
|
return getThemeVariableMemoized(name, {
|
|
138
124
|
family: family,
|
|
139
125
|
colorScheme: colorScheme,
|
|
@@ -141,15 +127,15 @@ var get = function get(name) {
|
|
|
141
127
|
}, customizer);
|
|
142
128
|
};
|
|
143
129
|
};
|
|
144
|
-
|
|
145
130
|
var variableNames = Object.keys(_objectSpread(_objectSpread({}, (0, _getTheme["default"])({
|
|
146
131
|
family: 'prisma'
|
|
147
132
|
})), (0, _getTheme["default"])({
|
|
148
133
|
family: 'enterprise'
|
|
149
|
-
})));
|
|
134
|
+
})));
|
|
135
|
+
|
|
136
|
+
// each variable is converted to a get() function.
|
|
150
137
|
// TS: The AllVariables type allows safe access to all variables shared across themes,
|
|
151
138
|
// and unsafe access to variables exclusive to Enterprise or Prisma
|
|
152
|
-
|
|
153
139
|
var variables = variableNames.reduce(function (acc, currentValue) {
|
|
154
140
|
// using defineProperty instead of acc[currentValue] to work around readonly issue
|
|
155
141
|
Object.defineProperty(acc, currentValue, {
|
package/withSplunkTheme.js
CHANGED
|
@@ -1,36 +1,30 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(
|
|
4
|
-
|
|
3
|
+
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); }
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
9
|
var _styledComponents = require("styled-components");
|
|
13
|
-
|
|
14
10
|
var _utils = require("./utils");
|
|
15
|
-
|
|
16
|
-
function
|
|
17
|
-
|
|
18
|
-
function
|
|
19
|
-
|
|
20
|
-
function
|
|
21
|
-
|
|
22
|
-
function
|
|
23
|
-
|
|
24
|
-
function
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
11
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
12
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n["default"] = e, t && t.set(e, n), n; }
|
|
13
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
|
|
14
|
+
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; }
|
|
15
|
+
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; }
|
|
16
|
+
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; }
|
|
17
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
18
|
+
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); }
|
|
19
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) { o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
|
|
20
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } } return t; }
|
|
21
|
+
// thx: https://davidgomes.com/pick-omit-over-union-types-in-typescript/
|
|
22
|
+
|
|
23
|
+
// for class components
|
|
24
|
+
|
|
25
|
+
// for forwardRef components
|
|
31
26
|
|
|
32
27
|
// implementation for both
|
|
33
|
-
|
|
34
28
|
/**
|
|
35
29
|
* `withSplunkTheme` allows theme variables to be used within a React class component.
|
|
36
30
|
* This includes the basic configuration of `family`, `colorScheme` and `density`,
|
|
@@ -75,38 +69,34 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
75
69
|
* @function
|
|
76
70
|
* @public
|
|
77
71
|
*/
|
|
78
|
-
function withSplunkTheme(
|
|
72
|
+
function withSplunkTheme(
|
|
73
|
+
// eslint-disable-line @typescript-eslint/explicit-module-boundary-types
|
|
79
74
|
Component) {
|
|
80
75
|
var ComponentWithSplunkTheme = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
81
76
|
var _ref = (0, _react.useContext)(_styledComponents.ThemeContext) || {},
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
77
|
+
splunkThemeV1 = _ref.splunkThemeV1,
|
|
78
|
+
rest = _objectWithoutProperties(_ref, ["splunkThemeV1"]);
|
|
85
79
|
var _ref2 = splunkThemeV1 || {},
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
80
|
+
family = _ref2.family,
|
|
81
|
+
colorScheme = _ref2.colorScheme,
|
|
82
|
+
density = _ref2.density,
|
|
83
|
+
customizer = _ref2.customizer;
|
|
91
84
|
var themeSettings = (0, _utils.addThemeDefaults)({
|
|
92
85
|
family: family,
|
|
93
86
|
colorScheme: colorScheme,
|
|
94
87
|
density: density
|
|
95
88
|
});
|
|
96
|
-
|
|
97
89
|
var splunkTheme = _objectSpread(_objectSpread({}, rest), (0, _utils.getCustomizedTheme)(themeSettings, customizer));
|
|
98
|
-
|
|
99
90
|
return /*#__PURE__*/_react["default"].createElement(Component, _extends({}, props, {
|
|
100
91
|
ref: ref,
|
|
101
92
|
splunkTheme: splunkTheme
|
|
102
93
|
}));
|
|
103
94
|
});
|
|
104
|
-
|
|
105
95
|
var displayName = Component.displayName || Component.name || 'Component';
|
|
106
96
|
ComponentWithSplunkTheme.displayName = "withSplunkTheme(".concat(displayName, ")");
|
|
107
97
|
return ComponentWithSplunkTheme;
|
|
108
|
-
}
|
|
109
|
-
|
|
98
|
+
}
|
|
110
99
|
|
|
100
|
+
// see https://github.com/Microsoft/TypeScript/issues/28938 for the two "as T" assertions above
|
|
111
101
|
var _default = withSplunkTheme;
|
|
112
102
|
exports["default"] = _default;
|