Commit cd9534a5 authored by Mickaël Bourgier's avatar Mickaël Bourgier
Browse files

Merge branch '36-add-a-light-variant-on-box-component' into 'master'

Resolve "Add a light variant on box component"

Closes #36

See merge request !13
parents bbcb6a71 55399ec2
Pipeline #2964 passed with stage
in 7 minutes and 33 seconds
......@@ -12,6 +12,7 @@ export default (theme) => ({
},
plainVariant: {},
lightVariant: {},
textVariant: {},
outlineVariant: {},
gradientVariant: {},
......@@ -77,6 +78,29 @@ export default (theme) => ({
},
},
'&$lightVariant': {
backgroundColor: Color(theme.colors.palette[color])
.alpha(0.25)
.string(),
color: theme.colors.palette[color],
'&$interactive:not($muted)': {
'&:hover, &:focus': {
color: Color(theme.colors.palette[color]).darken(0.25).string(),
backgroundColor: Color(theme.colors.palette[color])
.alpha(0.5)
.string(),
},
'&:active': {
color: Color(theme.colors.palette[color]).darken(0.35).string(),
backgroundColor: Color(theme.colors.palette[color])
.alpha(0.8)
.string(),
},
},
},
'&$gradientVariant': {
backgroundColor: theme.colors.palette[color],
backgroundImage: theme.colors.gradient[color],
......@@ -141,7 +165,7 @@ export default (theme) => ({
.string()} !important`,
},
'&$plainVariant, &$gradientVariant': {
'&$plainVariant, &$lightVariant, &$gradientVariant': {
backgroundColor: `${Color(theme.colors.disabled)
.fade(0.8)
.string()} !important`,
......
......@@ -93,7 +93,7 @@ export interface BoxProps {
*
* @default 'plain'
*/
variant?: 'text' | 'outline' | 'plain' | 'gradient';
variant?: 'text' | 'outline' | 'plain' | 'gradient' | 'light';
}
const Box: OverridableComponent<BoxProps, 'div'> = (props) => {
......
......@@ -52,7 +52,7 @@ class Variants extends PureComponent {
return (
<Fragment>
<Row justifyContent='center'>
{['text', 'outline', 'plain', 'gradient'].map((variant) => (
{['text', 'outline', 'plain', 'gradient', 'light'].map((variant) => (
<Col key={variant} xs={4} sm={3} lg='auto'>
<input
id={`${variant}Variant`}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment