/** * 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 * * ``` * 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: HexColor): HexColor extends EditorTextPaletteKey ? EditorTextPalette[HexColor] : string | undefined; type EditorTextPalette = typeof editorTextPalette; export type EditorTextPaletteKey = keyof EditorTextPalette; export declare const editorTextPalette: { /** blue - light */ "#B3D4FF": "var(--ds-background-accent-blue-subtler, #B3D4FF)"; /** blue - medium */ "#4C9AFF": "var(--ds-icon-accent-blue, #4C9AFF)"; /** blue - strong */ "#0747A6": "var(--ds-text-accent-blue, #0747A6)"; /** teal - light */ "#B3F5FF": "var(--ds-background-accent-teal-subtler, #B3F5FF)"; /** teal - medium */ "#00B8D9": "var(--ds-icon-accent-teal, #00B8D9)"; /** teal - strong */ "#008DA6": "var(--ds-text-accent-teal, #008DA6)"; /** green - light */ "#ABF5D1": "var(--ds-background-accent-green-subtler, #ABF5D1)"; /** green - medium */ "#36B37E": "var(--ds-icon-accent-green, #36B37E)"; /** green - strong */ "#006644": "var(--ds-text-accent-green, #006644)"; /** yellowOrange - light */ "#FFF0B3": "var(--ds-background-accent-yellow-subtler, #FFF0B3)"; /** yellowOrange - medium */ "#FFC400": "var(--ds-background-accent-orange-subtle, #FFC400)"; /** yellowOrange - strong */ "#FF991F": "var(--ds-icon-accent-orange, #FF991F)"; /** red - light */ "#FFBDAD": "var(--ds-background-accent-red-subtler, #FFBDAD)"; /** red - medium */ "#FF5630": "var(--ds-icon-accent-red, #FF5630)"; /** red - strong */ "#BF2600": "var(--ds-text-accent-red, #BF2600)"; /** purple - light */ "#EAE6FF": "var(--ds-background-accent-purple-subtler, #EAE6FF)"; /** purple - medium */ "#6554C0": "var(--ds-icon-accent-purple, #6554C0)"; /** purple - strong */ "#403294": "var(--ds-text-accent-purple, #403294)"; /** whiteGray - light */ "#FFFFFF": "var(--ds-text-inverse, #FFFFFF)"; /** whiteGray - medium */ "#97A0AF": "var(--ds-icon-accent-gray, #97A0AF)"; /** whiteGray - strong */ "#172B4D": "var(--ds-text, #172B4D)"; }; export {};