@atlaskit/editor-palette 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-palette
 
+## 1.4.2
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
+## 1.4.1
+
+### Patch Changes
+
+- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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

package/dist/types/background.d.ts

@@ -19,8 +19,8 @@
  */
 export declare function hexToEditorBackgroundPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? EditorBackgroundPalette[HexColor]['token'] : string | undefined;
 export declare function hexToEditorBackgroundPaletteColorTokenName<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? EditorBackgroundPalette[HexColor]['tokenName'] : EditorBackgroundPaletteTokenNames | undefined;
-declare type EditorBackgroundPalette = typeof editorBackgroundPalette;
-export declare type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
+type EditorBackgroundPalette = typeof editorBackgroundPalette;
+export type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
 export declare const editorBackgroundPalette: {
     /** blue - light */
     "#DEEBFF": {
@@ -129,5 +129,5 @@ export declare const editorBackgroundPalette: {
     };
 };
 declare const tokenNames: ("color.background.accent.blue.subtlest" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtle" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtle" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtler" | "color.background.accent.green.subtle" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtler" | "color.background.accent.orange.subtle" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtler" | "color.background.accent.red.subtle" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtle" | "elevation.surface" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtle")[];
-export declare type EditorBackgroundPaletteTokenNames = (typeof tokenNames)[number];
+export type EditorBackgroundPaletteTokenNames = (typeof tokenNames)[number];
 export {};

package/dist/types/border.d.ts

@@ -16,8 +16,8 @@
  * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
  */
 export declare function hexToEditorBorderPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBorderPaletteKey ? EditorBorderPalette[HexColor] : string | undefined;
-declare type EditorBorderPalette = typeof editorBorderPalette;
-export declare type EditorBorderPaletteKey = keyof EditorBorderPalette;
+type EditorBorderPalette = typeof editorBorderPalette;
+export type EditorBorderPaletteKey = keyof EditorBorderPalette;
 export declare const editorBorderPalette: {
     /** gray - subtle */
     "#091E4224": "var(--ds-border, #091E4224)";

package/dist/types/table-charts.d.ts

@@ -19,8 +19,8 @@
  */
 export declare function hexToEditorTableChartsPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? EditorTableChartsPalette[HexColor]['token'] : string | undefined;
 export declare function hexToEditorTableChartsPaletteColorTokenName<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? EditorTableChartsPalette[HexColor]['tokenName'] : EditorBackgroundPaletteTokenNames | undefined;
-declare type EditorTableChartsPalette = typeof editorTableChartsPalette;
-export declare type EditorTableChartsPaletteKey = keyof EditorTableChartsPalette;
+type EditorTableChartsPalette = typeof editorTableChartsPalette;
+export type EditorTableChartsPaletteKey = keyof EditorTableChartsPalette;
 /**
  * Tokenize hex codes into DST chart colors or
  *  into DST background.accent colors.
@@ -178,5 +178,5 @@ declare const editorTableChartsPalette: {
     };
 };
 declare const tokenNames: ("color.background.accent.blue.subtle" | "color.background.accent.teal.subtle" | "color.background.accent.green.subtle" | "color.background.accent.orange.subtle" | "color.background.accent.red.subtle" | "color.background.accent.purple.subtle" | "color.background.accent.yellow.subtle" | "color.background.accent.magenta.subtle" | "color.background.accent.gray.subtler" | "color.chart.blue.bold" | "color.chart.teal.bold" | "color.chart.green.bold" | "color.chart.yellow.bold" | "color.chart.orange.bold" | "color.chart.red.bold" | "color.chart.magenta.bold" | "color.chart.purple.bold" | "color.chart.gray.bold" | "color.chart.blue.bolder" | "color.chart.teal.bolder" | "color.chart.green.bolder" | "color.chart.yellow.bolder" | "color.chart.orange.bolder" | "color.chart.red.bolder" | "color.chart.magenta.bolder" | "color.chart.purple.bolder" | "color.chart.gray.bolder" | "color.chart.blue.boldest" | "color.chart.teal.boldest" | "color.chart.green.boldest" | "color.chart.yellow.boldest" | "color.chart.orange.boldest" | "color.chart.red.boldest" | "color.chart.magenta.boldest" | "color.chart.purple.boldest" | "color.chart.gray.boldest")[];
-export declare type EditorBackgroundPaletteTokenNames = (typeof tokenNames)[number];
+export type EditorBackgroundPaletteTokenNames = (typeof tokenNames)[number];
 export {};

package/dist/types/text.d.ts

@@ -16,8 +16,8 @@
  * - **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;
+type EditorTextPalette = typeof editorTextPalette;
+export type EditorTextPaletteKey = keyof EditorTextPalette;
 export declare const editorTextPalette: {
     /** blue - light */
     "#B3D4FF": "var(--ds-background-accent-blue-subtler, #B3D4FF)";

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

@@ -0,0 +1,133 @@
+/**
+ * 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]['token'] : string | undefined;
+export declare function hexToEditorBackgroundPaletteColorTokenName<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? EditorBackgroundPalette[HexColor]['tokenName'] : EditorBackgroundPaletteTokenNames | undefined;
+type EditorBackgroundPalette = typeof editorBackgroundPalette;
+export type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
+export declare const editorBackgroundPalette: {
+    /** blue - light */
+    "#DEEBFF": {
+        tokenName: "color.background.accent.blue.subtlest";
+        token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)";
+    };
+    /** blue - medium */
+    "#B3D4FF": {
+        tokenName: "color.background.accent.blue.subtler";
+        token: "var(--ds-background-accent-blue-subtler, #B3D4FF)";
+    };
+    /** blue - strong */
+    "#4C9AFF": {
+        tokenName: "color.background.accent.blue.subtle";
+        token: "var(--ds-background-accent-blue-subtle, #4C9AFF)";
+    };
+    /** teal - light */
+    "#E6FCFF": {
+        tokenName: "color.background.accent.teal.subtlest";
+        token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)";
+    };
+    /** teal - medium */
+    "#B3F5FF": {
+        tokenName: "color.background.accent.teal.subtler";
+        token: "var(--ds-background-accent-teal-subtler, #B3F5FF)";
+    };
+    /** teal - strong */
+    "#79E2F2": {
+        tokenName: "color.background.accent.teal.subtle";
+        token: "var(--ds-background-accent-teal-subtle, #79E2F2)";
+    };
+    /** green - light */
+    "#E3FCEF": {
+        tokenName: "color.background.accent.green.subtlest";
+        token: "var(--ds-background-accent-green-subtlest, #E3FCEF)";
+    };
+    /** green - medium */
+    "#ABF5D1": {
+        tokenName: "color.background.accent.green.subtler";
+        token: "var(--ds-background-accent-green-subtler, #ABF5D1)";
+    };
+    /** green - strong */
+    "#57D9A3": {
+        tokenName: "color.background.accent.green.subtle";
+        token: "var(--ds-background-accent-green-subtle, #57D9A3)";
+    };
+    /** yellowOrange - light */
+    "#FFFAE6": {
+        tokenName: "color.background.accent.yellow.subtlest";
+        token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)";
+    };
+    /** yellowOrange - medium */
+    "#FFF0B3": {
+        tokenName: "color.background.accent.yellow.subtler";
+        token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
+    };
+    /** yellowOrange - strong */
+    "#FFC400": {
+        tokenName: "color.background.accent.orange.subtle";
+        token: "var(--ds-background-accent-orange-subtle, #FFC400)";
+    };
+    /** red - light */
+    "#FFEBE6": {
+        tokenName: "color.background.accent.red.subtlest";
+        token: "var(--ds-background-accent-red-subtlest, #FFEBE6)";
+    };
+    /** red - medium */
+    "#FFBDAD": {
+        tokenName: "color.background.accent.red.subtler";
+        token: "var(--ds-background-accent-red-subtler, #FFBDAD)";
+    };
+    /** red - strong */
+    "#FF8F73": {
+        tokenName: "color.background.accent.red.subtle";
+        token: "var(--ds-background-accent-red-subtle, #FF8F73)";
+    };
+    /** purple - light */
+    "#EAE6FF": {
+        tokenName: "color.background.accent.purple.subtlest";
+        token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)";
+    };
+    /** purple - medium */
+    "#C0B6F2": {
+        tokenName: "color.background.accent.purple.subtler";
+        token: "var(--ds-background-accent-purple-subtler, #C0B6F2)";
+    };
+    /** purple - strong */
+    "#998DD9": {
+        tokenName: "color.background.accent.purple.subtle";
+        token: "var(--ds-background-accent-purple-subtle, #998DD9)";
+    };
+    /** whiteGray - light */
+    "#FFFFFF": {
+        tokenName: "elevation.surface";
+        token: "var(--ds-surface, #FFFFFF)";
+    };
+    /** whiteGray - medium */
+    "#F4F5F7": {
+        tokenName: "color.background.accent.gray.subtlest";
+        token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)";
+    };
+    /** whiteGray - strong */
+    "#B3BAC5": {
+        tokenName: "color.background.accent.gray.subtle";
+        token: "var(--ds-background-accent-gray-subtle, #B3BAC5)";
+    };
+};
+declare const tokenNames: ("color.background.accent.blue.subtlest" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtle" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtle" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtler" | "color.background.accent.green.subtle" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtler" | "color.background.accent.orange.subtle" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtler" | "color.background.accent.red.subtle" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtle" | "elevation.surface" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtle")[];
+export type EditorBackgroundPaletteTokenNames = (typeof tokenNames)[number];
+export {};

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

@@ -0,0 +1,29 @@
+/**
+ * This takes an adf hex color and returns a matching border 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 = hexToEditorBorderPaletteColor('#091E4224');
+ * //     ^? const cssValue: string
+ * <div style={{borderColor: 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 hexToEditorBorderPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBorderPaletteKey ? EditorBorderPalette[HexColor] : string | undefined;
+type EditorBorderPalette = typeof editorBorderPalette;
+export type EditorBorderPaletteKey = keyof EditorBorderPalette;
+export declare const editorBorderPalette: {
+    /** gray - subtle */
+    "#091E4224": "var(--ds-border, #091E4224)";
+    /** gray */
+    "#758195": "var(--ds-border-bold, #758195)";
+    /** gray - bold */
+    "#172B4D": "var(--ds-text, #172B4D)";
+};
+export {};

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

@@ -0,0 +1,4 @@
+export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteColorTokenName, } from './background';
+export { hexToEditorBorderPaletteColor } from './border';
+export { hexToEditorTextPaletteColor } from './text';
+export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteColorTokenName, } from './table-charts';

package/dist/types-ts4.5/table-charts.d.ts

@@ -0,0 +1,182 @@
+/**
+ * This takes an adf hex color and returns a matching chart 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 = hexToEditorTableChartsPaletteColor('#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 hexToEditorTableChartsPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? EditorTableChartsPalette[HexColor]['token'] : string | undefined;
+export declare function hexToEditorTableChartsPaletteColorTokenName<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? EditorTableChartsPalette[HexColor]['tokenName'] : EditorBackgroundPaletteTokenNames | undefined;
+type EditorTableChartsPalette = typeof editorTableChartsPalette;
+export type EditorTableChartsPaletteKey = keyof EditorTableChartsPalette;
+/**
+ * Tokenize hex codes into DST chart colors or
+ *  into DST background.accent colors.
+ *
+ * The hex codes do not match the DST tokens, they are
+ *  constants that are saved in the ADF that will be rendered
+ *  as the mapped DST token.
+ *
+ * https://product-fabric.atlassian.net/browse/ED-17042
+ */
+declare const editorTableChartsPalette: {
+    "#7AB2FF": {
+        tokenName: "color.background.accent.blue.subtle";
+        token: "var(--ds-background-accent-blue-subtle, #7AB2FF)";
+    };
+    "#60C6D2": {
+        tokenName: "color.background.accent.teal.subtle";
+        token: "var(--ds-background-accent-teal-subtle, #60C6D2)";
+    };
+    "#6BE1B0": {
+        tokenName: "color.background.accent.green.subtle";
+        token: "var(--ds-background-accent-green-subtle, #6BE1B0)";
+    };
+    "#FFDB57": {
+        tokenName: "color.background.accent.yellow.subtle";
+        token: "var(--ds-background-accent-yellow-subtle, #FFDB57)";
+    };
+    "#FAA53D": {
+        tokenName: "color.background.accent.orange.subtle";
+        token: "var(--ds-background-accent-orange-subtle, #FAA53D)";
+    };
+    "#FF8F73": {
+        tokenName: "color.background.accent.red.subtle";
+        token: "var(--ds-background-accent-red-subtle, #FF8F73)";
+    };
+    "#E774BB": {
+        tokenName: "color.background.accent.magenta.subtle";
+        token: "var(--ds-background-accent-magenta-subtle, #E774BB)";
+    };
+    "#B5A7FB": {
+        tokenName: "color.background.accent.purple.subtle";
+        token: "var(--ds-background-accent-purple-subtle, #B5A7FB)";
+    };
+    "#8993A5": {
+        tokenName: "color.background.accent.gray.subtler";
+        token: "var(--ds-background-accent-gray-subtler, #8993A5)";
+    };
+    "#247FFF": {
+        tokenName: "color.chart.blue.bold";
+        token: "var(--ds-chart-blue-bold, #247FFF)";
+    };
+    "#1D9AAA": {
+        tokenName: "color.chart.teal.bold";
+        token: "var(--ds-chart-teal-bold, #1D9AAA)";
+    };
+    "#23A971": {
+        tokenName: "color.chart.green.bold";
+        token: "var(--ds-chart-green-bold, #23A971)";
+    };
+    "#FFBE33": {
+        tokenName: "color.chart.yellow.bold";
+        token: "var(--ds-chart-yellow-bold, #FFBE33)";
+    };
+    "#D97008": {
+        tokenName: "color.chart.orange.bold";
+        token: "var(--ds-chart-orange-bold, #D97008)";
+    };
+    "#FC552C": {
+        tokenName: "color.chart.red.bold";
+        token: "var(--ds-chart-red-bold, #FC552C)";
+    };
+    "#DA62AC": {
+        tokenName: "color.chart.magenta.bold";
+        token: "var(--ds-chart-magenta-bold, #DA62AC)";
+    };
+    "#8B77EE": {
+        tokenName: "color.chart.purple.bold";
+        token: "var(--ds-chart-purple-bold, #8B77EE)";
+    };
+    "#8590A2": {
+        tokenName: "color.chart.gray.bold";
+        token: "var(--ds-chart-gray-bold, #8590A2)";
+    };
+    "#0055CC": {
+        tokenName: "color.chart.blue.bolder";
+        token: "var(--ds-chart-blue-bolder, #0055CC)";
+    };
+    "#1D7F8C": {
+        tokenName: "color.chart.teal.bolder";
+        token: "var(--ds-chart-teal-bolder, #1D7F8C)";
+    };
+    "#177D52": {
+        tokenName: "color.chart.green.bolder";
+        token: "var(--ds-chart-green-bolder, #177D52)";
+    };
+    "#FF9D00": {
+        tokenName: "color.chart.yellow.bolder";
+        token: "var(--ds-chart-yellow-bolder, #FF9D00)";
+    };
+    "#B65C02": {
+        tokenName: "color.chart.orange.bolder";
+        token: "var(--ds-chart-orange-bolder, #B65C02)";
+    };
+    "#D32D03": {
+        tokenName: "color.chart.red.bolder";
+        token: "var(--ds-chart-red-bolder, #D32D03)";
+    };
+    "#CD519D": {
+        tokenName: "color.chart.magenta.bolder";
+        token: "var(--ds-chart-magenta-bolder, #CD519D)";
+    };
+    "#5A43D0": {
+        tokenName: "color.chart.purple.bolder";
+        token: "var(--ds-chart-purple-bolder, #5A43D0)";
+    };
+    "#758195": {
+        tokenName: "color.chart.gray.bolder";
+        token: "var(--ds-chart-gray-bolder, #758195)";
+    };
+    "#003884": {
+        tokenName: "color.chart.blue.boldest";
+        token: "var(--ds-chart-blue-boldest, #003884)";
+    };
+    "#206B74": {
+        tokenName: "color.chart.teal.boldest";
+        token: "var(--ds-chart-teal-boldest, #206B74)";
+    };
+    "#055C3F": {
+        tokenName: "color.chart.green.boldest";
+        token: "var(--ds-chart-green-boldest, #055C3F)";
+    };
+    "#946104": {
+        tokenName: "color.chart.yellow.boldest";
+        token: "var(--ds-chart-yellow-boldest, #946104)";
+    };
+    "#974F0C": {
+        tokenName: "color.chart.orange.boldest";
+        token: "var(--ds-chart-orange-boldest, #974F0C)";
+    };
+    "#A32000": {
+        tokenName: "color.chart.red.boldest";
+        token: "var(--ds-chart-red-boldest, #A32000)";
+    };
+    "#943D73": {
+        tokenName: "color.chart.magenta.boldest";
+        token: "var(--ds-chart-magenta-boldest, #943D73)";
+    };
+    "#44368B": {
+        tokenName: "color.chart.purple.boldest";
+        token: "var(--ds-chart-purple-boldest, #44368B)";
+    };
+    "#44546F": {
+        tokenName: "color.chart.gray.boldest";
+        token: "var(--ds-chart-gray-boldest, #44546F)";
+    };
+};
+declare const tokenNames: ("color.background.accent.blue.subtle" | "color.background.accent.teal.subtle" | "color.background.accent.green.subtle" | "color.background.accent.orange.subtle" | "color.background.accent.red.subtle" | "color.background.accent.purple.subtle" | "color.background.accent.yellow.subtle" | "color.background.accent.magenta.subtle" | "color.background.accent.gray.subtler" | "color.chart.blue.bold" | "color.chart.teal.bold" | "color.chart.green.bold" | "color.chart.yellow.bold" | "color.chart.orange.bold" | "color.chart.red.bold" | "color.chart.magenta.bold" | "color.chart.purple.bold" | "color.chart.gray.bold" | "color.chart.blue.bolder" | "color.chart.teal.bolder" | "color.chart.green.bolder" | "color.chart.yellow.bolder" | "color.chart.orange.bolder" | "color.chart.red.bolder" | "color.chart.magenta.bolder" | "color.chart.purple.bolder" | "color.chart.gray.bolder" | "color.chart.blue.boldest" | "color.chart.teal.boldest" | "color.chart.green.boldest" | "color.chart.yellow.boldest" | "color.chart.orange.boldest" | "color.chart.red.boldest" | "color.chart.magenta.boldest" | "color.chart.purple.boldest" | "color.chart.gray.boldest")[];
+export type EditorBackgroundPaletteTokenNames = (typeof tokenNames)[number];
+export {};

package/dist/types-ts4.5/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;
+type EditorTextPalette = typeof editorTextPalette;
+export 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

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-palette",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "The editor palette",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -19,6 +19,14 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "af:exports": {
@@ -31,14 +39,14 @@
     "@atlaskit/docs": "*",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tokens": "^1.3.0",
+    "@atlaskit/tokens": "^1.4.0",
     "@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": "^16.8.0",
     "react-dom": "^16.8.0",
-    "typescript": "4.5.5",
+    "typescript": "~4.9.5",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {