@splunk/themes 1.0.0-beta.2 → 1.0.0-beta.3

package/enterprise/light.js

@@ -47,16 +47,9 @@ var deprecatedEnterpriseColors = {
   errorColorD20: '#b23d30',
   brandColor: '#5cc05c'
 };
-
-/**
- * ## 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',
+  neutral50: '#f1f2f4',
   neutral100: deprecatedEnterpriseColors.gray98,
   neutral200: deprecatedEnterpriseColors.gray96,
   neutral300: deprecatedEnterpriseColors.gray92,
@@ -65,12 +58,6 @@ var neutralColors = {
   black: '#000000',
   transparent: 'transparent'
 };
-
-/**
- * ## Usage-based colors
- *
- * @colorSet verbose
- */
 var usageColors = {
   borderActiveColor: "rgba(0,0,0, 0.5)",
   borderColor: '#8c8c8c',
@@ -79,13 +66,31 @@ var usageColors = {
   focusColor: deprecatedEnterpriseColors.accentColorD10,
   backgroundColorHover: deprecatedEnterpriseColors.gray96
 };
-
-/**
- * ## 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 notificationColors = {
+  notificationColorInfoWeak: '#F0E5FF',
+  notificationColorInfo: '#8C4CEB',
+  notificationColorInfoStrong: '#40226D',
+  notificationColorPositiveWeak: '#CCEEFF',
+  notificationColorPositive: '#0076B2',
+  notificationColorPositiveStrong: '#054362',
+  notificationColorCautionWeak: '#FEE7B9',
+  notificationColorCaution: '#996600',
+  notificationColorCautionStrong: '#664400',
+  notificationColorNegativeWeak: '#FFE5E5',
+  notificationColorNegative: '#CF1717',
+  notificationColorNegativeStrong: '#5D0A0A'
+};
+var severityColors = {
+  severityColorCustom: '#5D6596',
+  severityColorUnknown: '#656C75',
+  severityColorInfo: '#864AE0',
+  severityColorNormal: '#017580',
+  severityColorNotice: '#A65503',
+  severityColorWarning: '#BD410B',
+  severityColorAlert: '#CC2D37',
+  severityColorCritical: '#C2306F',
+  severityColorEmergency: '#B53394'
+};
 var statusColors = {
   statusColorInfo: deprecatedEnterpriseColors.infoColor,
   statusColorInfoWeak: deprecatedEnterpriseColors.infoColorL10,
@@ -106,26 +111,12 @@ var statusColors = {
   statusColorCriticalWeak: deprecatedEnterpriseColors.errorColor,
   statusColorCriticalStrong: deprecatedEnterpriseColors.errorColorD20
 };
-
-/**
- * ## Elevation shadows
- *
- * @shadowSet
- *
- */
 var elevationShadows = {
   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)'
 };
-
-/**
- * ## Syntax colors
- * The following colors should only be used for syntax coloring of code.
- *
- * @colorSet verbose alphabetical
- */
 var syntaxColors = {
   syntaxBlue: '#006aa3',
   syntaxBrown: '#905b04',
@@ -137,13 +128,6 @@ var syntaxColors = {
   syntaxRed: '#ca163d',
   syntaxTeal: '#1a7060'
 };
-
-/**
- * ## Background colors
- * Background colors should be used only for backgrounds of higher level sections & containers of a UI.
- *
- * @colorSet verbose
- */
 var backgroundColors = {
   backgroundColorDialog: neutralColors.white,
   backgroundColorFloating: neutralColors.black,
@@ -154,23 +138,10 @@ var backgroundColors = {
   backgroundColorSection: neutralColors.white,
   backgroundColorSidebar: deprecatedEnterpriseColors.gray98
 };
-
-/**
- * ## Interactive state shadows
- *
- * @shadowSet
- */
 var shadows = {
   focusShadow: "0 0 0 2px ".concat(backgroundColors.backgroundColorPage, ", 0 0 0 5px ").concat(usageColors.focusColor),
   focusShadowInset: "inset 0 0 0 3px ".concat(usageColors.focusColor)
 };
-
-/**
- * ## Content colors
- * Content colors should be used for text, icons and dividers.
- *
- * @colorSet verbose
- */
 var contentColors = {
   contentBackgroundColorNegativeWeak: 'rgba(235, 70, 81, 0.20)',
   contentColorActive: deprecatedEnterpriseColors.gray30,
@@ -189,14 +160,6 @@ var contentColors = {
   contentColorWarning: '#7d600f',
   contentColorLink: deprecatedEnterpriseColors.accentColorD10
 };
-
-/**
- * ## Action colors
- * Action colors should be used for buttons.
- *
- * @colorSet verbose
- */
-
 var actionColors = {
   actionColorBackgroundPrimary: '#1a8929',
   actionColorBackgroundPrimaryActive: '#125e1c',
@@ -227,15 +190,7 @@ var actionColors = {
   actionColorBorderDestructiveSecondaryDisabled: '#f5aca3',
   actionColorBorderDestructiveSecondaryHover: '#a1382b'
 };
-
-/**
- * ## Interactive colors
- * Interactive colors are specifically chosen for borders and backgrounds of controls and other interactive content.
- *
- * @colorSet verbose
- */
 var interactiveColors = {
-  interactiveColorPrimary: deprecatedEnterpriseColors.brandColor,
   interactiveColorBorder: deprecatedEnterpriseColors.gray60,
   interactiveColorBorderActive: deprecatedEnterpriseColors.gray45,
   interactiveColorBorderHover: 'rgba(0, 0, 0, 0.6)',
@@ -244,28 +199,16 @@ var interactiveColors = {
   interactiveColorOverlayHover: 'rgba(0, 0, 0, 0.03)',
   interactiveColorOverlayActive: 'rgba(0, 0, 0, 0.07)',
   interactiveColorOverlayDrag: 'rgba(2, 100, 215, 0.16)',
-  interactiveColorBackground: neutralColors.white,
-  interactiveColorBackgroundDisabled: deprecatedEnterpriseColors.gray96,
+  interactiveColorBackground: 'transparent',
+  interactiveColorBackgroundDisabled: 'transparent',
   interactiveColorAccent: '#1A8929',
   interactiveColorAccentError: deprecatedEnterpriseColors.errorColorD20,
   interactiveColorAccentErrorStrong: '#852d24'
 };
-
-/**
- * ## Backgrounds
- *
- * @colorSet verbose
- */
 var backgrounds = {
   draggableBackground: "url('data:image/png;base64,".concat(dragHandle, "') 0 0 / 8px 8px repeat")
 };
 var sansFontFamily = "'Splunk Platform Sans', 'Proxima Nova', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
-
-/**
- * ## Typography
- *
- * @private
- */
 var typography = {
   sansFontFamily: sansFontFamily,
   serifFontFamily: "Georgia, 'Times New Roman', Times, serif",
@@ -286,13 +229,6 @@ var typography = {
   lineHeight: '1.5',
   lineLength: '80ch'
 };
-
-/**
- * ## Layers
- * If a variable does not suit your purpose, set a value relatively, such as zindexModal +1.
- *
- * @valueSet
- */
 var zindexes = {
   zindexLayer: 1000,
   zindexFixedNavbar: 1030,
@@ -452,8 +388,9 @@ var deprecated = {
   syntaxBlueLight: '#006d9c',
   syntaxGreenLight: '#5ba383',
   syntaxPurpleLight: '#b19cd9',
-  syntaxRedLight: '#af575a'
+  syntaxRedLight: '#af575a',
+  interactiveColorPrimary: deprecatedEnterpriseColors.brandColor
 };
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, deprecatedEnterpriseColors), backgroundColors), actionColors), neutralColors), statusColors), elevationShadows), syntaxColors), usageColors), backgrounds), shadows), typography), contentColors), interactiveColors), zindexes), _dataViz["default"]), deprecated);
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, deprecatedEnterpriseColors), backgroundColors), actionColors), neutralColors), notificationColors), severityColors), statusColors), elevationShadows), syntaxColors), usageColors), backgrounds), shadows), typography), contentColors), interactiveColors), zindexes), _dataViz["default"]), deprecated);
 var _default = theme;
 exports["default"] = _default;

package/mixins/tests/utilityMixins.unit.js

@@ -69,7 +69,7 @@ describe('overlayColors', function () {
     expect(result).toBe('rgb(0, 0, 0)');
   });
   it('uses default theme variables', function () {
-    var result = (0, _utilityMixins.overlayColors)(_variables["default"].interactiveColorPrimary, _variables["default"].interactiveColorOverlayHover)(defaultProps);
+    var result = (0, _utilityMixins.overlayColors)(_variables["default"].interactiveColorAccent, _variables["default"].interactiveColorOverlayHover)(defaultProps);
     expect(result).toBe('rgb(67, 152, 255)');
   });
   var enterpriseLightProps = {

package/mixins/utilityMixins.js

@@ -252,10 +252,10 @@ function screenReaderContent() {
  *  ```js
  *  import styled from 'styled-components';
  *  import { overlayColors } from '@splunk/themes/mixins';
- *  import { interactiveColorPrimary, interactiveColorOverlaySelected } from '@splunk/themes/variables';
+ *  import { interactiveColorAccent, interactiveColorOverlaySelected } from '@splunk/themes/variables';
  *
  *  const myButton = styled.button`
- *      background: ${overlayColors(interactiveColorPrimary, interactiveColorOverlaySelected)};
+ *      background: ${overlayColors(interactiveColorAccent, interactiveColorOverlaySelected)};
  *  `
  *  ```
  * @name overlayColors
@@ -280,10 +280,10 @@ function overlayColors(c1, c2) {
  *  ```js
  *  import styled from 'styled-components';
  *  import { colorWithAlpha } from '@splunk/themes/mixins';
- *  import { interactiveColorPrimary } from '@splunk/themes/variables';
+ *  import { actionColorBackgroundPrimary } from '@splunk/themes/variables';
  *
  *  const myButton = styled.button`
- *      background: ${colorWithAlpha(interactiveColorPrimary, 0.5)};
+ *      background: ${colorWithAlpha(actionColorBackgroundPrimary, 0.5)};
  *  `
  *  ```
  * @name colorWithAlpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "Theme variables and mixins for the Splunk design language",
   "scripts": {
     "babel": "babel src -d . --ignore src/babel-plugin-base64-png,src/tests --ignore \"**/docs\" --extensions .js,.ts,.tsx",
@@ -27,7 +27,7 @@
     "@storybook/react": ">= 7.x",
     "@storybook/theming": ">= 7.x",
     "@types/lodash": "^4.14.156",
-    "@types/react": "^16.9.38",
+    "@types/react": "^18.2.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "^5.3.10"
   },

package/prisma/base.js

@@ -21,55 +21,23 @@ function createPrismaBase(_ref) {
     light: _light["default"],
     dark: _dark["default"]
   }[colorScheme];
-
-  /**
-   * ## Misc. colors
-   *
-   * @colorSet verbose
-   */
   var usageColors = {
     focusColor: colorSchemeVars.interactiveColorPrimary
   };
-
-  /**
-   * ## Interactive state shadows
-   *
-   * @shadowSet
-   *
-   */
   var shadows = {
     hoverShadow: "0 0 0 2px ".concat(colorSchemeVars.backgroundColorPage, ", 0 0 0 5px ").concat(colorSchemeVars.interactiveColorOverlayHover),
     focusShadow: "0 0 0 2px ".concat(colorSchemeVars.backgroundColorPage, ", 0 0 0 5px ").concat(usageColors.focusColor),
     focusShadowInset: "inset 0 0 0 3px ".concat(usageColors.focusColor)
   };
-
-  /**
-   * ## Borders
-   *
-   * @borderSet
-   *
-   */
   var borders = {
     borderColor: "".concat(colorSchemeVars.borderColor),
     borderColorWeak: "".concat(colorSchemeVars.borderColorWeak),
     borderColorStrong: "".concat(colorSchemeVars.borderColorStrong)
   };
-
-  /**
-   * ## Backgrounds
-   *
-   * @colorSet verbose
-   */
   var backgrounds = {
     draggableBackground: "radial-gradient(circle at 1px 1px, ".concat(colorSchemeVars.contentColorMuted, ", ").concat(colorSchemeVars.contentColorMuted, " 1px, transparent 1px) 0 0 / 4px 6px")
   };
   var sansFontFamily = "'Splunk Platform Sans', 'Splunk Data Sans', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
-
-  /**
-   * ## Typography
-   *
-   * @private
-   */
   var typography = {
     sansFontFamily: sansFontFamily,
     serifFontFamily: "Georgia, 'Times New Roman', Times, serif",
@@ -90,13 +58,6 @@ function createPrismaBase(_ref) {
     lineHeight: '1.5',
     lineLength: '80ch'
   };
-
-  /**
-   * ## Layers
-   * If a variable does not suit your purpose, set a value relatively, such as zindexModal +1.
-   *
-   * @valueSet
-   */
   var zindexes = {
     zindexLayer: 1000,
     zindexFixedNavbar: 1030,

package/prisma/comfortable.js

@@ -4,13 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-/**
- * ## Measures
- * Spacing is used for margin on any element or padding on containers, but can be used for other
- * properties that position elements.
- *
- * @valueSet
- */
 var measures = {
   spacingXSmall: '4px',
   spacingSmall: '8px',

package/prisma/compact.js

@@ -4,17 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-/**
- * ## 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 measures = {
   spacingXSmall: '4px',
   spacingSmall: '8px',

package/prisma/dark.js

@@ -12,13 +12,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
-/**
- * ## Background colors
- * Background colors should be used only for backgrounds of higher level sections & containers of a UI.
- *
- * @colorSet verbose
- */
-
 var backgroundColors = {
   backgroundColorPopup: '#27292e',
   backgroundColorSection: '#1a1c20',
@@ -29,26 +22,11 @@ var backgroundColors = {
   backgroundColorDialog: '#1e2024',
   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.
- *
- * @colorSet verbose
- */
-
 var contentColors = {
   contentBackgroundColorNegativeWeak: 'rgba(160, 29, 38, 0.28)',
   contentColorAccent: '#3d95ff',
@@ -67,14 +45,6 @@ var contentColors = {
   contentColorWarning: '#f49106',
   contentColorLink: '#3993ff'
 };
-
-/**
- * ## Action colors
- * Action colors should be used for buttons.
- *
- * @colorSet verbose
- */
-
 var actionColors = {
   actionColorBackgroundPrimary: '#3993ff',
   actionColorBackgroundPrimaryActive: '#6baeff',
@@ -105,18 +75,7 @@ var actionColors = {
   actionColorBorderDestructiveSecondaryDisabled: '#561a1a',
   actionColorBorderDestructiveSecondaryHover: '#ff6b6b'
 };
-
-/**
- * ## Interactive colors
- * 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.
- *
- * @colorSet verbose
- */
-
 var interactiveColors = {
-  interactiveColorPrimary: '#3993FF',
   interactiveColorBorder: 'rgba(255, 255, 255, 0.5)',
   interactiveColorBorderActive: 'rgba(225, 225, 225, 0.5)',
   interactiveColorBorderHover: 'rgba(255, 255, 255, 0.7)',
@@ -125,22 +84,15 @@ var interactiveColors = {
   interactiveColorOverlayHover: 'rgba(255, 255, 255, 0.05)',
   interactiveColorOverlayActive: 'rgba(0, 0, 0, 0.2)',
   interactiveColorOverlayDrag: 'rgba(57, 147, 255, 0.16)',
-  interactiveColorBackground: '#111215',
-  interactiveColorBackgroundDisabled: '#111215',
+  interactiveColorBackground: 'transparent',
+  interactiveColorBackgroundDisabled: 'transparent',
   interactiveColorAccent: '#3993ff',
   interactiveColorAccentError: '#ff4242',
   interactiveColorAccentErrorStrong: '#ff878b'
 };
-
-/**
- * ## 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 = {
   black: '#000000',
+  neutral50: '#232429',
   neutral100: '#33343b',
   neutral200: '#43454b',
   neutral300: '#505158',
@@ -149,13 +101,31 @@ var neutralColors = {
   white: '#ffffff',
   transparent: 'transparent'
 };
-
-/**
- * ## 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 notificationColors = {
+  notificationColorInfoWeak: '#2E1B4B',
+  notificationColorInfo: '#AC75FF',
+  notificationColorInfoStrong: '#D1B2FF',
+  notificationColorPositiveWeak: '#092635',
+  notificationColorPositive: '#1AB2FF',
+  notificationColorPositiveStrong: '#99DDFF',
+  notificationColorCautionWeak: '#331E00',
+  notificationColorCaution: '#FFAF0F',
+  notificationColorCautionStrong: '#FDDC9B',
+  notificationColorNegativeWeak: '#391313',
+  notificationColorNegative: '#FF5252',
+  notificationColorNegativeStrong: '#FF9999'
+};
+var severityColors = {
+  severityColorCustom: '#868EC2',
+  severityColorUnknown: '#889099',
+  severityColorInfo: '#A974F7',
+  severityColorNormal: '#04A4B0',
+  severityColorNotice: '#D6900D',
+  severityColorWarning: '#F26722',
+  severityColorAlert: '#FA5762',
+  severityColorCritical: '#F2638C',
+  severityColorEmergency: '#E85FC6'
+};
 var statusColors = {
   statusColorInfo: '#61cafa',
   statusColorInfoWeak: (0, _tinycolor["default"])('#61cafa').darken(10).toHexString(),
@@ -176,26 +146,12 @@ var statusColors = {
   statusColorCriticalWeak: (0, _tinycolor["default"])('#ff3361').darken(10).toHexString(),
   statusColorCriticalStrong: (0, _tinycolor["default"])('#ff3361').lighten(10).toHexString()
 };
-
-/**
- * ## Elevation shadows
- *
- * @shadowSet
- *
- */
 var elevationShadows = {
   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)'
 };
-
-/**
- * ## Syntax colors
- * Syntax colors are used only for code blocks.
- *
- * @colorSet verbose alphabetical
- */
 var syntaxColors = {
   syntaxBlue: '#6cd0f0',
   syntaxBrown: '#fccf87',
@@ -211,8 +167,9 @@ var deprecated = {
   accentColorPositive: statusColors.statusColorNormal,
   accentColorWarning: statusColors.statusColorMedium,
   accentColorAlert: '#c6400d',
-  accentColorNegative: statusColors.statusColorHigh
+  accentColorNegative: statusColors.statusColorHigh,
+  interactiveColorPrimary: '#3993FF'
 };
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, actionColors), statusColors), elevationShadows), backgroundColors), borderColors), contentColors), neutralColors), interactiveColors), syntaxColors), deprecated);
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, actionColors), notificationColors), severityColors), statusColors), elevationShadows), backgroundColors), borderColors), contentColors), neutralColors), interactiveColors), syntaxColors), deprecated);
 var _default = theme;
 exports["default"] = _default;