@splunk/themes 0.16.2 → 0.16.4

package/CHANGELOG.md

@@ -1,11 +1,21 @@
 Change Log
 ============
 
+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).
+
 0.16.2 - October 4, 2023
 ----------
 Bug Fixes:
-* `typography` mixin's `title4`, `title5`, and `title6` should now correctly follow the font hierarchy (SUI-5668). 
-  * `title5` is now larger and bolder than `title6` in Prisma themes. 
+* `typography` mixin's `title4`, `title5`, and `title6` should now correctly follow the font hierarchy (SUI-5668).
+  * `title5` is now larger and bolder than `title6` in Prisma themes.
   * `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.
 

package/enterprise/dark.js

@@ -34,8 +34,26 @@ 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 syntaxColors = {
+  syntaxBlue: '#6cd0f0',
+  syntaxBrown: '#fccf87',
+  syntaxGray: '#b5b5b5',
+  syntaxGreen: '#cef06c',
+  syntaxOrange: '#f7994a',
+  syntaxPink: '#f494e5',
+  syntaxPurple: '#c99eff',
+  syntaxRed: '#fa94aa',
+  syntaxTeal: '#45d4ba'
+};
 
-var theme = _objectSpread(_objectSpread({}, _light["default"]), dark);
+var theme = _objectSpread(_objectSpread(_objectSpread({}, _light["default"]), dark), syntaxColors);
 
 var _default = theme;
 exports["default"] = _default;

package/enterprise/light.js

@@ -279,19 +279,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "0.16.2",
+  "version": "0.16.4",
   "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",
@@ -99,6 +99,6 @@
     "webpack-merge": "^5.9.0"
   },
   "engines": {
-    "node": ">=6"
+    "node": ">=14"
   }
 }

package/prisma/dark.js

@@ -129,12 +129,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

@@ -127,15 +127,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,4 +1,13 @@
 declare const theme: {
+    syntaxBlue: string;
+    syntaxBrown: string;
+    syntaxGray: string;
+    syntaxGreen: string;
+    syntaxOrange: string;
+    syntaxPink: string;
+    syntaxPurple: string;
+    syntaxRed: string;
+    syntaxTeal: string;
     backgroundColor: string;
     backgroundColorHover: string;
     borderColor: string;
@@ -35,19 +44,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;