@craton/styled v1.0.2

Craton Styled Library

This library is made to easy maintain style's between client's.

Installation

yarn:

yarn add @craton/styled

npm:

npm install @craton/styled

Usage

import {ThemeProvider, ThemeStore} from '@craton/styled'
import React, {useContext} from 'react'


const App = () => {
    const [tags, setTheme] = useContext(ThemeStore)

    return (
        <ThemeProvider>
            <tags.texts.H3> Hello World  </tags.texts.H3> 
        </ThemeProvider>
    )
}

Set colors and update Themes

// The Object Structure is like this

let ligthTheme = {
    primary: "green",
    secondary: "olive",
    tertiary: "mint",
    light: "white",
    dark: "black"
}

// Invert colors to make an Dark Theme

let darkTheme = {
    primary: "green",
    secondary: "olive",
    tertiary: "mint",
    light: "black", // inverted
    dark: "white" // inverted
}


<button onClick={() => setTheme(lightTheme)}> Turn On Light </button>
<button onClick={() => setTheme(darkTheme)}> Turn On Dark </button>

Styled Tags

    <tags.texts.H1>  h1 </tags.texts.H1>
    <tags.texts.H2>  h2 </tags.texts.H2>
    <tags.texts.H3>  h3 </tags.texts.H3>


    <tags.divs.Light>  light background </tags.divs.Light>
    <tags.divs.Dark>  dark background </tags.divs.Dark>
    <tags.divs.Flex>  flex content </tags.divs.Flex>

Config

    <tags.texts.H1 fontsize={28}>  h1 </tags.texts.H1>
    <tags.texts.H2 italic>  h2 </tags.texts.H2>
    <tags.texts.H3 shadow>  h3 </tags.texts.H3>

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT