@trebired/frontend 23.3.0 → 25.1.0

package/dist/layout/styles/site/menu.scss

@@ -0,0 +1,156 @@
+@use "@trebired/bundler/namespace" as ns;
+
+@function token($name, $fallback) {
+  @return var(#{ns.css-var("shell-header-" + $name)}, $fallback);
+}
+
+$motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.22, 1, 0.36, 1));
+$tone-motion: token("tone-duration", 320ms) token("tone-easing", cubic-bezier(0.22, 1, 0.36, 1));
+#{ns.element-class("site-header", "menu-content")} {
+  width: 100%;
+  max-width: token("max-width", 72rem);
+  box-sizing: border-box;
+  margin-inline: auto;
+  padding-inline: 1.5rem;
+}
+
+#{ns.element-class("site-header", "menu-group")} {
+  display: grid;
+}
+
+#{ns.element-class("site-header", "menu-group-links")} {
+  display: grid;
+  gap: token("menu-links-gap", 0);
+  padding-inline-start: token("menu-group-indent", 0.75rem);
+}
+
+#{ns.element-class("site-header", "menu-group-chevron")} {
+  flex-shrink: 0;
+  border-inline-end: 1px solid currentColor;
+  border-block-end: 1px solid currentColor;
+  width: 0.45rem;
+  height: 0.45rem;
+  transform: rotate(45deg) translate(-0.1rem, -0.1rem);
+  transition: transform var(#{ns.css-var("transition-fast")}, 160ms) ease;
+}
+
+#{ns.class("disclosure")}#{ns.data("disclosure-open", "true")} #{ns.element-class("site-header", "menu-group-chevron")} {
+  transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
+}
+
+#{ns.element-class("site-header", "menu")} #{ns.element-class("site-header", "menu-group-label")} {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  padding-block: token("menu-link-py", 0);
+  padding-inline: token("menu-link-px", 0.2rem);
+  color: token("menu-group-label-color", currentColor);
+  font-family: token("menu-group-label-font-family", inherit);
+  font-size: token("menu-group-label-font-size", 0.875rem);
+  font-weight: token("menu-group-label-font-weight", inherit);
+  letter-spacing: token("menu-group-label-letter-spacing", inherit);
+  text-transform: token("menu-group-label-text-transform", none);
+}
+
+#{ns.element-class("site-header", "menu")} #{ns.element-class("site-header", "link")} {
+  width: 100%;
+  padding-block: token("menu-link-py", 0);
+}
+
+#{ns.element-class("site-header", "menu")} {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: 100%;
+  display: grid;
+  grid-template-rows: 0fr;
+  color: token("menu-color", var(#{ns.css-var("text")}, currentColor));
+  border-block-end: token("menu-border", var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, currentColor));
+  background: token("menu-bg", var(#{ns.css-var("shell-header-surface")}, var(#{ns.css-var("page")}, #fff)));
+  box-shadow: token("menu-shadow", 0 24px 32px -24px rgb(0 0 0 / 18%));
+  opacity: 0;
+  visibility: hidden;
+  transition:
+  grid-template-rows $motion,
+  opacity $motion,
+  background-color $tone-motion,
+  visibility 0s linear token("motion-duration", 500ms);
+}
+
+#{ns.data("site-header-open", "true")} #{ns.element-class("site-header", "menu")} {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  visibility: visible;
+  transition:
+  grid-template-rows $motion,
+  opacity $motion,
+  background-color $tone-motion,
+  visibility 0s;
+}
+
+#{ns.element-class("site-header", "menu-body")} {
+  min-height: 0;
+  max-height: calc(100dvh - 5rem);
+  overflow: hidden;
+}
+
+#{ns.data("site-header-open", "true")} #{ns.element-class("site-header", "menu-body")} {
+  overflow-y: auto;
+}
+
+#{ns.element-class("site-header", "menu-content")} {
+  display: flex;
+  flex-direction: column;
+  gap: token("menu-gap", 0.25rem);
+  padding-block: token("menu-py", 0.75rem);
+  opacity: 0;
+  transform: translateY(-1rem);
+  transition: opacity $motion, transform $motion;
+}
+
+#{ns.data("site-header-open", "true")} #{ns.element-class("site-header", "menu-content")} {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+#{ns.element-class("site-header", "menu-links")} {
+  display: flex;
+  flex-direction: column;
+  gap: token("menu-links-gap", 0);
+}
+
+#{ns.element-class("site-header", "menu-footer")} {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: token("menu-footer-gap", 0.75rem);
+}
+
+#{ns.element-class("site-header", "menu-divider")} {
+  border-block-start: token("menu-divider-border", 1px solid color-mix(in srgb, currentColor 14%, transparent));
+}
+
+@media (min-width: 768px) {
+  #{ns.element-class("site-header", "menu-content")} {
+    padding-inline: 1rem;
+  }
+
+  #{ns.element-class("site-header", "toggle")},
+  #{ns.element-class("site-header", "menu")} {
+    display: none;
+  }
+
+  #{ns.element-class("site-header", "nav")},
+  #{ns.element-class("site-header", "actions")} {
+    display: flex;
+  }
+}
+
+#{ns.data("site-header-compact", "true")} #{ns.element-class("site-header", "menu")} {
+  display: grid;
+}

package/dist/layout/styles/site-footer.scss

@@ -1,4 +1,5 @@
 @use "@trebired/bundler/namespace" as ns;
+@use "./../../styles/utils/tone" as tone;
 
 #{ns.data("site-footer-root")} {
   display: contents;
@@ -18,14 +19,10 @@
 }
 
 #{ns.data("site-footer-tone", "inverse")} {
-  #{ns.css-var("text-muted")}: var(
-    #{ns.css-var("shell-footer-tone-inverse-text-muted")},
-    color-mix(in srgb, var(#{ns.css-var("page")}, #fff) 62%, transparent)
-  );
-  color: var(#{ns.css-var("shell-footer-tone-inverse-color")}, var(#{ns.css-var("page")}, #fff));
+  @include tone.on-dark;
   background: var(
     #{ns.css-var("shell-footer-tone-inverse-bg")},
-    var(#{ns.css-var("contrast-ink")}, var(#{ns.css-var("text")}, #000))
+    var(#{ns.css-var("ink")}, #000)
   );
 }
 
@@ -44,6 +41,25 @@
   align-items: start;
 }
 
+#{ns.element-class("site-footer", "site")} {
+  display: grid;
+  gap: var(#{ns.css-var("shell-footer-site-gap")}, var(#{ns.css-var("gap-lg")}, 40px));
+  align-items: start;
+  padding-block-end: var(#{ns.css-var("shell-footer-site-py")}, var(#{ns.css-var("gap-lg")}, 40px));
+  border-block-end: var(
+    #{ns.css-var("shell-footer-site-border")},
+    var(#{ns.css-var("border-width")}, 1px) solid color-mix(in srgb, currentColor 15%, transparent)
+  );
+}
+
+#{ns.element-class("site-footer", "site-links")} {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: start;
+  align-items: center;
+  gap: var(#{ns.css-var("shell-footer-site-links-gap")}, var(#{ns.css-var("gap-md")}, 24px));
+}
+
 #{ns.element-class("site-footer", "brand")} {
   display: flex;
   min-width: 0;
@@ -67,40 +83,83 @@
 }
 
 #{ns.element-class("site-footer", "column")} {
+  display: grid;
+  align-content: start;
+  gap: var(#{ns.css-var("shell-footer-column-groups-gap")}, var(#{ns.css-var("gap-lg")}, 40px));
+}
+
+#{ns.element-class("site-footer", "group")} {
   display: grid;
   align-content: start;
   gap: var(#{ns.css-var("shell-footer-column-gap")}, var(#{ns.css-var("gap-sm")}, 12px));
 }
 
 #{ns.element-class("site-footer", "heading")} {
-  color: var(#{ns.css-var("shell-footer-heading-color")}, var(#{ns.css-var("text-muted")}, #666));
+  color: var(
+    #{ns.css-var("shell-footer-heading-color")},
+    color-mix(in srgb, var(#{ns.css-var("text")}, currentColor) 85%, transparent)
+  );
   font-family: var(#{ns.css-var("shell-footer-heading-font-family")}, inherit);
   font-size: var(#{ns.css-var("shell-footer-heading-font-size")}, 0.72rem);
   font-weight: var(#{ns.css-var("shell-footer-heading-font-weight")}, 600);
-  letter-spacing: var(#{ns.css-var("shell-footer-heading-letter-spacing")}, 0.16em);
+  letter-spacing: var(#{ns.css-var("shell-footer-heading-letter-spacing")}, normal);
   text-transform: var(#{ns.css-var("shell-footer-heading-text-transform")}, uppercase);
 }
 
+#{ns.element-class("site-footer", "social")} {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(#{ns.css-var("shell-footer-social-gap")}, 6px);
+  margin-block-start: var(#{ns.css-var("shell-footer-social-offset")}, var(#{ns.css-var("gap-sm")}, 12px));
+}
+
+#{ns.element-class("site-footer", "social-link")} {
+  display: inline-flex;
+  width: var(#{ns.css-var("shell-footer-social-size")}, 2rem);
+  height: var(#{ns.css-var("shell-footer-social-size")}, 2rem);
+  align-items: center;
+  justify-content: center;
+  border-radius: var(#{ns.css-var("shell-footer-social-radius")}, var(#{ns.css-var("radius-sm")}, 0));
+  color: var(
+    #{ns.css-var("shell-footer-social-color")},
+    color-mix(in srgb, currentColor 70%, transparent)
+  );
+  font-size: var(#{ns.css-var("shell-footer-social-icon-size")}, 1.1rem);
+  transition:
+  color var(#{ns.css-var("tone-change")}), background-color var(#{ns.css-var("transition-fast")}) ease;
+}
+
+#{ns.element-class("site-footer", "social-link")}:hover,
+
+#{ns.element-class("site-footer", "social-link")}:focus-visible {
+  color: var(#{ns.css-var("shell-footer-social-hover-color")}, inherit);
+  background: var(
+    #{ns.css-var("shell-footer-social-hover-bg")},
+    color-mix(in srgb, currentColor 12%, transparent)
+  );
+}
+
 #{ns.element-class("site-footer", "links")} {
   display: grid;
   gap: var(#{ns.css-var("shell-footer-links-gap")}, var(#{ns.css-var("gap-sm")}, 12px));
-  color: var(#{ns.css-var("text-muted")}, #666);
 }
 
 #{ns.element-class("site-footer", "link")} {
-  width: fit-content;
-  color: inherit;
-  text-decoration-line: var(#{ns.css-var("shell-footer-link-decoration-line")}, none);
-  transition: color var(#{ns.css-var("transition-fast")}, 180ms) var(#{ns.css-var("transition-easing")}, ease),
-  text-decoration-color var(#{ns.css-var("transition-fast")}, 180ms) var(#{ns.css-var("transition-easing")}, ease);
+  color: var(
+    #{ns.css-var("shell-footer-link-color")},
+    color-mix(in srgb, currentColor 70%, transparent)
+  );
+}
+
+#{ns.element-class("site-footer", "link")}[aria-current="page"] {
+  color: var(#{ns.css-var("shell-footer-link-active-color")}, inherit);
 }
 
 #{ns.element-class("site-footer", "link")}:hover,
 
 #{ns.element-class("site-footer", "link")}:focus-visible {
-  color: var(#{ns.css-var("shell-footer-link-hover-color")}, var(#{ns.css-var("adaptive")}, currentColor));
-  text-decoration-line: var(#{ns.css-var("shell-footer-link-hover-decoration-line")}, underline);
-  text-underline-offset: 0.25rem;
+  color: var(#{ns.css-var("shell-footer-link-hover-color")}, var(#{ns.css-var("text")}, currentColor));
 }
 
 #{ns.element-class("site-footer", "note")} {
@@ -119,7 +178,9 @@
 }
 
 @media (min-width: 768px) {
-  #{ns.element-class("site-footer", "inner")} {
+  #{ns.element-class("site-footer", "inner")},
+
+  #{ns.element-class("site-footer", "site")} {
     grid-template-columns: var(
       #{ns.css-var("shell-footer-inner-columns")},
       minmax(0, 5fr) minmax(0, 7fr)

package/dist/layout/styles/site-header.scss

@@ -1,10 +1,16 @@
 @use "@trebired/bundler/namespace" as ns;
+@use "./../../styles/utils/tone" as tone;
 
 @function token($name, $fallback) {
   @return var(#{ns.css-var("shell-header-" + $name)}, $fallback);
 }
 
 $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.22, 1, 0.36, 1));
+$tone-motion: token("tone-duration", 320ms) token("tone-easing", cubic-bezier(0.22, 1, 0.36, 1));
+
+:root {
+  #{ns.css-var("shell-header-height")}: 5rem;
+}
 
 #{ns.data("site-header-root")} {
   display: contents;
@@ -15,24 +21,17 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   inset-inline: 0;
   inset-block-start: 0;
   z-index: token("root-z-index", var(#{ns.css-var("z-header")}, 920));
-  color: token("root-color", var(#{ns.css-var("adaptive")}, currentColor));
-  border-block-end: token("root-border", var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("adaptive-border")}, currentColor));
-  background: var(#{ns.css-var("glass-bar-bg")}, token("root-bg", var(#{ns.css-var("page")}, #fff)));
-}
-
-#{ns.data("site-header")}::before {
-  position: absolute;
-  z-index: -1;
-  inset: 0;
-  backdrop-filter: var(#{ns.css-var("glass-filter")}, none);
-  -webkit-backdrop-filter: var(#{ns.css-var("glass-filter")}, none);
-  content: "";
-  pointer-events: none;
+  color: token("root-color", var(#{ns.css-var("text")}, currentColor));
+  border-block-end: token("root-border", 1px solid color-mix(in srgb, currentColor 14%, transparent));
+  #{ns.css-var("shell-header-surface")}: token("root-bg", var(#{ns.css-var("page")}, #fff));
+  background: var(#{ns.css-var("shell-header-surface")});
+  transition:
+  color $tone-motion,
+  border-color $tone-motion,
+  background-color $tone-motion;
 }
 
-#{ns.element-class("site-header", "bar")},
-
-#{ns.element-class("site-header", "menu-content")} {
+#{ns.element-class("site-header", "bar")} {
   width: 100%;
   max-width: token("max-width", 72rem);
   box-sizing: border-box;
@@ -43,7 +42,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 #{ns.element-class("site-header", "bar")} {
   position: relative;
   display: flex;
-  min-height: 5rem;
+  min-height: var(#{ns.css-var("shell-header-height")});
   align-items: center;
   justify-content: space-between;
   gap: token("gap", 1rem);
@@ -56,7 +55,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   flex: 0 1 auto;
   align-items: center;
   gap: token("brand-gap", 0.75rem);
-  color: token("brand-color", var(#{ns.css-var("adaptive")}, currentColor));
+  color: token("brand-color", var(#{ns.css-var("text")}, currentColor));
   font-family: token("brand-font-family", inherit);
   font-size: token("brand-font-size", 1.125rem);
   font-weight: token("brand-font-weight", 700);
@@ -78,6 +77,11 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   object-fit: contain;
 }
 
+#{ns.element-class("site-header", "brand")} #{ns.class("logo")} img {
+  height: 100%;
+  max-width: 100%;
+}
+
 #{ns.element-class("site-header", "nav")},
 
 #{ns.element-class("site-header", "actions")} {
@@ -90,6 +94,22 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   gap: token("nav-gap", 0.25rem);
 }
 
+#{ns.element-class("site-header", "nav")} #{ns.element-class("site-header", "link")},
+
+#{ns.element-class("site-header", "nav")} #{ns.element-class("site-header", "nav-trigger")} {
+  white-space: nowrap;
+}
+
+#{ns.data("site-header-compact", "true")} #{ns.element-class("site-header", "nav")},
+
+#{ns.data("site-header-compact", "true")} #{ns.element-class("site-header", "actions")} {
+  display: none;
+}
+
+#{ns.data("site-header-compact", "true")} #{ns.element-class("site-header", "toggle")} {
+  display: inline-flex;
+}
+
 #{ns.element-class("site-header", "actions")} {
   flex: 0 0 auto;
   gap: token("actions-gap", 0.5rem);
@@ -100,15 +120,14 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 }
 
 #{ns.element-class("site-header", "link")} {
-  color: token("link-color", var(#{ns.css-var("adaptive-muted")}, currentColor));
   font-size: 0.875rem;
   font-weight: token("link-font-weight", 500);
   letter-spacing: token("link-letter-spacing", normal);
   text-decoration: none;
   text-transform: token("link-text-transform", none);
   transition:
-  background-color var(#{ns.css-var("transition-fast")}, 160ms) ease,
-  color var(#{ns.css-var("transition-fast")}, 160ms) ease;
+  color var(#{ns.css-var("tone-change")}),
+  background-color var(#{ns.css-var("transition-fast")}, 160ms) ease;
 }
 
 #{ns.element-class("site-header", "link")} {
@@ -116,8 +135,34 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   border-radius: token("link-radius", 0.5rem);
 }
 
+#{ns.element-class("site-header", "nav-trigger")},
+
+#{ns.class("button")}#{ns.element-class("site-header", "nav-trigger")} {
+  padding: token("link-padding", 0.5rem 0.75rem);
+  border: 0;
+  border-radius: token("link-radius", 0.5rem);
+  color: token("link-color", currentColor);
+  background: transparent;
+  font-size: 0.875rem;
+  font-weight: token("link-font-weight", 500);
+  letter-spacing: token("link-letter-spacing", normal);
+  text-transform: token("link-text-transform", none);
+  transition:
+  color var(#{ns.css-var("tone-change")}),
+  background-color var(#{ns.css-var("transition-fast")}, 160ms) ease;
+}
+
+#{ns.class("button")}#{ns.element-class("site-header", "nav-trigger")}:hover,
+
+#{ns.class("button")}#{ns.element-class("site-header", "nav-trigger")}[aria-expanded="true"],
+
+#{ns.class("button")}#{ns.element-class("site-header", "nav-trigger")}[aria-current="true"] {
+  color: token("link-hover-color", var(#{ns.css-var("text")}, currentColor));
+  background: token("link-hover-bg", transparent);
+}
+
 #{ns.element-class("site-header", "link")}:hover {
-  color: token("link-hover-color", var(#{ns.css-var("adaptive")}, currentColor));
+  color: token("link-hover-color", var(#{ns.css-var("text")}, currentColor));
   background: token("link-hover-bg", transparent);
 }
 
@@ -125,9 +170,26 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   color: token("link-active-color", token("link-hover-color", var(#{ns.css-var("text")}, #000)));
   background: token("link-active-bg", token("link-hover-bg", transparent));
   font-weight: token("link-active-font-weight", token("link-font-weight", 500));
-  text-decoration: token("link-active-text-decoration", none);
-  text-decoration-color: token("link-active-text-decoration-color", currentColor);
-  text-underline-offset: token("link-active-text-underline-offset", 0.25rem);
+  text-decoration: token("link-active-decoration", none);
+  text-decoration-color: token("link-active-decoration-color", currentColor);
+  text-underline-offset: token("link-active-underline-offset", 0.25rem);
+}
+
+#{ns.element-class("site-header", "nav-trigger")} #{ns.element-class("site-header", "link-label")} {
+  color: color-mix(in srgb, currentColor 78%, transparent);
+}
+
+#{ns.element-class("site-header", "nav-trigger")}:hover #{ns.element-class("site-header", "link-label")},
+
+#{ns.element-class("site-header", "nav-trigger")}[aria-expanded="true"] #{ns.element-class("site-header", "link-label")},
+
+#{ns.element-class("site-header", "nav-trigger")}[aria-current="true"] #{ns.element-class("site-header", "link-label")} {
+  color: currentColor;
+}
+
+#{ns.element-class("site-header", "link-label")} {
+  display: inline-block;
+  position: relative;
 }
 
 #{ns.element-class("site-header", "toggle")} {
@@ -141,7 +203,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   margin-inline-end: token("toggle-offset", -0.5rem);
   border: 0;
   border-radius: token("toggle-radius", 0.5rem);
-  color: token("toggle-color", var(#{ns.css-var("adaptive")}, currentColor));
+  color: token("toggle-color", var(#{ns.css-var("text")}, currentColor));
   background: transparent;
   font-size: 2rem;
   cursor: pointer;
@@ -193,115 +255,24 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   transform: rotate(-45deg);
 }
 
-#{ns.element-class("site-header", "menu")} {
-  position: absolute;
-  inset-inline: 0;
-  inset-block-start: 100%;
-  display: grid;
-  grid-template-rows: 0fr;
-  color: token("menu-color", var(#{ns.css-var("adaptive")}, currentColor));
-  border-block-end: token("menu-border", var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("adaptive-border")}, currentColor));
-  background: var(#{ns.css-var("glass-bg")}, token("menu-bg", var(#{ns.css-var("page")}, #fff)));
-  backdrop-filter: var(#{ns.css-var("glass-filter")}, none);
-  -webkit-backdrop-filter: var(#{ns.css-var("glass-filter")}, none);
-  box-shadow: token("menu-shadow", 0 24px 32px -24px rgb(0 0 0 / 18%));
-  opacity: 0;
-  visibility: hidden;
-  transition:
-  grid-template-rows $motion,
-  opacity $motion,
-  visibility 0s linear token("motion-duration", 500ms);
-}
-
-#{ns.data("site-header-open", "true")} #{ns.element-class("site-header", "menu")} {
-  grid-template-rows: 1fr;
-  opacity: 1;
-  visibility: visible;
-  transition:
-  grid-template-rows $motion,
-  opacity $motion,
-  visibility 0s;
-}
-
-#{ns.element-class("site-header", "menu-body")} {
-  min-height: 0;
-  max-height: calc(100dvh - 5rem);
-  overflow: hidden;
-}
-
-#{ns.data("site-header-open", "true")} #{ns.element-class("site-header", "menu-body")} {
-  overflow-y: auto;
-}
-
-#{ns.element-class("site-header", "menu-content")} {
-  display: flex;
-  flex-direction: column;
-  gap: token("menu-gap", 1rem);
-  padding-block: token("menu-py", 1.5rem);
-  opacity: 0;
-  transform: translateY(-1rem);
-  transition: opacity $motion, transform $motion;
-}
-
-#{ns.data("site-header-open", "true")} #{ns.element-class("site-header", "menu-content")} {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-#{ns.element-class("site-header", "menu-links")} {
-  display: flex;
-  flex-direction: column;
-  gap: token("menu-links-gap", 0.25rem);
-}
-
-#{ns.element-class("site-header", "menu-footer")} {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: token("menu-footer-gap", 0.75rem);
-  padding-block-start: token("menu-gap", 1rem);
-  border-block-start: token("menu-footer-border", var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("adaptive-border")}, currentColor));
-}
-
-@media (min-width: 768px) {
-  #{ns.element-class("site-header", "bar")},
-  #{ns.element-class("site-header", "menu-content")} {
-    padding-inline: 1rem;
-  }
-
-  #{ns.element-class("site-header", "nav")},
-  #{ns.element-class("site-header", "actions")} {
-    display: flex;
-  }
-
-  #{ns.element-class("site-header", "toggle")},
-  #{ns.element-class("site-header", "menu")} {
-    display: none;
-  }
-}
-
 #{ns.class("site-header-brand-button")},
 
 #{ns.class("button")}#{ns.class("site-header-brand-button")} {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
-  gap: var(#{ns.css-var("shell-header-brand-button-gap")}, 8px);
+  gap: var(#{ns.css-var("shell-header-brand-btn-gap")}, 8px);
   min-width: 0;
   min-height: 0;
   height: auto;
   border: 0;
-  border-radius: var(#{ns.css-var("shell-header-brand-button-radius")}, var(#{ns.css-var("radius-sm")}, 0));
+  border-radius: var(#{ns.css-var("shell-header-brand-btn-radius")}, var(#{ns.css-var("radius-sm")}, 0));
   padding-block: 4px;
   padding-inline: 0;
   background: transparent;
-  color: var(
-    #{ns.css-var("shell-header-brand-button-color")},
-    color-mix(in srgb, var(#{ns.css-var("adaptive")}, currentColor) 74%, transparent)
-  );
+  color: var(#{ns.css-var("shell-header-brand-btn-color")}, currentColor);
+  transition: color var(#{ns.css-var("tone-change")});
   cursor: pointer;
-  transition: color 0.22s ease;
 }
 
 #{ns.class("site-header-brand-button")}:hover,
@@ -315,7 +286,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 #{ns.class("button")}#{ns.class("site-header-brand-button")}:focus-visible,
 
 #{ns.class("button")}#{ns.class("site-header-brand-button")}[aria-expanded="true"] {
-  color: var(#{ns.css-var("shell-header-brand-button-hover-color")}, var(#{ns.css-var("adaptive")}, currentColor));
+  color: var(#{ns.css-var("shell-header-brand-btn-hover-color")}, currentColor);
 }
 
 #{ns.class("button")}#{ns.class("site-header-brand-button")}:hover,
@@ -324,10 +295,23 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 
 #{ns.class("button")}#{ns.class("site-header-brand-button")}[aria-expanded="true"] {
   border-color: transparent;
-  background: var(#{ns.css-var("shell-header-brand-button-hover-bg")}, transparent);
+  background: var(#{ns.css-var("shell-header-brand-btn-hover-bg")}, transparent);
 }
 
 #{ns.class("site-header-brand-button")}:focus-visible {
   outline: var(#{ns.css-var("border-width")}, 1px) solid color-mix(in srgb, currentColor 35%, transparent);
   outline-offset: 0.2rem;
 }
+
+body:has(main > #{ns.data("dark")}:first-child) #{ns.data("site-header")}:not(#{ns.data("site-header-live")}),
+
+#{ns.data("site-header")}#{ns.data("dark")} {
+  @include tone.on-dark;
+  #{ns.css-var("shell-header-surface")}: token("root-bg-dark", var(#{ns.css-var("ink")}, #000));
+}
+
+@media (min-width: 768px) {
+  #{ns.element-class("site-header", "bar")} {
+    padding-inline: 1rem;
+  }
+}