@lets-events/react 10.1.2 → 11.0.0

package/src/components/Button/styledComponents.ts

@@ -1,250 +1,275 @@
-import { Button as ButtonRadix } from '@radix-ui/themes'
-import { typographyButtonValues } from '../../types/typographyValues'
-
-import { styled } from "../../styles"
-
-export const ButtonStyled = styled(ButtonRadix, {
-    $$buttonColor: 'inherit',
-    $$buttonBgColor: '$colors$grey50',
-    $$buttonBorderColor: 'inherit',
-    $$buttonOutlinedColor: 'inherit',
-
-    fontFamily: '$default',
-    letterSpacing: 0,
-    border: 0,
-    transition: 'all 300ms ease-out',
-    cursor: 'pointer',
-    borderRadius: '$xs',
-    boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: '$10',
-    padding: '$6 $16',
-    '&:disabled': {
-        cursor: 'not-allowed',
-        transition: 'none',
-    },
-    variants: {
-        color: {
-            brand: {
-                $$buttonColor: '$colors$brand500',
-                $$buttonBorderColor: '$colors$brand600',
-                $$buttonOutlinedColor: '$$buttonColor',
-                '&:hover': {
-                    $$buttonColor: '$colors$brand600',
-                    $$buttonBorderColor: '$colors$brand700',
-                },
-                '&:focus': {
-                    $$buttonColor: '$colors$brand400',
-                    $$buttonBorderColor: '$colors$brand300',
-                    $$buttonBgColor: '$colors$grey200',
-                },
-                '&:active': {
-                    $$buttonColor: '$colors$brand500',
-                    $$buttonBorderColor: '$colors$brand700',
-                    $$buttonBgColor: '$colors$grey200',
-                },
-            },
-            purple: {
-                $$buttonColor: '$colors$purple500',
-                $$buttonBorderColor: '$colors$purple300',
-                $$buttonOutlinedColor: '$$buttonColor',
-                '&:hover': {
-                    $$buttonColor: '$colors$purple600',
-                    $$buttonBorderColor: '$colors$purple700',
-                    $$buttonOutlinedColor: '$colors$purple500',
-                    $$buttonBgColor: '$colors$purple50',
-                },
-                '&:focus': {
-                    $$buttonColor: '$colors$purple700',
-                    $$buttonOutlinedColor: '$colors$purple500',
-                    $$buttonBgColor: '$colors$purple200',
-                    $$buttonBorderColor: '$colors$purple400',
-                },
-                '&:active': {
-                    $$buttonColor: '$colors$purple500',
-                    $$buttonOutlinedColor: '$colors$purple500',
-                    $$buttonBgColor: '$colors$purple100',
-                    $$buttonBorderColor: '$colors$purple300',
-                },
-            },
-            error: {
-                $$buttonColor: '$colors$error600',
-                $$buttonBorderColor: '$colors$error500',
-                $$buttonOutlinedColor: ' $colors$error500',
-                '&:hover': {
-                    $$buttonColor: '$colors$error600',
-                    $$buttonBorderColor: '$colors$error700',
-                    $$buttonBgColor: '$colors$error50'
-                },
-                '&:focus': {
-                    $$buttonColor: '$colors$error400',
-                    $$buttonBorderColor: '$colors$error300',
-                    $$buttonBgColor: '$colors$error200'
-                },
-                '&:active': {
-                    $$buttonColor: '$colors$error700',
-                    $$buttonBorderColor: '$colors$error700',
-                    $$buttonBgColor: '$colors$re1050'
-                },
-            },
-            info: {
-                $$buttonColor: '$colors$info500',
-                $$buttonBorderColor: '$colors$info600',
-                $$buttonOutlinedColor: '$$buttonColor',
-                '&:hover': {
-                    $$buttonColor: '$colors$info600',
-                    $$buttonBorderColor: '$colors$info700',
-                    $$buttonBgColor: '$colors$info50'
-                },
-                '&:focus': {
-                    $$buttonColor: '$colors$info400',
-                    $$buttonBorderColor: '$colors$info600',
-                    $$buttonBgColor: '$colors$info200'
-                },
-                '&:active': {
-                    $$buttonColor: '$colors$info700',
-                    $$buttonBorderColor: '$colors$info700',
-                    $$buttonBgColor: '$colors$info100'
-                },
-            },
-            success: {
-                $$buttonColor: '$colors$success500',
-                $$buttonBorderColor: '$colors$success600',
-                $$buttonOutlinedColor: '$$buttonColor',
-                '&:hover': {
-                    $$buttonColor: '$colors$success600',
-                    $$buttonBorderColor: '$colors$success700',
-                    $$buttonBgColor: '$colors$success50'
-                },
-                '&:focus': {
-                    $$buttonColor: '$colors$success400',
-                    $$buttonBorderColor: '$colors$success600',
-                    $$buttonBgColor: '$colors$success200'
-                },
-                '&:active': {
-                    $$buttonColor: '$colors$success700',
-                    $$buttonBorderColor: '$colors$success700',
-                    $$buttonBgColor: '$colors$success100'
-                },
-            },
-            warning: {
-                $$buttonColor: '$colors$warning500',
-                $$buttonBorderColor: '$colors$warning600',
-                $$buttonOutlinedColor: '$$buttonColor',
-                '&:hover': {
-                    $$buttonColor: '$colors$warning600',
-                    $$buttonBorderColor: '$colors$warning700',
-                    $$buttonBgColor: '$colors$warning50'
-                },
-                '&:focus': {
-                    $$buttonColor: '$colors$warning400',
-                    $$buttonBorderColor: '$colors$warning600',
-                    $$buttonBgColor: '$colors$warning200'
-
-                },
-                '&:active': {
-                    $$buttonColor: '$colors$warning700',
-                    $$buttonBorderColor: '$colors$warning700',
-                    $$buttonBgColor: '$colors$warning100'
-
-                },
-            },
-            neutral: {
-                $$buttonColor: '$colors$neutral600',
-                $$buttonBorderColor: '$colors$neutral300',
-                $$buttonOutlinedColor: '$$buttonColor',
-                '&:hover': {
-                    $$buttonColor: '$colors$neutral700',
-                    $$buttonBgColor: '$colors$neutral100',
-                    $$buttonBorderColor: '$colors$neutral300',
-                },
-                '&:focus': {
-                    $$buttonColor: '$colors$neutral800',
-                    $$buttonBgColor: '$colors$neutral300',
-                    $$buttonBorderColor: '$colors$neutral400',
-                },
-                '&:active': {
-                    $$buttonColor: '$colors$neutral500',
-                    $$buttonBgColor: '$colors$neutral300',
-                    $$buttonBorderColor: '$colors$neutral400',
-                },
-            },
-            white: {
-                $$buttonColor: '$colors$neutral50',
-                $$buttonBorderColor: '$colors$neutral300',
-                $$buttonOutlinedColor: '$colors$neutral50',
-                '&:hover': {
-                    $$buttonColor: '$colors$neutral100',
-                    $$buttonBorderColor: '$colors$neutral300',
-                    $$buttonBgColor: '$colors$neutral100'
-                },
-                '&:focus': {
-                    $$buttonBorderColor: '$colors$neutral400',
-                    $$buttonColor: '$colors$neutral300',
-                    $$buttonBgColor: '$colors$neutral200'
-                },
-                '&:active': {
-                    $$buttonColor: '$colors$neutral400',
-                    $$buttonBorderColor: '$colors$neutral500',
-                    $$buttonBgColor: '$colors$neutral300'
-                },
-            },
-        },
-        variant: {
-            text: {
-                backgroundColor: 'transparent',
-                boxShadow: 'none',
-                padding: 0,
-                border: 0,
-                color: '$$buttonColor',
-            },
-            contained: {
-                color: '$grey50',
-                backgroundColor: '$$buttonColor',
-                border: '1px solid $$buttonBorderColor',
-                '&:disabled': {
-                    boxShadow: 'none',
-                    color: '$neutral400',
-                    backgroundColor: '$neutral200',
-                    $$buttonBorderColor: '$colors$neutral100'
-                }
-            },
-            outlined: {
-                color: '$$buttonOutlinedColor',
-                border: '1px solid $$buttonOutlinedColor',
-                backgroundColor: '$$buttonBgColor',
-                '&:disabled': {
-                    boxShadow: 'none',
-                    borderColor: '$colors$neutral100',
-                    $$buttonColor: '$colors$neutral300'
-                }
-            }
-        },
-        typography: typographyButtonValues,
-        fontWeight: {
-            regular: { fontWeight: '$regular' },
-            medium: { fontWeight: '$medium' },
-            semibold: { fontWeight: '$semibold' },
-            bold: { fontWeight: '$bold' },
-        },
-        outlinedBgColor: {
-            neutral: {},
-            transparent: {
-                backgroundColor: 'transparent',
-            },
-        },
-        radii: {
-            'full': {
-                borderRadius: '$full',
-            }
-        },
-    },
-
-    defaultVariants: {
-        variant: 'contained',
-        typography: 'buttonMedium',
-        color: 'brand',
-    },
-})
+import { Button as ButtonRadix } from "@radix-ui/themes";
+import { typographyButtonValues } from "../../types/typographyValues";
+
+import { styled } from "../../styles";
+
+export const ButtonStyled = styled(ButtonRadix, {
+  $$buttonColor: "inherit",
+  $$buttonBgColor: "$colors$grey50",
+  $$buttonBorderColor: "inherit",
+  $$buttonOutlinedColor: "inherit",
+
+  fontFamily: "$default",
+  letterSpacing: 0,
+  border: 0,
+  transition: "all 300ms ease-out",
+  cursor: "pointer",
+  borderRadius: "$xs",
+  boxShadow:
+    "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "$10",
+  padding: "$6 $12",
+  "&:disabled": {
+    cursor: "not-allowed",
+    transition: "none",
+  },
+  variants: {
+    color: {
+      brand: {
+        $$buttonColor: "$colors$brand500",
+        $$buttonBorderColor: "$colors$brand600",
+        $$buttonOutlinedColor: "$$buttonColor",
+        "&:hover": {
+          $$buttonColor: "$colors$brand600",
+          $$buttonBorderColor: "$colors$brand700",
+        },
+        "&:focus": {
+          $$buttonColor: "$colors$brand400",
+          $$buttonBorderColor: "$colors$brand300",
+          $$buttonBgColor: "$colors$grey200",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$brand500",
+          $$buttonBorderColor: "$colors$brand700",
+          $$buttonBgColor: "$colors$grey200",
+        },
+      },
+      purple: {
+        $$buttonColor: "$colors$purple500",
+        $$buttonBorderColor: "$colors$purple300",
+        $$buttonOutlinedColor: "$$buttonColor",
+        "&:hover": {
+          $$buttonColor: "$colors$purple600",
+          $$buttonBorderColor: "$colors$purple700",
+          $$buttonOutlinedColor: "$colors$purple500",
+          $$buttonBgColor: "$colors$purple50",
+        },
+        "&:focus": {
+          $$buttonColor: "$colors$purple700",
+          $$buttonOutlinedColor: "$colors$purple500",
+          $$buttonBgColor: "$colors$purple200",
+          $$buttonBorderColor: "$colors$purple400",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$purple500",
+          $$buttonOutlinedColor: "$colors$purple500",
+          $$buttonBgColor: "$colors$purple100",
+          $$buttonBorderColor: "$colors$purple300",
+        },
+      },
+      error: {
+        $$buttonColor: "$colors$error600",
+        $$buttonBorderColor: "$colors$error500",
+        $$buttonOutlinedColor: " $colors$error500",
+        "&:hover": {
+          $$buttonColor: "$colors$error600",
+          $$buttonBorderColor: "$colors$error700",
+          $$buttonBgColor: "$colors$error50",
+        },
+        "&:focus": {
+          $$buttonColor: "$colors$error400",
+          $$buttonBorderColor: "$colors$error300",
+          $$buttonBgColor: "$colors$error200",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$error700",
+          $$buttonBorderColor: "$colors$error700",
+          $$buttonBgColor: "$colors$re1050",
+        },
+      },
+      info: {
+        $$buttonColor: "$colors$info500",
+        $$buttonBorderColor: "$colors$info600",
+        $$buttonOutlinedColor: "$$buttonColor",
+        "&:hover": {
+          $$buttonColor: "$colors$info600",
+          $$buttonBorderColor: "$colors$info700",
+          $$buttonBgColor: "$colors$info50",
+        },
+        "&:focus": {
+          $$buttonColor: "$colors$info400",
+          $$buttonBorderColor: "$colors$info600",
+          $$buttonBgColor: "$colors$info200",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$info700",
+          $$buttonBorderColor: "$colors$info700",
+          $$buttonBgColor: "$colors$info100",
+        },
+      },
+      success: {
+        $$buttonColor: "$colors$success500",
+        $$buttonBorderColor: "$colors$success600",
+        $$buttonOutlinedColor: "$$buttonColor",
+        "&:hover": {
+          $$buttonColor: "$colors$success600",
+          $$buttonBorderColor: "$colors$success700",
+          $$buttonBgColor: "$colors$success50",
+        },
+        "&:focus": {
+          $$buttonColor: "$colors$success400",
+          $$buttonBorderColor: "$colors$success600",
+          $$buttonBgColor: "$colors$success200",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$success700",
+          $$buttonBorderColor: "$colors$success700",
+          $$buttonBgColor: "$colors$success100",
+        },
+      },
+      warning: {
+        $$buttonColor: "$colors$warning500",
+        $$buttonBorderColor: "$colors$warning600",
+        $$buttonOutlinedColor: "$$buttonColor",
+        "&:hover": {
+          $$buttonColor: "$colors$warning600",
+          $$buttonBorderColor: "$colors$warning700",
+          $$buttonBgColor: "$colors$warning50",
+        },
+        "&:focus": {
+          $$buttonColor: "$colors$warning400",
+          $$buttonBorderColor: "$colors$warning600",
+          $$buttonBgColor: "$colors$warning200",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$warning700",
+          $$buttonBorderColor: "$colors$warning700",
+          $$buttonBgColor: "$colors$warning100",
+        },
+      },
+      neutral: {
+        $$buttonColor: "$colors$neutral600",
+        $$buttonBorderColor: "$colors$neutral300",
+        $$buttonOutlinedColor: "$$buttonColor",
+        "&:hover": {
+          $$buttonColor: "$colors$neutral700",
+          $$buttonBgColor: "$colors$neutral100",
+          $$buttonBorderColor: "$colors$neutral300",
+        },
+        "&:focus": {
+          $$buttonColor: "$colors$neutral800",
+          $$buttonBgColor: "$colors$neutral300",
+          $$buttonBorderColor: "$colors$neutral400",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$neutral500",
+          $$buttonBgColor: "$colors$neutral300",
+          $$buttonBorderColor: "$colors$neutral400",
+        },
+      },
+      white: {
+        $$buttonColor: "$colors$neutral50",
+        $$buttonBorderColor: "$colors$neutral300",
+        $$buttonOutlinedColor: "$colors$neutral50",
+        "&:hover": {
+          $$buttonColor: "$colors$neutral100",
+          $$buttonBorderColor: "$colors$neutral300",
+          $$buttonBgColor: "$colors$neutral100",
+        },
+        "&:focus": {
+          $$buttonBorderColor: "$colors$neutral400",
+          $$buttonColor: "$colors$neutral300",
+          $$buttonBgColor: "$colors$neutral200",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$neutral400",
+          $$buttonBorderColor: "$colors$neutral500",
+          $$buttonBgColor: "$colors$neutral300",
+        },
+      },
+    },
+    variant: {
+      text: {
+        backgroundColor: "transparent",
+        boxShadow: "none",
+        padding: 0,
+        border: 0,
+        color: "$$buttonColor",
+      },
+      contained: {
+        color: "$grey50",
+        backgroundColor: "$$buttonColor",
+        border: "1px solid $$buttonBorderColor",
+        "&:disabled": {
+          boxShadow: "none",
+          color: "$neutral400",
+          backgroundColor: "$neutral200",
+          $$buttonBorderColor: "$colors$neutral100",
+        },
+      },
+      outlined: {
+        color: "$$buttonOutlinedColor",
+        border: "1px solid $$buttonOutlinedColor",
+        backgroundColor: "$$buttonBgColor",
+        "&:disabled": {
+          boxShadow: "none",
+          borderColor: "$colors$neutral100",
+          $$buttonColor: "$colors$neutral300",
+        },
+      },
+    },
+    size: {
+      extraSmall: {
+        height: "$24",
+        fontSize: "$buttonExtraSmall",
+        lineHeight: "$buttonExtraSmall",
+        padding: "0 $12",
+      },
+      small: {
+        height: "30px",
+        fontSize: "$buttonSmall",
+        lineHeight: "$buttonSmall",
+        padding: "0 $14",
+      },
+      medium: {
+        height: "40px",
+        fontSize: "$buttonMedium",
+        lineHeight: "$buttonMedium",
+        padding: "0 $16",
+      },
+      large: {
+        height: "48px",
+        fontSize: "$buttonLarge",
+        lineHeight: "$buttonLarge",
+        padding: "0 $20",
+      },
+    },
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" },
+    },
+    outlinedBgColor: {
+      neutral: {},
+      transparent: {
+        backgroundColor: "transparent",
+      },
+    },
+    radii: {
+      full: {
+        borderRadius: "$full",
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: "contained",
+    color: "brand",
+    size: "medium",
+    fontWeight: "medium"
+  },
+});