Cleanup global styles

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",
@@ -22,7 +22,7 @@ const colors = {
     800: "#451900",
   },
   red: {
-    600: "#b80000",
+    500: "#b80000",
   },
   green: {
     500: "#109e62",

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

@@ -34,12 +34,12 @@ 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",
+    error: "red.500",
     attention: "yellow.200",
   },
 }

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

@@ -1,21 +1,110 @@
+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
+    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,
+    },
+    // 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",
+    },
   }),
 }
 

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

@@ -29,6 +29,13 @@ 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",
+  },
   styles,
   ...foundations,
   semanticTokens,