@atlaskit/editor-palette 1.4.3 → 1.5.0

package/dist/esm/index.js

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

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _editorTableChartsPal;
 // This import will be stripped on build
 // eslint-disable-next-line import/no-extraneous-dependencies
+import { getTokenValue } from '@atlaskit/tokens';
 
 /**
  * This takes an adf hex color and returns a matching chart palette
@@ -29,12 +30,26 @@ export function hexToEditorTableChartsPaletteColor(hexColor) {
   var tokenData = editorTableChartsPalette[hexColor.toUpperCase()];
   return tokenData ? tokenData.token : undefined;
 }
-export function hexToEditorTableChartsPaletteColorTokenName(hexColor) {
+
+/**
+ * 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 function hexToEditorTableChartsPaletteRawValue(hexColor) {
   // Ts ignore used to allow use of conditional return type
   // (preferencing better type on consumption over safety in implementation)
   // @ts-ignore
   var tokenData = editorTableChartsPalette[hexColor.toUpperCase()];
-  return tokenData ? tokenData.tokenName : undefined;
+  return tokenData ? tokenData.getValue(hexColor) : undefined;
 }
 // Colors taken from
 // https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
@@ -50,115 +65,183 @@ export function hexToEditorTableChartsPaletteColorTokenName(hexColor) {
  * https://product-fabric.atlassian.net/browse/ED-17042
  */
 var editorTableChartsPalette = (_editorTableChartsPal = {}, _defineProperty(_editorTableChartsPal, '#7AB2FF', {
-  tokenName: 'color.background.accent.blue.subtle',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.blue.subtle', fallback);
+  },
   token: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
 }), _defineProperty(_editorTableChartsPal, '#60C6D2', {
-  tokenName: 'color.background.accent.teal.subtle',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.teal.subtle', fallback);
+  },
   token: "var(--ds-background-accent-teal-subtle, #60C6D2)"
 }), _defineProperty(_editorTableChartsPal, '#6BE1B0', {
-  tokenName: 'color.background.accent.green.subtle',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.green.subtle', fallback);
+  },
   token: "var(--ds-background-accent-green-subtle, #6BE1B0)"
 }), _defineProperty(_editorTableChartsPal, '#FFDB57', {
-  tokenName: 'color.background.accent.yellow.subtle',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.yellow.subtle', fallback);
+  },
   token: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
 }), _defineProperty(_editorTableChartsPal, '#FAA53D', {
-  tokenName: 'color.background.accent.orange.subtle',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.orange.subtle', fallback);
+  },
   token: "var(--ds-background-accent-orange-subtle, #FAA53D)"
 }), _defineProperty(_editorTableChartsPal, '#FF8F73', {
-  tokenName: 'color.background.accent.red.subtle',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.red.subtle', fallback);
+  },
   token: "var(--ds-background-accent-red-subtle, #FF8F73)"
 }), _defineProperty(_editorTableChartsPal, '#E774BB', {
-  tokenName: 'color.background.accent.magenta.subtle',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.magenta.subtle', fallback);
+  },
   token: "var(--ds-background-accent-magenta-subtle, #E774BB)"
 }), _defineProperty(_editorTableChartsPal, '#B5A7FB', {
-  tokenName: 'color.background.accent.purple.subtle',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.purple.subtle', fallback);
+  },
   token: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
 }), _defineProperty(_editorTableChartsPal, '#8993A5', {
-  tokenName: 'color.background.accent.gray.subtler',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.gray.subtler', fallback);
+  },
   token: "var(--ds-background-accent-gray-subtler, #8993A5)"
 }), _defineProperty(_editorTableChartsPal, '#247FFF', {
-  tokenName: 'color.chart.blue.bold',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.blue.bold', fallback);
+  },
   token: "var(--ds-chart-blue-bold, #247FFF)"
 }), _defineProperty(_editorTableChartsPal, '#1D9AAA', {
-  tokenName: 'color.chart.teal.bold',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.teal.bold', fallback);
+  },
   token: "var(--ds-chart-teal-bold, #1D9AAA)"
 }), _defineProperty(_editorTableChartsPal, '#23A971', {
-  tokenName: 'color.chart.green.bold',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.green.bold', fallback);
+  },
   token: "var(--ds-chart-green-bold, #23A971)"
 }), _defineProperty(_editorTableChartsPal, '#FFBE33', {
-  tokenName: 'color.chart.yellow.bold',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.yellow.bold', fallback);
+  },
   token: "var(--ds-chart-yellow-bold, #FFBE33)"
 }), _defineProperty(_editorTableChartsPal, '#D97008', {
-  tokenName: 'color.chart.orange.bold',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.orange.bold', fallback);
+  },
   token: "var(--ds-chart-orange-bold, #D97008)"
 }), _defineProperty(_editorTableChartsPal, '#FC552C', {
-  tokenName: 'color.chart.red.bold',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.red.bold', fallback);
+  },
   token: "var(--ds-chart-red-bold, #FC552C)"
 }), _defineProperty(_editorTableChartsPal, '#DA62AC', {
-  tokenName: 'color.chart.magenta.bold',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.magenta.bold', fallback);
+  },
   token: "var(--ds-chart-magenta-bold, #DA62AC)"
 }), _defineProperty(_editorTableChartsPal, '#8B77EE', {
-  tokenName: 'color.chart.purple.bold',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.purple.bold', fallback);
+  },
   token: "var(--ds-chart-purple-bold, #8B77EE)"
 }), _defineProperty(_editorTableChartsPal, '#8590A2', {
-  tokenName: 'color.chart.gray.bold',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.gray.bold', fallback);
+  },
   token: "var(--ds-chart-gray-bold, #8590A2)"
 }), _defineProperty(_editorTableChartsPal, '#0055CC', {
-  tokenName: 'color.chart.blue.bolder',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.blue.bolder', fallback);
+  },
   token: "var(--ds-chart-blue-bolder, #0055CC)"
 }), _defineProperty(_editorTableChartsPal, '#1D7F8C', {
-  tokenName: 'color.chart.teal.bolder',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.teal.bolder', fallback);
+  },
   token: "var(--ds-chart-teal-bolder, #1D7F8C)"
 }), _defineProperty(_editorTableChartsPal, '#177D52', {
-  tokenName: 'color.chart.green.bolder',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.green.bolder', fallback);
+  },
   token: "var(--ds-chart-green-bolder, #177D52)"
 }), _defineProperty(_editorTableChartsPal, '#FF9D00', {
-  tokenName: 'color.chart.yellow.bolder',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.yellow.bolder', fallback);
+  },
   token: "var(--ds-chart-yellow-bolder, #FF9D00)"
 }), _defineProperty(_editorTableChartsPal, '#B65C02', {
-  tokenName: 'color.chart.orange.bolder',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.orange.bolder', fallback);
+  },
   token: "var(--ds-chart-orange-bolder, #B65C02)"
 }), _defineProperty(_editorTableChartsPal, '#D32D03', {
-  tokenName: 'color.chart.red.bolder',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.red.bolder', fallback);
+  },
   token: "var(--ds-chart-red-bolder, #D32D03)"
 }), _defineProperty(_editorTableChartsPal, '#CD519D', {
-  tokenName: 'color.chart.magenta.bolder',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.magenta.bolder', fallback);
+  },
   token: "var(--ds-chart-magenta-bolder, #CD519D)"
 }), _defineProperty(_editorTableChartsPal, '#5A43D0', {
-  tokenName: 'color.chart.purple.bolder',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.purple.bolder', fallback);
+  },
   token: "var(--ds-chart-purple-bolder, #5A43D0)"
 }), _defineProperty(_editorTableChartsPal, '#758195', {
-  tokenName: 'color.chart.gray.bolder',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.gray.bolder', fallback);
+  },
   token: "var(--ds-chart-gray-bolder, #758195)"
 }), _defineProperty(_editorTableChartsPal, '#003884', {
-  tokenName: 'color.chart.blue.boldest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.blue.boldest', fallback);
+  },
   token: "var(--ds-chart-blue-boldest, #003884)"
 }), _defineProperty(_editorTableChartsPal, '#206B74', {
-  tokenName: 'color.chart.teal.boldest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.teal.boldest', fallback);
+  },
   token: "var(--ds-chart-teal-boldest, #206B74)"
 }), _defineProperty(_editorTableChartsPal, '#055C3F', {
-  tokenName: 'color.chart.green.boldest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.green.boldest', fallback);
+  },
   token: "var(--ds-chart-green-boldest, #055C3F)"
 }), _defineProperty(_editorTableChartsPal, '#946104', {
-  tokenName: 'color.chart.yellow.boldest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.yellow.boldest', fallback);
+  },
   token: "var(--ds-chart-yellow-boldest, #946104)"
 }), _defineProperty(_editorTableChartsPal, '#974F0C', {
-  tokenName: 'color.chart.orange.boldest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.orange.boldest', fallback);
+  },
   token: "var(--ds-chart-orange-boldest, #974F0C)"
 }), _defineProperty(_editorTableChartsPal, '#A32000', {
-  tokenName: 'color.chart.red.boldest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.red.boldest', fallback);
+  },
   token: "var(--ds-chart-red-boldest, #A32000)"
 }), _defineProperty(_editorTableChartsPal, '#943D73', {
-  tokenName: 'color.chart.magenta.boldest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.magenta.boldest', fallback);
+  },
   token: "var(--ds-chart-magenta-boldest, #943D73)"
 }), _defineProperty(_editorTableChartsPal, '#44368B', {
-  tokenName: 'color.chart.purple.boldest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.purple.boldest', fallback);
+  },
   token: "var(--ds-chart-purple-boldest, #44368B)"
 }), _defineProperty(_editorTableChartsPal, '#44546F', {
-  tokenName: 'color.chart.gray.boldest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.chart.gray.boldest', fallback);
+  },
   token: "var(--ds-chart-gray-boldest, #44546F)"
-}), _editorTableChartsPal);
-var tableChartsPaletteKeys = Object.keys(editorTableChartsPalette);
-var tokenNames = tableChartsPaletteKeys.map(function (hexCode) {
-  return editorTableChartsPalette[hexCode].tokenName;
-});
+}), _editorTableChartsPal);

package/dist/esm/version.json

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

package/dist/types/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/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';