Skip to content

Instantly share code, notes, and snippets.

@vaibhavpandeyvpz
Last active February 23, 2022 05:47
Show Gist options
  • Save vaibhavpandeyvpz/8876028d0b6a9374555dd7d6b870a228 to your computer and use it in GitHub Desktop.
Save vaibhavpandeyvpz/8876028d0b6a9374555dd7d6b870a228 to your computer and use it in GitHub Desktop.
Creating themed components based on styled.div
import { darken, getLuminance } from 'polished';
import styled, { css } from 'styled-components';
const isDarkColor = color => getLuminance(color) <= .5;
const Button = styled.button`
background: white;
border: 1px solid black;
color: black;
cursor: pointer;
display: inline-block;
border-radius: 5px;
font-size: 1em;
margin: .1em;
padding: 0.5em 1.25em;
&:hover {
background: lightgray;
}
&:active {
background: gray;
color: white
}
${props => props.size === 'sm' && css`
border-radius: 3px;
font-size: .9em;
padding: 0.25em 1em;
`}
${props => props.size === 'lg' && css`
border-radius: 8px;
font-size: 1.1em;
padding: .75em 1.5em;
`}
${['primary', 'success', 'info', 'warning', 'danger'].map(color => (
props => props[color] && css`
background: ${props.outlined ? 'white' : props.theme[color]};
border-color: ${props.theme[color]};
color: ${props.outlined ? props.theme[color] : isDarkColor(props.theme[color]) ? 'white' : 'black'};
&:hover {
border-color: ${props.outlined ? props.theme[color] : darken(.1, props.theme[color])};
background: ${props.outlined ? props.theme[color] : darken(.1, props.theme[color])};
color: ${isDarkColor(props.theme[color]) ? 'white' : 'black'};
}
&:active, &.active {
border-color: ${props.outlined ? darken(.1, props.theme[color]) : darken(.2, props.theme[color])};
background: ${props.outlined ? darken(.1, props.theme[color]) : darken(.2, props.theme[color])};
color: ${isDarkColor(props.theme[color]) ? 'white' : 'black'};
}
`
))}
`;
export default Button;
import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'styled-components';
import Button from './components/Button';
import reportWebVitals from './reportWebVitals';
import './index.css';
const theme = {
primary: '#7552cc',
success: '#279b37',
info: '#00bce4',
warning: '#ffc845',
danger: '#eb2226',
};
ReactDOM.render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<div style={{ width: '100%' }}>
<Button primary size="sm">Primary</Button>
<Button success size="sm">Success</Button>
<Button info size="sm">Info</Button>
<Button warning size="sm">Warning</Button>
<Button danger size="sm">Danger</Button>
</div>
<div style={{ width: '100%' }}>
<Button primary outlined size="sm">Primary</Button>
<Button success outlined size="sm">Success</Button>
<Button info outlined size="sm">Info</Button>
<Button warning outlined size="sm">Warning</Button>
<Button danger outlined size="sm">Danger</Button>
</div>
<div style={{ width: '100%' }}>
<Button primary>Primary</Button>
<Button success>Success</Button>
<Button info>Info</Button>
<Button warning>Warning</Button>
<Button danger>Danger</Button>
</div>
<div style={{ width: '100%' }}>
<Button primary outlined>Primary</Button>
<Button success outlined>Success</Button>
<Button info outlined>Info</Button>
<Button warning outlined>Warning</Button>
<Button danger outlined>Danger</Button>
</div>
<div style={{ width: '100%' }}>
<Button primary size="lg">Primary</Button>
<Button success size="lg">Success</Button>
<Button info size="lg">Info</Button>
<Button warning size="lg">Warning</Button>
<Button danger size="lg">Danger</Button>
</div>
<div style={{ width: '100%' }}>
<Button primary outlined size="lg">Primary</Button>
<Button success outlined size="lg">Success</Button>
<Button info outlined size="lg">Info</Button>
<Button warning outlined size="lg">Warning</Button>
<Button danger outlined size="lg">Danger</Button>
</div>
</ThemeProvider>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment