Merge branch 'dev' into shadcn-get-eth

Author: pettinarip

package.json

@@ -84,6 +84,7 @@
     "remark-gfm": "^3.0.1",
     "swiper": "^11.1.10",
     "tailwind-merge": "^2.3.0",
+    "tailwind-variants": "^0.2.1",
     "tailwindcss-animate": "^1.0.7",
     "usehooks-ts": "^3.1.0",
     "yaml-loader": "^0.8.0"

public/content/contributing/index.md

@@ -68,7 +68,7 @@ Before contributing, make sure you're familiar with:
 - our [style guide](/contributing/style-guide/)
 - our [code of conduct](/community/code-of-conduct)
 
-<ContributorsQuizBanner mt={16} mb={8} />
+<ContributorsQuizBanner className="mt-16 mb-8" />
 
 ## How decisions about the site are made {#how-decisions-about-the-site-are-made}
 

public/content/translations/it/contributing/index.md

@@ -68,7 +68,7 @@ Prima di contribuire, assicurati di avere familiarità con:
 - la nostra [guida di stile](/contributing/style-guide/)
 - il nostro [codice di condotta](/community/code-of-conduct)
 
-<ContributorsQuizBanner mt={16} mb={8} />
+<ContributorsQuizBanner className="mt-16 mb-8" />
 
 ## Come vengono prese le decisioni sul sito {#how-decisions-about-the-site-are-made}
 

public/content/translations/ja/contributing/index.md

@@ -68,7 +68,7 @@ ethereum.orgは、オープンソースで運営されているプロジェク
 - [スタイルガイド](/contributing/style-guide/)
 - [行動規範](/community/code-of-conduct)
 
-<ContributorsQuizBanner mt={16} mb={8} />
+<ContributorsQuizBanner className="mt-16 mb-8" />
 
 ## サイトに関する決定 {#how-decisions-about-the-site-are-made}
 

public/content/translations/zh-tw/contributing/index.md

@@ -68,7 +68,7 @@ Ethereum.org 是一個開源專案，擁有超過 **12000 名**貢獻者，幫
 - 我們的[風格指南](/contributing/style-guide/)
 - 我們的[行為準則](/community/code-of-conduct)
 
-<ContributorsQuizBanner mt={16} mb={8} />
+<ContributorsQuizBanner className="mt-16 mb-8" />
 
 ## 如何做出有關網站的決定 {#how-decisions-about-the-site-are-made}
 

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

@@ -11,27 +11,40 @@ import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
 const ICON_SELECTOR = "& svg"
 
 const baseStyle = defineStyle({
+  // Sizing and positioning classes:
   borderRadius: "base",
   border: "1px",
-  color: "primary.base",
   fontWeight: "normal",
   lineHeight: "1.6",
   transitionProperty: "common",
   transitionDuration: "normal",
   whiteSpace: "normal",
   p: "unset",
+  // Base default styling is "outline" pattern, primary color for text, border matches, no bg
+  borderColor: "currentColor",
+  color: "primary.base",
+  // Hover: Default hover adds box-shadow, text (border) to --primary-hover
+  _hover: {
+    color: "primary.hover",
+    boxShadow: "buttonHover",
+  },
+  // Focus: Add 4px outline to all buttons, --primary-hover
   _focusVisible: {
     outline: "4px solid",
     outlineColor: "primary.hover",
     outlineOffset: -1,
   },
+  // Active: text (border) to --primary-hover instead of primary, hide shadow
+  _active: {
+    color: "primary.hover",
+    boxShadow: "none",
+  },
+  // Disabled: Pointer events none, text (border) to --disabled
   _disabled: {
     color: "disabled",
     pointerEvents: "none",
   },
-  _hover: {
-    color: "primary.hover",
-  },
+  // isSecondary: Switch text (border) to --body instead of --primary
   "&[data-secondary='true']": {
     color: "body.base",
   },
@@ -41,42 +54,39 @@ const baseStyle = defineStyle({
       textDecoration: "none",
     },
   },
+  [ICON_SELECTOR]: {
+    flexShrink: 0,
+  },
 })
 
 const variantSolid = defineStyle({
   color: "white",
   bg: "primary.action",
-  borderColor: "transparent",
-  _disabled: {
-    bg: "disabled",
-    color: "background.base",
-  },
+  borderColor: "transparent !important",
   _hover: {
-    color: "white",
+    color: "white !important",
     bg: "primary.actionHover",
-    boxShadow: "buttonHover",
   },
   _active: {
-    boxShadow: "none",
-  },
-})
-
-const variantOutline = defineStyle({
-  _hover: {
-    boxShadow: "buttonHover",
+    bg: "primary.actionHover",
   },
-  _active: {
-    boxShadow: "none",
+  _disabled: {
+    bg: "disabled",
+    color: "background.base",
   },
 })
 
+const variantOutline = defineStyle({}) // "outline" is base styling above
+
 const variantGhost = {
   borderColor: "transparent",
+  _hover: { shadow: "none" },
 }
 
 const variantLink = defineStyle({
   borderColor: "transparent",
-  fontWeight: 700,
+  // fontWeight: 700, // TODO: Not in DS; confirm then remove
+  _hover: { shadow: "none" },
   textDecor: "underline",
   py: 0,
   px: 1,

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

@@ -22,7 +22,6 @@ import { Modal } from "./Modal"
 import { Popover } from "./Popover"
 import { Progress } from "./Progress"
 import { Radio } from "./Radio"
-import { ReactSelect } from "./ReactSelect"
 import { Switch } from "./Switch"
 import { Table } from "./Table"
 import { Tabs } from "./Tabs"
@@ -52,7 +51,6 @@ export default {
   Popover,
   Progress,
   Radio,
-  ReactSelect,
   Spinner: spinnerDefaultTheme,
   Switch,
   Table,

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

@@ -20,8 +20,7 @@ const shadows = {
   gridBlueBowShadow: "8px 8px 0px 0px var(--eth-colors-gridBlue)",
 
   // * Part of new DS
-  // TODO: From current theme. Deprecate for 'buttonHover'
-  primary: "4px 4px 0px 0px var(--eth-colors-primary-light)",
+  // TODO: Deprecate buttonHover when all buttons migrated to tailwind
   buttonHover: "4px 4px 0 0 var(--eth-colors-primary-lowContrast)",
   tooltip: "0 0 16px var(--eth-colors-tooltipShadow)",
 }

src/@chakra-ui/foundations/shadows.ts

@@ -40,7 +40,7 @@ const semanticTokens = {
       base: { _light: "purple.600", _dark: "purple.400" },
       highContrast: { _light: "purple.800", _dark: "purple.200" },
       lowContrast: { _light: "purple.100", _dark: "purple.900" },
-      hover: { _light: "purple.500", _dark: "purple.500" },
+      hover: { _light: "purple.500", _dark: "purple.300" },
       visited: { _light: "purple.700", _dark: "purple.300" },
       action: { _light: "purple.600", _dark: "purple.600" },
       actionHover: { _light: "purple.500", _dark: "purple.500" },
@@ -55,11 +55,9 @@ const semanticTokens = {
       base: { _light: "gray.800", _dark: "gray.100" },
       medium: { _light: "gray.500", _dark: "gray.400" },
       light: { _light: "gray.200", _dark: "gray.600" },
-      // ! Deprecating body.inverted
-      inverted: { _light: "gray.100", _dark: "gray.800" },
     },
     background: {
-      base: { _light: "white", _dark: "gray.950" },
+      base: { _light: "white", _dark: "black" },
       highlight: { _light: "gray.100", _dark: "gray.900" },
     },
     disabled: { _light: "gray.400", _dark: "gray.500" },