@teammodlr/ui-kit 2.1.8 → 2.1.9

package/src/components/button/style/Button.css.ts

@@ -1,12 +1,18 @@
-import {createVar, globalKeyframes, globalStyle, style, styleVariants} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
+import {
+    createVar,
+    globalKeyframes,
+    globalStyle,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 const sizes = {
     xs: '22px',
     sm: '28px',
     md: '36px',
     lg: '40px',
-    xl: '45px',
+    xl: '45px'
 };
 
 const borderRadiuses = {
@@ -14,7 +20,7 @@ const borderRadiuses = {
     sm: '3px',
     md: '4px',
     lg: '6px',
-    xl: '8px',
+    xl: '8px'
 };
 
 const padding = {
@@ -22,8 +28,8 @@ const padding = {
     sm: `0 ${themeVars.space[2]}`,
     md: `0 ${themeVars.space[3]}`,
     lg: `0 ${themeVars.space[3]}`,
-    xl: `0 ${themeVars.space[4]}`,
-}
+    xl: `0 ${themeVars.space[4]}`
+};
 
 export const vars = {
     height: createVar(),
@@ -32,15 +38,15 @@ export const vars = {
     backgroundColor: createVar(),
     borderColor: createVar(),
     boxShadowColor: createVar(),
-    color: createVar(),
-}
+    color: createVar()
+};
 
 export const base = style({
     alignItems: 'center',
     boxSizing: 'border-box',
     display: 'inline-flex',
     fontSize: themeVars.fontSize.base,
-    fontWeight: "500",
+    fontWeight: '500',
     maxWidth: '100%',
     width: 'auto',
     position: 'relative',
@@ -53,7 +59,7 @@ export const base = style({
     lineHeight: vars.height,
     borderRadius: vars.radius,
     padding: vars.padding,
-    zIndex: "auto",
+    zIndex: 'auto',
     backgroundColor: vars.backgroundColor,
     border: 0,
     color: vars.color,
@@ -63,10 +69,10 @@ export const base = style({
         border-color .25s ${themeVars.transition.default}`,
     fontFamily: 'inherit',
     ':hover': {
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     ':focus': {
-        outline: 'none',
+        outline: 'none'
     }
 });
 
@@ -76,18 +82,18 @@ export const variant = styleVariants({
             [vars.backgroundColor]: themeVars.color.blue[500],
             [vars.borderColor]: themeVars.color.blue[500],
             [vars.boxShadowColor]: themeVars.color.blue[500],
-            [vars.color]: '#FFFFFF',
+            [vars.color]: '#FFFFFF'
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.blue[600],
-                [vars.borderColor]: themeVars.color.blue[600],
-            },
+                [vars.borderColor]: themeVars.color.blue[600]
+            }
         },
         ':focus': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.blue[600],
-                [vars.borderColor]: themeVars.color.blue[600],
+                [vars.borderColor]: themeVars.color.blue[600]
             }
         }
     },
@@ -96,18 +102,18 @@ export const variant = styleVariants({
             [vars.backgroundColor]: themeVars.color.saxe[700],
             [vars.borderColor]: themeVars.color.saxe[700],
             [vars.boxShadowColor]: themeVars.color.saxe[700],
-            [vars.color]: '#FFFFFF',
+            [vars.color]: '#FFFFFF'
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.saxe[800],
-                [vars.borderColor]: themeVars.color.saxe[800],
-            },
+                [vars.borderColor]: themeVars.color.saxe[800]
+            }
         },
         ':focus': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.saxe[900],
-                [vars.borderColor]: themeVars.color.saxe[900],
+                [vars.borderColor]: themeVars.color.saxe[900]
             }
         }
     },
@@ -116,18 +122,18 @@ export const variant = styleVariants({
             [vars.color]: themeVars.color.font.text,
             [vars.backgroundColor]: 'white',
             [vars.boxShadowColor]: themeVars.color.blue[500],
-            [vars.borderColor]: themeVars.color.gray[300],
+            [vars.borderColor]: themeVars.color.gray[300]
         },
         ':hover': {
             vars: {
                 [vars.color]: themeVars.color.blue[500],
                 [vars.borderColor]: themeVars.color.blue[500]
-            },
+            }
         },
         ':focus': {
             vars: {
                 [vars.color]: themeVars.color.blue[500],
-                [vars.borderColor]: themeVars.color.blue[500],
+                [vars.borderColor]: themeVars.color.blue[500]
             }
         }
     },
@@ -136,14 +142,14 @@ export const variant = styleVariants({
             [vars.color]: themeVars.color.font.default,
             [vars.backgroundColor]: themeVars.color.gray[100],
             [vars.boxShadowColor]: themeVars.color.blue[100],
-            [vars.borderColor]: themeVars.color.gray[300],
+            [vars.borderColor]: themeVars.color.gray[300]
         },
         ':hover': {
             vars: {
                 [vars.color]: themeVars.color.font.default,
                 [vars.backgroundColor]: themeVars.color.gray[250],
                 [vars.borderColor]: themeVars.color.gray[300]
-            },
+            }
         },
         ':focus': {
             vars: {
@@ -158,19 +164,19 @@ export const variant = styleVariants({
             [vars.backgroundColor]: themeVars.color.green[500],
             [vars.borderColor]: themeVars.color.green[500],
             [vars.boxShadowColor]: themeVars.color.green[500],
-            [vars.color]: '#FFFFFF',
+            [vars.color]: '#FFFFFF'
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.green[600],
                 [vars.borderColor]: themeVars.color.green[600],
-                [vars.color]: '#FFFFFF',
-            },
+                [vars.color]: '#FFFFFF'
+            }
         },
         ':focus': {
             vars: {
                 [vars.borderColor]: themeVars.color.green[600],
-                [vars.backgroundColor]: themeVars.color.green[600],
+                [vars.backgroundColor]: themeVars.color.green[600]
             }
         }
     },
@@ -179,19 +185,19 @@ export const variant = styleVariants({
             [vars.backgroundColor]: themeVars.color.amber[400],
             [vars.borderColor]: themeVars.color.amber[400],
             [vars.boxShadowColor]: themeVars.color.amber[400],
-            [vars.color]: themeVars.color.gray[800],
+            [vars.color]: themeVars.color.gray[800]
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.amber[500],
                 [vars.borderColor]: themeVars.color.amber[500],
-                [vars.color]: themeVars.color.gray[900],
-            },
+                [vars.color]: themeVars.color.gray[900]
+            }
         },
         ':focus': {
             vars: {
                 [vars.borderColor]: themeVars.color.amber[500],
-                [vars.backgroundColor]: themeVars.color.amber[500],
+                [vars.backgroundColor]: themeVars.color.amber[500]
             }
         }
     },
@@ -200,21 +206,21 @@ export const variant = styleVariants({
             [vars.backgroundColor]: themeVars.color.red[500],
             [vars.borderColor]: themeVars.color.red[500],
             [vars.boxShadowColor]: themeVars.color.red[500],
-            [vars.color]: '#FFFFFF',
+            [vars.color]: '#FFFFFF'
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.red[600],
-                [vars.borderColor]: themeVars.color.red[600],
-            },
+                [vars.borderColor]: themeVars.color.red[600]
+            }
         },
         ':focus': {
             vars: {
                 [vars.borderColor]: themeVars.color.red[600],
-                [vars.backgroundColor]: themeVars.color.red[600],
+                [vars.backgroundColor]: themeVars.color.red[600]
             }
         }
-    },
+    }
 });
 
 export const secondary = styleVariants({
@@ -222,149 +228,149 @@ export const secondary = styleVariants({
         vars: {
             [vars.backgroundColor]: themeVars.color.blue[100],
             [vars.borderColor]: themeVars.color.blue[100],
-            [vars.color]: themeVars.color.blue[500],
+            [vars.color]: themeVars.color.blue[500]
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.blue[200],
                 [vars.borderColor]: themeVars.color.blue[200],
-                [vars.color]: themeVars.color.blue[600],
-            },
+                [vars.color]: themeVars.color.blue[600]
+            }
         },
         ':focus': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.blue[200],
                 [vars.borderColor]: themeVars.color.blue[200],
-                [vars.color]: themeVars.color.blue[600],
-            },
+                [vars.color]: themeVars.color.blue[600]
+            }
         }
     },
     dark: {
         vars: {
             [vars.backgroundColor]: themeVars.color.saxe[100],
             [vars.borderColor]: themeVars.color.saxe[100],
-            [vars.color]: themeVars.color.saxe[700],
+            [vars.color]: themeVars.color.saxe[700]
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.saxe[200],
                 [vars.borderColor]: themeVars.color.saxe[200],
-                [vars.color]: themeVars.color.saxe[800],
-            },
+                [vars.color]: themeVars.color.saxe[800]
+            }
         },
         ':focus': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.saxe[200],
                 [vars.borderColor]: themeVars.color.saxe[200],
-                [vars.color]: themeVars.color.saxe[800],
-            },
+                [vars.color]: themeVars.color.saxe[800]
+            }
         }
     },
     default: {
         vars: {
             [vars.backgroundColor]: themeVars.color.gray[100],
             [vars.borderColor]: themeVars.color.gray[100],
-            [vars.color]: themeVars.color.gray[500],
+            [vars.color]: themeVars.color.gray[500]
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.gray[200],
                 [vars.borderColor]: themeVars.color.gray[200],
-                [vars.color]: themeVars.color.gray[600],
-            },
+                [vars.color]: themeVars.color.gray[600]
+            }
         },
         ':focus': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.gray[200],
                 [vars.borderColor]: themeVars.color.gray[200],
-                [vars.color]: themeVars.color.gray[600],
-            },
+                [vars.color]: themeVars.color.gray[600]
+            }
         }
     },
     tertiary: {
         vars: {
             [vars.backgroundColor]: themeVars.color.gray[100],
             [vars.borderColor]: themeVars.color.gray[100],
-            [vars.color]: themeVars.color.gray[400],
+            [vars.color]: themeVars.color.gray[400]
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.gray[200],
                 [vars.borderColor]: themeVars.color.gray[200],
-                [vars.color]: themeVars.color.gray[500],
-            },
+                [vars.color]: themeVars.color.gray[500]
+            }
         },
         ':focus': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.gray[200],
                 [vars.borderColor]: themeVars.color.gray[200],
-                [vars.color]: themeVars.color.gray[500],
-            },
+                [vars.color]: themeVars.color.gray[500]
+            }
         }
     },
     success: {
         vars: {
             [vars.backgroundColor]: themeVars.color.green[100],
             [vars.borderColor]: themeVars.color.green[100],
-            [vars.color]: themeVars.color.green[600],
+            [vars.color]: themeVars.color.green[600]
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.green[200],
                 [vars.borderColor]: themeVars.color.green[200],
-                [vars.color]: themeVars.color.green[700],
-            },
+                [vars.color]: themeVars.color.green[700]
+            }
         },
         ':focus': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.green[200],
                 [vars.borderColor]: themeVars.color.green[200],
-                [vars.color]: themeVars.color.green[700],
-            },
+                [vars.color]: themeVars.color.green[700]
+            }
         }
     },
     warning: {
         vars: {
             [vars.backgroundColor]: themeVars.color.amber[100],
             [vars.borderColor]: themeVars.color.amber[100],
-            [vars.color]: themeVars.color.amber[600],
+            [vars.color]: themeVars.color.amber[600]
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.amber[200],
                 [vars.borderColor]: themeVars.color.amber[200],
-                [vars.color]: themeVars.color.amber[700],
-            },
+                [vars.color]: themeVars.color.amber[700]
+            }
         },
         ':focus': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.amber[200],
                 [vars.borderColor]: themeVars.color.amber[200],
-                [vars.color]: themeVars.color.amber[700],
-            },
+                [vars.color]: themeVars.color.amber[700]
+            }
         }
     },
     error: {
         vars: {
             [vars.backgroundColor]: themeVars.color.red[100],
             [vars.borderColor]: themeVars.color.red[100],
-            [vars.color]: themeVars.color.red[500],
+            [vars.color]: themeVars.color.red[500]
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.red[200],
                 [vars.borderColor]: themeVars.color.red[200],
-                [vars.color]: themeVars.color.red[600],
-            },
+                [vars.color]: themeVars.color.red[600]
+            }
         },
         ':focus': {
             vars: {
                 [vars.backgroundColor]: themeVars.color.red[200],
                 [vars.borderColor]: themeVars.color.red[200],
-                [vars.color]: themeVars.color.red[600],
-            },
+                [vars.color]: themeVars.color.red[600]
+            }
         }
-    },
+    }
 });
 
 export const link = styleVariants({
@@ -372,107 +378,107 @@ export const link = styleVariants({
         vars: {
             [vars.backgroundColor]: 'transparent',
             [vars.borderColor]: 'transparent',
-            [vars.color]: themeVars.color.blue[500],
+            [vars.color]: themeVars.color.blue[500]
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: 'transparent',
                 [vars.borderColor]: 'transparent',
-                [vars.color]: themeVars.color.blue[600],
+                [vars.color]: themeVars.color.blue[600]
             },
-            textDecoration: 'underline',
+            textDecoration: 'underline'
         }
     },
     dark: {
         vars: {
             [vars.backgroundColor]: 'transparent',
             [vars.borderColor]: 'transparent',
-            [vars.color]: themeVars.color.saxe[800],
+            [vars.color]: themeVars.color.saxe[800]
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: 'transparent',
                 [vars.borderColor]: 'transparent',
-                [vars.color]: themeVars.color.saxe[900],
+                [vars.color]: themeVars.color.saxe[900]
             },
-            textDecoration: 'underline',
+            textDecoration: 'underline'
         }
     },
     default: {
         vars: {
             [vars.backgroundColor]: 'transparent',
             [vars.borderColor]: 'transparent',
-            [vars.color]: themeVars.color.gray[500],
+            [vars.color]: themeVars.color.gray[500]
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: 'transparent',
                 [vars.borderColor]: 'transparent',
-                [vars.color]: themeVars.color.gray[600],
+                [vars.color]: themeVars.color.gray[600]
             },
-            textDecoration: 'underline',
-        }                
+            textDecoration: 'underline'
+        }
     },
     tertiary: {
         vars: {
             [vars.backgroundColor]: 'transparent',
             [vars.borderColor]: 'transparent',
-            [vars.color]: themeVars.color.gray[400],
+            [vars.color]: themeVars.color.gray[400]
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: 'transparent',
                 [vars.borderColor]: 'transparent',
-                [vars.color]: themeVars.color.gray[500],
+                [vars.color]: themeVars.color.gray[500]
             },
-            textDecoration: 'underline',
-        }     
+            textDecoration: 'underline'
+        }
     },
     success: {
         vars: {
             [vars.backgroundColor]: 'transparent',
             [vars.borderColor]: 'transparent',
-            [vars.color]: themeVars.color.green[500],
+            [vars.color]: themeVars.color.green[500]
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: 'transparent',
                 [vars.borderColor]: 'transparent',
-                [vars.color]: themeVars.color.green[600],
+                [vars.color]: themeVars.color.green[600]
             },
-            textDecoration: 'underline',
+            textDecoration: 'underline'
         }
     },
     warning: {
         vars: {
             [vars.backgroundColor]: 'transparent',
             [vars.borderColor]: 'transparent',
-            [vars.color]: themeVars.color.amber[600],
+            [vars.color]: themeVars.color.amber[600]
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: 'transparent',
                 [vars.borderColor]: 'transparent',
-                [vars.color]: themeVars.color.amber[700],
+                [vars.color]: themeVars.color.amber[700]
             },
-            textDecoration: 'underline',
+            textDecoration: 'underline'
         }
     },
     error: {
         vars: {
             [vars.backgroundColor]: 'transparent',
             [vars.borderColor]: 'transparent',
-            [vars.color]: themeVars.color.red[500],
+            [vars.color]: themeVars.color.red[500]
         },
         ':hover': {
             vars: {
                 [vars.backgroundColor]: 'transparent',
                 [vars.borderColor]: 'transparent',
-                [vars.color]: themeVars.color.red[600],
+                [vars.color]: themeVars.color.red[600]
             },
-            textDecoration: 'underline',
+            textDecoration: 'underline'
         }
-    },
+    }
 });
 
 export const size = styleVariants({
@@ -480,41 +486,41 @@ export const size = styleVariants({
         vars: {
             [vars.height]: sizes.xs,
             [vars.radius]: borderRadiuses.xs,
-            [vars.padding]: padding.xs,
+            [vars.padding]: padding.xs
         },
-        fontSize: themeVars.fontSize.small,
+        fontSize: themeVars.fontSize.small
     },
     sm: {
         vars: {
             [vars.height]: sizes.sm,
             [vars.radius]: borderRadiuses.sm,
-            [vars.padding]: padding.sm,
+            [vars.padding]: padding.sm
         },
-        fontSize: themeVars.fontSize.small,
+        fontSize: themeVars.fontSize.small
     },
     md: {
         vars: {
             [vars.height]: sizes.md,
             [vars.radius]: borderRadiuses.md,
-            [vars.padding]: padding.md,
-        },
+            [vars.padding]: padding.md
+        }
     },
     lg: {
         vars: {
             [vars.height]: sizes.lg,
             [vars.radius]: borderRadiuses.lg,
-            [vars.padding]: padding.lg,
+            [vars.padding]: padding.lg
         },
-        fontSize: themeVars.fontSize.large,
+        fontSize: themeVars.fontSize.large
     },
     xl: {
         vars: {
             [vars.height]: sizes.xl,
             [vars.radius]: borderRadiuses.xl,
-            [vars.padding]: padding.xl,
+            [vars.padding]: padding.xl
         },
-        fontSize: themeVars.fontSize.large,
-    },
+        fontSize: themeVars.fontSize.large
+    }
 });
 
 const baseBorder = style({
@@ -525,13 +531,13 @@ const baseBorder = style({
     right: 0,
     pointerEvents: 'none',
     borderRadius: 'inherit',
-    transition: 'border-color 0.2s ease-in-out',
+    transition: 'border-color 0.2s ease-in-out'
 });
 
 export const border = style([
     baseBorder,
     {
-        border: `1px solid ${vars.borderColor}`,
+        border: `1px solid ${vars.borderColor}`
     }
 ]);
 
@@ -544,11 +550,11 @@ export const borderState = style([
 ]);
 
 globalStyle(`${base}:hover ${border}, ${base}:focus ${border}`, {
-    borderColor: "transparent",
+    borderColor: 'transparent'
 });
 
 globalStyle(`${base}:hover ${borderState}, ${base}:focus ${borderState}`, {
-    borderColor: vars.borderColor,
+    borderColor: vars.borderColor
 });
 
 export const wave = style({
@@ -562,16 +568,17 @@ export const wave = style({
     animationIterationCount: 1,
     animationDuration: '0.5s',
     zIndex: 1,
-    animationTimingFunction: 'cubic-bezier(0.4, 0, 0.15, 1), cubic-bezier(0.4, 0, 0.4, 1)',
+    animationTimingFunction:
+        'cubic-bezier(0.4, 0, 0.15, 1), cubic-bezier(0.4, 0, 0.4, 1)'
 });
 
 const buttonWaveGrow = 'button-wave-grow';
 
 globalKeyframes(buttonWaveGrow, {
-    'from': {
+    from: {
         boxShadow: `0 0 0.5px 0 ${vars.boxShadowColor}`
     },
-    'to': {
+    to: {
         boxShadow: `0 0 0.5px 4.4px ${vars.boxShadowColor}`
     }
 });
@@ -592,7 +599,7 @@ globalKeyframes(buttonWaveOpacity, {
 
 export const waveActive = style({
     zIndex: 1,
-    animationName: `${buttonWaveGrow}, ${buttonWaveOpacity}`,
+    animationName: `${buttonWaveGrow}, ${buttonWaveOpacity}`
 });
 
 export const iconButton = style({
@@ -604,7 +611,7 @@ export const iconButton = style({
     userSelect: 'none',
     padding: 'initial',
     height: vars.height,
-    width: vars.height,
+    width: vars.height
 });
 
 export const icon = style({
@@ -624,45 +631,48 @@ globalStyle(`${icon} > svg`, {
     verticalAlign: 'middle'
 });
 
-export const iconLeft = style([icon, {
-    marginRight: themeVars.space[2],
-    position: 'relative'
-}]);
+export const iconLeft = style([
+    icon,
+    {
+        marginRight: themeVars.space[2],
+        position: 'relative'
+    }
+]);
 
 export const iconRight = style({
-    marginLeft: themeVars.space[2],
+    marginLeft: themeVars.space[2]
 });
 
 export const rounded = style({
-    borderRadius: '9999px',
+    borderRadius: '9999px'
 });
 
 export const block = style({
     display: 'flex',
-    width: '100%',
+    width: '100%'
 });
 
 const spinAround = 'spin-around';
 
 globalKeyframes(spinAround, {
     '0%': {
-        transform: "rotate(0deg)"
+        transform: 'rotate(0deg)'
     },
     '100%': {
-        transform: "rotate(360deg)"
+        transform: 'rotate(360deg)'
     }
 });
 
 export const loading = style({
     pointerEvents: 'none',
-    color: "transparent",
+    color: 'transparent',
     userSelect: 'none',
     opacity: 0.75,
     selectors: {
         [`&:after`]: {
-            transition: "all 0.2s ease-in-out",
-            position: "absolute",
-            animationIterationCount: "infinite",
+            transition: 'all 0.2s ease-in-out',
+            position: 'absolute',
+            animationIterationCount: 'infinite',
             animationDuration: '0.75s',
             animationTimingFunction: 'cubic-bezier(0.8, 0.5, 0.4, 0)',
             animationName: spinAround,
@@ -670,10 +680,10 @@ export const loading = style({
             borderColor: `transparent transparent ${vars.color} ${vars.color}`,
             borderStyle: `solid`,
             borderWidth: `2px`,
-            content: "",
+            content: '',
             display: `block`,
             height: `1em`,
-            width: `1em`,
+            width: `1em`
         }
     }
 });