Editor palette
When adding support for themed content to tooling which interacts with adf content -- the decision was made to treat existing hex codes as a unique id, and link them to design tokens which have theme specific versions.
By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
Usage
Detailed docs and example usage can be found here.
APIs
Installation
yarn add @atlaskit/editor-palette
hexToBackgroundPaletteColor
This takes an adf hex color and returns a matching background palette color.
import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
const cssValue = hexToBackgroundPaletteColor('#FFFFFF');
// ^? const cssValue: 'var(--ds-surface, #FFFFFF)'
<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
hexToTextPaletteColor
This takes an adf hex color and returns a matching text palette color.
import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
const cssValue = hexToEditorTextPaletteColor('#0747A6');
// ^? const cssValue: 'var(--ds-text-accent-blue, #0747A6)'
<span style={{textColor: 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
hexToEditorBorderPaletteColor
This takes an adf hex color and returns a matching border palette color.
import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
const cssValue = hexToEditorBorderPaletteColor('#091E4224');
// ^? const cssValue: 'var(--ds-border, #091E4224)'
<span 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