gatsbyjs · gatsbybot · Jun 27, 2020 · Jun 25, 2020 · Jun 25, 2020 · Jun 25, 2020
diff --git a/www/src/components/banner.js b/www/src/components/banner.js
@@ -28,17 +28,15 @@ const InnerContainer = ({ children }) => (
 const Content = ({ children }) => (
   <div
     sx={{
-      color: t => t.colors.whiteFade[80],
-      fontFamily: t => t.fonts.heading,
-      px: t => t.space[6],
+      color: `whiteFade.80`,
+      fontFamily: `heading`,
+      px: 6,
       whiteSpace: `nowrap`,
       a: {
-        color: t => t.colors.white,
+        color: `white`,
         borderBottom: t => `1px solid ${t.colors.white}`,
-
         "&:hover": {
-          color: t => t.colors.white,
-          borderBottom: t => `1px solid ${t.colors.white}`,
+          borderBottom: 0,
         },
       },
     }}

diff --git a/www/src/components/code-block/index.js b/www/src/components/code-block/index.js
@@ -52,8 +52,8 @@ const CodeBlock = ({
                   fileName={title}
                   sx={{
                     position: `absolute`,
-                    right: t => t.space[1],
-                    top: t => t.space[1],
+                    right: 1,
+                    top: 1,
                     borderRadius: 2,
                   }}
                   content={content}

diff --git a/www/src/components/diagram.js b/www/src/components/diagram.js
@@ -34,7 +34,7 @@ const SegmentTitle = ({ children }) => (
     sx={{
       bg: `accent`,
       borderRadius: 1,
-      bottom: t => `-${t.space[2]}`,
+      bottom: -2,
       color: `black`,
       display: `inline`,
       fontSize: 1,

diff --git a/www/src/components/layer-model/model-wrapper.js b/www/src/components/layer-model/model-wrapper.js
@@ -80,7 +80,7 @@ const CodeWrapper = ({
           <button
             sx={{
               position: `absolute`,
-              right: t => t.space[3],
+              right: 3,
               backgroundColor: `transparent`,
               border: `none`,
               color: `grey.60`,

diff --git a/www/src/components/modal.js b/www/src/components/modal.js
@@ -129,8 +129,8 @@ export default function Modal({
                 height: 40,
                 left: `auto`,
                 position: `absolute`,
-                right: t => t.space[7],
-                top: t => t.space[8],
+                right: 7,
+                top: 8,
                 width: 40,
                 "&:hover": {
                   bg: `ui.hover`,

diff --git a/www/src/components/pagination/index.js b/www/src/components/pagination/index.js
@@ -35,7 +35,7 @@ class Pagination extends React.Component {
         sx={{
           display: `flex`,
           justifyContent: `space-between`,
-          margin: t => `0 -${t.space[6]}`,
+          mx: -6,
           p: 6,
           flexDirection: `column`,
           fontSize: 1,

diff --git a/www/src/components/sidebar/section-title.js b/www/src/components/sidebar/section-title.js
@@ -74,7 +74,7 @@ const Title = ({ item }) => (
       alignItems: `center`,
       display: `flex`,
       paddingLeft: indention(item.level),
-      minHeight: 40,
+      minHeight: `sidebarItemMinHeight`,
     }}
   >
     <SectionHeading disabled item={item}>
@@ -95,17 +95,17 @@ const TitleButton = ({ item, uid }) => {
       sx={{
         ...styles.resetButton,
         ...styles.button,
-        pl: item.level === 0 ? 6 : 0,
-        pr: `0 !important`,
-        minHeight: 40,
+        pl: indention(item.level),
+        pr: t => t.sizes.sidebarItemMinHeight,
+        minHeight: `sidebarItemMinHeight`,
         "&:before": {
           bg: `itemBorderColor`,
           content: `''`,
           height: 1,
           position: `absolute`,
           right: 0,
           bottom: 0,
-          left: t => (item.level === 0 ? t.space[6] : 0),
+          left: indention(item.level),
           top: `auto`,
         },
       }}

diff --git a/www/src/components/sidebar/sticky-responsive-sidebar.js b/www/src/components/sidebar/sticky-responsive-sidebar.js
@@ -67,14 +67,14 @@ export default function StickyResponsiveSidebar(props) {
         sx={{
           backgroundColor: `gatsby`,
           borderRadius: `50%`,
-          bottom: t => t.space[11],
+          bottom: 11,
           boxShadow: `dialog`,
           cursor: `pointer`,
           display: `flex`,
           height: t => t.space[10],
           justifyContent: `space-around`,
           position: `fixed`,
-          right: t => t.space[6],
+          right: 6,
           visibility: `visible`,
           width: t => t.space[10],
           zIndex: `floatingActionButton`,

diff --git a/www/src/components/skip-nav-link.js b/www/src/components/skip-nav-link.js
@@ -19,8 +19,8 @@ const Link = () => (
       ":focus": {
         clip: `auto`,
         height: `auto`,
-        left: t => t.space[6],
-        padding: t => t.space[4],
+        left: 6,
+        padding: 4,
         position: `fixed`,
         top: 6,
         width: `auto`,

diff --git a/www/src/templates/template-blog-list.js b/www/src/templates/template-blog-list.js
@@ -79,8 +79,7 @@ class BlogPostsIndex extends React.Component {
                   },
                 },
                 [mediaQueries.md]: {
-                  marginLeft: t => `-${t.space[9]}`,
-                  marginRight: t => `-${t.space[9]}`,
+                  mx: -9,
                 },
               }}
             />

diff --git a/www/src/templates/template-creator-details.js b/www/src/templates/template-creator-details.js
@@ -40,8 +40,8 @@ const MetaSection = ({ children, background, last, first }) => (
   <div
     sx={{
       background: background ? background : `ui.background`,
-      mx: t => `-${t.space[5]}`,
-      p: 5,
+      mx: -6,
+      p: 6,
       borderTop: t => (first ? `1px solid ${t.colors.ui.border}` : null),
       borderBottom: t => (last ? null : `1px solid ${t.colors.ui.border}`),
       [breakpoint2Columns]: {

diff --git a/www/src/views/showcase/featured-sites.js b/www/src/views/showcase/featured-sites.js
@@ -47,10 +47,10 @@ const GradientOverlay = () => {
             gradientColor,
             1
           )} 100%)`,
-        bottom: t => t.space[6],
+        bottom: 6,
         pointerEvents: `none`,
         position: `absolute`,
-        right: t => `-${t.space[6]}`,
+        right: -6,
         top: 0,
         width: 60,
       }}
@@ -161,9 +161,10 @@ class FeaturedSites extends Component {
               borderBottom: t => `1px solid ${t.colors.ui.border}`,
               display: `flex`,
               flexShrink: 0,
-              margin: t => `0 -${t.space[6]}`,
+              mx: -6,
               overflowX: `scroll`,
-              padding: t => `${t.space[6]} ${t.space[6]} 0`,
+              pt: 6,
+              px: 6,
             }}
           >
             {featured.slice(0, 9).map(node => (

diff --git a/www/src/views/starter/source.js b/www/src/views/starter/source.js
@@ -72,7 +72,7 @@ const Source = ({ startersYaml, repoUrl, starter }) => (
         sx={{
           "&&": {
             borderBottom: 0,
-            marginRight: t => t.space[4],
+            mr: 4,
           },
         }}
       >