@atlaskit/editor-palette 1.5.2 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
+
 ## 1.5.2
 
 ### 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/table-charts.js

@@ -59,6 +59,7 @@ function hexToEditorTableChartsPaletteRawValue(hexColor) {
 // 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
+
 /**
  * Tokenize hex codes into DST chart colors or
  *  into DST background.accent colors.

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/background.js

@@ -50,6 +50,7 @@ export function hexToEditorBackgroundPaletteRawValue(hexColor) {
 }
 // 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
  * Using object structure as getValue() function needed for table values, and other
@@ -82,108 +83,91 @@ export const editorBackgroundPalette = {
     getValue: fallback => getTokenValue('color.background.accent.teal.subtlest', fallback),
     token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)" // source for hex code was legacy token T50,
   },
-
   /** teal - medium */
   ['#B3F5FF']: {
     getValue: fallback => getTokenValue('color.background.accent.teal.subtler', fallback),
     token: "var(--ds-background-accent-teal-subtler, #B3F5FF)" // source for hex code was legacy token T75,
   },
-
   /** teal - strong */
   ['#79E2F2']: {
     getValue: fallback => getTokenValue('color.background.accent.teal.subtle', fallback),
     token: "var(--ds-background-accent-teal-subtle, #79E2F2)" // source for hex code was legacy token T100,
   },
-
   // green
   /** green - light */
   ['#E3FCEF']: {
     getValue: fallback => getTokenValue('color.background.accent.green.subtlest', fallback),
     token: "var(--ds-background-accent-green-subtlest, #E3FCEF)" // source for hex code was legacy token G50,
   },
-
   /** green - medium */
   ['#ABF5D1']: {
     getValue: fallback => getTokenValue('color.background.accent.green.subtler', fallback),
     token: "var(--ds-background-accent-green-subtler, #ABF5D1)" // source for hex code was legacy token G75,
   },
-
   /** green - strong */
   ['#57D9A3']: {
     getValue: fallback => getTokenValue('color.background.accent.green.subtle', fallback),
     token: "var(--ds-background-accent-green-subtle, #57D9A3)" // source for hex code was legacy token G200,
   },
-
   // yellowOrange
   /** yellowOrange - light */
   ['#FFFAE6']: {
     getValue: fallback => getTokenValue('color.background.accent.yellow.subtlest', fallback),
     token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)" // source for hex code was legacy token Y50,
   },
-
   /** yellowOrange - medium */
   ['#FFF0B3']: {
     getValue: fallback => getTokenValue('color.background.accent.yellow.subtler', fallback),
     token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)" // source for hex code was legacy token Y75,
   },
-
   /** yellowOrange - strong */
   ['#FFC400']: {
     getValue: fallback => getTokenValue('color.background.accent.orange.subtle', fallback),
     token: "var(--ds-background-accent-orange-subtle, #FFC400)" // source for hex code was legacy token Y200,
   },
-
   // red
   /** red - light */
   ['#FFEBE6']: {
     getValue: fallback => getTokenValue('color.background.accent.red.subtlest', fallback),
     token: "var(--ds-background-accent-red-subtlest, #FFEBE6)" // source for hex code was legacy token R50,
   },
-
   /** red - medium */
   ['#FFBDAD']: {
     getValue: fallback => getTokenValue('color.background.accent.red.subtler', fallback),
     token: "var(--ds-background-accent-red-subtler, #FFBDAD)" // source for hex code was legacy token R75,
   },
-
   /** red - strong */
   ['#FF8F73']: {
     getValue: fallback => getTokenValue('color.background.accent.red.subtle', fallback),
     token: "var(--ds-background-accent-red-subtle, #FF8F73)" // source for hex code was legacy token R100,
   },
-
   // purple
   /** purple - light */
   ['#EAE6FF']: {
     getValue: fallback => getTokenValue('color.background.accent.purple.subtlest', fallback),
     token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)" // source for hex code was legacy token P50,
   },
-
   /** purple - medium */
   ['#C0B6F2']: {
     getValue: fallback => getTokenValue('color.background.accent.purple.subtler', fallback),
     token: "var(--ds-background-accent-purple-subtler, #C0B6F2)" // source for hex code was legacy token P75,
   },
-
   /** purple - strong */
   ['#998DD9']: {
     getValue: fallback => getTokenValue('color.background.accent.purple.subtle', fallback),
     token: "var(--ds-background-accent-purple-subtle, #998DD9)" // source for hex code was legacy token P100,
   },
-
   // whiteGray
   /** whiteGray - light */
   ['#FFFFFF']: {
     getValue: fallback => getTokenValue('elevation.surface', fallback),
     token: "var(--ds-surface, #FFFFFF)" // source for hex code was legacy token N0,
   },
-
   /** whiteGray - medium */
   ['#F4F5F7']: {
     getValue: fallback => getTokenValue('color.background.accent.gray.subtlest', fallback),
     token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)" // source for hex code was legacy token N20,
   },
-
   /** whiteGray - strong */
   ['#B3BAC5']: {
     getValue: fallback => getTokenValue('color.background.accent.gray.subtle', fallback),

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/table-charts.js

@@ -51,6 +51,7 @@ export function hexToEditorTableChartsPaletteRawValue(hexColor) {
 // 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
+
 /**
  * Tokenize hex codes into DST chart colors or
  *  into DST background.accent colors.

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/background.js

@@ -52,6 +52,7 @@ export function hexToEditorBackgroundPaletteRawValue(hexColor) {
 }
 // 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
  * Using object structure as getValue() function needed for table values, and other

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/table-charts.js

@@ -53,6 +53,7 @@ export function hexToEditorTableChartsPaletteRawValue(hexColor) {
 // 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
+
 /**
  * Tokenize hex codes into DST chart colors or
  *  into DST background.accent colors.

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/docs/0-intro.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { AtlassianInternalWarning, code, md } from '@atlaskit/docs';
 import SectionMessage from '@atlaskit/section-message';
+import { token } from '@atlaskit/tokens';
 
 export default md`
 ${(<AtlassianInternalWarning />)}
@@ -36,7 +37,7 @@ or reach out to the Design System Team via the [Atlassian Developer Community fo
 ## API documentation
 
 ${(
-  <div style={{ marginTop: '0.5rem' }}>
+  <div style={{ marginTop: token('space.100', '8px') }}>
     <SectionMessage
       title="Design token names and values are an implementation detail."
       appearance="warning"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-palette",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "The editor palette",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -13,9 +13,10 @@
     "inPublicMirror": true,
     "website": {
       "name": "Editor Palette"
-    }
+    },
+    "runReact18": false
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
@@ -34,7 +35,7 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.44.0",
     "@babel/runtime": "^7.0.0"
   },
   "devDependencies": {
@@ -42,7 +43,7 @@
     "@testing-library/react": "^12.1.5",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "typescript": "~4.9.5",
+    "typescript": "~5.4.2",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {
@@ -55,13 +56,14 @@
       ]
     },
     "@repo/internal": {
-      "deprecation": [
-        "no-deprecated-imports"
-      ],
+      "deprecation": "no-deprecated-imports",
       "design-tokens": [
         "color"
+      ],
+      "styling": [
+        "emotion"
       ]
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}

package/tmp/api-report-tmp.d.ts

@@ -1,319 +0,0 @@
-## API Report File for "@atlaskit/editor-palette"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-// @public (undocumented)
-type EditorBackgroundPalette = typeof editorBackgroundPalette;
-
-// @public
-const editorBackgroundPalette: {
-    "#DEEBFF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)";
-    };
-    "#B3D4FF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-blue-subtler, #B3D4FF)";
-    };
-    "#4C9AFF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-blue-subtle, #4C9AFF)";
-    };
-    "#E6FCFF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)";
-    };
-    "#B3F5FF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-teal-subtler, #B3F5FF)";
-    };
-    "#79E2F2": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-teal-subtle, #79E2F2)";
-    };
-    "#E3FCEF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-green-subtlest, #E3FCEF)";
-    };
-    "#ABF5D1": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-green-subtler, #ABF5D1)";
-    };
-    "#57D9A3": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-green-subtle, #57D9A3)";
-    };
-    "#FFFAE6": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)";
-    };
-    "#FFF0B3": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
-    };
-    "#FFC400": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-orange-subtle, #FFC400)";
-    };
-    "#FFEBE6": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-red-subtlest, #FFEBE6)";
-    };
-    "#FFBDAD": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-red-subtler, #FFBDAD)";
-    };
-    "#FF8F73": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-red-subtle, #FF8F73)";
-    };
-    "#EAE6FF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)";
-    };
-    "#C0B6F2": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-purple-subtler, #C0B6F2)";
-    };
-    "#998DD9": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-purple-subtle, #998DD9)";
-    };
-    "#FFFFFF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-surface, #FFFFFF)";
-    };
-    "#F4F5F7": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)";
-    };
-    "#B3BAC5": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-gray-subtle, #B3BAC5)";
-    };
-};
-
-// @public (undocumented)
-type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
-
-// @public (undocumented)
-type EditorBorderPalette = typeof editorBorderPalette;
-
-// @public (undocumented)
-const editorBorderPalette: {
-    "#091E4224": "var(--ds-border, #091E4224)";
-    "#758195": "var(--ds-border-bold, #758195)";
-    "#172B4D": "var(--ds-text, #172B4D)";
-};
-
-// @public (undocumented)
-type EditorBorderPaletteKey = keyof EditorBorderPalette;
-
-// @public (undocumented)
-type EditorTableChartsPalette = typeof editorTableChartsPalette;
-
-// @public
-const editorTableChartsPalette: {
-    "#7AB2FF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-blue-subtle, #7AB2FF)";
-    };
-    "#60C6D2": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-teal-subtle, #60C6D2)";
-    };
-    "#6BE1B0": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-green-subtle, #6BE1B0)";
-    };
-    "#FFDB57": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-yellow-subtle, #FFDB57)";
-    };
-    "#FAA53D": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-orange-subtle, #FAA53D)";
-    };
-    "#FF8F73": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-red-subtle, #FF8F73)";
-    };
-    "#E774BB": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-magenta-subtle, #E774BB)";
-    };
-    "#B5A7FB": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-purple-subtle, #B5A7FB)";
-    };
-    "#8993A5": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-gray-subtler, #8993A5)";
-    };
-    "#247FFF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-blue-bold, #247FFF)";
-    };
-    "#1D9AAA": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-teal-bold, #1D9AAA)";
-    };
-    "#23A971": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-green-bold, #23A971)";
-    };
-    "#FFBE33": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-yellow-bold, #FFBE33)";
-    };
-    "#D97008": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-orange-bold, #D97008)";
-    };
-    "#FC552C": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-red-bold, #FC552C)";
-    };
-    "#DA62AC": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-magenta-bold, #DA62AC)";
-    };
-    "#8B77EE": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-purple-bold, #8B77EE)";
-    };
-    "#8590A2": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-gray-bold, #8590A2)";
-    };
-    "#0055CC": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-blue-bolder, #0055CC)";
-    };
-    "#1D7F8C": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-teal-bolder, #1D7F8C)";
-    };
-    "#177D52": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-green-bolder, #177D52)";
-    };
-    "#FF9D00": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-yellow-bolder, #FF9D00)";
-    };
-    "#B65C02": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-orange-bolder, #B65C02)";
-    };
-    "#D32D03": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-red-bolder, #D32D03)";
-    };
-    "#CD519D": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-magenta-bolder, #CD519D)";
-    };
-    "#5A43D0": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-purple-bolder, #5A43D0)";
-    };
-    "#758195": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-gray-bolder, #758195)";
-    };
-    "#003884": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-blue-boldest, #003884)";
-    };
-    "#206B74": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-teal-boldest, #206B74)";
-    };
-    "#055C3F": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-green-boldest, #055C3F)";
-    };
-    "#946104": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-yellow-boldest, #946104)";
-    };
-    "#974F0C": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-orange-boldest, #974F0C)";
-    };
-    "#A32000": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-red-boldest, #A32000)";
-    };
-    "#943D73": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-magenta-boldest, #943D73)";
-    };
-    "#44368B": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-purple-boldest, #44368B)";
-    };
-    "#44546F": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-chart-gray-boldest, #44546F)";
-    };
-};
-
-// @public (undocumented)
-type EditorTableChartsPaletteKey = keyof EditorTableChartsPalette;
-
-// @public (undocumented)
-type EditorTextPalette = typeof editorTextPalette;
-
-// @public (undocumented)
-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]['token'] : string | undefined;
-
-// @public
-export function hexToEditorBackgroundPaletteRawValue<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? string : undefined;
-
-// @public
-export function hexToEditorBorderPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBorderPaletteKey ? EditorBorderPalette[HexColor] : string | undefined;
-
-// @public
-export function hexToEditorTableChartsPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? EditorTableChartsPalette[HexColor]['token'] : string | undefined;
-
-// @public
-export function hexToEditorTableChartsPaletteRawValue<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? string : undefined;
-
-// @public
-export function hexToEditorTextPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTextPaletteKey ? EditorTextPalette[HexColor] : string | undefined;
-
-// (No @packageDocumentation comment for this package)
-
-```