Editor palette

Typescript ❤️

The editor palette

Install

yarn add @atlaskit/editor-palette

npm

@atlaskit/editor-palette

Source

Bitbucket

Bundle

unpkg.com

Changelog

Latest

2.0.0

Major Changes

#117363 10a0f7f6c2027 - This package's peerDependencies have been adjusted for react and/or react-dom to reflect the status of only supporting React 18 going forward. No explicit breaking change to React support has been made in this release, but this is to signify going forward, breaking changes for React 16 or React 17 may come via non-major semver releases.

Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026

Patch Changes

Updated dependencies

Note: This component is designed for internal Atlassian development.

External contributors will be able to use this component but will not be able to submit issues.

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 and @atlaskit/token package examples on the Atlassian Design System website.

For ecosystem apps, learn more about tokens and theming in the announcement post in our developer forums. 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, or reach out to the Design System Team via the Atlassian Developer Community forums.

API documentation

Design token names and values are an implementation detail.

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 only 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

`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

  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

  const cssValue = hexToBackgroundPaletteColor('#FFFFFF');
  //     ^? const cssValue: string
  <div style={{backgroundColor: cssValue}} />

`hexToEditorBorderPaletteColor`

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

  const cssValue = hexToEditorBorderPaletteColor('#091E4224');
  //     ^? const cssValue: string
  <div style={{border-color: cssValue}} />

`hexToEditorTextBackgroundPaletteColor`

This takes an adf hex color and returns a matching text background palette color.

By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.

Example usage

  const cssValue = hexToEditorTextBackgroundPaletteColor('#D3F1A7');
  //     ^? const cssValue: string
  <div style={{backgroundColor: cssValue}} />