@orangesk/orange-design-system 3.12.0 → 4.0.0

package/src/styles/base/globals.scss

@@ -1,47 +1,11 @@
 @use "../tokens/base";
 @use "../tokens/space";
 @use "../tokens/color-vars";
+@use "./header-height";
 
 :root,
 :host {
   --extra-scroll-margin: 0;
-  --header-height: 80px;
-}
-
-@media screen and (min-width: 992px) {
-  :root,
-  :host {
-    --header-height: 120px;
-  }
-
-  html:has(
-    .megamenu:not(.non-sticky):not(.top-hidden)
-      .megamenu__nav-logo
-      > [data-megamenu-brand-mark]
-      + span
-  ) {
-    --header-height: 107px;
-  }
-
-  html:has(
-      .megamenu:not(.non-sticky):not(.top-hidden)
-        .megamenu__nav-logo
-        > [data-megamenu-brand-mark]
-    ):not(
-      :has(
-        .megamenu:not(.non-sticky):not(.top-hidden)
-          .megamenu__nav-logo
-          > [data-megamenu-brand-mark]
-          + span
-      )
-    ) {
-    --header-height: 147px;
-  }
-
-  html:has(.megamenu:not(.non-sticky).top-hidden),
-  html:has(.megamenu:not(.non-sticky) + .megamenu-spacer--small) {
-    --header-height: 80px;
-  }
 }
 
 :target {

package/src/styles/base/header-height-values.scss

@@ -0,0 +1,9 @@
+// Shared geometry and timing for Megamenu, spacers, and vendor sticky offsets.
+$collapsed: 80px;
+$top: 40px;
+$brand-main: 107px;
+$desktop: $top + $collapsed;
+$brand: $top + $brand-main;
+$brand-with-title: $brand-main;
+$mobile-spacer: 60px;
+$transition: 0.2s ease-in-out;

package/src/styles/base/header-height.scss

@@ -0,0 +1,50 @@
+@use "./header-height-values" as heights;
+
+:root,
+:host {
+  --header-height: #{heights.$mobile-spacer};
+  --header-transition: #{heights.$transition};
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  :host {
+    --header-transition: 0s;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  :root,
+  :host {
+    --header-height: #{heights.$desktop};
+  }
+
+  html:has(
+    .megamenu:not(.non-sticky):not(.top-hidden)
+      .megamenu__nav-logo
+      > [data-megamenu-brand-mark]
+      + span
+  ) {
+    --header-height: #{heights.$brand-with-title};
+  }
+
+  html:has(
+      .megamenu:not(.non-sticky):not(.top-hidden)
+        .megamenu__nav-logo
+        > [data-megamenu-brand-mark]
+    ):not(
+      :has(
+        .megamenu:not(.non-sticky):not(.top-hidden)
+          .megamenu__nav-logo
+          > [data-megamenu-brand-mark]
+          + span
+      )
+    ) {
+    --header-height: #{heights.$brand};
+  }
+
+  html:has(.megamenu:not(.non-sticky).top-hidden),
+  html:has(.megamenu:not(.non-sticky) + .megamenu-spacer--small) {
+    --header-height: #{heights.$collapsed};
+  }
+}

package/src/styles/base/styleguide.scss

@@ -9,7 +9,6 @@
 
 main {
   min-height: 100vh;
-  padding-top: var(--header-height, 80px);
 }
 
 .l-debug {