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

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.
@@ -347,9 +350,53 @@ declare const uiColors: {
      */
     focusColor: string;
 };
+/**
+ * #### 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 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;
+};
 /**
  * #### 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.
+ * 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 decoratively.
  *
  * @categoryColor
  */
@@ -563,6 +610,27 @@ declare const colors: {
      * 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 +735,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 +764,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 +935,11 @@ type NeutralColors = typeof neutralColors;
 type BackgroundColors = typeof backgroundColors;
 type ContentColors = typeof contentColors;
 type UIColors = typeof uiColors;
+type NotificationColors = typeof notificationColors;
+type SeverityColors = typeof severityColors;
 type StatusColors = typeof statusColors;
 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, StatusColors, SyntaxColors, BorderColors, Colors, };

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

@@ -4,6 +4,11 @@
  * @categoryValue
  */
 declare const deprecated: {
+    /**
+     * Use a more specific token based on the semantic use case:
+     * [`interactiveColorAccent`](#interactiveColorAccent), [`contentColorAccent`](#contentColorAccent), or [`focusColor`](#focusColor).
+     */
+    interactiveColorPrimary: string;
     /**
      * Use `statusColorNormal`, `accentColor`, or ...
      */
@@ -236,6 +241,11 @@ declare const deprecated: {
 type Deprecated = typeof deprecated;
 export type { Deprecated };
 declare const _default: {
+    /**
+     * Use a more specific token based on the semantic use case:
+     * [`interactiveColorAccent`](#interactiveColorAccent), [`contentColorAccent`](#contentColorAccent), or [`focusColor`](#focusColor).
+     */
+    interactiveColorPrimary: string;
     /**
      * Use `statusColorNormal`, `accentColor`, or ...
      */

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

@@ -1,5 +1,7 @@
 /**
  * #### Z Indexes
+ * Used to position elements in the z-axis.
+ * If a variable does not suit your purpose, set a value relatively, such as `zindexModal +1`.
  *
  * @categoryValue
  */

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

@@ -250,6 +250,7 @@ declare const designTokens: {
     zindexModal: number;
     zindexPopover: number;
     zindexToastMessages: number;
+    interactiveColorPrimary: string;
     accentColorPositive: string;
     accentColorWarning: string;
     accentColorAlert: string;
@@ -460,6 +461,27 @@ declare const designTokens: {
     statusColorCritical: string;
     statusColorCriticalWeak: string;
     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;
     focusColor: string;
     contentBackgroundColorNegativeWeak: string;
     contentColorLink: string;
@@ -486,6 +508,7 @@ declare const designTokens: {
     backgroundColorFloating: string;
     backgroundColorScrim: string;
     black: string;
+    neutral50: string;
     neutral100: string;
     neutral200: string;
     neutral300: string;
@@ -493,7 +516,6 @@ declare const designTokens: {
     neutral500: string;
     white: string;
     transparent: string;
-    interactiveColorPrimary: string;
     interactiveColorBorder: string;
     interactiveColorBorderActive: string;
     interactiveColorBorderHover: string;

package/types/design-tokens/spacing-sizing.d.ts

@@ -1,6 +1,11 @@
 /**
  * #### Spacing
  *
+ * Use these tokens for adding margin between elements or padding within containers.
+ *
+ * Just because a spacing token is equal to a pixel value you may need, it does not mean it's appropriate to
+ * use the spacing variables.
+ *
  * @categorySpacing
  */
 declare const spacing: {

package/types/enterprise/dark.d.ts

@@ -1,5 +1,6 @@
 declare const theme: {
     draggableBackground: string;
+    interactiveColorPrimary: string;
     accentColorPositive: string;
     accentColorWarning: string;
     accentColorAlert: string;
@@ -14,7 +15,6 @@ declare const theme: {
     border: string;
     borderDark: string;
     borderLight: string;
-    interactiveColorPrimary: string;
     interactiveColorBorder: string;
     interactiveColorBorderActive: string;
     interactiveColorBorderHover: string;
@@ -60,6 +60,7 @@ declare const theme: {
     syntaxRed: string;
     syntaxTeal: string;
     black: string;
+    neutral50: string;
     neutral100: string;
     neutral200: string;
     neutral300: string;
@@ -93,6 +94,27 @@ declare const theme: {
     statusColorCritical: string;
     statusColorCriticalWeak: string;
     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;
     actionColorBackgroundPrimary: string;
     actionColorBackgroundPrimaryActive: string;
     actionColorBackgroundPrimaryDisabled: string;
@@ -107,12 +129,7 @@ declare const theme: {
     actionColorBackgroundSubtleHover: string;
     actionColorBackgroundDestructive: string;
     actionColorBackgroundDestructiveActive: string;
-    actionColorBackgroundDestructiveDisabled: string; /**
-     * ## Syntax colors
-     * Syntax colors are used only for code blocks.
-     *
-     * @colorSet verbose alphabetical
-     */
+    actionColorBackgroundDestructiveDisabled: string;
     actionColorBackgroundDestructiveHover: string;
     actionColorBackgroundDestructiveSecondary: string;
     actionColorBackgroundDestructiveSecondaryActive: string;
@@ -295,12 +312,7 @@ declare const theme: {
     sequential6D4: string;
     sequential6D5: string;
     sequential6D6: string;
-    sequential6D7: string; /**
-     * ## Background colors
-     * Background colors should be used only for backgrounds of higher level sections & containers of a UI.
-     *
-     * @colorSet verbose
-     */
+    sequential6D7: string;
     sequential5L1: string;
     sequential5L2: string;
     sequential5L3: string;

package/types/enterprise/dataViz.d.ts

@@ -1,9 +1,4 @@
 import { Categorical, DataViz, Divergent, HighLow, Sequential, StaticColors } from '../design-tokens/dataViz';
-/**
- * #### Static colors
- *
- * @colorSet verbose
- */
 declare const staticColors: StaticColors;
 declare const categorical: Categorical;
 declare const divergent: Divergent;

package/types/enterprise/light.d.ts

@@ -1,4 +1,5 @@
 declare const theme: {
+    interactiveColorPrimary: string;
     accentColorPositive: string;
     accentColorWarning: string;
     accentColorAlert: string;
@@ -293,12 +294,7 @@ declare const theme: {
     divergent1L3: string;
     divergent1L4: string;
     divergent1L5: string;
-    divergent1L6: string; /**
-     * ## 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
-     */
+    divergent1L6: string;
     divergent1L7: string;
     divergent1D1: string;
     divergent1D2: string;
@@ -361,7 +357,6 @@ declare const theme: {
     zindexModal: number;
     zindexPopover: number;
     zindexToastMessages: number;
-    interactiveColorPrimary: string;
     interactiveColorBorder: string;
     interactiveColorBorderActive: string;
     interactiveColorBorderHover: string;
@@ -443,19 +438,35 @@ declare const theme: {
     statusColorMedium: string;
     statusColorMediumWeak: string;
     statusColorMediumStrong: string;
-    /**
-     * ## Layers
-     * If a variable does not suit your purpose, set a value relatively, such as zindexModal +1.
-     *
-     * @valueSet
-     */
     statusColorHigh: string;
     statusColorHighWeak: string;
     statusColorHighStrong: string;
     statusColorCritical: string;
     statusColorCriticalWeak: string;
     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;
     black: string;
+    neutral50: string;
     neutral100: string;
     neutral200: string;
     neutral300: string;

package/types/mixins/utilityMixins.d.ts

@@ -159,10 +159,10 @@ type ColorParameter<T extends AnyTheme> = string | TemplateFunction<T>;
  *  ```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
@@ -179,10 +179,10 @@ export declare function overlayColors<T extends AnyTheme>(c1: ColorParameter<T>,
  *  ```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/types/prisma/comfortable.d.ts

@@ -1,11 +1,4 @@
 import { SpacingSizing } from '../design-tokens';
-/**
- * ## Measures
- * Spacing is used for margin on any element or padding on containers, but can be used for other
- * properties that position elements.
- *
- * @valueSet
- */
 declare const measures: SpacingSizing;
 type Comfortable = typeof measures;
 export default measures;

package/types/prisma/compact.d.ts

@@ -1,15 +1,4 @@
 import { SpacingSizing } from '../design-tokens';
-/**
- * ## 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
- */
 declare const measures: SpacingSizing;
 type Compact = typeof measures;
 export default measures;

package/types/prisma/dark.d.ts

@@ -1,4 +1,5 @@
 declare const theme: {
+    interactiveColorPrimary: string;
     accentColorPositive: string;
     accentColorWarning: string;
     accentColorAlert: string;
@@ -12,7 +13,6 @@ declare const theme: {
     syntaxPurple: string;
     syntaxRed: string;
     syntaxTeal: string;
-    interactiveColorPrimary: string;
     interactiveColorBorder: string;
     interactiveColorBorderActive: string;
     interactiveColorBorderHover: string;
@@ -27,6 +27,7 @@ declare const theme: {
     interactiveColorAccentError: string;
     interactiveColorAccentErrorStrong: string;
     black: string;
+    neutral50: string;
     neutral100: string;
     neutral200: string;
     neutral300: string;
@@ -83,12 +84,28 @@ declare const theme: {
     statusColorCritical: string;
     statusColorCriticalWeak: string;
     statusColorCriticalStrong: string;
-    actionColorBackgroundPrimary: string; /**
-     * ## Background colors
-     * Background colors should be used only for backgrounds of higher level sections & containers of a UI.
-     *
-     * @colorSet verbose
-     */
+    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;
+    actionColorBackgroundPrimary: string;
     actionColorBackgroundPrimaryActive: string;
     actionColorBackgroundPrimaryDisabled: string;
     actionColorBackgroundPrimaryHover: string;

package/types/prisma/dataViz.d.ts

@@ -1,9 +1,4 @@
 import { Categorical, DataViz, Divergent, HighLow, Sequential, StaticColors } from '../design-tokens/dataViz';
-/**
- * #### Static colors
- *
- * @colorSet verbose
- */
 declare const staticColors: StaticColors;
 declare const categorical: Categorical;
 declare const divergent: Divergent;

package/types/prisma/light.d.ts

@@ -1,4 +1,5 @@
 declare const theme: {
+    interactiveColorPrimary: string;
     accentColorPositive: string;
     accentColorWarning: string;
     accentColorAlert: string;
@@ -12,7 +13,6 @@ declare const theme: {
     syntaxPurple: string;
     syntaxRed: string;
     syntaxTeal: string;
-    interactiveColorPrimary: string;
     interactiveColorBorder: string;
     interactiveColorBorderActive: string;
     interactiveColorBorderHover: string;
@@ -27,6 +27,7 @@ declare const theme: {
     interactiveColorAccentError: string;
     interactiveColorAccentErrorStrong: string;
     black: string;
+    neutral50: string;
     neutral100: string;
     neutral200: string;
     neutral300: string;
@@ -83,12 +84,28 @@ declare const theme: {
     statusColorCritical: string;
     statusColorCriticalWeak: string;
     statusColorCriticalStrong: string;
-    actionColorBackgroundPrimary: string; /**
-     * ## Background colors
-     * Background colors should be used only for backgrounds of higher level sections & containers of a UI.
-     *
-     * @colorSet verbose
-     */
+    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;
+    actionColorBackgroundPrimary: string;
     actionColorBackgroundPrimaryActive: string;
     actionColorBackgroundPrimaryDisabled: string;
     actionColorBackgroundPrimaryHover: string;