@atlaskit/editor-palette 0.1.0 → 1.0.0

package/CHANGELOG.md

@@ -1 +1,7 @@
 # @atlaskit/editor-palette
+
+## 1.0.0
+
+### Major Changes
+
+- [`0ea58bc9901`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0ea58bc9901) - Remove undocumented palette object entrypoints

package/dist/cjs/index.js

@@ -3,18 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "editorBackgroundPalette", {
-  enumerable: true,
-  get: function get() {
-    return _background.editorBackgroundPalette;
-  }
-});
-Object.defineProperty(exports, "editorTextPalette", {
-  enumerable: true,
-  get: function get() {
-    return _text.editorTextPalette;
-  }
-});
 Object.defineProperty(exports, "hexToEditorBackgroundPaletteColor", {
   enumerable: true,
   get: function get() {

package/dist/cjs/version.json

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

package/dist/es2019/index.js

@@ -1,2 +1,2 @@
-export { hexToEditorBackgroundPaletteColor, editorBackgroundPalette } from './background';
-export { hexToEditorTextPaletteColor, editorTextPalette } from './text';
+export { hexToEditorBackgroundPaletteColor } from './background';
+export { hexToEditorTextPaletteColor } from './text';

package/dist/es2019/version.json

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

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { hexToEditorBackgroundPaletteColor, editorBackgroundPalette } from './background';
-export { hexToEditorTextPaletteColor, editorTextPalette } from './text';
+export { hexToEditorBackgroundPaletteColor } from './background';
+export { hexToEditorTextPaletteColor } from './text';

package/dist/esm/version.json

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

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export { hexToEditorBackgroundPaletteColor, editorBackgroundPalette, } from './background';
-export { hexToEditorTextPaletteColor, editorTextPalette } from './text';
+export { hexToEditorBackgroundPaletteColor } from './background';
+export { hexToEditorTextPaletteColor } from './text';

package/docs/0-intro.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+import { AtlassianInternalWarning, code, md } from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
+
+export default md`
+${(<AtlassianInternalWarning />)}
+
+# Editor Palettes:
+
+In Editor, colors are stored in ADF for certain user-generated content, such as:
+- **Text colors**: \`mark.textColor\`
+- **Custom table backgrounds**: \`tableCell.attrs.background\`, \`tableHeader.attrs.background\`
+- **Custom panel backgrounds**: \`panel.attrs.panelColor\`
+
+Although stored in hexadecimal format, these colors need to be displayed differently depending on the current product theme, such as light and dark mode.
+
+To support this, this package provides utilities to map hexadecimal colors stored in ADF, to an appropriate design token from the Atlassian Design System.
+
+Theming is only supported on web.
+
+Documentation for design tokens can be found in the [@atlaskit/token package docs](https://atlassian.design/components/tokens/all-tokens)
+and [@atlaskit/token package examples](https://atlassian.design/components/tokens/examples) on the Atlassian Design System website.
+
+For ecosystem apps, learn more about tokens and theming in the announcement post in our [developer forums](https://community.developer.atlassian.com/t/start-using-design-tokens-in-your-apps-and-try-dark-theme-in-jira-cloud/64147).
+Currently, the top-level theme configuration is only documented for internal use.
+
+## Note on usage
+
+**This package is only intended for displaying ADF documents.**
+
+If you are looking for resources to create a new color palette experience for your product or app,
+you can learn more about the available accent color tokens in the [Design Token guidelines](https://atlassian.design/foundations/color-new/#color-roles),
+or reach out to the Design System Team via the [Atlassian Developer Community forums](https://community.developer.atlassian.com/tag/editor).
+
+## API documentation
+
+${(
+  <div style={{ marginTop: '0.5rem' }}>
+    <SectionMessage
+      title="Design token names and values are an implementation detail."
+      appearance="warning"
+    >
+      <p>
+        The names of tokens can change over time, and the values of tokens will
+        differ between themes.
+      </p>
+      <p>
+        The exact output of this function is an implementation detail only and
+        should only be used when rendering content to the user, on a client with
+        a matching major version of <code>@atlaskit/tokens</code>.
+      </p>
+      <ul>
+        <li>
+          <strong>DO NOT</strong>: store the output of these functions in any
+          user-generated content or back-end.
+        </li>
+        <li>
+          <strong>DO</strong>: store the ADF hex color, and use these utilities
+          at render time to display the themed version of the color
+        </li>
+      </ul>
+    </SectionMessage>
+  </div>
+)}
+
+### \`hexToTextPaletteColor\`
+
+This takes an adf hex color and returns a matching text palette color.
+
+By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+
+#### Example usage
+
+${code`
+  const cssValue = hexToTextPaletteColor('#FFFFFF');
+  //     ^? const cssValue: string
+  <div style={{color: cssValue}} />
+`}
+
+### \`hexToBackgroundPaletteColor\`
+
+This takes an adf hex color and returns a matching background palette color
+
+By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+
+#### Example usage
+
+${code`
+  const cssValue = hexToBackgroundPaletteColor('#FFFFFF');
+  //     ^? const cssValue: string
+  <div style={{backgroundColor: cssValue}} />
+`}
+
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-palette",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "The editor palette",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -29,12 +29,14 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
+    "@atlaskit/section-message": "^6.3.7",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tokens": "^0.11.1",
+    "@atlaskit/tokens": "^0.13.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^12.1.5",
+    "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0"

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/editor-palette"
 
@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -18,7 +19,7 @@
 type EditorBackgroundPalette = typeof editorBackgroundPalette;
 
 // @public (undocumented)
-export const editorBackgroundPalette: {
+const editorBackgroundPalette: {
   '#DEEBFF': 'var(--ds-background-accent-blue-subtlest, #DEEBFF)';
   '#B3D4FF': 'var(--ds-background-accent-blue-subtler, #B3D4FF)';
   '#4C9AFF': 'var(--ds-background-accent-blue-subtle, #4C9AFF)';
@@ -49,7 +50,7 @@ type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
 type EditorTextPalette = typeof editorTextPalette;
 
 // @public (undocumented)
-export const editorTextPalette: {
+const editorTextPalette: {
   '#B3D4FF': 'var(--ds-background-accent-blue-subtler, #B3D4FF)';
   '#4C9AFF': 'var(--ds-icon-accent-blue, #4C9AFF)';
   '#0747A6': 'var(--ds-text-accent-blue, #0747A6)';
@@ -94,3 +95,13 @@ export function hexToEditorTextPaletteColor<HexColor extends string>(
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{}
+```
+
+<!--SECTION END: Peer Dependencies-->