@splunk/themes 1.4.1 → 1.6.0

package/enterprise/light.js

@@ -131,7 +131,7 @@ var contentColors = {
   contentColorAccentWeak: '#b5e3b5',
   contentColorNegative: '#c84535',
   contentColorNegativeWeak: '#f5aca3',
-  contentColorLink: deprecatedEnterpriseColors.accentColorD10,
+  contentColorLink: '#006297',
   contentColorLinkDisabled: deprecatedEnterpriseColors.accentColorL30,
   contentColorLinkVisited: '#864ae0',
   contentColorLinkVisitedDisabled: '#e0ccff'
@@ -196,9 +196,6 @@ var interactiveColors = {
   interactiveColorAccentErrorStrong: '#852d24',
   interactiveColorAccentErrorWeak: '#ea958d'
 };
-var backgrounds = {
-  draggableBackground: "url('data:image/png;base64,".concat(dragHandle, "') 0 0 / 8px 8px repeat")
-};
 var sansFontFamily = "'Splunk Platform Sans', 'Proxima Nova', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
 var typography = {
   sansFontFamily: sansFontFamily,
@@ -217,6 +214,7 @@ var typography = {
   fontWeightBold: 700,
   fontWeightHeavy: 800,
   fontWeightExtraBold: 900,
+  lineLengthMinimum: '34ch',
   lineLength: '80ch',
   lineHeight: '1.5',
   lineHeightSingle: '1',
@@ -411,8 +409,9 @@ var deprecated = {
   statusColorHighStrong: deprecatedEnterpriseColors.errorColorD10,
   statusColorCritical: deprecatedEnterpriseColors.errorColorD10,
   statusColorCriticalWeak: deprecatedEnterpriseColors.errorColor,
-  statusColorCriticalStrong: deprecatedEnterpriseColors.errorColorD20
+  statusColorCriticalStrong: deprecatedEnterpriseColors.errorColorD20,
+  draggableBackground: "url('data:image/png;base64,".concat(dragHandle, "') 0 0 / 8px 8px repeat")
 };
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, deprecatedEnterpriseColors), backgroundColors), actionColors), neutralColors), notificationColors), severityColors), elevationShadows), syntaxColors), usageColors), backgrounds), shadows), typography), contentColors), interactiveColors), zindexes), _dataViz["default"]), deprecated);
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, deprecatedEnterpriseColors), backgroundColors), actionColors), neutralColors), notificationColors), severityColors), elevationShadows), syntaxColors), usageColors), shadows), typography), contentColors), interactiveColors), zindexes), _dataViz["default"]), deprecated);
 var _default = theme;
 exports["default"] = _default;

package/getTheme.js

@@ -56,7 +56,7 @@ function getTheme() {
   var isCompact = density === 'compact';
   var isDark = colorScheme === 'dark';
   var isLight = colorScheme === 'light';
-  return Object.freeze(_objectSpread({
+  var utilVariables = {
     colorScheme: colorScheme,
     density: density,
     family: family,
@@ -66,7 +66,8 @@ function getTheme() {
     isCompact: isCompact,
     isDark: isDark,
     isLight: isLight
-  }, family === 'enterprise' ? (0, _enterprise["default"])({
+  };
+  return Object.freeze(_objectSpread(_objectSpread({}, utilVariables), family === 'enterprise' ? (0, _enterprise["default"])({
     colorScheme: colorScheme,
     density: density
   }) : (0, _prisma["default"])({

package/mixins/prose.js

@@ -9,7 +9,7 @@ var _variables = _interopRequireDefault(require("../variables"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n        /* TODO: should this also be a variable? */\n        min-width: 34ch;\n        max-width: ", ";\n\n        /*\n        * Word spacing: 0.16em\n        * Letter spacing (i.e., tracking): 0.12em\n        */\n\n        /*\n        * Style all block-level elements to be 1.5 margin-bottom by default\n        * wcag requirement 1.4.12\n        */\n        & *:is(", "):not(:last-child) {\n            margin-block-end: 1lh;\n        }\n\n        /*\n        * Separate h1 and h2 into individual rules to avoid ts-styled-plugin\u2019s parser\n        * error on comma-separated, multi-line interpolations at the start of a selector.\n        */\n        ", ":where(h1):not(:first-child) {\n            margin-block-start: 1lh;\n        }\n\n        ", ":where(h2):not(:first-child) {\n            margin-block-start: 1lh;\n        }\n\n        ", ":where(img) {\n            max-width: 100%;\n        }\n\n        ", ":where(ol), ", ":where(ul) {\n            padding-inline-start: 2rem;\n        }\n    "]);
+  var data = _taggedTemplateLiteral(["\n        min-width: ", ";\n        max-width: ", ";\n\n        /*\n        * Word spacing: 0.16em\n        * Letter spacing (i.e., tracking): 0.12em\n        */\n\n        /*\n        * Style all block-level elements to be 1.5 margin-bottom by default\n        * wcag requirement 1.4.12\n        */\n        & *:is(", "):not(:last-child) {\n            margin-block-end: 1lh;\n        }\n\n        /*\n        * Separate h1 and h2 into individual rules to avoid ts-styled-plugin\u2019s parser\n        * error on comma-separated, multi-line interpolations at the start of a selector.\n        */\n        ", ":where(h1):not(:first-child) {\n            margin-block-start: 1lh;\n        }\n\n        ", ":where(h2):not(:first-child) {\n            margin-block-start: 1lh;\n        }\n\n        ", ":where(img) {\n            max-width: 100%;\n        }\n\n        ", ":where(ol), ", ":where(ul) {\n            padding-inline-start: 2rem;\n        }\n    "]);
   _templateObject = function _templateObject() {
     return data;
   };
@@ -47,12 +47,12 @@ var defaultElementSelectors = {
  * @name prose
  * @kind function
  *
- * @param {object} [elementSelectors]
+ * @public
+ *
+ * @param {Object} [options] The options object.
+ * @param {Object} [options.elementSelectors]
  * By default, all elements are selected by their html tag using `*:is(<tag>)`;
  * override that selector by setting `elementSelectors`.
- *
- * For example, paragraph elements are styled with the selector `*:where(p)` but that can be overridden:
- * e.g. prose({ elementSelectors: { p: '.foo' }}) will instead style `p` elements that match `*:where(.foo)`
  */
 function prose() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -60,7 +60,7 @@ function prose() {
   var selectors = _objectSpread(_objectSpread({}, defaultElementSelectors), elementSelectors);
   var allSelectors = Array.from(new Set(Object.values(selectors))).join(',');
   return function () {
-    return (0, _styledComponents.css)(_templateObject(), _variables["default"].lineLength, allSelectors, selectors.h1, selectors.h2, selectors.img, selectors.ol, selectors.ul);
+    return (0, _styledComponents.css)(_templateObject(), _variables["default"].lineLengthMinimum, _variables["default"].lineLength, allSelectors, selectors.h1, selectors.h2, selectors.img, selectors.ol, selectors.ul);
   };
 }
 var _default = prose;

package/mixins/resets.js

@@ -16,7 +16,7 @@ function _templateObject2() {
   return data;
 }
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n        background-color: ", ";\n        box-sizing: border-box;\n        color: ", ";\n        color-scheme: ", ";\n        font-family: ", ";\n        margin: 0;\n    "]);
+  var data = _taggedTemplateLiteral(["\n        background-color: ", ";\n        box-sizing: border-box;\n        color: ", ";\n        color-scheme: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        margin: 0;\n    "]);
   _templateObject = function _templateObject() {
     return data;
   };
@@ -50,7 +50,7 @@ var pageBase = function pageBase() {
     return (0, _styledComponents.css)(_templateObject(), _variables["default"].backgroundColorPage, _variables["default"].contentColorDefault, (0, _pick["default"])({
       dark: 'dark',
       light: 'light'
-    }), _variables["default"].fontFamily);
+    }), _variables["default"].fontFamily, _variables["default"].lineHeight);
   };
 };
 

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@splunk/themes",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "description": "Theme variables and mixins for the Splunk design language",
   "main": "./index.js",
   "types": "./types/index.d.ts",
   "scripts": {
     "babel": "babel src -d . --ignore src/babel-plugin-base64-png,src/**/tests --ignore \"**/docs\" --extensions .js,.ts,.tsx",
     "build": "cross-env NODE_ENV=production yarn babel && yarn types:build",
+    "postbuild": "node --experimental-strip-types src/scripts/generateTokenSpec.ts",
     "docs": "NODE_ENV=production webpack --config docs.gen.webpack.config.js",
     "docs:publish": "eval $(splunk-docs-package docs) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
     "docs:publish:external": "eval $(splunk-docs-package docs-external --suffix=public) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
@@ -74,6 +75,8 @@
     "@babel/core": "^7.28.0",
     "@splunk/babel-preset": "^4.0.0",
     "@splunk/eslint-config": "^5.0.0",
+    "@splunk/jsdoc-loader": "^3.1.1",
+    "@splunk/ui-utils": "^1.12.0",
     "@storybook/blocks": "^7.6.20",
     "@storybook/components": "^7.6.20",
     "@storybook/manager-api": "^7.6.20",
@@ -82,6 +85,7 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
+    "@types/lodash": "^4.14.156",
     "@types/react": "^18.2.0",
     "@types/tinycolor2": "^1.4.2",
     "@typescript-eslint/eslint-plugin": "^8.29.1",

package/prisma/base.js

@@ -33,9 +33,6 @@ function createPrismaBase(_ref) {
     borderColorWeak: "".concat(colorSchemeVars.borderColorWeak),
     borderColorStrong: "".concat(colorSchemeVars.borderColorStrong)
   };
-  var backgrounds = {
-    draggableBackground: "radial-gradient(circle at 1px 1px, ".concat(colorSchemeVars.contentColorMuted, ", ").concat(colorSchemeVars.contentColorMuted, " 1px, transparent 1px) 0 0 / 4px 6px")
-  };
   var sansFontFamily = "'Splunk Platform Sans', 'Splunk Data Sans', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
   var typography = {
     sansFontFamily: sansFontFamily,
@@ -55,6 +52,7 @@ function createPrismaBase(_ref) {
     fontWeightHeavy: 800,
     fontWeightExtraBold: 900,
     lineHeight: '1.5',
+    lineLengthMinimum: '34ch',
     lineLength: '80ch',
     lineHeightNormal: '1.5',
     lineHeightSingle: '1',
@@ -73,10 +71,11 @@ function createPrismaBase(_ref) {
     zindexToastMessages: 2000
   };
   var deprecated = {
+    draggableBackground: "radial-gradient(circle at 1px 1px, ".concat(colorSchemeVars.contentColorMuted, ", ").concat(colorSchemeVars.contentColorMuted, " 1px, transparent 1px) 0 0 / 4px 6px"),
     hoverShadow: "0 0 0 2px ".concat(colorSchemeVars.backgroundColorPage, ", 0 0 0 5px ").concat(colorSchemeVars.interactiveColorOverlayHover),
     linkColor: colorSchemeVars.interactiveColorPrimary
   };
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typography), usageColors), _dataViz["default"]), shadows), borders), backgrounds), zindexes), deprecated);
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typography), usageColors), _dataViz["default"]), shadows), borders), zindexes), deprecated);
 }
 var _default = createPrismaBase;
 exports["default"] = _default;

package/prisma/light.js

@@ -23,7 +23,7 @@ var backgroundColors = {
   backgroundColorScrim: 'rgba(255, 255, 255, 0.75)'
 };
 var borderColors = {
-  borderColor: ' #8f8f8f',
+  borderColor: '#8f8f8f',
   borderColorWeak: '#e0e0e0',
   borderColorStrong: '#6b6b6b'
 };
@@ -148,7 +148,7 @@ var elevationShadows = {
 var syntaxColors = {
   syntaxBlue: '#0e6e8b',
   syntaxBrown: '#8b5804',
-  syntaxGray: '#666',
+  syntaxGray: '#666666',
   syntaxGreen: '#556f0b',
   syntaxOrange: '#a64708',
   syntaxPink: '#b9139e',

package/splunk-magnetic/index.js

@@ -200,7 +200,7 @@ var splunkMagneticThemeCustomizer = function splunkMagneticThemeCustomizer(curre
     statusColorNormalWeak: pickMagnetic('positive-bg-medium-default'),
     syntaxBlue: currentTheme.colorScheme === 'light' ? '#0f7190' : '#6cd0f0',
     syntaxBrown: currentTheme.colorScheme === 'light' ? '#8b5804' : '#fccf87',
-    syntaxGray: currentTheme.colorScheme === 'light' ? '#666' : '#909090',
+    syntaxGray: currentTheme.colorScheme === 'light' ? '#666666' : '#909090',
     syntaxGreen: currentTheme.colorScheme === 'light' ? '#556f0b' : '#cef06c',
     syntaxOrange: currentTheme.colorScheme === 'light' ? '#a64708' : '#f7933f',
     syntaxPink: currentTheme.colorScheme === 'light' ? '#b9139e' : '#f494e5',