@atlaskit/editor-palette 1.5.3 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-palette
 
+## 1.6.0
+
+### Minor Changes
+
+- [#95631](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95631) [`8514eacd7c0e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8514eacd7c0e) - [ED-23111] Add text background color palette to editor palettes
+
 ## 1.5.3
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "hexToEditorTableChartsPaletteRawValue", {
     return _tableCharts.hexToEditorTableChartsPaletteRawValue;
   }
 });
+Object.defineProperty(exports, "hexToEditorTextBackgroundPaletteColor", {
+  enumerable: true,
+  get: function get() {
+    return _textBackgroundColor.hexToEditorTextBackgroundPaletteColor;
+  }
+});
 Object.defineProperty(exports, "hexToEditorTextPaletteColor", {
   enumerable: true,
   get: function get() {
@@ -42,4 +48,5 @@ Object.defineProperty(exports, "hexToEditorTextPaletteColor", {
 var _background = require("./background");
 var _border = require("./border");
 var _text = require("./text");
-var _tableCharts = require("./table-charts");
+var _tableCharts = require("./table-charts");
+var _textBackgroundColor = require("./text-background-color");

package/dist/cjs/text-background-color.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hexToEditorTextBackgroundPaletteColor = hexToEditorTextBackgroundPaletteColor;
+exports.textBackgroundColorPalette = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _textBackgroundColorP;
+// This import will be stripped on build
+
+// Color tokens defined on https://hello.atlassian.net/wiki/spaces/EOU/pages/3587733210/Text+highlighting+-+designs#Colour-palette
+// values are asserted to improve generated type declarations
+var textBackgroundColorPalette = exports.textBackgroundColorPalette = (_textBackgroundColorP = {}, (0, _defineProperty2.default)(_textBackgroundColorP, '#DCDFE4', "var(--ds-background-accent-gray-subtler, #DCDFE4)"), (0, _defineProperty2.default)(_textBackgroundColorP, '#C6EDFB', "var(--ds-background-accent-teal-subtler, #C6EDFB)"), (0, _defineProperty2.default)(_textBackgroundColorP, '#D3F1A7', "var(--ds-background-accent-lime-subtler, #D3F1A7)"), (0, _defineProperty2.default)(_textBackgroundColorP, '#FEDEC8', "var(--ds-background-accent-orange-subtler, #FEDEC8)"), (0, _defineProperty2.default)(_textBackgroundColorP, '#FDD0EC', "var(--ds-background-accent-magenta-subtler, #FDD0EC)"), (0, _defineProperty2.default)(_textBackgroundColorP, '#DFD8FD', "var(--ds-background-accent-purple-subtler, #DFD8FD)"), _textBackgroundColorP);
+/**
+ * This takes an ADF hex color and returns a matching text background palette color.
+ *
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+ *
+ * Example usage
+ * ```tsx
+ * const cssValue = hexToEditorTextBackgroundPaletteColor('#D3F1A7');
+ *
+ * <span style={{backgroundColor: cssValue}} />
+ * ```
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
+ * The exact output of this function is an implementation detail and should only be used when rendering
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ */
+function hexToEditorTextBackgroundPaletteColor(hexColor) {
+  // Ts ignore was used to allow use of conditional return type
+  // (preferring better type on consumption over safety in implementation)
+  // @ts-ignore
+  return textBackgroundColorPalette[hexColor.toUpperCase()];
+}

package/dist/es2019/index.js

@@ -1,4 +1,5 @@
 export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteRawValue } from './background';
 export { hexToEditorBorderPaletteColor } from './border';
 export { hexToEditorTextPaletteColor } from './text';
-export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteRawValue } from './table-charts';
+export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteRawValue } from './table-charts';
+export { hexToEditorTextBackgroundPaletteColor } from './text-background-color';

package/dist/es2019/text-background-color.js

@@ -0,0 +1,41 @@
+// This import will be stripped on build
+
+// Color tokens defined on https://hello.atlassian.net/wiki/spaces/EOU/pages/3587733210/Text+highlighting+-+designs#Colour-palette
+// values are asserted to improve generated type declarations
+export const textBackgroundColorPalette = {
+  /** Gray - light */
+  ['#DCDFE4']: "var(--ds-background-accent-gray-subtler, #DCDFE4)",
+  /** Teal - light */
+  ['#C6EDFB']: "var(--ds-background-accent-teal-subtler, #C6EDFB)",
+  /** Lime - light */
+  ['#D3F1A7']: "var(--ds-background-accent-lime-subtler, #D3F1A7)",
+  /** Orange - light */
+  ['#FEDEC8']: "var(--ds-background-accent-orange-subtler, #FEDEC8)",
+  /** Magenta - light */
+  ['#FDD0EC']: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
+  /** Purple - light */
+  ['#DFD8FD']: "var(--ds-background-accent-purple-subtler, #DFD8FD)"
+};
+/**
+ * This takes an ADF hex color and returns a matching text background palette color.
+ *
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+ *
+ * Example usage
+ * ```tsx
+ * const cssValue = hexToEditorTextBackgroundPaletteColor('#D3F1A7');
+ *
+ * <span style={{backgroundColor: cssValue}} />
+ * ```
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
+ * The exact output of this function is an implementation detail and should only be used when rendering
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ */
+export function hexToEditorTextBackgroundPaletteColor(hexColor) {
+  // Ts ignore was used to allow use of conditional return type
+  // (preferring better type on consumption over safety in implementation)
+  // @ts-ignore
+  return textBackgroundColorPalette[hexColor.toUpperCase()];
+}

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteRawValue } from './background';
 export { hexToEditorBorderPaletteColor } from './border';
 export { hexToEditorTextPaletteColor } from './text';
-export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteRawValue } from './table-charts';
+export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteRawValue } from './table-charts';
+export { hexToEditorTextBackgroundPaletteColor } from './text-background-color';

package/dist/esm/text-background-color.js

@@ -0,0 +1,30 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _textBackgroundColorP;
+// This import will be stripped on build
+
+// Color tokens defined on https://hello.atlassian.net/wiki/spaces/EOU/pages/3587733210/Text+highlighting+-+designs#Colour-palette
+// values are asserted to improve generated type declarations
+export var textBackgroundColorPalette = (_textBackgroundColorP = {}, _defineProperty(_textBackgroundColorP, '#DCDFE4', "var(--ds-background-accent-gray-subtler, #DCDFE4)"), _defineProperty(_textBackgroundColorP, '#C6EDFB', "var(--ds-background-accent-teal-subtler, #C6EDFB)"), _defineProperty(_textBackgroundColorP, '#D3F1A7', "var(--ds-background-accent-lime-subtler, #D3F1A7)"), _defineProperty(_textBackgroundColorP, '#FEDEC8', "var(--ds-background-accent-orange-subtler, #FEDEC8)"), _defineProperty(_textBackgroundColorP, '#FDD0EC', "var(--ds-background-accent-magenta-subtler, #FDD0EC)"), _defineProperty(_textBackgroundColorP, '#DFD8FD', "var(--ds-background-accent-purple-subtler, #DFD8FD)"), _textBackgroundColorP);
+/**
+ * This takes an ADF hex color and returns a matching text background palette color.
+ *
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+ *
+ * Example usage
+ * ```tsx
+ * const cssValue = hexToEditorTextBackgroundPaletteColor('#D3F1A7');
+ *
+ * <span style={{backgroundColor: cssValue}} />
+ * ```
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
+ * The exact output of this function is an implementation detail and should only be used when rendering
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ */
+export function hexToEditorTextBackgroundPaletteColor(hexColor) {
+  // Ts ignore was used to allow use of conditional return type
+  // (preferring better type on consumption over safety in implementation)
+  // @ts-ignore
+  return textBackgroundColorPalette[hexColor.toUpperCase()];
+}

package/dist/types/index.d.ts

@@ -2,3 +2,4 @@ export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteRawValue
 export { hexToEditorBorderPaletteColor } from './border';
 export { hexToEditorTextPaletteColor } from './text';
 export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteRawValue, } from './table-charts';
+export { hexToEditorTextBackgroundPaletteColor } from './text-background-color';

package/dist/types/text-background-color.d.ts

@@ -0,0 +1,35 @@
+export declare const textBackgroundColorPalette: {
+    /** Gray - light */
+    "#DCDFE4": "var(--ds-background-accent-gray-subtler, #DCDFE4)";
+    /** Teal - light */
+    "#C6EDFB": "var(--ds-background-accent-teal-subtler, #C6EDFB)";
+    /** Lime - light */
+    "#D3F1A7": "var(--ds-background-accent-lime-subtler, #D3F1A7)";
+    /** Orange - light */
+    "#FEDEC8": "var(--ds-background-accent-orange-subtler, #FEDEC8)";
+    /** Magenta - light */
+    "#FDD0EC": "var(--ds-background-accent-magenta-subtler, #FDD0EC)";
+    /** Purple - light */
+    "#DFD8FD": "var(--ds-background-accent-purple-subtler, #DFD8FD)";
+};
+type TextBackgroundColorPalette = typeof textBackgroundColorPalette;
+export type TextBackgroundColorPaletteKey = keyof TextBackgroundColorPalette;
+/**
+ * This takes an ADF hex color and returns a matching text background palette color.
+ *
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+ *
+ * Example usage
+ * ```tsx
+ * const cssValue = hexToEditorTextBackgroundPaletteColor('#D3F1A7');
+ *
+ * <span style={{backgroundColor: cssValue}} />
+ * ```
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
+ * The exact output of this function is an implementation detail and should only be used when rendering
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ */
+export declare function hexToEditorTextBackgroundPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends TextBackgroundColorPaletteKey ? TextBackgroundColorPalette[HexColor] : string | undefined;
+export {};

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

@@ -2,3 +2,4 @@ export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteRawValue
 export { hexToEditorBorderPaletteColor } from './border';
 export { hexToEditorTextPaletteColor } from './text';
 export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteRawValue, } from './table-charts';
+export { hexToEditorTextBackgroundPaletteColor } from './text-background-color';

package/dist/types-ts4.5/text-background-color.d.ts

@@ -0,0 +1,35 @@
+export declare const textBackgroundColorPalette: {
+    /** Gray - light */
+    "#DCDFE4": "var(--ds-background-accent-gray-subtler, #DCDFE4)";
+    /** Teal - light */
+    "#C6EDFB": "var(--ds-background-accent-teal-subtler, #C6EDFB)";
+    /** Lime - light */
+    "#D3F1A7": "var(--ds-background-accent-lime-subtler, #D3F1A7)";
+    /** Orange - light */
+    "#FEDEC8": "var(--ds-background-accent-orange-subtler, #FEDEC8)";
+    /** Magenta - light */
+    "#FDD0EC": "var(--ds-background-accent-magenta-subtler, #FDD0EC)";
+    /** Purple - light */
+    "#DFD8FD": "var(--ds-background-accent-purple-subtler, #DFD8FD)";
+};
+type TextBackgroundColorPalette = typeof textBackgroundColorPalette;
+export type TextBackgroundColorPaletteKey = keyof TextBackgroundColorPalette;
+/**
+ * This takes an ADF hex color and returns a matching text background palette color.
+ *
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+ *
+ * Example usage
+ * ```tsx
+ * const cssValue = hexToEditorTextBackgroundPaletteColor('#D3F1A7');
+ *
+ * <span style={{backgroundColor: cssValue}} />
+ * ```
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
+ * The exact output of this function is an implementation detail and should only be used when rendering
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ */
+export declare function hexToEditorTextBackgroundPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends TextBackgroundColorPaletteKey ? TextBackgroundColorPalette[HexColor] : string | undefined;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-palette",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "The editor palette",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.42.0",
+    "@atlaskit/tokens": "^1.44.0",
     "@babel/runtime": "^7.0.0"
   },
   "devDependencies": {