@splunk/themes - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

base.js

@@ -6,10 +6,8 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
-var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+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; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
-
 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; }
@@ -253,3 +251,3 @@
   borderColor: grays.gray80,
-  focusColor: accentColors.accentColorL10,
+  focusColor: accentColors.accentColorD10,
   backgroundColorHover: grays.gray96,
@@ -287,4 +285,4 @@ backgroundColor: grays.white
 var shadows = {
-  focusShadow: "0 0 1px 2px ".concat((0, _tinycolor.default)(usageColors.focusColor).setAlpha(0.6).toRgbString()),
-  focusShadowInset: "inset 0 0 2px 1px ".concat(grays.white, ", inset 0 0 0 2px ").concat(usageColors.focusColor),
+  focusShadow: "0 0 1px 3px ".concat(usageColors.focusColor),
+  focusShadowInset: "inset 0 0 1px 1px ".concat(grays.white, ", inset 0 0 0 3px ").concat(usageColors.focusColor),
   overlayShadow: '0 4px 8px rgba(0, 0, 0, 0.2)'
@@ -369,4 +367,4 @@ };
 
-var _default = _objectSpread({}, grays, accentColors, errorColors, alertColors, warningColors, successColors, infoColors, categoricalColors, divergingColors, syntaxColors, measures, fonts, usageColors, backgrounds, shadows, borders, zindexes);
+var _default = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, grays), accentColors), errorColors), alertColors), warningColors), successColors), infoColors), categoricalColors), divergingColors), syntaxColors), measures), fonts), usageColors), backgrounds), shadows), borders), zindexes);
 
-exports.default = _default;
+exports["default"] = _default;

CHANGELOG.md

 Change Log
 ============
 
+0.6.0 - July 7, 2020
+----------
+New Features:
+* New `scpLight` theme (SUI-2099).
+* New usage-based variables in `scp` theme.
+* Added `overlayColors` mixin.
+
+API Changes:
+* Changes to variables in the `scp` theme:
+  * `gray##` variable removed. Replace with usage-based grays. In limited cases, such as borders, `neutralColor###` may be used.
+  * `successColor` variable removed. Replace with `accentColorPositive`.
+  * `successColorX##` variable removed. Blend `accentColorPositive` with `interactiveColorOverlayXXX` or use a transparency.
+  * `blue#` variable removed. Replace with `interactiveColorPrimary` and possibly blend with `interactiveColorOverlayXXX`.
+  * `green1` variable removed. Replace with `accentColorPositive` or `statusColorNormal`.
+  * `yellow1` variable removed. Replace with `accentColorWarning` or `statusColorLow`.
+  * `orange1` variable removed. Replace with `accentColorAlert` or `statusColorMedium`.
+  * `red1` variable removed. Replace with `accentColorNegative` or `statusColorCritical`.
+  * `accentColor` variable removed. Replace with `interactiveColorPrimary` or `statusColorInfo`.
+  * `accentColorX##` variable removed. Replace with `interactiveColorPrimary` or `statusColorInfo`.
+  * `infoColor` variable removed. Replace with `statusColorInfo` or `contentColorActive`.
+  * `infoColorX##` variable removed. Blend `accentColorWarning` with `interactiveColorOverlayXXX` or use a transparency.
+  * `warningColor` variable removed. Replace with `accentColorWarning`.
+  * `warningColorX##` variable removed. Blend `accentColorWarning` with `interactiveColorOverlayXXX` or use a transparency.
+  * `alertColor` variable removed. Replace with `accentColorAlert`.
+  * `alertColorX##` variable removed. Blend `accentColorPositive` with `interactiveColorOverlayXXX` or use a transparency.
+  * `errorColor` variable removed. Replace with `accentColorNegative`.
+  * `errorColorX##` variable removed. Blend `accentColorPositive` with `interactiveColorOverlayXXX` or use a transparency.
+  * `linkColorHover` variable removed. Remove css or use `linkColor`.
+  * `syntaxBlueLight` variable removed. Replace with `syntaxBlue`.
+  * `syntaxGreenLight` variable removed. Replace with `syntaxGreen`.
+  * `syntaxPurpleLight` variable removed. Replace with `syntaxPurple`.
+  * `syntaxRedLight` variable removed. Replace with `syntaxRed`.
+
+Bug Fixes:
+* Focus styles are updated in `enterprise` and Splunk Light `lite` themes to improve accessibility (SPL-188569).
+
 0.5.0 - May 1, 2020
@@ -5,0 +41,0 @@ ----------

enterprise.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -13,8 +13,16 @@ var _base = _interopRequireDefault(require("./base"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+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; }
 
+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; }
+
 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; }
 
+var meta = {
+  id: 'enterprise',
+  name: 'Enterprise • Light',
+  family: 'enterprise',
+  type: 'light'
+};
 /**
@@ -25,2 +33,3 @@ * # Brand Colors
  */
+
 var brandColors = {
@@ -40,5 +49,7 @@ brandColorL50: '#f5fbf5',
 
-var variables = _objectSpread({}, _base.default, brandColors);
+var variables = _objectSpread(_objectSpread({}, _base["default"]), brandColors);
 
-var _default = _objectSpread({}, variables, {
+var _default = _objectSpread(_objectSpread({
+  meta: meta
+}, variables), {}, {
   mixins: {
@@ -48,2 +59,3 @@ reset: (0, _mixins.createReset)(variables),
     ellipsis: _mixins.ellipsis,
+    overlayColors: _mixins.overlayColors,
     printWidth100Percent: _mixins.printWidth100Percent,
@@ -57,2 +69,2 @@ printHide: _mixins.printHide,
 
-exports.default = _default;
+exports["default"] = _default;

enterpriseDark.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -13,6 +13,8 @@ var _enterprise = _interopRequireDefault(require("./enterprise"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+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; }
 
+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; }
+
 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; }
@@ -22,24 +24,31 @@
 
+var meta = {
+  id: 'enterpriseDark',
+  name: 'Enterprise • Dark',
+  family: 'enterprise',
+  type: 'dark'
+};
 var dark = {
-  backgroundColor: _enterprise.default.gray25,
-  backgroundColorHover: _enterprise.default.gray30,
-  borderColor: _enterprise.default.gray22,
-  borderDarkColor: _enterprise.default.black,
-  borderLightColor: _enterprise.default.gray60,
-  textColor: _enterprise.default.white,
-  textGray: _enterprise.default.gray92,
-  textDisabledColor: _enterprise.default.gray45,
-  linkColor: _enterprise.default.accentColorL10,
-  linkColorHover: _enterprise.default.accentColorL20,
-  border: "1px solid ".concat(_enterprise.default.gray22),
-  borderDark: "1px solid ".concat(_enterprise.default.black),
-  borderLight: "1px solid ".concat(_enterprise.default.gray60),
-  focusShadowInset: "inset 0 0 2px 1px ".concat(_enterprise.default.gray25, ", inset 0 0 0 2px ").concat(_enterprise.default.focusColor),
+  backgroundColor: _enterprise["default"].gray25,
+  backgroundColorHover: _enterprise["default"].gray30,
+  borderColor: _enterprise["default"].gray22,
+  borderDarkColor: _enterprise["default"].black,
+  borderLightColor: _enterprise["default"].gray60,
+  textColor: _enterprise["default"].white,
+  textGray: _enterprise["default"].gray92,
+  textDisabledColor: _enterprise["default"].gray45,
+  linkColor: _enterprise["default"].accentColorL10,
+  linkColorHover: _enterprise["default"].accentColorL20,
+  border: "1px solid ".concat(_enterprise["default"].gray22),
+  borderDark: "1px solid ".concat(_enterprise["default"].black),
+  borderLight: "1px solid ".concat(_enterprise["default"].gray60),
+  focusShadowInset: "inset 0 0 2px 1px ".concat(_enterprise["default"].gray25, ", inset 0 0 0 2px ").concat(_enterprise["default"].focusColor),
   draggableBackground: "url('data:image/png;base64,".concat(dragHandleDark, "') 0 0 / 8px 8px repeat")
 };
 
-var theme = _objectSpread({}, _enterprise.default, dark);
+var theme = _objectSpread(_objectSpread({}, _enterprise["default"]), dark);
 
-var _default = _objectSpread({}, theme, {
-  mixins: _objectSpread({}, theme.mixins, {
+var _default = _objectSpread(_objectSpread({}, theme), {}, {
+  meta: meta,
+  mixins: _objectSpread(_objectSpread({}, theme.mixins), {}, {
     reset: (0, _mixins.createReset)(theme)
@@ -49,2 +58,2 @@ })
 
-exports.default = _default;
+exports["default"] = _default;

lite.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -13,8 +13,16 @@ var _base = _interopRequireDefault(require("./base"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+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; }
 
+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; }
+
 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; }
 
+var meta = {
+  id: 'lite',
+  name: 'Splunk Light',
+  family: 'enterprise',
+  type: 'light'
+};
 /**
@@ -25,2 +33,3 @@ * # Brand Colors
  */
+
 var brandColors = {
@@ -40,5 +49,7 @@ brandColorL50: '#fef8f2',
 
-var variables = _objectSpread({}, _base.default, brandColors);
+var variables = _objectSpread(_objectSpread({}, _base["default"]), brandColors);
 
-var _default = _objectSpread({}, variables, {
+var _default = _objectSpread(_objectSpread({
+  meta: meta
+}, variables), {}, {
   mixins: {
@@ -48,2 +59,3 @@ reset: (0, _mixins.createReset)(variables),
     ellipsis: _mixins.ellipsis,
+    overlayColors: _mixins.overlayColors,
     printWidth100Percent: _mixins.printWidth100Percent,
@@ -57,2 +69,2 @@ printHide: _mixins.printHide,
 
-exports.default = _default;
+exports["default"] = _default;

mixins.js

@@ -14,5 +14,14 @@ "use strict";
 exports.screenReaderContent = screenReaderContent;
+exports.overlayColors = overlayColors;
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+var _tinycolor = _interopRequireDefault(require("tinycolor2"));
 
+var _colorBlend = require("color-blend");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+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; }
+
 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; }
@@ -54,3 +63,3 @@
     emptyCells: 'show',
-    float: 'none',
+    "float": 'none',
     fontStyle: 'normal',
@@ -127,5 +136,5 @@ fontVariant: 'normal',
     var all = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    return _objectSpread({}, full ? fullReset : {}, all ? {
+    return _objectSpread(_objectSpread(_objectSpread({}, full ? fullReset : {}), all ? {
       all: all
-    } : {}, {
+    } : {}), {
       borderWidth: '1px',
@@ -297,2 +306,23 @@ boxSizing: 'border-box',
   };
+}
+/**
+ * Calculates how one color would appear over another using a normal blend mode.
+ *
+ *  ##### Example (styled-components)
+ *  ```css
+ *  .myButton {
+ *      ${props => props.theme.mixins.overlayColors('#fff', 'rgba(0,0,0,0.5'))};
+ *  }
+ *  ```
+ * @name overlayColors
+ * @kind function
+ * @param {string} background
+ * @param {string} foreground The color to overlay over the background.
+ * @public
+ */
+
+
+function overlayColors(c1, c2) {
+  var c3 = (0, _colorBlend.normal)((0, _tinycolor["default"])(c1).toRgb(), (0, _tinycolor["default"])(c2).toRgb());
+  return (0, _tinycolor["default"])(c3).toRgbString();
 }

package.json

 {
   "name": "@splunk/themes",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Theme variables and mixins for the Splunk design language",
@@ -14,2 +14,3 @@ "scripts": {
   "dependencies": {
+    "color-blend": "^2.0.9",
     "tinycolor2": "^1.4.1"
@@ -16,0 +17,0 @@ },

README.md

@@ -22,2 +22,3 @@ # @splunk/themes
 import themeScp from '@splunk/themes/scp';
+import themeScpLight from '@splunk/themes/scpLight';
 ```
@@ -31,2 +32,3 @@
 
+
 Theme modules contain variables following a `name: string|number` scheme:
@@ -42,9 +44,24 @@ ```js
 
+Each theme includes meta data:
+```js
+{
+    meta: {
+        id: 'scpLight', // enterprise, enterpriseDark, lite, scp, scpLight
+        name: 'SCP • Light', // display name
+        family: 'scp', // scp or enterprise
+        type: 'light', // light or dark
+    },
+    [...]
+}
+```
+
 `mixins` is a nested object. Mixins are always functions:
 ```js
 {
-    reset: function(display),
-    clearfix: function(),
+    mixins: {
+        reset: function(display),
+        clearfix: function(),
+    },
     [...]
 }
 ```

scp.js

@@ -6,197 +6,133 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
-var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+var _scpBase = _interopRequireDefault(require("./scpBase"));
 
-var _mixins = require("./mixins");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+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; }
 
 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; }
 
-var dragHandleDark = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAXEgAAFxIBZ5/SUgAAAW5pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIj4KICAgICAgICAgPGRjOnN1YmplY3Q+CiAgICAgICAgICAgIDxyZGY6QmFnLz4KICAgICAgICAgPC9kYzpzdWJqZWN0PgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4K72CKvQAAADdJREFUOBFj/PDp00cGJCDAx8ePxGUgJM+ErJgc9sAbQI6rh5seRkLxTEh+4KORYhcMtzglxz8AtKEQD3hiWXMAAAAASUVORK5CYII="; // see babel-plugin-base64-png
+var dragHandle = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAXEgAAFxIBZ5/SUgAAAW5pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIj4KICAgICAgICAgPGRjOnN1YmplY3Q+CiAgICAgICAgICAgIDxyZGY6QmFnLz4KICAgICAgICAgPC9kYzpzdWJqZWN0PgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4K72CKvQAAADdJREFUOBFj/PDp00cGJCDAx8ePxGUgJM+ErJgc9sAbQI6rh5seRkLxTEh+4KORYhcMtzglxz8AtKEQD3hiWXMAAAAASUVORK5CYII="; // see babel-plugin-base64-png
 
-/**
- * # Grayscale Colors
- *
- * @colorSet
- */
-var grays = {
-  white: '#ffffff',
-  gray96: '#f5f5f5',
-  // white 2
-  gray68: '#acacad',
-  // gray 1
-  gray52: '#818285',
-  // gray 2
-  gray35: '#505158',
-  // gray 3
-  gray29: '#43454b',
-  // gray 4
-  gray23: '#33343b',
-  // gray 5
-  gray20: '#2b2c33',
-  // black 1
-  gray17: '#23242b',
-  // black 2
-  gray11: '#15161b',
-  // black 3
-  gray04: '#08080a',
-  // black 4
-  black: '#000000'
+var meta = {
+  id: 'scp',
+  name: 'SCP • Dark',
+  family: 'scp',
+  type: 'dark'
 };
 /**
- * # Colors
+ * # Background Colors
+ * Background colors should be used only for backgrounds of higher level sections & containers of a UI.
  *
- * @colorSet verbose alphabetical
+ * @colorSet verbose
  */
 
-var colors = {
-  blue1: '#0070f3',
-  blue2: '#0084ff',
-  blue3: '#4ba8ff',
-  green1: '#08e045',
-  red1: '#fe3a3a',
-  orange1: '#ff761d',
-  yellow1: '#ffc500',
-  transparent: 'transparent'
+var backgroundColors = {
+  backgroundColorPopup: '#27292e',
+  backgroundColorSection: '#1a1c20',
+  backgroundColorSidebar: '#0b0c0e',
+  backgroundColorPage: '#111215',
+  backgroundColorNavigation: '#08090a',
+  backgroundColorFloating: '#ffffff',
+  backgroundColorModal: '#1e2024',
+  backgroundColorScrim: 'rgba(0, 0, 0, 0.8)'
 };
 /**
- * # Accent Colors
+ * # Content Colors
+ * Content colors should be used for text, icons and dividers. They use transparent colors, to ensure optimal contrast on every background.
  *
- * @colorSet
+ * @colorSet verbose
  */
 
-var accentColors = {
-  accentColorL50: '#ecf8ff',
-  accentColorL40: '#bfe9ff',
-  accentColorL30: '#7ed2ff',
-  accentColorL20: '#3ebcff',
-  accentColorL10: '#00a4fd',
-  accentColor: '#007abd',
-  accentColorD10: '#006eaa',
-  accentColorD20: '#006297',
-  accentColorD30: '#005684',
-  accentColorD40: '#004a71',
-  accentColorD50: '#003d5e'
+var contentColors = {
+  contentColorActive: 'rgba(255, 255, 255, 0.98)',
+  contentColorDefault: 'rgba(255, 255, 255, 0.7)',
+  contentColorMuted: 'rgba(255, 255, 255, 0.5)',
+  contentColorDisabled: 'rgba(255, 255, 255, 0.3)',
+  contentColorInverted: '#000'
 };
 /**
- * # Error Colors
+ * # Interactive Colors
+ * Interactive colors are specifically chosen for borders and backgrounds of controls and other interactive content.
+ * "Overlay" colors are intended to be placed over the default background color, such as interactiveColorPrimary.
+ * If the default background color is not transparent, the `blend` mixin can be used to create a new color that combines the two.
  *
- * @colorSet
+ * @colorSet verbose
  */
 
-var errorColors = {
-  errorColorL50: '#ffecec',
-  errorColorL40: '#ffc8c8',
-  errorColorL30: '#ffa5a5',
-  errorColorL20: '#fe8181',
-  errorColorL10: '#fe5d5d',
-  errorColor: colors.red1,
-  errorColorD10: '#fe1616',
-  errorColorD20: '#ef0101',
-  errorColorD30: '#cc0101',
-  errorColorD40: '#a80101',
-  errorColorD50: '#850101'
+var interactiveColors = {
+  interactiveColorPrimary: '#3993FF',
+  interactiveColorBorder: 'rgba(255, 255, 255, 0.5)',
+  interactiveColorBorderHover: 'rgba(255, 255, 255, 0.7)',
+  interactiveColorBorderDisabled: 'rgba(255, 255, 255, 0.30)',
+  interactiveColorOverlaySelected: 'rgba(255, 255, 255, 0.1)',
+  interactiveColorOverlayHover: 'rgba(255, 255, 255, 0.05)',
+  interactiveColorOverlayActive: 'rgba(0, 0, 0, 0.2)',
+  interactiveColorBackground: '#272a2f',
+  interactiveColorBackgroundDisabled: 'rgba(255, 255, 255, 0.15)'
 };
 /**
- * # Alert Colors
+ * # Neutral Colors
+ * Neutrals are used for dividers and as backup colors that can sparingly be used for cases, when the other defined colors are not enough.
  *
- * @colorSet
- * */
-
-var alertColors = {
-  alertColorL50: '#ffe2cf',
-  alertColorL40: '#ffcdac',
-  alertColorL30: '#ffb788',
-  alertColorL20: '#ffa164',
-  alertColorL10: '#ff8c41',
-  alertColor: colors.orange1,
-  alertColorD10: '#f86200',
-  alertColorD20: '#d55400',
-  alertColorD30: '#b14600',
-  alertColorD40: '#8d3800',
-  alertColorD50: '#692a00'
-};
-/**
- * # Warning Colors
- *
- *  @colorSet
+ * @colorSet verbose
  */
 
-var warningColors = {
-  warningColorL50: '#ffeeb3',
-  warningColorL40: '#ffe58f',
-  warningColorL30: '#ffdd6b',
-  warningColorL20: '#ffd547',
-  warningColorL10: '#ffcd24',
-  warningColor: colors.yellow1,
-  warningColorD10: '#dba900',
-  warningColorD20: '#b88e00',
-  warningColorD30: '#947200',
-  warningColorD40: '#705700',
-  warningColorD50: '#4d3b00'
+var neutralColors = {
+  black: '#000000',
+  neutral100: '#33343b',
+  neutral200: '#43454b',
+  neutral300: '#505158',
+  neutral400: '#818285',
+  neutral500: '#acacad',
+  white: '#ffffff'
 };
 /**
- * # Success Colors
+ * # Accent Colors
+ * Accent colors aid and categorize the visual communication of the system response.
  *
- * @colorSet
+ * @colorSet verbose
  */
 
-var successColors = {
-  successColorL50: '#eef6ee',
-  successColorL40: '#ddecdd',
-  successColorL30: '#bbd9ba',
-  successColorL20: '#98c697',
-  successColorL10: '#76b374',
-  successColor: '#53a051',
-  successColorD10: '#479144',
-  successColorD20: '#40813d',
-  successColorD30: '#387135',
-  successColorD40: '#2f612e',
-  successColorD50: '#275126'
+var accentColors = {
+  accentColorPositive: '#27f561',
+  accentColorWarning: '#ffd442',
+  accentColorAlert: '#ff9750',
+  accentColorNegative: '#ff5c5c'
 };
 /**
- * # Info Colors
+ * # Status Colors
+ * Status colors are reserved for communicating urgency and severity associated with data objects.
  *
- *  @colorSet
+ * @colorSet verbose
  */
 
-var infoColors = {
-  infoColorL50: '#e5f0f5',
-  infoColorL40: '#cce2eb',
-  infoColorL30: '#99c5d7',
-  infoColorL20: '#66a7c4',
-  infoColorL10: '#338ab0',
-  infoColor: '#006d9c',
-  infoColorD10: '#00577c',
-  infoColorD20: '#004c6c',
-  infoColorD30: '#00415d',
-  infoColorD40: '#00364d',
-  infoColorD50: '#002b3e'
+var statusColors = {
+  statusColorInfo: '#61cafa',
+  statusColorNormal: '#85eb48',
+  statusColorLow: '#fae75f',
+  statusColorMedium: '#f5b53f',
+  statusColorHigh: '#ec4B43',
+  statusColorCritical: '#a81916'
 };
 /**
- * # Usage-based Colors
+ * # Elevation Shadows
  *
- * @colorSet verbose
+ * @shadowSet
+ *
  */
 
-var usageColors = {
-  textColor: grays.gray68,
-  textGray: grays.gray52,
-  textDisabledColor: grays.gray52,
-  linkColor: colors.blue3,
-  linkColorHover: colors.blue3,
-  borderLightColor: grays.gray68,
-  borderColor: grays.gray29,
-  borderDarkColor: grays.black,
-  focusColor: colors.blue3,
-  backgroundColorHover: grays.gray20,
-  backgroundColor: grays.gray11
+var shadows = {
+  embossShadow: '0px 0px 0.5px rgba(0, 0, 0, 0.09), 0px 1px  5px rgba(0, 0, 0, 0.12)',
+  overlayShadow: '0px 1px 7px rgba(0, 0, 0, 0.09), 0px 2px 23px rgba(0, 0, 0, 0.15), 0px 9px 107px rgba(0, 0, 0, 0.24)',
+  dragShadow: '0px 0.5px 3px rgba(0, 0, 0, 0.15), 0px 1px 10px rgba(0, 0, 0, 0.21), 0px 6px 45px rgba(0, 0, 0, 0.36)',
+  modalShadow: '0px 1.5px 10px rgba(0, 0, 0, 0.09), 0px 6px 28px rgba(0, 0, 0, 0.15), 0px 10px 66px rgba(0, 0, 0, 0.18), 0px 36px 219px rgba(0, 0, 0, 0.27)'
 };
 /**
  * # Syntax Colors
- * The following colors should only be used for syntax coloring of code.
+ * Syntax colors are used only for code blocks.
  *
@@ -207,28 +143,13 @@ * @colorSet verbose alphabetical
 var syntaxColors = {
-  syntaxBlue: '#2662fc',
-  syntaxBlueLight: '#006d9c',
-  syntaxBrown: '#a67f59',
-  syntaxGray: '#8293a7',
-  syntaxGreen: '#5ca300',
-  syntaxGreenLight: '#5ba383',
-  syntaxOrange: '#f58220',
-  syntaxPink: '#cf00cf',
-  syntaxPurple: '#7738ff',
-  syntaxPurpleLight: '#b19cd9',
-  syntaxRed: '#d90700',
-  syntaxRedLight: '#af575a',
-  syntaxTeal: '#00a8ab'
+  syntaxBlue: '#6cd0f0',
+  syntaxBrown: '#f7933f',
+  syntaxGray: '#7d7d7d',
+  syntaxGreen: '#cef06c',
+  syntaxOrange: '#b75808',
+  syntaxPink: '#f494e5',
+  syntaxPurple: '#a870ef',
+  syntaxRed: '#e85b79',
+  syntaxTeal: '#45d4ba'
 };
 /**
- * # Shadows
- *
- * @shadowSet
- */
-
-var shadows = {
-  focusShadow: "0 0 1px 2px ".concat((0, _tinycolor.default)(usageColors.focusColor).setAlpha(0.6).toRgbString()),
-  focusShadowInset: "inset 0 0 2px 1px ".concat(grays.gray29, ", inset 0 0 0 2px ").concat(usageColors.focusColor),
-  overlayShadow: '0 4px 8px rgba(0, 0, 0, 0.2)'
-};
-/**
  * # Backgrounds
@@ -240,89 +161,9 @@ *
 var backgrounds = {
-  draggableBackground: "url('data:image/png;base64,".concat(dragHandleDark, "') 0 0 / 8px 8px repeat")
+  draggableBackground: "url('data:image/png;base64,".concat(dragHandle, "') 0 0 / 8px 8px repeat")
 };
-/**
- * # Border
- *
- * @valueSet
- */
 
-var borders = {
-  borderRadius: '4px',
-  borderLight: "1px solid ".concat(grays.gray68),
-  border: "1px solid ".concat(usageColors.borderColor),
-  borderDark: "1px solid ".concat(grays.black)
-};
-/**
- * # Measures
- * Spacing is used for margin on any element or padding on containers, but can be used for other
- * properties that position elements.
- * * Larger containers, such as `Card` or `Modal`, use `spacing`.
- * * `spacingHalf` and `spacingQuarter` are primarily for horizontal spacing between smaller elements.
- * * Just because a desired value equals 20, 10, or 5 pixels, does not mean it's appropriate to
- * use spacing variables.
- *
- * @valueSet
- */
+var variables = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, backgrounds), accentColors), statusColors), shadows), backgroundColors), contentColors), neutralColors), interactiveColors), syntaxColors);
 
-var measures = {
-  spacing: '20px',
-  spacingHalf: '10px',
-  spacingQuarter: '5px',
-  fontSize: '14px',
-  fontSizeXSmall: '11px',
-  fontSizeSmall: '12px',
-  fontSizeLarge: '16px',
-  fontSizeXLarge: '18px',
-  fontSizeXXLarge: '24px',
-  lineHeight: '20px',
-  inputHeight: '36px',
-  inputHeightSmall: '28px',
-  inputHeightLarge: '38px',
-  toastContainerWidth: '500px'
-};
-var sansFontFamily = "'Splunk Platform Sans', 'Splunk Data Sans', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
-/**
- * # Fonts
- *
- * @valueSet
- */
+var _default = (0, _scpBase["default"])(meta, variables);
 
-var fonts = {
-  sansFontFamily: sansFontFamily,
-  serifFontFamily: "Georgia, 'Times New Roman', Times, serif",
-  monoFontFamily: "'Splunk Platform Mono', 'Roboto Mono', Consolas, 'Droid Sans Mono', Monaco, 'Courier New', Courier, monospace",
-  fontFamily: sansFontFamily,
-  fontWeightBold: '700',
-  fontWeightSemiBold: '500'
-};
-/**
- * # Layers
- * If a variable does not suit your purpose, set a value relatively, such as zindexModal +1.
- *
- * @valueSet
- */
-
-var zindexes = {
-  zindexFixedNavbar: 1030,
-  zindexModalBackdrop: 1040,
-  zindexModal: 1050,
-  zindexPopover: 1060,
-  zindexToastMessages: 2000
-};
-
-var theme = _objectSpread({}, grays, colors, accentColors, errorColors, alertColors, warningColors, successColors, infoColors, syntaxColors, measures, fonts, usageColors, backgrounds, shadows, borders, zindexes);
-
-var _default = _objectSpread({}, theme, {
-  mixins: {
-    reset: (0, _mixins.createReset)(theme),
-    clearfix: _mixins.clearfix,
-    ellipsis: _mixins.ellipsis,
-    printWidth100Percent: _mixins.printWidth100Percent,
-    printHide: _mixins.printHide,
-    printNoBackground: _mixins.printNoBackground,
-    printWrapAll: _mixins.printWrapAll,
-    screenReaderContent: _mixins.screenReaderContent
-  }
-});
-
-exports.default = _default;
+exports["default"] = _default;

No alert changes

Improved metrics

Total package byte prevSize

62084

increased by33.12%

Number of package files

12

increased by20%

Lines of code

1217

increased by17.13%

Number of lines in readme file

65

increased by35.42%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedcolor-blend@^2.0.9

• + Addedcolor-blend@2.0.9(transitive)