@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.
Files changed (40) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/SplunkThemeProvider.js +18 -31
  3. package/enterprise/comfortable.js +0 -1
  4. package/enterprise/compact.js +0 -1
  5. package/enterprise/dark.js +10 -17
  6. package/enterprise/index.js +8 -16
  7. package/enterprise/light.js +24 -31
  8. package/enterprise/prismaAliases.js +3 -11
  9. package/getSettingsFromThemedProps.js +4 -8
  10. package/getTheme.js +13 -26
  11. package/index.js +1 -13
  12. package/mixins/index.js +8 -18
  13. package/mixins/tests/typography.unit.js +39 -85
  14. package/mixins/tests/utilityMixins.unit.js +2 -10
  15. package/mixins/typography.js +21 -52
  16. package/mixins/utilityMixins.js +11 -34
  17. package/package.json +18 -10
  18. package/pick.js +7 -18
  19. package/pickVariant.js +1 -7
  20. package/prisma/base.js +13 -20
  21. package/prisma/comfortable.js +0 -1
  22. package/prisma/compact.js +0 -1
  23. package/prisma/dark.js +15 -16
  24. package/prisma/dataViz.js +38 -49
  25. package/prisma/index.js +8 -16
  26. package/prisma/light.js +15 -16
  27. package/storybook-addon-splunk-themes/SplunkThemesTool.js +20 -42
  28. package/storybook-addon-splunk-themes/ThemedDocsContainer.js +3 -13
  29. package/storybook-addon-splunk-themes/index.js +0 -4
  30. package/storybook-addon-splunk-themes/manager.js +1 -7
  31. package/storybook-addon-splunk-themes/preview.js +4 -8
  32. package/storybook-addon-splunk-themes/tests/util.unit.js +0 -1
  33. package/storybook-addon-splunk-themes/themeOptions.js +0 -1
  34. package/storybook-addon-splunk-themes/themes.js +4 -15
  35. package/storybook-addon-splunk-themes/util.js +21 -39
  36. package/storybook-addon-splunk-themes/withSplunkTheme.js +27 -65
  37. package/useSplunkTheme.js +14 -22
  38. package/utils.js +25 -35
  39. package/variables.js +17 -31
  40. 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
-
16
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
17
-
18
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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;
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports["default"] = void 0;
7
-
8
7
  /**
9
8
  * ## Measures
10
9
  * Spacing is used for margin on any element or padding on containers, but can be used for other
package/prisma/compact.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports["default"] = void 0;
7
-
8
7
  /**
9
8
  * ## Measures
10
9
  * Spacing is used for margin on any element or padding on containers, but can be used for other
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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
-
12
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
13
-
14
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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;