Merge pull request #14 from ethereum/recover-chakra-theme

Sync Chakra theme files

Author: nhsz

src/@chakra-ui/components/Alert.ts

@@ -0,0 +1,93 @@
+import {
+  createMultiStyleConfigHelpers,
+  SystemStyleObject,
+} from "@chakra-ui/react"
+import { alertAnatomy } from "@chakra-ui/anatomy"
+import { alertDefaultTheme, defineMergeStyles } from "./components.utils"
+import { AlertStatusType } from "@/components/Alert"
+
+const STATUS_COLORS: Record<
+  "solid" | "subtle",
+  Record<AlertStatusType, SystemStyleObject>
+> = {
+  solid: {
+    error: {
+      bg: "error.base",
+      color: "error.light",
+    },
+    info: {
+      bg: "body.medium",
+      color: "background.base",
+    },
+    warning: {
+      bg: "attention.base",
+      color: "attention.light",
+    },
+    success: {
+      bg: "success.base",
+      color: "success.light",
+    },
+  },
+  subtle: {
+    error: {
+      bg: "error.light",
+      color: "error.base",
+    },
+    info: {
+      bg: "background.highlight",
+      color: "body.base",
+    },
+    warning: {
+      bg: "attention.light",
+      color: "gray.700",
+    },
+    success: {
+      bg: "success.light",
+      color: "success",
+    },
+  },
+}
+
+const { baseStyle: alertBaseStyle } = alertDefaultTheme
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(alertAnatomy.keys)
+
+const baseStyleContainer = defineMergeStyles(alertBaseStyle?.container, {
+  justifyContent: "center",
+  gap: 2,
+})
+
+const baseStyleIcon = defineMergeStyles(alertBaseStyle?.icon, {
+  me: 2,
+})
+
+const baseStyle = definePartsStyle({
+  container: baseStyleContainer,
+  icon: baseStyleIcon,
+})
+
+const variantSolid = definePartsStyle((props) => ({
+  container: {
+    ...STATUS_COLORS["solid"][props.status],
+  },
+}))
+
+const variantSubtle = definePartsStyle((props) => ({
+  container: {
+    ...STATUS_COLORS["subtle"][props.status],
+  },
+}))
+
+const variants = {
+  solid: variantSolid,
+  subtle: variantSubtle,
+}
+
+export const Alert = defineMultiStyleConfig({
+  baseStyle,
+  variants,
+  defaultProps: {
+    variant: "solid",
+  },
+})

src/@chakra-ui/components/Avatar.ts

@@ -0,0 +1,93 @@
+import {
+  createMultiStyleConfigHelpers,
+  cssVar,
+  defineStyle,
+  getToken,
+} from "@chakra-ui/react"
+import { avatarAnatomy } from "@chakra-ui/anatomy"
+import { avatarDefaultTheme, defineMergeStyles } from "./components.utils"
+import { pick } from "lodash"
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(avatarAnatomy.keys)
+
+const { baseStyle: defaultBaseStyle, sizes: defaultSizes } = avatarDefaultTheme
+
+const $border = cssVar("avatar-border-color", "transparent")
+const $mlBySize = cssVar("ml-by-size")
+
+const baseStyleContainer = defineStyle((props) => {
+  const primaryLowContrast = getToken(
+    "colors",
+    "primary.lowContrast"
+  )(props.theme)
+
+  return defineMergeStyles(defaultBaseStyle?.(props).container, {
+    [$border.variable]: "transparent",
+    borderWidth: "1px",
+    "&:hover, [data-peer]:hover ~ &": {
+      boxShadow: `0.15em 0.15em 0 ${primaryLowContrast}`,
+    },
+    _focus: {
+      outline: "4px solid",
+      outlineColor: "primary.hover",
+      outlineOffset: "-1px",
+    },
+    _active: {
+      [$border.variable]: "colors.primary.hover",
+      boxShadow: "none",
+      "& img": {
+        opacity: 0.7,
+      },
+    },
+    "[role='group'] &": {
+      [$border.variable]: "colors.background.base",
+      _notLast: {
+        marginLeft: $mlBySize.reference,
+      },
+    },
+  })
+})
+
+const baseStyleExessLabel = defineStyle((props) =>
+  defineMergeStyles(defaultBaseStyle?.(props).excessLabel, {
+    bg: "body.base",
+    color: "background.base",
+    ms: $mlBySize.reference,
+  })
+)
+
+const baseStyle = definePartsStyle((props) => ({
+  container: baseStyleContainer(props),
+  excessLabel: baseStyleExessLabel(props),
+}))
+
+const USED_SIZES = ["xs", "sm", "md", "lg"] as const
+
+const pickedDefaultSizes: { [k in (typeof USED_SIZES)[number]]?: object } =
+  pick(defaultSizes, ...USED_SIZES)
+
+const sizes = defineMergeStyles(pickedDefaultSizes, {
+  xs: {
+    group: {
+      [$mlBySize.variable]: "space.-1",
+    },
+    excessLabel: {
+      fontSize: "0.563rem",
+    },
+  },
+  sm: {
+    group: {
+      [$mlBySize.variable]: "space.-2",
+    },
+    excessLabel: {
+      fontSize: "sm",
+    },
+  },
+})
+
+export const Avatar = defineMultiStyleConfig({
+  baseStyle,
+  // @ts-expect-error
+  sizes,
+})

src/@chakra-ui/components/Badge.ts

@@ -0,0 +1,43 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
+import { badgeDefaultTheme, defineMergeStyles } from "./components.utils"
+
+const { baseStyle: defaultBaseStyle } = badgeDefaultTheme
+
+const baseStyle = defineMergeStyles(defaultBaseStyle, {
+  borderRadius: "base",
+  border: "1px solid",
+  borderColor: "transparent",
+  fontWeight: "initial",
+  py: 1,
+  px: 2,
+  textTransform: "uppercase",
+})
+
+const variantSecondary = defineStyle({
+  borderColor: "primary100",
+  color: "text",
+})
+
+const variantSolid = defineStyle({
+  color: "black300",
+  background: "primary100",
+})
+
+export const Badge = defineStyleConfig({
+  baseStyle,
+  variants: {
+    solid: variantSolid,
+    secondary: variantSecondary,
+  },
+  sizes: {
+    sm: {
+      py: 0,
+    },
+    lg: {
+      px: 3,
+    },
+  },
+  defaultProps: {
+    variant: "solid",
+  },
+})

src/@chakra-ui/components/Checkbox.ts

@@ -0,0 +1,45 @@
+import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
+import { checkboxAnatomy } from "@chakra-ui/anatomy"
+import {
+  checkboxDefaultTheme,
+  commonInputTriggerStyles,
+  defineMergeStyles,
+} from "./components.utils"
+
+const { sizes: defaultSizes } = checkboxDefaultTheme
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(checkboxAnatomy.keys)
+
+const { commonContainerProps, commonControlProps, commonLabelProps } =
+  commonInputTriggerStyles
+
+const checkboxMdSize = defaultSizes?.md
+
+const baseStyleControl = defineMergeStyles(
+  checkboxMdSize?.control,
+  commonControlProps,
+  {
+    boxSize: "var(--checkbox-size)", // Comes from default theme
+    borderRadius: "sm",
+  }
+)
+
+const baseStyleLabel = defineStyle({ ...commonLabelProps })
+
+const baseStyleContainer = defineStyle({ ...commonContainerProps })
+
+const baseStyleIcon = defineStyle({
+  boxSize: 2,
+})
+
+const baseStyle = definePartsStyle({
+  container: baseStyleContainer,
+  control: baseStyleControl,
+  label: baseStyleLabel,
+  icon: baseStyleIcon,
+})
+
+export const Checkbox = defineMultiStyleConfig({
+  baseStyle,
+})

src/@chakra-ui/components/Input.ts

@@ -0,0 +1,117 @@
+import { inputAnatomy } from "@chakra-ui/anatomy"
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from "@chakra-ui/styled-system"
+import { defineMergeStyles, inputDefaultTheme } from "./components.utils"
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(inputAnatomy.keys)
+
+const baseStyle = definePartsStyle((props) => {
+  const {
+    focusBorderColor: fc = "primaryHover",
+    errorBorderColor: ec = "errorOutline",
+  } = props
+
+  return defineMergeStyles(
+    inputDefaultTheme.baseStyle,
+    inputDefaultTheme.variants?.outline(props),
+    {
+      field: {
+        borderColor: "currentColor",
+        borderRadius: "base",
+        outline: "3px solid transparent",
+        lineHeight: 1,
+        _placeholder: {
+          color: "disabled",
+          opacity: 1,
+        },
+        _focusVisible: {
+          outlineColor: fc,
+          outlineOffset: "-1px",
+          borderColor: "transparent",
+          boxShadow: "none",
+        },
+        _hover: null, // override default
+        _groupHover: {
+          borderColor: "primary.hover",
+        },
+        _invalid: {
+          borderColor: ec,
+          boxShadow: "none",
+        },
+        _disabled: {
+          borderColor: "disabled",
+          opacity: 1,
+        },
+        "&:not(:disabled)": {
+          _active: {
+            bg: "background.highlight",
+            borderColor: "primary.highContrast",
+          },
+        },
+      },
+      element: {
+        fontSize: "2xl",
+        transitionProperty: "common",
+        transitionDuration: "normal",
+        _groupHover: {
+          color: "primary.hover",
+        },
+        _peerFocusVisible: {
+          color: fc,
+          _peerInvalid: {
+            color: ec,
+          },
+          _peerDisabled: {
+            color: "disabled",
+          },
+        },
+        _peerDisabled: {
+          color: "disabled",
+        },
+        "[data-peer]:not(:disabled):active ~ &": {
+          color: "primary.dark",
+          _dark: {
+            color: "primary.highContrast",
+          },
+        },
+      },
+    }
+  )
+})
+
+const size = {
+  md: defineStyle({
+    h: 10.5,
+    px: 2,
+  }),
+  sm: defineStyle({
+    h: 8,
+    px: 1,
+  }),
+}
+
+const sizes = {
+  md: definePartsStyle({
+    field: size.md,
+    element: size.md,
+  }),
+  sm: definePartsStyle({
+    field: { ...size.sm, fontSize: "sm" },
+    element: {
+      ...size.sm,
+      fontSize: "xl",
+    },
+  }),
+}
+
+export const Input = defineMultiStyleConfig({
+  baseStyle,
+  sizes,
+  defaultProps: {
+    variant: "outline",
+    size: "md",
+  },
+})