@atlaskit/adf-schema
Version:
Shared package that contains the ADF-schema (json) and ProseMirror node/mark specs
256 lines (255 loc) • 8.94 kB
TypeScript
/**
* 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;
type EditorBorderPalette = typeof editorBorderPalette;
export type EditorBorderPaletteKey = keyof EditorBorderPalette;
export declare const editorBorderPalette: {
/** gray - subtle */
'#091E4224': string;
/** gray */
'#758195': string;
/** gray - bold */
'#172B4D': string;
};
/**
* 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
* ```tsx
* const cssValue = hexToTextPaletteColor('#0747A6');
* // ^? const cssValue: string
* <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
*/
export declare function hexToEditorTextPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTextPaletteKey ? EditorTextPalette[HexColor] : string | undefined;
type EditorTextPalette = typeof editorTextPalette;
export type EditorTextPaletteKey = keyof EditorTextPalette;
export declare const editorTextPalette: {
/** blue - light */
'#B3D4FF': string;
/** blue - medium */
'#4C9AFF': string;
/** blue - strong */
'#0747A6': string;
/** teal - light */
'#B3F5FF': string;
/** teal - medium */
'#00B8D9': string;
/** teal - strong */
'#008DA6': string;
/** green - light */
'#ABF5D1': string;
/** green - medium */
'#36B37E': string;
/** green - strong */
'#006644': string;
/** yellowOrange - light */
'#FFF0B3': string;
/** yellowOrange - medium */
'#FFC400': string;
/** yellowOrange - strong */
'#FF991F': string;
/** red - light */
'#FFBDAD': string;
/** red - medium */
'#FF5630': string;
/** red - strong */
'#BF2600': string;
/** purple - light */
'#EAE6FF': string;
/** purple - medium */
'#6554C0': string;
/** purple - strong */
'#403294': string;
/** whiteGray - light */
'#FFFFFF': string;
/** whiteGray - medium */
'#97A0AF': string;
/** whiteGray - strong */
'#172B4D': string;
};
/**
* 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
* ```tsx
* const cssValue = hexToEditorTextBackgroundPaletteColor('#0747A6');
* // ^? const cssValue: string
* <span 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
*/
export declare function hexToEditorTextBackgroundPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends TextBackgroundColorPaletteKey ? TextBackgroundColorPalette[HexColor] : string | undefined;
export declare const textBackgroundColorPalette: {
/** Gray - light */
'#DCDFE4': string;
/** Teal - light */
'#C6EDFB': string;
/** Lime - light */
'#D3F1A7': string;
/** Orange - light */
'#FEDEC8': string;
/** Magenta - light */
'#FDD0EC': string;
/** Purple - light */
'#DFD8FD': string;
};
type TextBackgroundColorPalette = typeof textBackgroundColorPalette;
export type TextBackgroundColorPaletteKey = keyof TextBackgroundColorPalette;
/**
* Takes an ADF hex color and returns the rendered hex code for the associated background palette design token using getTokenValue.
* If the provided color does not exist in the Editor color palette, this function returns undefined.
*
* This should only be used when rendering content where CSS variables are not feasible, such as a non-CSS environment
* or to enable cross-app copy/paste.
*
* WARNING: If the rendered theme changes (such as from light -> dark mode) the value returned here will no longer match
* the surrounding UI and will need to be re-fetched.
* In addition, the values of tokens will differ between themes and the value for a given theme can and will change.
* - **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 hexToEditorBackgroundPaletteRawValue<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? string : undefined;
type EditorBackgroundPalette = typeof editorBackgroundPalette;
export type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
/**
* Values are asserted to improve generated type declarations
* Using object structure as getValue() function needed for table values, and other
* properties may be needed in the future.
*/
export declare const editorBackgroundPalette: {
/** blue - light */
'#DEEBFF': {
getValue: () => string;
token: string;
};
/** blue - medium */
'#B3D4FF': {
getValue: () => string;
token: string;
};
/** blue - strong */
'#4C9AFF': {
getValue: () => string;
token: string;
};
/** teal - light */
'#E6FCFF': {
getValue: () => string;
token: string;
};
/** teal - medium */
'#B3F5FF': {
getValue: () => string;
token: string;
};
/** teal - strong */
'#79E2F2': {
getValue: () => string;
token: string;
};
/** green - light */
'#E3FCEF': {
getValue: () => string;
token: string;
};
/** green - medium */
'#ABF5D1': {
getValue: () => string;
token: string;
};
/** green - strong */
'#57D9A3': {
getValue: () => string;
token: string;
};
/** yellowOrange - light */
'#FFFAE6': {
getValue: () => string;
token: string;
};
/** yellowOrange - medium */
'#FFF0B3': {
getValue: () => string;
token: string;
};
/** yellowOrange - strong */
'#FFC400': {
getValue: () => string;
token: string;
};
/** red - light */
'#FFEBE6': {
getValue: () => string;
token: string;
};
/** red - medium */
'#FFBDAD': {
getValue: () => string;
token: string;
};
/** red - strong */
'#FF8F73': {
getValue: () => string;
token: string;
};
/** purple - light */
'#EAE6FF': {
getValue: () => string;
token: string;
};
/** purple - medium */
'#C0B6F2': {
getValue: () => string;
token: string;
};
/** purple - strong */
'#998DD9': {
getValue: () => string;
token: string;
};
/** whiteGray - light */
'#FFFFFF': {
getValue: () => string;
token: string;
};
/** whiteGray - medium */
'#F4F5F7': {
getValue: () => string;
token: string;
};
/** whiteGray - strong */
'#B3BAC5': {
getValue: () => string;
token: string;
};
};
export {};