Deploy v7.15.0

.storybook/preview.js

@@ -28,6 +28,9 @@ window.___navigate = (pathname) => {
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
+  backgrounds: {
+    disable: true,
+  },
   controls: {
     matchers: {
       color: /(background|color)$/i,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "7.14.2",
+  "version": "7.15.0",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "git@github.com:ethereum/ethereum-org-website.git",

plugins/gatsby-remark-fix-static-urls/index.js

@@ -1,3 +1,4 @@
+const fs = require("fs")
 const path = require("path")
 const visitWithParents = require("unist-util-visit-parents")
 const isRelativeUrl = require("is-relative-url")
@@ -39,7 +40,10 @@ module.exports = ({ markdownNode, markdownAST }) => {
         return
       }
 
-      node.url = path.join(relativePath, node.url)
+      // only modify the paths for those files doesn't exist in the current folder
+      if (!fs.existsSync(path.join(fileAbsoluteDir, node.url))) {
+        node.url = path.join(relativePath, node.url)
+      }
     }
   })
 

redirects.json

@@ -255,10 +255,6 @@
     "fromPath": "/upgrades",
     "toPath": "/en/roadmap"
   },
-  {
-    "fromPath": "/quizzes",
-    "toPath": "/en/quizzes/"
-  },
   {
     "fromPath": "/*/upgrades",
     "toPath": "/:splat/roadmap"

src/@chakra-ui/gatsby-plugin/components/Button.ts

@@ -113,7 +113,7 @@ export const Button = defineStyleConfig({
   baseStyle,
   sizes: defineMergeStyles(defaultSizes, {
     md: {
-      h: "42px",
+      h: 10.5,
     },
   }),
   variants: {

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

@@ -1,70 +1,45 @@
 import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
 import { checkboxAnatomy } from "@chakra-ui/anatomy"
-import { checkboxDefaultTheme, defineMergeStyles } from "./components.utils"
+import {
+  checkboxDefaultTheme,
+  commonInputTriggerStyles,
+  defineMergeStyles,
+} from "./components.utils"
 
-const { baseStyle: defaultBaseStyle } = checkboxDefaultTheme
+const { sizes: defaultSizes } = checkboxDefaultTheme
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(checkboxAnatomy.keys)
 
-const baseStyleControl = defineStyle((props) =>
-  defineMergeStyles(defaultBaseStyle?.(props).control, {
-    bg: "background.base",
-    _checked: {
-      bg: "primary400",
-      _hover: {
-        bg: "primary400",
-        borderColor: "primary600",
-      },
-      borderColor: "black50",
-    },
-    border: "1px",
-    borderColor: "black50",
-    borderRadius: "3px",
-    transition: "all 150ms",
-    _focusVisible: {
-      boxShadow: "none",
-    },
-    _hover: {
-      boxShadow: "tableItemBoxShadow",
-      border: "1px",
-      borderStyle: "solid",
-      borderColor: "primary600",
-      transition: "transform 0.1s",
-      transform: "scale(1.02)",
-    },
-  })
+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 sizes = {
-  md: defineStyle({
-    control: {
-      h: "1.5rem",
-      w: "1.5rem",
-    },
-    icon: {
-      fontSize: "md",
-    },
-  }),
-}
+const baseStyleLabel = defineStyle({ ...commonLabelProps })
+
+const baseStyleContainer = defineStyle({ ...commonContainerProps })
+
+const baseStyleIcon = defineStyle({
+  boxSize: 2,
+})
 
-const variantAlignTop = definePartsStyle({
-  control: {
-    mt: "0.25rem",
-  },
+const baseStyle = definePartsStyle({
+  container: baseStyleContainer,
+  control: baseStyleControl,
+  label: baseStyleLabel,
+  icon: baseStyleIcon,
 })
 
 export const Checkbox = defineMultiStyleConfig({
-  baseStyle: definePartsStyle((props) => ({
-    ...defaultBaseStyle?.(props),
-    control: baseStyleControl(props),
-  })),
-  sizes,
-  variants: {
-    // TODO: remove this variant
-    alignTop: variantAlignTop,
-  },
-  defaultProps: {
-    size: "md",
-  },
+  baseStyle,
 })

src/@chakra-ui/gatsby-plugin/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",
+  },
+})

src/@chakra-ui/gatsby-plugin/components/Radio.ts

@@ -0,0 +1,51 @@
+import {
+  createMultiStyleConfigHelpers,
+  cssVar,
+  defineStyle,
+} from "@chakra-ui/react"
+import { radioAnatomy } from "@chakra-ui/anatomy"
+import {
+  commonInputTriggerStyles,
+  defineMergeStyles,
+  radioDefaultTheme,
+} from "./components.utils"
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(radioAnatomy.keys)
+
+export const $radioDisableColor = cssVar("radio-disable-color")
+
+const { commonContainerProps, commonControlProps, commonLabelProps } =
+  commonInputTriggerStyles
+
+const baseStyleContainer = defineStyle({ ...commonContainerProps })
+
+const baseStyleControl = defineMergeStyles(
+  radioDefaultTheme.baseStyle?.({} as never).control,
+  commonControlProps,
+  {
+    boxSize: 4,
+    fontSize: "md",
+    "*:hover > &": {
+      outlineOffset: "-1px",
+    },
+    _checked: {
+      _before: {
+        // Force half the size, as '50%' value not reliable.
+        boxSize: 2,
+      },
+    },
+  }
+)
+
+const baseStyleLabel = defineStyle({ ...commonLabelProps })
+
+const baseStyle = definePartsStyle({
+  container: baseStyleContainer,
+  control: baseStyleControl,
+  label: baseStyleLabel,
+})
+
+export const Radio = defineMultiStyleConfig({
+  baseStyle,
+})