Merge branch 'dev' into fix/input-misalignment

Author: pettinarip

.all-contributorsrc

@@ -10523,6 +10523,60 @@
       "contributions": [
         "bug"
       ]
+    },
+    {
+      "login": "0xMimir",
+      "name": "0xMimir",
+      "avatar_url": "https://avatars.githubusercontent.com/u/108837858?v=4",
+      "profile": "https://github.com/0xMimir",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "bilaljawed",
+      "name": "Bilal",
+      "avatar_url": "https://avatars.githubusercontent.com/u/17548944?v=4",
+      "profile": "https://github.com/bilaljawed",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "ilanolkies",
+      "name": "Ilan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/36084092?v=4",
+      "profile": "https://ilanolkies.com",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "umededoteth",
+      "name": "umede",
+      "avatar_url": "https://avatars.githubusercontent.com/u/122288558?v=4",
+      "profile": "https://mirror.xyz/umede.eth",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "taminobaumann",
+      "name": "Tamino",
+      "avatar_url": "https://avatars.githubusercontent.com/u/48290617?v=4",
+      "profile": "http://taminobaumann.com",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "keccers",
+      "name": "Katherine Champagne",
+      "avatar_url": "https://avatars.githubusercontent.com/u/770277?v=4",
+      "profile": "https://github.com/keccers",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.storybook/preview.ts

@@ -3,6 +3,7 @@ import { action } from "@storybook/addon-actions"
 
 import i18n, { baseLocales } from "./i18next"
 import theme from "../src/@chakra-ui/gatsby-plugin/theme"
+import "../static/fonts/inter-font-face.css"
 
 const chakraBreakpointArray = Object.entries(theme.breakpoints)
 

README.md

@@ -175,7 +175,12 @@ Learn more about how we review pull requests [here](docs/review-process.md).
 
 - To help with verification we request GitHub contributors connect their GitHub account with their Discord account (Discord > Settings > Connections > GitHub). Crowdin contributors will be verified directly through Crowdin by our team.
 
-- If you haven't contributed yet and would like to earn a POAP to show your loyalty to the Ethereum space, head over to the [issues](https://github.com/ethereum/ethereum-org-website/issues/) tab to get started!
+### GitPOAP
+
+- If you've made at least one contribution and that gets merged into ethereum.org, GitPOAP will also auto recognize it and let you mint a unique contributor POAP.
+  [More on GitPOAP](https://www.gitpoap.io).
+
+If you haven't contributed yet and would like to earn a POAP to show your loyalty to the Ethereum space, head over to the [issues](https://github.com/ethereum/ethereum-org-website/issues/) tab to get started!
 
 <hr style="margin-top: 3em; margin-bottom: 3em;">
 
@@ -1643,6 +1648,14 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://linktr.ee/kritik"><img src="https://avatars.githubusercontent.com/u/57076429?v=4?s=100" width="100px;" alt="kritik sah"/><br /><sub><b>kritik sah</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Akritik-sah" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Fuliggine"><img src="https://avatars.githubusercontent.com/u/56844974?v=4?s=100" width="100px;" alt="Fuliggine"/><br /><sub><b>Fuliggine</b></sub></a><br /><a href="#content-Fuliggine" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Omsify"><img src="https://avatars.githubusercontent.com/u/87442202?v=4?s=100" width="100px;" alt="Omsify"/><br /><sub><b>Omsify</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3AOmsify" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/0xMimir"><img src="https://avatars.githubusercontent.com/u/108837858?v=4?s=100" width="100px;" alt="0xMimir"/><br /><sub><b>0xMimir</b></sub></a><br /><a href="#content-0xMimir" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/bilaljawed"><img src="https://avatars.githubusercontent.com/u/17548944?v=4?s=100" width="100px;" alt="Bilal"/><br /><sub><b>Bilal</b></sub></a><br /><a href="#content-bilaljawed" title="Content">🖋</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://ilanolkies.com"><img src="https://avatars.githubusercontent.com/u/36084092?v=4?s=100" width="100px;" alt="Ilan"/><br /><sub><b>Ilan</b></sub></a><br /><a href="#content-ilanolkies" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://mirror.xyz/umede.eth"><img src="https://avatars.githubusercontent.com/u/122288558?v=4?s=100" width="100px;" alt="umede"/><br /><sub><b>umede</b></sub></a><br /><a href="#content-umededoteth" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://taminobaumann.com"><img src="https://avatars.githubusercontent.com/u/48290617?v=4?s=100" width="100px;" alt="Tamino"/><br /><sub><b>Tamino</b></sub></a><br /><a href="#content-taminobaumann" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/keccers"><img src="https://avatars.githubusercontent.com/u/770277?v=4?s=100" width="100px;" alt="Katherine Champagne"/><br /><sub><b>Katherine Champagne</b></sub></a><br /><a href="#content-keccers" title="Content">🖋</a></td>
     </tr>
   </tbody>
 </table>

docs/best-practices.md

@@ -229,3 +229,11 @@ export const query = graphql`
 `
 // These query results get passed as an object `props.data` to your component
 ```
+
+### Using custom `GatsbyImage`
+
+[GatsbyImage](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/) is the component of choice to handle responsive images processed through graphql. However, we use a custom version of this component that is properly optimized with Chakra. This way we can use style props from Chakra but still be able to forward common or GatsbyImage-specific props to the Gatsby component for correct usage and rendering.
+
+```tsx
+import GatsbyImage from "./components/GatsbyImage"
+```

i18n/config.json

@@ -7,6 +7,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "am",
+    "crowdinCode": "am",
+    "name": "Amharic",
+    "localName": "አማርኛ",
+    "langDir": "ltr",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "ar",
     "crowdinCode": "ar",
@@ -23,6 +31,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "be",
+    "crowdinCode": "be",
+    "name": "Belarusian",
+    "localName": "беларускі",
+    "langDir": "ltr",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "bg",
     "crowdinCode": "bg",
@@ -39,6 +55,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "bs",
+    "crowdinCode": "bs",
+    "name": "Bosnian",
+    "localName": "босански",
+    "langDir": "ltr",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "ca",
     "crowdinCode": "ca",
@@ -159,6 +183,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "hy-am",
+    "crowdinCode": "hy-AM",
+    "name": "Armenian",
+    "localName": "հայերեն",
+    "langDir": "ltr",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "id",
     "crowdinCode": "id",
@@ -215,6 +247,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "kn",
+    "crowdinCode": "kn",
+    "name": "Kannada",
+    "localName": "ಕನ್ನಡ",
+    "langDir": "ltr",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "ko",
     "crowdinCode": "ko",
@@ -375,6 +415,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "tk",
+    "crowdinCode": "tk",
+    "name": "Turkmen",
+    "localName": "türkmen",
+    "langDir": "ltr",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "th",
     "crowdinCode": "th",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "7.21.0",
+  "version": "7.22.1",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "[email protected]:ethereum/ethereum-org-website.git",

src/@chakra-ui/gatsby-plugin/foundations/colors.ts

@@ -12,18 +12,28 @@ const colors = {
     900: "#141414",
   },
   blue: {
-    100: "#dedeff",
-    300: "#8282ff",
-    500: "#1c1cff",
-    600: "#090990",
-    700: "#0b0b66",
+    50: "#F6F6FF",
+    100: "#EBEBFF",
+    200: "#D6D6FF",
+    300: "#9999FF",
+    400: "#5555FF",
+    500: "#1C1CFF",
+    600: "#0000E0",
+    700: "#0000A3",
+    800: "#000066",
+    900: "#000029",
   },
   orange: {
-    100: "#ffe3d3",
-    300: "#ffb991",
-    500: "#ff7324",
-    600: "#c95d20",
-    800: "#352313",
+    50: "#FFF3ED",
+    100: "#FFE5D6",
+    200: "#FFCBAD",
+    300: "#FFB185",
+    400: "#FF985C",
+    500: "#FF7324",
+    600: "#B84300",
+    700: "#7A2D00",
+    800: "#521E00",
+    900: "#2F1000",
   },
   red: {
     100: "#f7c8c8",

src/@chakra-ui/gatsby-plugin/semanticTokens.ts

@@ -38,16 +38,16 @@ const semanticTokens = {
     // Main Set
     primary: {
       base: { _light: "blue.500", _dark: "orange.500" },
-      highContrast: { _light: "blue.700", _dark: "orange.100" },
-      lowContrast: { _light: "blue.100", _dark: "orange.800" },
-      hover: { _light: "blue.300", _dark: "orange.300" },
-      visited: { _light: "blue.600", _dark: "orange.600" },
+      highContrast: { _light: "blue.800", _dark: "orange.100" },
+      lowContrast: { _light: "blue.100", _dark: "orange.900" },
+      hover: { _light: "blue.400", _dark: "orange.400" },
+      visited: { _light: "blue.700", _dark: "orange.700" },
       // ! Deprecating primary.light
       light: { _light: "blue.100", _dark: "orange.100" },
       // ! Deprecating primary.dark
       dark: { _light: "blue.700", _dark: "orange.800" },
       // ! Deprecating primary.pressed
-      pressed: { _light: "blue.300", _dark: "orange.800" },
+      pressed: { _light: "blue.400", _dark: "orange.800" },
     },
     body: {
       base: { _light: "gray.700", _dark: "gray.100" },

src/@chakra-ui/gatsby-plugin/styles.ts

@@ -29,30 +29,30 @@ const styles = {
     },
     // imported global CSS styles for list items
     li: {
-      "margin-bottom": "calc(1.45rem / 2)",
+      marginBottom: "calc(1.45rem / 2)",
     },
     "ol li": {
-      "padding-left": "0",
+      paddingInlineStart: "0",
     },
     "ul li": {
-      "padding-left": "0",
+      paddingInlineStart: "0",
     },
     "li > ol": {
-      "margin-left": "1.45rem",
-      "margin-bottom": "calc(1.45rem / 2)",
-      "margin-top": "calc(1.45rem / 2)",
+      marginInlineStart: "1.45rem",
+      marginBottom: "calc(1.45rem / 2)",
+      marginTop: "calc(1.45rem / 2)",
     },
     "li > ul": {
-      "margin-left": "1.45rem",
-      "margin-bottom": "calc(1.45rem / 2)",
-      "margin-top": "calc(1.45rem / 2)",
+      marginInlineStart: "1.45rem",
+      marginBottom: "calc(1.45rem / 2)",
+      marginTop: "calc(1.45rem / 2)",
     },
 
     "li *:last-child": {
-      "margin-bottom": "0",
+      marginBottom: "0",
     },
     "li > p": {
-      "margin-bottom": "calc(1.45rem / 2)",
+      marginBottom: "calc(1.45rem / 2)",
     },
     // Anchor tag styles
     // Selected specifically for mdx rendered side icon link