@atlaskit/editor-palette 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "hexToEditorBackgroundPaletteColorTokenName", {
     return _background.hexToEditorBackgroundPaletteColorTokenName;
   }
 });
+Object.defineProperty(exports, "hexToEditorBorderPaletteColor", {
+  enumerable: true,
+  get: function get() {
+    return _border.hexToEditorBorderPaletteColor;
+  }
+});
 Object.defineProperty(exports, "hexToEditorTableChartsPaletteColor", {
   enumerable: true,
   get: function get() {
@@ -28,5 +34,6 @@ Object.defineProperty(exports, "hexToEditorTextPaletteColor", {
   }
 });
 var _background = require("./background");
+var _border = require("./border");
 var _text = require("./text");
 var _tableCharts = require("./table-charts");

package/dist/cjs/version.json

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

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,3 +1,4 @@
 export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteColorTokenName } from './background';
+export { hexToEditorBorderPaletteColor } from './border';
 export { hexToEditorTextPaletteColor } from './text';
 export { hexToEditorTableChartsPaletteColor } from './table-charts';

package/dist/es2019/version.json

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

package/dist/esm/border.js

@@ -0,0 +1,30 @@
+import _defineProperty from "@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
+ */
+
+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 var editorBorderPalette = (_editorBorderPalette = {}, _defineProperty(_editorBorderPalette, '#091E4224', "var(--ds-border, #091E4224)"), _defineProperty(_editorBorderPalette, '#758195', "var(--ds-border-bold, #758195)"), _defineProperty(_editorBorderPalette, '#172B4D', "var(--ds-text, #172B4D)"), _editorBorderPalette);

package/dist/esm/index.js

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

package/dist/esm/version.json

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

package/dist/types/border.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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 declare function hexToEditorBorderPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBorderPaletteKey ? EditorBorderPalette[HexColor] : string | undefined;
+declare type EditorBorderPalette = typeof editorBorderPalette;
+export declare type EditorBorderPaletteKey = keyof EditorBorderPalette;
+export declare const editorBorderPalette: {
+    /** gray - subtle */
+    "#091E4224": "var(--ds-border, #091E4224)";
+    /** gray */
+    "#758195": "var(--ds-border-bold, #758195)";
+    /** gray - bold */
+    "#172B4D": "var(--ds-text, #172B4D)";
+};
+export {};

package/dist/types/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-palette",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "The editor palette",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",

package/report.api.md

@@ -112,6 +112,19 @@ type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
 // @public (undocumented)
 type EditorBackgroundPaletteTokenNames = typeof tokenNames[number];
 
+// @public (undocumented)
+type EditorBorderPalette = typeof editorBorderPalette;
+
+// @public (undocumented)
+const editorBorderPalette: {
+  '#091E4224': 'var(--ds-border, #091E4224)';
+  '#758195': 'var(--ds-border-bold, #758195)';
+  '#172B4D': 'var(--ds-text, #172B4D)';
+};
+
+// @public (undocumented)
+type EditorBorderPaletteKey = keyof EditorBorderPalette;
+
 // @public (undocumented)
 type EditorTableChartsPalette = typeof editorTableChartsPalette;
 
@@ -205,6 +218,13 @@ export function hexToEditorBackgroundPaletteColorTokenName<
   ? EditorBackgroundPalette[HexColor]['tokenName']
   : EditorBackgroundPaletteTokenNames | undefined;
 
+// @public
+export function hexToEditorBorderPaletteColor<HexColor extends string>(
+  hexColor: HexColor,
+): HexColor extends EditorBorderPaletteKey
+  ? EditorBorderPalette[HexColor]
+  : string | undefined;
+
 // @public
 export function hexToEditorTableChartsPaletteColor<HexColor extends string>(
   hexColor: HexColor,