@atlaskit/renderer 108.16.4 → 108.16.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/renderer
 
+## 108.16.5
+
+### Patch Changes
+
+- [#43362](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43362) [`e4cea0e13b9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4cea0e13b9) - [ux] ED-20699 Use LCH color inversion method in dark mode, behind platform.editor.use-lch-for-color-inversion_1qv8ol feature flag.
+
 ## 108.16.4
 
 ### Patch Changes

package/dist/cjs/react/marks/textColor.js

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _tokens = require("@atlaskit/tokens");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -76,7 +77,12 @@ function TextColor(props) {
   } else {
     if (colorMode === 'dark') {
       // if we have a custom color, we need to check if we are in dark mode
-      paletteColorValue = invertCustomColor(props.color);
+      // and if the feature flag is enabled we need to use the LCH conversion method
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
+        paletteColorValue = (0, _adfSchema.getDarkModeLCHColor)(props.color);
+      } else {
+        paletteColorValue = invertCustomColor(props.color);
+      }
     } else {
       // if we are in light mode, we can just set the color
       paletteColorValue = props.color;

package/dist/cjs/react/nodes/tableCell.js

@@ -17,6 +17,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _consts = require("../../consts");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../messages");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var IgnoreSorting = ['LABEL', 'INPUT'];
 var nextStatusOrder = function nextStatusOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -133,7 +134,12 @@ var getStyle = function getStyle(_ref) {
       // if we have a custom color, we need to check if we are in dark mode
       if (colorMode === 'dark') {
         // if we are in dark mode, we need to invert the color
-        style.backgroundColor = invertCustomColor(background);
+        // and if the feature flag is enabled we need to use the LCH conversion method
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
+          style.backgroundColor = (0, _adfSchema.getDarkModeLCHColor)(background);
+        } else {
+          style.backgroundColor = invertCustomColor(background);
+        }
       } else {
         // if we are in light mode, we can just set the color
         style.backgroundColor = background;

package/dist/cjs/ui/Renderer/index.js

@@ -53,7 +53,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.16.4";
+var packageVersion = "108.16.5";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/es2019/react/marks/textColor.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
-import { isHex, isRgb, rgbToHex } from '@atlaskit/adf-schema';
+import { isHex, isRgb, rgbToHex, getDarkModeLCHColor } from '@atlaskit/adf-schema';
 import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import { useThemeObserver } from '@atlaskit/tokens';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+
 /**
  * This function is duplicated in
  * - @atlaskit/adf-schema
@@ -66,7 +68,12 @@ export default function TextColor(props) {
   } else {
     if (colorMode === 'dark') {
       // if we have a custom color, we need to check if we are in dark mode
-      paletteColorValue = invertCustomColor(props.color);
+      // and if the feature flag is enabled we need to use the LCH conversion method
+      if (getBooleanFF('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
+        paletteColorValue = getDarkModeLCHColor(props.color);
+      } else {
+        paletteColorValue = invertCustomColor(props.color);
+      }
     } else {
       // if we are in light mode, we can just set the color
       paletteColorValue = props.color;

package/dist/es2019/react/nodes/tableCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { isHex, isRgb, rgbToHex, tableBackgroundColorPalette } from '@atlaskit/adf-schema';
+import { isHex, isRgb, rgbToHex, tableBackgroundColorPalette, getDarkModeLCHColor } from '@atlaskit/adf-schema';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { hexToEditorBackgroundPaletteRawValue } from '@atlaskit/editor-palette';
@@ -10,6 +10,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { RendererCssClassName } from '../../consts';
 import { useIntl } from 'react-intl-next';
 import { tableCellMessages } from '../../messages';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const IgnoreSorting = ['LABEL', 'INPUT'];
 const nextStatusOrder = currentSortOrder => {
   switch (currentSortOrder) {
@@ -129,7 +130,12 @@ const getStyle = ({
       // if we have a custom color, we need to check if we are in dark mode
       if (colorMode === 'dark') {
         // if we are in dark mode, we need to invert the color
-        style.backgroundColor = invertCustomColor(background);
+        // and if the feature flag is enabled we need to use the LCH conversion method
+        if (getBooleanFF('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
+          style.backgroundColor = getDarkModeLCHColor(background);
+        } else {
+          style.backgroundColor = invertCustomColor(background);
+        }
       } else {
         // if we are in light mode, we can just set the color
         style.backgroundColor = background;

package/dist/es2019/ui/Renderer/index.js

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.16.4";
+const packageVersion = "108.16.5";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/esm/react/marks/textColor.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { useMemo } from 'react';
-import { isHex, isRgb, rgbToHex } from '@atlaskit/adf-schema';
+import { isHex, isRgb, rgbToHex, getDarkModeLCHColor } from '@atlaskit/adf-schema';
 import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import { useThemeObserver } from '@atlaskit/tokens';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+
 /**
  * This function is duplicated in
  * - @atlaskit/adf-schema
@@ -66,7 +68,12 @@ export default function TextColor(props) {
   } else {
     if (colorMode === 'dark') {
       // if we have a custom color, we need to check if we are in dark mode
-      paletteColorValue = invertCustomColor(props.color);
+      // and if the feature flag is enabled we need to use the LCH conversion method
+      if (getBooleanFF('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
+        paletteColorValue = getDarkModeLCHColor(props.color);
+      } else {
+        paletteColorValue = invertCustomColor(props.color);
+      }
     } else {
       // if we are in light mode, we can just set the color
       paletteColorValue = props.color;

package/dist/esm/react/nodes/tableCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { isHex, isRgb, rgbToHex, tableBackgroundColorPalette } from '@atlaskit/adf-schema';
+import { isHex, isRgb, rgbToHex, tableBackgroundColorPalette, getDarkModeLCHColor } from '@atlaskit/adf-schema';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { hexToEditorBackgroundPaletteRawValue } from '@atlaskit/editor-palette';
@@ -10,6 +10,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { RendererCssClassName } from '../../consts';
 import { useIntl } from 'react-intl-next';
 import { tableCellMessages } from '../../messages';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var IgnoreSorting = ['LABEL', 'INPUT'];
 var nextStatusOrder = function nextStatusOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -126,7 +127,12 @@ var getStyle = function getStyle(_ref) {
       // if we have a custom color, we need to check if we are in dark mode
       if (colorMode === 'dark') {
         // if we are in dark mode, we need to invert the color
-        style.backgroundColor = invertCustomColor(background);
+        // and if the feature flag is enabled we need to use the LCH conversion method
+        if (getBooleanFF('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
+          style.backgroundColor = getDarkModeLCHColor(background);
+        } else {
+          style.backgroundColor = invertCustomColor(background);
+        }
       } else {
         // if we are in light mode, we can just set the color
         style.backgroundColor = background;

package/dist/esm/ui/Renderer/index.js

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.16.4";
+var packageVersion = "108.16.5";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.16.4",
+  "version": "108.16.5",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -128,6 +128,9 @@
     "platform.media-experience.media-viewer-v2_hgsii": {
       "type": "boolean",
       "referenceOnly": "true"
+    },
+    "platform.editor.use-lch-for-color-inversion_1qv8ol": {
+      "type": "boolean"
     }
   }
 }