Commit 6bd44420 authored by Lucas Breton's avatar Lucas Breton
Browse files

Add box light variant

parent bbcb6a71
Pipeline #2961 failed with stage
in 2 minutes and 17 seconds
...@@ -12,6 +12,7 @@ export default (theme) => ({ ...@@ -12,6 +12,7 @@ export default (theme) => ({
}, },
plainVariant: {}, plainVariant: {},
lightVariant: {},
textVariant: {}, textVariant: {},
outlineVariant: {}, outlineVariant: {},
gradientVariant: {}, gradientVariant: {},
...@@ -77,6 +78,23 @@ export default (theme) => ({ ...@@ -77,6 +78,23 @@ 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': { '&$gradientVariant': {
backgroundColor: theme.colors.palette[color], backgroundColor: theme.colors.palette[color],
backgroundImage: theme.colors.gradient[color], backgroundImage: theme.colors.gradient[color],
...@@ -141,7 +159,7 @@ export default (theme) => ({ ...@@ -141,7 +159,7 @@ export default (theme) => ({
.string()} !important`, .string()} !important`,
}, },
'&$plainVariant, &$gradientVariant': { '&$plainVariant, &$lightVariant, &$gradientVariant': {
backgroundColor: `${Color(theme.colors.disabled) backgroundColor: `${Color(theme.colors.disabled)
.fade(0.8) .fade(0.8)
.string()} !important`, .string()} !important`,
......
...@@ -93,7 +93,7 @@ export interface BoxProps { ...@@ -93,7 +93,7 @@ export interface BoxProps {
* *
* @default 'plain' * @default 'plain'
*/ */
variant?: 'text' | 'outline' | 'plain' | 'gradient'; variant?: 'text' | 'outline' | 'plain' | 'gradient' | 'light';
} }
const Box: OverridableComponent<BoxProps, 'div'> = (props) => { const Box: OverridableComponent<BoxProps, 'div'> = (props) => {
......
...@@ -52,7 +52,7 @@ class Variants extends PureComponent { ...@@ -52,7 +52,7 @@ class Variants extends PureComponent {
return ( return (
<Fragment> <Fragment>
<Row justifyContent='center'> <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'> <Col key={variant} xs={4} sm={3} lg='auto'>
<input <input
id={`${variant}Variant`} 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