Start disentangling dependencies in playground SCSS

src/styles/ui-playground/_client.scss

+@use '../sidebar/buttons';

src/styles/ui-playground/_shared.scss

+@use '../reset';
+// TODO: Remove dependencies here
+@use '../sidebar/elements';
+@use '../variables' as var;
+
+@use '../shared';
+
+body {
+  font-size: 100%;
+}
+
+h1 {
+  font-size: 1.75em;
+  font-weight: bold;
+}
+
+h2 {
+  font-size: 1.5em;
+  width: 100%;
+  border-left: 6px solid var.$color-brand;
+  font-weight: bold;
+  padding-left: 0.5em;
+}
+
+h3 {
+  font-size: 1.125em;
+  font-weight: normal;
+  font-style: italic;
+  margin: 1em 0;
+}
+
+h4 {
+  font-size: 1em;
+  font-weight: 500;
+  font-style: italic;
+}
+
+pre {
+  margin: 0;
+}
+
+// Utilities
+.u-center {
+  align-self: center;
+}
+
+// Component styles
+.PlaygroundApp {
+  display: grid;
+  grid-template-areas:
+    'navigation'
+    'content';
+
+  &__content {
+    padding: 1em;
+  }
+
+  &__sidebar {
+    grid-area: 'navigation';
+    max-height: 20em;
+    overflow: scroll;
+    background-color: var.$grey-2;
+  }
+
+  &__sidebar-home {
+    text-align: center;
+    padding: 1em;
+  }
+
+  &__content {
+    grid-area: 'content';
+  }
+}
+
+.PlaygroundApp__nav-link {
+  width: 100%;
+  padding: 1em;
+  font-size: 16px; // TODO: variable later
+  border-left: 5px solid transparent;
+  &:hover {
+    background-color: var.$grey-3;
+    border-left: 5px solid var.$color-brand;
+  }
+}
+
+.PatternPage {
+  font-size: 14px;
+
+  &__content {
+    padding: 2em 0;
+  }
+}
+
+.Pattern {
+  margin: 0 0 4em 1em;
+  p {
+    margin: 1em;
+    margin-left: 0;
+  }
+
+  & > p:first-of-type {
+    font-size: 125%;
+  }
+
+  h2 {
+    margin-left: -1em;
+  }
+}
+
+.PatternExamples {
+  border: 1px solid var.$grey-3;
+  border-collapse: collapse;
+  width: 100%;
+  margin-top: 1em;
+  margin-bottom: 2em;
+
+  th,
+  td {
+    padding: 0.5em;
+  }
+
+  th {
+    background-color: var.$grey-1;
+    border-bottom: 1px solid var.$grey-3;
+    text-align: left;
+  }
+
+  td {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  tr:nth-child(even) {
+    background: var.$grey-0;
+  }
+
+  code {
+    color: var.$grey-mid;
+  }
+}
+
+.PatternExample {
+  &__example {
+    display: flex;
+    align-items: center;
+    & > * + * {
+      margin-left: 1em;
+    }
+  }
+}
+
+// Element styles
+body {
+  font-family: sans-serif;
+}
+
+@media screen and (min-width: 60em) {
+  .PlaygroundApp {
+    height: 100vh;
+    grid-template-columns: 20em auto;
+    column-gap: 1em;
+    grid-template-areas: 'navigation content';
+
+    &__sidebar {
+      max-height: none;
+    }
+  }
+}

src/styles/ui-playground/ui-playground.scss

-@use '../reset';
-@use '../sidebar/elements';
-@use '../mixins/layout';
-@use '../variables' as var;
-
-@use '../shared';
-@use '../sidebar/components/Menu';
-@use '../sidebar/components/MenuItem';
-
-$title-font: 20pt;
-$background-color: #9b9595;
-
-body {
-  font-size: 100%;
-}
-
-h1 {
-  font-size: 1.75em;
-  font-weight: bold;
-}
-
-h2 {
-  font-size: 1.5em;
-  width: 100%;
-  border-left: 6px solid var.$color-brand;
-  font-weight: bold;
-  padding-left: 0.5em;
-}
-
-h3 {
-  font-size: 1.125em;
-  font-weight: normal;
-  font-style: italic;
-  margin: 1em 0;
-}
-
-h4 {
-  font-size: 1em;
-  font-weight: 500;
-  font-style: italic;
-}
-
-pre {
-  margin: 0;
-}
-
-// Utilities
-.u-center {
-  align-self: center;
-}
-
-// Component styles
-.PlaygroundApp {
-  display: grid;
-  grid-template-areas:
-    'navigation'
-    'content';
-
-  &__content {
-    padding: var.$layout-space;
-  }
-
-  &__sidebar {
-    grid-area: 'navigation';
-    max-height: 20em;
-    overflow: scroll;
-    background-color: var.$grey-2;
-  }
-
-  &__sidebar-home {
-    text-align: center;
-    padding: var.$layout-space;
-  }
-
-  &__content {
-    grid-area: 'content';
-  }
-}
-
-.PlaygroundApp__nav-link {
-  width: 100%;
-  padding: var.$layout-space;
-  font-size: var.$font-size--subheading;
-  border-left: 5px solid transparent;
-  &:hover {
-    background-color: var.$grey-3;
-    border-left: 5px solid var.$color-brand;
-  }
-}
-
-.PatternPage {
-  font-size: 14px;
-
-  &__content {
-    padding: 2em 0;
-  }
-}
-
-.Pattern {
-  margin: 0 0 4em 1em;
-  p {
-    margin: 1em;
-    margin-left: 0;
-  }
-
-  & > p:first-of-type {
-    font-size: 125%;
-  }
-
-  h2 {
-    margin-left: -1em;
-  }
-}
-
-.PatternExamples {
-  border: 1px solid var.$grey-3;
-  border-collapse: collapse;
-  width: 100%;
-  margin-top: 1em;
-  margin-bottom: 2em;
-
-  th,
-  td {
-    padding: 0.5em;
-  }
-
-  th {
-    background-color: var.$grey-1;
-    border-bottom: 1px solid var.$grey-3;
-    text-align: left;
-  }
-
-  td {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-
-  tr:nth-child(even) {
-    background: var.$grey-0;
-  }
-
-  code {
-    color: var.$grey-mid;
-  }
-}
-
-.PatternExample {
-  &__example {
-    display: flex;
-    align-items: center;
-    & > * + * {
-      margin-left: 1em;
-    }
-  }
-}
-
-// Element styles
-body {
-  font-family: sans-serif;
-}
-
-@media screen and (min-width: 60em) {
-  .PlaygroundApp {
-    height: 100vh;
-    grid-template-columns: 20em auto;
-    column-gap: 1em;
-    grid-template-areas: 'navigation content';
-
-    &__sidebar {
-      max-height: none;
-    }
-  }
-}
+@use 'shared';
+@use 'client';