@superlogica/themeprovider NPM

COMPONENT THEME PROVIDER

Esse package contém o componente theme provider da Superlógica para web/desktop, seguindo nossos Tokens e padrões.

Instalação:

npm install @superlogica/themeprovider

Props

A props theme é obrigatória, ela é responsável por atribuir valores aos componentes que dependem de tema

Props	Type	Default	Description
`theme`	`object`	`none`	deve conter um objeto com os parametros padrões de tamanho, cor, padding, margins, etc... para os componentes
`children`	`node`	`none`	deve conter toda sua aplicação que seja dependente do tema

Uso

import ThemeProvider from '@superlogica/ThemeProvider';
const Theme = {
    margin: {
        none: 0 + 'px',
        xxxs: paddingColumn/4 + 'px',
        xxs: paddingColumn/2 + 'px',
        xs: paddingColumn + 'px',
        sm: paddingColumn + (paddingColumn / 2) + 'px',
        md: gutterSize + 'px',
        lg: gutterSize + (paddingColumn / 2) + 'px',
        xl: gutterSize + paddingColumn,
        xxl: gutterSize * 2 + 'px',
        xxxl: (gutterSize * 2) + paddingColumn + 'px',
    },
    polished: {
        max: 1168,
        min: 320
    },
    heading: {
        h1: {
            label: {
                fontSize: 16,
                lineHeight: 20
            },
            max: {
                fontSize: 54,
                lineHeight: 62
            },
            min: {
                fontSize: 32,
                lineHeight: 36
            }
        },
        h2: {
            label: {
                fontSize: 16,
                lineHeight: 20
            },
            max: {
                fontSize: 36,
                lineHeight: 48,
            },
            min: {
                fontSize: 24,
                lineHeight: 36,
            }
        },
        h3: {
            label: {
                fontSize: 16,
                lineHeight: 20
            },
            max: {
                fontSize: 18,
                lineHeight: 24,
            },
            min: {
                fontSize: 16,
                lineHeight: 24,
            }
        },
        h4: {
            label: {
                fontSize: 16,
                lineHeight: 20
            },
            max: {
                fontSize: 18,
                lineHeight: 28,
            },
            min: {
                fontSize: 16,
                lineHeight: 24,
            }
        },
        h5: {
            label: {
                fontSize: 16,
                lineHeight: 20
            },
            max: {
                fontSize: 18,
                lineHeight: 28,
            },
            min: {
                fontSize: 16,
                lineHeight: 24,
            }
        },
        h6: {
            label: {
                fontSize: 16,
                lineHeight: 20
            },
            max: {
                fontSize: 16,
                lineHeight: 24,
            },
            min: {
                fontSize: 16,
                lineHeight: 24,
            }
        }
    }
}

function exemploThemeProvider () {
    ...
        return (
            <ThemeProvider theme={Theme}>
                //Sua aplicação
            </ThemeProvider>
        )
    ...
}