@splunk/themes 0.23.0 → 1.0.0-beta.2

package/prisma/dark.js

@@ -30,6 +30,18 @@ var backgroundColors = {
   backgroundColorScrim: 'rgba(0, 0, 0, 0.8)'
 };
 
+/**
+ * ## Border colors
+ *
+ * @colorSet verbose
+ */
+
+var borderColors = {
+  borderColor: '#717275',
+  borderColorWeak: '#3d3e43',
+  borderColorStrong: '#97989b'
+};
+
 /**
  * ## Content colors
  * Content colors should be used for text, icons and dividers.
@@ -38,16 +50,65 @@ var backgroundColors = {
  */
 
 var contentColors = {
+  contentBackgroundColorNegativeWeak: 'rgba(160, 29, 38, 0.28)',
+  contentColorAccent: '#3d95ff',
+  contentColorAccentStrong: '#9ecaff',
+  contentColorAccentWeak: '#14437b',
   contentColorActive: '#fafafa',
   contentColorDefault: '#b5b5b5',
   contentColorDisabled: '#6b6b6b',
+  contentColorInfo: '#61cafa',
   contentColorInverted: '#000000',
-  contentColorMuted: '#909090'
+  contentColorMuted: '#909090',
+  contentColorNegative: '#ff5252',
+  contentColorNegativeStrong: '#ff9e9e',
+  contentColorNegativeWeak: '#561a1a',
+  contentColorPositive: '#85f415',
+  contentColorWarning: '#f49106',
+  contentColorLink: '#3993ff'
+};
+
+/**
+ * ## Action colors
+ * Action colors should be used for buttons.
+ *
+ * @colorSet verbose
+ */
+
+var actionColors = {
+  actionColorBackgroundPrimary: '#3993ff',
+  actionColorBackgroundPrimaryActive: '#6baeff',
+  actionColorBackgroundPrimaryDisabled: '#103460',
+  actionColorBackgroundPrimaryHover: '#6baeff',
+  actionColorBackgroundSecondary: 'transparent',
+  actionColorBackgroundSecondaryActive: '#45464f',
+  actionColorBackgroundSecondaryDisabled: 'transparent',
+  actionColorBackgroundSecondaryHover: '#45464f',
+  actionColorBackgroundSubtle: 'transparent',
+  actionColorBackgroundSubtleActive: '#0a2f5c',
+  actionColorBackgroundSubtleDisabled: 'transparent',
+  actionColorBackgroundSubtleHover: '#0a2f5c',
+  actionColorBackgroundDestructive: '#ff4242',
+  actionColorBackgroundDestructiveActive: '#ff6b6b',
+  actionColorBackgroundDestructiveDisabled: '#561a1a',
+  actionColorBackgroundDestructiveHover: '#ff6b6b',
+  actionColorBackgroundDestructiveSecondary: 'transparent',
+  actionColorBackgroundDestructiveSecondaryActive: '#471f1f',
+  actionColorBackgroundDestructiveSecondaryDisabled: 'transparent',
+  actionColorBackgroundDestructiveSecondaryHover: '#471f1f',
+  actionColorBorderSecondary: '#858585',
+  actionColorBorderSecondaryActive: '#b2b4bd',
+  actionColorBorderSecondaryDisabled: '#42454d',
+  actionColorBorderSecondaryHover: '#b2b4bd',
+  actionColorBorderDestructiveSecondary: '#ff4242',
+  actionColorBorderDestructiveSecondaryActive: '#ff6b6b',
+  actionColorBorderDestructiveSecondaryDisabled: '#561a1a',
+  actionColorBorderDestructiveSecondaryHover: '#ff6b6b'
 };
 
 /**
  * ## Interactive colors
- * Interactive colors are specifically chosen for borders and backgrounds of controls and other interactive content.
+ * Interactive colors are specifically chosen for borders and backgrounds of controls.
  * "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.
  *
@@ -64,8 +125,11 @@ var interactiveColors = {
   interactiveColorOverlayHover: 'rgba(255, 255, 255, 0.05)',
   interactiveColorOverlayActive: 'rgba(0, 0, 0, 0.2)',
   interactiveColorOverlayDrag: 'rgba(57, 147, 255, 0.16)',
-  interactiveColorBackground: '#272a2f',
-  interactiveColorBackgroundDisabled: 'rgba(255, 255, 255, 0.15)'
+  interactiveColorBackground: '#111215',
+  interactiveColorBackgroundDisabled: '#111215',
+  interactiveColorAccent: '#3993ff',
+  interactiveColorAccentError: '#ff4242',
+  interactiveColorAccentErrorStrong: '#ff878b'
 };
 
 /**
@@ -82,7 +146,8 @@ var neutralColors = {
   neutral300: '#505158',
   neutral400: '#818285',
   neutral500: '#acacad',
-  white: '#ffffff'
+  white: '#ffffff',
+  transparent: 'transparent'
 };
 
 /**
@@ -112,19 +177,6 @@ var statusColors = {
   statusColorCriticalStrong: (0, _tinycolor["default"])('#ff3361').lighten(10).toHexString()
 };
 
-/**
- * ## Accent colors
- * Accent colors aid and categorize the visual communication of the system response.
- *
- * @colorSet verbose
- */
-var accentColors = {
-  accentColorPositive: statusColors.statusColorNormal,
-  accentColorWarning: statusColors.statusColorMedium,
-  accentColorAlert: '#f0581f',
-  accentColorNegative: statusColors.statusColorHigh
-};
-
 /**
  * ## Elevation shadows
  *
@@ -155,6 +207,12 @@ var syntaxColors = {
   syntaxRed: '#e9627f',
   syntaxTeal: '#45d4ba'
 };
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, accentColors), statusColors), elevationShadows), backgroundColors), contentColors), neutralColors), interactiveColors), syntaxColors);
+var deprecated = {
+  accentColorPositive: statusColors.statusColorNormal,
+  accentColorWarning: statusColors.statusColorMedium,
+  accentColorAlert: '#c6400d',
+  accentColorNegative: statusColors.statusColorHigh
+};
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, actionColors), statusColors), elevationShadows), backgroundColors), borderColors), contentColors), neutralColors), interactiveColors), syntaxColors), deprecated);
 var _default = theme;
 exports["default"] = _default;

package/prisma/dataViz.js

@@ -11,12 +11,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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); }
 /**
- *  ## Data viz
- *
- * Colors should be used in their prescribed order.
- * Don't mix-and-match between sets in the same visualization.
- *
- * ### Static colors
+ * #### Static colors
  *
  * @colorSet verbose
  */
@@ -44,7 +39,7 @@ var staticColors = {
 };
 
 /**
- * ### Categorical 1D
+ * #### Categorical 1D
  *
  * @colorSet verbose
  */
@@ -60,7 +55,7 @@ var categorical1D = {
 };
 
 /**
- * ### Categorical 1L
+ * #### Categorical 1L
  *
  * @colorSet verbose
  */
@@ -75,7 +70,7 @@ var categorical1L = {
 };
 
 /**
- * ### Categorical 2D
+ * #### Categorical 2D
  *
  * @colorSet verbose
  */
@@ -90,7 +85,7 @@ var categorical2D = {
 };
 
 /**
- * ### Categorical 2L
+ * #### Categorical 2L
  *
  * @colorSet verbose
  */
@@ -106,7 +101,7 @@ var categorical2L = {
 var categorical = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, categorical1D), categorical1L), categorical2D), categorical2L);
 
 /**
- * ### Divergent 1D
+ * #### Divergent 1D
  *
  * @colorSet verbose
  */
@@ -122,7 +117,7 @@ var divergent1D = {
 };
 
 /**
- * ### Divergent 1L
+ * #### Divergent 1L
  *
  * @colorSet verbose
  */
@@ -137,7 +132,7 @@ var divergent1L = {
 };
 
 /**
- * ### Divergent 2D
+ * #### Divergent 2D
  *
  * @colorSet verbose
  */
@@ -152,7 +147,7 @@ var divergent2D = {
 };
 
 /**
- * ### Divergent 2L
+ * #### Divergent 2L
  *
  * @colorSet verbose
  */
@@ -167,7 +162,7 @@ var divergent2L = {
 };
 
 /**
- * ### Divergent 3D
+ * #### Divergent 3D
  *
  * @colorSet verbose
  */
@@ -182,7 +177,7 @@ var divergent3D = {
 };
 
 /**
- * ### Divergent 3L
+ * #### Divergent 3L
  *
  * @colorSet verbose
  */
@@ -197,7 +192,7 @@ var divergent3L = {
 };
 
 /**
- * ### Divergent 4D
+ * #### Divergent 4D
  *
  * @colorSet verbose
  */
@@ -212,7 +207,7 @@ var divergent4D = {
 };
 
 /**
- * ### Divergent 4L
+ * #### Divergent 4L
  *
  * @colorSet verbose
  */
@@ -228,7 +223,7 @@ var divergent4L = {
 var divergent = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, divergent1D), divergent1L), divergent2D), divergent2L), divergent3D), divergent3L), divergent4D), divergent4L);
 
 /**
- * ### Sequential 1D
+ * #### Sequential 1D
  *
  * @colorSet verbose
  */
@@ -244,7 +239,7 @@ var sequential1D = {
 };
 
 /**
- * ### Sequential 1L
+ * #### Sequential 1L
  *
  * @colorSet verbose
  */
@@ -259,7 +254,7 @@ var sequential1L = {
 };
 
 /**
- * ### Sequential 2D
+ * #### Sequential 2D
  *
  * @colorSet verbose
  */
@@ -274,7 +269,7 @@ var sequential2D = {
 };
 
 /**
- * ### Sequential 2L
+ * #### Sequential 2L
  *
  * @colorSet verbose
  */
@@ -289,7 +284,7 @@ var sequential2L = {
 };
 
 /**
- * ### Sequential 3D
+ * #### Sequential 3D
  *
  * @colorSet verbose
  */
@@ -304,7 +299,7 @@ var sequential3D = {
 };
 
 /**
- * ### Sequential 3L
+ * #### Sequential 3L
  *
  * @colorSet verbose
  */
@@ -319,7 +314,7 @@ var sequential3L = {
 };
 
 /**
- * ### Sequential 4D
+ * #### Sequential 4D
  *
  * @colorSet verbose
  */
@@ -334,7 +329,7 @@ var sequential4D = {
 };
 
 /**
- * ### Sequential 4L
+ * #### Sequential 4L
  *
  * @colorSet verbose
  */
@@ -349,7 +344,7 @@ var sequential4L = {
 };
 
 /**
- * ### Sequential 5D
+ * #### Sequential 5D
  *
  * @colorSet verbose
  */
@@ -364,7 +359,7 @@ var sequential5D = {
 };
 
 /**
- * ### Sequential 5L
+ * #### Sequential 5L
  *
  * @colorSet verbose
  */
@@ -379,7 +374,7 @@ var sequential5L = {
 };
 
 /**
- * ### Sequential 6D
+ * #### Sequential 6D
  *
  * @colorSet verbose
  */
@@ -394,7 +389,7 @@ var sequential6D = {
 };
 
 /**
- * ### Sequential 6L
+ * #### Sequential 6L
  *
  * @colorSet verbose
  */
@@ -410,7 +405,7 @@ var sequential6L = {
 var sequential = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, sequential1D), sequential1L), sequential2D), sequential2L), sequential3D), sequential3L), sequential4D), sequential4L), sequential5D), sequential5L), sequential6D), sequential6L);
 
 /**
- * ### High low 1D
+ * #### High low 1D
  *
  * @colorSet verbose
  */
@@ -421,7 +416,7 @@ var highLow1D = {
 };
 
 /**
- * ### High low 1L
+ * #### High low 1L
  *
  * @colorSet verbose
  */
@@ -431,7 +426,7 @@ var highLow1L = {
 };
 
 /**
- * ### High low 2D
+ * #### High low 2D
  *
  * @colorSet verbose
  */
@@ -441,7 +436,7 @@ var highLow2D = {
 };
 
 /**
- * ### High low 2L
+ * #### High low 2L
  *
  * @colorSet verbose
  */
@@ -451,7 +446,7 @@ var highLow2L = {
 };
 
 /**
- * ### High low 3D
+ * #### High low 3D
  *
  * @colorSet verbose
  */
@@ -461,7 +456,7 @@ var highLow3D = {
 };
 
 /**
- * ### High low 3L
+ * #### High low 3L
  *
  * @colorSet verbose
  */
@@ -471,7 +466,7 @@ var highLow3L = {
 };
 
 /**
- * ### High low 4D
+ * #### High low 4D
  *
  * @colorSet verbose
  */
@@ -481,7 +476,7 @@ var highLow4D = {
 };
 
 /**
- * ### High low 4L
+ * #### High low 4L
  *
  * @colorSet verbose
  */

package/prisma/light.js

@@ -30,6 +30,18 @@ var backgroundColors = {
   backgroundColorScrim: 'rgba(255, 255, 255, 0.75)'
 };
 
+/**
+ * ## Border colors
+ *
+ * @colorSet verbose
+ */
+
+var borderColors = {
+  borderColor: ' #8f8f8f',
+  borderColorWeak: '#e0e0e0',
+  borderColorStrong: '#6b6b6b'
+};
+
 /**
  * ## Content colors
  * Content colors should be used for text, icons and dividers.
@@ -38,16 +50,65 @@ var backgroundColors = {
  */
 
 var contentColors = {
+  contentBackgroundColorNegativeWeak: 'rgba(235, 70, 81, 0.20)',
+  contentColorAccent: '#0264d7',
+  contentColorAccentStrong: '#013f88',
+  contentColorAccentWeak: '#b3d6fe',
   contentColorActive: '#2c2c2c',
   contentColorDefault: '#4d4d4d',
   contentColorDisabled: '#878787',
+  contentColorInfo: '#006be5',
   contentColorInverted: '#ffffff',
-  contentColorMuted: '#6b6b6b'
+  contentColorMuted: '#6b6b6b',
+  contentColorNegative: '#e00000',
+  contentColorNegativeStrong: '#7a0000',
+  contentColorNegativeWeak: '#ff9999',
+  contentColorPositive: '#407a06',
+  contentColorWarning: '#c97705',
+  contentColorLink: '#0264d7'
+};
+
+/**
+ * ## Action colors
+ * Action colors should be used for buttons.
+ *
+ * @colorSet verbose
+ */
+
+var actionColors = {
+  actionColorBackgroundPrimary: '#0264d7',
+  actionColorBackgroundPrimaryActive: '#024ba2',
+  actionColorBackgroundPrimaryDisabled: '#72b2fe',
+  actionColorBackgroundPrimaryHover: '#024ba2',
+  actionColorBackgroundSubtle: 'transparent',
+  actionColorBackgroundSecondaryActive: '#d6d6d6',
+  actionColorBackgroundSubtleDisabled: 'transparent',
+  actionColorBackgroundSecondaryHover: '#d6d6d6',
+  actionColorBackgroundSecondary: 'transparent',
+  actionColorBackgroundSubtleActive: '#cce3ff',
+  actionColorBackgroundSecondaryDisabled: 'transparent',
+  actionColorBackgroundSubtleHover: '#cce3ff',
+  actionColorBackgroundDestructive: '#e00000',
+  actionColorBackgroundDestructiveActive: '#a30000',
+  actionColorBackgroundDestructiveDisabled: '#ff9999',
+  actionColorBackgroundDestructiveHover: '#a30000',
+  actionColorBackgroundDestructiveSecondary: 'transparent',
+  actionColorBackgroundDestructiveSecondaryActive: '#ffcccc',
+  actionColorBackgroundDestructiveSecondaryDisabled: 'transparent',
+  actionColorBackgroundDestructiveSecondaryHover: '#ffcccc',
+  actionColorBorderSecondary: '#858585',
+  actionColorBorderSecondaryActive: '#525252',
+  actionColorBorderSecondaryDisabled: '#d6d6d6',
+  actionColorBorderSecondaryHover: '#525252',
+  actionColorBorderDestructiveSecondary: '#e00000',
+  actionColorBorderDestructiveSecondaryActive: '#a30000',
+  actionColorBorderDestructiveSecondaryDisabled: '#ff9999',
+  actionColorBorderDestructiveSecondaryHover: '#a30000'
 };
 
 /**
  * ## Interactive colors
- * Interactive colors are specifically chosen for borders and backgrounds of controls and other interactive content.
+ * Interactive colors are specifically chosen for styling controls.
  * "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.
  *
@@ -64,8 +125,11 @@ var interactiveColors = {
   interactiveColorOverlayHover: 'rgba(0, 0, 0, 0.03)',
   interactiveColorOverlayActive: 'rgba(0, 0, 0, 0.07)',
   interactiveColorOverlayDrag: 'rgba(2, 100, 215, 0.16)',
-  interactiveColorBackground: '#eeeeee',
-  interactiveColorBackgroundDisabled: 'rgba(0, 0, 0, 0.1)'
+  interactiveColorBackground: '#f9f9f9',
+  interactiveColorBackgroundDisabled: '#ffffff',
+  interactiveColorAccent: '#0264d7',
+  interactiveColorAccentError: '#e00000',
+  interactiveColorAccentErrorStrong: '#a01d26'
 };
 
 /**
@@ -82,7 +146,8 @@ var neutralColors = {
   neutral300: '#dddddd',
   neutral400: '#cacaca',
   neutral500: '#b8b8b8',
-  black: '#000000'
+  black: '#000000',
+  transparent: 'transparent'
 };
 
 /**
@@ -112,19 +177,6 @@ var statusColors = {
   statusColorCriticalStrong: (0, _tinycolor["default"])('#9e1534').darken(10).toHexString()
 };
 
-/**
- * ## Accent colors
- * Accent colors aid and categorize the visual communication of the system response.
- *
- * @colorSet verbose
- */
-var accentColors = {
-  accentColorPositive: statusColors.statusColorNormal,
-  accentColorWarning: statusColors.statusColorMedium,
-  accentColorAlert: '#c6400d',
-  accentColorNegative: statusColors.statusColorHigh
-};
-
 /**
  * ## Elevation shadows
  *
@@ -132,7 +184,7 @@ var accentColors = {
  *
  */
 var elevationShadows = {
-  embossShadow: ' 0px 1px 5px rgba(0, 0, 0, 0.07), 0px 0px 1px rgba(0, 0, 0, 0.07)',
+  embossShadow: '0px 1px 5px rgba(0, 0, 0, 0.07), 0px 0px 1px rgba(0, 0, 0, 0.07)',
   overlayShadow: '0px 26px 103px rgba(0, 0, 0, 0.13), 0px 11px 18px rgba(0, 0, 0, 0.06), 0px 3px 6px rgba(0, 0, 0, 0.06)',
   dragShadow: '0px 26px 103px rgba(0, 0, 0, 0.13), 0px 11px 18px rgba(0, 0, 0, 0.06), 0px 3px 6px rgba(0, 0, 0, 0.06)',
   modalShadow: '0px 50px 200px rgba(0, 0, 0, 0.3), 0px 29px 66px rgba(0, 0, 0, 0.08), 0px 29px 47px rgba(0, 0, 0, 0.08), 0px 5px 10px rgba(0, 0, 0, 0.03)'
@@ -155,6 +207,12 @@ var syntaxColors = {
   syntaxRed: '#db1e47',
   syntaxTeal: '#1d7c6b'
 };
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, accentColors), statusColors), elevationShadows), backgroundColors), contentColors), neutralColors), interactiveColors), syntaxColors);
+var deprecated = {
+  accentColorPositive: statusColors.statusColorNormal,
+  accentColorWarning: statusColors.statusColorMedium,
+  accentColorAlert: '#c6400d',
+  accentColorNegative: statusColors.statusColorHigh
+};
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, actionColors), statusColors), elevationShadows), backgroundColors), borderColors), contentColors), neutralColors), interactiveColors), syntaxColors), deprecated);
 var _default = theme;
 exports["default"] = _default;