@atlaskit/editor-palette 1.4.3 → 1.5.0

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

@@ -18,7 +18,20 @@
  * - **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;
+/**
+ * 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;
 /**
@@ -33,150 +46,148 @@ export type EditorTableChartsPaletteKey = keyof EditorTableChartsPalette;
  */
 declare const editorTableChartsPalette: {
     "#7AB2FF": {
-        tokenName: "color.background.accent.blue.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-blue-subtle, #7AB2FF)";
     };
     "#60C6D2": {
-        tokenName: "color.background.accent.teal.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-teal-subtle, #60C6D2)";
     };
     "#6BE1B0": {
-        tokenName: "color.background.accent.green.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-green-subtle, #6BE1B0)";
     };
     "#FFDB57": {
-        tokenName: "color.background.accent.yellow.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-yellow-subtle, #FFDB57)";
     };
     "#FAA53D": {
-        tokenName: "color.background.accent.orange.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-orange-subtle, #FAA53D)";
     };
     "#FF8F73": {
-        tokenName: "color.background.accent.red.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-red-subtle, #FF8F73)";
     };
     "#E774BB": {
-        tokenName: "color.background.accent.magenta.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-magenta-subtle, #E774BB)";
     };
     "#B5A7FB": {
-        tokenName: "color.background.accent.purple.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-purple-subtle, #B5A7FB)";
     };
     "#8993A5": {
-        tokenName: "color.background.accent.gray.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-gray-subtler, #8993A5)";
     };
     "#247FFF": {
-        tokenName: "color.chart.blue.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-blue-bold, #247FFF)";
     };
     "#1D9AAA": {
-        tokenName: "color.chart.teal.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-teal-bold, #1D9AAA)";
     };
     "#23A971": {
-        tokenName: "color.chart.green.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-green-bold, #23A971)";
     };
     "#FFBE33": {
-        tokenName: "color.chart.yellow.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-yellow-bold, #FFBE33)";
     };
     "#D97008": {
-        tokenName: "color.chart.orange.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-orange-bold, #D97008)";
     };
     "#FC552C": {
-        tokenName: "color.chart.red.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-red-bold, #FC552C)";
     };
     "#DA62AC": {
-        tokenName: "color.chart.magenta.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-magenta-bold, #DA62AC)";
     };
     "#8B77EE": {
-        tokenName: "color.chart.purple.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-purple-bold, #8B77EE)";
     };
     "#8590A2": {
-        tokenName: "color.chart.gray.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-gray-bold, #8590A2)";
     };
     "#0055CC": {
-        tokenName: "color.chart.blue.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-blue-bolder, #0055CC)";
     };
     "#1D7F8C": {
-        tokenName: "color.chart.teal.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-teal-bolder, #1D7F8C)";
     };
     "#177D52": {
-        tokenName: "color.chart.green.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-green-bolder, #177D52)";
     };
     "#FF9D00": {
-        tokenName: "color.chart.yellow.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-yellow-bolder, #FF9D00)";
     };
     "#B65C02": {
-        tokenName: "color.chart.orange.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-orange-bolder, #B65C02)";
     };
     "#D32D03": {
-        tokenName: "color.chart.red.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-red-bolder, #D32D03)";
     };
     "#CD519D": {
-        tokenName: "color.chart.magenta.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-magenta-bolder, #CD519D)";
     };
     "#5A43D0": {
-        tokenName: "color.chart.purple.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-purple-bolder, #5A43D0)";
     };
     "#758195": {
-        tokenName: "color.chart.gray.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-gray-bolder, #758195)";
     };
     "#003884": {
-        tokenName: "color.chart.blue.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-blue-boldest, #003884)";
     };
     "#206B74": {
-        tokenName: "color.chart.teal.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-teal-boldest, #206B74)";
     };
     "#055C3F": {
-        tokenName: "color.chart.green.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-green-boldest, #055C3F)";
     };
     "#946104": {
-        tokenName: "color.chart.yellow.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-yellow-boldest, #946104)";
     };
     "#974F0C": {
-        tokenName: "color.chart.orange.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-orange-boldest, #974F0C)";
     };
     "#A32000": {
-        tokenName: "color.chart.red.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-red-boldest, #A32000)";
     };
     "#943D73": {
-        tokenName: "color.chart.magenta.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-magenta-boldest, #943D73)";
     };
     "#44368B": {
-        tokenName: "color.chart.purple.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-purple-boldest, #44368B)";
     };
     "#44546F": {
-        tokenName: "color.chart.gray.boldest";
+        getValue: (fallback: string) => string;
         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/background.d.ts

@@ -15,119 +15,135 @@
  * 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
+ * - **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;
+/**
+ * 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": {
-        tokenName: "color.background.accent.blue.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)";
     };
     /** blue - medium */
     "#B3D4FF": {
-        tokenName: "color.background.accent.blue.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-blue-subtler, #B3D4FF)";
     };
     /** blue - strong */
     "#4C9AFF": {
-        tokenName: "color.background.accent.blue.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-blue-subtle, #4C9AFF)";
     };
     /** teal - light */
     "#E6FCFF": {
-        tokenName: "color.background.accent.teal.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)";
     };
     /** teal - medium */
     "#B3F5FF": {
-        tokenName: "color.background.accent.teal.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-teal-subtler, #B3F5FF)";
     };
     /** teal - strong */
     "#79E2F2": {
-        tokenName: "color.background.accent.teal.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-teal-subtle, #79E2F2)";
     };
     /** green - light */
     "#E3FCEF": {
-        tokenName: "color.background.accent.green.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-green-subtlest, #E3FCEF)";
     };
     /** green - medium */
     "#ABF5D1": {
-        tokenName: "color.background.accent.green.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-green-subtler, #ABF5D1)";
     };
     /** green - strong */
     "#57D9A3": {
-        tokenName: "color.background.accent.green.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-green-subtle, #57D9A3)";
     };
     /** yellowOrange - light */
     "#FFFAE6": {
-        tokenName: "color.background.accent.yellow.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)";
     };
     /** yellowOrange - medium */
     "#FFF0B3": {
-        tokenName: "color.background.accent.yellow.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
     };
     /** yellowOrange - strong */
     "#FFC400": {
-        tokenName: "color.background.accent.orange.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-orange-subtle, #FFC400)";
     };
     /** red - light */
     "#FFEBE6": {
-        tokenName: "color.background.accent.red.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-red-subtlest, #FFEBE6)";
     };
     /** red - medium */
     "#FFBDAD": {
-        tokenName: "color.background.accent.red.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-red-subtler, #FFBDAD)";
     };
     /** red - strong */
     "#FF8F73": {
-        tokenName: "color.background.accent.red.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-red-subtle, #FF8F73)";
     };
     /** purple - light */
     "#EAE6FF": {
-        tokenName: "color.background.accent.purple.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)";
     };
     /** purple - medium */
     "#C0B6F2": {
-        tokenName: "color.background.accent.purple.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-purple-subtler, #C0B6F2)";
     };
     /** purple - strong */
     "#998DD9": {
-        tokenName: "color.background.accent.purple.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-purple-subtle, #998DD9)";
     };
     /** whiteGray - light */
     "#FFFFFF": {
-        tokenName: "elevation.surface";
+        getValue: (fallback: string) => string;
         token: "var(--ds-surface, #FFFFFF)";
     };
     /** whiteGray - medium */
     "#F4F5F7": {
-        tokenName: "color.background.accent.gray.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)";
     };
     /** whiteGray - strong */
     "#B3BAC5": {
-        tokenName: "color.background.accent.gray.subtle";
+        getValue: (fallback: string) => string;
         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/index.d.ts

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

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

@@ -18,7 +18,20 @@
  * - **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;
+/**
+ * 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;
 /**
@@ -33,150 +46,148 @@ export type EditorTableChartsPaletteKey = keyof EditorTableChartsPalette;
  */
 declare const editorTableChartsPalette: {
     "#7AB2FF": {
-        tokenName: "color.background.accent.blue.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-blue-subtle, #7AB2FF)";
     };
     "#60C6D2": {
-        tokenName: "color.background.accent.teal.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-teal-subtle, #60C6D2)";
     };
     "#6BE1B0": {
-        tokenName: "color.background.accent.green.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-green-subtle, #6BE1B0)";
     };
     "#FFDB57": {
-        tokenName: "color.background.accent.yellow.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-yellow-subtle, #FFDB57)";
     };
     "#FAA53D": {
-        tokenName: "color.background.accent.orange.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-orange-subtle, #FAA53D)";
     };
     "#FF8F73": {
-        tokenName: "color.background.accent.red.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-red-subtle, #FF8F73)";
     };
     "#E774BB": {
-        tokenName: "color.background.accent.magenta.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-magenta-subtle, #E774BB)";
     };
     "#B5A7FB": {
-        tokenName: "color.background.accent.purple.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-purple-subtle, #B5A7FB)";
     };
     "#8993A5": {
-        tokenName: "color.background.accent.gray.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-gray-subtler, #8993A5)";
     };
     "#247FFF": {
-        tokenName: "color.chart.blue.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-blue-bold, #247FFF)";
     };
     "#1D9AAA": {
-        tokenName: "color.chart.teal.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-teal-bold, #1D9AAA)";
     };
     "#23A971": {
-        tokenName: "color.chart.green.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-green-bold, #23A971)";
     };
     "#FFBE33": {
-        tokenName: "color.chart.yellow.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-yellow-bold, #FFBE33)";
     };
     "#D97008": {
-        tokenName: "color.chart.orange.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-orange-bold, #D97008)";
     };
     "#FC552C": {
-        tokenName: "color.chart.red.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-red-bold, #FC552C)";
     };
     "#DA62AC": {
-        tokenName: "color.chart.magenta.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-magenta-bold, #DA62AC)";
     };
     "#8B77EE": {
-        tokenName: "color.chart.purple.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-purple-bold, #8B77EE)";
     };
     "#8590A2": {
-        tokenName: "color.chart.gray.bold";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-gray-bold, #8590A2)";
     };
     "#0055CC": {
-        tokenName: "color.chart.blue.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-blue-bolder, #0055CC)";
     };
     "#1D7F8C": {
-        tokenName: "color.chart.teal.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-teal-bolder, #1D7F8C)";
     };
     "#177D52": {
-        tokenName: "color.chart.green.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-green-bolder, #177D52)";
     };
     "#FF9D00": {
-        tokenName: "color.chart.yellow.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-yellow-bolder, #FF9D00)";
     };
     "#B65C02": {
-        tokenName: "color.chart.orange.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-orange-bolder, #B65C02)";
     };
     "#D32D03": {
-        tokenName: "color.chart.red.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-red-bolder, #D32D03)";
     };
     "#CD519D": {
-        tokenName: "color.chart.magenta.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-magenta-bolder, #CD519D)";
     };
     "#5A43D0": {
-        tokenName: "color.chart.purple.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-purple-bolder, #5A43D0)";
     };
     "#758195": {
-        tokenName: "color.chart.gray.bolder";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-gray-bolder, #758195)";
     };
     "#003884": {
-        tokenName: "color.chart.blue.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-blue-boldest, #003884)";
     };
     "#206B74": {
-        tokenName: "color.chart.teal.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-teal-boldest, #206B74)";
     };
     "#055C3F": {
-        tokenName: "color.chart.green.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-green-boldest, #055C3F)";
     };
     "#946104": {
-        tokenName: "color.chart.yellow.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-yellow-boldest, #946104)";
     };
     "#974F0C": {
-        tokenName: "color.chart.orange.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-orange-boldest, #974F0C)";
     };
     "#A32000": {
-        tokenName: "color.chart.red.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-red-boldest, #A32000)";
     };
     "#943D73": {
-        tokenName: "color.chart.magenta.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-magenta-boldest, #943D73)";
     };
     "#44368B": {
-        tokenName: "color.chart.purple.boldest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-chart-purple-boldest, #44368B)";
     };
     "#44546F": {
-        tokenName: "color.chart.gray.boldest";
+        getValue: (fallback: string) => string;
         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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-palette",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "The editor palette",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -33,15 +33,13 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
+    "@atlaskit/tokens": "^1.4.0",
     "@babel/runtime": "^7.0.0"
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
     "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/ssr": "*",
     "@atlaskit/tokens": "^1.5.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",