Mobile first approach

src/core/client/ui/components/MatchMedia/MatchMedia.tsx

@@ -23,12 +23,12 @@ interface InnerProps {
 }
 
 const MatchMedia: StatelessComponent<InnerProps> = props => {
-  // TODO: Temporarily map newer speech to older aural type until
-  // react-responsive supports the speech prop.
   const { speech, minWidth, maxWidth, ...rest } = props;
   const mapped = {
+    // TODO: Temporarily map newer speech to older aural type until
+    // react-responsive supports the speech prop.
     aural: speech,
-    minWidth: minWidth ? theme.breakpoints[minWidth] : undefined,
+    minWidth: minWidth ? theme.breakpoints[minWidth] + 1 : undefined,
     maxWidth: maxWidth ? theme.breakpoints[maxWidth] : undefined,
   };
   return <Responsive {...rest} {...mapped} />;

src/core/client/ui/theme/global.css

@@ -1,5 +0,0 @@
-@media (max-width: $breakpoints-sm) {
-  :root {
-    --spacing-unit: calc(0.5 * var(--spacing-unit));
-  }
-}

src/core/client/ui/theme/variables.css

@@ -0,0 +1,16 @@
+/*
+  Variables defined in `variables.ts` are already available
+  flattened and in kebab case.
+
+  These are additionally variables we define.
+*/
+
+:root {
+  --spacing-unit: var(--spacing-unit-small);
+}
+
+@media (min-width: $breakpoints-xs) {
+  :root {
+    --spacing-unit: var(--spacing-unit-large);
+  }
+}

src/core/client/ui/theme/variables.ts

@@ -58,7 +58,8 @@ const variables = {
     },
   },
   /* gitter and spacing */
-  spacingUnit: 10,
+  spacingUnitSmall: 5,
+  spacingUnitLarge: 10,
   /* Borders */
   roundCorners: "2px",
   /* Typography */