@atlaskit/editor-palette 1.4.3 → 1.5.0

package/dist/es2019/background.js

@@ -1,5 +1,6 @@
 // This import will be stripped on build
 // eslint-disable-next-line import/no-extraneous-dependencies
+import { getTokenValue } from '@atlaskit/tokens';
 
 /**
  * This takes an adf hex color and returns a matching background palette
@@ -18,7 +19,7 @@
  * The exact output of this function is an implementation detail and should only be used when rendering
  * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
  * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
- * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color.
  */
 export function hexToEditorBackgroundPaletteColor(hexColor) {
   // Ts ignore used to allow use of conditional return type
@@ -27,37 +28,51 @@ export function hexToEditorBackgroundPaletteColor(hexColor) {
   const tokenData = editorBackgroundPalette[hexColor.toUpperCase()];
   return tokenData ? tokenData.token : undefined;
 }
-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
   // (preferencing better type on consumption over safety in implementation)
   // @ts-ignore
   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 = {
   // blue
   /** blue - light */
   ['#DEEBFF']: {
-    tokenName: 'color.background.accent.blue.subtlest',
+    getValue: fallback => getTokenValue('color.background.accent.blue.subtlest', fallback),
     token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)"
   },
   // source for hex code was legacy token B50
   /** blue - medium */
   ['#B3D4FF']: {
-    tokenName: 'color.background.accent.blue.subtler',
+    getValue: fallback => getTokenValue('color.background.accent.blue.subtler', fallback),
     token: "var(--ds-background-accent-blue-subtler, #B3D4FF)"
   },
   // source for hex code was legacy token B75
   /** blue - strong */
   ['#4C9AFF']: {
-    tokenName: 'color.background.accent.blue.subtle',
+    getValue: fallback => getTokenValue('color.background.accent.blue.subtle', fallback),
     token: "var(--ds-background-accent-blue-subtle, #4C9AFF)"
   },
   // source for hex code was legacy token B100
@@ -65,117 +80,114 @@ export const editorBackgroundPalette = {
   // teal
   /** teal - light */
   ['#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,
   },
 
   /** teal - medium */
   ['#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,
   },
 
   /** teal - strong */
   ['#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,
   },
 
   // green
   /** green - light */
   ['#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,
   },
 
   /** green - medium */
   ['#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,
   },
 
   /** green - strong */
   ['#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,
   },
 
   // yellowOrange
   /** yellowOrange - light */
   ['#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,
   },
 
   /** yellowOrange - medium */
   ['#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,
   },
 
   /** yellowOrange - strong */
   ['#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,
   },
 
   // red
   /** red - light */
   ['#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,
   },
 
   /** red - medium */
   ['#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,
   },
 
   /** red - strong */
   ['#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,
   },
 
   // purple
   /** purple - light */
   ['#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,
   },
 
   /** purple - medium */
   ['#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,
   },
 
   /** purple - strong */
   ['#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,
   },
 
   // whiteGray
   /** whiteGray - light */
   ['#FFFFFF']: {
-    tokenName: 'elevation.surface',
+    getValue: fallback => getTokenValue('elevation.surface', fallback),
     token: "var(--ds-surface, #FFFFFF)" // source for hex code was legacy token N0,
   },
 
   /** whiteGray - medium */
   ['#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,
   },
 
   /** whiteGray - strong */
   ['#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);
+};

package/dist/es2019/index.js

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

package/dist/es2019/table-charts.js

@@ -1,5 +1,6 @@
 // This import will be stripped on build
 // eslint-disable-next-line import/no-extraneous-dependencies
+import { getTokenValue } from '@atlaskit/tokens';
 
 /**
  * This takes an adf hex color and returns a matching chart palette
@@ -27,12 +28,26 @@ export function hexToEditorTableChartsPaletteColor(hexColor) {
   const tokenData = editorTableChartsPalette[hexColor.toUpperCase()];
   return tokenData ? tokenData.token : undefined;
 }
-export function hexToEditorTableChartsPaletteColorTokenName(hexColor) {
+
+/**
+ * Takes an ADF hex color and returns the rendered hex code for the associated chart palette design token using getTokenValue.
+ * If the provided color does not exist in the Editor color palette, this function returns undefined.
+ *
+ * This should only be used when rendering content where CSS variables are not feasible, such as a non-CSS environment
+ * or to enable cross-app copy/paste.
+ *
+ * WARNING: If the rendered theme changes (such as from light -> dark mode) the value returned here will no longer match
+ * the surrounding UI and will need to be re-fetched.
+ * In addition, the values of tokens will differ between themes and the value for a given theme can and will change.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color.
+ */
+export function hexToEditorTableChartsPaletteRawValue(hexColor) {
   // Ts ignore used to allow use of conditional return type
   // (preferencing better type on consumption over safety in implementation)
   // @ts-ignore
   const tokenData = editorTableChartsPalette[hexColor.toUpperCase()];
-  return tokenData ? tokenData.tokenName : undefined;
+  return tokenData ? tokenData.getValue(hexColor) : undefined;
 }
 // Colors taken from
 // https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
@@ -49,149 +64,147 @@ export function hexToEditorTableChartsPaletteColorTokenName(hexColor) {
  */
 const editorTableChartsPalette = {
   ['#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);
+};

package/dist/es2019/version.json

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

package/dist/esm/background.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _editorBackgroundPale;
 // This import will be stripped on build
 // eslint-disable-next-line import/no-extraneous-dependencies
+import { getTokenValue } from '@atlaskit/tokens';
 
 /**
  * This takes an adf hex color and returns a matching background palette
@@ -20,7 +21,7 @@ var _editorBackgroundPale;
  * The exact output of this function is an implementation detail and should only be used when rendering
  * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
  * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
- * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color.
  */
 export function hexToEditorBackgroundPaletteColor(hexColor) {
   // Ts ignore used to allow use of conditional return type
@@ -29,85 +30,137 @@ export function hexToEditorBackgroundPaletteColor(hexColor) {
   var tokenData = editorBackgroundPalette[hexColor.toUpperCase()];
   return tokenData ? tokenData.token : undefined;
 }
-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
   // (preferencing better type on consumption over safety in implementation)
   // @ts-ignore
   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);