@splunk/themes 0.23.0 → 1.0.0-beta.3

package/CHANGELOG.md

@@ -70,6 +70,9 @@ Bug Fixes:
   * `title4` it now larger than `title6` in the Enterprise compact theme.
 * `typography`'s mixin's `title5` color has been changed to `active` in prisma theme to match the Splunk Design System.
 
+API Changes:
+* `list-style` has been removed for `mixins.reset` (SUI-5622).
+
 0.16.1 - June 6, 2023
 ----------
 API Changes:

package/CHANGELOG.v1.md

@@ -0,0 +1,83 @@
+Change Log
+============
+
+1.0.0-beta.3 - April 2, 2025
+----------
+New Features:
+* New `neutral50` variable (SUI-7384).
+* New `notificationColor` variables (SUI-7303).
+* New `severityColor` variables (SUI-7303).
+
+Bug Fixes:
+* Updates `interactiveColorBackground` and `interactiveColorBackgroundDisabled` to be transparent in all themes (SUI-7347).
+* The `@types/react` peer dependency is now correctly set to `^18.2.0` (SUI-7548).
+
+Deprecations:
+* `interactiveColorPrimary` has been deprecated (SUI-3568).
+
+1.0.0-beta.2 - March 5, 2025
+----------
+New Features:
+* New `contentColorLink` variable (SUI-3568).
+* The data-viz variables are supported in all themes (SUI-3568).
+
+Deprecations:
+* `linkColor` and `linkColorHover` have been deprecated. Instead use `contentColorLink` (SUI-3568).
+
+API Changes:
+* `accentColor` variable has been removed from Prisma themes (SUI-3568).
+* `borderColor`, `borderColorStrong`, and `borderColorWeak` have had alpha removed from their values (SUI-7340).
+* `embossShadow`, `overlayShadow`, `dragShadow`, and `modalShadow` variables have been updated in Enterprise themes to match Prisma (SUI-7334).
+* Enterprise only tokens have been deprecated: `brandColor*`, `gray*`,  `accentColor*`, `errorColor*`, `alertColor*`, `warningColor*`, `successColor*`, `infoColor*`, `diverging*Color*`, and `cat*Color*`.
+
+1.0.0-beta.1 - February 20, 2025
+----------
+New Features:
+* Enterprise themes now support the `interactiveColorOverlayHover` Prisma alias (SUI-6289).
+* All themes now support color variable `interactiveColorAccent` (SUI-6304).
+* All themes now support color variable `interactiveColorAccentError` (SUI-6395).
+* Enterprise themes now support the `interactiveColorOverlaySelected` Prisma alias.
+* All themes now support color variable `contentBackgroundColorNegativeWeak` (SUI-6395).
+* Enterprise themes now support color variable `contentColorInverted` (SUI-6530).
+* All themes now support color variable `contentColorNegative` (SUI-6408).
+* Prisma themes now support color variable `accentColor` (SUI-6657).
+* All themes now support new `actionColor` tokens (SUI-6616).
+* All themes now support color variable `contentColorAccent` (SUI-6711).
+* All themes now support color variables `contentColorInfo`, `contentColorPositive`, and `contentColorWarning` (SUI-6830).
+* Enterprise themes now support the `interactiveColorOverlayActive` (SUI-6870).
+* All themes now support color variable `interactiveColorAccentErrorStrong` (SUI-6869).
+* All themes now support color variable `interactiveColorBackground` (SUI-6983).
+* New `layout` mixin (SUI-6678).
+* Enterprise themes now support color variable `backgroundColorSidebar` (SUI-7102).
+
+Deprecations:
+* Enterprise theme tokens `textColor`, `textGray`, and `textDisabledColor` have been deprecated (SUI-6160).
+* Enterprise theme token `backgroundColor` has been deprecated (SUI-6656).
+* `accentColorPositive`, `accentColorWarning`, `accentColorAlert`, and `accentColorNegative` have been deprecated (SUI-3658).
+
+API Changes:
+* `react` and `react-dom` peer dependencies are now `"^16.8.0 || ^17.0.0 || ^18.0.0"`.
+* `px` sizing for `variables.fontSize*` and `mixins.typography` have been replaced with `rem` sizing (SUI-5509).
+  * This results in minor differences in text sizing; but is required to meet WCAG 1.4.4 and WCAG 1.4.10.
+* `typography` `size` param no longer supports `56` `36` `32` and `10`.
+* `variables.lineHeight` is no longer defined in `px` to improve readability of font at all scales (SUI-5509).
+* `typography`'s mixin for `Title5`'s has been updated to text color `variables.contentColorActive` in Prisma theme (SUI-5685).
+  * This change affects `Heading` and `Typography` components.
+* The font size and line height no longer change with density. The default font-size in Enterprise Compact now is 14px (SUI-5508).
+* `typography`'s `line-height`, `size`, and `font-weight` values have been consolidated between Enterprise and Prisma themes (SUI-5684).
+* `typography`'s `withReset` prop has been removed (SUI-5686).
+* `variables.activeBorder` has been removed (SUI-6362).
+* Spacing variables in Enterprise themes are now aligned with Prisma themes (SUI-6530).
+  * `spacingXSmall`, `spacingSmall`, `spacingMedium`, `spacingLarge`, `spacingXLarge`, `spacingXXLarge`, `spacingXXXLarge` have been updated to match Prisma themes.
+  * `spacingQuarter`, `spacingHalf`, and `spacing` are deprecated and should not be used.
+* Enterprise theme `statusColor*` variables have been shifted to align brightness values with Prisma themes (SUI-6348).
+* Enterprise theme's `focusShadow` variable has been updated to match Prisma (SUI-6481).
+* Enterprise theme's `focusShadowInset` variable has been updated to match Prisma (SUI-6487).
+* `typography` supports a new scale for line-height that uses unitless values (SUI-6593).
+* `typography` no longer support pixel values for line-height (SUI-6593).
+* `typography` no longer supports the `title7` and `footnote` variants (SUI-6593).
+* `typography` parameters now supports `family: "title"`.
+* `fontSizeXLarge` size has been changed (SUI-6593).
+* Enterprise themes support the `contentColorActive`, `contentColorDefault`, `contentColorDisabled`, `contentColorInverted`, and `contentColorMuted` tokens (SUI-6160).
+
+----------

package/design-tokens/colors.js

@@ -0,0 +1,544 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+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); }
+/**
+ * #### Action colors
+ *
+ * Action colors are used **exclusively** for styling Buttons borders and backgrounds.
+ * They define interaction states for primary, secondary, subtle, and destructive buttons.
+ *
+ * @categoryColor
+ */
+var actionColors = {
+  /**
+   * Default background for Primary Buttons.
+   */
+  actionColorBackgroundPrimary: '',
+  /**
+   * Active (pressed) background for Primary Buttons.
+   */
+  actionColorBackgroundPrimaryActive: '',
+  /**
+   * Disabled background for Primary Buttons.
+   */
+  actionColorBackgroundPrimaryDisabled: '',
+  /**
+   * Hover background for Primary Buttons.
+   */
+  actionColorBackgroundPrimaryHover: '',
+  /**
+   * Default background for Secondary Buttons.
+   */
+  actionColorBackgroundSecondary: '',
+  /**
+   * Active (pressed) background for Secondary Buttons.
+   */
+  actionColorBackgroundSecondaryActive: '',
+  /**
+   * Disabled background for Secondary Buttons.
+   */
+  actionColorBackgroundSecondaryDisabled: '',
+  /**
+   * Hover background for Secondary Buttons.
+   */
+  actionColorBackgroundSecondaryHover: '',
+  /**
+   * Default background for Subtle Buttons.
+   */
+  actionColorBackgroundSubtle: '',
+  /**
+   * Active (pressed) background for Subtle Buttons.
+   */
+  actionColorBackgroundSubtleActive: '',
+  /**
+   * Disabled background for Subtle Buttons.
+   */
+  actionColorBackgroundSubtleDisabled: '',
+  /**
+   * Hover background for Subtle Buttons.
+   */
+  actionColorBackgroundSubtleHover: '',
+  /**
+   * Default background for Destructive Buttons.
+   */
+  actionColorBackgroundDestructive: '',
+  /**
+   * Active (pressed) background for Destructive Buttons.
+   */
+  actionColorBackgroundDestructiveActive: '',
+  /**
+   * Disabled background for Destructive Buttons.
+   */
+  actionColorBackgroundDestructiveDisabled: '',
+  /**
+   * Hover background for Destructive Buttons.
+   */
+  actionColorBackgroundDestructiveHover: '',
+  /**
+   * Default background for Destructive Secondary Buttons.
+   */
+  actionColorBackgroundDestructiveSecondary: '',
+  /**
+   * Active (pressed) background for Destructive Secondary Buttons
+   */
+  actionColorBackgroundDestructiveSecondaryActive: '',
+  /**
+   * Disabled background for Destructive Secondary Buttons.
+   */
+  actionColorBackgroundDestructiveSecondaryDisabled: '',
+  /**
+   * Hover background for Destructive Secondary Buttons.
+   */
+  actionColorBackgroundDestructiveSecondaryHover: '',
+  /**
+   * Default border color for Secondary Buttons.
+   */
+  actionColorBorderSecondary: '',
+  /**
+   * Active (pressed) border color for Secondary Buttons.
+   */
+  actionColorBorderSecondaryActive: '',
+  /**
+   * Disabled border color for Secondary Buttons.
+   */
+  actionColorBorderSecondaryDisabled: '',
+  /**
+   * Hover border color for Secondary Buttons.
+   */
+  actionColorBorderSecondaryHover: '',
+  /**
+   * Default border color for Destructive Secondary Buttons.
+   */
+  actionColorBorderDestructiveSecondary: '',
+  /**
+   * Active (pressed) border color for Destructive Secondary Buttons.
+   */
+  actionColorBorderDestructiveSecondaryActive: '',
+  /**
+   * Disabled border color for Destructive Secondary Buttons.
+   */
+  actionColorBorderDestructiveSecondaryDisabled: '',
+  /**
+   * Hover border color for Destructive Secondary Buttons.
+   */
+  actionColorBorderDestructiveSecondaryHover: ''
+};
+
+/**
+ * #### Interactive colors
+ *
+ * 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
+ */
+var interactiveColors = {
+  /**
+   * Default border color for Data entry components.
+   */
+  interactiveColorBorder: '',
+  /**
+   * Active (pressed) border color for Data entry components.
+   */
+  interactiveColorBorderActive: '',
+  /**
+   * Hover border color for Data entry components.
+   */
+  interactiveColorBorderHover: '',
+  /**
+   * Disabled border color for Data entry components.
+   */
+  interactiveColorBorderDisabled: '',
+  /**
+   * Background overlay color for selected in Data entry components.
+   */
+  interactiveColorOverlaySelected: '',
+  /**
+   * Background overlay color for hover in Data entry components.
+   */
+  interactiveColorOverlayHover: '',
+  /**
+   * Background overlay color for active (pressed) in Data entry components.
+   */
+  interactiveColorOverlayActive: '',
+  /**
+   * Background overlay color for drag in Data entry components.
+   */
+  interactiveColorOverlayDrag: '',
+  /**
+   * Default background color for Data entry components.
+   */
+  interactiveColorBackground: '',
+  /**
+   * Background color for disabled Data entry components.
+   */
+  interactiveColorBackgroundDisabled: '',
+  /**
+   * Brand accent color for Data entry components.
+   */
+  interactiveColorAccent: '',
+  /**
+   * Error color for Data entry components.
+   */
+  interactiveColorAccentError: '',
+  /**
+   * Stronger error color for emphasis in Data Entry components. Used for hover interaction.
+   */
+  interactiveColorAccentErrorStrong: ''
+};
+
+/**
+ * #### Neutral colors
+ *
+ * Neutral colors should be used sparingly. Prefer to use more semantic tokens for backgrounds and borders.
+ * These colors must not be used for content as they will not pass the required contrast ratio (instead, use [Content colors](#Content Colors)).
+ *
+ * @categoryColor
+ */
+var neutralColors = {
+  /**
+   * Alternate background color in dark color schemes and inverted background in light color schemes.
+   */
+  black: '',
+  /**
+   * Least visually emphasized. Do not use this as the background for Data Entry components, does not pass 3:1 graphical contrast.
+   */
+  neutral50: '',
+  /**
+   * Do not use this as the background for Data Entry components, does not pass 3:1 graphical contrast.
+   */
+  neutral100: '',
+  /**
+   * Not for text, does not pass 3:1 graphical contrast in light & dark color schemes.
+   */
+  neutral200: '',
+  /**
+   * Not for text, does not pass 3:1 graphical contrast in light & dark color schemes.
+   */
+  neutral300: '',
+  /**
+   * Not for text, does not pass 3:1 graphical contrast in light color schemes.
+   */
+  neutral400: '',
+  /**
+   * Most visually emphasized, not for text, does not pass 3:1 graphical contrast in light color schemes.
+   */
+  neutral500: '',
+  /**
+   * Alternate background color in light color schemes and inverted background in dark color schemes.
+   */
+  white: '',
+  /**
+   * Transparent background color.
+   */
+  transparent: ''
+};
+
+/**
+ * #### Background colors
+ * Use background colors for page backgrounds and containers such as cards, modals, panels or popups.
+ *
+ * @categoryColor
+ */
+var backgroundColors = {
+  /**
+   * Default background color for the navigation headers.
+   */
+  backgroundColorNavigation: '',
+  /**
+   * Primary background color for pages.
+   */
+  backgroundColorPage: '',
+  /**
+   * Background color for side panels and navigation panels.
+   */
+  backgroundColorSidebar: '',
+  /**
+   * Used for cards or to create visual separation in the UI.
+   */
+  backgroundColorSection: '',
+  /**
+   * Default background color for modals.
+   */
+  backgroundColorDialog: '',
+  /**
+   * Default background color for popovers and tooltips.
+   */
+  backgroundColorPopup: '',
+  /**
+   * Background color for inverted color schemes.
+   */
+  backgroundColorFloating: '',
+  /**
+   * Used for page overlays under modals or when masking UI.
+   */
+  backgroundColorScrim: ''
+};
+
+/**
+ * #### Content colors
+ * Use content colors to create visual hierarchy, convey status or importance for plain text content.
+ *
+ * @categoryFont
+ */
+var contentColors = {
+  contentBackgroundColorNegativeWeak: '',
+  // TODO: can we remove?
+  /**
+   * Text color for links.
+   */
+  contentColorLink: '',
+  /**
+   * Brand accent text color.
+   */
+  contentColorAccent: '',
+  /**
+   * Brighter brand accent text color for emphasis.
+   */
+  contentColorAccentStrong: '',
+  /**
+   * Brand accent text color that does not pass 4.5:1 contrast ratio.
+   */
+  contentColorAccentWeak: '',
+  /**
+   * Text color for headings, titles, and prominent text content.
+   */
+  contentColorActive: '',
+  /**
+   * Text color for paragraphs and standard content.
+   */
+  contentColorDefault: '',
+  /**
+   * Text color for disabled content that does not pass 4.5:1 contrast.
+   */
+  contentColorDisabled: '',
+  /**
+   * Text color used to convey informational context or status.
+   */
+  contentColorInfo: '',
+  /**
+   * Text color used on top of inverted backgrounds.
+   */
+  contentColorInverted: '',
+  /**
+   * Subdued text color for less prominent content (use sparingly).
+   */
+  contentColorMuted: '',
+  /**
+   * Text color for error or negative status messaging.
+   */
+  contentColorNegative: '',
+  /**
+   * Stronger negative text color for greater emphasis.
+   */
+  contentColorNegativeStrong: '',
+  /**
+   * Disabled negative text color that does not pass 4.5:1 contrast.
+   */
+  contentColorNegativeWeak: '',
+  /**
+   * Text color for success or positive status messaging.
+   */
+  contentColorPositive: '',
+  /**
+   * Text color for cautionary or warning status messaging.
+   */
+  contentColorWarning: ''
+};
+
+/**
+ * #### UI Colors
+ *
+ * @categoryColor
+ */
+var uiColors = {
+  /**
+   * Visual focus ring color used for focus box-shadow. Should not be directly applied to UI elements.
+   */
+  focusColor: ''
+};
+
+/**
+ * #### 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
+ */
+var notificationColors = {
+  notificationColorInfoWeak: '',
+  notificationColorInfo: '',
+  notificationColorInfoStrong: '',
+  notificationColorPositiveWeak: '',
+  notificationColorPositive: '',
+  notificationColorPositiveStrong: '',
+  notificationColorCautionWeak: '',
+  notificationColorCaution: '',
+  notificationColorCautionStrong: '',
+  notificationColorNegativeWeak: '',
+  notificationColorNegative: '',
+  notificationColorNegativeStrong: ''
+};
+
+/**
+ * #### 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
+ */
+var severityColors = {
+  severityColorCustom: '',
+  severityColorUnknown: '',
+  severityColorInfo: '',
+  severityColorNormal: '',
+  severityColorNotice: '',
+  severityColorWarning: '',
+  severityColorAlert: '',
+  severityColorCritical: '',
+  severityColorEmergency: ''
+};
+
+/**
+ * #### 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 decoratively.
+ *
+ * @categoryColor
+ */
+var statusColors = {
+  /**
+   * Default color for informational messages and notifications.
+   */
+  statusColorInfo: '',
+  /**
+   * Weaker, less prominent informational color, does not pass 3:1 graphical or 4.5:1 text contrast.
+   */
+  statusColorInfoWeak: '',
+  /**
+   * Brighter, more prominent informational color.
+   */
+  statusColorInfoStrong: '',
+  /**
+   * Default color for neutral or standard status messages.
+   */
+  statusColorNormal: '',
+  /**
+   * Weaker, less prominent normal color, does not pass 3:1 graphical or 4.5:1 text contrast.
+   */
+  statusColorNormalWeak: '',
+  /**
+   * Brighter, more prominent normal color.
+   */
+  statusColorNormalStrong: '',
+  /**
+   * Default color for low-priority status messages.
+   */
+  statusColorLow: '',
+  /**
+   * Weaker, less prominent low-priority color, does not pass 3:1 graphical or 4.5:1 text contrast.
+   */
+  statusColorLowWeak: '',
+  /**
+   * Brighter, more prominent low-priority color.
+   */
+  statusColorLowStrong: '',
+  /**
+   * Default color for medium-priority status messages.
+   */
+  statusColorMedium: '',
+  /**
+   * Weaker, less prominent medium-priority color, does not pass 3:1 graphical or 4.5:1 text contrast.
+   */
+  statusColorMediumWeak: '',
+  /**
+   * Brighter, more prominent medium-priority color.
+   */
+  statusColorMediumStrong: '',
+  /**
+   * Default color for high-priority status messages.
+   */
+  statusColorHigh: '',
+  /**
+   * Weaker, less prominent high-priority color, does not pass 3:1 graphical or 4.5:1 text contrast.
+   */
+  statusColorHighWeak: '',
+  /**
+   * Brighter, more prominent high-priority color.
+   */
+  statusColorHighStrong: '',
+  /**
+   * Default color for critical alerts or urgent messages.
+   */
+  statusColorCritical: '',
+  /**
+   * Weaker, less prominent critical color, does not pass 3:1 graphical or 4.5:1 text contrast.
+   */
+  statusColorCriticalWeak: '',
+  /**
+   * Brighter, more prominent critical color.
+   */
+  statusColorCriticalStrong: ''
+};
+
+/**
+ * #### Syntax colors
+ *
+ * These colors should be used for syntax highlighting in programming languages.
+ * The colors chosen for tokens depend on the language, its features, and aesthetics.
+ * Prefer to use the `Code` component rather than these tokens directly as it does this mapping automatically.
+ * See [Content Colors](#Content Colors)
+ *
+ * @categoryFont
+ */
+var syntaxColors = {
+  syntaxBlue: '',
+  syntaxBrown: '',
+  syntaxGray: '',
+  syntaxGreen: '',
+  syntaxOrange: '',
+  syntaxPink: '',
+  syntaxPurple: '',
+  syntaxRed: '',
+  syntaxTeal: ''
+};
+
+/**
+ * #### Border colors
+ *
+ * Border color should be used to outline or divide content and UI elements.
+ *
+ * @categoryColor
+ */
+var borderColors = {
+  /**
+   * Default border color for elements that meets 3:1 graphical contrast (e.g., menu dividers).
+   */
+  borderColor: '',
+  /**
+   * Decorative-only border color that does not meet 3:1 graphical contrast.
+   */
+  borderColorWeak: '',
+  /**
+   * Border color with stronger visual emphasis that meets 3:1 graphical contrast.
+   */
+  borderColorStrong: ''
+};
+var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, actionColors), interactiveColors), neutralColors), backgroundColors), contentColors), uiColors), notificationColors), severityColors), statusColors), syntaxColors), borderColors);
+var _default = colors;
+exports["default"] = _default;