@kalamazoo/theme
- Version 1.0.1
- Published
- 125 kB
- 3 dependencies
- Apache-2.0 license
Install
npm i @kalamazoo/theme
yarn add @kalamazoo/theme
pnpm add @kalamazoo/theme
Overview
The Atlaskit theme framework
Index
Variables
Functions
Classes
Interfaces
Type Aliases
Namespaces
colors
- B100
- B200
- B300
- B400
- B50
- B500
- B75
- background
- backgroundActive
- backgroundHover
- backgroundOnLayer
- blue
- codeBlock
- DN0
- DN10
- DN100
- DN100A
- DN10A
- DN20
- DN200
- DN200A
- DN20A
- DN30
- DN300
- DN300A
- DN30A
- DN40
- DN400
- DN400A
- DN40A
- DN50
- DN500
- DN500A
- DN50A
- DN60
- DN600
- DN600A
- DN60A
- DN70
- DN700
- DN700A
- DN70A
- DN80
- DN800
- DN800A
- DN80A
- DN90
- DN900
- DN90A
- G100
- G200
- G300
- G400
- G50
- G500
- G75
- green
- heading
- link
- linkActive
- linkHover
- linkOutline
- N0
- N10
- N100
- N100A
- N10A
- N20
- N200
- N200A
- N20A
- N30
- N300
- N300A
- N30A
- N40
- N400
- N400A
- N40A
- N50
- N500
- N500A
- N50A
- N60
- N600
- N600A
- N60A
- N70
- N700
- N700A
- N70A
- N80
- N800
- N800A
- N80A
- N90
- N900
- N90A
- P100
- P200
- P300
- P400
- P50
- P500
- P75
- placeholderText
- primary
- purple
- R100
- R200
- R300
- R400
- R50
- R500
- R75
- red
- skeleton()
- subtleHeading
- subtleText
- T100
- T200
- T300
- T400
- T50
- T500
- T75
- teal
- text
- textActive
- textHover
- Y100
- Y200
- Y300
- Y400
- Y50
- Y500
- Y75
- yellow
Variables
variable _default
const _default: { Consumer: any; Provider: any };
variable AtlasKitThemeProvider
const AtlasKitThemeProvider: typeof AtlaskitThemeProvider;
variable CHANNEL
const CHANNEL: string;
variable DEFAULT_THEME_MODE
const DEFAULT_THEME_MODE: string;
variable FLATTENED
const FLATTENED: string;
variable layers
const layers: { card: () => number; dialog: () => number; navigation: () => number; layer: () => number; blanket: () => number; modal: () => number; flag: () => number; spotlight: () => number; tooltip: () => number;};
variable ResetTheme
const ResetTheme: { Consumer: React.ComponentType< { children?: React.ReactNode } & { children: (tokens: ResetThemeTokens) => React.ReactNode; } >; Provider: React.ComponentType<{ children?: React.ReactNode; value?: ThemeProp<ResetThemeTokens, ResetThemeProps> | undefined; }>;};
variable THEME_MODES
const THEME_MODES: string[];
Functions
function Appearance
Appearance: ({ children, props, theme }: Props) => any;
function assistive
assistive: () => import('styled-components').InterpolationValue[];
function borderRadius
borderRadius: () => number;
function codeFontFamily
codeFontFamily: () => string;
function createTheme
createTheme: <ThemeTokens, ThemeProps>( defaultGetTokens: (props: ThemeProps) => ThemeTokens) => { Consumer: ComponentType< ThemeProps & { children: (tokens: ThemeTokens) => ReactNode } >; Provider: ComponentType<{ children?: ReactNode; value?: ThemeProp<ThemeTokens, ThemeProps>; }>;};
function focusRing
focusRing: (color?: string, outlineWidth?: number) => string;
function fontFamily
fontFamily: () => string;
function fontSize
fontSize: () => number;
function fontSizeSmall
fontSizeSmall: () => number;
function getTheme
getTheme: (props?: ThemeProps) => Theme;
function gridSize
gridSize: () => number;
function noFocusRing
noFocusRing: () => string;
function Reset
Reset: (props: ResetProps) => JSX.Element;
function skeletonShimmer
skeletonShimmer: () => { css: { backgroundColor: string; backgroundImage: string; backgroundRepeat: string; backgroundSize: string; animationDuration: string; animationFillMode: string; animationIterationCount: string; animationTimingFunction: string; }; keyframes: { '0%': { backgroundPosition: string }; '100%': { backgroundPosition: string }; };};
function themed
themed: <V = DefaultValue>( modesOrVariant: Modes<V> | string, variantModes?: VariantModes<V>) => ThemedValue<V>;
function withTheme
withTheme: <Props>( InnerComponent: ComponentType<Props>) => (props: Props) => JSX.Element;
Classes
class AtlaskitThemeProvider
class AtlaskitThemeProvider extends Component<Props, AtlaskitThemeProps> {}
constructor
constructor(props: Props);
property childContextTypes
static childContextTypes: { hasAtlaskitThemeProvider: PropTypes.Requireable<any>;};
property contextTypes
static contextTypes: { hasAtlaskitThemeProvider: PropTypes.Requireable<any> };
property defaultProps
static defaultProps: { mode: string };
property stylesheet
stylesheet: any;
method componentWillUnmount
componentWillUnmount: () => void;
method getChildContext
getChildContext: () => { hasAtlaskitThemeProvider: boolean };
method render
render: () => JSX.Element;
method UNSAFE_componentWillMount
UNSAFE_componentWillMount: () => void;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (newProps: Props) => void;
Interfaces
interface AtlaskitThemeProps
interface AtlaskitThemeProps {}
property theme
theme: { __ATLASKIT_THEME__: Theme;};
index signature
[index: string]: any;
interface CustomThemeProps
interface CustomThemeProps {}
property theme
theme: Theme;
index signature
[index: string]: any;
interface GlobalThemeTokens
interface GlobalThemeTokens extends Theme {}
interface NoThemeProps
interface NoThemeProps {}
index signature
[index: string]: any;
interface ResetThemeTokens
interface ResetThemeTokens {}
property backgroundColor
backgroundColor: string;
property headingColor
headingColor?: string;
property linkColor
linkColor?: string;
property linkColorActive
linkColorActive?: string;
property linkColorHover
linkColorHover?: string;
property linkColorOutline
linkColorOutline?: string;
property subtleHeadingColor
subtleHeadingColor?: string;
property subtleTextColor
subtleTextColor?: string;
property textColor
textColor: string;
Type Aliases
type colorPaletteType
type colorPaletteType = '8' | '16' | '24';
type DefaultValue
type DefaultValue = string | number;
type Elevation
type Elevation = 'e100' | 'e200' | 'e300' | 'e400' | 'e500';
type ResetThemeProps
type ResetThemeProps = | { children?: ReactNode; } | undefined;
type ThemedValue
type ThemedValue<V = DefaultValue> = (props?: ThemeProps) => V | '';
type ThemeModes
type ThemeModes = 'light' | 'dark';
type ThemeProp
type ThemeProp<ThemeTokens, ThemeProps> = ( getTokens: (props: ThemeProps) => ThemeTokens, themeProps: ThemeProps) => ThemeTokens;
type ThemeProps
type ThemeProps = AtlaskitThemeProps | CustomThemeProps | NoThemeProps;
Namespaces
namespace colorPalettes
module 'dist/cjs/color-palettes.d.ts' {}
variable colorPalette16
const colorPalette16: { background: string; text: string }[];
variable colorPalette24
const colorPalette24: { background: string; text: string }[];
variable colorPalette8
const colorPalette8: { background: string; text: string }[];
function colorPalette
colorPalette: ( palette?: colorPaletteType) => { background: string; text: string }[];
namespace colors
module 'dist/cjs/colors.d.ts' {}
variable B100
const B100: string;
variable B200
const B200: string;
variable B300
const B300: string;
variable B400
const B400: string;
variable B50
const B50: string;
variable B500
const B500: string;
variable B75
const B75: string;
variable background
const background: ThemedValue<string>;
variable backgroundActive
const backgroundActive: ThemedValue<string>;
variable backgroundHover
const backgroundHover: ThemedValue<string>;
variable backgroundOnLayer
const backgroundOnLayer: ThemedValue<string>;
variable blue
const blue: ThemedValue<string>;
variable codeBlock
const codeBlock: ThemedValue<string>;
variable DN0
const DN0: string;
variable DN10
const DN10: string;
variable DN100
const DN100: string;
variable DN100A
const DN100A: string;
variable DN10A
const DN10A: string;
variable DN20
const DN20: string;
variable DN200
const DN200: string;
variable DN200A
const DN200A: string;
variable DN20A
const DN20A: string;
variable DN30
const DN30: string;
variable DN300
const DN300: string;
variable DN300A
const DN300A: string;
variable DN30A
const DN30A: string;
variable DN40
const DN40: string;
variable DN400
const DN400: string;
variable DN400A
const DN400A: string;
variable DN40A
const DN40A: string;
variable DN50
const DN50: string;
variable DN500
const DN500: string;
variable DN500A
const DN500A: string;
variable DN50A
const DN50A: string;
variable DN60
const DN60: string;
variable DN600
const DN600: string;
variable DN600A
const DN600A: string;
variable DN60A
const DN60A: string;
variable DN70
const DN70: string;
variable DN700
const DN700: string;
variable DN700A
const DN700A: string;
variable DN70A
const DN70A: string;
variable DN80
const DN80: string;
variable DN800
const DN800: string;
variable DN800A
const DN800A: string;
variable DN80A
const DN80A: string;
variable DN90
const DN90: string;
variable DN900
const DN900: string;
variable DN90A
const DN90A: string;
variable G100
const G100: string;
variable G200
const G200: string;
variable G300
const G300: string;
variable G400
const G400: string;
variable G50
const G50: string;
variable G500
const G500: string;
variable G75
const G75: string;
variable green
const green: ThemedValue<string>;
variable heading
const heading: ThemedValue<string>;
variable link
const link: ThemedValue<string>;
variable linkActive
const linkActive: ThemedValue<string>;
variable linkHover
const linkHover: ThemedValue<string>;
variable linkOutline
const linkOutline: ThemedValue<string>;
variable N0
const N0: string;
variable N10
const N10: string;
variable N100
const N100: string;
variable N100A
const N100A: string;
variable N10A
const N10A: string;
variable N20
const N20: string;
variable N200
const N200: string;
variable N200A
const N200A: string;
variable N20A
const N20A: string;
variable N30
const N30: string;
variable N300
const N300: string;
variable N300A
const N300A: string;
variable N30A
const N30A: string;
variable N40
const N40: string;
variable N400
const N400: string;
variable N400A
const N400A: string;
variable N40A
const N40A: string;
variable N50
const N50: string;
variable N500
const N500: string;
variable N500A
const N500A: string;
variable N50A
const N50A: string;
variable N60
const N60: string;
variable N600
const N600: string;
variable N600A
const N600A: string;
variable N60A
const N60A: string;
variable N70
const N70: string;
variable N700
const N700: string;
variable N700A
const N700A: string;
variable N70A
const N70A: string;
variable N80
const N80: string;
variable N800
const N800: string;
variable N800A
const N800A: string;
variable N80A
const N80A: string;
variable N90
const N90: string;
variable N900
const N900: string;
variable N90A
const N90A: string;
variable P100
const P100: string;
variable P200
const P200: string;
variable P300
const P300: string;
variable P400
const P400: string;
variable P50
const P50: string;
variable P500
const P500: string;
variable P75
const P75: string;
variable placeholderText
const placeholderText: ThemedValue<string>;
variable primary
const primary: ThemedValue<string>;
variable purple
const purple: ThemedValue<string>;
variable R100
const R100: string;
variable R200
const R200: string;
variable R300
const R300: string;
variable R400
const R400: string;
variable R50
const R50: string;
variable R500
const R500: string;
variable R75
const R75: string;
variable red
const red: ThemedValue<string>;
variable subtleHeading
const subtleHeading: ThemedValue<string>;
variable subtleText
const subtleText: ThemedValue<string>;
variable T100
const T100: string;
variable T200
const T200: string;
variable T300
const T300: string;
variable T400
const T400: string;
variable T50
const T50: string;
variable T500
const T500: string;
variable T75
const T75: string;
variable teal
const teal: ThemedValue<string>;
variable text
const text: ThemedValue<string>;
variable textActive
const textActive: ThemedValue<string>;
variable textHover
const textHover: ThemedValue<string>;
variable Y100
const Y100: string;
variable Y200
const Y200: string;
variable Y300
const Y300: string;
variable Y400
const Y400: string;
variable Y50
const Y50: string;
variable Y500
const Y500: string;
variable Y75
const Y75: string;
variable yellow
const yellow: ThemedValue<string>;
function skeleton
skeleton: () => string;
namespace elevation
module 'dist/cjs/elevation.d.ts' {}
namespace math
module 'dist/cjs/utils/math.d.ts' {}
function add
add: (fn: (props?: any) => number, addend: number) => (props?: any) => number;
function divide
divide: ( fn: (props?: any) => number, divisor: number) => (props?: any) => number;
function multiply
multiply: ( fn: (props?: any) => number, factor: number) => (props?: any) => number;
function subtract
subtract: ( fn: (props?: any) => number, subtrahend: number) => (props?: any) => number;
namespace typography
module 'dist/cjs/typography.d.ts' {}
variable headingSizes
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 };};
function h100
h100: () => import('styled-components').FlattenInterpolation< import('styled-components').ThemedStyledProps< | import('./types').AtlaskitThemeProps | import('./types').CustomThemeProps | import('./types').NoThemeProps | undefined, any >>[];
function h200
h200: () => import('styled-components').FlattenInterpolation< import('styled-components').ThemedStyledProps< | import('./types').AtlaskitThemeProps | import('./types').CustomThemeProps | import('./types').NoThemeProps | undefined, any >>[];
function h300
h300: () => import('styled-components').FlattenInterpolation< import('styled-components').ThemedStyledProps< | import('./types').AtlaskitThemeProps | import('./types').CustomThemeProps | import('./types').NoThemeProps | undefined, any >>[];
function h400
h400: () => import('styled-components').FlattenInterpolation< import('styled-components').ThemedStyledProps< | import('./types').AtlaskitThemeProps | import('./types').CustomThemeProps | import('./types').NoThemeProps | undefined, any >>[];
function h500
h500: () => import('styled-components').FlattenInterpolation< import('styled-components').ThemedStyledProps< | import('./types').AtlaskitThemeProps | import('./types').CustomThemeProps | import('./types').NoThemeProps | undefined, any >>[];
function h600
h600: () => import('styled-components').FlattenInterpolation< import('styled-components').ThemedStyledProps< | import('./types').AtlaskitThemeProps | import('./types').CustomThemeProps | import('./types').NoThemeProps | undefined, any >>[];
function h700
h700: () => import('styled-components').FlattenInterpolation< import('styled-components').ThemedStyledProps< | import('./types').AtlaskitThemeProps | import('./types').CustomThemeProps | import('./types').NoThemeProps | undefined, any >>[];
function h800
h800: () => import('styled-components').FlattenInterpolation< import('styled-components').ThemedStyledProps< | import('./types').AtlaskitThemeProps | import('./types').CustomThemeProps | import('./types').NoThemeProps | undefined, any >>[];
function h900
h900: () => import('styled-components').FlattenInterpolation< import('styled-components').ThemedStyledProps< | import('./types').AtlaskitThemeProps | import('./types').CustomThemeProps | import('./types').NoThemeProps | undefined, any >>[];
Package Files (16)
- dist/cjs/color-palettes.d.ts
- dist/cjs/colors.d.ts
- dist/cjs/components/Appearance.d.ts
- dist/cjs/components/AtlaskitThemeProvider.d.ts
- dist/cjs/components/Reset.d.ts
- dist/cjs/components/Theme.d.ts
- dist/cjs/constants.d.ts
- dist/cjs/elevation.d.ts
- dist/cjs/hoc.d.ts
- dist/cjs/index.d.ts
- dist/cjs/types.d.ts
- dist/cjs/typography.d.ts
- dist/cjs/utils/createTheme.d.ts
- dist/cjs/utils/getTheme.d.ts
- dist/cjs/utils/math.d.ts
- dist/cjs/utils/themed.d.ts
Dependencies (3)
Dev Dependencies (13)
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@kalamazoo/theme
.
- Markdown[](https://www.jsdocs.io/package/@kalamazoo/theme)
- HTML<a href="https://www.jsdocs.io/package/@kalamazoo/theme"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 6250 ms. - Missing or incorrect documentation? Open an issue for this package.