@atlaskit/editor-palette 0.1.0

package/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@atlaskit/tokens/babel-plugin"]
+}

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-palette

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2022 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,57 @@
+# Editor palette
+
+When adding support for themed content to tooling which interacts with
+adf content -- the decision was made to treat existing hex codes as a
+unique id, and link them to design tokens which have theme specific
+versions.
+
+By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+
+## Usage
+
+Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/editor/editor-palette).
+
+### APIs
+
+### Installation
+
+```sh
+yarn add @atlaskit/editor-palette
+```
+
+#### hexToBackgroundPaletteColor
+
+This takes an adf hex color and returns a matching background palette color.
+
+```ts
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
+
+const cssValue = hexToBackgroundPaletteColor('#FFFFFF');
+//     ^? const cssValue: 'var(--ds-surface, #FFFFFF)'
+<div 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
+
+
+#### hexToTextPaletteColor
+
+This takes an adf hex color and returns a matching text palette color.
+
+```ts
+import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
+
+const cssValue = hexToEditorTextPaletteColor('#0747A6');
+//     ^? const cssValue: 'var(--ds-text-accent-blue, #0747A6)'
+<span style={{textColor: 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

package/dist/cjs/background.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.editorBackgroundPalette = void 0;
+exports.hexToEditorBackgroundPaletteColor = hexToEditorBackgroundPaletteColor;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _editorBackgroundPale;
+
+// This import will be stripped on build
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+/**
+ * This takes an adf hex color and returns a matching 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 = hexToBackgroundPaletteColor('#FFFFFF');
+ * //     ^? const cssValue: string
+ * <div 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 hexToEditorBackgroundPaletteColor(hexColor) {
+  // Ts ignore used to allow use of conditional return type
+  // (preferencing better type on consumption over safety in implementation)
+  // @ts-ignore
+  return editorBackgroundPalette[hexColor.toUpperCase()];
+}
+
+// Colors taken from
+// https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
+// values are asserted to improve generated type declarations
+var editorBackgroundPalette = (_editorBackgroundPale = {}, (0, _defineProperty2.default)(_editorBackgroundPale, '#DEEBFF', "var(--ds-background-accent-blue-subtlest, #DEEBFF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3D4FF', "var(--ds-background-accent-blue-subtler, #B3D4FF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#4C9AFF', "var(--ds-background-accent-blue-subtle, #4C9AFF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#E6FCFF', "var(--ds-background-accent-teal-subtlest, #E6FCFF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3F5FF', "var(--ds-background-accent-teal-subtler, #B3F5FF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#79E2F2', "var(--ds-background-accent-teal-subtle, #79E2F2)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#E3FCEF', "var(--ds-background-accent-green-subtlest, #E3FCEF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#ABF5D1', "var(--ds-background-accent-green-subtler, #ABF5D1)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#57D9A3', "var(--ds-background-accent-green-subtle, #57D9A3)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFFAE6', "var(--ds-background-accent-yellow-subtlest, #FFFAE6)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFF0B3', "var(--ds-background-accent-yellow-subtler, #FFF0B3)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFC400', "var(--ds-background-accent-orange-subtle, #FFC400)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFEBE6', "var(--ds-background-accent-red-subtlest, #FFEBE6)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFBDAD', "var(--ds-background-accent-red-subtler, #FFBDAD)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FF8F73', "var(--ds-background-accent-red-subtle, #FF8F73)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#EAE6FF', "var(--ds-background-accent-purple-subtlest, #EAE6FF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#C0B6F2', "var(--ds-background-accent-purple-subtler, #C0B6F2)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#998DD9', "var(--ds-background-accent-purple-subtle, #998DD9)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFFFFF', "var(--ds-surface, #FFFFFF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#F4F5F7', "var(--ds-background-accent-gray-subtlest, #F4F5F7)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3BAC5', "var(--ds-background-accent-gray-subtle, #B3BAC5)"), _editorBackgroundPale);
+exports.editorBackgroundPalette = editorBackgroundPalette;

package/dist/cjs/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "editorBackgroundPalette", {
+  enumerable: true,
+  get: function get() {
+    return _background.editorBackgroundPalette;
+  }
+});
+Object.defineProperty(exports, "editorTextPalette", {
+  enumerable: true,
+  get: function get() {
+    return _text.editorTextPalette;
+  }
+});
+Object.defineProperty(exports, "hexToEditorBackgroundPaletteColor", {
+  enumerable: true,
+  get: function get() {
+    return _background.hexToEditorBackgroundPaletteColor;
+  }
+});
+Object.defineProperty(exports, "hexToEditorTextPaletteColor", {
+  enumerable: true,
+  get: function get() {
+    return _text.hexToEditorTextPaletteColor;
+  }
+});
+
+var _background = require("./background");
+
+var _text = require("./text");

package/dist/cjs/text.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.editorTextPalette = void 0;
+exports.hexToEditorTextPaletteColor = hexToEditorTextPaletteColor;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _editorTextPalette;
+
+// This import will be stripped on build
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+/**
+ * This takes an adf hex color and returns a matching text 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 = hexToTextPaletteColor('#0747A6');
+ * //     ^? const cssValue: string
+ * <span style={{textColor: 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 hexToEditorTextPaletteColor(hexColor) {
+  // Ts ignore used to allow use of conditional return type
+  // (preferencing better type on consumption over safety in implementation)
+  // @ts-ignore
+  return editorTextPalette[hexColor.toUpperCase()];
+}
+
+// Colors taken from
+// https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
+// values are asserted to improve generated type declarations
+var editorTextPalette = (_editorTextPalette = {}, (0, _defineProperty2.default)(_editorTextPalette, '#B3D4FF', "var(--ds-background-accent-blue-subtler, #B3D4FF)"), (0, _defineProperty2.default)(_editorTextPalette, '#4C9AFF', "var(--ds-icon-accent-blue, #4C9AFF)"), (0, _defineProperty2.default)(_editorTextPalette, '#0747A6', "var(--ds-text-accent-blue, #0747A6)"), (0, _defineProperty2.default)(_editorTextPalette, '#B3F5FF', "var(--ds-background-accent-teal-subtler, #B3F5FF)"), (0, _defineProperty2.default)(_editorTextPalette, '#00B8D9', "var(--ds-icon-accent-teal, #00B8D9)"), (0, _defineProperty2.default)(_editorTextPalette, '#008DA6', "var(--ds-text-accent-teal, #008DA6)"), (0, _defineProperty2.default)(_editorTextPalette, '#ABF5D1', "var(--ds-background-accent-green-subtler, #ABF5D1)"), (0, _defineProperty2.default)(_editorTextPalette, '#36B37E', "var(--ds-icon-accent-green, #36B37E)"), (0, _defineProperty2.default)(_editorTextPalette, '#006644', "var(--ds-text-accent-green, #006644)"), (0, _defineProperty2.default)(_editorTextPalette, '#FFF0B3', "var(--ds-background-accent-yellow-subtler, #FFF0B3)"), (0, _defineProperty2.default)(_editorTextPalette, '#FFC400', "var(--ds-background-accent-orange-subtle, #FFC400)"), (0, _defineProperty2.default)(_editorTextPalette, '#FF991F', "var(--ds-icon-accent-orange, #FF991F)"), (0, _defineProperty2.default)(_editorTextPalette, '#FFBDAD', "var(--ds-background-accent-red-subtler, #FFBDAD)"), (0, _defineProperty2.default)(_editorTextPalette, '#FF5630', "var(--ds-icon-accent-red, #FF5630)"), (0, _defineProperty2.default)(_editorTextPalette, '#BF2600', "var(--ds-text-accent-red, #BF2600)"), (0, _defineProperty2.default)(_editorTextPalette, '#EAE6FF', "var(--ds-background-accent-purple-subtler, #EAE6FF)"), (0, _defineProperty2.default)(_editorTextPalette, '#6554C0', "var(--ds-icon-accent-purple, #6554C0)"), (0, _defineProperty2.default)(_editorTextPalette, '#403294', "var(--ds-text-accent-purple, #403294)"), (0, _defineProperty2.default)(_editorTextPalette, '#FFFFFF', "var(--ds-text-inverse, #FFFFFF)"), (0, _defineProperty2.default)(_editorTextPalette, '#97A0AF', "var(--ds-icon-accent-gray, #97A0AF)"), (0, _defineProperty2.default)(_editorTextPalette, '#172B4D', "var(--ds-text, #172B4D)"), _editorTextPalette);
+exports.editorTextPalette = editorTextPalette;

package/dist/cjs/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/editor-palette",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/es2019/background.js

@@ -0,0 +1,124 @@
+// This import will be stripped on build
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+/**
+ * This takes an adf hex color and returns a matching 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 = hexToBackgroundPaletteColor('#FFFFFF');
+ * //     ^? const cssValue: string
+ * <div 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 hexToEditorBackgroundPaletteColor(hexColor) {
+  // Ts ignore used to allow use of conditional return type
+  // (preferencing better type on consumption over safety in implementation)
+  // @ts-ignore
+  return editorBackgroundPalette[hexColor.toUpperCase()];
+}
+// Colors taken from
+// https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
+// values are asserted to improve generated type declarations
+export const editorBackgroundPalette = {
+  // blue
+
+  /** blue - light */
+  ['#DEEBFF']: "var(--ds-background-accent-blue-subtlest, #DEEBFF)",
+  // source for hex code was legacy token B50
+
+  /** blue - medium */
+  ['#B3D4FF']: "var(--ds-background-accent-blue-subtler, #B3D4FF)",
+  // source for hex code was legacy token B75
+
+  /** blue - strong */
+  ['#4C9AFF']: "var(--ds-background-accent-blue-subtle, #4C9AFF)",
+  // source for hex code was legacy token B100
+  // teal
+
+  /** teal - light */
+  ['#E6FCFF']: "var(--ds-background-accent-teal-subtlest, #E6FCFF)",
+  // source for hex code was legacy token T50
+
+  /** teal - medium */
+  ['#B3F5FF']: "var(--ds-background-accent-teal-subtler, #B3F5FF)",
+  // source for hex code was legacy token T75
+
+  /** teal - strong */
+  ['#79E2F2']: "var(--ds-background-accent-teal-subtle, #79E2F2)",
+  // source for hex code was legacy token T100
+  // green
+
+  /** green - light */
+  ['#E3FCEF']: "var(--ds-background-accent-green-subtlest, #E3FCEF)",
+  // source for hex code was legacy token G50
+
+  /** green - medium */
+  ['#ABF5D1']: "var(--ds-background-accent-green-subtler, #ABF5D1)",
+  // source for hex code was legacy token G75
+
+  /** green - strong */
+  ['#57D9A3']: "var(--ds-background-accent-green-subtle, #57D9A3)",
+  // source for hex code was legacy token G200
+  // yellowOrange
+
+  /** yellowOrange - light */
+  ['#FFFAE6']: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)",
+  // source for hex code was legacy token Y50
+
+  /** yellowOrange - medium */
+  ['#FFF0B3']: "var(--ds-background-accent-yellow-subtler, #FFF0B3)",
+  // source for hex code was legacy token Y75
+
+  /** yellowOrange - strong */
+  ['#FFC400']: "var(--ds-background-accent-orange-subtle, #FFC400)",
+  // source for hex code was legacy token Y200
+  // red
+
+  /** red - light */
+  ['#FFEBE6']: "var(--ds-background-accent-red-subtlest, #FFEBE6)",
+  // source for hex code was legacy token R50
+
+  /** red - medium */
+  ['#FFBDAD']: "var(--ds-background-accent-red-subtler, #FFBDAD)",
+  // source for hex code was legacy token R75
+
+  /** red - strong */
+  ['#FF8F73']: "var(--ds-background-accent-red-subtle, #FF8F73)",
+  // source for hex code was legacy token R100
+  // purple
+
+  /** purple - light */
+  ['#EAE6FF']: "var(--ds-background-accent-purple-subtlest, #EAE6FF)",
+  // source for hex code was legacy token P50
+
+  /** purple - medium */
+  ['#C0B6F2']: "var(--ds-background-accent-purple-subtler, #C0B6F2)",
+  // source for hex code was legacy token P75
+
+  /** purple - strong */
+  ['#998DD9']: "var(--ds-background-accent-purple-subtle, #998DD9)",
+  // source for hex code was legacy token P100
+  // whiteGray
+
+  /** whiteGray - light */
+  ['#FFFFFF']: "var(--ds-surface, #FFFFFF)",
+  // source for hex code was legacy token N0
+
+  /** whiteGray - medium */
+  ['#F4F5F7']: "var(--ds-background-accent-gray-subtlest, #F4F5F7)",
+  // source for hex code was legacy token N20
+
+  /** whiteGray - strong */
+  ['#B3BAC5']: "var(--ds-background-accent-gray-subtle, #B3BAC5)" // source for hex code was legacy token N60
+
+};

package/dist/es2019/index.js

@@ -0,0 +1,2 @@
+export { hexToEditorBackgroundPaletteColor, editorBackgroundPalette } from './background';
+export { hexToEditorTextPaletteColor, editorTextPalette } from './text';

package/dist/es2019/text.js

@@ -0,0 +1,122 @@
+// This import will be stripped on build
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+/**
+ * This takes an adf hex color and returns a matching text 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 = hexToTextPaletteColor('#0747A6');
+ * //     ^? const cssValue: string
+ * <span style={{textColor: 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 hexToEditorTextPaletteColor(hexColor) {
+  // Ts ignore used to allow use of conditional return type
+  // (preferencing better type on consumption over safety in implementation)
+  // @ts-ignore
+  return editorTextPalette[hexColor.toUpperCase()];
+}
+// Colors taken from
+// https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
+// values are asserted to improve generated type declarations
+export const editorTextPalette = {
+  // blue
+
+  /** blue - light */
+  ['#B3D4FF']: "var(--ds-background-accent-blue-subtler, #B3D4FF)",
+  // source for hex code was legacy token B75
+
+  /** blue - medium */
+  ['#4C9AFF']: "var(--ds-icon-accent-blue, #4C9AFF)",
+  // source for hex code was legacy token B100
+
+  /** blue - strong */
+  ['#0747A6']: "var(--ds-text-accent-blue, #0747A6)",
+  // source for hex code was legacy token B500
+  // teal
+
+  /** teal - light */
+  ['#B3F5FF']: "var(--ds-background-accent-teal-subtler, #B3F5FF)",
+  // source for hex code was legacy token T75
+
+  /** teal - medium */
+  ['#00B8D9']: "var(--ds-icon-accent-teal, #00B8D9)",
+  // source for hex code was legacy token T300
+
+  /** teal - strong */
+  ['#008DA6']: "var(--ds-text-accent-teal, #008DA6)",
+  // source for hex code was legacy token T500
+  // green
+
+  /** green - light */
+  ['#ABF5D1']: "var(--ds-background-accent-green-subtler, #ABF5D1)",
+  // source for hex code was legacy token G75
+
+  /** green - medium */
+  ['#36B37E']: "var(--ds-icon-accent-green, #36B37E)",
+  // source for hex code was legacy token G300
+
+  /** green - strong */
+  ['#006644']: "var(--ds-text-accent-green, #006644)",
+  // source for hex code was legacy token G500
+  // yellowOrange
+
+  /** yellowOrange - light */
+  ['#FFF0B3']: "var(--ds-background-accent-yellow-subtler, #FFF0B3)",
+  // source for hex code was legacy token Y75
+
+  /** yellowOrange - medium */
+  ['#FFC400']: "var(--ds-background-accent-orange-subtle, #FFC400)",
+  // source for hex code was legacy token Y200
+
+  /** yellowOrange - strong */
+  ['#FF991F']: "var(--ds-icon-accent-orange, #FF991F)",
+  // source for hex code was legacy token Y400
+  // red
+
+  /** red - light */
+  ['#FFBDAD']: "var(--ds-background-accent-red-subtler, #FFBDAD)",
+  // source for hex code was legacy token R75
+
+  /** red - medium */
+  ['#FF5630']: "var(--ds-icon-accent-red, #FF5630)",
+  // source for hex code was legacy token R300
+
+  /** red - strong */
+  ['#BF2600']: "var(--ds-text-accent-red, #BF2600)",
+  // source for hex code was legacy token R500
+  // purple
+
+  /** purple - light */
+  ['#EAE6FF']: "var(--ds-background-accent-purple-subtler, #EAE6FF)",
+  // source for hex code was legacy token P50
+
+  /** purple - medium */
+  ['#6554C0']: "var(--ds-icon-accent-purple, #6554C0)",
+  // source for hex code was legacy token P300
+
+  /** purple - strong */
+  ['#403294']: "var(--ds-text-accent-purple, #403294)",
+  // source for hex code was legacy token P500
+  // whiteGray
+
+  /** whiteGray - light */
+  ['#FFFFFF']: "var(--ds-text-inverse, #FFFFFF)",
+  // source for hex code was legacy token N0
+
+  /** whiteGray - medium */
+  ['#97A0AF']: "var(--ds-icon-accent-gray, #97A0AF)",
+  // source for hex code was legacy token N80
+
+  /** whiteGray - strong */
+  ['#172B4D']: "var(--ds-text, #172B4D)" // source for hex code was legacy token N800
+
+};

package/dist/es2019/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/editor-palette",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/esm/background.js

@@ -0,0 +1,36 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _editorBackgroundPale;
+
+// This import will be stripped on build
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+/**
+ * This takes an adf hex color and returns a matching 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 = hexToBackgroundPaletteColor('#FFFFFF');
+ * //     ^? const cssValue: string
+ * <div 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 hexToEditorBackgroundPaletteColor(hexColor) {
+  // Ts ignore used to allow use of conditional return type
+  // (preferencing better type on consumption over safety in implementation)
+  // @ts-ignore
+  return editorBackgroundPalette[hexColor.toUpperCase()];
+}
+// Colors taken from
+// https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
+// values are asserted to improve generated type declarations
+export var editorBackgroundPalette = (_editorBackgroundPale = {}, _defineProperty(_editorBackgroundPale, '#DEEBFF', "var(--ds-background-accent-blue-subtlest, #DEEBFF)"), _defineProperty(_editorBackgroundPale, '#B3D4FF', "var(--ds-background-accent-blue-subtler, #B3D4FF)"), _defineProperty(_editorBackgroundPale, '#4C9AFF', "var(--ds-background-accent-blue-subtle, #4C9AFF)"), _defineProperty(_editorBackgroundPale, '#E6FCFF', "var(--ds-background-accent-teal-subtlest, #E6FCFF)"), _defineProperty(_editorBackgroundPale, '#B3F5FF', "var(--ds-background-accent-teal-subtler, #B3F5FF)"), _defineProperty(_editorBackgroundPale, '#79E2F2', "var(--ds-background-accent-teal-subtle, #79E2F2)"), _defineProperty(_editorBackgroundPale, '#E3FCEF', "var(--ds-background-accent-green-subtlest, #E3FCEF)"), _defineProperty(_editorBackgroundPale, '#ABF5D1', "var(--ds-background-accent-green-subtler, #ABF5D1)"), _defineProperty(_editorBackgroundPale, '#57D9A3', "var(--ds-background-accent-green-subtle, #57D9A3)"), _defineProperty(_editorBackgroundPale, '#FFFAE6', "var(--ds-background-accent-yellow-subtlest, #FFFAE6)"), _defineProperty(_editorBackgroundPale, '#FFF0B3', "var(--ds-background-accent-yellow-subtler, #FFF0B3)"), _defineProperty(_editorBackgroundPale, '#FFC400', "var(--ds-background-accent-orange-subtle, #FFC400)"), _defineProperty(_editorBackgroundPale, '#FFEBE6', "var(--ds-background-accent-red-subtlest, #FFEBE6)"), _defineProperty(_editorBackgroundPale, '#FFBDAD', "var(--ds-background-accent-red-subtler, #FFBDAD)"), _defineProperty(_editorBackgroundPale, '#FF8F73', "var(--ds-background-accent-red-subtle, #FF8F73)"), _defineProperty(_editorBackgroundPale, '#EAE6FF', "var(--ds-background-accent-purple-subtlest, #EAE6FF)"), _defineProperty(_editorBackgroundPale, '#C0B6F2', "var(--ds-background-accent-purple-subtler, #C0B6F2)"), _defineProperty(_editorBackgroundPale, '#998DD9', "var(--ds-background-accent-purple-subtle, #998DD9)"), _defineProperty(_editorBackgroundPale, '#FFFFFF', "var(--ds-surface, #FFFFFF)"), _defineProperty(_editorBackgroundPale, '#F4F5F7', "var(--ds-background-accent-gray-subtlest, #F4F5F7)"), _defineProperty(_editorBackgroundPale, '#B3BAC5', "var(--ds-background-accent-gray-subtle, #B3BAC5)"), _editorBackgroundPale);

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export { hexToEditorBackgroundPaletteColor, editorBackgroundPalette } from './background';
+export { hexToEditorTextPaletteColor, editorTextPalette } from './text';

package/dist/esm/text.js

@@ -0,0 +1,34 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _editorTextPalette;
+
+// This import will be stripped on build
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+/**
+ * This takes an adf hex color and returns a matching text 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 = hexToTextPaletteColor('#0747A6');
+ * //     ^? const cssValue: string
+ * <span style={{textColor: 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 hexToEditorTextPaletteColor(hexColor) {
+  // Ts ignore used to allow use of conditional return type
+  // (preferencing better type on consumption over safety in implementation)
+  // @ts-ignore
+  return editorTextPalette[hexColor.toUpperCase()];
+}
+// Colors taken from
+// https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
+// values are asserted to improve generated type declarations
+export var editorTextPalette = (_editorTextPalette = {}, _defineProperty(_editorTextPalette, '#B3D4FF', "var(--ds-background-accent-blue-subtler, #B3D4FF)"), _defineProperty(_editorTextPalette, '#4C9AFF', "var(--ds-icon-accent-blue, #4C9AFF)"), _defineProperty(_editorTextPalette, '#0747A6', "var(--ds-text-accent-blue, #0747A6)"), _defineProperty(_editorTextPalette, '#B3F5FF', "var(--ds-background-accent-teal-subtler, #B3F5FF)"), _defineProperty(_editorTextPalette, '#00B8D9', "var(--ds-icon-accent-teal, #00B8D9)"), _defineProperty(_editorTextPalette, '#008DA6', "var(--ds-text-accent-teal, #008DA6)"), _defineProperty(_editorTextPalette, '#ABF5D1', "var(--ds-background-accent-green-subtler, #ABF5D1)"), _defineProperty(_editorTextPalette, '#36B37E', "var(--ds-icon-accent-green, #36B37E)"), _defineProperty(_editorTextPalette, '#006644', "var(--ds-text-accent-green, #006644)"), _defineProperty(_editorTextPalette, '#FFF0B3', "var(--ds-background-accent-yellow-subtler, #FFF0B3)"), _defineProperty(_editorTextPalette, '#FFC400', "var(--ds-background-accent-orange-subtle, #FFC400)"), _defineProperty(_editorTextPalette, '#FF991F', "var(--ds-icon-accent-orange, #FF991F)"), _defineProperty(_editorTextPalette, '#FFBDAD', "var(--ds-background-accent-red-subtler, #FFBDAD)"), _defineProperty(_editorTextPalette, '#FF5630', "var(--ds-icon-accent-red, #FF5630)"), _defineProperty(_editorTextPalette, '#BF2600', "var(--ds-text-accent-red, #BF2600)"), _defineProperty(_editorTextPalette, '#EAE6FF', "var(--ds-background-accent-purple-subtler, #EAE6FF)"), _defineProperty(_editorTextPalette, '#6554C0', "var(--ds-icon-accent-purple, #6554C0)"), _defineProperty(_editorTextPalette, '#403294', "var(--ds-text-accent-purple, #403294)"), _defineProperty(_editorTextPalette, '#FFFFFF', "var(--ds-text-inverse, #FFFFFF)"), _defineProperty(_editorTextPalette, '#97A0AF', "var(--ds-icon-accent-gray, #97A0AF)"), _defineProperty(_editorTextPalette, '#172B4D', "var(--ds-text, #172B4D)"), _editorTextPalette);

package/dist/esm/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/editor-palette",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/types/background.d.ts

@@ -0,0 +1,67 @@
+/**
+ * This takes an adf hex color and returns a matching 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 = hexToBackgroundPaletteColor('#FFFFFF');
+ * //     ^? const cssValue: string
+ * <div 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 hexToEditorBackgroundPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? EditorBackgroundPalette[HexColor] : string | undefined;
+declare type EditorBackgroundPalette = typeof editorBackgroundPalette;
+export declare type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
+export declare const editorBackgroundPalette: {
+    /** blue - light */
+    "#DEEBFF": "var(--ds-background-accent-blue-subtlest, #DEEBFF)";
+    /** blue - medium */
+    "#B3D4FF": "var(--ds-background-accent-blue-subtler, #B3D4FF)";
+    /** blue - strong */
+    "#4C9AFF": "var(--ds-background-accent-blue-subtle, #4C9AFF)";
+    /** teal - light */
+    "#E6FCFF": "var(--ds-background-accent-teal-subtlest, #E6FCFF)";
+    /** teal - medium */
+    "#B3F5FF": "var(--ds-background-accent-teal-subtler, #B3F5FF)";
+    /** teal - strong */
+    "#79E2F2": "var(--ds-background-accent-teal-subtle, #79E2F2)";
+    /** green - light */
+    "#E3FCEF": "var(--ds-background-accent-green-subtlest, #E3FCEF)";
+    /** green - medium */
+    "#ABF5D1": "var(--ds-background-accent-green-subtler, #ABF5D1)";
+    /** green - strong */
+    "#57D9A3": "var(--ds-background-accent-green-subtle, #57D9A3)";
+    /** yellowOrange - light */
+    "#FFFAE6": "var(--ds-background-accent-yellow-subtlest, #FFFAE6)";
+    /** yellowOrange - medium */
+    "#FFF0B3": "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
+    /** yellowOrange - strong */
+    "#FFC400": "var(--ds-background-accent-orange-subtle, #FFC400)";
+    /** red - light */
+    "#FFEBE6": "var(--ds-background-accent-red-subtlest, #FFEBE6)";
+    /** red - medium */
+    "#FFBDAD": "var(--ds-background-accent-red-subtler, #FFBDAD)";
+    /** red - strong */
+    "#FF8F73": "var(--ds-background-accent-red-subtle, #FF8F73)";
+    /** purple - light */
+    "#EAE6FF": "var(--ds-background-accent-purple-subtlest, #EAE6FF)";
+    /** purple - medium */
+    "#C0B6F2": "var(--ds-background-accent-purple-subtler, #C0B6F2)";
+    /** purple - strong */
+    "#998DD9": "var(--ds-background-accent-purple-subtle, #998DD9)";
+    /** whiteGray - light */
+    "#FFFFFF": "var(--ds-surface, #FFFFFF)";
+    /** whiteGray - medium */
+    "#F4F5F7": "var(--ds-background-accent-gray-subtlest, #F4F5F7)";
+    /** whiteGray - strong */
+    "#B3BAC5": "var(--ds-background-accent-gray-subtle, #B3BAC5)";
+};
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { hexToEditorBackgroundPaletteColor, editorBackgroundPalette, } from './background';
+export { hexToEditorTextPaletteColor, editorTextPalette } from './text';

package/dist/types/text.d.ts

@@ -0,0 +1,65 @@
+/**
+ * This takes an adf hex color and returns a matching text 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 = hexToTextPaletteColor('#0747A6');
+ * //     ^? const cssValue: string
+ * <span style={{textColor: 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 hexToEditorTextPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTextPaletteKey ? EditorTextPalette[HexColor] : string | undefined;
+declare type EditorTextPalette = typeof editorTextPalette;
+export declare type EditorTextPaletteKey = keyof EditorTextPalette;
+export declare const editorTextPalette: {
+    /** blue - light */
+    "#B3D4FF": "var(--ds-background-accent-blue-subtler, #B3D4FF)";
+    /** blue - medium */
+    "#4C9AFF": "var(--ds-icon-accent-blue, #4C9AFF)";
+    /** blue - strong */
+    "#0747A6": "var(--ds-text-accent-blue, #0747A6)";
+    /** teal - light */
+    "#B3F5FF": "var(--ds-background-accent-teal-subtler, #B3F5FF)";
+    /** teal - medium */
+    "#00B8D9": "var(--ds-icon-accent-teal, #00B8D9)";
+    /** teal - strong */
+    "#008DA6": "var(--ds-text-accent-teal, #008DA6)";
+    /** green - light */
+    "#ABF5D1": "var(--ds-background-accent-green-subtler, #ABF5D1)";
+    /** green - medium */
+    "#36B37E": "var(--ds-icon-accent-green, #36B37E)";
+    /** green - strong */
+    "#006644": "var(--ds-text-accent-green, #006644)";
+    /** yellowOrange - light */
+    "#FFF0B3": "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
+    /** yellowOrange - medium */
+    "#FFC400": "var(--ds-background-accent-orange-subtle, #FFC400)";
+    /** yellowOrange - strong */
+    "#FF991F": "var(--ds-icon-accent-orange, #FF991F)";
+    /** red - light */
+    "#FFBDAD": "var(--ds-background-accent-red-subtler, #FFBDAD)";
+    /** red - medium */
+    "#FF5630": "var(--ds-icon-accent-red, #FF5630)";
+    /** red - strong */
+    "#BF2600": "var(--ds-text-accent-red, #BF2600)";
+    /** purple - light */
+    "#EAE6FF": "var(--ds-background-accent-purple-subtler, #EAE6FF)";
+    /** purple - medium */
+    "#6554C0": "var(--ds-icon-accent-purple, #6554C0)";
+    /** purple - strong */
+    "#403294": "var(--ds-text-accent-purple, #403294)";
+    /** whiteGray - light */
+    "#FFFFFF": "var(--ds-text-inverse, #FFFFFF)";
+    /** whiteGray - medium */
+    "#97A0AF": "var(--ds-icon-accent-gray, #97A0AF)";
+    /** whiteGray - strong */
+    "#172B4D": "var(--ds-text, #172B4D)";
+};
+export {};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@atlaskit/editor-palette",
+  "version": "0.1.0",
+  "description": "The editor palette",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "atlassian": {
+    "team": "Editor",
+    "releaseModel": "scheduled",
+    "website": {
+      "name": "Editor Palette"
+    }
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "atlaskit:src": "src/index.ts",
+  "af:exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0"
+  },
+  "devDependencies": {
+    "@atlaskit/docs": "*",
+    "@atlaskit/ssr": "*",
+    "@atlaskit/tokens": "^0.11.1",
+    "@atlaskit/visual-regression": "*",
+    "@atlaskit/webdriver-runner": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@testing-library/react": "^12.1.5",
+    "react-dom": "^16.8.0",
+    "typescript": "4.5.5",
+    "wait-for-expect": "^1.2.0"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": [
+        "atlassian-conventions"
+      ],
+      "circular-dependencies": [
+        "file-and-folder-level"
+      ]
+    },
+    "@repo/internal": {
+      "deprecation": [
+        "no-deprecated-imports"
+      ],
+      "theming": "tokens"
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+}

package/report.api.md

@@ -0,0 +1,96 @@
+<!-- API Report Version: 2.2 -->
+
+## API Report File for "@atlaskit/editor-palette"
+
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
+
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
+
+```ts
+// @public (undocumented)
+type EditorBackgroundPalette = typeof editorBackgroundPalette;
+
+// @public (undocumented)
+export const editorBackgroundPalette: {
+  '#DEEBFF': 'var(--ds-background-accent-blue-subtlest, #DEEBFF)';
+  '#B3D4FF': 'var(--ds-background-accent-blue-subtler, #B3D4FF)';
+  '#4C9AFF': 'var(--ds-background-accent-blue-subtle, #4C9AFF)';
+  '#E6FCFF': 'var(--ds-background-accent-teal-subtlest, #E6FCFF)';
+  '#B3F5FF': 'var(--ds-background-accent-teal-subtler, #B3F5FF)';
+  '#79E2F2': 'var(--ds-background-accent-teal-subtle, #79E2F2)';
+  '#E3FCEF': 'var(--ds-background-accent-green-subtlest, #E3FCEF)';
+  '#ABF5D1': 'var(--ds-background-accent-green-subtler, #ABF5D1)';
+  '#57D9A3': 'var(--ds-background-accent-green-subtle, #57D9A3)';
+  '#FFFAE6': 'var(--ds-background-accent-yellow-subtlest, #FFFAE6)';
+  '#FFF0B3': 'var(--ds-background-accent-yellow-subtler, #FFF0B3)';
+  '#FFC400': 'var(--ds-background-accent-orange-subtle, #FFC400)';
+  '#FFEBE6': 'var(--ds-background-accent-red-subtlest, #FFEBE6)';
+  '#FFBDAD': 'var(--ds-background-accent-red-subtler, #FFBDAD)';
+  '#FF8F73': 'var(--ds-background-accent-red-subtle, #FF8F73)';
+  '#EAE6FF': 'var(--ds-background-accent-purple-subtlest, #EAE6FF)';
+  '#C0B6F2': 'var(--ds-background-accent-purple-subtler, #C0B6F2)';
+  '#998DD9': 'var(--ds-background-accent-purple-subtle, #998DD9)';
+  '#FFFFFF': 'var(--ds-surface, #FFFFFF)';
+  '#F4F5F7': 'var(--ds-background-accent-gray-subtlest, #F4F5F7)';
+  '#B3BAC5': 'var(--ds-background-accent-gray-subtle, #B3BAC5)';
+};
+
+// @public (undocumented)
+type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
+
+// @public (undocumented)
+type EditorTextPalette = typeof editorTextPalette;
+
+// @public (undocumented)
+export const editorTextPalette: {
+  '#B3D4FF': 'var(--ds-background-accent-blue-subtler, #B3D4FF)';
+  '#4C9AFF': 'var(--ds-icon-accent-blue, #4C9AFF)';
+  '#0747A6': 'var(--ds-text-accent-blue, #0747A6)';
+  '#B3F5FF': 'var(--ds-background-accent-teal-subtler, #B3F5FF)';
+  '#00B8D9': 'var(--ds-icon-accent-teal, #00B8D9)';
+  '#008DA6': 'var(--ds-text-accent-teal, #008DA6)';
+  '#ABF5D1': 'var(--ds-background-accent-green-subtler, #ABF5D1)';
+  '#36B37E': 'var(--ds-icon-accent-green, #36B37E)';
+  '#006644': 'var(--ds-text-accent-green, #006644)';
+  '#FFF0B3': 'var(--ds-background-accent-yellow-subtler, #FFF0B3)';
+  '#FFC400': 'var(--ds-background-accent-orange-subtle, #FFC400)';
+  '#FF991F': 'var(--ds-icon-accent-orange, #FF991F)';
+  '#FFBDAD': 'var(--ds-background-accent-red-subtler, #FFBDAD)';
+  '#FF5630': 'var(--ds-icon-accent-red, #FF5630)';
+  '#BF2600': 'var(--ds-text-accent-red, #BF2600)';
+  '#EAE6FF': 'var(--ds-background-accent-purple-subtler, #EAE6FF)';
+  '#6554C0': 'var(--ds-icon-accent-purple, #6554C0)';
+  '#403294': 'var(--ds-text-accent-purple, #403294)';
+  '#FFFFFF': 'var(--ds-text-inverse, #FFFFFF)';
+  '#97A0AF': 'var(--ds-icon-accent-gray, #97A0AF)';
+  '#172B4D': 'var(--ds-text, #172B4D)';
+};
+
+// @public (undocumented)
+type EditorTextPaletteKey = keyof EditorTextPalette;
+
+// @public
+export function hexToEditorBackgroundPaletteColor<HexColor extends string>(
+  hexColor: HexColor,
+): HexColor extends EditorBackgroundPaletteKey
+  ? EditorBackgroundPalette[HexColor]
+  : string | undefined;
+
+// @public
+export function hexToEditorTextPaletteColor<HexColor extends string>(
+  hexColor: HexColor,
+): HexColor extends EditorTextPaletteKey
+  ? EditorTextPalette[HexColor]
+  : string | undefined;
+
+// (No @packageDocumentation comment for this package)
+```
+
+<!--SECTION END: Main Entry Types-->