Add box light variant

src/Box/Box.styles.js

@@ -12,6 +12,7 @@ export default (theme) => ({
   },
 
   plainVariant: {},
+  lightVariant: {},
   textVariant: {},
   outlineVariant: {},
   gradientVariant: {},
@@ -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': {
           backgroundColor: theme.colors.palette[color],
           backgroundImage: theme.colors.gradient[color],
@@ -141,7 +159,7 @@ export default (theme) => ({
         .string()} !important`,
     },
 
-    '&$plainVariant, &$gradientVariant': {
+    '&$plainVariant, &$lightVariant, &$gradientVariant': {
       backgroundColor: `${Color(theme.colors.disabled)
         .fade(0.8)
         .string()} !important`,

src/Box/Box.tsx

@@ -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) => {

src/Box/demos/Variants.js

@@ -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`}