react-base16-styling

react-base16-styling

Version 0.10.0
Published 15 days ago
99.3 kB
4 dependencies
MIT license

Install

npm i react-base16-styling

yarn add react-base16-styling

pnpm add react-base16-styling

Overview

React styling with base16 color scheme support

Index

Variables

variable base16Themes

const base16Themes: {
    threezerotwofour: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    apathy: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    ashes: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    atelierDune: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    atelierForest: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    atelierHeath: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    atelierLakeside: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    atelierSeaside: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    bespin: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    brewer: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    bright: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    chalk: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    codeschool: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    colors: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    default: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    eighties: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    embers: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    flat: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    google: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    grayscale: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    greenscreen: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    harmonic: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    hopscotch: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    isotope: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    marrakesh: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    mocha: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    monokai: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    nicinabox: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    ocean: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    paraiso: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    pop: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    railscasts: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    shapeshifter: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    solarized: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    summerfruit: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    tomorrow: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    tube: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
    twilight: {
        scheme: string;
        author: string;
        base00: string;
        base01: string;
        base02: string;
        base03: string;
        base04: string;
        base05: string;
        base06: string;
        base07: string;
        base08: string;
        base09: string;
        base0A: string;
        base0B: string;
        base0C: string;
        base0D: string;
        base0E: string;
        base0F: string;
    };
};

variable createStyling

const createStyling: CurriedFunction3<
    (base16Theme: Base16Theme) => StylingConfig,
    Options,
    Theme,
    StylingFunction
>;

Functions

function getBase16Theme

getBase16Theme: (
    theme: Theme,
    base16Themes?: { [themeName: string]: Base16Theme }
) => Base16Theme | undefined;

function invertBase16Theme

invertBase16Theme: (base16Theme: Base16Theme) => Base16Theme;

function invertTheme

invertTheme: (theme: Theme | undefined) => Theme | undefined;

Interfaces

interface Base16Theme

interface Base16Theme {}

property author

author: string;

property base00

base00: string;

property base01

base01: string;

property base02

base02: string;

property base03

base03: string;

property base04

base04: string;

property base05

base05: string;

property base06

base06: string;

property base07

base07: string;

property base08

base08: string;

property base09

base09: string;

property base0A

base0A: string;

property base0B

base0B: string;

property base0C

base0C: string;

property base0D

base0D: string;

property base0E

base0E: string;

property base0F

base0F: string;

property scheme

scheme: string;

interface Styling

interface Styling {}

property className

className?: string;

property style

style?: CSS.Properties<string | number>;

Type Aliases

type StylingConfig

type StylingConfig = {
    extend?: string | Base16Theme | StylingValue;
} & {
    [name: string]: StylingValue | string | Base16Theme;
};

type StylingFunction

type StylingFunction = (
    keys: (string | false | undefined) | (string | false | undefined)[],
    ...rest: unknown[]
) => Styling;

type StylingValue

type StylingValue = string | CSS.Properties<string | number> | StylingValueFunction;

type StylingValueFunction

type StylingValueFunction = (
    styling: Styling,
    ...rest: unknown[]
) => Partial<Styling>;

type Theme

type Theme = string | Base16Theme | StylingConfig;

Package Files (3)

Dependencies (4)

Dev Dependencies (13)

Peer Dependencies (0)

No peer dependencies.

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/react-base16-styling.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-base16-styling)

HTML

<a href="https://www.jsdocs.io/package/react-base16-styling"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 8 days ago.
Package analyzed in 3579 ms.
Missing or incorrect documentation? Open an issue for this package.