@atlaskit/editor-palette 2.2.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-palette
 
+## 3.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.2.0
 
 ### Minor Changes

package/background/package.json

@@ -4,12 +4,5 @@
   "module": "../dist/esm/entry-points/background.js",
   "module:es2019": "../dist/es2019/entry-points/background.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/background.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/background.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/background.d.ts"
 }

package/border/package.json

@@ -4,12 +4,5 @@
   "module": "../dist/esm/entry-points/border.js",
   "module:es2019": "../dist/es2019/entry-points/border.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/border.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/border.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/border.d.ts"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-palette",
-	"version": "2.2.0",
+	"version": "3.0.0",
 	"description": "The editor palette",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -18,22 +18,16 @@
 	"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",
 	"dependencies": {
-		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"devDependencies": {
 		"@testing-library/react": "^16.3.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"wait-for-expect": "^1.2.0"
 	},
 	"peerDependencies": {

package/table-charts/package.json

@@ -4,12 +4,5 @@
   "module": "../dist/esm/entry-points/table-charts.js",
   "module:es2019": "../dist/es2019/entry-points/table-charts.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/table-charts.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/table-charts.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/table-charts.d.ts"
 }

package/text/package.json

@@ -4,12 +4,5 @@
   "module": "../dist/esm/entry-points/text.js",
   "module:es2019": "../dist/es2019/entry-points/text.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/text.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/text.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/text.d.ts"
 }

package/text-background-color/package.json

@@ -4,12 +4,5 @@
   "module": "../dist/esm/entry-points/text-background-color.js",
   "module:es2019": "../dist/es2019/entry-points/text-background-color.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/text-background-color.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/text-background-color.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/text-background-color.d.ts"
 }

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

@@ -1,149 +0,0 @@
-/**
- * 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;
-/**
- * Takes an ADF hex color and returns the rendered hex code for the associated background palette design token using getTokenValue.
- * If the provided color does not exist in the Editor color palette, this function returns undefined.
- *
- * This should only be used when rendering content where CSS variables are not feasible, such as a non-CSS environment
- * or to enable cross-app copy/paste.
- *
- * WARNING: If the rendered theme changes (such as from light -> dark mode) the value returned here will no longer match
- * the surrounding UI and will need to be re-fetched.
- * In addition, the values of tokens will differ between themes and the value for a given theme can and will change.
- * - **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 hexToEditorBackgroundPaletteRawValue<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? string : undefined;
-type EditorBackgroundPalette = typeof editorBackgroundPalette;
-export type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
-/**
- * Values are asserted to improve generated type declarations
- * Using object structure as getValue() function needed for table values, and other
- * properties may be needed in the future.
- */
-export declare const editorBackgroundPalette: {
-    /** blue - light */
-    "#DEEBFF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)";
-    };
-    /** blue - medium */
-    "#B3D4FF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-blue-subtler, #B3D4FF)";
-    };
-    /** blue - strong */
-    "#4C9AFF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-blue-subtle, #4C9AFF)";
-    };
-    /** teal - light */
-    "#E6FCFF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)";
-    };
-    /** teal - medium */
-    "#B3F5FF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-teal-subtler, #B3F5FF)";
-    };
-    /** teal - strong */
-    "#79E2F2": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-teal-subtle, #79E2F2)";
-    };
-    /** green - light */
-    "#E3FCEF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-green-subtlest, #E3FCEF)";
-    };
-    /** green - medium */
-    "#ABF5D1": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-green-subtler, #ABF5D1)";
-    };
-    /** green - strong */
-    "#57D9A3": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-green-subtle, #57D9A3)";
-    };
-    /** yellowOrange - light */
-    "#FFFAE6": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)";
-    };
-    /** yellowOrange - medium */
-    "#FFF0B3": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
-    };
-    /** yellowOrange - strong */
-    "#FFC400": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-orange-subtle, #FFC400)";
-    };
-    /** red - light */
-    "#FFEBE6": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-red-subtlest, #FFEBE6)";
-    };
-    /** red - medium */
-    "#FFBDAD": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-red-subtler, #FFBDAD)";
-    };
-    /** red - strong */
-    "#FF8F73": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-red-subtle, #FF8F73)";
-    };
-    /** purple - light */
-    "#EAE6FF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)";
-    };
-    /** purple - medium */
-    "#C0B6F2": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-purple-subtler, #C0B6F2)";
-    };
-    /** purple - strong */
-    "#998DD9": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-purple-subtle, #998DD9)";
-    };
-    /** whiteGray - light */
-    "#FFFFFF": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-surface, #FFFFFF)";
-    };
-    /** whiteGray - medium */
-    "#F4F5F7": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)";
-    };
-    /** whiteGray - strong */
-    "#B3BAC5": {
-        getValue: (fallback: string) => string;
-        token: "var(--ds-background-accent-gray-subtle, #B3BAC5)";
-    };
-};
-export {};

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

@@ -1,29 +0,0 @@
-/**
- * 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/entry-points/background.d.ts

@@ -1 +0,0 @@
-export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteRawValue, } from '../background';

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

@@ -1 +0,0 @@
-export { hexToEditorBorderPaletteColor } from '../border';

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

@@ -1 +0,0 @@
-export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteRawValue, } from '../table-charts';

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

@@ -1 +0,0 @@
-export { hexToEditorTextBackgroundPaletteColor } from '../text-background-color';

package/dist/types-ts4.5/entry-points/text.d.ts

@@ -1 +0,0 @@
-export { hexToEditorTextPaletteColor } from '../text';

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

@@ -1,5 +0,0 @@
-export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteRawValue, } from './background';
-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/table-charts.d.ts

@@ -1,193 +0,0 @@
-/**
- * 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;
-/**
- * Takes an ADF hex color and returns the rendered hex code for the associated chart palette design token using getTokenValue.
- * If the provided color does not exist in the Editor color palette, this function returns undefined.
- *
- * This should only be used when rendering content where CSS variables are not feasible, such as a non-CSS environment
- * or to enable cross-app copy/paste.
- *
- * WARNING: If the rendered theme changes (such as from light -> dark mode) the value returned here will no longer match
- * the surrounding UI and will need to be re-fetched.
- * In addition, the values of tokens will differ between themes and the value for a given theme can and will change.
- * - **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 hexToEditorTableChartsPaletteRawValue<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? string : 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": {
-        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)";
-    };
-};
-export {};

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

@@ -1,37 +0,0 @@
-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)";
-    /** Yellow - light */
-    "#F8E6A0": "var(--ds-background-accent-yellow-subtler, #F8E6A0)";
-    /** 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/text.d.ts

@@ -1,65 +0,0 @@
-/**
- * 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 {};