From be7a403472b6a43ccf883a4888c470f3d813611e Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Wed, 24 Aug 2022 11:10:26 -0300
Subject: [PATCH 1/5] remove legacy global reset css

---
 src/@chakra-ui/gatsby-plugin/styles.ts |   9 +
 src/@chakra-ui/gatsby-plugin/theme.ts  |   5 +
 src/components/GlobalStyle.tsx         | 636 -------------------------
 3 files changed, 14 insertions(+), 636 deletions(-)

diff --git a/src/@chakra-ui/gatsby-plugin/styles.ts b/src/@chakra-ui/gatsby-plugin/styles.ts
index aef4806b0c8..949cae0548b 100644
--- a/src/@chakra-ui/gatsby-plugin/styles.ts
+++ b/src/@chakra-ui/gatsby-plugin/styles.ts
@@ -16,6 +16,15 @@ const styles = {
     body: {
       lineHeight: "1.6rem",
     },
+    // should be replace with https://chakra-ui.com/docs/components/text
+    p: {
+      margin: "0px 0px 1.45rem",
+    },
+    // should be replace with https://chakra-ui.com/docs/components/list
+    "ul, ol": {
+      margin: "0px 0px 1.45rem 1.45rem",
+      padding: 0,
+    },
   }),
 }
 
diff --git a/src/@chakra-ui/gatsby-plugin/theme.ts b/src/@chakra-ui/gatsby-plugin/theme.ts
index 1a393983b3b..f333c0c1bfa 100644
--- a/src/@chakra-ui/gatsby-plugin/theme.ts
+++ b/src/@chakra-ui/gatsby-plugin/theme.ts
@@ -29,6 +29,11 @@ const config: ThemeConfig = {
  */
 const theme: ThemeOverride = {
   config,
+  fonts: {
+    heading:
+      "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+    body: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+  },
   styles,
   ...foundations,
   semanticTokens,
diff --git a/src/components/GlobalStyle.tsx b/src/components/GlobalStyle.tsx
index 7ad985bca6f..67ff9a0c9d3 100644
--- a/src/components/GlobalStyle.tsx
+++ b/src/components/GlobalStyle.tsx
@@ -13,648 +13,12 @@ import { Global, css, useTheme } from "@emotion/react"
  * TODO: remove this file when all of our components use the new theme
  */
 
-// legacy global styles from the old `src/styles/layout.css`
-const oldLayoutCSS = css`
-  html {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-      Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
-      Segoe UI Symbol;
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-    font-size: 1rem;
-  }
-  body {
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  article,
-  aside,
-  details,
-  figcaption,
-  figure,
-  footer,
-  header,
-  main,
-  menu,
-  nav,
-  section,
-  summary {
-    display: block;
-  }
-  audio,
-  canvas,
-  progress,
-  video {
-    display: inline-block;
-  }
-  audio:not([controls]) {
-    display: none;
-    height: 0;
-  }
-  progress {
-    vertical-align: baseline;
-  }
-  [hidden],
-  template {
-    display: none;
-  }
-  a {
-    background-color: transparent;
-    text-decoration: none;
-    -webkit-text-decoration-skip: objects;
-  }
-  a:active,
-  a:hover {
-    outline-width: 0;
-  }
-  abbr[title] {
-    border-bottom: none;
-    text-decoration: underline;
-    text-decoration: underline dotted;
-  }
-  b,
-  strong {
-    font-weight: inherit;
-    font-weight: bolder;
-  }
-  dfn {
-    font-style: italic;
-  }
-  mark {
-    background-color: #ffff00;
-    color: #000000;
-  }
-  small {
-    font-size: 80%;
-  }
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.5em;
-  }
-  img {
-    border-style: none;
-  }
-  svg:not(:root) {
-    overflow: hidden;
-  }
-  code,
-  kbd,
-  pre,
-  samp {
-    font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-      "Liberation Mono", Menlo, Courier, monospace;
-    font-size: 1em;
-  }
-  figure {
-    margin: 1em 40px;
-  }
-  hr {
-    box-sizing: content-box;
-    height: 0;
-    overflow: visible;
-  }
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font: inherit;
-    margin: 0;
-  }
-  optgroup {
-    font-weight: 700;
-  }
-  button,
-  input {
-    overflow: visible;
-  }
-  button,
-  select {
-    text-transform: none;
-  }
-  [type="reset"],
-  [type="submit"],
-  button,
-  html [type="button"] {
-    -webkit-appearance: button;
-  }
-  [type="button"]::-moz-focus-inner,
-  [type="reset"]::-moz-focus-inner,
-  [type="submit"]::-moz-focus-inner,
-  button::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-  }
-  [type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring,
-  button:-moz-focusring {
-    outline: 1px dotted ButtonText;
-  }
-  fieldset {
-    border: 1px solid silver;
-    margin: 0 2px;
-    padding: 0.35em 0.625em 0.75em;
-  }
-  legend {
-    box-sizing: border-box;
-    color: inherit;
-    display: table;
-    max-width: 100%;
-    padding: 0;
-    white-space: normal;
-  }
-  textarea {
-    overflow: auto;
-  }
-  [type="checkbox"],
-  [type="radio"] {
-    box-sizing: border-box;
-    padding: 0;
-  }
-  [type="number"]::-webkit-inner-spin-button,
-  [type="number"]::-webkit-outer-spin-button {
-    height: auto;
-  }
-  [type="search"] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-  }
-  [type="search"]::-webkit-search-cancel-button,
-  [type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  ::-webkit-input-placeholder {
-    color: inherit;
-    opacity: 0.54;
-  }
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit;
-  }
-  html {
-    font: 100%/1.6em georgia, serif;
-    box-sizing: border-box;
-    overflow-y: scroll;
-  }
-  * {
-    box-sizing: inherit;
-    scroll-margin-top: 6rem;
-  }
-  *:before {
-    box-sizing: inherit;
-  }
-  *:after {
-    box-sizing: inherit;
-  }
-  body {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-      Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
-      Segoe UI Symbol;
-    font-weight: normal;
-    word-wrap: break-word;
-    font-kerning: normal;
-    -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-    -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-    -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-    font-feature-settings: "kern", "liga", "clig", "calt";
-  }
-  img {
-    max-width: 100%;
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-  }
-  h1 {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-    color: inherit;
-    font-weight: 500;
-    text-rendering: optimizeLegibility;
-    font-size: 2.25rem;
-    line-height: 1.1;
-  }
-  h2 {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-    color: inherit;
-    font-weight: 700;
-    text-rendering: optimizeLegibility;
-    font-size: 1.62671rem;
-    line-height: 1.1;
-  }
-  h3 {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 2rem;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-    color: inherit;
-    font-weight: 500;
-    text-rendering: optimizeLegibility;
-    font-size: 1.38316rem;
-    line-height: 1.1;
-  }
-  h4 {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 2rem;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-    color: inherit;
-    font-weight: 600;
-    text-rendering: optimizeLegibility;
-    font-size: 1.2rem;
-    line-height: 1.1;
-  }
-  h5 {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 2rem;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-    color: inherit;
-    font-weight: 500;
-    text-rendering: optimizeLegibility;
-    font-size: 1rem;
-    line-height: 1.1;
-  }
-  h6 {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-    color: inherit;
-    font-weight: 500;
-    text-rendering: optimizeLegibility;
-    font-size: 0.85028rem;
-    line-height: 1.1;
-  }
-  hgroup {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-  }
-  ul {
-    margin-left: 1.45rem;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-    list-style-position: outside;
-    list-style-image: none;
-  }
-  ol {
-    margin-left: 1.45rem;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-    list-style-position: outside;
-    list-style-image: none;
-  }
-  dl {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-  }
-  dd {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-  }
-  p {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-  }
-  figure {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-  }
-  pre {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    margin-bottom: 1.45rem;
-    font-size: 0.85rem;
-    line-height: 1.42;
-    background: hsla(0, 0%, 0%, 0.04);
-    border-radius: 3px;
-    overflow: auto;
-    word-wrap: normal;
-    white-space: pre-wrap;
-    padding: 1.45rem;
-  }
-  table {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-    font-size: 1rem;
-    line-height: 1.45rem;
-    border-collapse: collapse;
-    width: 100%;
-  }
-  th,
-  td {
-    hyphens: auto;
-  }
-  fieldset {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-  }
-  blockquote {
-    margin-left: 1.45rem;
-    margin-right: 1.45rem;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-  }
-  form {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-  }
-  noscript {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-  }
-  iframe {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-  }
-  hr {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 4rem;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 0;
-    background: hsla(0, 0%, 0%, 0.2);
-    border: none;
-    height: 1px;
-  }
-  address {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    margin-bottom: 1.45rem;
-  }
-  b {
-    font-weight: bold;
-  }
-  strong {
-    font-weight: bold;
-  }
-  dt {
-    font-weight: bold;
-  }
-  th {
-    font-weight: bold;
-  }
-  li {
-    margin-bottom: calc(1.45rem / 2);
-  }
-  ol li {
-    padding-left: 0;
-  }
-  ul li {
-    padding-left: 0;
-  }
-  li > ol {
-    margin-left: 1.45rem;
-    margin-bottom: calc(1.45rem / 2);
-    margin-top: calc(1.45rem / 2);
-  }
-  li > ul {
-    margin-left: 1.45rem;
-    margin-bottom: calc(1.45rem / 2);
-    margin-top: calc(1.45rem / 2);
-  }
-  blockquote *:last-child {
-    margin-bottom: 0;
-  }
-  li *:last-child {
-    margin-bottom: 0;
-  }
-  p *:last-child {
-    margin-bottom: 0;
-  }
-  li > p {
-    margin-bottom: calc(1.45rem / 2);
-  }
-  code {
-    font-size: 1em;
-    line-height: 1.45em;
-  }
-  kbd {
-    font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-      "Liberation Mono", Menlo, Courier, monospace;
-    font-size: 0.625rem;
-    line-height: 1.56rem;
-  }
-  samp {
-    font-size: 0.85rem;
-    line-height: 1.45rem;
-  }
-  abbr {
-    border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-    cursor: help;
-  }
-  acronym {
-    border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-    cursor: help;
-  }
-  abbr[title] {
-    border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-    cursor: help;
-    text-decoration: none;
-  }
-  thead {
-    text-align: left;
-  }
-  td,
-  th {
-    text-align: left;
-    border-bottom: 1px solid hsla(0, 13%, 72%, 0.12);
-    font-feature-settings: "tnum";
-    -moz-font-feature-settings: "tnum";
-    -ms-font-feature-settings: "tnum";
-    -webkit-font-feature-settings: "tnum";
-    padding-left: 0.96667rem;
-    padding-right: 0.96667rem;
-    padding-top: 0.725rem;
-    padding-bottom: calc(0.725rem - 1px);
-  }
-  th:first-child,
-  td:first-child {
-    padding-left: 0;
-  }
-  th:last-child,
-  td:last-child {
-    padding-right: 0;
-  }
-  tt {
-    background-color: hsla(255, 13%, 18%, 1);
-    color: #968af6;
-    border-radius: 2px;
-    font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-      "Liberation Mono", Menlo, Courier, monospace;
-    padding: 0.2em;
-  }
-  code {
-    background-color: hsla(0, 0%, 0%, 0.04);
-    border-radius: 3px;
-    font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-      "Liberation Mono", Menlo, Courier, monospace;
-    padding: 0.2em;
-  }
-  pre code {
-    background: none;
-    line-height: 1.42;
-  }
-  code:before,
-  tt:before,
-  tt:after,
-  pre code:before,
-  pre code:after,
-  pre tt:before,
-  pre tt:after {
-    content: "";
-  }
-  @media only screen and (max-width: 480px) {
-    html {
-      font-size: 100%;
-    }
-  }
-
-  /* Assets page */
-
-  .assets-page .gatsby-resp-image-wrapper {
-    max-height: 200px !important;
-  }
-  .assets-page .gatsby-resp-image-image {
-    width: auto !important;
-  }
-`
-
 const GlobalStyle: React.FC = () => {
   const theme = useTheme()
 
   return (
     <Global
       styles={css`
-        ${oldLayoutCSS}
-
         body {
           background-color: ${theme.colors.background};
           color: ${theme.colors.text};

From 005c59a6acb1abc2d51b43487af460d418fbda9c Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Wed, 24 Aug 2022 18:43:11 -0300
Subject: [PATCH 2/5] delete old reset css rules and move all the rest of old
 global styles into the chakra theme configuration file

---
 .../gatsby-plugin/foundations/colors.ts       |  2 +-
 .../gatsby-plugin/semanticTokens.ts           |  8 +-
 src/@chakra-ui/gatsby-plugin/styles.ts        | 96 +++++++++++++++++--
 src/@chakra-ui/gatsby-plugin/theme.ts         |  2 +
 src/components/Layout.tsx                     |  2 -
 5 files changed, 95 insertions(+), 15 deletions(-)

diff --git a/src/@chakra-ui/gatsby-plugin/foundations/colors.ts b/src/@chakra-ui/gatsby-plugin/foundations/colors.ts
index f9d5cbdb5e6..39b2f944f32 100644
--- a/src/@chakra-ui/gatsby-plugin/foundations/colors.ts
+++ b/src/@chakra-ui/gatsby-plugin/foundations/colors.ts
@@ -1,7 +1,7 @@
 export type Colors = typeof colors
 
 const colors = {
-  grey: {
+  gray: {
     100: "#f7f7f7",
     300: "#d4d4d4",
     400: "#b0b0b0",
diff --git a/src/@chakra-ui/gatsby-plugin/semanticTokens.ts b/src/@chakra-ui/gatsby-plugin/semanticTokens.ts
index 31df24a9244..0307c75e378 100644
--- a/src/@chakra-ui/gatsby-plugin/semanticTokens.ts
+++ b/src/@chakra-ui/gatsby-plugin/semanticTokens.ts
@@ -34,10 +34,10 @@ const semanticTokens = {
     primaryLight: { _light: "blue.100", _dark: "orange.100" },
     primaryDark: { _light: "blue.700", _dark: "orange.800" },
     primaryHover: { _light: "blue.300", _dark: "orange.300" },
-    body: { _light: "grey.700", _dark: "grey.100" },
-    bodyLight: { _light: "grey.500", _dark: "grey.100" },
-    disabled: { _light: "grey.400", _dark: "grey.500" },
-    background: { _light: "white", _dark: "grey.700" },
+    body: { _light: "gray.700", _dark: "gray.100" },
+    bodyLight: { _light: "gray.500", _dark: "gray.100" },
+    disabled: { _light: "gray.400", _dark: "gray.500" },
+    background: { _light: "white", _dark: "gray.700" },
     success: "green.500",
     error: "red.600",
     attention: "yellow.200",
diff --git a/src/@chakra-ui/gatsby-plugin/styles.ts b/src/@chakra-ui/gatsby-plugin/styles.ts
index 949cae0548b..139f2c59cc6 100644
--- a/src/@chakra-ui/gatsby-plugin/styles.ts
+++ b/src/@chakra-ui/gatsby-plugin/styles.ts
@@ -1,19 +1,22 @@
+import { mode } from "@chakra-ui/theme-tools"
+
+import { lightTheme as oldTheme } from "../../theme"
+
 const styles = {
-  global: (_props) => ({
+  global: (props) => ({
     /**
-     * Current scenario: we have 2 places where global styles are defined.
-     * - Our legacy global styles under `src/components/GlobalStyle.ts`
-     * - Chakra also defines its own global styles. Check them here:
-     *  https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/styles.ts
+     * THESE ARE OLD GLOBAL STYLES - carried over from old css files
      *
-     * Having those 2 global styles creates some style conflicts. Here we
-     * override some of the default Chakra globals in order to keep the same
-     * styles as we had in the legacy one.
+     * They are needed just to keep style consistency as we transition out of
+     * the old styled components to Chakra.
      *
      * TODO: remove these overrides as we adopt the new Design System and we
      * don't need the global styles anymore
      */
     body: {
+      // TODO: when we have Chakra v2, this should be done by overriding the
+      // native Chakra semantic tokens
+      bg: mode("white", "gray.700")(props),
       lineHeight: "1.6rem",
     },
     // should be replace with https://chakra-ui.com/docs/components/text
@@ -25,6 +28,83 @@ const styles = {
       margin: "0px 0px 1.45rem 1.45rem",
       padding: 0,
     },
+    // YouTube embeds
+    iframe: {
+      display: "block",
+      maxWidth: "560px",
+      margin: "32px 0",
+    },
+    // should be replace by the usage of https://chakra-ui.com/docs/components/heading
+    // also, the media queries defined on each of these heading tags are bearly used
+    "h1,h2,h3,h4,h5,h6": {
+      margin: "2rem 0",
+      lineHeight: 1.4,
+      scrollMarginTop: "navHeight",
+      scrollSnapMargin: "navHeight",
+    },
+    h1: {
+      fontSize: "3rem",
+      fontWeight: 700,
+      [`@media (max-width: ${oldTheme.breakpoints.m})`]: {
+        fontSize: "2.5rem",
+      },
+    },
+    h2: {
+      fontSize: "2rem",
+      marginTop: "3rem",
+      fontWeight: 600,
+      [`@media (max-width: ${oldTheme.breakpoints.m})`]: {
+        fontSize: "1.5rem",
+      },
+    },
+    h3: {
+      fontSize: "1.5rem",
+      marginTop: "2.5rem",
+      fontWeight: 600,
+      [`@media (max-width: ${oldTheme.breakpoints.m})`]: {
+        fontSize: "1.25rem",
+      },
+    },
+    h4: {
+      fontSize: "1.25rem",
+      fontWeight: 500,
+      [`@media (max-width: ${oldTheme.breakpoints.m})`]: {
+        fontSize: "1rem",
+      },
+    },
+    h5: {
+      fontSize: "1rem",
+      fontWeight: 450,
+    },
+    h6: {
+      fontSize: "0.9rem",
+      fontWeight: 400,
+      textTransform: "uppercase",
+    },
+    // Anchor tag styles
+    // Selected specifically for mdx rendered side icon link
+    ".header-anchor": {
+      position: "relative",
+      display: "initial",
+      marginLeft: "-1.5em",
+      paddingRight: "0.5rem",
+      fontSize: "1rem",
+      verticalAlign: "middle",
+
+      svg: {
+        display: "inline",
+        fill: "primary",
+        visibility: "hidden",
+      },
+    },
+    "h1:hover,h2:hover,h3:hover,h4:hover,h5:hover,h6:hover": {
+      ".header-anchor svg": {
+        visibility: "visible",
+      },
+    },
+    ".header-anchor:focus svg": {
+      visibility: "visible",
+    },
   }),
 }
 
diff --git a/src/@chakra-ui/gatsby-plugin/theme.ts b/src/@chakra-ui/gatsby-plugin/theme.ts
index f333c0c1bfa..d979a4813f1 100644
--- a/src/@chakra-ui/gatsby-plugin/theme.ts
+++ b/src/@chakra-ui/gatsby-plugin/theme.ts
@@ -30,6 +30,8 @@ const config: ThemeConfig = {
 const theme: ThemeOverride = {
   config,
   fonts: {
+    // old fonts from the previous theme
+    // TODO: update the fonts when we transition to the Design System
     heading:
       "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
     body: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 97633d43f18..17f29c70d5a 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -7,7 +7,6 @@ import { IntlProvider } from "react-intl"
 import { LocaleProvider } from "gatsby-theme-i18n"
 
 import { lightTheme, darkTheme } from "../theme"
-import GlobalStyle from "./GlobalStyle"
 
 import Footer from "./Footer"
 import VisuallyHidden from "./VisuallyHidden"
@@ -146,7 +145,6 @@ const Layout: React.FC<IProps> = ({
       <IntlProvider locale={locale!} key={locale} messages={messages}>
         <ApolloProvider client={client}>
           <ThemeProvider theme={theme}>
-            <GlobalStyle />
             <SkipLink hrefId="#main-content" />
             <TranslationBanner
               shouldShow={shouldShowTranslationBanner}

From c62caa5e907629764ba07bc58276306702a72da0 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 25 Aug 2022 16:46:44 -0300
Subject: [PATCH 3/5] fix red color name

---
 src/@chakra-ui/gatsby-plugin/foundations/colors.ts | 2 +-
 src/@chakra-ui/gatsby-plugin/semanticTokens.ts     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/@chakra-ui/gatsby-plugin/foundations/colors.ts b/src/@chakra-ui/gatsby-plugin/foundations/colors.ts
index 39b2f944f32..468c3c1f034 100644
--- a/src/@chakra-ui/gatsby-plugin/foundations/colors.ts
+++ b/src/@chakra-ui/gatsby-plugin/foundations/colors.ts
@@ -22,7 +22,7 @@ const colors = {
     800: "#451900",
   },
   red: {
-    600: "#b80000",
+    500: "#b80000",
   },
   green: {
     500: "#109e62",
diff --git a/src/@chakra-ui/gatsby-plugin/semanticTokens.ts b/src/@chakra-ui/gatsby-plugin/semanticTokens.ts
index 0307c75e378..7adbb3436e7 100644
--- a/src/@chakra-ui/gatsby-plugin/semanticTokens.ts
+++ b/src/@chakra-ui/gatsby-plugin/semanticTokens.ts
@@ -39,7 +39,7 @@ const semanticTokens = {
     disabled: { _light: "gray.400", _dark: "gray.500" },
     background: { _light: "white", _dark: "gray.700" },
     success: "green.500",
-    error: "red.600",
+    error: "red.500",
     attention: "yellow.200",
   },
 }

From 45b35b1e0790127cb92e3c7941c56c796ad0683d Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 25 Aug 2022 17:31:06 -0300
Subject: [PATCH 4/5] delete GlobalStyle component as it is not used anymore

---
 src/components/GlobalStyle.tsx | 155 ---------------------------------
 1 file changed, 155 deletions(-)
 delete mode 100644 src/components/GlobalStyle.tsx

diff --git a/src/components/GlobalStyle.tsx b/src/components/GlobalStyle.tsx
deleted file mode 100644
index 67ff9a0c9d3..00000000000
--- a/src/components/GlobalStyle.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import React from "react"
-import { Global, css, useTheme } from "@emotion/react"
-
-/**
- * These are legacy global styles. Global styles that were created when
- * `styled-components` were used. We have merged all of those old global
- * styles in one place, this component.
- *
- * As we transition from our old theme `src/theme.ts` to our new theme
- * `src/@chakra-ui/gatsby-plugin/theme.ts`, we need to keep these
- * styles.
- *
- * TODO: remove this file when all of our components use the new theme
- */
-
-const GlobalStyle: React.FC = () => {
-  const theme = useTheme()
-
-  return (
-    <Global
-      styles={css`
-        body {
-          background-color: ${theme.colors.background};
-          color: ${theme.colors.text};
-        }
-        a {
-          color: ${theme.colors.primary};
-          text-decoration: underline;
-        }
-        mark {
-          background: ${theme.colors.markBackground};
-          box-shadow: inset 0 -2px 0 0 rgba(69, 142, 225, 0.8);
-        }
-
-        .anchor.before {
-          fill: ${theme.colors.text};
-        }
-
-        hr {
-          background: ${theme.colors.lightBorder};
-        }
-
-        /* YouTube embeds */
-        iframe {
-          display: block;
-          max-width: 560px;
-          margin: 32px 0;
-        }
-
-        h1 {
-          font-size: 3rem;
-          line-height: 1.4;
-          margin: 2rem 0;
-          font-weight: 700;
-          scroll-margin-top: ${theme.variables.navHeight};
-          scroll-snap-margin: ${theme.variables.navHeight};
-          @media (max-width: ${theme.breakpoints.m}) {
-            font-size: 2.5rem;
-          }
-        }
-
-        h2 {
-          font-size: 2rem;
-          line-height: 1.4;
-          margin: 2rem 0;
-          margin-top: 3rem;
-          font-weight: 600;
-          scroll-margin-top: ${theme.variables.navHeight};
-          scroll-snap-margin: ${theme.variables.navHeight};
-          @media (max-width: ${theme.breakpoints.m}) {
-            font-size: 1.5rem;
-          }
-        }
-
-        h3 {
-          font-size: 1.5rem;
-          line-height: 1.4;
-          margin: 2rem 0;
-          margin-top: 2.5rem;
-          font-weight: 600;
-          scroll-margin-top: ${theme.variables.navHeight};
-          scroll-snap-margin: ${theme.variables.navHeight};
-          @media (max-width: ${theme.breakpoints.m}) {
-            font-size: 1.25rem;
-          }
-        }
-
-        h4 {
-          font-size: 1.25rem;
-          line-height: 1.4;
-          font-weight: 500;
-          margin: 2rem 0;
-          scroll-margin-top: ${theme.variables.navHeight};
-          scroll-snap-margin: ${theme.variables.navHeight};
-          @media (max-width: ${theme.breakpoints.m}) {
-            font-size: 1rem;
-          }
-        }
-
-        h5 {
-          font-size: 1rem;
-          line-height: 1.4;
-          font-weight: 450;
-          margin: 2rem 0;
-          scroll-margin-top: ${theme.variables.navHeight};
-          scroll-snap-margin: ${theme.variables.navHeight};
-        }
-
-        h6 {
-          font-size: 0.9rem;
-          line-height: 1.4;
-          font-weight: 400;
-          text-transform: uppercase;
-          margin: 2rem 0;
-          scroll-margin-top: ${theme.variables.navHeight};
-          scroll-snap-margin: ${theme.variables.navHeight};
-        }
-
-        /* Anchor tag styles */
-        /* Selected specifically for mdx rendered side icon link */
-        .header-anchor {
-          position: relative;
-          display: initial;
-          margin-left: -1.5em;
-          padding-right: 0.5rem;
-          font-size: 1rem;
-          vertical-align: middle;
-
-          svg {
-            display: inline;
-            fill: ${theme.colors.primary};
-            visibility: hidden;
-          }
-        }
-
-        h1:hover,
-        h2:hover,
-        h3:hover,
-        h4:hover,
-        h5:hover,
-        h6:hover {
-          .header-anchor svg {
-            visibility: visible;
-          }
-        }
-
-        .header-anchor:focus svg {
-          visibility: visible;
-        }
-      `}
-    />
-  )
-}
-
-export default GlobalStyle

From 249ee2eb0dacd7d2849a7c886005b0f9bfca885f Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Fri, 2 Sep 2022 15:16:08 -0300
Subject: [PATCH 5/5] fix styles on header anchors

---
 src/@chakra-ui/gatsby-plugin/styles.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/@chakra-ui/gatsby-plugin/styles.ts b/src/@chakra-ui/gatsby-plugin/styles.ts
index 139f2c59cc6..688dbdbaece 100644
--- a/src/@chakra-ui/gatsby-plugin/styles.ts
+++ b/src/@chakra-ui/gatsby-plugin/styles.ts
@@ -84,10 +84,10 @@ const styles = {
     // Anchor tag styles
     // Selected specifically for mdx rendered side icon link
     ".header-anchor": {
-      position: "relative",
+      position: "relative !important",
       display: "initial",
       marginLeft: "-1.5em",
-      paddingRight: "0.5rem",
+      paddingRight: "0.5rem !important",
       fontSize: "1rem",
       verticalAlign: "middle",