@atlaskit/editor-toolbar 0.3.8 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-toolbar
 
+## 0.4.0
+
+### Minor Changes
+
+- [`1eba43a7b680d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1eba43a7b680d) -
+  [ux] ED-29000 - Address paper cut issues in ColorPalette
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.3.8
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -412,6 +412,12 @@ Object.defineProperty(exports, "UndoIcon", {
     return _UndoIcon.UndoIcon;
   }
 });
+Object.defineProperty(exports, "getContrastingBackgroundColor", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getContrastingBackgroundColor;
+  }
+});
 Object.defineProperty(exports, "useToolbarDropdownMenu", {
   enumerable: true,
   get: function get() {
@@ -491,4 +497,5 @@ var _UndoIcon = require("./ui/icons/UndoIcon");
 var _RedoIcon = require("./ui/icons/RedoIcon");
 var _HistoryIcon = require("./ui/icons/HistoryIcon");
 var _ColorPalette = _interopRequireDefault(require("./ui/ColorPalette"));
+var _utils = require("./ui/ColorPalette/utils");
 var _uiContext = require("./hooks/ui-context");

package/dist/cjs/ui/ColorPalette/Color.compiled.css

@@ -1,6 +1,5 @@
 
 ._19itcf40{border:var(--_1wr0y6w)}
-._2rko1hkb{border-radius:var(--ds-border-radius-050,4px)}
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._189et94y{border-width:1px}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}

package/dist/cjs/ui/ColorPalette/Color.js

@@ -62,7 +62,7 @@ var Color = exports.Color = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     onMouseDown: handleMouseDown,
     tabIndex: tabIndex,
     autoFocus: autoFocus,
-    className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko1hkb _19itcf40 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv12j9 _1bg4v77o"]),
+    className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rkoiti9 _19itcf40 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv12j9 _1bg4v77o"]),
     style: {
       backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
       border: "1px solid ".concat(borderColor),
@@ -70,6 +70,7 @@ var Color = exports.Color = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       "--_toyvsf": (0, _runtime.ix)("2px solid ".concat("var(--ds-border-focused, #388BFF)"))
     }
   }, !decorator && isSelected && /*#__PURE__*/_react.default.createElement(_checkMarkEditorDone.default, {
+    color: checkMarkColor,
     LEGACY_primaryColor: checkMarkColor,
     label: ""
   }), decorator)));

package/dist/cjs/ui/ColorPalette/utils.js

@@ -1,13 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DEFAULT_COLOR_PICKER_COLUMNS = void 0;
 exports.getColorsPerRowFromPalette = getColorsPerRowFromPalette;
+exports.getContrastingBackgroundColor = getContrastingBackgroundColor;
 exports.getSelectedRowAndColumn = getSelectedRowAndColumn;
 exports.getSelectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette;
 exports.getTokenCSSVariableValue = void 0;
+var _chromatism = _interopRequireDefault(require("chromatism"));
 /**
  * Default number of columns in the color picker
  */
@@ -91,4 +94,40 @@ var getTokenCSSVariableValue = exports.getTokenCSSVariableValue = function getTo
     return value || fallback;
   }
   return '';
-};
+};
+
+/**
+ * Get the best contrasting background color for a given text color
+ * Ensures WCAG AA compliance for accessibility
+ *
+ * @param textColor - The text color to find a contrasting background for (supports HEX, RGB, RGBA etc.)
+ * @param useTokens - Whether to return design tokens instead of raw hex values
+ * @returns The best contrasting background color (hex value or design token)
+ *
+ * @example
+ * ```typescript
+ * // Get contrasting color for white text
+ * const bgForWhite = getContrastingBackgroundColor('#FFFFFF', false);
+ * // Returns: '#42526E' (dark gray)
+ *
+ * // Get contrasting color for black text with design tokens
+ * const bgForBlack = getContrastingBackgroundColor('#000000', true);
+ * // Returns: token('elevation.surface', '#FFFFFF')
+ * ```
+ */
+function getContrastingBackgroundColor(textColor) {
+  var candidates = ['#FFFFFF',
+  // white - surface
+  '#172B4D' // dark blue-gray - text color
+  ];
+
+  // Extract actual color value if it's a CSS variable
+  var tokenVal = getTokenCSSVariableValue(textColor);
+  var colorValue = !!tokenVal ? tokenVal : textColor;
+
+  // Find the color with the highest contrast ratio
+  var bestContrast = candidates.sort(function (a, b) {
+    return _chromatism.default.difference(b, colorValue) - _chromatism.default.difference(a, colorValue);
+  })[0];
+  return bestContrast;
+}

package/dist/es2019/index.js

@@ -66,4 +66,5 @@ export { UndoIcon } from './ui/icons/UndoIcon';
 export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
+export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/es2019/ui/ColorPalette/Color.compiled.css

@@ -1,6 +1,5 @@
 
 ._19itv4vr{border:1px solid var(--ds-border-inverse,#fff)}
-._2rko1hkb{border-radius:var(--ds-border-radius-050,4px)}
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._189et94y{border-width:1px}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}

package/dist/es2019/ui/ColorPalette/Color.js

@@ -57,8 +57,9 @@ export const Color = /*#__PURE__*/memo(({
       border: `1px solid ${borderColor}`
     },
     autoFocus: autoFocus,
-    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko1hkb _19itv4vr _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mvugt7 _1bg4v77o"])
+    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rkoiti9 _19itv4vr _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mvugt7 _1bg4v77o"])
   }, !decorator && isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+    color: checkMarkColor,
     LEGACY_primaryColor: checkMarkColor,
     label: ""
   }), decorator)));

package/dist/es2019/ui/ColorPalette/utils.js

@@ -1,3 +1,4 @@
+import chromatism from 'chromatism';
 /**
  * Default number of columns in the color picker
  */
@@ -80,4 +81,38 @@ export const getTokenCSSVariableValue = variableExpression => {
     return value || fallback;
   }
   return '';
-};
+};
+
+/**
+ * Get the best contrasting background color for a given text color
+ * Ensures WCAG AA compliance for accessibility
+ *
+ * @param textColor - The text color to find a contrasting background for (supports HEX, RGB, RGBA etc.)
+ * @param useTokens - Whether to return design tokens instead of raw hex values
+ * @returns The best contrasting background color (hex value or design token)
+ *
+ * @example
+ * ```typescript
+ * // Get contrasting color for white text
+ * const bgForWhite = getContrastingBackgroundColor('#FFFFFF', false);
+ * // Returns: '#42526E' (dark gray)
+ *
+ * // Get contrasting color for black text with design tokens
+ * const bgForBlack = getContrastingBackgroundColor('#000000', true);
+ * // Returns: token('elevation.surface', '#FFFFFF')
+ * ```
+ */
+export function getContrastingBackgroundColor(textColor) {
+  const candidates = ['#FFFFFF',
+  // white - surface
+  '#172B4D' // dark blue-gray - text color
+  ];
+
+  // Extract actual color value if it's a CSS variable
+  const tokenVal = getTokenCSSVariableValue(textColor);
+  const colorValue = !!tokenVal ? tokenVal : textColor;
+
+  // Find the color with the highest contrast ratio
+  const bestContrast = candidates.sort((a, b) => chromatism.difference(b, colorValue) - chromatism.difference(a, colorValue))[0];
+  return bestContrast;
+}

package/dist/esm/index.js

@@ -66,4 +66,5 @@ export { UndoIcon } from './ui/icons/UndoIcon';
 export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
+export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/esm/ui/ColorPalette/Color.compiled.css

@@ -1,6 +1,5 @@
 
 ._19itcf40{border:var(--_1wr0y6w)}
-._2rko1hkb{border-radius:var(--ds-border-radius-050,4px)}
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._189et94y{border-width:1px}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}

package/dist/esm/ui/ColorPalette/Color.js

@@ -53,7 +53,7 @@ export var Color = /*#__PURE__*/memo(function (_ref) {
     onMouseDown: handleMouseDown,
     tabIndex: tabIndex,
     autoFocus: autoFocus,
-    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko1hkb _19itcf40 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv12j9 _1bg4v77o"]),
+    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rkoiti9 _19itcf40 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv12j9 _1bg4v77o"]),
     style: {
       backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
       border: "1px solid ".concat(borderColor),
@@ -61,6 +61,7 @@ export var Color = /*#__PURE__*/memo(function (_ref) {
       "--_toyvsf": ix("2px solid ".concat("var(--ds-border-focused, #388BFF)"))
     }
   }, !decorator && isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+    color: checkMarkColor,
     LEGACY_primaryColor: checkMarkColor,
     label: ""
   }), decorator)));

package/dist/esm/ui/ColorPalette/utils.js

@@ -1,3 +1,4 @@
+import chromatism from 'chromatism';
 /**
  * Default number of columns in the color picker
  */
@@ -81,4 +82,40 @@ export var getTokenCSSVariableValue = function getTokenCSSVariableValue(variable
     return value || fallback;
   }
   return '';
-};
+};
+
+/**
+ * Get the best contrasting background color for a given text color
+ * Ensures WCAG AA compliance for accessibility
+ *
+ * @param textColor - The text color to find a contrasting background for (supports HEX, RGB, RGBA etc.)
+ * @param useTokens - Whether to return design tokens instead of raw hex values
+ * @returns The best contrasting background color (hex value or design token)
+ *
+ * @example
+ * ```typescript
+ * // Get contrasting color for white text
+ * const bgForWhite = getContrastingBackgroundColor('#FFFFFF', false);
+ * // Returns: '#42526E' (dark gray)
+ *
+ * // Get contrasting color for black text with design tokens
+ * const bgForBlack = getContrastingBackgroundColor('#000000', true);
+ * // Returns: token('elevation.surface', '#FFFFFF')
+ * ```
+ */
+export function getContrastingBackgroundColor(textColor) {
+  var candidates = ['#FFFFFF',
+  // white - surface
+  '#172B4D' // dark blue-gray - text color
+  ];
+
+  // Extract actual color value if it's a CSS variable
+  var tokenVal = getTokenCSSVariableValue(textColor);
+  var colorValue = !!tokenVal ? tokenVal : textColor;
+
+  // Find the color with the highest contrast ratio
+  var bestContrast = candidates.sort(function (a, b) {
+    return chromatism.difference(b, colorValue) - chromatism.difference(a, colorValue);
+  })[0];
+  return bestContrast;
+}

package/dist/types/index.d.ts

@@ -65,5 +65,6 @@ export { UndoIcon } from './ui/icons/UndoIcon';
 export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
+export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export type { IconComponent } from './types';
 export { useToolbarUI, ToolbarUIProvider, type ToolbarUIContextType } from './hooks/ui-context';

package/dist/types/ui/ColorPalette/utils.d.ts

@@ -38,3 +38,23 @@ export declare function getSelectedRowAndColumnFromPalette(palette: PaletteColor
  * @returns The resolved color value or empty string if not found
  */
 export declare const getTokenCSSVariableValue: (variableExpression: string) => string;
+/**
+ * Get the best contrasting background color for a given text color
+ * Ensures WCAG AA compliance for accessibility
+ *
+ * @param textColor - The text color to find a contrasting background for (supports HEX, RGB, RGBA etc.)
+ * @param useTokens - Whether to return design tokens instead of raw hex values
+ * @returns The best contrasting background color (hex value or design token)
+ *
+ * @example
+ * ```typescript
+ * // Get contrasting color for white text
+ * const bgForWhite = getContrastingBackgroundColor('#FFFFFF', false);
+ * // Returns: '#42526E' (dark gray)
+ *
+ * // Get contrasting color for black text with design tokens
+ * const bgForBlack = getContrastingBackgroundColor('#000000', true);
+ * // Returns: token('elevation.surface', '#FFFFFF')
+ * ```
+ */
+export declare function getContrastingBackgroundColor(textColor: string): string;

package/dist/types-ts4.5/index.d.ts

@@ -65,5 +65,6 @@ export { UndoIcon } from './ui/icons/UndoIcon';
 export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
+export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export type { IconComponent } from './types';
 export { useToolbarUI, ToolbarUIProvider, type ToolbarUIContextType } from './hooks/ui-context';

package/dist/types-ts4.5/ui/ColorPalette/utils.d.ts

@@ -38,3 +38,23 @@ export declare function getSelectedRowAndColumnFromPalette(palette: PaletteColor
  * @returns The resolved color value or empty string if not found
  */
 export declare const getTokenCSSVariableValue: (variableExpression: string) => string;
+/**
+ * Get the best contrasting background color for a given text color
+ * Ensures WCAG AA compliance for accessibility
+ *
+ * @param textColor - The text color to find a contrasting background for (supports HEX, RGB, RGBA etc.)
+ * @param useTokens - Whether to return design tokens instead of raw hex values
+ * @returns The best contrasting background color (hex value or design token)
+ *
+ * @example
+ * ```typescript
+ * // Get contrasting color for white text
+ * const bgForWhite = getContrastingBackgroundColor('#FFFFFF', false);
+ * // Returns: '#42526E' (dark gray)
+ *
+ * // Get contrasting color for black text with design tokens
+ * const bgForBlack = getContrastingBackgroundColor('#000000', true);
+ * // Returns: token('elevation.surface', '#FFFFFF')
+ * ```
+ */
+export declare function getContrastingBackgroundColor(textColor: string): string;

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.3.8",
+	"version": "0.4.0",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -20,20 +20,17 @@
 		"*.compiled.css"
 	],
 	"atlaskit:src": "src/index.ts",
-	"af:exports": {
-		".": "./src/index.ts"
-	},
 	"dependencies": {
 		"@atlaskit/badge": "^18.1.0",
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/icon": "^28.0.0",
-		"@atlaskit/icon-lab": "^5.6.0",
+		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon-lab": "^5.7.0",
 		"@atlaskit/logo": "^19.7.0",
 		"@atlaskit/popup": "^4.3.0",
-		"@atlaskit/primitives": "^14.11.0",
-		"@atlaskit/tokens": "^6.0.0",
+		"@atlaskit/primitives": "^14.12.0",
+		"@atlaskit/tokens": "^6.1.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",