keepfy / styleguide

STYLEGUIDE

A repository to center and document, initially, the colors of the Keepfy App.

📦 Install

The package still in alpha

$ npm i @keepfy/styleguide

or

$ yarn add @keepfy/styleguide

📚 Usage

The work in progress of the colors documentation is here

styled-components + typescript

Using the ThemeProvider of styled-components, the theme property will be injected into all styled-components below of it.

import { theme } from '@keepfy/styleguide'
import styled, { ThemeProvider as StyledThemeProvider } from 'styled-components'

type Kind = 'critical' | 'medium' | 'high' | 'minimal' | 'low' | 'neutral'

interface IProps {
    kind: Kind
    children?: React.ReactNode
}

const CardStyled = styled('div')<IProps>(
    ({ theme, kind }) => ({
        padding: '0.5rem',
        borderLeft: `4px solid ${ theme.colors.priority[kind].main}`,
        backgroundColor: theme.colors.priority[kind].light,
        width: '144px',
        height: '80px',
        margin: '0 1rem 1rem 0',
        borderRadius: '4px',
        position: 'relative'
    })
)

const App = () => (
    <StyledThemeProvider theme={ theme }>
        <CardStyled kind="critical" />
    </StyledThemeProvider>
)

For auto-types of the theme inside of styled components:

Extend the keepfy theme in the default theme of styled-components

issue

// eg.: src/types/styled.ts

import { theme } from '@keepfy/styleguide'

type Theme = typeof theme

declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}

Don't forget to add it to the typeRoots in tsconfig.json

Eg.: in tsconfig.json

{
    "compilerOptions": {
	...,
+	"typeRoots": ["./node_modules/@types/", "./src/types/styled.ts", ...]
    },
    ...
}