@splunk/themes 0.23.0 → 1.0.0-beta.2

package/enterprise/light.js

@@ -1,175 +1,384 @@
 "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 _tinycolor = _interopRequireDefault(require("tinycolor2"));
+var _dataViz = _interopRequireDefault(require("./dataViz"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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); }
 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 dragHandle = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA2SURBVHgB7dKhEQAgDAPAhDnxDMAcDIBnT1pZV1FRk3e53EWFc+2P4N3DmLN+oKh/QADqB+IMUKEQD/CeueAAAAAASUVORK5CYII="; // see babel-plugin-base64-pngimport {
+var dragHandle = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA2SURBVHgB7dKhEQAgDAPAhDnxDMAcDIBnT1pZV1FRk3e53EWFc+2P4N3DmLN+oKh/QADqB+IMUKEQD/CeueAAAAAASUVORK5CYII="; // see babel-plugin-base64-pngimport
 /**
- * ## Brand colors
+ * To avoid duplicating hex codes and keeping them in sync, for deprecated tokens and
+ * colors that are used for themes 1.0 tokens, add this object to store the colors that
+ * are used across enterprise themes.
+ */
+var deprecatedEnterpriseColors = {
+  gray30: '#3c444d',
+  gray45: '#5c6773',
+  gray60: '#818d99',
+  gray80: '#c3cbd4',
+  gray92: '#e1e6eb',
+  gray96: '#f2f4f5',
+  gray98: '#f7f8fa',
+  successColor: '#53a051',
+  warningColor: '#f8be34',
+  alertColor: '#f1813f',
+  errorColor: '#dc4e41',
+  accentColorD10: '#006eaa',
+  accentColor: '#007abd',
+  infoColor: '#006d9c',
+  infoColorL10: '#338ab0',
+  infoColorD10: '#00577c',
+  successColorL10: '#76b374',
+  successColorD10: '#479144',
+  warningColorL10: '#facb5d',
+  warningColorD10: '#e0ac16',
+  alertColorL10: '#f49b66',
+  alertColorD10: '#da742e',
+  errorColorL10: '#e37267',
+  errorColorD10: '#c84535',
+  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
+ * @colorSet verbose
  */
-var brandColors = {
+
+var neutralColors = {
+  white: '#ffffff',
+  neutral100: deprecatedEnterpriseColors.gray98,
+  neutral200: deprecatedEnterpriseColors.gray96,
+  neutral300: deprecatedEnterpriseColors.gray92,
+  neutral400: _tinycolor["default"].mix(deprecatedEnterpriseColors.gray92, deprecatedEnterpriseColors.gray80).toRgbString(),
+  neutral500: deprecatedEnterpriseColors.gray80,
+  black: '#000000',
+  transparent: 'transparent'
+};
+
+/**
+ * ## Usage-based colors
+ *
+ * @colorSet verbose
+ */
+var usageColors = {
+  borderActiveColor: "rgba(0,0,0, 0.5)",
+  borderColor: '#8c8c8c',
+  borderColorWeak: '#d6d6d6',
+  borderColorStrong: '#666666',
+  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 statusColors = {
+  statusColorInfo: deprecatedEnterpriseColors.infoColor,
+  statusColorInfoWeak: deprecatedEnterpriseColors.infoColorL10,
+  statusColorInfoStrong: deprecatedEnterpriseColors.infoColorD10,
+  statusColorNormal: deprecatedEnterpriseColors.successColor,
+  statusColorNormalWeak: deprecatedEnterpriseColors.successColorL10,
+  statusColorNormalStrong: deprecatedEnterpriseColors.successColorD10,
+  statusColorLow: deprecatedEnterpriseColors.warningColor,
+  statusColorLowWeak: deprecatedEnterpriseColors.warningColorL10,
+  statusColorLowStrong: deprecatedEnterpriseColors.warningColorD10,
+  statusColorMedium: deprecatedEnterpriseColors.alertColor,
+  statusColorMediumWeak: deprecatedEnterpriseColors.alertColorL10,
+  statusColorMediumStrong: deprecatedEnterpriseColors.alertColorD10,
+  statusColorHigh: deprecatedEnterpriseColors.errorColor,
+  statusColorHighWeak: deprecatedEnterpriseColors.errorColorL10,
+  statusColorHighStrong: deprecatedEnterpriseColors.errorColorD10,
+  statusColorCritical: deprecatedEnterpriseColors.errorColorD10,
+  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',
+  syntaxGray: '#5c6773',
+  syntaxGreen: '#2f612e',
+  syntaxOrange: '#a44b0e',
+  syntaxPink: '#b9139e',
+  syntaxPurple: '#5317f2',
+  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,
+  backgroundColorNavigation: deprecatedEnterpriseColors.gray96,
+  backgroundColorPage: neutralColors.white,
+  backgroundColorPopup: neutralColors.white,
+  backgroundColorScrim: "rgba(255, 255, 255, 0.75)",
+  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,
+  contentColorDefault: deprecatedEnterpriseColors.gray45,
+  contentColorDisabled: deprecatedEnterpriseColors.gray80,
+  contentColorInverted: neutralColors.white,
+  contentColorMuted: deprecatedEnterpriseColors.gray60,
+  contentColorAccent: '#1a8929',
+  contentColorAccentStrong: '#0d4515',
+  contentColorAccentWeak: '#b5e3b5',
+  contentColorInfo: '#006d9c',
+  contentColorNegative: '#c84535',
+  contentColorNegativeStrong: '#812d22',
+  contentColorNegativeWeak: '#f5aca3',
+  contentColorPositive: '#307b30',
+  contentColorWarning: '#7d600f',
+  contentColorLink: deprecatedEnterpriseColors.accentColorD10
+};
+
+/**
+ * ## Action colors
+ * Action colors should be used for buttons.
+ *
+ * @colorSet verbose
+ */
+
+var actionColors = {
+  actionColorBackgroundPrimary: '#1a8929',
+  actionColorBackgroundPrimaryActive: '#125e1c',
+  actionColorBackgroundPrimaryDisabled: '#98d798',
+  actionColorBackgroundPrimaryHover: '#125e1c',
+  actionColorBackgroundSecondary: 'transparent',
+  actionColorBackgroundSecondaryActive: '#d2d6da',
+  actionColorBackgroundSecondaryDisabled: 'transparent',
+  actionColorBackgroundSecondaryHover: '#d2d6da',
+  actionColorBackgroundSubtle: 'transparent',
+  actionColorBackgroundSubtleActive: '#d8f3dc',
+  actionColorBackgroundSubtleDisabled: 'transparent',
+  actionColorBackgroundSubtleHover: '#d8f3dc',
+  actionColorBackgroundDestructive: '#c84535',
+  actionColorBackgroundDestructiveActive: '#a1382b',
+  actionColorBackgroundDestructiveDisabled: '#f5aca3',
+  actionColorBackgroundDestructiveHover: '#a1382b',
+  actionColorBackgroundDestructiveSecondary: 'transparent',
+  actionColorBackgroundDestructiveSecondaryActive: '#fad6d1',
+  actionColorBackgroundDestructiveSecondaryDisabled: 'transparent',
+  actionColorBackgroundDestructiveSecondaryHover: '#fad6d1',
+  actionColorBorderSecondary: '#818d99',
+  actionColorBorderSecondaryActive: '#49525a',
+  actionColorBorderSecondaryDisabled: '#d2d6da',
+  actionColorBorderSecondaryHover: '#49525a',
+  actionColorBorderDestructiveSecondary: '#c84535',
+  actionColorBorderDestructiveSecondaryActive: '#a1382b',
+  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)',
+  interactiveColorBorderDisabled: deprecatedEnterpriseColors.gray80,
+  interactiveColorOverlaySelected: 'rgba(0, 0, 0, 0.04)',
+  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,
+  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",
+  monoFontFamily: "'Splunk Platform Mono', Inconsolata, Consolas, 'Droid Sans Mono', Monaco, 'Courier New', Courier, monospace",
+  fontFamily: sansFontFamily,
+  fontFamilyTitle: sansFontFamily,
+  fontSizeSmall: '0.75rem',
+  fontSize: '0.875rem',
+  fontSizeLarge: '1rem',
+  fontSizeXLarge: '1.25rem',
+  fontSizeXXLarge: '1.5rem',
+  fontWeightLight: 300,
+  fontWeightNormal: 400,
+  fontWeightSemiBold: 500,
+  fontWeightBold: 700,
+  fontWeightHeavy: 800,
+  fontWeightExtraBold: 900,
+  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,
+  zindexModalBackdrop: 1040,
+  zindexModal: 1050,
+  zindexPopover: 1060,
+  zindexToastMessages: 2000
+};
+var deprecated = {
+  backgroundColor: neutralColors.white,
+  // @deprecated SUI-6656
+  borderLightColor: deprecatedEnterpriseColors.gray92,
+  // @deprecated SUI-5981
+  // @deprecated SUI-6160
+  textColor: deprecatedEnterpriseColors.gray30,
+  textGray: '#6b7785',
+  textDisabledColor: deprecatedEnterpriseColors.gray80,
+  // deprecated
+  accentColorPositive: deprecatedEnterpriseColors.successColor,
+  accentColorWarning: deprecatedEnterpriseColors.warningColor,
+  accentColorAlert: deprecatedEnterpriseColors.alertColor,
+  accentColorNegative: deprecatedEnterpriseColors.errorColor,
+  linkColor: deprecatedEnterpriseColors.accentColorD10,
+  linkColorHover: deprecatedEnterpriseColors.accentColor,
+  border: "1px solid ".concat(usageColors.borderColor),
   brandColorL50: '#f5fbf5',
   brandColorL40: '#dff2df',
   brandColorL30: '#bee6be',
   brandColorL20: '#9ed99e',
   brandColorL10: '#7ecd7e',
-  brandColor: '#5cc05c',
   brandColorD10: '#49b849',
   brandColorD20: '#40a540',
   brandColorD30: '#389038',
   brandColorD40: '#307b30',
-  brandColorD50: '#286728'
-};
-
-/**
- * ## Grayscale colors
- *
- * @colorSet
- */
-var grays = {
-  white: '#ffffff',
-  gray98: '#f7f8fa',
-  gray96: '#f2f4f5',
-  gray92: '#e1e6eb',
-  gray80: '#c3cbd4',
-  gray60: '#818d99',
-  gray45: '#5c6773',
-  gray30: '#3c444d',
+  brandColorD50: '#286728',
   gray25: '#31373e',
   gray22: '#2b3033',
   gray20: '#171d21',
-  black: '#000000'
-};
-
-/**
- * ## Accent colors
- *
- * @colorSet
- */
-var accentColors = {
   accentColorL50: '#ecf8ff',
   accentColorL40: '#bfe9ff',
   accentColorL30: '#7ed2ff',
   accentColorL20: '#3ebcff',
   accentColorL10: '#00a4fd',
-  accentColor: '#007abd',
-  accentColorD10: '#006eaa',
   accentColorD20: '#006297',
   accentColorD30: '#005684',
   accentColorD40: '#004a71',
-  accentColorD50: '#003d5e'
-};
-
-/**
- * ## Error Colors
- *
- * @colorSet
- */
-var errorColors = {
+  accentColorD50: '#003d5e',
   errorColorL50: '#fcedec',
   errorColorL40: '#f8dcd9',
   errorColorL30: '#f1b9b3',
   errorColorL20: '#ea958d',
-  errorColorL10: '#e37267',
-  errorColor: '#dc4e41',
-  errorColorD10: '#c84535',
-  errorColorD20: '#b23d30',
   errorColorD30: '#9c3529',
   errorColorD40: '#852d24',
-  errorColorD50: '#6f261d'
-};
-
-/**
- * ## Alert colors
- *
- * @colorSet
- * */
-var alertColors = {
+  errorColorD50: '#6f261d',
   alertColorL50: '#fef3ec',
   alertColorL40: '#fde6d9',
   alertColorL30: '#facdb3',
   alertColorL20: '#f7b48c',
-  alertColorL10: '#f49b66',
-  alertColor: '#f1813f',
-  alertColorD10: '#da742e',
   alertColorD20: '#c2672a',
   alertColorD30: '#aa5a25',
   alertColorD40: '#914d1f',
-  alertColorD50: '#79401a'
-};
-
-/**
- * ## Warning colors
- *
- *  @colorSet
- */
-var warningColors = {
+  alertColorD50: '#79401a',
   warningColorL50: '#fff9eb',
   warningColorL40: '#fef2d7',
   warningColorL30: '#fde5ae',
   warningColorL20: '#fbd886',
-  warningColorL10: '#facb5d',
-  warningColor: '#f8be34',
-  warningColorD10: '#e0ac16',
   warningColorD20: '#c79915',
   warningColorD30: '#ae8613',
   warningColorD40: '#957312',
-  warningColorD50: '#7d600f'
-};
-
-/**
- * ## Success colors
- *
- * @colorSet
- */
-var successColors = {
+  warningColorD50: '#7d600f',
   successColorL50: '#eef6ee',
   successColorL40: '#ddecdd',
   successColorL30: '#bbd9ba',
   successColorL20: '#98c697',
-  successColorL10: '#76b374',
-  successColor: '#53a051',
-  successColorD10: '#479144',
   successColorD20: '#40813d',
   successColorD30: '#387135',
   successColorD40: '#2f612e',
-  successColorD50: '#275126'
-};
-
-/**
- * ## Info colors
- *
- *  @colorSet
- */
-var infoColors = {
+  successColorD50: '#275126',
   infoColorL50: '#e5f0f5',
   infoColorL40: '#cce2eb',
   infoColorL30: '#99c5d7',
   infoColorL20: '#66a7c4',
-  infoColorL10: '#338ab0',
-  infoColor: '#006d9c',
-  infoColorD10: '#00577c',
   infoColorD20: '#004c6c',
   infoColorD30: '#00415d',
   infoColorD40: '#00364d',
-  infoColorD50: '#002b3e'
-};
-
-/**
- * ## Diverging colors
- *
- * @colorSet alphabetical
- */
-var divergingColors = {
+  infoColorD50: '#002b3e',
   diverging1ColorA: '#006d9c',
   diverging1ColorB: '#ec9960',
   diverging2ColorA: '#af575a',
@@ -179,15 +388,7 @@ var divergingColors = {
   diverging4ColorA: '#5a4575',
   diverging4ColorB: '#708794',
   diverging5ColorA: '#294e70',
-  diverging5ColorB: '#b6c75a'
-};
-
-/**
- * ## Categorical Colors
- *
- * @colorSet alphabetical
- */
-var categoricalColors = {
+  diverging5ColorB: '#b6c75a',
   cat1Color: '#297ba5',
   cat1ColorL: '#78b9d6',
   cat2Color: '#4fa484',
@@ -247,161 +448,12 @@ var categoricalColors = {
   cat29Color: '#7672a4',
   cat29ColorL: '#ada9c8',
   cat30Color: '#184b81',
-  cat30ColorL: '#a4bbe0'
-};
-
-/**
- * ## Usage-based colors
- *
- * @colorSet verbose
- */
-var usageColors = {
-  textColor: grays.gray30,
-  textGray: '#6b7785',
-  textDisabledColor: grays.gray80,
-  linkColor: accentColors.accentColorD10,
-  linkColorHover: accentColors.accentColor,
-  borderActiveColor: "rgba(0,0,0, 0.5)",
-  borderColor: grays.gray80,
-  borderColorWeak: grays.gray92,
-  borderColorStrong: grays.gray60,
-  focusColor: accentColors.accentColorD10,
-  backgroundColorHover: grays.gray96,
-  backgroundColor: grays.white,
-  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 statusColors = {
-  statusColorInfo: infoColors.infoColorL10,
-  statusColorInfoWeak: infoColors.infoColorL20,
-  statusColorInfoStrong: infoColors.infoColor,
-  statusColorNormal: successColors.successColorL10,
-  statusColorNormalWeak: successColors.successColorL20,
-  statusColorNormalStrong: successColors.successColor,
-  statusColorLow: warningColors.warningColorL10,
-  statusColorLowWeak: warningColors.warningColorL20,
-  statusColorLowStrong: warningColors.warningColor,
-  statusColorMedium: alertColors.alertColorL10,
-  statusColorMediumWeak: alertColors.alertColorL20,
-  statusColorMediumStrong: alertColors.alertColor,
-  statusColorHigh: errorColors.errorColorL10,
-  statusColorHighWeak: errorColors.errorColorL20,
-  statusColorHighStrong: errorColors.errorColor,
-  statusColorCritical: errorColors.errorColorD20,
-  statusColorCriticalWeak: errorColors.errorColorD30,
-  statusColorCriticalStrong: errorColors.errorColorD10
-};
-
-/**
- * ## Syntax colors
- * The following colors should only be used for syntax coloring of code.
- *
- * @colorSet verbose alphabetical
- */
-var syntaxColors = {
-  syntaxBlue: '#006aa3',
+  cat30ColorL: '#a4bbe0',
   syntaxBlueLight: '#006d9c',
-  syntaxBrown: '#905b04',
-  syntaxGray: '#5c6773',
-  syntaxGreen: '#2f612e',
   syntaxGreenLight: '#5ba383',
-  syntaxOrange: '#a44b0e',
-  syntaxPink: '#b9139e',
-  syntaxPurple: '#5317f2',
   syntaxPurpleLight: '#b19cd9',
-  syntaxRed: '#ca163d',
-  syntaxRedLight: '#af575a',
-  syntaxTeal: '#1a7060'
-};
-
-/**
- * ## Shadows
- *
- * @shadowSet
- */
-var shadows = {
-  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)'
-};
-
-/**
- * ## Interactive borders
- *
- * @borderSet
- */
-var bordersInteractive = {
-  activeBorder: "".concat(usageColors.borderActiveColor, " double")
-};
-
-/**
- * ## Backgrounds
- *
- * @colorSet verbose
- */
-var backgrounds = {
-  draggableBackground: "url('data:image/png;base64,".concat(dragHandle, "') 0 0 / 8px 8px repeat")
-};
-
-/**
- * ## Border
- *
- * @valueSet
- */
-var borders = {
-  border: "1px solid ".concat(usageColors.borderColor)
-};
-var sansFontFamily = "'Splunk Platform Sans', 'Proxima Nova', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
-/**
- * ## Font family
- *
- * @valueSet
- */
-var fontFamily = {
-  sansFontFamily: sansFontFamily,
-  serifFontFamily: "Georgia, 'Times New Roman', Times, serif",
-  monoFontFamily: "'Splunk Platform Mono', Inconsolata, Consolas, 'Droid Sans Mono', Monaco, 'Courier New', Courier, monospace",
-  fontFamily: sansFontFamily
-};
-
-/**
- * ## Font weights
- *
- * Based on [common weight name mappings](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping)
- *
- * @valueSet
- */
-var fontWeights = {
-  fontWeightLight: 300,
-  fontWeightNormal: 400,
-  fontWeightSemiBold: 500,
-  fontWeightBold: 700,
-  fontWeightHeavy: 800,
-  fontWeightExtraBold: 900
-};
-
-/**
- * ## Layers
- * If a variable does not suit your purpose, set a value relatively, such as zindexModal +1.
- *
- * @valueSet
- */
-var zindexes = {
-  zindexLayer: 1000,
-  zindexFixedNavbar: 1030,
-  zindexModalBackdrop: 1040,
-  zindexModal: 1050,
-  zindexPopover: 1060,
-  zindexToastMessages: 2000
+  syntaxRedLight: '#af575a'
 };
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, brandColors), grays), accentColors), errorColors), alertColors), warningColors), successColors), infoColors), categoricalColors), divergingColors), statusColors), syntaxColors), fontFamily), fontWeights), usageColors), backgrounds), shadows), bordersInteractive), borders), zindexes), {}, {
-  borderLightColor: grays.gray92 // @deprecated SUI-5981
-});
+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 _default = theme;
 exports["default"] = _default;

package/index.js

@@ -10,6 +10,7 @@ var _exportNames = {
   pick: true,
   pickVariant: true,
   SplunkThemeProvider: true,
+  unstable_splunkMagneticThemeCustomizer: true,
   useSplunkTheme: true,
   withSplunkTheme: true,
   variables: true
@@ -50,6 +51,12 @@ Object.defineProperty(exports, "SplunkThemeProvider", {
     return _SplunkThemeProvider["default"];
   }
 });
+Object.defineProperty(exports, "unstable_splunkMagneticThemeCustomizer", {
+  enumerable: true,
+  get: function get() {
+    return _splunkMagnetic["default"];
+  }
+});
 Object.defineProperty(exports, "useSplunkTheme", {
   enumerable: true,
   get: function get() {
@@ -74,6 +81,7 @@ var _mixins = _interopRequireDefault(require("./mixins"));
 var _pick = _interopRequireDefault(require("./pick"));
 var _pickVariant = _interopRequireDefault(require("./pickVariant"));
 var _SplunkThemeProvider = _interopRequireDefault(require("./SplunkThemeProvider"));
+var _splunkMagnetic = _interopRequireDefault(require("./splunk-magnetic"));
 var _useSplunkTheme = _interopRequireDefault(require("./useSplunkTheme"));
 var _withSplunkTheme = _interopRequireDefault(require("./withSplunkTheme"));
 var _variables = _interopRequireDefault(require("./variables"));