@teammodlr/ui-kit 2.1.41 → 2.1.44

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

@@ -1,695 +1,695 @@
-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'
-};
-
-const borderRadiuses = {
-    xs: '2px',
-    sm: '3px',
-    md: '4px',
-    lg: '6px',
-    xl: '8px'
-};
-
-const padding = {
-    xs: `0 ${themeVars.space[1]}`,
-    sm: `0 ${themeVars.space[2]}`,
-    md: `0 ${themeVars.space[3]}`,
-    lg: `0 ${themeVars.space[3]}`,
-    xl: `0 ${themeVars.space[4]}`
-};
-
-export const vars = {
-    height: createVar(),
-    radius: createVar(),
-    padding: createVar(),
-    backgroundColor: createVar(),
-    borderColor: createVar(),
-    boxShadowColor: createVar(),
-    color: createVar()
-};
-
-export const base = style({
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    display: 'inline-flex',
-    fontSize: themeVars.fontSize.base,
-    fontWeight: '500',
-    maxWidth: '100%',
-    width: 'auto',
-    position: 'relative',
-    textAlign: 'center',
-    textDecoration: 'none',
-    verticalAlign: 'middle',
-    whiteSpace: 'nowrap',
-    justifyContent: 'center',
-    height: vars.height,
-    lineHeight: vars.height,
-    borderRadius: vars.radius,
-    padding: vars.padding,
-    zIndex: 'auto',
-    backgroundColor: vars.backgroundColor,
-    border: 0,
-    color: vars.color,
-    transition: `color .2s ${themeVars.transition.default},
-        background-color .25s ${themeVars.transition.default},
-        box-shadow .25s ${themeVars.transition.default},
-        border-color .25s ${themeVars.transition.default}`,
-    fontFamily: 'inherit',
-    ':hover': {
-        cursor: 'pointer'
-    },
-    ':focus': {
-        outline: 'none'
-    },
-    selectors: {
-        [`a&:hover`]: {
-            textDecoration: 'none',
-            color: vars.color
-        }
-    }
-});
-
-export const variant = styleVariants({
-    primary: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.blue[500],
-            [vars.borderColor]: themeVars.color.blue[500],
-            [vars.boxShadowColor]: themeVars.color.blue[500],
-            [vars.color]: '#FFFFFF'
-        },
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.blue[600],
-                [vars.borderColor]: themeVars.color.blue[600]
-            }
-        },
-        ':focus': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.blue[600],
-                [vars.borderColor]: themeVars.color.blue[600]
-            }
-        }
-    },
-    dark: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.saxe[700],
-            [vars.borderColor]: themeVars.color.saxe[700],
-            [vars.boxShadowColor]: themeVars.color.saxe[700],
-            [vars.color]: '#FFFFFF'
-        },
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.saxe[800],
-                [vars.borderColor]: themeVars.color.saxe[800]
-            }
-        },
-        ':focus': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.saxe[900],
-                [vars.borderColor]: themeVars.color.saxe[900]
-            }
-        }
-    },
-    default: {
-        vars: {
-            [vars.color]: themeVars.color.font.text,
-            [vars.backgroundColor]: 'white',
-            [vars.boxShadowColor]: themeVars.color.blue[500],
-            [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]
-            }
-        }
-    },
-    tertiary: {
-        vars: {
-            [vars.color]: themeVars.color.font.default,
-            [vars.backgroundColor]: themeVars.color.gray[100],
-            [vars.boxShadowColor]: themeVars.color.blue[100],
-            [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: {
-                [vars.color]: themeVars.color.font.text,
-                [vars.backgroundColor]: themeVars.color.gray[200],
-                [vars.borderColor]: themeVars.color.gray[300]
-            }
-        }
-    },
-    success: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.green[500],
-            [vars.borderColor]: themeVars.color.green[500],
-            [vars.boxShadowColor]: themeVars.color.green[500],
-            [vars.color]: '#FFFFFF'
-        },
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.green[600],
-                [vars.borderColor]: themeVars.color.green[600],
-                [vars.color]: '#FFFFFF'
-            }
-        },
-        ':focus': {
-            vars: {
-                [vars.borderColor]: themeVars.color.green[600],
-                [vars.backgroundColor]: themeVars.color.green[600]
-            }
-        }
-    },
-    warning: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.amber[400],
-            [vars.borderColor]: themeVars.color.amber[400],
-            [vars.boxShadowColor]: themeVars.color.amber[400],
-            [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]
-            }
-        },
-        ':focus': {
-            vars: {
-                [vars.borderColor]: themeVars.color.amber[500],
-                [vars.backgroundColor]: themeVars.color.amber[500]
-            }
-        }
-    },
-    error: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.red[500],
-            [vars.borderColor]: themeVars.color.red[500],
-            [vars.boxShadowColor]: themeVars.color.red[500],
-            [vars.color]: '#FFFFFF'
-        },
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.red[600],
-                [vars.borderColor]: themeVars.color.red[600]
-            }
-        },
-        ':focus': {
-            vars: {
-                [vars.borderColor]: themeVars.color.red[600],
-                [vars.backgroundColor]: themeVars.color.red[600]
-            }
-        }
-    }
-});
-
-export const secondary = styleVariants({
-    primary: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.blue[100],
-            [vars.borderColor]: themeVars.color.blue[100],
-            [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]
-            }
-        },
-        ':focus': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.blue[200],
-                [vars.borderColor]: themeVars.color.blue[200],
-                [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]
-        },
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.saxe[200],
-                [vars.borderColor]: themeVars.color.saxe[200],
-                [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]
-            }
-        }
-    },
-    default: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.gray[100],
-            [vars.borderColor]: themeVars.color.gray[100],
-            [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]
-            }
-        },
-        ':focus': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.gray[200],
-                [vars.borderColor]: themeVars.color.gray[200],
-                [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]
-        },
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.gray[200],
-                [vars.borderColor]: themeVars.color.gray[200],
-                [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]
-            }
-        }
-    },
-    success: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.green[100],
-            [vars.borderColor]: themeVars.color.green[100],
-            [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]
-            }
-        },
-        ':focus': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.green[200],
-                [vars.borderColor]: themeVars.color.green[200],
-                [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]
-        },
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.amber[200],
-                [vars.borderColor]: themeVars.color.amber[200],
-                [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]
-            }
-        }
-    },
-    error: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.red[100],
-            [vars.borderColor]: themeVars.color.red[100],
-            [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]
-            }
-        },
-        ':focus': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.red[200],
-                [vars.borderColor]: themeVars.color.red[200],
-                [vars.color]: themeVars.color.red[600]
-            }
-        }
-    }
-});
-
-export const link = styleVariants({
-    primary: {
-        vars: {
-            [vars.backgroundColor]: 'transparent',
-            [vars.borderColor]: 'transparent',
-            [vars.color]: themeVars.color.blue[500]
-        },
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: 'transparent',
-                [vars.borderColor]: 'transparent',
-                [vars.color]: themeVars.color.blue[600]
-            },
-            textDecoration: 'underline'
-        }
-    },
-    dark: {
-        vars: {
-            [vars.backgroundColor]: 'transparent',
-            [vars.borderColor]: 'transparent',
-            [vars.color]: themeVars.color.saxe[800]
-        },
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: 'transparent',
-                [vars.borderColor]: 'transparent',
-                [vars.color]: themeVars.color.saxe[900]
-            },
-            textDecoration: 'underline'
-        }
-    },
-    default: {
-        vars: {
-            [vars.backgroundColor]: 'transparent',
-            [vars.borderColor]: 'transparent',
-            [vars.color]: themeVars.color.gray[500]
-        },
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: 'transparent',
-                [vars.borderColor]: 'transparent',
-                [vars.color]: themeVars.color.gray[600]
-            },
-            textDecoration: 'underline'
-        }
-    },
-    tertiary: {
-        vars: {
-            [vars.backgroundColor]: 'transparent',
-            [vars.borderColor]: 'transparent',
-            [vars.color]: themeVars.color.gray[400]
-        },
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: 'transparent',
-                [vars.borderColor]: 'transparent',
-                [vars.color]: themeVars.color.gray[500]
-            },
-            textDecoration: 'underline'
-        }
-    },
-    success: {
-        vars: {
-            [vars.backgroundColor]: 'transparent',
-            [vars.borderColor]: 'transparent',
-            [vars.color]: themeVars.color.green[500]
-        },
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: 'transparent',
-                [vars.borderColor]: 'transparent',
-                [vars.color]: themeVars.color.green[600]
-            },
-            textDecoration: 'underline'
-        }
-    },
-    warning: {
-        vars: {
-            [vars.backgroundColor]: 'transparent',
-            [vars.borderColor]: 'transparent',
-            [vars.color]: themeVars.color.amber[600]
-        },
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: 'transparent',
-                [vars.borderColor]: 'transparent',
-                [vars.color]: themeVars.color.amber[700]
-            },
-            textDecoration: 'underline'
-        }
-    },
-    error: {
-        vars: {
-            [vars.backgroundColor]: 'transparent',
-            [vars.borderColor]: 'transparent',
-            [vars.color]: themeVars.color.red[500]
-        },
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: 'transparent',
-                [vars.borderColor]: 'transparent',
-                [vars.color]: themeVars.color.red[600]
-            },
-            textDecoration: 'underline'
-        }
-    }
-});
-
-export const size = styleVariants({
-    xs: {
-        vars: {
-            [vars.height]: sizes.xs,
-            [vars.radius]: borderRadiuses.xs,
-            [vars.padding]: padding.xs
-        },
-        fontSize: themeVars.fontSize.small
-    },
-    sm: {
-        vars: {
-            [vars.height]: sizes.sm,
-            [vars.radius]: borderRadiuses.sm,
-            [vars.padding]: padding.sm
-        },
-        fontSize: themeVars.fontSize.small
-    },
-    md: {
-        vars: {
-            [vars.height]: sizes.md,
-            [vars.radius]: borderRadiuses.md,
-            [vars.padding]: padding.md
-        }
-    },
-    lg: {
-        vars: {
-            [vars.height]: sizes.lg,
-            [vars.radius]: borderRadiuses.lg,
-            [vars.padding]: padding.lg
-        },
-        fontSize: themeVars.fontSize.large
-    },
-    xl: {
-        vars: {
-            [vars.height]: sizes.xl,
-            [vars.radius]: borderRadiuses.xl,
-            [vars.padding]: padding.xl
-        },
-        fontSize: themeVars.fontSize.large
-    }
-});
-
-const baseBorder = style({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-    pointerEvents: 'none',
-    borderRadius: 'inherit',
-    transition: 'border-color 0.2s ease-in-out'
-});
-
-export const border = style([
-    baseBorder,
-    {
-        border: `1px solid ${vars.borderColor}`
-    }
-]);
-
-export const borderState = style([
-    baseBorder,
-    {
-        border: `1px solid transparent`,
-        zIndex: 1
-    }
-]);
-
-globalStyle(`${base}:hover ${border}, ${base}:focus ${border}`, {
-    borderColor: 'transparent'
-});
-
-globalStyle(`${base}:hover ${borderState}, ${base}:focus ${borderState}`, {
-    borderColor: vars.borderColor
-});
-
-export const wave = style({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-    pointerEvents: 'none',
-    borderRadius: 'inherit',
-    animationIterationCount: 1,
-    animationDuration: '0.5s',
-    zIndex: 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: {
-        boxShadow: `0 0 0.5px 0 ${vars.boxShadowColor}`
-    },
-    to: {
-        boxShadow: `0 0 0.5px 4.4px ${vars.boxShadowColor}`
-    }
-});
-
-const buttonWaveOpacity = 'button-wave-opacity';
-
-globalKeyframes(buttonWaveOpacity, {
-    '0%': {
-        opacity: 0.5
-    },
-    '90%': {
-        opacity: 0
-    },
-    '100%': {
-        opacity: 0
-    }
-});
-
-export const waveActive = style({
-    zIndex: 1,
-    animationName: `${buttonWaveGrow}, ${buttonWaveOpacity}`
-});
-
-export const iconButton = style({
-    display: 'flex',
-    flexGrow: 0,
-    flexShrink: 0,
-    fontSize: 0,
-    lineHeight: 0,
-    userSelect: 'none',
-    padding: 'initial',
-    height: vars.height,
-    width: vars.height
-});
-
-export const icon = style({
-    display: 'flex',
-    flexGrow: 0,
-    flexShrink: 0,
-    fontSize: 0,
-    lineHeight: 0,
-    userSelect: 'none'
-});
-
-globalStyle(`${icon} > svg`, {
-    overflow: 'hidden',
-    pointerEvents: 'none',
-    maxWidth: '100%',
-    maxHeight: '100%',
-    verticalAlign: 'middle'
-});
-
-export const iconLeft = style([
-    icon,
-    {
-        marginRight: themeVars.space[2],
-        position: 'relative'
-    }
-]);
-
-export const iconRight = style({
-    marginLeft: themeVars.space[2]
-});
-
-export const rounded = style({
-    borderRadius: '9999px'
-});
-
-export const block = style({
-    display: 'flex',
-    width: '100%'
-});
-
-const spinAround = 'spin-around';
-
-globalKeyframes(spinAround, {
-    '0%': {
-        transform: 'rotate(0deg)'
-    },
-    '100%': {
-        transform: 'rotate(360deg)'
-    }
-});
-
-export const loading = style({
-    pointerEvents: 'none',
-    color: 'transparent',
-    userSelect: 'none',
-    opacity: 0.75,
-    selectors: {
-        [`&:after`]: {
-            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,
-            borderRadius: themeVars.rounded.full,
-            borderColor: `transparent transparent ${vars.color} ${vars.color}`,
-            borderStyle: `solid`,
-            borderWidth: `2px`,
-            content: '',
-            display: `block`,
-            height: `1em`,
-            width: `1em`
-        }
-    }
-});
+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'
+};
+
+const borderRadiuses = {
+    xs: '2px',
+    sm: '3px',
+    md: '4px',
+    lg: '6px',
+    xl: '8px'
+};
+
+const padding = {
+    xs: `0 ${themeVars.space[1]}`,
+    sm: `0 ${themeVars.space[2]}`,
+    md: `0 ${themeVars.space[3]}`,
+    lg: `0 ${themeVars.space[3]}`,
+    xl: `0 ${themeVars.space[4]}`
+};
+
+export const vars = {
+    height: createVar(),
+    radius: createVar(),
+    padding: createVar(),
+    backgroundColor: createVar(),
+    borderColor: createVar(),
+    boxShadowColor: createVar(),
+    color: createVar()
+};
+
+export const base = style({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    fontSize: themeVars.fontSize.base,
+    fontWeight: '500',
+    maxWidth: '100%',
+    width: 'auto',
+    position: 'relative',
+    textAlign: 'center',
+    textDecoration: 'none',
+    verticalAlign: 'middle',
+    whiteSpace: 'nowrap',
+    justifyContent: 'center',
+    height: vars.height,
+    lineHeight: vars.height,
+    borderRadius: vars.radius,
+    padding: vars.padding,
+    zIndex: 'auto',
+    backgroundColor: vars.backgroundColor,
+    border: 0,
+    color: vars.color,
+    transition: `color .2s ${themeVars.transition.default},
+        background-color .25s ${themeVars.transition.default},
+        box-shadow .25s ${themeVars.transition.default},
+        border-color .25s ${themeVars.transition.default}`,
+    fontFamily: 'inherit',
+    ':hover': {
+        cursor: 'pointer'
+    },
+    ':focus': {
+        outline: 'none'
+    },
+    selectors: {
+        [`a&:hover`]: {
+            textDecoration: 'none',
+            color: vars.color
+        }
+    }
+});
+
+export const variant = styleVariants({
+    primary: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.blue[500],
+            [vars.borderColor]: themeVars.color.blue[500],
+            [vars.boxShadowColor]: themeVars.color.blue[500],
+            [vars.color]: '#FFFFFF'
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.blue[600],
+                [vars.borderColor]: themeVars.color.blue[600]
+            }
+        },
+        ':focus': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.blue[600],
+                [vars.borderColor]: themeVars.color.blue[600]
+            }
+        }
+    },
+    dark: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.saxe[700],
+            [vars.borderColor]: themeVars.color.saxe[700],
+            [vars.boxShadowColor]: themeVars.color.saxe[700],
+            [vars.color]: '#FFFFFF'
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.saxe[800],
+                [vars.borderColor]: themeVars.color.saxe[800]
+            }
+        },
+        ':focus': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.saxe[900],
+                [vars.borderColor]: themeVars.color.saxe[900]
+            }
+        }
+    },
+    default: {
+        vars: {
+            [vars.color]: themeVars.color.font.text,
+            [vars.backgroundColor]: 'white',
+            [vars.boxShadowColor]: themeVars.color.blue[500],
+            [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]
+            }
+        }
+    },
+    tertiary: {
+        vars: {
+            [vars.color]: themeVars.color.font.default,
+            [vars.backgroundColor]: themeVars.color.gray[100],
+            [vars.boxShadowColor]: themeVars.color.blue[100],
+            [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: {
+                [vars.color]: themeVars.color.font.text,
+                [vars.backgroundColor]: themeVars.color.gray[200],
+                [vars.borderColor]: themeVars.color.gray[300]
+            }
+        }
+    },
+    success: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.green[500],
+            [vars.borderColor]: themeVars.color.green[500],
+            [vars.boxShadowColor]: themeVars.color.green[500],
+            [vars.color]: '#FFFFFF'
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.green[600],
+                [vars.borderColor]: themeVars.color.green[600],
+                [vars.color]: '#FFFFFF'
+            }
+        },
+        ':focus': {
+            vars: {
+                [vars.borderColor]: themeVars.color.green[600],
+                [vars.backgroundColor]: themeVars.color.green[600]
+            }
+        }
+    },
+    warning: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.amber[400],
+            [vars.borderColor]: themeVars.color.amber[400],
+            [vars.boxShadowColor]: themeVars.color.amber[400],
+            [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]
+            }
+        },
+        ':focus': {
+            vars: {
+                [vars.borderColor]: themeVars.color.amber[500],
+                [vars.backgroundColor]: themeVars.color.amber[500]
+            }
+        }
+    },
+    error: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.red[500],
+            [vars.borderColor]: themeVars.color.red[500],
+            [vars.boxShadowColor]: themeVars.color.red[500],
+            [vars.color]: '#FFFFFF'
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.red[600],
+                [vars.borderColor]: themeVars.color.red[600]
+            }
+        },
+        ':focus': {
+            vars: {
+                [vars.borderColor]: themeVars.color.red[600],
+                [vars.backgroundColor]: themeVars.color.red[600]
+            }
+        }
+    }
+});
+
+export const secondary = styleVariants({
+    primary: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.blue[100],
+            [vars.borderColor]: themeVars.color.blue[100],
+            [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]
+            }
+        },
+        ':focus': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.blue[200],
+                [vars.borderColor]: themeVars.color.blue[200],
+                [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]
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.saxe[200],
+                [vars.borderColor]: themeVars.color.saxe[200],
+                [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]
+            }
+        }
+    },
+    default: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.gray[100],
+            [vars.borderColor]: themeVars.color.gray[100],
+            [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]
+            }
+        },
+        ':focus': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.gray[200],
+                [vars.borderColor]: themeVars.color.gray[200],
+                [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]
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.gray[200],
+                [vars.borderColor]: themeVars.color.gray[200],
+                [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]
+            }
+        }
+    },
+    success: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.green[100],
+            [vars.borderColor]: themeVars.color.green[100],
+            [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]
+            }
+        },
+        ':focus': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.green[200],
+                [vars.borderColor]: themeVars.color.green[200],
+                [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]
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.amber[200],
+                [vars.borderColor]: themeVars.color.amber[200],
+                [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]
+            }
+        }
+    },
+    error: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.red[100],
+            [vars.borderColor]: themeVars.color.red[100],
+            [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]
+            }
+        },
+        ':focus': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.red[200],
+                [vars.borderColor]: themeVars.color.red[200],
+                [vars.color]: themeVars.color.red[600]
+            }
+        }
+    }
+});
+
+export const link = styleVariants({
+    primary: {
+        vars: {
+            [vars.backgroundColor]: 'transparent',
+            [vars.borderColor]: 'transparent',
+            [vars.color]: themeVars.color.blue[500]
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: 'transparent',
+                [vars.borderColor]: 'transparent',
+                [vars.color]: themeVars.color.blue[600]
+            },
+            textDecoration: 'underline'
+        }
+    },
+    dark: {
+        vars: {
+            [vars.backgroundColor]: 'transparent',
+            [vars.borderColor]: 'transparent',
+            [vars.color]: themeVars.color.saxe[800]
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: 'transparent',
+                [vars.borderColor]: 'transparent',
+                [vars.color]: themeVars.color.saxe[900]
+            },
+            textDecoration: 'underline'
+        }
+    },
+    default: {
+        vars: {
+            [vars.backgroundColor]: 'transparent',
+            [vars.borderColor]: 'transparent',
+            [vars.color]: themeVars.color.gray[500]
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: 'transparent',
+                [vars.borderColor]: 'transparent',
+                [vars.color]: themeVars.color.gray[600]
+            },
+            textDecoration: 'underline'
+        }
+    },
+    tertiary: {
+        vars: {
+            [vars.backgroundColor]: 'transparent',
+            [vars.borderColor]: 'transparent',
+            [vars.color]: themeVars.color.gray[400]
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: 'transparent',
+                [vars.borderColor]: 'transparent',
+                [vars.color]: themeVars.color.gray[500]
+            },
+            textDecoration: 'underline'
+        }
+    },
+    success: {
+        vars: {
+            [vars.backgroundColor]: 'transparent',
+            [vars.borderColor]: 'transparent',
+            [vars.color]: themeVars.color.green[500]
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: 'transparent',
+                [vars.borderColor]: 'transparent',
+                [vars.color]: themeVars.color.green[600]
+            },
+            textDecoration: 'underline'
+        }
+    },
+    warning: {
+        vars: {
+            [vars.backgroundColor]: 'transparent',
+            [vars.borderColor]: 'transparent',
+            [vars.color]: themeVars.color.amber[600]
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: 'transparent',
+                [vars.borderColor]: 'transparent',
+                [vars.color]: themeVars.color.amber[700]
+            },
+            textDecoration: 'underline'
+        }
+    },
+    error: {
+        vars: {
+            [vars.backgroundColor]: 'transparent',
+            [vars.borderColor]: 'transparent',
+            [vars.color]: themeVars.color.red[500]
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: 'transparent',
+                [vars.borderColor]: 'transparent',
+                [vars.color]: themeVars.color.red[600]
+            },
+            textDecoration: 'underline'
+        }
+    }
+});
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.height]: sizes.xs,
+            [vars.radius]: borderRadiuses.xs,
+            [vars.padding]: padding.xs
+        },
+        fontSize: themeVars.fontSize.small
+    },
+    sm: {
+        vars: {
+            [vars.height]: sizes.sm,
+            [vars.radius]: borderRadiuses.sm,
+            [vars.padding]: padding.sm
+        },
+        fontSize: themeVars.fontSize.small
+    },
+    md: {
+        vars: {
+            [vars.height]: sizes.md,
+            [vars.radius]: borderRadiuses.md,
+            [vars.padding]: padding.md
+        }
+    },
+    lg: {
+        vars: {
+            [vars.height]: sizes.lg,
+            [vars.radius]: borderRadiuses.lg,
+            [vars.padding]: padding.lg
+        },
+        fontSize: themeVars.fontSize.large
+    },
+    xl: {
+        vars: {
+            [vars.height]: sizes.xl,
+            [vars.radius]: borderRadiuses.xl,
+            [vars.padding]: padding.xl
+        },
+        fontSize: themeVars.fontSize.large
+    }
+});
+
+const baseBorder = style({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    pointerEvents: 'none',
+    borderRadius: 'inherit',
+    transition: 'border-color 0.2s ease-in-out'
+});
+
+export const border = style([
+    baseBorder,
+    {
+        border: `1px solid ${vars.borderColor}`
+    }
+]);
+
+export const borderState = style([
+    baseBorder,
+    {
+        border: `1px solid transparent`,
+        zIndex: 1
+    }
+]);
+
+globalStyle(`${base}:hover ${border}, ${base}:focus ${border}`, {
+    borderColor: 'transparent'
+});
+
+globalStyle(`${base}:hover ${borderState}, ${base}:focus ${borderState}`, {
+    borderColor: vars.borderColor
+});
+
+export const wave = style({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    pointerEvents: 'none',
+    borderRadius: 'inherit',
+    animationIterationCount: 1,
+    animationDuration: '0.5s',
+    zIndex: 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: {
+        boxShadow: `0 0 0.5px 0 ${vars.boxShadowColor}`
+    },
+    to: {
+        boxShadow: `0 0 0.5px 4.4px ${vars.boxShadowColor}`
+    }
+});
+
+const buttonWaveOpacity = 'button-wave-opacity';
+
+globalKeyframes(buttonWaveOpacity, {
+    '0%': {
+        opacity: 0.5
+    },
+    '90%': {
+        opacity: 0
+    },
+    '100%': {
+        opacity: 0
+    }
+});
+
+export const waveActive = style({
+    zIndex: 1,
+    animationName: `${buttonWaveGrow}, ${buttonWaveOpacity}`
+});
+
+export const iconButton = style({
+    display: 'flex',
+    flexGrow: 0,
+    flexShrink: 0,
+    fontSize: 0,
+    lineHeight: 0,
+    userSelect: 'none',
+    padding: 'initial',
+    height: vars.height,
+    width: vars.height
+});
+
+export const icon = style({
+    display: 'flex',
+    flexGrow: 0,
+    flexShrink: 0,
+    fontSize: 0,
+    lineHeight: 0,
+    userSelect: 'none'
+});
+
+globalStyle(`${icon} > svg`, {
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    maxWidth: '100%',
+    maxHeight: '100%',
+    verticalAlign: 'middle'
+});
+
+export const iconLeft = style([
+    icon,
+    {
+        marginRight: themeVars.space[2],
+        position: 'relative'
+    }
+]);
+
+export const iconRight = style({
+    marginLeft: themeVars.space[2]
+});
+
+export const rounded = style({
+    borderRadius: '9999px'
+});
+
+export const block = style({
+    display: 'flex',
+    width: '100%'
+});
+
+const spinAround = 'spin-around';
+
+globalKeyframes(spinAround, {
+    '0%': {
+        transform: 'rotate(0deg)'
+    },
+    '100%': {
+        transform: 'rotate(360deg)'
+    }
+});
+
+export const loading = style({
+    pointerEvents: 'none',
+    color: 'transparent',
+    userSelect: 'none',
+    opacity: 0.75,
+    selectors: {
+        [`&:after`]: {
+            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,
+            borderRadius: themeVars.rounded.full,
+            borderColor: `transparent transparent ${vars.color} ${vars.color}`,
+            borderStyle: `solid`,
+            borderWidth: `2px`,
+            content: '',
+            display: `block`,
+            height: `1em`,
+            width: `1em`
+        }
+    }
+});