@atlaskit/editor-common 116.23.0 → 116.23.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-common
 
+## 116.23.1
+
+### Patch Changes
+
+- [`74b3e15fed77e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/74b3e15fed77e) -
+  Check editor text and highlight color accessibility against both light and dark theme variants.
+- Updated dependencies
+
 ## 116.23.0
 
 ### Minor Changes

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

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,13 +13,57 @@ Object.defineProperty(exports, "getSelectedRowAndColumn", {
   }
 });
 exports.getSelectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette;
-exports.getTokenCSSVariableValue = void 0;
+exports.getTokenCSSVariableValueForNonActiveTheme = exports.getTokenCSSVariableValue = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _palettesRaw = _interopRequireDefault(require("@atlaskit/tokens/palettes-raw"));
+var _tokenNames = _interopRequireDefault(require("@atlaskit/tokens/token-names"));
+var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
 var _getSelectedRowAndColumn = require("./getSelectedRowAndColumn");
 var DEFAULT_COLOR_PICKER_COLUMNS = exports.DEFAULT_COLOR_PICKER_COLUMNS = 7;
-
 // Ignored via go/ees005
 // eslint-disable-next-line require-unicode-regexp
 var CSS_VAR_EXPRESSION_REGEX = /var\(([^,\)]+)(,.*)?\)/;
+var getCSSVariableParts = function getCSSVariableParts(variableExpression) {
+  var matcher = variableExpression.match(CSS_VAR_EXPRESSION_REGEX);
+  if (!matcher) {
+    return undefined;
+  }
+  return {
+    fallback: matcher[2] ? matcher[2].replace(',', '').trim() : '',
+    variable: matcher[1].trim()
+  };
+};
+
+// Build the reverse lookup (CSS variable -> token name) once at module load so that
+// each lookup is O(1) instead of O(n) with an extra array allocation per call.
+var cssVariableToTokenName = new Map(Object.entries(_tokenNames.default).map(function (_ref) {
+  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    tokenName = _ref2[0],
+    cssVariable = _ref2[1];
+  return [cssVariable, tokenName];
+}));
+var getTokenName = function getTokenName(cssVariable) {
+  return cssVariableToTokenName.get(cssVariable);
+};
+var resolveRawTokenValue = function resolveRawTokenValue(value) {
+  var _paletteRaw$find;
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+  var paletteValue = (_paletteRaw$find = _palettesRaw.default.find(function (paletteToken) {
+    return paletteToken.path[paletteToken.path.length - 1] === value;
+  })) === null || _paletteRaw$find === void 0 ? void 0 : _paletteRaw$find.value;
+  return typeof paletteValue === 'string' ? paletteValue : value;
+};
+var getCurrentThemeMode = function getCurrentThemeMode() {
+  if (typeof document === 'undefined') {
+    return 'light';
+  }
+  return document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light';
+};
+var getNonActiveThemeMode = function getNonActiveThemeMode() {
+  return getCurrentThemeMode() === 'dark' ? 'light' : 'dark';
+};
 
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function getColorsPerRowFromPalette(palette) {
@@ -52,4 +97,17 @@ var getTokenCSSVariableValue = exports.getTokenCSSVariableValue = function getTo
   }
   return '';
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+var getTokenCSSVariableValueForNonActiveTheme = exports.getTokenCSSVariableValueForNonActiveTheme = function getTokenCSSVariableValueForNonActiveTheme(variableExpression, fallback) {
+  var cssVariableParts = getCSSVariableParts(variableExpression);
+  var tokenName = cssVariableParts ? getTokenName(cssVariableParts.variable) : undefined;
+  var rawToken = (getNonActiveThemeMode() === 'light' ? _tokensRaw.light : _tokensRaw.dark).find(function (token) {
+    return token.cleanName === tokenName;
+  });
+  if (rawToken) {
+    return resolveRawTokenValue(rawToken.value) || fallback;
+  }
+  return (cssVariableParts === null || cssVariableParts === void 0 ? void 0 : cssVariableParts.fallback) || fallback;
+};
 // eslint-disable-next-line @atlaskit/editor/no-re-export

package/dist/cjs/ui-color/index.js

@@ -100,6 +100,12 @@ Object.defineProperty(exports, "getTokenCSSVariableValue", {
     return _utils.getTokenCSSVariableValue;
   }
 });
+Object.defineProperty(exports, "getTokenCSSVariableValueForNonActiveTheme", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getTokenCSSVariableValueForNonActiveTheme;
+  }
+});
 Object.defineProperty(exports, "highlightColorPalette", {
   enumerable: true,
   get: function get() {

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

@@ -1,9 +1,41 @@
+import paletteRaw from '@atlaskit/tokens/palettes-raw';
+import tokenNames from '@atlaskit/tokens/token-names';
+import { dark as darkTokensRaw, light as lightTokensRaw } from '@atlaskit/tokens/tokens-raw';
 import { getSelectedRowAndColumn } from './getSelectedRowAndColumn';
 export const DEFAULT_COLOR_PICKER_COLUMNS = 7;
-
 // Ignored via go/ees005
 // eslint-disable-next-line require-unicode-regexp
 const CSS_VAR_EXPRESSION_REGEX = /var\(([^,\)]+)(,.*)?\)/;
+const getCSSVariableParts = variableExpression => {
+  const matcher = variableExpression.match(CSS_VAR_EXPRESSION_REGEX);
+  if (!matcher) {
+    return undefined;
+  }
+  return {
+    fallback: matcher[2] ? matcher[2].replace(',', '').trim() : '',
+    variable: matcher[1].trim()
+  };
+};
+
+// Build the reverse lookup (CSS variable -> token name) once at module load so that
+// each lookup is O(1) instead of O(n) with an extra array allocation per call.
+const cssVariableToTokenName = new Map(Object.entries(tokenNames).map(([tokenName, cssVariable]) => [cssVariable, tokenName]));
+const getTokenName = cssVariable => cssVariableToTokenName.get(cssVariable);
+const resolveRawTokenValue = value => {
+  var _paletteRaw$find;
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+  const paletteValue = (_paletteRaw$find = paletteRaw.find(paletteToken => paletteToken.path[paletteToken.path.length - 1] === value)) === null || _paletteRaw$find === void 0 ? void 0 : _paletteRaw$find.value;
+  return typeof paletteValue === 'string' ? paletteValue : value;
+};
+const getCurrentThemeMode = () => {
+  if (typeof document === 'undefined') {
+    return 'light';
+  }
+  return document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light';
+};
+const getNonActiveThemeMode = () => getCurrentThemeMode() === 'dark' ? 'light' : 'dark';
 
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function getColorsPerRowFromPalette(palette, cols = DEFAULT_COLOR_PICKER_COLUMNS) {
@@ -35,5 +67,16 @@ export const getTokenCSSVariableValue = variableExpression => {
   }
   return '';
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export const getTokenCSSVariableValueForNonActiveTheme = (variableExpression, fallback) => {
+  const cssVariableParts = getCSSVariableParts(variableExpression);
+  const tokenName = cssVariableParts ? getTokenName(cssVariableParts.variable) : undefined;
+  const rawToken = (getNonActiveThemeMode() === 'light' ? lightTokensRaw : darkTokensRaw).find(token => token.cleanName === tokenName);
+  if (rawToken) {
+    return resolveRawTokenValue(rawToken.value) || fallback;
+  }
+  return (cssVariableParts === null || cssVariableParts === void 0 ? void 0 : cssVariableParts.fallback) || fallback;
+};
 // eslint-disable-next-line @atlaskit/editor/no-re-export
 export { getSelectedRowAndColumn } from './getSelectedRowAndColumn';

package/dist/es2019/ui-color/index.js

@@ -6,7 +6,7 @@ export { default as Color } from './ColorPalette/Color';
 export { SelectedTextColorProvider } from './ColorPalette/SelectedTextColorProvider';
 export { useSelectedTextColor } from './ColorPalette/useSelectedTextColor';
 export { getSelectedRowAndColumn } from './ColorPalette/getSelectedRowAndColumn';
-export { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getSelectedRowAndColumnFromPalette, getTokenCSSVariableValue } from './ColorPalette/utils';
+export { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getSelectedRowAndColumnFromPalette, getTokenCSSVariableValue, getTokenCSSVariableValueForNonActiveTheme } from './ColorPalette/utils';
 export { default as cellBackgroundColorPalette } from './ColorPalette/Palettes/cellBackgroundColorPalette';
 export { default as colorPaletteMessages } from './ColorPalette/Palettes/paletteMessages';
 export { panelBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';

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

@@ -1,9 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import paletteRaw from '@atlaskit/tokens/palettes-raw';
+import tokenNames from '@atlaskit/tokens/token-names';
+import { dark as darkTokensRaw, light as lightTokensRaw } from '@atlaskit/tokens/tokens-raw';
 import { getSelectedRowAndColumn } from './getSelectedRowAndColumn';
 export var DEFAULT_COLOR_PICKER_COLUMNS = 7;
-
 // Ignored via go/ees005
 // eslint-disable-next-line require-unicode-regexp
 var CSS_VAR_EXPRESSION_REGEX = /var\(([^,\)]+)(,.*)?\)/;
+var getCSSVariableParts = function getCSSVariableParts(variableExpression) {
+  var matcher = variableExpression.match(CSS_VAR_EXPRESSION_REGEX);
+  if (!matcher) {
+    return undefined;
+  }
+  return {
+    fallback: matcher[2] ? matcher[2].replace(',', '').trim() : '',
+    variable: matcher[1].trim()
+  };
+};
+
+// Build the reverse lookup (CSS variable -> token name) once at module load so that
+// each lookup is O(1) instead of O(n) with an extra array allocation per call.
+var cssVariableToTokenName = new Map(Object.entries(tokenNames).map(function (_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    tokenName = _ref2[0],
+    cssVariable = _ref2[1];
+  return [cssVariable, tokenName];
+}));
+var getTokenName = function getTokenName(cssVariable) {
+  return cssVariableToTokenName.get(cssVariable);
+};
+var resolveRawTokenValue = function resolveRawTokenValue(value) {
+  var _paletteRaw$find;
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+  var paletteValue = (_paletteRaw$find = paletteRaw.find(function (paletteToken) {
+    return paletteToken.path[paletteToken.path.length - 1] === value;
+  })) === null || _paletteRaw$find === void 0 ? void 0 : _paletteRaw$find.value;
+  return typeof paletteValue === 'string' ? paletteValue : value;
+};
+var getCurrentThemeMode = function getCurrentThemeMode() {
+  if (typeof document === 'undefined') {
+    return 'light';
+  }
+  return document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light';
+};
+var getNonActiveThemeMode = function getNonActiveThemeMode() {
+  return getCurrentThemeMode() === 'dark' ? 'light' : 'dark';
+};
 
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function getColorsPerRowFromPalette(palette) {
@@ -37,5 +81,18 @@ export var getTokenCSSVariableValue = function getTokenCSSVariableValue(variable
   }
   return '';
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export var getTokenCSSVariableValueForNonActiveTheme = function getTokenCSSVariableValueForNonActiveTheme(variableExpression, fallback) {
+  var cssVariableParts = getCSSVariableParts(variableExpression);
+  var tokenName = cssVariableParts ? getTokenName(cssVariableParts.variable) : undefined;
+  var rawToken = (getNonActiveThemeMode() === 'light' ? lightTokensRaw : darkTokensRaw).find(function (token) {
+    return token.cleanName === tokenName;
+  });
+  if (rawToken) {
+    return resolveRawTokenValue(rawToken.value) || fallback;
+  }
+  return (cssVariableParts === null || cssVariableParts === void 0 ? void 0 : cssVariableParts.fallback) || fallback;
+};
 // eslint-disable-next-line @atlaskit/editor/no-re-export
 export { getSelectedRowAndColumn } from './getSelectedRowAndColumn';

package/dist/esm/ui-color/index.js

@@ -6,7 +6,7 @@ export { default as Color } from './ColorPalette/Color';
 export { SelectedTextColorProvider } from './ColorPalette/SelectedTextColorProvider';
 export { useSelectedTextColor } from './ColorPalette/useSelectedTextColor';
 export { getSelectedRowAndColumn } from './ColorPalette/getSelectedRowAndColumn';
-export { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getSelectedRowAndColumnFromPalette, getTokenCSSVariableValue } from './ColorPalette/utils';
+export { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getSelectedRowAndColumnFromPalette, getTokenCSSVariableValue, getTokenCSSVariableValueForNonActiveTheme } from './ColorPalette/utils';
 export { default as cellBackgroundColorPalette } from './ColorPalette/Palettes/cellBackgroundColorPalette';
 export { default as colorPaletteMessages } from './ColorPalette/Palettes/paletteMessages';
 export { panelBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';

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

@@ -6,4 +6,5 @@ export declare function getSelectedRowAndColumnFromPalette(palette: PaletteColor
     selectedRowIndex: number;
 };
 export declare const getTokenCSSVariableValue: (variableExpression: string) => string;
+export declare const getTokenCSSVariableValueForNonActiveTheme: (variableExpression: string, fallback: string) => string;
 export { getSelectedRowAndColumn } from './getSelectedRowAndColumn';

package/dist/types/ui-color/index.d.ts

@@ -3,7 +3,7 @@ export { default as Color } from './ColorPalette/Color';
 export { SelectedTextColorProvider } from './ColorPalette/SelectedTextColorProvider';
 export { useSelectedTextColor } from './ColorPalette/useSelectedTextColor';
 export { getSelectedRowAndColumn } from './ColorPalette/getSelectedRowAndColumn';
-export { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getSelectedRowAndColumnFromPalette, getTokenCSSVariableValue, } from './ColorPalette/utils';
+export { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getSelectedRowAndColumnFromPalette, getTokenCSSVariableValue, getTokenCSSVariableValueForNonActiveTheme, } from './ColorPalette/utils';
 export { default as cellBackgroundColorPalette } from './ColorPalette/Palettes/cellBackgroundColorPalette';
 export { default as colorPaletteMessages } from './ColorPalette/Palettes/paletteMessages';
 export { panelBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "116.23.0",
+	"version": "116.23.1",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"