3.3.0 • Published 17 days ago
@dnanpm/styleguide v3.3.0
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();
3.3.0
17 days ago
3.2.0
3 months ago
3.1.0
7 months ago
3.0.0
11 months ago
2.3.0
1 year ago
2.2.3
1 year ago
2.2.1
2 years ago
2.2.0
2 years ago
2.2.2
1 year ago
2.1.0
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
1.9.0
2 years ago
1.8.1
3 years ago
1.8.0
3 years ago
1.7.1
3 years ago
1.7.0
3 years ago
1.6.0
3 years ago
1.5.1
3 years ago
1.5.0
3 years ago
1.4.1
3 years ago
1.4.0
3 years ago
1.3.0
4 years ago
1.2.0
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.0
4 years ago
0.8.0
4 years ago
0.7.0
4 years ago
0.6.0
4 years ago
0.5.0
4 years ago
0.4.0
4 years ago
0.3.0
5 years ago
0.2.0
5 years ago