@atlaskit/editor-palette - npm Package Compare versions

Comparing version 1.4.3 to 1.5.0

CHANGELOG.md

 # @atlaskit/editor-palette
 
+## 1.5.0
+
+### Minor Changes
+
+- [`f22911fb9be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f22911fb9be) - ENGHEALTH-2667: Adjust table cell color logic to enable static analysis of token usages and follow eslint rules
+
 ## 1.4.3
@@ -4,0 +10,0 @@

dist/cjs/background.js

@@ -9,8 +9,7 @@ "use strict";
 exports.hexToEditorBackgroundPaletteColor = hexToEditorBackgroundPaletteColor;
-exports.hexToEditorBackgroundPaletteColorTokenName = hexToEditorBackgroundPaletteColorTokenName;
+exports.hexToEditorBackgroundPaletteRawValue = hexToEditorBackgroundPaletteRawValue;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _editorBackgroundPale;
-// This import will be stripped on build
+var _tokens = require("@atlaskit/tokens");
+var _editorBackgroundPale; // This import will be stripped on build
 // eslint-disable-next-line import/no-extraneous-dependencies
-
 /**
@@ -33,3 +32,3 @@ * This takes an adf hex color and returns a matching background palette
  * - **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.
  */
@@ -43,3 +42,17 @@ function hexToEditorBackgroundPaletteColor(hexColor) {
 }
-function hexToEditorBackgroundPaletteColorTokenName(hexColor) {
+
+/**
+ * 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.
+ */
+function hexToEditorBackgroundPaletteRawValue(hexColor) {
   // Ts ignore used to allow use of conditional return type
@@ -49,3 +62,3 @@ // (preferencing better type on consumption over safety in implementation)
   var tokenData = editorBackgroundPalette[hexColor.toUpperCase()];
-  return tokenData ? tokenData.tokenName : undefined;
+  return tokenData ? tokenData.getValue(hexColor) : undefined;
 }
@@ -55,74 +68,113 @@ // Colors taken from
 
-// values are asserted to improve generated type declarations
-// Modified structure as having tokenName, token
-//  and possibly editorColorName in future will make it
-//  simpler to link everything together.
+/**
+ * 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.
+ */
 var editorBackgroundPalette = (_editorBackgroundPale = {}, (0, _defineProperty2.default)(_editorBackgroundPale, '#DEEBFF', {
-  tokenName: 'color.background.accent.blue.subtlest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.blue.subtlest', fallback);
+  },
   token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)"
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3D4FF', {
-  tokenName: 'color.background.accent.blue.subtler',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.blue.subtler', fallback);
+  },
   token: "var(--ds-background-accent-blue-subtler, #B3D4FF)"
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#4C9AFF', {
-  tokenName: 'color.background.accent.blue.subtle',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.blue.subtle', fallback);
+  },
   token: "var(--ds-background-accent-blue-subtle, #4C9AFF)"
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#E6FCFF', {
-  tokenName: 'color.background.accent.teal.subtlest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.teal.subtlest', fallback);
+  },
   token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)" // source for hex code was legacy token T50,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3F5FF', {
-  tokenName: 'color.background.accent.teal.subtler',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.teal.subtler', fallback);
+  },
   token: "var(--ds-background-accent-teal-subtler, #B3F5FF)" // source for hex code was legacy token T75,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#79E2F2', {
-  tokenName: 'color.background.accent.teal.subtle',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.teal.subtle', fallback);
+  },
   token: "var(--ds-background-accent-teal-subtle, #79E2F2)" // source for hex code was legacy token T100,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#E3FCEF', {
-  tokenName: 'color.background.accent.green.subtlest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.green.subtlest', fallback);
+  },
   token: "var(--ds-background-accent-green-subtlest, #E3FCEF)" // source for hex code was legacy token G50,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#ABF5D1', {
-  tokenName: 'color.background.accent.green.subtler',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.green.subtler', fallback);
+  },
   token: "var(--ds-background-accent-green-subtler, #ABF5D1)" // source for hex code was legacy token G75,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#57D9A3', {
-  tokenName: 'color.background.accent.green.subtle',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.green.subtle', fallback);
+  },
   token: "var(--ds-background-accent-green-subtle, #57D9A3)" // source for hex code was legacy token G200,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFFAE6', {
-  tokenName: 'color.background.accent.yellow.subtlest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.yellow.subtlest', fallback);
+  },
   token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)" // source for hex code was legacy token Y50,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFF0B3', {
-  tokenName: 'color.background.accent.yellow.subtler',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.yellow.subtler', fallback);
+  },
   token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)" // source for hex code was legacy token Y75,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFC400', {
-  tokenName: 'color.background.accent.orange.subtle',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.orange.subtle', fallback);
+  },
   token: "var(--ds-background-accent-orange-subtle, #FFC400)" // source for hex code was legacy token Y200,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFEBE6', {
-  tokenName: 'color.background.accent.red.subtlest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.red.subtlest', fallback);
+  },
   token: "var(--ds-background-accent-red-subtlest, #FFEBE6)" // source for hex code was legacy token R50,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFBDAD', {
-  tokenName: 'color.background.accent.red.subtler',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.red.subtler', fallback);
+  },
   token: "var(--ds-background-accent-red-subtler, #FFBDAD)" // source for hex code was legacy token R75,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#FF8F73', {
-  tokenName: 'color.background.accent.red.subtle',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.red.subtle', fallback);
+  },
   token: "var(--ds-background-accent-red-subtle, #FF8F73)" // source for hex code was legacy token R100,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#EAE6FF', {
-  tokenName: 'color.background.accent.purple.subtlest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.purple.subtlest', fallback);
+  },
   token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)" // source for hex code was legacy token P50,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#C0B6F2', {
-  tokenName: 'color.background.accent.purple.subtler',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.purple.subtler', fallback);
+  },
   token: "var(--ds-background-accent-purple-subtler, #C0B6F2)" // source for hex code was legacy token P75,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#998DD9', {
-  tokenName: 'color.background.accent.purple.subtle',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.purple.subtle', fallback);
+  },
   token: "var(--ds-background-accent-purple-subtle, #998DD9)" // source for hex code was legacy token P100,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFFFFF', {
-  tokenName: 'elevation.surface',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('elevation.surface', fallback);
+  },
   token: "var(--ds-surface, #FFFFFF)" // source for hex code was legacy token N0,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#F4F5F7', {
-  tokenName: 'color.background.accent.gray.subtlest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.gray.subtlest', fallback);
+  },
   token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)" // source for hex code was legacy token N20,
 }), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3BAC5', {
-  tokenName: 'color.background.accent.gray.subtle',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.gray.subtle', fallback);
+  },
   token: "var(--ds-background-accent-gray-subtle, #B3BAC5)" // source for hex code was legacy token N60,
 }), _editorBackgroundPale);
-exports.editorBackgroundPalette = editorBackgroundPalette;
-var backgroundPaletteKeys = Object.keys(editorBackgroundPalette);
-var tokenNames = backgroundPaletteKeys.map(function (hexCode) {
-  return editorBackgroundPalette[hexCode].tokenName;
-});
+exports.editorBackgroundPalette = editorBackgroundPalette;

dist/cjs/index.js

@@ -12,6 +12,6 @@ "use strict";
 });
-Object.defineProperty(exports, "hexToEditorBackgroundPaletteColorTokenName", {
+Object.defineProperty(exports, "hexToEditorBackgroundPaletteRawValue", {
   enumerable: true,
   get: function get() {
-    return _background.hexToEditorBackgroundPaletteColorTokenName;
+    return _background.hexToEditorBackgroundPaletteRawValue;
   }
@@ -31,6 +31,6 @@ });
 });
-Object.defineProperty(exports, "hexToEditorTableChartsPaletteColorTokenName", {
+Object.defineProperty(exports, "hexToEditorTableChartsPaletteRawValue", {
   enumerable: true,
   get: function get() {
-    return _tableCharts.hexToEditorTableChartsPaletteColorTokenName;
+    return _tableCharts.hexToEditorTableChartsPaletteRawValue;
   }
@@ -37,0 +37,0 @@ });

dist/cjs/table-charts.js

@@ -8,8 +8,7 @@ "use strict";
 exports.hexToEditorTableChartsPaletteColor = hexToEditorTableChartsPaletteColor;
-exports.hexToEditorTableChartsPaletteColorTokenName = hexToEditorTableChartsPaletteColorTokenName;
+exports.hexToEditorTableChartsPaletteRawValue = hexToEditorTableChartsPaletteRawValue;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _editorTableChartsPal;
-// This import will be stripped on build
+var _tokens = require("@atlaskit/tokens");
+var _editorTableChartsPal; // This import will be stripped on build
 // eslint-disable-next-line import/no-extraneous-dependencies
-
 /**
@@ -41,3 +40,17 @@ * This takes an adf hex color and returns a matching chart palette
 }
-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.
+ */
+function hexToEditorTableChartsPaletteRawValue(hexColor) {
   // Ts ignore used to allow use of conditional return type
@@ -47,3 +60,3 @@ // (preferencing better type on consumption over safety in implementation)
   var tokenData = editorTableChartsPalette[hexColor.toUpperCase()];
-  return tokenData ? tokenData.tokenName : undefined;
+  return tokenData ? tokenData.getValue(hexColor) : undefined;
 }
@@ -64,113 +77,181 @@ // Colors taken from
 var editorTableChartsPalette = (_editorTableChartsPal = {}, (0, _defineProperty2.default)(_editorTableChartsPal, '#7AB2FF', {
-  tokenName: 'color.background.accent.blue.subtle',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.blue.subtle', fallback);
+  },
   token: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#60C6D2', {
-  tokenName: 'color.background.accent.teal.subtle',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.teal.subtle', fallback);
+  },
   token: "var(--ds-background-accent-teal-subtle, #60C6D2)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#6BE1B0', {
-  tokenName: 'color.background.accent.green.subtle',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.green.subtle', fallback);
+  },
   token: "var(--ds-background-accent-green-subtle, #6BE1B0)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#FFDB57', {
-  tokenName: 'color.background.accent.yellow.subtle',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.yellow.subtle', fallback);
+  },
   token: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#FAA53D', {
-  tokenName: 'color.background.accent.orange.subtle',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.orange.subtle', fallback);
+  },
   token: "var(--ds-background-accent-orange-subtle, #FAA53D)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#FF8F73', {
-  tokenName: 'color.background.accent.red.subtle',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.red.subtle', fallback);
+  },
   token: "var(--ds-background-accent-red-subtle, #FF8F73)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#E774BB', {
-  tokenName: 'color.background.accent.magenta.subtle',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.magenta.subtle', fallback);
+  },
   token: "var(--ds-background-accent-magenta-subtle, #E774BB)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#B5A7FB', {
-  tokenName: 'color.background.accent.purple.subtle',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.purple.subtle', fallback);
+  },
   token: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#8993A5', {
-  tokenName: 'color.background.accent.gray.subtler',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.background.accent.gray.subtler', fallback);
+  },
   token: "var(--ds-background-accent-gray-subtler, #8993A5)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#247FFF', {
-  tokenName: 'color.chart.blue.bold',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.blue.bold', fallback);
+  },
   token: "var(--ds-chart-blue-bold, #247FFF)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#1D9AAA', {
-  tokenName: 'color.chart.teal.bold',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.teal.bold', fallback);
+  },
   token: "var(--ds-chart-teal-bold, #1D9AAA)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#23A971', {
-  tokenName: 'color.chart.green.bold',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.green.bold', fallback);
+  },
   token: "var(--ds-chart-green-bold, #23A971)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#FFBE33', {
-  tokenName: 'color.chart.yellow.bold',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.yellow.bold', fallback);
+  },
   token: "var(--ds-chart-yellow-bold, #FFBE33)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#D97008', {
-  tokenName: 'color.chart.orange.bold',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.orange.bold', fallback);
+  },
   token: "var(--ds-chart-orange-bold, #D97008)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#FC552C', {
-  tokenName: 'color.chart.red.bold',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.red.bold', fallback);
+  },
   token: "var(--ds-chart-red-bold, #FC552C)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#DA62AC', {
-  tokenName: 'color.chart.magenta.bold',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.magenta.bold', fallback);
+  },
   token: "var(--ds-chart-magenta-bold, #DA62AC)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#8B77EE', {
-  tokenName: 'color.chart.purple.bold',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.purple.bold', fallback);
+  },
   token: "var(--ds-chart-purple-bold, #8B77EE)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#8590A2', {
-  tokenName: 'color.chart.gray.bold',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.gray.bold', fallback);
+  },
   token: "var(--ds-chart-gray-bold, #8590A2)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#0055CC', {
-  tokenName: 'color.chart.blue.bolder',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.blue.bolder', fallback);
+  },
   token: "var(--ds-chart-blue-bolder, #0055CC)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#1D7F8C', {
-  tokenName: 'color.chart.teal.bolder',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.teal.bolder', fallback);
+  },
   token: "var(--ds-chart-teal-bolder, #1D7F8C)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#177D52', {
-  tokenName: 'color.chart.green.bolder',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.green.bolder', fallback);
+  },
   token: "var(--ds-chart-green-bolder, #177D52)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#FF9D00', {
-  tokenName: 'color.chart.yellow.bolder',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.yellow.bolder', fallback);
+  },
   token: "var(--ds-chart-yellow-bolder, #FF9D00)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#B65C02', {
-  tokenName: 'color.chart.orange.bolder',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.orange.bolder', fallback);
+  },
   token: "var(--ds-chart-orange-bolder, #B65C02)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#D32D03', {
-  tokenName: 'color.chart.red.bolder',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.red.bolder', fallback);
+  },
   token: "var(--ds-chart-red-bolder, #D32D03)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#CD519D', {
-  tokenName: 'color.chart.magenta.bolder',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.magenta.bolder', fallback);
+  },
   token: "var(--ds-chart-magenta-bolder, #CD519D)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#5A43D0', {
-  tokenName: 'color.chart.purple.bolder',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.purple.bolder', fallback);
+  },
   token: "var(--ds-chart-purple-bolder, #5A43D0)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#758195', {
-  tokenName: 'color.chart.gray.bolder',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.gray.bolder', fallback);
+  },
   token: "var(--ds-chart-gray-bolder, #758195)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#003884', {
-  tokenName: 'color.chart.blue.boldest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.blue.boldest', fallback);
+  },
   token: "var(--ds-chart-blue-boldest, #003884)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#206B74', {
-  tokenName: 'color.chart.teal.boldest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.teal.boldest', fallback);
+  },
   token: "var(--ds-chart-teal-boldest, #206B74)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#055C3F', {
-  tokenName: 'color.chart.green.boldest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.green.boldest', fallback);
+  },
   token: "var(--ds-chart-green-boldest, #055C3F)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#946104', {
-  tokenName: 'color.chart.yellow.boldest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.yellow.boldest', fallback);
+  },
   token: "var(--ds-chart-yellow-boldest, #946104)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#974F0C', {
-  tokenName: 'color.chart.orange.boldest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.orange.boldest', fallback);
+  },
   token: "var(--ds-chart-orange-boldest, #974F0C)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#A32000', {
-  tokenName: 'color.chart.red.boldest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.red.boldest', fallback);
+  },
   token: "var(--ds-chart-red-boldest, #A32000)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#943D73', {
-  tokenName: 'color.chart.magenta.boldest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.magenta.boldest', fallback);
+  },
   token: "var(--ds-chart-magenta-boldest, #943D73)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#44368B', {
-  tokenName: 'color.chart.purple.boldest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.getTokenValue)('color.chart.purple.boldest', fallback);
+  },
   token: "var(--ds-chart-purple-boldest, #44368B)"
 }), (0, _defineProperty2.default)(_editorTableChartsPal, '#44546F', {
-  tokenName: 'color.chart.gray.boldest',
+  getValue: function getValue(fallback) {
+    return (0, _tokens.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);

dist/cjs/version.json

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

dist/es2019/background.js

 // This import will be stripped on build
 // eslint-disable-next-line import/no-extraneous-dependencies
+import { getTokenValue } from '@atlaskit/tokens';
 
@@ -21,3 +22,3 @@ /**
  * - **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.
  */
@@ -31,3 +32,17 @@ export function hexToEditorBackgroundPaletteColor(hexColor) {
 }
-export function hexToEditorBackgroundPaletteColorTokenName(hexColor) {
+
+/**
+ * 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 function hexToEditorBackgroundPaletteRawValue(hexColor) {
   // Ts ignore used to allow use of conditional return type
@@ -37,11 +52,11 @@ // (preferencing better type on consumption over safety in implementation)
   const tokenData = editorBackgroundPalette[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
-
-// values are asserted to improve generated type declarations
-// Modified structure as having tokenName, token
-//  and possibly editorColorName in future will make it
-//  simpler to link everything together.
+/**
+ * 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 const editorBackgroundPalette = {
@@ -51,3 +66,3 @@ // blue
   ['#DEEBFF']: {
-    tokenName: 'color.background.accent.blue.subtlest',
+    getValue: fallback => getTokenValue('color.background.accent.blue.subtlest', fallback),
     token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)"
@@ -58,3 +73,3 @@ },
   ['#B3D4FF']: {
-    tokenName: 'color.background.accent.blue.subtler',
+    getValue: fallback => getTokenValue('color.background.accent.blue.subtler', fallback),
     token: "var(--ds-background-accent-blue-subtler, #B3D4FF)"
@@ -65,3 +80,3 @@ },
   ['#4C9AFF']: {
-    tokenName: 'color.background.accent.blue.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.blue.subtle', fallback),
     token: "var(--ds-background-accent-blue-subtle, #4C9AFF)"
@@ -74,3 +89,3 @@ },
   ['#E6FCFF']: {
-    tokenName: 'color.background.accent.teal.subtlest',
+    getValue: fallback => getTokenValue('color.background.accent.teal.subtlest', fallback),
     token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)" // source for hex code was legacy token T50,
@@ -81,3 +96,3 @@ },
   ['#B3F5FF']: {
-    tokenName: 'color.background.accent.teal.subtler',
+    getValue: fallback => getTokenValue('color.background.accent.teal.subtler', fallback),
     token: "var(--ds-background-accent-teal-subtler, #B3F5FF)" // source for hex code was legacy token T75,
@@ -88,3 +103,3 @@ },
   ['#79E2F2']: {
-    tokenName: 'color.background.accent.teal.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.teal.subtle', fallback),
     token: "var(--ds-background-accent-teal-subtle, #79E2F2)" // source for hex code was legacy token T100,
@@ -96,3 +111,3 @@ },
   ['#E3FCEF']: {
-    tokenName: 'color.background.accent.green.subtlest',
+    getValue: fallback => getTokenValue('color.background.accent.green.subtlest', fallback),
     token: "var(--ds-background-accent-green-subtlest, #E3FCEF)" // source for hex code was legacy token G50,
@@ -103,3 +118,3 @@ },
   ['#ABF5D1']: {
-    tokenName: 'color.background.accent.green.subtler',
+    getValue: fallback => getTokenValue('color.background.accent.green.subtler', fallback),
     token: "var(--ds-background-accent-green-subtler, #ABF5D1)" // source for hex code was legacy token G75,
@@ -110,3 +125,3 @@ },
   ['#57D9A3']: {
-    tokenName: 'color.background.accent.green.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.green.subtle', fallback),
     token: "var(--ds-background-accent-green-subtle, #57D9A3)" // source for hex code was legacy token G200,
@@ -118,3 +133,3 @@ },
   ['#FFFAE6']: {
-    tokenName: 'color.background.accent.yellow.subtlest',
+    getValue: fallback => getTokenValue('color.background.accent.yellow.subtlest', fallback),
     token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)" // source for hex code was legacy token Y50,
@@ -125,3 +140,3 @@ },
   ['#FFF0B3']: {
-    tokenName: 'color.background.accent.yellow.subtler',
+    getValue: fallback => getTokenValue('color.background.accent.yellow.subtler', fallback),
     token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)" // source for hex code was legacy token Y75,
@@ -132,3 +147,3 @@ },
   ['#FFC400']: {
-    tokenName: 'color.background.accent.orange.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.orange.subtle', fallback),
     token: "var(--ds-background-accent-orange-subtle, #FFC400)" // source for hex code was legacy token Y200,
@@ -140,3 +155,3 @@ },
   ['#FFEBE6']: {
-    tokenName: 'color.background.accent.red.subtlest',
+    getValue: fallback => getTokenValue('color.background.accent.red.subtlest', fallback),
     token: "var(--ds-background-accent-red-subtlest, #FFEBE6)" // source for hex code was legacy token R50,
@@ -147,3 +162,3 @@ },
   ['#FFBDAD']: {
-    tokenName: 'color.background.accent.red.subtler',
+    getValue: fallback => getTokenValue('color.background.accent.red.subtler', fallback),
     token: "var(--ds-background-accent-red-subtler, #FFBDAD)" // source for hex code was legacy token R75,
@@ -154,3 +169,3 @@ },
   ['#FF8F73']: {
-    tokenName: 'color.background.accent.red.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.red.subtle', fallback),
     token: "var(--ds-background-accent-red-subtle, #FF8F73)" // source for hex code was legacy token R100,
@@ -162,3 +177,3 @@ },
   ['#EAE6FF']: {
-    tokenName: 'color.background.accent.purple.subtlest',
+    getValue: fallback => getTokenValue('color.background.accent.purple.subtlest', fallback),
     token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)" // source for hex code was legacy token P50,
@@ -169,3 +184,3 @@ },
   ['#C0B6F2']: {
-    tokenName: 'color.background.accent.purple.subtler',
+    getValue: fallback => getTokenValue('color.background.accent.purple.subtler', fallback),
     token: "var(--ds-background-accent-purple-subtler, #C0B6F2)" // source for hex code was legacy token P75,
@@ -176,3 +191,3 @@ },
   ['#998DD9']: {
-    tokenName: 'color.background.accent.purple.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.purple.subtle', fallback),
     token: "var(--ds-background-accent-purple-subtle, #998DD9)" // source for hex code was legacy token P100,
@@ -184,3 +199,3 @@ },
   ['#FFFFFF']: {
-    tokenName: 'elevation.surface',
+    getValue: fallback => getTokenValue('elevation.surface', fallback),
     token: "var(--ds-surface, #FFFFFF)" // source for hex code was legacy token N0,
@@ -191,3 +206,3 @@ },
   ['#F4F5F7']: {
-    tokenName: 'color.background.accent.gray.subtlest',
+    getValue: fallback => getTokenValue('color.background.accent.gray.subtlest', fallback),
     token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)" // source for hex code was legacy token N20,
@@ -198,8 +213,5 @@ },
   ['#B3BAC5']: {
-    tokenName: 'color.background.accent.gray.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.gray.subtle', fallback),
     token: "var(--ds-background-accent-gray-subtle, #B3BAC5)" // source for hex code was legacy token N60,
   }
-};
-
-const backgroundPaletteKeys = Object.keys(editorBackgroundPalette);
-const tokenNames = backgroundPaletteKeys.map(hexCode => editorBackgroundPalette[hexCode].tokenName);
+};

dist/es2019/index.js

@@ -1,4 +0,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';

dist/es2019/table-charts.js

 // This import will be stripped on build
 // eslint-disable-next-line import/no-extraneous-dependencies
+import { getTokenValue } from '@atlaskit/tokens';
 
@@ -30,3 +31,17 @@ /**
 }
-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
@@ -36,3 +51,3 @@ // (preferencing better type on consumption over safety in implementation)
   const tokenData = editorTableChartsPalette[hexColor.toUpperCase()];
-  return tokenData ? tokenData.tokenName : undefined;
+  return tokenData ? tokenData.getValue(hexColor) : undefined;
 }
@@ -54,147 +69,145 @@ // Colors taken from
   ['#7AB2FF']: {
-    tokenName: 'color.background.accent.blue.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.blue.subtle', fallback),
     token: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
   },
   ['#60C6D2']: {
-    tokenName: 'color.background.accent.teal.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.teal.subtle', fallback),
     token: "var(--ds-background-accent-teal-subtle, #60C6D2)"
   },
   ['#6BE1B0']: {
-    tokenName: 'color.background.accent.green.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.green.subtle', fallback),
     token: "var(--ds-background-accent-green-subtle, #6BE1B0)"
   },
   ['#FFDB57']: {
-    tokenName: 'color.background.accent.yellow.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.yellow.subtle', fallback),
     token: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
   },
   ['#FAA53D']: {
-    tokenName: 'color.background.accent.orange.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.orange.subtle', fallback),
     token: "var(--ds-background-accent-orange-subtle, #FAA53D)"
   },
   ['#FF8F73']: {
-    tokenName: 'color.background.accent.red.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.red.subtle', fallback),
     token: "var(--ds-background-accent-red-subtle, #FF8F73)"
   },
   ['#E774BB']: {
-    tokenName: 'color.background.accent.magenta.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.magenta.subtle', fallback),
     token: "var(--ds-background-accent-magenta-subtle, #E774BB)"
   },
   ['#B5A7FB']: {
-    tokenName: 'color.background.accent.purple.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.purple.subtle', fallback),
     token: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
   },
   ['#8993A5']: {
-    tokenName: 'color.background.accent.gray.subtler',
+    getValue: fallback => getTokenValue('color.background.accent.gray.subtler', fallback),
     token: "var(--ds-background-accent-gray-subtler, #8993A5)"
   },
   ['#247FFF']: {
-    tokenName: 'color.chart.blue.bold',
+    getValue: fallback => getTokenValue('color.chart.blue.bold', fallback),
     token: "var(--ds-chart-blue-bold, #247FFF)"
   },
   ['#1D9AAA']: {
-    tokenName: 'color.chart.teal.bold',
+    getValue: fallback => getTokenValue('color.chart.teal.bold', fallback),
     token: "var(--ds-chart-teal-bold, #1D9AAA)"
   },
   ['#23A971']: {
-    tokenName: 'color.chart.green.bold',
+    getValue: fallback => getTokenValue('color.chart.green.bold', fallback),
     token: "var(--ds-chart-green-bold, #23A971)"
   },
   ['#FFBE33']: {
-    tokenName: 'color.chart.yellow.bold',
+    getValue: fallback => getTokenValue('color.chart.yellow.bold', fallback),
     token: "var(--ds-chart-yellow-bold, #FFBE33)"
   },
   ['#D97008']: {
-    tokenName: 'color.chart.orange.bold',
+    getValue: fallback => getTokenValue('color.chart.orange.bold', fallback),
     token: "var(--ds-chart-orange-bold, #D97008)"
   },
   ['#FC552C']: {
-    tokenName: 'color.chart.red.bold',
+    getValue: fallback => getTokenValue('color.chart.red.bold', fallback),
     token: "var(--ds-chart-red-bold, #FC552C)"
   },
   ['#DA62AC']: {
-    tokenName: 'color.chart.magenta.bold',
+    getValue: fallback => getTokenValue('color.chart.magenta.bold', fallback),
     token: "var(--ds-chart-magenta-bold, #DA62AC)"
   },
   ['#8B77EE']: {
-    tokenName: 'color.chart.purple.bold',
+    getValue: fallback => getTokenValue('color.chart.purple.bold', fallback),
     token: "var(--ds-chart-purple-bold, #8B77EE)"
   },
   ['#8590A2']: {
-    tokenName: 'color.chart.gray.bold',
+    getValue: fallback => getTokenValue('color.chart.gray.bold', fallback),
     token: "var(--ds-chart-gray-bold, #8590A2)"
   },
   ['#0055CC']: {
-    tokenName: 'color.chart.blue.bolder',
+    getValue: fallback => getTokenValue('color.chart.blue.bolder', fallback),
     token: "var(--ds-chart-blue-bolder, #0055CC)"
   },
   ['#1D7F8C']: {
-    tokenName: 'color.chart.teal.bolder',
+    getValue: fallback => getTokenValue('color.chart.teal.bolder', fallback),
     token: "var(--ds-chart-teal-bolder, #1D7F8C)"
   },
   ['#177D52']: {
-    tokenName: 'color.chart.green.bolder',
+    getValue: fallback => getTokenValue('color.chart.green.bolder', fallback),
     token: "var(--ds-chart-green-bolder, #177D52)"
   },
   ['#FF9D00']: {
-    tokenName: 'color.chart.yellow.bolder',
+    getValue: fallback => getTokenValue('color.chart.yellow.bolder', fallback),
     token: "var(--ds-chart-yellow-bolder, #FF9D00)"
   },
   ['#B65C02']: {
-    tokenName: 'color.chart.orange.bolder',
+    getValue: fallback => getTokenValue('color.chart.orange.bolder', fallback),
     token: "var(--ds-chart-orange-bolder, #B65C02)"
   },
   ['#D32D03']: {
-    tokenName: 'color.chart.red.bolder',
+    getValue: fallback => getTokenValue('color.chart.red.bolder', fallback),
     token: "var(--ds-chart-red-bolder, #D32D03)"
   },
   ['#CD519D']: {
-    tokenName: 'color.chart.magenta.bolder',
+    getValue: fallback => getTokenValue('color.chart.magenta.bolder', fallback),
     token: "var(--ds-chart-magenta-bolder, #CD519D)"
   },
   ['#5A43D0']: {
-    tokenName: 'color.chart.purple.bolder',
+    getValue: fallback => getTokenValue('color.chart.purple.bolder', fallback),
     token: "var(--ds-chart-purple-bolder, #5A43D0)"
   },
   ['#758195']: {
-    tokenName: 'color.chart.gray.bolder',
+    getValue: fallback => getTokenValue('color.chart.gray.bolder', fallback),
     token: "var(--ds-chart-gray-bolder, #758195)"
   },
   ['#003884']: {
-    tokenName: 'color.chart.blue.boldest',
+    getValue: fallback => getTokenValue('color.chart.blue.boldest', fallback),
     token: "var(--ds-chart-blue-boldest, #003884)"
   },
   ['#206B74']: {
-    tokenName: 'color.chart.teal.boldest',
+    getValue: fallback => getTokenValue('color.chart.teal.boldest', fallback),
     token: "var(--ds-chart-teal-boldest, #206B74)"
   },
   ['#055C3F']: {
-    tokenName: 'color.chart.green.boldest',
+    getValue: fallback => getTokenValue('color.chart.green.boldest', fallback),
     token: "var(--ds-chart-green-boldest, #055C3F)"
   },
   ['#946104']: {
-    tokenName: 'color.chart.yellow.boldest',
+    getValue: fallback => getTokenValue('color.chart.yellow.boldest', fallback),
     token: "var(--ds-chart-yellow-boldest, #946104)"
   },
   ['#974F0C']: {
-    tokenName: 'color.chart.orange.boldest',
+    getValue: fallback => getTokenValue('color.chart.orange.boldest', fallback),
     token: "var(--ds-chart-orange-boldest, #974F0C)"
   },
   ['#A32000']: {
-    tokenName: 'color.chart.red.boldest',
+    getValue: fallback => getTokenValue('color.chart.red.boldest', fallback),
     token: "var(--ds-chart-red-boldest, #A32000)"
   },
   ['#943D73']: {
-    tokenName: 'color.chart.magenta.boldest',
+    getValue: fallback => getTokenValue('color.chart.magenta.boldest', fallback),
     token: "var(--ds-chart-magenta-boldest, #943D73)"
   },
   ['#44368B']: {
-    tokenName: 'color.chart.purple.boldest',
+    getValue: fallback => getTokenValue('color.chart.purple.boldest', fallback),
     token: "var(--ds-chart-purple-boldest, #44368B)"
   },
   ['#44546F']: {
-    tokenName: 'color.chart.gray.boldest',
+    getValue: fallback => getTokenValue('color.chart.gray.boldest', fallback),
     token: "var(--ds-chart-gray-boldest, #44546F)"
   }
-};
-const tableChartsPaletteKeys = Object.keys(editorTableChartsPalette);
-const tokenNames = tableChartsPaletteKeys.map(hexCode => editorTableChartsPalette[hexCode].tokenName);
+};

dist/es2019/version.json

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

dist/esm/background.js

@@ -5,2 +5,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // eslint-disable-next-line import/no-extraneous-dependencies
+import { getTokenValue } from '@atlaskit/tokens';
 
@@ -24,3 +25,3 @@ /**
  * - **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.
  */
@@ -34,3 +35,17 @@ export function hexToEditorBackgroundPaletteColor(hexColor) {
 }
-export function hexToEditorBackgroundPaletteColorTokenName(hexColor) {
+
+/**
+ * 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 function hexToEditorBackgroundPaletteRawValue(hexColor) {
   // Ts ignore used to allow use of conditional return type
@@ -40,78 +55,116 @@ // (preferencing better type on consumption over safety in implementation)
   var tokenData = editorBackgroundPalette[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
-
-// values are asserted to improve generated type declarations
-// Modified structure as having tokenName, token
-//  and possibly editorColorName in future will make it
-//  simpler to link everything together.
+/**
+ * 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 var editorBackgroundPalette = (_editorBackgroundPale = {}, _defineProperty(_editorBackgroundPale, '#DEEBFF', {
-  tokenName: 'color.background.accent.blue.subtlest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.blue.subtlest', fallback);
+  },
   token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)"
 }), _defineProperty(_editorBackgroundPale, '#B3D4FF', {
-  tokenName: 'color.background.accent.blue.subtler',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.blue.subtler', fallback);
+  },
   token: "var(--ds-background-accent-blue-subtler, #B3D4FF)"
 }), _defineProperty(_editorBackgroundPale, '#4C9AFF', {
-  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, #4C9AFF)"
 }), _defineProperty(_editorBackgroundPale, '#E6FCFF', {
-  tokenName: 'color.background.accent.teal.subtlest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.teal.subtlest', fallback);
+  },
   token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)" // source for hex code was legacy token T50,
 }), _defineProperty(_editorBackgroundPale, '#B3F5FF', {
-  tokenName: 'color.background.accent.teal.subtler',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.teal.subtler', fallback);
+  },
   token: "var(--ds-background-accent-teal-subtler, #B3F5FF)" // source for hex code was legacy token T75,
 }), _defineProperty(_editorBackgroundPale, '#79E2F2', {
-  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, #79E2F2)" // source for hex code was legacy token T100,
 }), _defineProperty(_editorBackgroundPale, '#E3FCEF', {
-  tokenName: 'color.background.accent.green.subtlest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.green.subtlest', fallback);
+  },
   token: "var(--ds-background-accent-green-subtlest, #E3FCEF)" // source for hex code was legacy token G50,
 }), _defineProperty(_editorBackgroundPale, '#ABF5D1', {
-  tokenName: 'color.background.accent.green.subtler',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.green.subtler', fallback);
+  },
   token: "var(--ds-background-accent-green-subtler, #ABF5D1)" // source for hex code was legacy token G75,
 }), _defineProperty(_editorBackgroundPale, '#57D9A3', {
-  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, #57D9A3)" // source for hex code was legacy token G200,
 }), _defineProperty(_editorBackgroundPale, '#FFFAE6', {
-  tokenName: 'color.background.accent.yellow.subtlest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.yellow.subtlest', fallback);
+  },
   token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)" // source for hex code was legacy token Y50,
 }), _defineProperty(_editorBackgroundPale, '#FFF0B3', {
-  tokenName: 'color.background.accent.yellow.subtler',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.yellow.subtler', fallback);
+  },
   token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)" // source for hex code was legacy token Y75,
 }), _defineProperty(_editorBackgroundPale, '#FFC400', {
-  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, #FFC400)" // source for hex code was legacy token Y200,
 }), _defineProperty(_editorBackgroundPale, '#FFEBE6', {
-  tokenName: 'color.background.accent.red.subtlest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.red.subtlest', fallback);
+  },
   token: "var(--ds-background-accent-red-subtlest, #FFEBE6)" // source for hex code was legacy token R50,
 }), _defineProperty(_editorBackgroundPale, '#FFBDAD', {
-  tokenName: 'color.background.accent.red.subtler',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.red.subtler', fallback);
+  },
   token: "var(--ds-background-accent-red-subtler, #FFBDAD)" // source for hex code was legacy token R75,
 }), _defineProperty(_editorBackgroundPale, '#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)" // source for hex code was legacy token R100,
 }), _defineProperty(_editorBackgroundPale, '#EAE6FF', {
-  tokenName: 'color.background.accent.purple.subtlest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.purple.subtlest', fallback);
+  },
   token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)" // source for hex code was legacy token P50,
 }), _defineProperty(_editorBackgroundPale, '#C0B6F2', {
-  tokenName: 'color.background.accent.purple.subtler',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.purple.subtler', fallback);
+  },
   token: "var(--ds-background-accent-purple-subtler, #C0B6F2)" // source for hex code was legacy token P75,
 }), _defineProperty(_editorBackgroundPale, '#998DD9', {
-  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, #998DD9)" // source for hex code was legacy token P100,
 }), _defineProperty(_editorBackgroundPale, '#FFFFFF', {
-  tokenName: 'elevation.surface',
+  getValue: function getValue(fallback) {
+    return getTokenValue('elevation.surface', fallback);
+  },
   token: "var(--ds-surface, #FFFFFF)" // source for hex code was legacy token N0,
 }), _defineProperty(_editorBackgroundPale, '#F4F5F7', {
-  tokenName: 'color.background.accent.gray.subtlest',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.gray.subtlest', fallback);
+  },
   token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)" // source for hex code was legacy token N20,
 }), _defineProperty(_editorBackgroundPale, '#B3BAC5', {
-  tokenName: 'color.background.accent.gray.subtle',
+  getValue: function getValue(fallback) {
+    return getTokenValue('color.background.accent.gray.subtle', fallback);
+  },
   token: "var(--ds-background-accent-gray-subtle, #B3BAC5)" // source for hex code was legacy token N60,
-}), _editorBackgroundPale);
-var backgroundPaletteKeys = Object.keys(editorBackgroundPalette);
-var tokenNames = backgroundPaletteKeys.map(function (hexCode) {
-  return editorBackgroundPalette[hexCode].tokenName;
-});
+}), _editorBackgroundPale);

dist/esm/index.js

@@ -1,4 +0,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';

dist/esm/table-charts.js

@@ -5,2 +5,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // eslint-disable-next-line import/no-extraneous-dependencies
+import { getTokenValue } from '@atlaskit/tokens';
 
@@ -33,3 +34,17 @@ /**
 }
-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
@@ -39,3 +54,3 @@ // (preferencing better type on consumption over safety in implementation)
   var tokenData = editorTableChartsPalette[hexColor.toUpperCase()];
-  return tokenData ? tokenData.tokenName : undefined;
+  return tokenData ? tokenData.getValue(hexColor) : undefined;
 }
@@ -56,113 +71,181 @@ // Colors taken from
 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);

dist/esm/version.json

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

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

@@ -18,12 +18,30 @@ /**
  * - **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)";
@@ -33,3 +51,3 @@ };
     "#B3D4FF": {
-        tokenName: "color.background.accent.blue.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-blue-subtler, #B3D4FF)";
@@ -39,3 +57,3 @@ };
     "#4C9AFF": {
-        tokenName: "color.background.accent.blue.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-blue-subtle, #4C9AFF)";
@@ -45,3 +63,3 @@ };
     "#E6FCFF": {
-        tokenName: "color.background.accent.teal.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)";
@@ -51,3 +69,3 @@ };
     "#B3F5FF": {
-        tokenName: "color.background.accent.teal.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-teal-subtler, #B3F5FF)";
@@ -57,3 +75,3 @@ };
     "#79E2F2": {
-        tokenName: "color.background.accent.teal.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-teal-subtle, #79E2F2)";
@@ -63,3 +81,3 @@ };
     "#E3FCEF": {
-        tokenName: "color.background.accent.green.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-green-subtlest, #E3FCEF)";
@@ -69,3 +87,3 @@ };
     "#ABF5D1": {
-        tokenName: "color.background.accent.green.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-green-subtler, #ABF5D1)";
@@ -75,3 +93,3 @@ };
     "#57D9A3": {
-        tokenName: "color.background.accent.green.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-green-subtle, #57D9A3)";
@@ -81,3 +99,3 @@ };
     "#FFFAE6": {
-        tokenName: "color.background.accent.yellow.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)";
@@ -87,3 +105,3 @@ };
     "#FFF0B3": {
-        tokenName: "color.background.accent.yellow.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
@@ -93,3 +111,3 @@ };
     "#FFC400": {
-        tokenName: "color.background.accent.orange.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-orange-subtle, #FFC400)";
@@ -99,3 +117,3 @@ };
     "#FFEBE6": {
-        tokenName: "color.background.accent.red.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-red-subtlest, #FFEBE6)";
@@ -105,3 +123,3 @@ };
     "#FFBDAD": {
-        tokenName: "color.background.accent.red.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-red-subtler, #FFBDAD)";
@@ -111,3 +129,3 @@ };
     "#FF8F73": {
-        tokenName: "color.background.accent.red.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-red-subtle, #FF8F73)";
@@ -117,3 +135,3 @@ };
     "#EAE6FF": {
-        tokenName: "color.background.accent.purple.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)";
@@ -123,3 +141,3 @@ };
     "#C0B6F2": {
-        tokenName: "color.background.accent.purple.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-purple-subtler, #C0B6F2)";
@@ -129,3 +147,3 @@ };
     "#998DD9": {
-        tokenName: "color.background.accent.purple.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-purple-subtle, #998DD9)";
@@ -135,3 +153,3 @@ };
     "#FFFFFF": {
-        tokenName: "elevation.surface";
+        getValue: (fallback: string) => string;
         token: "var(--ds-surface, #FFFFFF)";
@@ -141,3 +159,3 @@ };
     "#F4F5F7": {
-        tokenName: "color.background.accent.gray.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)";
@@ -147,8 +165,6 @@ };
     "#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 {};

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

@@ -1,4 +0,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';

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

@@ -21,3 +21,16 @@ /**
 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;
@@ -37,148 +50,146 @@ export type EditorTableChartsPaletteKey = keyof 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 {};

dist/types/background.d.ts

@@ -18,12 +18,30 @@ /**
  * - **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)";
@@ -33,3 +51,3 @@ };
     "#B3D4FF": {
-        tokenName: "color.background.accent.blue.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-blue-subtler, #B3D4FF)";
@@ -39,3 +57,3 @@ };
     "#4C9AFF": {
-        tokenName: "color.background.accent.blue.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-blue-subtle, #4C9AFF)";
@@ -45,3 +63,3 @@ };
     "#E6FCFF": {
-        tokenName: "color.background.accent.teal.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)";
@@ -51,3 +69,3 @@ };
     "#B3F5FF": {
-        tokenName: "color.background.accent.teal.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-teal-subtler, #B3F5FF)";
@@ -57,3 +75,3 @@ };
     "#79E2F2": {
-        tokenName: "color.background.accent.teal.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-teal-subtle, #79E2F2)";
@@ -63,3 +81,3 @@ };
     "#E3FCEF": {
-        tokenName: "color.background.accent.green.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-green-subtlest, #E3FCEF)";
@@ -69,3 +87,3 @@ };
     "#ABF5D1": {
-        tokenName: "color.background.accent.green.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-green-subtler, #ABF5D1)";
@@ -75,3 +93,3 @@ };
     "#57D9A3": {
-        tokenName: "color.background.accent.green.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-green-subtle, #57D9A3)";
@@ -81,3 +99,3 @@ };
     "#FFFAE6": {
-        tokenName: "color.background.accent.yellow.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)";
@@ -87,3 +105,3 @@ };
     "#FFF0B3": {
-        tokenName: "color.background.accent.yellow.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
@@ -93,3 +111,3 @@ };
     "#FFC400": {
-        tokenName: "color.background.accent.orange.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-orange-subtle, #FFC400)";
@@ -99,3 +117,3 @@ };
     "#FFEBE6": {
-        tokenName: "color.background.accent.red.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-red-subtlest, #FFEBE6)";
@@ -105,3 +123,3 @@ };
     "#FFBDAD": {
-        tokenName: "color.background.accent.red.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-red-subtler, #FFBDAD)";
@@ -111,3 +129,3 @@ };
     "#FF8F73": {
-        tokenName: "color.background.accent.red.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-red-subtle, #FF8F73)";
@@ -117,3 +135,3 @@ };
     "#EAE6FF": {
-        tokenName: "color.background.accent.purple.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)";
@@ -123,3 +141,3 @@ };
     "#C0B6F2": {
-        tokenName: "color.background.accent.purple.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-purple-subtler, #C0B6F2)";
@@ -129,3 +147,3 @@ };
     "#998DD9": {
-        tokenName: "color.background.accent.purple.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-purple-subtle, #998DD9)";
@@ -135,3 +153,3 @@ };
     "#FFFFFF": {
-        tokenName: "elevation.surface";
+        getValue: (fallback: string) => string;
         token: "var(--ds-surface, #FFFFFF)";
@@ -141,3 +159,3 @@ };
     "#F4F5F7": {
-        tokenName: "color.background.accent.gray.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)";
@@ -147,8 +165,6 @@ };
     "#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 {};

dist/types/index.d.ts

@@ -1,4 +0,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';

dist/types/table-charts.d.ts

@@ -21,3 +21,16 @@ /**
 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;
@@ -37,148 +50,146 @@ export type EditorTableChartsPaletteKey = keyof 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.json

 {
   "name": "@atlaskit/editor-palette",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "The editor palette",
@@ -36,2 +36,3 @@ "author": "Atlassian Pty Ltd",
   "dependencies": {
+    "@atlaskit/tokens": "^1.4.0",
     "@babel/runtime": "^7.0.0"
@@ -42,6 +43,3 @@ },
     "@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",
@@ -48,0 +46,0 @@ "@testing-library/react": "^12.1.5",

report.api.md

@@ -21,86 +21,86 @@ <!-- API Report Version: 2.3 -->
 
-// @public (undocumented)
+// @public
 const editorBackgroundPalette: {
   '#DEEBFF': {
-    tokenName: 'color.background.accent.blue.subtlest';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-blue-subtlest, #DEEBFF)';
   };
   '#B3D4FF': {
-    tokenName: 'color.background.accent.blue.subtler';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-blue-subtler, #B3D4FF)';
   };
   '#4C9AFF': {
-    tokenName: 'color.background.accent.blue.subtle';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-blue-subtle, #4C9AFF)';
   };
   '#E6FCFF': {
-    tokenName: 'color.background.accent.teal.subtlest';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-teal-subtlest, #E6FCFF)';
   };
   '#B3F5FF': {
-    tokenName: 'color.background.accent.teal.subtler';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-teal-subtler, #B3F5FF)';
   };
   '#79E2F2': {
-    tokenName: 'color.background.accent.teal.subtle';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-teal-subtle, #79E2F2)';
   };
   '#E3FCEF': {
-    tokenName: 'color.background.accent.green.subtlest';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-green-subtlest, #E3FCEF)';
   };
   '#ABF5D1': {
-    tokenName: 'color.background.accent.green.subtler';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-green-subtler, #ABF5D1)';
   };
   '#57D9A3': {
-    tokenName: 'color.background.accent.green.subtle';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-green-subtle, #57D9A3)';
   };
   '#FFFAE6': {
-    tokenName: 'color.background.accent.yellow.subtlest';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-yellow-subtlest, #FFFAE6)';
   };
   '#FFF0B3': {
-    tokenName: 'color.background.accent.yellow.subtler';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-yellow-subtler, #FFF0B3)';
   };
   '#FFC400': {
-    tokenName: 'color.background.accent.orange.subtle';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-orange-subtle, #FFC400)';
   };
   '#FFEBE6': {
-    tokenName: 'color.background.accent.red.subtlest';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-red-subtlest, #FFEBE6)';
   };
   '#FFBDAD': {
-    tokenName: 'color.background.accent.red.subtler';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-red-subtler, #FFBDAD)';
   };
   '#FF8F73': {
-    tokenName: 'color.background.accent.red.subtle';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-red-subtle, #FF8F73)';
   };
   '#EAE6FF': {
-    tokenName: 'color.background.accent.purple.subtlest';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-purple-subtlest, #EAE6FF)';
   };
   '#C0B6F2': {
-    tokenName: 'color.background.accent.purple.subtler';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-purple-subtler, #C0B6F2)';
   };
   '#998DD9': {
-    tokenName: 'color.background.accent.purple.subtle';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-purple-subtle, #998DD9)';
   };
   '#FFFFFF': {
-    tokenName: 'elevation.surface';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-surface, #FFFFFF)';
   };
   '#F4F5F7': {
-    tokenName: 'color.background.accent.gray.subtlest';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-gray-subtlest, #F4F5F7)';
   };
   '#B3BAC5': {
-    tokenName: 'color.background.accent.gray.subtle';
+    getValue: (fallback: string) => string;
     token: 'var(--ds-background-accent-gray-subtle, #B3BAC5)';
@@ -114,8 +114,2 @@ };
 // @public (undocumented)
-type EditorBackgroundPaletteTokenNames = (typeof tokenNames)[number];
-
-// @public (undocumented)
-type EditorBackgroundPaletteTokenNames_2 = (typeof tokenNames_2)[number];
-
-// @public (undocumented)
 type EditorBorderPalette = typeof editorBorderPalette;
@@ -139,143 +133,143 @@
   '#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)';
@@ -326,10 +320,6 @@ };
 
-// @public (undocumented)
-export function hexToEditorBackgroundPaletteColorTokenName<
-  HexColor extends string,
->(
+// @public
+export function hexToEditorBackgroundPaletteRawValue<HexColor extends string>(
   hexColor: HexColor,
-): HexColor extends EditorBackgroundPaletteKey
-  ? EditorBackgroundPalette[HexColor]['tokenName']
-  : EditorBackgroundPaletteTokenNames | undefined;
+): HexColor extends EditorBackgroundPaletteKey ? string : undefined;
 
@@ -350,10 +340,6 @@ // @public
 
-// @public (undocumented)
-export function hexToEditorTableChartsPaletteColorTokenName<
-  HexColor extends string,
->(
+// @public
+export function hexToEditorTableChartsPaletteRawValue<HexColor extends string>(
   hexColor: HexColor,
-): HexColor extends EditorTableChartsPaletteKey
-  ? EditorTableChartsPalette[HexColor]['tokenName']
-  : EditorBackgroundPaletteTokenNames_2 | undefined;
+): HexColor extends EditorTableChartsPaletteKey ? string : undefined;
 
@@ -367,67 +353,2 @@ // @public
 
-// @public (undocumented)
-const tokenNames: (
-  | 'color.background.accent.blue.subtle'
-  | 'color.background.accent.blue.subtler'
-  | 'color.background.accent.blue.subtlest'
-  | 'color.background.accent.gray.subtle'
-  | 'color.background.accent.gray.subtlest'
-  | 'color.background.accent.green.subtle'
-  | 'color.background.accent.green.subtler'
-  | 'color.background.accent.green.subtlest'
-  | 'color.background.accent.orange.subtle'
-  | 'color.background.accent.purple.subtle'
-  | 'color.background.accent.purple.subtler'
-  | 'color.background.accent.purple.subtlest'
-  | 'color.background.accent.red.subtle'
-  | 'color.background.accent.red.subtler'
-  | 'color.background.accent.red.subtlest'
-  | 'color.background.accent.teal.subtle'
-  | 'color.background.accent.teal.subtler'
-  | 'color.background.accent.teal.subtlest'
-  | 'color.background.accent.yellow.subtler'
-  | 'color.background.accent.yellow.subtlest'
-  | 'elevation.surface'
-)[];
-
-// @public (undocumented)
-const tokenNames_2: (
-  | 'color.background.accent.blue.subtle'
-  | 'color.background.accent.gray.subtler'
-  | 'color.background.accent.green.subtle'
-  | 'color.background.accent.magenta.subtle'
-  | 'color.background.accent.orange.subtle'
-  | 'color.background.accent.purple.subtle'
-  | 'color.background.accent.red.subtle'
-  | 'color.background.accent.teal.subtle'
-  | 'color.background.accent.yellow.subtle'
-  | 'color.chart.blue.bold'
-  | 'color.chart.blue.bolder'
-  | 'color.chart.blue.boldest'
-  | 'color.chart.gray.bold'
-  | 'color.chart.gray.bolder'
-  | 'color.chart.gray.boldest'
-  | 'color.chart.green.bold'
-  | 'color.chart.green.bolder'
-  | 'color.chart.green.boldest'
-  | 'color.chart.magenta.bold'
-  | 'color.chart.magenta.bolder'
-  | 'color.chart.magenta.boldest'
-  | 'color.chart.orange.bold'
-  | 'color.chart.orange.bolder'
-  | 'color.chart.orange.boldest'
-  | 'color.chart.purple.bold'
-  | 'color.chart.purple.bolder'
-  | 'color.chart.purple.boldest'
-  | 'color.chart.red.bold'
-  | 'color.chart.red.bolder'
-  | 'color.chart.red.boldest'
-  | 'color.chart.teal.bold'
-  | 'color.chart.teal.bolder'
-  | 'color.chart.teal.boldest'
-  | 'color.chart.yellow.bold'
-  | 'color.chart.yellow.bolder'
-  | 'color.chart.yellow.boldest'
-)[];
-
 // (No @packageDocumentation comment for this package)
@@ -434,0 +355,0 @@ ```

tmp/api-report-tmp.d.ts

@@ -10,86 +10,86 @@ ## API Report File for "@atlaskit/editor-palette"
 
-// @public (undocumented)
+// @public
 const editorBackgroundPalette: {
     "#DEEBFF": {
-        tokenName: "color.background.accent.blue.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)";
     };
     "#B3D4FF": {
-        tokenName: "color.background.accent.blue.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-blue-subtler, #B3D4FF)";
     };
     "#4C9AFF": {
-        tokenName: "color.background.accent.blue.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-blue-subtle, #4C9AFF)";
     };
     "#E6FCFF": {
-        tokenName: "color.background.accent.teal.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)";
     };
     "#B3F5FF": {
-        tokenName: "color.background.accent.teal.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-teal-subtler, #B3F5FF)";
     };
     "#79E2F2": {
-        tokenName: "color.background.accent.teal.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-teal-subtle, #79E2F2)";
     };
     "#E3FCEF": {
-        tokenName: "color.background.accent.green.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-green-subtlest, #E3FCEF)";
     };
     "#ABF5D1": {
-        tokenName: "color.background.accent.green.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-green-subtler, #ABF5D1)";
     };
     "#57D9A3": {
-        tokenName: "color.background.accent.green.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-green-subtle, #57D9A3)";
     };
     "#FFFAE6": {
-        tokenName: "color.background.accent.yellow.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)";
     };
     "#FFF0B3": {
-        tokenName: "color.background.accent.yellow.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
     };
     "#FFC400": {
-        tokenName: "color.background.accent.orange.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-orange-subtle, #FFC400)";
     };
     "#FFEBE6": {
-        tokenName: "color.background.accent.red.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-red-subtlest, #FFEBE6)";
     };
     "#FFBDAD": {
-        tokenName: "color.background.accent.red.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-red-subtler, #FFBDAD)";
     };
     "#FF8F73": {
-        tokenName: "color.background.accent.red.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-red-subtle, #FF8F73)";
     };
     "#EAE6FF": {
-        tokenName: "color.background.accent.purple.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)";
     };
     "#C0B6F2": {
-        tokenName: "color.background.accent.purple.subtler";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-purple-subtler, #C0B6F2)";
     };
     "#998DD9": {
-        tokenName: "color.background.accent.purple.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-purple-subtle, #998DD9)";
     };
     "#FFFFFF": {
-        tokenName: "elevation.surface";
+        getValue: (fallback: string) => string;
         token: "var(--ds-surface, #FFFFFF)";
     };
     "#F4F5F7": {
-        tokenName: "color.background.accent.gray.subtlest";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)";
     };
     "#B3BAC5": {
-        tokenName: "color.background.accent.gray.subtle";
+        getValue: (fallback: string) => string;
         token: "var(--ds-background-accent-gray-subtle, #B3BAC5)";
@@ -103,8 +103,2 @@ };
 // @public (undocumented)
-type EditorBackgroundPaletteTokenNames = (typeof tokenNames)[number];
-
-// @public (undocumented)
-type EditorBackgroundPaletteTokenNames_2 = (typeof tokenNames_2)[number];
-
-// @public (undocumented)
 type EditorBorderPalette = typeof editorBorderPalette;
@@ -128,143 +122,143 @@
     "#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)";
@@ -311,4 +305,4 @@ };
 
-// @public (undocumented)
-export function hexToEditorBackgroundPaletteColorTokenName<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? EditorBackgroundPalette[HexColor]['tokenName'] : EditorBackgroundPaletteTokenNames | undefined;
+// @public
+export function hexToEditorBackgroundPaletteRawValue<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? string : undefined;
 
@@ -321,4 +315,4 @@ // @public
 
-// @public (undocumented)
-export function hexToEditorTableChartsPaletteColorTokenName<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? EditorTableChartsPalette[HexColor]['tokenName'] : EditorBackgroundPaletteTokenNames_2 | undefined;
+// @public
+export function hexToEditorTableChartsPaletteRawValue<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? string : undefined;
 
@@ -328,10 +322,4 @@ // @public
 
-// @public (undocumented)
-const tokenNames: ("color.background.accent.blue.subtle" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtlest" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtlest" | "color.background.accent.green.subtle" | "color.background.accent.green.subtler" | "color.background.accent.green.subtlest" | "color.background.accent.orange.subtle" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtlest" | "color.background.accent.red.subtle" | "color.background.accent.red.subtler" | "color.background.accent.red.subtlest" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtlest" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtlest" | "elevation.surface")[];
-
-// @public (undocumented)
-const tokenNames_2: ("color.background.accent.blue.subtle" | "color.background.accent.gray.subtler" | "color.background.accent.green.subtle" | "color.background.accent.magenta.subtle" | "color.background.accent.orange.subtle" | "color.background.accent.purple.subtle" | "color.background.accent.red.subtle" | "color.background.accent.teal.subtle" | "color.background.accent.yellow.subtle" | "color.chart.blue.bold" | "color.chart.blue.bolder" | "color.chart.blue.boldest" | "color.chart.gray.bold" | "color.chart.gray.bolder" | "color.chart.gray.boldest" | "color.chart.green.bold" | "color.chart.green.bolder" | "color.chart.green.boldest" | "color.chart.magenta.bold" | "color.chart.magenta.bolder" | "color.chart.magenta.boldest" | "color.chart.orange.bold" | "color.chart.orange.bolder" | "color.chart.orange.boldest" | "color.chart.purple.bold" | "color.chart.purple.bolder" | "color.chart.purple.boldest" | "color.chart.red.bold" | "color.chart.red.bolder" | "color.chart.red.boldest" | "color.chart.teal.bold" | "color.chart.teal.bolder" | "color.chart.teal.boldest" | "color.chart.yellow.bold" | "color.chart.yellow.bolder" | "color.chart.yellow.boldest")[];
-
 // (No @packageDocumentation comment for this package)
 
 ```

No alert changes

Improved metrics

Total package byte prevSize

149018

increased by6.02%

Dev dependency count

9

decreased by-25%

Lines of code

2788

increased by12.87%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Added@atlaskit/tokens@^1.4.0

• + Added@atlaskit/ds-lib@2.3.1(transitive)

• + Added@atlaskit/platform-feature-flags@0.2.5(transitive)

• + Added@atlaskit/tokens@1.53.0(transitive)

• + Added@babel/code-frame@7.24.7(transitive)

• + Added@babel/generator@7.24.7(transitive)

• + Added@babel/helper-environment-visitor@7.24.7(transitive)

• + Added@babel/helper-function-name@7.24.7(transitive)

• + Added@babel/helper-hoist-variables@7.24.7(transitive)

• + Added@babel/helper-split-export-declaration@7.24.7(transitive)

• + Added@babel/helper-string-parser@7.24.7(transitive)

• + Added@babel/helper-validator-identifier@7.24.7(transitive)

• + Added@babel/highlight@7.24.7(transitive)

• + Added@babel/parser@7.24.7(transitive)

• + Added@babel/template@7.24.7(transitive)

• + Added@babel/traverse@7.24.7(transitive)

• + Added@babel/types@7.24.7(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.4.15(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Addedansi-styles@3.2.1(transitive)

• + Addedbind-event-listener@3.0.0(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addeddebug@4.3.5(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjsesc@2.5.2(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedms@2.1.2(transitive)

• + Addedpicocolors@1.0.1(transitive)

• + Addedreact@18.2.0(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedto-fast-properties@2.0.0(transitive)