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

package/prisma/light.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: '#ffffff',
   backgroundColorSection: '#ffffff',
@@ -29,26 +22,11 @@ var backgroundColors = {
   backgroundColorDialog: '#ffffff',
   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.
- *
- * @colorSet verbose
- */
-
 var contentColors = {
   contentBackgroundColorNegativeWeak: 'rgba(235, 70, 81, 0.20)',
   contentColorAccent: '#0264d7',
@@ -67,14 +45,6 @@ var contentColors = {
   contentColorWarning: '#c97705',
   contentColorLink: '#0264d7'
 };
-
-/**
- * ## Action colors
- * Action colors should be used for buttons.
- *
- * @colorSet verbose
- */
-
 var actionColors = {
   actionColorBackgroundPrimary: '#0264d7',
   actionColorBackgroundPrimaryActive: '#024ba2',
@@ -105,18 +75,7 @@ var actionColors = {
   actionColorBorderDestructiveSecondaryDisabled: '#ff9999',
   actionColorBorderDestructiveSecondaryHover: '#a30000'
 };
-
-/**
- * ## Interactive colors
- * 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.
- *
- * @colorSet verbose
- */
-
 var interactiveColors = {
-  interactiveColorPrimary: '#0264d7',
   interactiveColorBorder: 'rgba(0, 0, 0, 0.48)',
   interactiveColorBorderActive: 'rgba(0, 0, 0, 0.5)',
   interactiveColorBorderHover: 'rgba(0, 0, 0, 0.6)',
@@ -125,22 +84,15 @@ var interactiveColors = {
   interactiveColorOverlayHover: 'rgba(0, 0, 0, 0.03)',
   interactiveColorOverlayActive: 'rgba(0, 0, 0, 0.07)',
   interactiveColorOverlayDrag: 'rgba(2, 100, 215, 0.16)',
-  interactiveColorBackground: '#f9f9f9',
-  interactiveColorBackgroundDisabled: '#ffffff',
+  interactiveColorBackground: 'transparent',
+  interactiveColorBackgroundDisabled: 'transparent',
   interactiveColorAccent: '#0264d7',
   interactiveColorAccentError: '#e00000',
   interactiveColorAccentErrorStrong: '#a01d26'
 };
-
-/**
- * ## 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: '#f2f2f2',
   neutral100: '#f0f0f0',
   neutral200: '#e6e6e6',
   neutral300: '#dddddd',
@@ -149,53 +101,37 @@ var neutralColors = {
   black: '#000000',
   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: '#006be5',
-  statusColorInfoWeak: (0, _tinycolor["default"])('#006be5').lighten(10).toHexString(),
-  statusColorInfoStrong: (0, _tinycolor["default"])('#006be5').darken(10).toHexString(),
-  statusColorNormal: '#407a06',
-  statusColorNormalWeak: (0, _tinycolor["default"])('#407a06').lighten(10).toHexString(),
-  statusColorNormalStrong: (0, _tinycolor["default"])('#407a06').darken(10).toHexString(),
-  statusColorLow: '#155a4e',
-  statusColorLowWeak: (0, _tinycolor["default"])('#155a4e').lighten(10).toHexString(),
-  statusColorLowStrong: (0, _tinycolor["default"])('#155a4e').darken(10).toHexString(),
-  statusColorMedium: '#c97705',
-  statusColorMediumWeak: (0, _tinycolor["default"])('#c97705').lighten(10).toHexString(),
-  statusColorMediumStrong: (0, _tinycolor["default"])('#c97705').darken(10).toHexString(),
-  statusColorHigh: '#e00000',
-  statusColorHighWeak: (0, _tinycolor["default"])('#e00000').lighten(10).toHexString(),
-  statusColorHighStrong: (0, _tinycolor["default"])('#e00000').darken(10).toHexString(),
-  statusColorCritical: '#9e1534',
-  statusColorCriticalWeak: (0, _tinycolor["default"])('#9e1534').lighten(10).toHexString(),
-  statusColorCriticalStrong: (0, _tinycolor["default"])('#9e1534').darken(10).toHexString()
+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'
 };
-
-/**
- * ## 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
- * Syntax colors are used only for code blocks.
- *
- * @colorSet verbose alphabetical
- */
 var syntaxColors = {
   syntaxBlue: '#0f7594',
   syntaxBrown: '#9f6404',
@@ -208,11 +144,33 @@ var syntaxColors = {
   syntaxTeal: '#1d7c6b'
 };
 var deprecated = {
-  accentColorPositive: statusColors.statusColorNormal,
-  accentColorWarning: statusColors.statusColorMedium,
+  accentColorPositive: '#407a06',
+  // statusColorNormal
+  accentColorWarning: '#c97705',
+  // statusColorMedium
   accentColorAlert: '#c6400d',
-  accentColorNegative: statusColors.statusColorHigh
+  accentColorNegative: '#e00000',
+  // statusColorHigh
+  interactiveColorPrimary: '#0264d7',
+  statusColorInfo: '#006be5',
+  statusColorInfoWeak: (0, _tinycolor["default"])('#006be5').lighten(10).toHexString(),
+  statusColorInfoStrong: (0, _tinycolor["default"])('#006be5').darken(10).toHexString(),
+  statusColorNormal: '#407a06',
+  statusColorNormalWeak: (0, _tinycolor["default"])('#407a06').lighten(10).toHexString(),
+  statusColorNormalStrong: (0, _tinycolor["default"])('#407a06').darken(10).toHexString(),
+  statusColorLow: '#155a4e',
+  statusColorLowWeak: (0, _tinycolor["default"])('#155a4e').lighten(10).toHexString(),
+  statusColorLowStrong: (0, _tinycolor["default"])('#155a4e').darken(10).toHexString(),
+  statusColorMedium: '#c97705',
+  statusColorMediumWeak: (0, _tinycolor["default"])('#c97705').lighten(10).toHexString(),
+  statusColorMediumStrong: (0, _tinycolor["default"])('#c97705').darken(10).toHexString(),
+  statusColorHigh: '#e00000',
+  statusColorHighWeak: (0, _tinycolor["default"])('#e00000').lighten(10).toHexString(),
+  statusColorHighStrong: (0, _tinycolor["default"])('#e00000').darken(10).toHexString(),
+  statusColorCritical: '#9e1534',
+  statusColorCriticalWeak: (0, _tinycolor["default"])('#9e1534').lighten(10).toHexString(),
+  statusColorCriticalStrong: (0, _tinycolor["default"])('#9e1534').darken(10).toHexString()
 };
-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({}, actionColors), notificationColors), severityColors), elevationShadows), backgroundColors), borderColors), contentColors), neutralColors), interactiveColors), syntaxColors), deprecated);
 var _default = theme;
 exports["default"] = _default;

package/splunk-magnetic/index.js

@@ -129,7 +129,7 @@ var splunkMagneticThemeCustomizer = function splunkMagneticThemeCustomizer(curre
     backgroundColorDialog: pickMagnetic('control-bg-weak-default'),
     backgroundColorInverted: pickMagnetic('inverse-bg-default'),
     backgroundColorPage: pickMagnetic('base-bg-default'),
-    backgroundColorNavigation: currentTheme.colorScheme === 'light' ? "linear-gradient(90deg, ".concat(_magneticTokensLight["default"]['inverse-bg-gradient-start'], ", ").concat(_magneticTokensLight["default"]['inverse-bg-gradient-end']) : "linear-gradient(90deg, ".concat(_magneticTokensDark["default"]['inverse-bg-gradient-start'], ", ").concat(_magneticTokensDark["default"]['inverse-bg-gradient-end']),
+    backgroundColorNavigation: currentTheme.colorScheme === 'light' ? "linear-gradient(90deg, ".concat(_magneticTokensLight["default"]['inverse-bg-gradient-start'], ", ").concat(_magneticTokensLight["default"]['inverse-bg-gradient-end'], ")") : "linear-gradient(90deg, ".concat(_magneticTokensDark["default"]['inverse-bg-gradient-start'], ", ").concat(_magneticTokensDark["default"]['inverse-bg-gradient-end'], ")"),
     backgroundColorPopup: pickMagnetic('base-bg-weak-default'),
     backgroundColorScrim: pickMagnetic('control-bg-weak-default'),
     backgroundColorSidebar: pickMagnetic('base-bg-default'),
@@ -137,6 +137,7 @@ var splunkMagneticThemeCustomizer = function splunkMagneticThemeCustomizer(curre
     borderColor: pickMagnetic('base-border-default'),
     borderColorStrong: pickMagnetic('base-border-strong-default'),
     borderColorWeak: pickMagnetic('base-border-weak-default'),
+    borderRadius: '6px',
     contentBackgroundColorNegativeWeak: pickMagnetic('negative-bg-strong-default'),
     contentColorActive: pickMagnetic('base-text-default'),
     contentColorDefault: pickMagnetic('base-text-default'),
@@ -147,6 +148,7 @@ var splunkMagneticThemeCustomizer = function splunkMagneticThemeCustomizer(curre
     embossShadow: '0px 2px 5px 0px rgba(0, 0, 0, 0.05)',
     focusColor: pickMagnetic('control-border-focus'),
     focusShadow: currentTheme.colorScheme === 'light' ? "0 0 0 2px ".concat(_magneticTokensLight["default"]['interact-bg-weak-active'], ",0 0 0 4px ").concat(_magneticTokensLight["default"]['control-border-focus']) : "0 0 0 2px ".concat(_magneticTokensDark["default"]['interact-bg-weak-active'], ",0 0 0 4px ").concat(_magneticTokensDark["default"]['control-border-focus']),
+    inputBorderWidth: '2px',
     interactiveColorAccent: pickMagnetic('control-bg-strong-default'),
     interactiveColorAccentError: pickMagnetic('negative-bg-medium-default'),
     interactiveColorAccentErrorStrong: pickMagnetic('negative-bg-strong-default'),

package/types/design-tokens/colors.d.ts

@@ -1,7 +1,7 @@
 /**
  * #### Action colors
  *
- * Action colors are used **exclusively** for Button borders and backgrounds.
+ * Action colors are used **exclusively** for styling Buttons borders and backgrounds.
  * They define interaction states for primary, secondary, subtle, and destructive buttons.
  *
  * @categoryColor
@@ -125,13 +125,12 @@ declare const actionColors: {
  *
  * Interactive colors should be used **exclusively** for styling Data Entry components: Input, Select, etc.
  *
+ * "Overlay" colors are intended to be placed over the default background color, such as `interactiveColorAccent`.
+ * If the default background color is not transparent, the `blend` mixin can be used to create a new color that combines the two.
+ *
  * @categoryColor
  */
 declare const interactiveColors: {
-    /**
-     * Primary color for interactive elements in Data entry components.
-     */
-    interactiveColorPrimary: string;
     /**
      * Default border color for Data entry components.
      */
@@ -201,6 +200,10 @@ declare const neutralColors: {
     /**
      * Least visually emphasized. Do not use this as the background for Data Entry components, does not pass 3:1 graphical contrast.
      */
+    neutral50: string;
+    /**
+     * Do not use this as the background for Data Entry components, does not pass 3:1 graphical contrast.
+     */
     neutral100: string;
     /**
      * Not for text, does not pass 3:1 graphical contrast in light & dark color schemes.
@@ -348,84 +351,47 @@ declare const uiColors: {
     focusColor: string;
 };
 /**
- * #### Status colors
- * * Use status colors to convey informative, positive, caution or negative content status. Weak variants do not meet graphical or text contrast and should only be used as decorative.
+ * #### Notification colors
+ *
+ * Use notifications colors to communicate messages and guidance directly to users.
+ * For example in Message Bars, Toasts, or other notification components to set tone and urgency in a conversational context.
+ *
+ * Weak variants do not meet graphical or text contrast and should only be used decoratively.
  *
  * @categoryColor
  */
-declare const statusColors: {
-    /**
-     * Default color for informational messages and notifications.
-     */
-    statusColorInfo: string;
-    /**
-     * Weaker, less prominent informational color, does not pass 3:1 graphical or 4.5:1 text contrast.
-     */
-    statusColorInfoWeak: string;
-    /**
-     * Brighter, more prominent informational color.
-     */
-    statusColorInfoStrong: string;
-    /**
-     * Default color for neutral or standard status messages.
-     */
-    statusColorNormal: string;
-    /**
-     * Weaker, less prominent normal color, does not pass 3:1 graphical or 4.5:1 text contrast.
-     */
-    statusColorNormalWeak: string;
-    /**
-     * Brighter, more prominent normal color.
-     */
-    statusColorNormalStrong: string;
-    /**
-     * Default color for low-priority status messages.
-     */
-    statusColorLow: string;
-    /**
-     * Weaker, less prominent low-priority color, does not pass 3:1 graphical or 4.5:1 text contrast.
-     */
-    statusColorLowWeak: string;
-    /**
-     * Brighter, more prominent low-priority color.
-     */
-    statusColorLowStrong: string;
-    /**
-     * Default color for medium-priority status messages.
-     */
-    statusColorMedium: string;
-    /**
-     * Weaker, less prominent medium-priority color, does not pass 3:1 graphical or 4.5:1 text contrast.
-     */
-    statusColorMediumWeak: string;
-    /**
-     * Brighter, more prominent medium-priority color.
-     */
-    statusColorMediumStrong: string;
-    /**
-     * Default color for high-priority status messages.
-     */
-    statusColorHigh: string;
-    /**
-     * Weaker, less prominent high-priority color, does not pass 3:1 graphical or 4.5:1 text contrast.
-     */
-    statusColorHighWeak: string;
-    /**
-     * Brighter, more prominent high-priority color.
-     */
-    statusColorHighStrong: string;
-    /**
-     * Default color for critical alerts or urgent messages.
-     */
-    statusColorCritical: string;
-    /**
-     * Weaker, less prominent critical color, does not pass 3:1 graphical or 4.5:1 text contrast.
-     */
-    statusColorCriticalWeak: string;
-    /**
-     * Brighter, more prominent critical color.
-     */
-    statusColorCriticalStrong: string;
+declare const notificationColors: {
+    notificationColorInfoWeak: string;
+    notificationColorInfo: string;
+    notificationColorInfoStrong: string;
+    notificationColorPositiveWeak: string;
+    notificationColorPositive: string;
+    notificationColorPositiveStrong: string;
+    notificationColorCautionWeak: string;
+    notificationColorCaution: string;
+    notificationColorCautionStrong: string;
+    notificationColorNegativeWeak: string;
+    notificationColorNegative: string;
+    notificationColorNegativeStrong: string;
+};
+/**
+ * #### Severity colors
+ *
+ * Use severity colors for icons, indicators, and visual signals to help users quickly scan for criticality, risk, or state without relying only on text.
+ * Severity colors should be used to aid identifying the semantic meaning of an element; not used to communicate tone.
+ *
+ * @categoryColor
+ */
+declare const severityColors: {
+    severityColorCustom: string;
+    severityColorUnknown: string;
+    severityColorInfo: string;
+    severityColorNormal: string;
+    severityColorNotice: string;
+    severityColorWarning: string;
+    severityColorAlert: string;
+    severityColorCritical: string;
+    severityColorEmergency: string;
 };
 /**
  * #### Syntax colors
@@ -491,78 +457,27 @@ declare const colors: {
     syntaxPurple: string;
     syntaxRed: string;
     syntaxTeal: string;
-    /**
-     * Default color for informational messages and notifications.
-     */
-    statusColorInfo: string;
-    /**
-     * Weaker, less prominent informational color, does not pass 3:1 graphical or 4.5:1 text contrast.
-     */
-    statusColorInfoWeak: string;
-    /**
-     * Brighter, more prominent informational color.
-     */
-    statusColorInfoStrong: string;
-    /**
-     * Default color for neutral or standard status messages.
-     */
-    statusColorNormal: string;
-    /**
-     * Weaker, less prominent normal color, does not pass 3:1 graphical or 4.5:1 text contrast.
-     */
-    statusColorNormalWeak: string;
-    /**
-     * Brighter, more prominent normal color.
-     */
-    statusColorNormalStrong: string;
-    /**
-     * Default color for low-priority status messages.
-     */
-    statusColorLow: string;
-    /**
-     * Weaker, less prominent low-priority color, does not pass 3:1 graphical or 4.5:1 text contrast.
-     */
-    statusColorLowWeak: string;
-    /**
-     * Brighter, more prominent low-priority color.
-     */
-    statusColorLowStrong: string;
-    /**
-     * Default color for medium-priority status messages.
-     */
-    statusColorMedium: string;
-    /**
-     * Weaker, less prominent medium-priority color, does not pass 3:1 graphical or 4.5:1 text contrast.
-     */
-    statusColorMediumWeak: string;
-    /**
-     * Brighter, more prominent medium-priority color.
-     */
-    statusColorMediumStrong: string;
-    /**
-     * Default color for high-priority status messages.
-     */
-    statusColorHigh: string;
-    /**
-     * Weaker, less prominent high-priority color, does not pass 3:1 graphical or 4.5:1 text contrast.
-     */
-    statusColorHighWeak: string;
-    /**
-     * Brighter, more prominent high-priority color.
-     */
-    statusColorHighStrong: string;
-    /**
-     * Default color for critical alerts or urgent messages.
-     */
-    statusColorCritical: string;
-    /**
-     * Weaker, less prominent critical color, does not pass 3:1 graphical or 4.5:1 text contrast.
-     */
-    statusColorCriticalWeak: string;
-    /**
-     * Brighter, more prominent critical color.
-     */
-    statusColorCriticalStrong: string;
+    severityColorCustom: string;
+    severityColorUnknown: string;
+    severityColorInfo: string;
+    severityColorNormal: string;
+    severityColorNotice: string;
+    severityColorWarning: string;
+    severityColorAlert: string;
+    severityColorCritical: string;
+    severityColorEmergency: string;
+    notificationColorInfoWeak: string;
+    notificationColorInfo: string;
+    notificationColorInfoStrong: string;
+    notificationColorPositiveWeak: string;
+    notificationColorPositive: string;
+    notificationColorPositiveStrong: string;
+    notificationColorCautionWeak: string;
+    notificationColorCaution: string;
+    notificationColorCautionStrong: string;
+    notificationColorNegativeWeak: string;
+    notificationColorNegative: string;
+    notificationColorNegativeStrong: string;
     /**
      * Visual focus ring color used for focus box-shadow. Should not be directly applied to UI elements.
      */
@@ -667,6 +582,10 @@ declare const colors: {
     /**
      * Least visually emphasized. Do not use this as the background for Data Entry components, does not pass 3:1 graphical contrast.
      */
+    neutral50: string;
+    /**
+     * Do not use this as the background for Data Entry components, does not pass 3:1 graphical contrast.
+     */
     neutral100: string;
     /**
      * Not for text, does not pass 3:1 graphical contrast in light & dark color schemes.
@@ -692,10 +611,6 @@ declare const colors: {
      * Transparent background color.
      */
     transparent: string;
-    /**
-     * Primary color for interactive elements in Data entry components.
-     */
-    interactiveColorPrimary: string;
     /**
      * Default border color for Data entry components.
      */
@@ -867,9 +782,10 @@ type NeutralColors = typeof neutralColors;
 type BackgroundColors = typeof backgroundColors;
 type ContentColors = typeof contentColors;
 type UIColors = typeof uiColors;
-type StatusColors = typeof statusColors;
+type NotificationColors = typeof notificationColors;
+type SeverityColors = typeof severityColors;
 type SyntaxColors = typeof syntaxColors;
 type BorderColors = typeof borderColors;
 type Colors = typeof colors;
 export default colors;
-export type { ActionColors, InteractiveColors, NeutralColors, BackgroundColors, ContentColors, UIColors, StatusColors, SyntaxColors, BorderColors, Colors, };
+export type { ActionColors, InteractiveColors, NeutralColors, BackgroundColors, ContentColors, UIColors, NotificationColors, SeverityColors, SyntaxColors, BorderColors, Colors, };