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

2026-05-25 08:29:52 +02:00
parent e13ce0ad23
commit 3e9c273823
18 changed files with 3273 additions and 3256 deletions
@@ -0,0 +1,97 @@
+/* ========================================================= */
+/* Base                                                       */
+/* ========================================================= */
+
+body {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-base);
+  color: var(--color-font-dark);
+  background: var(--color-background-purple);
+  margin: 0;
+  padding: var(--spacing-small);
+}
+
+@media (max-width: 48rem) {
+  :root {
+    --layout-tab-navigation-large-padding-inline: 0.7rem;
+  }
+
+  body {
+    padding: var(--spacing-small);
+  }
+}
+
+section {
+  margin-bottom: var(--spacing-large);
+}
+
+section + section {
+  margin-top: var(--spacing-large);
+}
+
+.sg-main-heading {
+  margin: 0 0 var(--spacing-large) 0;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-brand);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-base);
+  color: var(--color-font-light);
+}
+
+.sg-sub-heading {
+  margin: 0 0 var(--spacing-large) 0;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-base);
+}
+
+.sg-text-on-dark {
+  color: var(--color-font-light);
+}
+
+.sg-brand-title {
+  margin: 0 0 var(--spacing-large) 0;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-brand);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-base);
+}
+
+.sg-heading-h1 {
+  margin: 0 0 calc(var(--spacing-large) - 0.5rem) 0;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-h1);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-base);
+}
+
+.sg-heading-h2 {
+  margin: 0 0 var(--spacing-large) 0;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-h2);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-base);
+}
+
+.sg-preview-label {
+  margin: 0 0 var(--spacing-small) 0;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-base);
+  color: var(--color-font-light);
+}
+
+.sg-preview-area {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-small);
+  align-items: var(--layout-preview-align-items);
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+}
+