@splunk/themes 0.19.0 → 0.21.0

package/CHANGELOG.md

@@ -1,6 +1,16 @@
 Change Log
 ============
 
+0.21.0 - August 26, 2024
+----------
+New Features: 
+* Prisma `focusColor` transparency removed to increase contrast and meet accessibility requirements (SUI-6519).
+
+0.20.0 - August 7, 2024
+----------
+New Features:
+* Prisma light theme's `interactiveColorBorder` value has been updated to meet accessibility requirements (SUI-6342).
+
 0.19.0 - June 4, 2024
 ----------
 New Features:

package/enterprise/light.js

@@ -331,7 +331,6 @@ var backgrounds = {
  */
 
 var borders = {
-  borderRadius: '3px',
   border: "1px solid ".concat(usageColors.borderColor)
 };
 var sansFontFamily = "'Splunk Platform Sans', 'Proxima Nova', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "0.19.0",
+  "version": "0.21.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",

package/prisma/base.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _tinycolor = _interopRequireDefault(require("tinycolor2"));
-
 var _dataViz = _interopRequireDefault(require("./dataViz"));
 
 var _light = _interopRequireDefault(require("./light"));
@@ -35,7 +33,7 @@ function createPrismaBase(_ref) {
    */
 
   var usageColors = {
-    focusColor: (0, _tinycolor["default"])(colorSchemeVars.interactiveColorPrimary).setAlpha(0.7).toRgbString(),
+    focusColor: colorSchemeVars.interactiveColorPrimary,
     transparent: 'transparent',
     linkColor: colorSchemeVars.interactiveColorPrimary
   };

package/prisma/light.js

@@ -52,7 +52,7 @@ var contentColors = {
 
 var interactiveColors = {
   interactiveColorPrimary: '#0264d7',
-  interactiveColorBorder: 'rgba(0, 0, 0, 0.4)',
+  interactiveColorBorder: 'rgba(0, 0, 0, 0.48)',
   interactiveColorBorderActive: 'rgba(0, 0, 0, 0.5)',
   interactiveColorBorderHover: 'rgba(0, 0, 0, 0.6)',
   interactiveColorBorderDisabled: 'rgba(0, 0, 0, 0.3)',

package/types/enterprise/dark.d.ts

@@ -32,7 +32,6 @@ declare const theme: {
     zindexModal: number;
     zindexPopover: number;
     zindexToastMessages: number;
-    borderRadius: string;
     focusShadow: string;
     overlayShadow: string;
     focusColor: string;

package/types/enterprise/light.d.ts

@@ -6,7 +6,6 @@ declare const theme: {
     zindexModal: number;
     zindexPopover: number;
     zindexToastMessages: number;
-    borderRadius: string;
     border: string;
     activeBorder: string;
     focusShadow: string;

package/types/prisma/base.d.ts

@@ -151,12 +151,7 @@ declare function createPrismaBase({ colorScheme }: {
     divergent2L5: string;
     divergent2L6: string;
     divergent2L7: string;
-    divergent2D1: string; /**
-     * ## Layers
-     * If a variable does not suit your purpose, set a value relatively, such as zindexModal +1.
-     *
-     * @valueSet
-     */
+    divergent2D1: string;
     divergent2D2: string;
     divergent2D3: string;
     divergent2D4: string;
@@ -180,7 +175,11 @@ declare function createPrismaBase({ colorScheme }: {
     categorical2L1: string;
     categorical2L2: string;
     categorical2L3: string;
-    categorical2L4: string;
+    categorical2L4: string; /**
+     * ## Font family
+     *
+     * @valueSet
+     */
     categorical2L5: string;
     categorical2L6: string;
     categorical2L7: string;
@@ -211,11 +210,7 @@ declare function createPrismaBase({ colorScheme }: {
     static4: string;
     static5: string;
     static6: string;
-    static7: string; /**
-     * ## Misc. colors
-     *
-     * @colorSet verbose
-     */
+    static7: string;
     static8: string;
     static9: string;
     static10: string;
@@ -225,15 +220,15 @@ declare function createPrismaBase({ colorScheme }: {
     static14: string;
     static15: string;
     static16: string;
-    static17: string;
-    static18: string;
-    static19: string;
     /**
      * ## Interactive state shadows
      *
      * @shadowSet
      *
      */
+    static17: string;
+    static18: string;
+    static19: string;
     static20: string;
     focusColor: string;
     transparent: string;

package/variables.js

@@ -55,7 +55,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  *     color: ${pick({
  *          enterprise: variables.textColor,
  *          prisma: variables.contentColorDefault
- *     });
+ *     })};
  * `;
  * ```
  * ## Custom Variables