@splunk/themes 0.16.3 → 0.17.0

package/CHANGELOG.md

@@ -1,7 +1,17 @@
 Change Log
 ============
 
-0.16.3  - October 11, 2023
+0.17.0 - March 21, 2024
+----------
+New Features:
+* Added new variable `activeBorder`.
+
+0.16.4 - Dec 5, 2023
+----------
+Bug Fixes:
+* `syntaxColors` have been updated to meet A11y_WCAG 1.4.3 contrast requirements for prisma and enterprise themes (SUI-5750).
+
+0.16.3 - October 11, 2023
 ----------
 Bug Fixes:
 * This package should now load correctly in Webpack 4 environments (SUI-5802).

package/enterprise/dark.js

@@ -21,6 +21,7 @@ var dark = {
   backgroundColor: _light["default"].gray20,
   backgroundColorHover: _light["default"].gray30,
   borderColor: _light["default"].gray22,
+  borderActiveColor: "rgba(225,225,225, 0.5)",
   borderDarkColor: _light["default"].black,
   borderLightColor: _light["default"].gray60,
   textColor: _light["default"].white,
@@ -34,8 +35,35 @@ var dark = {
   focusShadowInset: "inset 0 0 1px 1px ".concat(_light["default"].gray25, ", inset 0 0 0 3px ").concat(_light["default"].focusColor),
   draggableBackground: "url('data:image/png;base64,".concat(dragHandleDark, "') 0 0 / 8px 8px repeat")
 };
+/**
+ * ## Syntax colors
+ * Syntax colors are used only for code blocks.
+ *
+ * @colorSet verbose alphabetical
+ */
 
-var theme = _objectSpread(_objectSpread({}, _light["default"]), dark);
+var syntaxColors = {
+  syntaxBlue: '#6cd0f0',
+  syntaxBrown: '#fccf87',
+  syntaxGray: '#b5b5b5',
+  syntaxGreen: '#cef06c',
+  syntaxOrange: '#f7994a',
+  syntaxPink: '#f494e5',
+  syntaxPurple: '#c99eff',
+  syntaxRed: '#fa94aa',
+  syntaxTeal: '#45d4ba'
+};
+/**
+ * ## Interactive borders
+ *
+ * @borderSet
+ */
+
+var bordersInteractive = {
+  activeBorder: "".concat(dark.borderActiveColor, " double")
+};
+
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _light["default"]), dark), syntaxColors), bordersInteractive);
 
 var _default = theme;
 exports["default"] = _default;

package/enterprise/light.js

@@ -264,6 +264,7 @@ var usageColors = {
   textDisabledColor: grays.gray80,
   linkColor: accentColors.accentColorD10,
   linkColorHover: accentColors.accentColor,
+  borderActiveColor: "rgba(0,0,0, 0.5)",
   borderLightColor: grays.gray92,
   borderColor: grays.gray80,
   focusColor: accentColors.accentColorD10,
@@ -279,19 +280,19 @@ var usageColors = {
  */
 
 var syntaxColors = {
-  syntaxBlue: '#2662fc',
+  syntaxBlue: '#006aa3',
   syntaxBlueLight: '#006d9c',
-  syntaxBrown: '#a67f59',
-  syntaxGray: '#8293a7',
-  syntaxGreen: '#5ca300',
+  syntaxBrown: '#905b04',
+  syntaxGray: '#5c6773',
+  syntaxGreen: '#2f612e',
   syntaxGreenLight: '#5ba383',
-  syntaxOrange: '#f58220',
-  syntaxPink: '#cf00cf',
-  syntaxPurple: '#7738ff',
+  syntaxOrange: '#a44b0e',
+  syntaxPink: '#b9139e',
+  syntaxPurple: '#5317f2',
   syntaxPurpleLight: '#b19cd9',
-  syntaxRed: '#d90700',
+  syntaxRed: '#ca163d',
   syntaxRedLight: '#af575a',
-  syntaxTeal: '#00a8ab'
+  syntaxTeal: '#1a7060'
 };
 /**
  * ## Shadows
@@ -304,6 +305,15 @@ var shadows = {
   focusShadowInset: "inset 0 0 1px 1px ".concat(grays.white, ", inset 0 0 0 3px ").concat(usageColors.focusColor),
   overlayShadow: '0 4px 8px rgba(0, 0, 0, 0.2)'
 };
+/**
+ * ## Interactive borders
+ *
+ * @borderSet
+ */
+
+var bordersInteractive = {
+  activeBorder: "".concat(usageColors.borderActiveColor, " double")
+};
 /**
  * ## Backgrounds
  *
@@ -368,7 +378,7 @@ var zindexes = {
   zindexToastMessages: 2000
 };
 
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, brandColors), grays), accentColors), errorColors), alertColors), warningColors), successColors), infoColors), categoricalColors), divergingColors), syntaxColors), fontFamily), fontWeights), usageColors), backgrounds), shadows), borders), zindexes);
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, brandColors), grays), accentColors), errorColors), alertColors), warningColors), successColors), infoColors), categoricalColors), divergingColors), syntaxColors), fontFamily), fontWeights), usageColors), backgrounds), shadows), bordersInteractive), borders), zindexes);
 
 var _default = theme;
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "0.16.3",
+  "version": "0.17.0",
   "description": "Theme variables and mixins for the Splunk design language",
   "scripts": {
     "babel": "babel src -d . --ignore src/babel-plugin-base64-png,src/tests --ignore \"**/docs\" --extensions .js,.ts,.tsx",
@@ -55,10 +55,6 @@
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
   "dependencies": {
-    "@types/lodash": "^4.14.156",
-    "@types/react": "^16.9.38",
-    "@types/styled-components": "^5.1.0",
-    "@types/tinycolor2": "^1.4.2",
     "color-blend": "^2.0.9",
     "lodash": "^4.17.14",
     "tinycolor2": "^1.4.1"
@@ -76,6 +72,10 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
+    "@types/lodash": "^4.14.156",
+    "@types/react": "^16.9.38",
+    "@types/styled-components": "^5.1.0",
+    "@types/tinycolor2": "^1.4.2",
     "@typescript-eslint/eslint-plugin": "^3.4.0",
     "@typescript-eslint/parser": "^3.4.0",
     "babel-eslint": "^10.1.0",
@@ -99,6 +99,6 @@
     "webpack-merge": "^5.9.0"
   },
   "engines": {
-    "node": ">=6"
+    "node": ">=14"
   }
 }

package/prisma/base.js

@@ -51,6 +51,16 @@ function createPrismaBase(_ref) {
     focusShadow: "0 0 0 2px ".concat(colorSchemeVars.backgroundColorPage, ", 0 0 0 5px ").concat(usageColors.focusColor),
     focusShadowInset: "inset 0 0 0 3px ".concat(usageColors.focusColor)
   };
+  /**
+   * ## Interactive state borders
+   *
+   * @borderSet
+   *
+   */
+
+  var borders = {
+    activeBorder: "double ".concat(colorSchemeVars.interactiveColorBorderActive)
+  };
   /**
    * ## Backgrounds
    *
@@ -104,7 +114,7 @@ function createPrismaBase(_ref) {
     zindexPopover: 1060,
     zindexToastMessages: 2000
   };
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fontFamily), fontWeights), usageColors), _dataViz["default"]), shadows), backgrounds), zindexes);
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fontFamily), fontWeights), usageColors), _dataViz["default"]), shadows), borders), backgrounds), zindexes);
 }
 
 var _default = createPrismaBase;

package/prisma/dark.js

@@ -53,6 +53,7 @@ var contentColors = {
 var interactiveColors = {
   interactiveColorPrimary: '#3993FF',
   interactiveColorBorder: 'rgba(255, 255, 255, 0.5)',
+  interactiveColorBorderActive: 'rgba(225,225,225, 0.5)',
   interactiveColorBorderHover: 'rgba(255, 255, 255, 0.7)',
   interactiveColorBorderDisabled: 'rgba(255, 255, 255, 0.30)',
   interactiveColorOverlaySelected: 'rgba(255, 255, 255, 0.1)',
@@ -129,12 +130,12 @@ var elevationShadows = {
 var syntaxColors = {
   syntaxBlue: '#6cd0f0',
   syntaxBrown: '#fccf87',
-  syntaxGray: '#7d7d7d',
+  syntaxGray: '#909090',
   syntaxGreen: '#cef06c',
   syntaxOrange: '#f7933f',
   syntaxPink: '#f494e5',
-  syntaxPurple: '#a870ef',
-  syntaxRed: '#e85b79',
+  syntaxPurple: '#ab74f1',
+  syntaxRed: '#e9627f',
   syntaxTeal: '#45d4ba'
 };
 

package/prisma/light.js

@@ -53,6 +53,7 @@ var contentColors = {
 var interactiveColors = {
   interactiveColorPrimary: '#0264d7',
   interactiveColorBorder: 'rgba(0, 0, 0, 0.4)',
+  interactiveColorBorderActive: 'rgba(0, 0, 0, 0.5)',
   interactiveColorBorderHover: 'rgba(0, 0, 0, 0.6)',
   interactiveColorBorderDisabled: 'rgba(0, 0, 0, 0.3)',
   interactiveColorOverlaySelected: 'rgba(0, 0, 0, 0.04)',
@@ -127,15 +128,15 @@ var elevationShadows = {
  */
 
 var syntaxColors = {
-  syntaxBlue: '#107d9f',
-  syntaxBrown: '#a26604',
-  syntaxGray: '#737373',
-  syntaxGreen: '#607d0d',
-  syntaxOrange: '#b75808',
-  syntaxPink: '#d015b2',
-  syntaxPurple: '#7f52f5',
-  syntaxRed: '#df1f48',
-  syntaxTeal: '#1e816f'
+  syntaxBlue: '#0f7594',
+  syntaxBrown: '#9f6404',
+  syntaxGray: '#6b6b6b',
+  syntaxGreen: '#5c780c',
+  syntaxOrange: '#ba4f08',
+  syntaxPink: '#cc15ae',
+  syntaxPurple: '#7b4df5',
+  syntaxRed: '#db1e47',
+  syntaxTeal: '#1d7c6b'
 };
 
 var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, accentColors), statusColors), elevationShadows), backgroundColors), contentColors), neutralColors), interactiveColors), syntaxColors);

package/types/enterprise/dark.d.ts

@@ -1,7 +1,18 @@
 declare const theme: {
+    activeBorder: string;
+    syntaxBlue: string;
+    syntaxBrown: string;
+    syntaxGray: string;
+    syntaxGreen: string;
+    syntaxOrange: string;
+    syntaxPink: string;
+    syntaxPurple: string;
+    syntaxRed: string;
+    syntaxTeal: string;
     backgroundColor: string;
     backgroundColorHover: string;
     borderColor: string;
+    borderActiveColor: string;
     borderDarkColor: string;
     borderLightColor: string;
     textColor: string;
@@ -35,19 +46,10 @@ declare const theme: {
     serifFontFamily: string;
     monoFontFamily: string;
     fontFamily: string;
-    syntaxBlue: string;
     syntaxBlueLight: string;
-    syntaxBrown: string;
-    syntaxGray: string;
-    syntaxGreen: string;
     syntaxGreenLight: string;
-    syntaxOrange: string;
-    syntaxPink: string;
-    syntaxPurple: string;
     syntaxPurpleLight: string;
-    syntaxRed: string;
     syntaxRedLight: string;
-    syntaxTeal: string;
     diverging1ColorA: string;
     diverging1ColorB: string;
     diverging2ColorA: string;

package/types/enterprise/light.d.ts

@@ -7,6 +7,7 @@ declare const theme: {
     zindexToastMessages: number;
     borderRadius: string;
     border: string;
+    activeBorder: string;
     focusShadow: string;
     focusShadowInset: string;
     overlayShadow: string;
@@ -16,6 +17,7 @@ declare const theme: {
     textDisabledColor: string;
     linkColor: string;
     linkColorHover: string;
+    borderActiveColor: string;
     borderLightColor: string;
     borderColor: string;
     focusColor: string;

package/types/prisma/base.d.ts

@@ -9,6 +9,7 @@ declare function createPrismaBase({ colorScheme }: {
     zindexPopover: number;
     zindexToastMessages: number;
     draggableBackground: string;
+    activeBorder: string;
     hoverShadow: string;
     focusShadow: string;
     focusShadowInset: string;
@@ -188,7 +189,11 @@ declare function createPrismaBase({ colorScheme }: {
     categorical1L4: string;
     categorical1L5: string;
     categorical1L6: string;
-    categorical1L7: string;
+    categorical1L7: string; /**
+     * ## Backgrounds
+     *
+     * @colorSet verbose
+     */
     categorical1D1: string;
     categorical1D2: string;
     categorical1D3: string;

package/types/prisma/dark.d.ts

@@ -16,6 +16,7 @@ declare const theme: {
     syntaxTeal: string;
     interactiveColorPrimary: string;
     interactiveColorBorder: string;
+    interactiveColorBorderActive: string;
     interactiveColorBorderHover: string;
     interactiveColorBorderDisabled: string;
     interactiveColorOverlaySelected: string;

package/types/prisma/light.d.ts

@@ -16,6 +16,7 @@ declare const theme: {
     syntaxTeal: string;
     interactiveColorPrimary: string;
     interactiveColorBorder: string;
+    interactiveColorBorderActive: string;
     interactiveColorBorderHover: string;
     interactiveColorBorderDisabled: string;
     interactiveColorOverlaySelected: string;