@atlaskit/theme
Version:
Theme contains solutions for global theming, colors, and other useful mixins.
1,021 lines (806 loc) • 19.6 kB
Markdown
<!-- API Report Version: 2.3 -->
## API Report File for "@atlaskit/theme"
> Do not edit this file. This report is auto-generated using
> [API Extractor](https://api-extractor.com/).
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
### Table of contents
- [Main Entry Types](#main-entry-types)
- [Peer Dependencies](#peer-dependencies)
### Main Entry Types
<!--SECTION START: Main Entry Types-->
```ts
/// <reference types="react" />
import { ComponentType } from 'react';
import { FC } from 'react';
import { ReactNode } from 'react';
// @public (undocumented)
interface AKThemeProviderProps {
// (undocumented)
background?: ThemedValue<string>;
// (undocumented)
children?: ReactNode;
// (undocumented)
mode?: ThemeModes;
}
// @public @deprecated (undocumented)
export const assistive: () => {
border: string;
clip: string;
height: string;
overflow: 'hidden';
padding: string;
position: 'absolute';
width: string;
whiteSpace: 'nowrap';
};
// @public (undocumented)
export interface AtlaskitThemeProps {
// (undocumented)
[index: string]: any;
// (undocumented)
theme: {
__ATLASKIT_THEME__: Theme;
};
}
// @public @deprecated (undocumented)
export const AtlaskitThemeProvider: FC<AKThemeProviderProps>;
// @public (undocumented)
const B100 = '#4C9AFF';
// @public (undocumented)
const B200 = '#2684FF';
// @public (undocumented)
const B300 = '#0065FF';
// @public (undocumented)
const B400 = '#0052CC';
// @public (undocumented)
const B50 = '#DEEBFF';
// @public (undocumented)
const B500 = '#0747A6';
// @public (undocumented)
const B75 = '#B3D4FF';
// @public @deprecated (undocumented)
const background: ThemedValue<'var(--ds-surface)'>;
// @public @deprecated (undocumented)
const backgroundActive: ThemedValue<'var(--ds-background-selected)'>;
// @public @deprecated (undocumented)
const backgroundHover: ThemedValue<'var(--ds-background-neutral-hovered)'>;
// @public @deprecated (undocumented)
const backgroundOnLayer: ThemedValue<'var(--ds-surface-overlay)'>;
// @public (undocumented)
const blue: ThemedValue<string>;
// @public @deprecated (undocumented)
export const borderRadius: () => number;
// @public (undocumented)
export const CHANNEL = '__ATLASKIT_THEME__';
// @public (undocumented)
const codeBlock: ThemedValue<string>;
// @public (undocumented)
export const codeFontFamily: () => string;
// @public (undocumented)
const colorPalette: (palette?: colorPaletteType) => {
background: string;
text: string;
}[];
// @public (undocumented)
const colorPalette16: {
background: string;
text: string;
}[];
// @public (undocumented)
const colorPalette24: {
background: string;
text: string;
}[];
// @public (undocumented)
const colorPalette8: {
background: string;
text: string;
}[];
declare namespace colorPalettes {
export { colorPalette8, colorPalette16, colorPalette24, colorPalette };
}
export { colorPalettes };
// @public (undocumented)
export type colorPaletteType = '16' | '24' | '8';
declare namespace colors {
export {
R50,
R75,
R100,
R200,
R300,
R400,
R500,
Y50,
Y75,
Y100,
Y200,
Y300,
Y400,
Y500,
G50,
G75,
G100,
G200,
G300,
G400,
G500,
B50,
B75,
B100,
B200,
B300,
B400,
B500,
P50,
P75,
P100,
P200,
P300,
P400,
P500,
T50,
T75,
T100,
T200,
T300,
T400,
T500,
N0,
N10,
N20,
N30,
N40,
N50,
N60,
N70,
N80,
N90,
N100,
N200,
N300,
N400,
N500,
N600,
N700,
N800,
N900,
N10A,
N20A,
N30A,
N40A,
N50A,
N60A,
N70A,
N80A,
N90A,
N100A,
N200A,
N300A,
N400A,
N500A,
N600A,
N700A,
N800A,
DN900,
DN800,
DN700,
DN600,
DN500,
DN400,
DN300,
DN200,
DN100,
DN90,
DN80,
DN70,
DN60,
DN50,
DN40,
DN30,
DN20,
DN10,
DN0,
DN800A,
DN700A,
DN600A,
DN500A,
DN400A,
DN300A,
DN200A,
DN100A,
DN90A,
DN80A,
DN70A,
DN60A,
DN50A,
DN40A,
DN30A,
DN20A,
DN10A,
background,
backgroundActive,
backgroundHover,
backgroundOnLayer,
text,
textHover,
textActive,
subtleText,
placeholderText,
heading,
subtleHeading,
codeBlock,
link,
linkHover,
linkActive,
linkOutline,
primary,
blue,
teal,
purple,
red,
yellow,
green,
skeleton,
};
}
export { colors };
// @public
export function createTheme<ThemeTokens, ThemeProps>(
defaultGetTokens: GetThemeTokensFn<ThemeTokens, ThemeProps>,
): {
Consumer: ComponentType<
ThemeProps extends void
? ThemeConsumerFn<ThemeTokens>
: ThemeConsumerFn<ThemeTokens> & ThemeProps
>;
Provider: ComponentType<{
children?: ReactNode;
value?: ThemeProp<ThemeTokens, ThemeProps>;
}>;
useTheme: GetThemeTokensFn<ThemeTokens, ThemeProps>;
};
// @public (undocumented)
export interface CustomThemeProps {
// (undocumented)
[index: string]: any;
// (undocumented)
theme: Theme;
}
// @public (undocumented)
const _default: {
Provider: ComponentType<{
children?: ReactNode;
value?: ThemeProp<GlobalThemeTokens, void> | undefined;
}>;
Consumer: ComponentType<{
children: (tokens: GlobalThemeTokens) => ReactNode;
}>;
};
export default _default;
// @public (undocumented)
export const DEFAULT_THEME_MODE = 'light';
// @public (undocumented)
export type DefaultValue = number | string;
// @public (undocumented)
const DN0 = '#0D1424';
// @public (undocumented)
const DN10 = '#0E1624';
// @public (undocumented)
const DN100 = '#67758F';
// @public (undocumented)
const DN100A = 'rgba(13, 20, 36, 0.53)';
// @public (undocumented)
const DN10A = 'rgba(13, 20, 36, 0.97)';
// @public (undocumented)
const DN20 = '#121A29';
// @public (undocumented)
const DN200 = '#7988A3';
// @public (undocumented)
const DN200A = 'rgba(13, 20, 36, 0.47)';
// @public (undocumented)
const DN20A = 'rgba(13, 20, 36, 0.95)';
// @public (undocumented)
const DN30 = '#1B2638';
// @public (undocumented)
const DN300 = '#8C9CB8';
// @public (undocumented)
const DN300A = 'rgba(13, 20, 36, 0.40)';
// @public (undocumented)
const DN30A = 'rgba(13, 20, 36, 0.92)';
// @public (undocumented)
const DN40 = '#202B3D';
// @public (undocumented)
const DN400 = '#9FB0CC';
// @public (undocumented)
const DN400A = 'rgba(13, 20, 36, 0.36)';
// @public (undocumented)
const DN40A = 'rgba(13, 20, 36, 0.89)';
// @public (undocumented)
const DN50 = '#283447';
// @public (undocumented)
const DN500 = '#ABBBD6';
// @public (undocumented)
const DN500A = 'rgba(13, 20, 36, 0.29)';
// @public (undocumented)
const DN50A = 'rgba(13, 20, 36, 0.85)';
// @public (undocumented)
const DN60 = '#313D52';
// @public (undocumented)
const DN600 = '#B8C7E0';
// @public (undocumented)
const DN600A = 'rgba(13, 20, 36, 0.18)';
// @public (undocumented)
const DN60A = 'rgba(13, 20, 36, 0.81)';
// @public (undocumented)
const DN70 = '#3B475C';
// @public (undocumented)
const DN700 = '#CED9EB';
// @public (undocumented)
const DN700A = 'rgba(13, 20, 36, 0.14)';
// @public (undocumented)
const DN70A = 'rgba(13, 20, 36, 0.78)';
// @public (undocumented)
const DN80 = '#455166';
// @public (undocumented)
const DN800 = '#DCE5F5';
// @public (undocumented)
const DN800A = 'rgba(13, 20, 36, 0.06)';
// @public (undocumented)
const DN80A = 'rgba(13, 20, 36, 0.73)';
// @public (undocumented)
const DN90 = '#56637A';
// @public (undocumented)
const DN900 = '#E6EDFA';
// @public (undocumented)
const DN90A = 'rgba(13, 20, 36, 0.63)';
// @public @deprecated
const e100: ThemedValue<string>;
// @public @deprecated
const e200: ThemedValue<string>;
// @public @deprecated
const e300: ThemedValue<string>;
// @public @deprecated
const e400: ThemedValue<string>;
// @public @deprecated
const e500: ThemedValue<string>;
// @public (undocumented)
export type Elevation = 'e100' | 'e200' | 'e300' | 'e400' | 'e500';
declare namespace elevation {
export { e100, e200, e300, e400, e500 };
}
export { elevation };
// @public @deprecated (undocumented)
export const focusRing: (color?: string, outlineWidth?: number) => string;
// @public (undocumented)
export const fontFamily: () => string;
// @public (undocumented)
export const fontSize: () => number;
// @public (undocumented)
export const fontSizeSmall: () => number;
// @public (undocumented)
const G100 = '#79F2C0';
// @public (undocumented)
const G200 = '#57D9A3';
// @public (undocumented)
const G300 = '#36B37E';
// @public (undocumented)
const G400 = '#00875A';
// @public (undocumented)
const G50 = '#E3FCEF';
// @public (undocumented)
const G500 = '#006644';
// @public (undocumented)
const G75 = '#ABF5D1';
// @public (undocumented)
export function getTheme(props?: ThemeProps): Theme;
// @public (undocumented)
type GetThemeTokensFn<ThemeTokens, ThemeProps> = (props: ThemeProps) => ThemeTokens;
// @public (undocumented)
export interface GlobalThemeTokens extends Theme {}
// @public (undocumented)
const green: ThemedValue<string>;
// @public @deprecated (undocumented)
export const gridSize: () => number;
// @public @deprecated (undocumented)
const h100: (props?: ThemeProps) => {
color: 'var(--ds-text-subtlest)';
fontWeight: 'var(--ds-font-weight-bold)';
marginTop: string;
fontSize: string;
fontStyle: string;
lineHeight: number;
};
// @public @deprecated (undocumented)
const h200: (props?: ThemeProps) => {
color: 'var(--ds-text-subtlest)';
fontWeight: 'var(--ds-font-weight-semibold)';
marginTop: string;
fontSize: string;
fontStyle: string;
lineHeight: number;
};
// @public @deprecated (undocumented)
const h300: (props?: ThemeProps) => {
color: 'var(--ds-text)';
fontWeight: 'var(--ds-font-weight-semibold)';
marginTop: string;
textTransform: 'uppercase';
fontSize: string;
fontStyle: string;
lineHeight: number;
};
// @public @deprecated (undocumented)
const h400: (props?: ThemeProps) => {
color: 'var(--ds-text)';
fontWeight: 'var(--ds-font-weight-semibold)';
letterSpacing: string;
marginTop: string;
fontSize: string;
fontStyle: string;
lineHeight: number;
};
// @public @deprecated (undocumented)
const h500: (props?: ThemeProps) => {
color: 'var(--ds-text)';
fontWeight: 'var(--ds-font-weight-semibold)';
letterSpacing: string;
marginTop: string;
fontSize: string;
fontStyle: string;
lineHeight: number;
};
// @public @deprecated (undocumented)
const h600: (props?: ThemeProps) => {
color: 'var(--ds-text)';
fontWeight: 'var(--ds-font-weight-medium)';
letterSpacing: string;
marginTop: string;
fontSize: string;
fontStyle: string;
lineHeight: number;
};
// @public @deprecated (undocumented)
const h700: (props?: ThemeProps) => {
color: 'var(--ds-text)';
fontWeight: 'var(--ds-font-weight-medium)';
letterSpacing: string;
marginTop: string;
fontSize: string;
fontStyle: string;
lineHeight: number;
};
// @public @deprecated (undocumented)
const h800: (props?: ThemeProps) => {
color: 'var(--ds-text)';
fontWeight: 'var(--ds-font-weight-semibold)';
letterSpacing: string;
marginTop: string;
fontSize: string;
fontStyle: string;
lineHeight: number;
};
// @public @deprecated (undocumented)
const h900: (props?: ThemeProps) => {
color: 'var(--ds-text)';
fontWeight: 'var(--ds-font-weight-medium)';
letterSpacing: string;
marginTop: string;
fontSize: string;
fontStyle: string;
lineHeight: number;
};
// @public @deprecated (undocumented)
const heading: ThemedValue<'var(--ds-text)'>;
// @public (undocumented)
const headingSizes: {
h900: {
size: number;
lineHeight: number;
};
h800: {
size: number;
lineHeight: number;
};
h700: {
size: number;
lineHeight: number;
};
h600: {
size: number;
lineHeight: number;
};
h500: {
size: number;
lineHeight: number;
};
h400: {
size: number;
lineHeight: number;
};
h300: {
size: number;
lineHeight: number;
};
h200: {
size: number;
lineHeight: number;
};
h100: {
size: number;
lineHeight: number;
};
};
// @public (undocumented)
interface Layers {
// (undocumented)
blanket: 500;
// (undocumented)
card: 100;
// (undocumented)
dialog: 300;
// (undocumented)
flag: 600;
// (undocumented)
layer: 400;
// (undocumented)
modal: 510;
// (undocumented)
navigation: 200;
// (undocumented)
spotlight: 700;
// (undocumented)
tooltip: 9999;
}
// @public (undocumented)
export const layers: {
[P in keyof Layers]: () => Layers[P];
};
// @public @deprecated (undocumented)
const link: ThemedValue<'var(--ds-link)'>;
// @public @deprecated (undocumented)
const linkActive: ThemedValue<'var(--ds-link-pressed)'>;
// @public @deprecated (undocumented)
const linkHover: ThemedValue<'var(--ds-link-pressed)'>;
// @public @deprecated (undocumented)
const linkOutline: ThemedValue<'var(--ds-border-focused)'>;
// @public (undocumented)
type Modes<V> = {
[key in ThemeModes]?: V;
};
// @public (undocumented)
const N0 = '#FFFFFF';
// @public (undocumented)
const N10 = '#FAFBFC';
// @public (undocumented)
const N100 = '#7A869A';
// @public (undocumented)
const N100A = 'rgba(9, 30, 66, 0.54)';
// @public (undocumented)
const N10A = 'rgba(9, 30, 66, 0.02)';
// @public (undocumented)
const N20 = '#F4F5F7';
// @public (undocumented)
const N200 = '#6B778C';
// @public (undocumented)
const N200A = 'rgba(9, 30, 66, 0.60)';
// @public (undocumented)
const N20A = 'rgba(9, 30, 66, 0.04)';
// @public (undocumented)
const N30 = '#EBECF0';
// @public (undocumented)
const N300 = '#5E6C84';
// @public (undocumented)
const N300A = 'rgba(9, 30, 66, 0.66)';
// @public (undocumented)
const N30A = 'rgba(9, 30, 66, 0.08)';
// @public (undocumented)
const N40 = '#DFE1E6';
// @public (undocumented)
const N400 = '#505F79';
// @public (undocumented)
const N400A = 'rgba(9, 30, 66, 0.71)';
// @public (undocumented)
const N40A = 'rgba(9, 30, 66, 0.13)';
// @public (undocumented)
const N50 = '#C1C7D0';
// @public (undocumented)
const N500 = '#42526E';
// @public (undocumented)
const N500A = 'rgba(9, 30, 66, 0.77)';
// @public (undocumented)
const N50A = 'rgba(9, 30, 66, 0.25)';
// @public (undocumented)
const N60 = '#B3BAC5';
// @public (undocumented)
const N600 = '#344563';
// @public (undocumented)
const N600A = 'rgba(9, 30, 66, 0.82)';
// @public (undocumented)
const N60A = 'rgba(9, 30, 66, 0.31)';
// @public (undocumented)
const N70 = '#A5ADBA';
// @public (undocumented)
const N700 = '#253858';
// @public (undocumented)
const N700A = 'rgba(9, 30, 66, 0.89)';
// @public (undocumented)
const N70A = 'rgba(9, 30, 66, 0.36)';
// @public (undocumented)
const N80 = '#97A0AF';
// @public (undocumented)
const N800 = '#172B4D';
// @public (undocumented)
const N800A = 'rgba(9, 30, 66, 0.95)';
// @public (undocumented)
const N80A = 'rgba(9, 30, 66, 0.42)';
// @public (undocumented)
const N90 = '#8993A4';
// @public (undocumented)
const N900 = '#091E42';
// @public (undocumented)
const N90A = 'rgba(9, 30, 66, 0.48)';
// @public @deprecated (undocumented)
export const noFocusRing: () => string;
// @public (undocumented)
export interface NoThemeProps {
// (undocumented)
[index: string]: any;
}
// @public (undocumented)
const P100 = '#998DD9';
// @public (undocumented)
const P200 = '#8777D9';
// @public (undocumented)
const P300 = '#6554C0';
// @public (undocumented)
const P400 = '#5243AA';
// @public (undocumented)
const P50 = '#EAE6FF';
// @public (undocumented)
const P500 = '#403294';
// @public (undocumented)
const P75 = '#C0B6F2';
// @public @deprecated (undocumented)
const placeholderText: ThemedValue<'var(--ds-text-subtlest)'>;
// @public @deprecated (undocumented)
const primary: ThemedValue<'var(--ds-background-brand-bold)'>;
// @public (undocumented)
const purple: ThemedValue<string>;
// @public (undocumented)
const R100 = '#FF8F73';
// @public (undocumented)
const R200 = '#FF7452';
// @public (undocumented)
const R300 = '#FF5630';
// @public (undocumented)
const R400 = '#DE350B';
// @public (undocumented)
const R50 = '#FFEBE6';
// @public (undocumented)
const R500 = '#BF2600';
// @public (undocumented)
const R75 = '#FFBDAD';
// @public (undocumented)
const red: ThemedValue<string>;
// @public @deprecated (undocumented)
const skeleton: () => 'var(--ds-skeleton)';
// @public
export const skeletonShimmer: () => {
readonly css: {
readonly backgroundColor: 'var(--ds-skeleton)';
readonly animationDuration: '1.5s';
readonly animationIterationCount: 'infinite';
readonly animationTimingFunction: 'linear';
readonly animationDirection: 'alternate';
};
readonly keyframes: {
readonly from: {
readonly backgroundColor: 'var(--ds-skeleton)';
};
readonly to: {
readonly backgroundColor: 'var(--ds-skeleton-subtle)';
};
};
};
// @public @deprecated (undocumented)
const subtleHeading: ThemedValue<'var(--ds-text-subtlest)'>;
// @public @deprecated (undocumented)
const subtleText: ThemedValue<'var(--ds-text-subtlest)'>;
// @public (undocumented)
const T100 = '#79E2F2';
// @public (undocumented)
const T200 = '#00C7E6';
// @public (undocumented)
const T300 = '#00B8D9';
// @public (undocumented)
const T400 = '#00A3BF';
// @public (undocumented)
const T50 = '#E6FCFF';
// @public (undocumented)
const T500 = '#008DA6';
// @public (undocumented)
const T75 = '#B3F5FF';
// @public (undocumented)
const teal: ThemedValue<string>;
// @public @deprecated (undocumented)
const text: ThemedValue<'var(--ds-text)'>;
// @public @deprecated (undocumented)
const textActive: ThemedValue<'var(--ds-text-selected)'>;
// @public @deprecated (undocumented)
const textHover: ThemedValue<'var(--ds-text)'>;
// @public (undocumented)
export interface Theme {
// (undocumented)
mode: ThemeModes;
}
// @public (undocumented)
export const THEME_MODES: string[];
// @public (undocumented)
type ThemeConsumerFn<ThemeTokens> = {
children: (tokens: ThemeTokens) => ReactNode;
};
// @public @deprecated (undocumented)
export function themed<V = DefaultValue>(
modesOrVariant: Modes<V> | string,
variantModes?: VariantModes<V>,
): ThemedValue<V>;
// @public (undocumented)
export type ThemedValue<V = DefaultValue> = (props?: ThemeProps) => '' | V;
// @public (undocumented)
export type ThemeModes = 'dark' | 'light';
// @public (undocumented)
export type ThemeProp<ThemeTokens, ThemeProps> = (
getTokens: GetThemeTokensFn<ThemeTokens, ThemeProps>,
themeProps: ThemeProps,
) => ThemeTokens;
// @public (undocumented)
export type ThemeProps = AtlaskitThemeProps | CustomThemeProps | NoThemeProps;
declare namespace typography {
export { headingSizes, h900, h800, h700, h600, h500, h400, h300, h200, h100 };
}
export { typography };
// @public (undocumented)
export const useGlobalTheme: (props: void) => GlobalThemeTokens;
// @public (undocumented)
type VariantModes<V> = {
[index: string]: Modes<V>;
};
// @public @deprecated (undocumented)
export const visuallyHidden: () => {
border: string;
clip: string;
height: string;
overflow: 'hidden';
padding: string;
position: 'absolute';
width: string;
whiteSpace: 'nowrap';
};
// @public (undocumented)
const Y100 = '#FFE380';
// @public (undocumented)
const Y200 = '#FFC400';
// @public (undocumented)
const Y300 = '#FFAB00';
// @public (undocumented)
const Y400 = '#FF991F';
// @public (undocumented)
const Y50 = '#FFFAE6';
// @public (undocumented)
const Y500 = '#FF8B00';
// @public (undocumented)
const Y75 = '#FFF0B3';
// @public (undocumented)
const yellow: ThemedValue<string>;
// (No @packageDocumentation comment for this package)
```
<!--SECTION END: Main Entry Types-->
### Peer Dependencies
<!--SECTION START: Peer Dependencies-->
```json
{
"react": "^16.8.0"
}
```
<!--SECTION END: Peer Dependencies-->