@splunk/themes 0.16.4 → 0.17.0

package/CHANGELOG.md

@@ -1,12 +1,17 @@
 Change Log
 ============
 
-0.16.4  - Dec 5, 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
+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,
@@ -52,8 +53,17 @@ var syntaxColors = {
   syntaxRed: '#fa94aa',
   syntaxTeal: '#45d4ba'
 };
+/**
+ * ## Interactive borders
+ *
+ * @borderSet
+ */
+
+var bordersInteractive = {
+  activeBorder: "".concat(dark.borderActiveColor, " double")
+};
 
-var theme = _objectSpread(_objectSpread(_objectSpread({}, _light["default"]), dark), syntaxColors);
+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,
@@ -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.4",
+  "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",

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)',

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)',

package/types/enterprise/dark.d.ts

@@ -1,4 +1,5 @@
 declare const theme: {
+    activeBorder: string;
     syntaxBlue: string;
     syntaxBrown: string;
     syntaxGray: string;
@@ -11,6 +12,7 @@ declare const theme: {
     backgroundColor: string;
     backgroundColorHover: string;
     borderColor: string;
+    borderActiveColor: string;
     borderDarkColor: string;
     borderLightColor: string;
     textColor: 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;