@splunk/themes 0.22.0 → 1.0.0-beta.2

package/enterprise/dark.js

@@ -1,74 +1,59 @@
 "use strict";
 
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _light = _interopRequireDefault(require("./light"));
-
-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; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+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); }
 var dragHandleDark = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA1SURBVHgB7dKhEQAgDAPAhHmwSKZHYtmHVtZVVNTkXS53UeG57yPYazLmrB8o6h8QgPqBOAOboRAPJUGIOAAAAABJRU5ErkJggg=="; // see babel-plugin-base64-png
-
 var dark = {
-  backgroundColor: _light["default"].gray20,
   backgroundColorHover: _light["default"].gray30,
-  borderColor: _light["default"].gray22,
-  borderColorWeak: _light["default"].gray60,
-  borderColorStrong: _light["default"].black,
-  borderActiveColor: "rgba(225,225,225, 0.5)",
-  textColor: _light["default"].white,
-  textGray: _light["default"].gray92,
-  textDisabledColor: _light["default"].gray45,
-  linkColor: _light["default"].accentColorL10,
-  linkColorHover: _light["default"].accentColorL20,
-  border: "1px solid ".concat(_light["default"].gray22),
-  borderDark: "1px solid ".concat(_light["default"].black),
-  borderLight: "1px solid ".concat(_light["default"].gray60),
-  focusShadowInset: "inset 0 0 1px 1px ".concat(_light["default"].gray25, ", inset 0 0 0 3px ").concat(_light["default"].focusColor),
-  draggableBackground: "url('data:image/png;base64,".concat(dragHandleDark, "') 0 0 / 8px 8px repeat")
+  borderColor: '#75797a',
+  borderColorWeak: '#404547',
+  borderColorStrong: '#9c9fa0',
+  borderActiveColor: "rgba(225,225,225, 0.5)"
 };
+
 /**
  * ## Status colors
  * Status colors are reserved for communicating urgency and severity associated with data objects and to categorize the visual communication of system responses.
  *
  * @colorSet verbose
  */
-
 var statusColors = {
-  statusColorInfo: _light["default"].infoColorL10,
-  statusColorInfoWeak: _light["default"].infoColor,
-  statusColorInfoStrong: _light["default"].infoColorL20,
-  statusColorNormal: _light["default"].successColorL10,
-  statusColorNormalWeak: _light["default"].successColor,
-  statusColorNormalStrong: _light["default"].successColorL20,
-  statusColorLow: _light["default"].warningColorL10,
-  statusColorLowWeak: _light["default"].warningColor,
-  statusColorLowStrong: _light["default"].warningColorL20,
-  statusColorMedium: _light["default"].alertColorL10,
-  statusColorMediumWeak: _light["default"].alertColor,
-  statusColorMediumStrong: _light["default"].alertColorL20,
-  statusColorHigh: _light["default"].errorColorL10,
-  statusColorHighWeak: _light["default"].errorColor,
-  statusColorHighStrong: _light["default"].errorColorL20,
-  statusColorCritical: _light["default"].errorColorD20,
-  statusColorCriticalWeak: _light["default"].errorColorD30,
-  statusColorCriticalStrong: _light["default"].errorColorD10
+  statusColorInfo: _light["default"].infoColor,
+  statusColorInfoWeak: _light["default"].infoColorD10,
+  statusColorInfoStrong: _light["default"].infoColorL10,
+  statusColorNormal: _light["default"].successColor,
+  statusColorNormalWeak: _light["default"].successColorD10,
+  statusColorNormalStrong: _light["default"].successColorL10,
+  statusColorLow: _light["default"].warningColor,
+  statusColorLowWeak: _light["default"].warningColorD10,
+  statusColorLowStrong: _light["default"].warningColorL10,
+  statusColorMedium: _light["default"].alertColor,
+  statusColorMediumWeak: _light["default"].alertColorD10,
+  statusColorMediumStrong: _light["default"].alertColorL10,
+  statusColorHigh: _light["default"].errorColor,
+  statusColorHighWeak: _light["default"].errorColorD10,
+  statusColorHighStrong: _light["default"].errorColorL10,
+  statusColorCritical: _light["default"].errorColorD10,
+  statusColorCriticalWeak: _light["default"].errorColorD20,
+  statusColorCriticalStrong: _light["default"].errorColor
 };
+
 /**
  * ## Syntax colors
  * Syntax colors are used only for code blocks.
  *
  * @colorSet verbose alphabetical
  */
-
 var syntaxColors = {
   syntaxBlue: '#6cd0f0',
   syntaxBrown: '#fccf87',
@@ -80,20 +65,170 @@ var syntaxColors = {
   syntaxRed: '#fa94aa',
   syntaxTeal: '#45d4ba'
 };
+
+/**
+ * ## Content colors
+ * Content colors should be used for text, icons and dividers.
+ *
+ * @colorSet verbose
+ */
+var contentColors = {
+  contentBackgroundColorNegativeWeak: 'rgba(160, 29, 38, 0.28)',
+  contentColorActive: _light["default"].white,
+  contentColorDefault: _light["default"].gray92,
+  contentColorDisabled: _light["default"].gray45,
+  contentColorInverted: _light["default"].black,
+  contentColorMuted: _light["default"].gray60,
+  contentColorAccent: '#20ac33',
+  contentColorAccentStrong: '#a4e9ae',
+  contentColorAccentWeak: '#0b4613',
+  contentColorInfo: '#66a7c4',
+  contentColorNegative: '#e37267',
+  contentColorNegativeStrong: '#ffa69e',
+  contentColorNegativeWeak: '#562a25',
+  contentColorPositive: '#7ecd7e',
+  contentColorWarning: '#f8be34',
+  contentColorLink: _light["default"].accentColorL10
+};
+
+/**
+ * ## Action colors
+ * Action colors should be used for buttons.
+ *
+ * @colorSet verbose
+ */
+
+var actionColors = {
+  actionColorBackgroundPrimary: '#1a8929',
+  actionColorBackgroundPrimaryActive: '#6eba78',
+  actionColorBackgroundPrimaryDisabled: '#163b1b',
+  actionColorBackgroundPrimaryHover: '#6eba78',
+  actionColorBackgroundSecondary: 'transparent',
+  actionColorBackgroundSecondaryActive: '#424a52',
+  actionColorBackgroundSecondaryDisabled: 'transparent',
+  actionColorBackgroundSecondaryHover: '#424a52',
+  actionColorBackgroundSubtle: 'transparent',
+  actionColorBackgroundSubtleActive: '#214526',
+  actionColorBackgroundSubtleDisabled: 'transparent',
+  actionColorBackgroundSubtleHover: '#214526',
+  actionColorBackgroundDestructive: '#dc4e41',
+  actionColorBackgroundDestructiveActive: '#ff776b',
+  actionColorBackgroundDestructiveDisabled: '#3b1a16',
+  actionColorBackgroundDestructiveHover: '#ff776b',
+  actionColorBackgroundDestructiveSecondary: 'transparent',
+  actionColorBackgroundDestructiveSecondaryActive: '#47221f',
+  actionColorBackgroundDestructiveSecondaryDisabled: 'transparent',
+  actionColorBackgroundDestructiveSecondaryHover: '#47221f',
+  actionColorBorderSecondary: '#5c6773',
+  actionColorBorderSecondaryActive: '#778492',
+  actionColorBorderSecondaryDisabled: '#24292d',
+  actionColorBorderSecondaryHover: '#778492',
+  actionColorBorderDestructiveSecondary: '#ff776b',
+  actionColorBorderDestructiveSecondaryActive: '#ff8a80',
+  actionColorBorderDestructiveSecondaryDisabled: '#562a25',
+  actionColorBorderDestructiveSecondaryHover: '#ff8a80'
+};
+
 /**
- * ## Interactive borders
+ * ## Interactive colors
+ * Interactive colors are specifically chosen for borders and backgrounds of controls and other interactive content.
  *
- * @borderSet
+ * @colorSet verbose
  */
+var interactiveColors = {
+  interactiveColorPrimary: _light["default"].brandColor,
+  interactiveColorBorder: _light["default"].gray60,
+  interactiveColorBorderActive: _light["default"].gray60,
+  interactiveColorBorderHover: 'rgba(255, 255, 255, 0.7)',
+  interactiveColorBorderDisabled: _light["default"].gray45,
+  interactiveColorOverlaySelected: 'rgba(255, 255, 255, 0.1)',
+  interactiveColorOverlayHover: 'rgba(255, 255, 255, 0.05)',
+  interactiveColorOverlayActive: 'rgba(0, 0, 0, 0.2)',
+  interactiveColorOverlayDrag: 'rgba(57, 147, 255, 0.16)',
+  interactiveColorBackground: _light["default"].gray20,
+  interactiveColorBackgroundDisabled: _light["default"].gray22,
+  interactiveColorAccent: '#1A8929',
+  interactiveColorAccentError: _light["default"].errorColorL10,
+  interactiveColorAccentErrorStrong: '#f1b9b3'
+};
 
-var bordersInteractive = {
-  activeBorder: "".concat(dark.borderActiveColor, " double")
+/**
+ * ## 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 verbose
+ */
+
+var neutralColors = {
+  white: '#ffffff',
+  neutral100: _light["default"].gray25,
+  neutral200: _light["default"].gray30,
+  neutral300: _light["default"].gray45,
+  neutral400: _light["default"].gray60,
+  neutral500: _light["default"].gray80,
+  black: '#000000',
+  transparent: 'transparent'
 };
 
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _light["default"]), dark), statusColors), syntaxColors), bordersInteractive), {}, {
-  borderLightColor: _light["default"].gray60 // @deprecated, SUI-5981
+/**
+ * ## Background colors
+ * Background colors should be used only for backgrounds of higher level sections & containers of a UI.
+ *
+ * @colorSet verbose
+ */
+var backgroundColors = {
+  backgroundColorDialog: _light["default"].gray20,
+  backgroundColorFloating: _light["default"].white,
+  backgroundColorNavigation: _light["default"].black,
+  backgroundColorPage: _light["default"].gray20,
+  backgroundColorPopup: _light["default"].gray22,
+  backgroundColorScrim: "rgba(0, 0, 0, 0.8)",
+  backgroundColorSection: _light["default"].gray22,
+  backgroundColorSidebar: _light["default"].black
+};
 
-});
+/**
+ * ## Backgrounds
+ *
+ * @colorSet verbose
+ */
+var backgrounds = {
+  draggableBackground: "url('data:image/png;base64,".concat(dragHandleDark, "') 0 0 / 8px 8px repeat")
+};
 
+/**
+ * ## Interactive state shadows
+ *
+ * @shadowSet
+ */
+var shadows = {
+  focusShadow: "0 0 0 2px ".concat(backgroundColors.backgroundColorPage, ", 0 0 0 5px ").concat(_light["default"].focusColor),
+  focusShadowInset: "inset 0 0 0 3px ".concat(_light["default"].focusColor),
+  embossShadow: '0px 1px 5px rgba(0, 0, 0, 0.35), 0px 0px 1px rgba(0, 0, 0, 0.35)',
+  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)',
+  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)',
+  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)'
+};
+var deprecated = {
+  backgroundColor: _light["default"].gray20,
+  // @deprecated SUI-6656
+  borderLightColor: _light["default"].gray60,
+  // @deprecated, SUI-5981
+  // @deprecated, SUI-6160
+  textColor: _light["default"].white,
+  textGray: _light["default"].gray92,
+  textDisabledColor: _light["default"].gray45,
+  // deprecated
+  accentColorPositive: _light["default"].successColor,
+  accentColorWarning: _light["default"].warningColor,
+  accentColorAlert: _light["default"].alertColor,
+  accentColorNegative: _light["default"].errorColor,
+  linkColor: _light["default"].accentColorL10,
+  linkColorHover: _light["default"].accentColorL20,
+  border: "1px solid ".concat(_light["default"].gray22),
+  borderDark: "1px solid ".concat(_light["default"].black),
+  borderLight: "1px solid ".concat(_light["default"].gray60)
+};
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _light["default"]), dark), actionColors), statusColors), backgroundColors), neutralColors), syntaxColors), contentColors), shadows), interactiveColors), deprecated), backgrounds);
 var _default = theme;
 exports["default"] = _default;