<!-- 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-->