Split styleguide CSS into modular files per section/pattern/layout/page

styles/03-typography-helpers.css

@@ -0,0 +1,67 @@
+/* ========================================================= */
+/* Typography helpers                                         */
+/* ========================================================= */
+
+.sg-body,
+.sg-strong,
+.sg-section-title,
+.sg-bar-label,
+.sg-table-label,
+.sg-table-value {
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+}
+
+.sg-body,
+.sg-section-title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+}
+
+.sg-body {
+  margin: 0 0 var(--spacing-large) 0;
+}
+
+.sg-strong,
+.sg-bar-label {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+}
+
+.sg-table-label {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-regular);
+}
+
+.sg-table-value {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-semibold);
+}
+
+.sg-index a {
+  color: var(--color-font-hyperlink);
+}
+
+.sg-index .sg-sub-heading {
+  color: var(--color-font-light);
+}
+
+.sg-foundation-table {
+  width: 100%;
+  margin-bottom: var(--spacing-large);
+  color: var(--color-font-light);
+  border: 1px solid var(--color-white);
+}
+
+.sg-foundation-table th,
+.sg-foundation-table td {
+  color: var(--color-font-light);
+  border: 1px solid var(--color-white);
+  vertical-align: top;
+}
+
+.sg-section-h2,
+.sg-section-h3 {
+  margin: 0 0 var(--spacing-small) 0;
+  color: var(--color-font-light);
+}