@kalamazoo/theme

@kalamazoo/theme

Version 1.0.1
Published 5 years ago
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

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;

interface Theme

interface Theme {}

property mode

mode: ThemeModes;

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' {}

variable e100

const e100: ThemedValue<string>;

variable e200

const e200: ThemedValue<string>;

variable e300

const e300: ThemedValue<string>;

variable e400

const e400: ThemedValue<string>;

variable e500

const e500: ThemedValue<string>;

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)

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

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](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 3 years ago.
Package analyzed in 6250 ms.
Missing or incorrect documentation? Open an issue for this package.