Package Exports

@dnanpm/styleguide

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@dnanpm/styleguide) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

DNA Styleguide

Styles and styled components for DNA.

Installation

Run install command in repository where styleguide should be added
- Example
```
npm install @dnanpm/styleguide
```

Usage example

Theme

import { createStyled, theme as defaultTheme } from '@dnanpm/styleguide';

const color = {
    ...defaultTheme.color,
    background: '#000000',
};

const iconSize = {
    default: '0.75em',
    defaultMobile: '2em',
};

const theme = {
    ...defaultTheme,
    colors,
    iconSize,
};

export type ThemeInterface = typeof theme;
export const { styled, css } = createStyled<ThemeInterface>();
export default theme;

import theme from './theme';

class MyApp {
    public render() {
        const { Component, pageProps } = this.props;

        return (
            <ThemeProvider theme={theme}>
                <Component {...pageProps} />
            </ThemeProvider>
        );
    }
}

Button

import { ButtonPrimary } from '@dnanpm/styleguide';

interface Props {
    myProp?: string;
}

const MyComponent = ({
    myProp,
}: Props) => {
    return (
        <ButtonPrimary>{myProp || 'Lorem Ipsum'}</ButtonPrimary>
    );
};

export default MyComponent;

IE11 Support NextJS

In next.config.js you need to use next-transpile-modules package to allow nextjs to be able to transpile styleguide and related es6 modules based on babel config.

// next.config.js
const withTM = require('next-transpile-modules')(['@dnanpm/styleguide', "react-spring"]);

module.exports = withTM();