编辑器调色板

当将主题内容的支持添加到工具中时 adf 内容 -- -- 决定将现有的六进制编码视为一种 ,并将它们链接到有特定主题的设计符号 各个版本.

通过提供设计符号,这使得ADF内容能够在暗模式等新主题中提供.

使用量

可找到详细的文件和示例使用 这里。 。 。 .

APIs 密码

安装

yarn add @atlaskit/editor-palette

六进制背景画

这需要 adf 十六进制颜色, 并返回匹配的背景调色板颜色 .

import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';

const cssValue = hexToBackgroundPaletteColor('#FFFFFF');
//     ^? const cssValue: 'var(--ds-surface, #FFFFFF)'
<div style={{backgroundColor: cssValue}} />

令牌的名称可以随时间而变化,而令牌的值会因主题而异. 此功能的确切输出是执行细节,只应在提供时使用 内容给用户,在客户端上,并带有匹配的主要版本 @atlaskit/tokens。 。 。 .

• 别:将这些函数的输出存储于任何用户生成的内容或后端.
• 开始: 存储 ADF 十六进制颜色, 并在渲染时使用这些工具来显示该颜色的主题版本

六进制图文集

这需要一个相匹配的正六色并返回匹配的文本调色板颜色.

import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';

const cssValue = hexToEditorTextPaletteColor('#0747A6');
//     ^? const cssValue: 'var(--ds-text-accent-blue, #0747A6)'
<span style={{textColor: cssValue}} />

令牌的名称可以随时间而变化,而令牌的值会因主题而异. 此功能的确切输出是执行细节,只应在提供时使用 内容给用户,在客户端上,并带有匹配的主要版本 @atlaskit/tokens。 。 。 .

• 别:将这些函数的输出存储于任何用户生成的内容或后端.
• 开始: 存储 ADF 十六进制颜色, 并在渲染时使用这些工具来显示该颜色的主题版本

十六进制编辑

这需要加法六分色并返回匹配的边框调色板颜色.

import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';

const cssValue = hexToEditorBorderPaletteColor('#091E4224');
//     ^? const cssValue: 'var(--ds-border, #091E4224)'
<span style={{borderColor: cssValue}} />

令牌的名称可以随时间而变化,而令牌的值会因主题而异. 此功能的确切输出是执行细节,只应在提供时使用 内容给用户,在客户端上,并带有匹配的主要版本 @atlaskit/tokens。 。 。 .

• 别:将这些函数的输出存储于任何用户生成的内容或后端.
• 开始: 存储 ADF 十六进制颜色, 并在渲染时使用这些工具来显示该颜色的主题版本