@splunk/themes 0.22.0 → 1.0.0-beta.2

package/CHANGELOG.md

@@ -1,6 +1,11 @@
 Change Log
 ============
 
+0.23.0 - February 5, 2025
+----------
+Bug Fixes:
+* Added peer dependencies needed to incorporate the themes package standalone (SUI-6874).
+
 0.22.0 - October 1, 2024
 ----------
 New Features:
@@ -65,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,70 @@
+Change Log
+============
+
+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/SplunkThemeProvider.js

@@ -1,32 +1,22 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
+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"] = SplunkThemeProvider;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styledComponents = require("styled-components");
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) { o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } } return t; }
 /** SplunkThemeProvider defaults to `prisma` `dark` `comfortable`, unless the properties have already been set.
  *
  * For example, here the nested `SplunkThemeProvider` defaults to `enterprise` `light`:
@@ -42,16 +32,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  */
 function SplunkThemeProvider(_ref) {
   var family = _ref.family,
-      colorScheme = _ref.colorScheme,
-      density = _ref.density,
-      additionalThemeProperties = _ref.additionalThemeProperties,
-      customizeTheme = _ref.customizeTheme,
-      otherProps = _objectWithoutProperties(_ref, ["family", "colorScheme", "density", "additionalThemeProperties", "customizeTheme"]);
-
+    colorScheme = _ref.colorScheme,
+    density = _ref.density,
+    additionalThemeProperties = _ref.additionalThemeProperties,
+    customizeTheme = _ref.customizeTheme,
+    otherProps = _objectWithoutProperties(_ref, ["family", "colorScheme", "density", "additionalThemeProperties", "customizeTheme"]);
   var _ref2 = (0, _react.useContext)(_styledComponents.ThemeContext) || {},
-      _ref2$splunkThemeV = _ref2.splunkThemeV1,
-      splunkThemeV1 = _ref2$splunkThemeV === void 0 ? {} : _ref2$splunkThemeV;
-
+    _ref2$splunkThemeV = _ref2.splunkThemeV1,
+    splunkThemeV1 = _ref2$splunkThemeV === void 0 ? {} : _ref2$splunkThemeV;
   var composedTheme = _objectSpread(_objectSpread({}, additionalThemeProperties), {}, {
     splunkThemeV1: {
       family: family || splunkThemeV1.family || 'prisma',
@@ -60,7 +48,6 @@ function SplunkThemeProvider(_ref) {
       customizer: customizeTheme || splunkThemeV1.customizer
     }
   });
-
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, _extends({
     theme: composedTheme
   }, otherProps));

package/design-tokens/colors.js

@@ -0,0 +1,495 @@
+"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 Button 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.
+ *
+ * @categoryColor
+ */
+var interactiveColors = {
+  /**
+   * Primary color for interactive elements in Data entry components.
+   */
+  interactiveColorPrimary: '',
+  /**
+   * 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.
+   */
+  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: ''
+};
+
+/**
+ * #### 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.
+ *
+ * @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({}, actionColors), interactiveColors), neutralColors), backgroundColors), contentColors), uiColors), statusColors), syntaxColors), borderColors);
+var _default = colors;
+exports["default"] = _default;