@atlaskit/editor-palette 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-palette
 
+## 1.2.0
+
+### Minor Changes
+
+- [`bf04c417bfd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bf04c417bfd) - Add "border" mark to stage0 ADF schema
+
+## 1.1.0
+
+### Minor Changes
+
+- [`47934727661`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47934727661) - ED-17042 - Add map hex colors to DST chart tokens
+- [`2367ba14aa0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2367ba14aa0) - [ux] ED-16758 Added support for theme tokens in table cell background color.
+
 ## 1.0.0
 
 ### Major Changes

package/dist/cjs/background.js

@@ -1,17 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.editorBackgroundPalette = void 0;
 exports.hexToEditorBackgroundPaletteColor = hexToEditorBackgroundPaletteColor;
-
+exports.hexToEditorBackgroundPaletteColorTokenName = hexToEditorBackgroundPaletteColorTokenName;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _editorBackgroundPale;
-
 // This import will be stripped on build
 // eslint-disable-next-line import/no-extraneous-dependencies
 
@@ -38,11 +35,89 @@ function hexToEditorBackgroundPaletteColor(hexColor) {
   // Ts ignore used to allow use of conditional return type
   // (preferencing better type on consumption over safety in implementation)
   // @ts-ignore
-  return editorBackgroundPalette[hexColor.toUpperCase()];
+  var tokenData = editorBackgroundPalette[hexColor.toUpperCase()];
+  return tokenData ? tokenData.token : undefined;
+}
+function hexToEditorBackgroundPaletteColorTokenName(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;
 }
-
 // 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
-var editorBackgroundPalette = (_editorBackgroundPale = {}, (0, _defineProperty2.default)(_editorBackgroundPale, '#DEEBFF', "var(--ds-background-accent-blue-subtlest, #DEEBFF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3D4FF', "var(--ds-background-accent-blue-subtler, #B3D4FF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#4C9AFF', "var(--ds-background-accent-blue-subtle, #4C9AFF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#E6FCFF', "var(--ds-background-accent-teal-subtlest, #E6FCFF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3F5FF', "var(--ds-background-accent-teal-subtler, #B3F5FF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#79E2F2', "var(--ds-background-accent-teal-subtle, #79E2F2)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#E3FCEF', "var(--ds-background-accent-green-subtlest, #E3FCEF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#ABF5D1', "var(--ds-background-accent-green-subtler, #ABF5D1)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#57D9A3', "var(--ds-background-accent-green-subtle, #57D9A3)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFFAE6', "var(--ds-background-accent-yellow-subtlest, #FFFAE6)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFF0B3', "var(--ds-background-accent-yellow-subtler, #FFF0B3)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFC400', "var(--ds-background-accent-orange-subtle, #FFC400)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFEBE6', "var(--ds-background-accent-red-subtlest, #FFEBE6)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFBDAD', "var(--ds-background-accent-red-subtler, #FFBDAD)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FF8F73', "var(--ds-background-accent-red-subtle, #FF8F73)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#EAE6FF', "var(--ds-background-accent-purple-subtlest, #EAE6FF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#C0B6F2', "var(--ds-background-accent-purple-subtler, #C0B6F2)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#998DD9', "var(--ds-background-accent-purple-subtle, #998DD9)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFFFFF', "var(--ds-surface, #FFFFFF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#F4F5F7', "var(--ds-background-accent-gray-subtlest, #F4F5F7)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3BAC5', "var(--ds-background-accent-gray-subtle, #B3BAC5)"), _editorBackgroundPale);
-exports.editorBackgroundPalette = editorBackgroundPalette;
+// Modified structure as having tokenName, token
+//  and possibly editorColorName in future will make it
+//  simpler to link everything together.
+var editorBackgroundPalette = (_editorBackgroundPale = {}, (0, _defineProperty2.default)(_editorBackgroundPale, '#DEEBFF', {
+  tokenName: 'color.background.accent.blue.subtlest',
+  token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)"
+}), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3D4FF', {
+  tokenName: 'color.background.accent.blue.subtler',
+  token: "var(--ds-background-accent-blue-subtler, #B3D4FF)"
+}), (0, _defineProperty2.default)(_editorBackgroundPale, '#4C9AFF', {
+  tokenName: 'color.background.accent.blue.subtle',
+  token: "var(--ds-background-accent-blue-subtle, #4C9AFF)"
+}), (0, _defineProperty2.default)(_editorBackgroundPale, '#E6FCFF', {
+  tokenName: 'color.background.accent.teal.subtlest',
+  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',
+  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',
+  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',
+  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',
+  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',
+  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',
+  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',
+  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',
+  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',
+  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',
+  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',
+  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',
+  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',
+  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',
+  token: "var(--ds-background-accent-purple-subtle, #998DD9)" // source for hex code was legacy token P100,
+}), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFFFFF', {
+  tokenName: 'elevation.surface',
+  token: "var(--ds-surface, #FFFFFF)" // source for hex code was legacy token N0,
+}), (0, _defineProperty2.default)(_editorBackgroundPale, '#F4F5F7', {
+  tokenName: 'color.background.accent.gray.subtlest',
+  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',
+  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;
+});

package/dist/cjs/border.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.editorBorderPalette = void 0;
+exports.hexToEditorBorderPaletteColor = hexToEditorBorderPaletteColor;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _editorBorderPalette;
+// This import will be stripped on build
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+/**
+ * This takes an adf hex color and returns a matching border palette color.
+ *
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+ *
+ * Example usage
+ * ```tsx
+ * const cssValue = hexToEditorBorderPaletteColor('#091E4224');
+ * //     ^? const cssValue: string
+ * <div style={{borderColor: cssValue}} />
+ * ```
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
+ * The exact output of this function is an implementation detail and should only be used when rendering
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ */
+
+function hexToEditorBorderPaletteColor(hexColor) {
+  // Ts ignore used to allow use of conditional return type
+  // (preferencing better type on consumption over safety in implementation)
+  // @ts-ignore
+  return editorBorderPalette[hexColor.toUpperCase()];
+}
+var editorBorderPalette = (_editorBorderPalette = {}, (0, _defineProperty2.default)(_editorBorderPalette, '#091E4224', "var(--ds-border, #091E4224)"), (0, _defineProperty2.default)(_editorBorderPalette, '#758195', "var(--ds-border-bold, #758195)"), (0, _defineProperty2.default)(_editorBorderPalette, '#172B4D', "var(--ds-text, #172B4D)"), _editorBorderPalette);
+exports.editorBorderPalette = editorBorderPalette;

package/dist/cjs/index.js

@@ -9,13 +9,31 @@ Object.defineProperty(exports, "hexToEditorBackgroundPaletteColor", {
     return _background.hexToEditorBackgroundPaletteColor;
   }
 });
+Object.defineProperty(exports, "hexToEditorBackgroundPaletteColorTokenName", {
+  enumerable: true,
+  get: function get() {
+    return _background.hexToEditorBackgroundPaletteColorTokenName;
+  }
+});
+Object.defineProperty(exports, "hexToEditorBorderPaletteColor", {
+  enumerable: true,
+  get: function get() {
+    return _border.hexToEditorBorderPaletteColor;
+  }
+});
+Object.defineProperty(exports, "hexToEditorTableChartsPaletteColor", {
+  enumerable: true,
+  get: function get() {
+    return _tableCharts.hexToEditorTableChartsPaletteColor;
+  }
+});
 Object.defineProperty(exports, "hexToEditorTextPaletteColor", {
   enumerable: true,
   get: function get() {
     return _text.hexToEditorTextPaletteColor;
   }
 });
-
 var _background = require("./background");
-
-var _text = require("./text");
+var _border = require("./border");
+var _text = require("./text");
+var _tableCharts = require("./table-charts");

package/dist/cjs/table-charts.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hexToEditorTableChartsPaletteColor = hexToEditorTableChartsPaletteColor;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _editorTableChartsPal;
+// This import will be stripped on build
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+/**
+ * This takes an adf hex color and returns a matching chart palette
+ * color.
+ *
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+ *
+ * Example usage
+ * ```tsx
+ * const cssValue = hexToEditorTableChartsPaletteColor('#FFFFFF');
+ * //     ^? const cssValue: string
+ * <div style={{backgroundColor: cssValue}} />
+ * ```
+ *
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
+ * The exact output of this function is an implementation detail and should only be used when rendering
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ */
+function hexToEditorTableChartsPaletteColor(hexColor) {
+  // Ts ignore used to allow use of conditional return type
+  // (preferencing better type on consumption over safety in implementation)
+  // @ts-ignore
+  return editorTableChartsPalette[hexColor.toUpperCase()];
+}
+// 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
+
+/**
+ * Tokenize hex codes into DST chart colors or
+ *  into DST background.accent colors.
+ *
+ * The hex codes do not match the DST tokens, they are
+ *  constants that are saved in the ADF that will be rendered
+ *  as the mapped DST token.
+ *
+ * https://product-fabric.atlassian.net/browse/ED-17042
+ */
+var editorTableChartsPalette = (_editorTableChartsPal = {}, (0, _defineProperty2.default)(_editorTableChartsPal, '#7AB2FF', "var(--ds-background-accent-blue-subtle, #7AB2FF)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#60C6D2', "var(--ds-background-accent-teal-subtle, #60C6D2)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#6BE1B0', "var(--ds-background-accent-green-subtle, #6BE1B0)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#FFDB57', "var(--ds-background-accent-yellow-subtle, #FFDB57)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#FAA53D', "var(--ds-background-accent-orange-subtle, #FAA53D)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#FF8F73', "var(--ds-background-accent-red-subtle, #FF8F73)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#E774BB', "var(--ds-background-accent-magenta-subtle, #E774BB)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#B5A7FB', "var(--ds-background-accent-purple-subtle, #B5A7FB)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#8993A5', "var(--ds-background-accent-gray-subtler, #8993A5)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#247FFF', "var(--ds-chart-blue-bold, #247FFF)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#1D9AAA', "var(--ds-chart-teal-bold, #1D9AAA)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#23A971', "var(--ds-chart-green-bold, #23A971)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#FFBE33', "var(--ds-chart-yellow-bold, #FFBE33)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#D97008', "var(--ds-chart-orange-bold, #D97008)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#FC552C', "var(--ds-chart-red-bold, #FC552C)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#DA62AC', "var(--ds-chart-magenta-bold, #DA62AC)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#8B77EE', "var(--ds-chart-purple-bold, #8B77EE)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#8590A2', "var(--ds-chart-gray-bold, #8590A2)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#0055CC', "var(--ds-chart-blue-bolder, #0055CC)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#1D7F8C', "var(--ds-chart-teal-bolder, #1D7F8C)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#177D52', "var(--ds-chart-green-bolder, #177D52)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#FF9D00', "var(--ds-chart-yellow-bolder, #FF9D00)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#B65C02', "var(--ds-chart-orange-bolder, #B65C02)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#D32D03', "var(--ds-chart-red-bolder, #D32D03)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#CD519D', "var(--ds-chart-magenta-bolder, #CD519D)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#5A43D0', "var(--ds-chart-purple-bolder, #5A43D0)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#758195', "var(--ds-chart-gray-bolder, #758195)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#003884', "var(--ds-chart-blue-boldest, #003884)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#206B74', "var(--ds-chart-teal-boldest, #206B74)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#055C3F', "var(--ds-chart-green-boldest, #055C3F)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#946104', "var(--ds-chart-yellow-boldest, #946104)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#974F0C', "var(--ds-chart-orange-boldest, #974F0C)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#A32000', "var(--ds-chart-red-boldest, #A32000)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#943D73', "var(--ds-chart-magenta-boldest, #943D73)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#44368B', "var(--ds-chart-purple-boldest, #44368B)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#44546F', "var(--ds-chart-gray-boldest, #44546F)"), _editorTableChartsPal);

package/dist/cjs/text.js

@@ -1,17 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.editorTextPalette = void 0;
 exports.hexToEditorTextPaletteColor = hexToEditorTextPaletteColor;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _editorTextPalette;
-
 // This import will be stripped on build
 // eslint-disable-next-line import/no-extraneous-dependencies
 
@@ -32,13 +28,13 @@ var _editorTextPalette;
  * - **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 hexToEditorTextPaletteColor(hexColor) {
   // Ts ignore used to allow use of conditional return type
   // (preferencing better type on consumption over safety in implementation)
   // @ts-ignore
   return editorTextPalette[hexColor.toUpperCase()];
 }
-
 // 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

package/dist/cjs/version.json

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

package/dist/es2019/background.js

@@ -24,101 +24,158 @@ export function hexToEditorBackgroundPaletteColor(hexColor) {
   // Ts ignore used to allow use of conditional return type
   // (preferencing better type on consumption over safety in implementation)
   // @ts-ignore
-  return editorBackgroundPalette[hexColor.toUpperCase()];
+  const tokenData = editorBackgroundPalette[hexColor.toUpperCase()];
+  return tokenData ? tokenData.token : undefined;
+}
+export function hexToEditorBackgroundPaletteColorTokenName(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;
 }
 // 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.
 export const editorBackgroundPalette = {
   // blue
-
   /** blue - light */
-  ['#DEEBFF']: "var(--ds-background-accent-blue-subtlest, #DEEBFF)",
+  ['#DEEBFF']: {
+    tokenName: 'color.background.accent.blue.subtlest',
+    token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)"
+  },
   // source for hex code was legacy token B50
-
   /** blue - medium */
-  ['#B3D4FF']: "var(--ds-background-accent-blue-subtler, #B3D4FF)",
+  ['#B3D4FF']: {
+    tokenName: 'color.background.accent.blue.subtler',
+    token: "var(--ds-background-accent-blue-subtler, #B3D4FF)"
+  },
   // source for hex code was legacy token B75
-
   /** blue - strong */
-  ['#4C9AFF']: "var(--ds-background-accent-blue-subtle, #4C9AFF)",
+  ['#4C9AFF']: {
+    tokenName: 'color.background.accent.blue.subtle',
+    token: "var(--ds-background-accent-blue-subtle, #4C9AFF)"
+  },
   // source for hex code was legacy token B100
-  // teal
 
+  // teal
   /** teal - light */
-  ['#E6FCFF']: "var(--ds-background-accent-teal-subtlest, #E6FCFF)",
-  // source for hex code was legacy token T50
+  ['#E6FCFF']: {
+    tokenName: 'color.background.accent.teal.subtlest',
+    token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)" // source for hex code was legacy token T50,
+  },
 
   /** teal - medium */
-  ['#B3F5FF']: "var(--ds-background-accent-teal-subtler, #B3F5FF)",
-  // source for hex code was legacy token T75
+  ['#B3F5FF']: {
+    tokenName: 'color.background.accent.teal.subtler',
+    token: "var(--ds-background-accent-teal-subtler, #B3F5FF)" // source for hex code was legacy token T75,
+  },
 
   /** teal - strong */
-  ['#79E2F2']: "var(--ds-background-accent-teal-subtle, #79E2F2)",
-  // source for hex code was legacy token T100
-  // green
+  ['#79E2F2']: {
+    tokenName: 'color.background.accent.teal.subtle',
+    token: "var(--ds-background-accent-teal-subtle, #79E2F2)" // source for hex code was legacy token T100,
+  },
 
+  // green
   /** green - light */
-  ['#E3FCEF']: "var(--ds-background-accent-green-subtlest, #E3FCEF)",
-  // source for hex code was legacy token G50
+  ['#E3FCEF']: {
+    tokenName: 'color.background.accent.green.subtlest',
+    token: "var(--ds-background-accent-green-subtlest, #E3FCEF)" // source for hex code was legacy token G50,
+  },
 
   /** green - medium */
-  ['#ABF5D1']: "var(--ds-background-accent-green-subtler, #ABF5D1)",
-  // source for hex code was legacy token G75
+  ['#ABF5D1']: {
+    tokenName: 'color.background.accent.green.subtler',
+    token: "var(--ds-background-accent-green-subtler, #ABF5D1)" // source for hex code was legacy token G75,
+  },
 
   /** green - strong */
-  ['#57D9A3']: "var(--ds-background-accent-green-subtle, #57D9A3)",
-  // source for hex code was legacy token G200
-  // yellowOrange
+  ['#57D9A3']: {
+    tokenName: 'color.background.accent.green.subtle',
+    token: "var(--ds-background-accent-green-subtle, #57D9A3)" // source for hex code was legacy token G200,
+  },
 
+  // yellowOrange
   /** yellowOrange - light */
-  ['#FFFAE6']: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)",
-  // source for hex code was legacy token Y50
+  ['#FFFAE6']: {
+    tokenName: 'color.background.accent.yellow.subtlest',
+    token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)" // source for hex code was legacy token Y50,
+  },
 
   /** yellowOrange - medium */
-  ['#FFF0B3']: "var(--ds-background-accent-yellow-subtler, #FFF0B3)",
-  // source for hex code was legacy token Y75
+  ['#FFF0B3']: {
+    tokenName: 'color.background.accent.yellow.subtler',
+    token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)" // source for hex code was legacy token Y75,
+  },
 
   /** yellowOrange - strong */
-  ['#FFC400']: "var(--ds-background-accent-orange-subtle, #FFC400)",
-  // source for hex code was legacy token Y200
-  // red
+  ['#FFC400']: {
+    tokenName: 'color.background.accent.orange.subtle',
+    token: "var(--ds-background-accent-orange-subtle, #FFC400)" // source for hex code was legacy token Y200,
+  },
 
+  // red
   /** red - light */
-  ['#FFEBE6']: "var(--ds-background-accent-red-subtlest, #FFEBE6)",
-  // source for hex code was legacy token R50
+  ['#FFEBE6']: {
+    tokenName: 'color.background.accent.red.subtlest',
+    token: "var(--ds-background-accent-red-subtlest, #FFEBE6)" // source for hex code was legacy token R50,
+  },
 
   /** red - medium */
-  ['#FFBDAD']: "var(--ds-background-accent-red-subtler, #FFBDAD)",
-  // source for hex code was legacy token R75
+  ['#FFBDAD']: {
+    tokenName: 'color.background.accent.red.subtler',
+    token: "var(--ds-background-accent-red-subtler, #FFBDAD)" // source for hex code was legacy token R75,
+  },
 
   /** red - strong */
-  ['#FF8F73']: "var(--ds-background-accent-red-subtle, #FF8F73)",
-  // source for hex code was legacy token R100
-  // purple
+  ['#FF8F73']: {
+    tokenName: 'color.background.accent.red.subtle',
+    token: "var(--ds-background-accent-red-subtle, #FF8F73)" // source for hex code was legacy token R100,
+  },
 
+  // purple
   /** purple - light */
-  ['#EAE6FF']: "var(--ds-background-accent-purple-subtlest, #EAE6FF)",
-  // source for hex code was legacy token P50
+  ['#EAE6FF']: {
+    tokenName: 'color.background.accent.purple.subtlest',
+    token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)" // source for hex code was legacy token P50,
+  },
 
   /** purple - medium */
-  ['#C0B6F2']: "var(--ds-background-accent-purple-subtler, #C0B6F2)",
-  // source for hex code was legacy token P75
+  ['#C0B6F2']: {
+    tokenName: 'color.background.accent.purple.subtler',
+    token: "var(--ds-background-accent-purple-subtler, #C0B6F2)" // source for hex code was legacy token P75,
+  },
 
   /** purple - strong */
-  ['#998DD9']: "var(--ds-background-accent-purple-subtle, #998DD9)",
-  // source for hex code was legacy token P100
-  // whiteGray
+  ['#998DD9']: {
+    tokenName: 'color.background.accent.purple.subtle',
+    token: "var(--ds-background-accent-purple-subtle, #998DD9)" // source for hex code was legacy token P100,
+  },
 
+  // whiteGray
   /** whiteGray - light */
-  ['#FFFFFF']: "var(--ds-surface, #FFFFFF)",
-  // source for hex code was legacy token N0
+  ['#FFFFFF']: {
+    tokenName: 'elevation.surface',
+    token: "var(--ds-surface, #FFFFFF)" // source for hex code was legacy token N0,
+  },
 
   /** whiteGray - medium */
-  ['#F4F5F7']: "var(--ds-background-accent-gray-subtlest, #F4F5F7)",
-  // source for hex code was legacy token N20
+  ['#F4F5F7']: {
+    tokenName: 'color.background.accent.gray.subtlest',
+    token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)" // source for hex code was legacy token N20,
+  },
 
   /** whiteGray - strong */
-  ['#B3BAC5']: "var(--ds-background-accent-gray-subtle, #B3BAC5)" // source for hex code was legacy token N60
-
-};
+  ['#B3BAC5']: {
+    tokenName: 'color.background.accent.gray.subtle',
+    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/border.js

@@ -0,0 +1,36 @@
+// This import will be stripped on build
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+/**
+ * This takes an adf hex color and returns a matching border palette color.
+ *
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+ *
+ * Example usage
+ * ```tsx
+ * const cssValue = hexToEditorBorderPaletteColor('#091E4224');
+ * //     ^? const cssValue: string
+ * <div style={{borderColor: cssValue}} />
+ * ```
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
+ * The exact output of this function is an implementation detail and should only be used when rendering
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ */
+
+export function hexToEditorBorderPaletteColor(hexColor) {
+  // Ts ignore used to allow use of conditional return type
+  // (preferencing better type on consumption over safety in implementation)
+  // @ts-ignore
+  return editorBorderPalette[hexColor.toUpperCase()];
+}
+export const editorBorderPalette = {
+  // gray
+  /** gray - subtle */
+  ['#091E4224']: "var(--ds-border, #091E4224)",
+  /** gray */
+  ['#758195']: "var(--ds-border-bold, #758195)",
+  /** gray - bold */
+  ['#172B4D']: "var(--ds-text, #172B4D)"
+};

package/dist/es2019/index.js

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

package/dist/es2019/table-charts.js

@@ -0,0 +1,80 @@
+// This import will be stripped on build
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+/**
+ * This takes an adf hex color and returns a matching chart palette
+ * color.
+ *
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+ *
+ * Example usage
+ * ```tsx
+ * const cssValue = hexToEditorTableChartsPaletteColor('#FFFFFF');
+ * //     ^? const cssValue: string
+ * <div style={{backgroundColor: cssValue}} />
+ * ```
+ *
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
+ * The exact output of this function is an implementation detail and should only be used when rendering
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ */
+export function hexToEditorTableChartsPaletteColor(hexColor) {
+  // Ts ignore used to allow use of conditional return type
+  // (preferencing better type on consumption over safety in implementation)
+  // @ts-ignore
+  return editorTableChartsPalette[hexColor.toUpperCase()];
+}
+// 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
+
+/**
+ * Tokenize hex codes into DST chart colors or
+ *  into DST background.accent colors.
+ *
+ * The hex codes do not match the DST tokens, they are
+ *  constants that are saved in the ADF that will be rendered
+ *  as the mapped DST token.
+ *
+ * https://product-fabric.atlassian.net/browse/ED-17042
+ */
+const editorTableChartsPalette = {
+  ['#7AB2FF']: "var(--ds-background-accent-blue-subtle, #7AB2FF)",
+  ['#60C6D2']: "var(--ds-background-accent-teal-subtle, #60C6D2)",
+  ['#6BE1B0']: "var(--ds-background-accent-green-subtle, #6BE1B0)",
+  ['#FFDB57']: "var(--ds-background-accent-yellow-subtle, #FFDB57)",
+  ['#FAA53D']: "var(--ds-background-accent-orange-subtle, #FAA53D)",
+  ['#FF8F73']: "var(--ds-background-accent-red-subtle, #FF8F73)",
+  ['#E774BB']: "var(--ds-background-accent-magenta-subtle, #E774BB)",
+  ['#B5A7FB']: "var(--ds-background-accent-purple-subtle, #B5A7FB)",
+  ['#8993A5']: "var(--ds-background-accent-gray-subtler, #8993A5)",
+  ['#247FFF']: "var(--ds-chart-blue-bold, #247FFF)",
+  ['#1D9AAA']: "var(--ds-chart-teal-bold, #1D9AAA)",
+  ['#23A971']: "var(--ds-chart-green-bold, #23A971)",
+  ['#FFBE33']: "var(--ds-chart-yellow-bold, #FFBE33)",
+  ['#D97008']: "var(--ds-chart-orange-bold, #D97008)",
+  ['#FC552C']: "var(--ds-chart-red-bold, #FC552C)",
+  ['#DA62AC']: "var(--ds-chart-magenta-bold, #DA62AC)",
+  ['#8B77EE']: "var(--ds-chart-purple-bold, #8B77EE)",
+  ['#8590A2']: "var(--ds-chart-gray-bold, #8590A2)",
+  ['#0055CC']: "var(--ds-chart-blue-bolder, #0055CC)",
+  ['#1D7F8C']: "var(--ds-chart-teal-bolder, #1D7F8C)",
+  ['#177D52']: "var(--ds-chart-green-bolder, #177D52)",
+  ['#FF9D00']: "var(--ds-chart-yellow-bolder, #FF9D00)",
+  ['#B65C02']: "var(--ds-chart-orange-bolder, #B65C02)",
+  ['#D32D03']: "var(--ds-chart-red-bolder, #D32D03)",
+  ['#CD519D']: "var(--ds-chart-magenta-bolder, #CD519D)",
+  ['#5A43D0']: "var(--ds-chart-purple-bolder, #5A43D0)",
+  ['#758195']: "var(--ds-chart-gray-bolder, #758195)",
+  ['#003884']: "var(--ds-chart-blue-boldest, #003884)",
+  ['#206B74']: "var(--ds-chart-teal-boldest, #206B74)",
+  ['#055C3F']: "var(--ds-chart-green-boldest, #055C3F)",
+  ['#946104']: "var(--ds-chart-yellow-boldest, #946104)",
+  ['#974F0C']: "var(--ds-chart-orange-boldest, #974F0C)",
+  ['#A32000']: "var(--ds-chart-red-boldest, #A32000)",
+  ['#943D73']: "var(--ds-chart-magenta-boldest, #943D73)",
+  ['#44368B']: "var(--ds-chart-purple-boldest, #44368B)",
+  ['#44546F']: "var(--ds-chart-gray-boldest, #44546F)"
+};