maverick-wave 4.9.4 → 4.11.0

package/src/partials/utilities-container.html

@@ -1,4 +1,10 @@
 <h3 class="mw-section-subtitle">Utilities</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  The classes that do exactly one thing: spacing, flex, display, text,
+  elevation, aspect ratio. Worth checking before writing a rule of your own -
+  most one-off styles in an application turn out to be a utility that already
+  exists.
+</p>
 
 <div class="mw-grid-3-lg">
   <div>
@@ -231,3 +237,150 @@
     </span>
   </div>
 </div>
+
+<h3 class="mw-mb-4 mw-mt-6">Text Overflow &amp; Wrapping</h3>
+<p class="mw-text-muted mw-text-measure">
+  The two ways a long string is cut short, and they are not interchangeable:
+  <code>mw-text-truncate</code> is one line ending in an ellipsis,
+  <code>mw-text-clamp-2</code> through <code>-5</code> is that many lines ending
+  in one. Truncation carries <code>min-width: 0</code> with it, which is the
+  reason it "does not work" nine times out of ten inside a flex row.
+</p>
+<div class="mw-grid-2 mw-gap-6">
+  <div class="mw-card mw-card-simple">
+    <h5 class="mw-text-medium mw-mb-2"><code>mw-text-truncate</code></h5>
+    <p class="mw-text-truncate">
+      One line only: this sentence is far longer than the box it has been given
+      and ends in an ellipsis rather than wrapping.
+    </p>
+    <h5 class="mw-text-medium mw-mb-2 mw-mt-5">
+      <code>mw-text-clamp-2</code>
+    </h5>
+    <p class="mw-text-clamp-2">
+      Two lines and then an ellipsis. This paragraph runs on for long enough
+      that the third line is cut off, which is what a card preview or a list
+      subtitle wants when the copy is not yours to control.
+    </p>
+    <h5 class="mw-text-medium mw-mb-2 mw-mt-5">
+      <code>mw-text-break</code>
+    </h5>
+    <p class="mw-text-break">
+      https://example.com/a/very/long/url/that/has/no/spaces/in/it/at/all/and/would/otherwise/push/the/page/sideways
+    </p>
+  </div>
+  <div class="mw-card mw-card-simple">
+    <h5 class="mw-text-medium mw-mb-2">
+      <code>mw-text-balance</code> and <code>mw-text-pretty</code>
+    </h5>
+    <p class="mw-text-muted mw-text-sm">
+      Headings get <code>balance</code> by default - it evens the lines out so
+      no headline leaves one word alone on the last one. Paragraphs get
+      <code>pretty</code>, which only prevents the orphan. Both are on already;
+      the classes are for anything the framework does not style itself.
+    </p>
+    <h5 class="mw-text-medium mw-mb-2 mw-mt-5">
+      <code>mw-text-eyebrow</code>
+    </h5>
+    <p class="mw-text-eyebrow mw-mb-1">Release notes</p>
+    <h4 class="mw-mb-0">The kicker above a heading</h4>
+    <h5 class="mw-text-medium mw-mb-2 mw-mt-5">
+      <code>mw-text-measure</code>
+    </h5>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">
+      Caps a column at 68 characters. Past roughly 75 the eye loses the start of
+      the next line on the way back, which is why a full-width paragraph on a
+      desktop is harder to read than a narrow one.
+    </p>
+  </div>
+</div>
+
+<h3 class="mw-mb-4 mw-mt-6">Elevation</h3>
+<p class="mw-text-muted mw-text-measure">
+  The same five-step ramp every component uses, as classes. Each level is two
+  shadows: a tight contact layer that gives the box weight, and a wide ambient
+  one that says how high it floats. One layer alone reads as a blur behind the
+  box - the pair reads as light. <code>mw-elevation-0</code> is explicitly flat,
+  for taking something off the page it normally floats above.
+</p>
+<div class="mw-grid-3 mw-gap-6">
+  <div class="mw-card mw-card-simple mw-elevation-1">
+    <h5 class="mw-text-medium mw-mb-1">1 &middot; resting</h5>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">
+      Inputs, tags, small controls.
+    </p>
+  </div>
+  <div class="mw-card mw-card-simple mw-elevation-2">
+    <h5 class="mw-text-medium mw-mb-1">2 &middot; raised</h5>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">Cards and panels at rest.</p>
+  </div>
+  <div class="mw-card mw-card-simple mw-elevation-3">
+    <h5 class="mw-text-medium mw-mb-1">3 &middot; floating</h5>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">A card under the pointer.</p>
+  </div>
+  <div class="mw-card mw-card-simple mw-elevation-4">
+    <h5 class="mw-text-medium mw-mb-1">4 &middot; overlay</h5>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">Dropdowns, popovers, drawer.</p>
+  </div>
+  <div class="mw-card mw-card-simple mw-elevation-5">
+    <h5 class="mw-text-medium mw-mb-1">5 &middot; modal</h5>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">The dialog over everything.</p>
+  </div>
+  <div class="mw-card mw-card-simple mw-elevation-0">
+    <h5 class="mw-text-medium mw-mb-1">0 &middot; flat</h5>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">Explicitly on the page.</p>
+  </div>
+</div>
+
+<h3 class="mw-mb-4 mw-mt-6">Responsive Display</h3>
+<p class="mw-text-muted mw-text-measure">
+  Mobile-first and min-width, like everything else here.
+  <code>mw-d-md-flex</code> means "flex from the md breakpoint up", and the
+  unprefixed class beside it is what applies below that - the pair
+  <code>mw-d-none mw-d-md-flex</code> is hidden on a phone and a row from a
+  tablet on. Variants exist for <code>sm</code>, <code>md</code>,
+  <code>lg</code> and <code>xl</code>.
+</p>
+<div class="mw-card mw-card-simple">
+  <div class="mw-row-split mw-row-split-center">
+    <code>mw-hide-mobile</code>
+    <span class="mw-hide-mobile mw-badge mw-badge-success">visible now</span>
+    <span class="mw-hide-desktop mw-badge mw-badge-muted">hidden below md</span>
+  </div>
+  <hr class="mw-divider" />
+  <div class="mw-row-split mw-row-split-center">
+    <code>mw-hide-desktop</code>
+    <span class="mw-hide-desktop mw-badge mw-badge-success">visible now</span>
+    <span class="mw-hide-mobile mw-badge mw-badge-muted"
+      >hidden from md up</span
+    >
+  </div>
+  <p class="mw-text-muted mw-text-sm mw-mt-4 mw-mb-0">
+    Resize the window past 768px to see the two swap.
+  </p>
+</div>
+
+<h3 class="mw-mb-4 mw-mt-6">Aspect Ratio</h3>
+<p class="mw-text-muted mw-text-measure">
+  Reserves the box before the image inside it has loaded, which is the whole
+  point: without it the page reflows when the picture arrives and everything
+  below jumps. The child fills the box and crops rather than stretching.
+  <code>mw-aspect-square</code>, <code>-video</code>, <code>-wide</code>,
+  <code>-portrait</code>, <code>-photo</code>.
+</p>
+<div class="mw-grid-3 mw-gap-4">
+  <div
+    class="mw-aspect-square mw-card mw-card-simple mw-d-flex mw-items-center mw-justify-center"
+  >
+    <code>square</code>
+  </div>
+  <div
+    class="mw-aspect-video mw-card mw-card-simple mw-d-flex mw-items-center mw-justify-center"
+  >
+    <code>video</code>
+  </div>
+  <div
+    class="mw-aspect-photo mw-card mw-card-simple mw-d-flex mw-items-center mw-justify-center"
+  >
+    <code>photo</code>
+  </div>
+</div>

package/src/scss/abstracts/_mixins.scss

@@ -77,3 +77,179 @@
     0.9rem 100%;
   background-attachment: local, local, scroll, scroll;
 }
+
+// ---------------------------------------------------------------------------
+// Focus
+//
+// The ring was written out by hand in nine places before this, in two different
+// shapes, and a form field had a third. One mixin per shape instead, so the
+// whole framework moves when the ring is retuned.
+//
+// `:focus-visible` and never `:focus`: a mouse click on a button should not
+// leave it ringed. The browser decides what counts - a keyboard tab does, a
+// pointer press on a button does not, a pointer press into a text field does.
+// ---------------------------------------------------------------------------
+@mixin focus-ring(
+  $offset: var(--mw-focus-ring-offset),
+  $color: var(--mw-focus-ring-color)
+) {
+  &:focus-visible {
+    outline: var(--mw-focus-ring-width) solid #{$color};
+    outline-offset: #{$offset};
+    @content;
+  }
+}
+
+// Same ring, drawn inside the element. For anything clipped by its own frame -
+// a segment inside a segmented control, a cell inside a table - where a ring on
+// the outside would be cut off by the parent.
+@mixin focus-ring-inset($inset: -2px) {
+  &:focus-visible {
+    outline: var(--mw-focus-ring-width) solid var(--mw-focus-ring-color);
+    outline-offset: $inset;
+    @content;
+  }
+}
+
+// The form-field shape: recolour the border the field already has and lay a soft
+// halo around it, rather than adding a second hard line outside it.
+//
+// Two different tones, and the split is the framework's own fill-or-ink rule.
+// The border is drawn *on* the field, which is light in both themes, so it takes
+// the fill tone. The halo spreads *outside* it, onto the page or the card, so it
+// takes the ink tone - the theme-aware one. Using the fill tone for both is what
+// made the dark theme's halo a dark blue haze on a dark blue page.
+//
+// `outline: none` is only safe because the halo *is* the indicator - except in
+// forced-colors mode, where box-shadow is dropped and the field would be left
+// with nothing. The guard hands the outline back there.
+@mixin field-focus(
+  $trigger: 'focus',
+  $border: 'primary-color',
+  $halo: 'primary-text-color'
+) {
+  &:#{$trigger} {
+    outline: none;
+    border-color: var(--mw-#{$border});
+    @include focus-halo($halo);
+    @content;
+  }
+
+  @media (forced-colors: active) {
+    &:#{$trigger} {
+      outline: var(--mw-focus-ring-width) solid;
+      outline-offset: var(--mw-focus-ring-offset);
+    }
+  }
+}
+
+// The halo on its own, for the controls that draw their own box - a checkbox, a
+// radio, a switch track, a calendar day - and only want the ring around it.
+@mixin focus-halo($color: 'primary-text-color') {
+  box-shadow: 0 0 0 var(--mw-focus-halo-size)
+    color-mix(
+      in srgb,
+      var(--mw-#{$color}) var(--mw-focus-halo-opacity),
+      transparent
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Pointer
+// ---------------------------------------------------------------------------
+
+// Hover effects that *move* something - a card lifting, a tile growing - only
+// on a device that can actually hover. On touch, `:hover` latches after a tap
+// and stays on until you tap somewhere else, so a lifted card stays lifted and
+// a grid of them ends up with one member permanently out of line. Colour
+// changes are fine unguarded; movement is not.
+@mixin hover {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      @content;
+    }
+  }
+}
+
+// Everything a control needs to feel native under a thumb: no 300ms wait for a
+// double-tap that is never coming, and no grey box flashing over it while the
+// press is held - the component draws its own :active state instead.
+@mixin tappable {
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+// ---------------------------------------------------------------------------
+// Scrollbar
+//
+// Was written per list variant, which is why three of them had a thumb the same
+// colour as their track. One shape, used by every scroll container and by the
+// page itself.
+// ---------------------------------------------------------------------------
+@mixin scrollbar($thumb: var(--mw-text-muted-color), $track: transparent) {
+  scrollbar-width: thin;
+  // Firefox takes both in one declaration - a single value is invalid and the
+  // whole thing is dropped, which is how a thumb ends up invisible.
+  scrollbar-color: #{$thumb} #{$track};
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #{$track};
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #{$thumb};
+    border-radius: 4px;
+
+    &:hover {
+      background: var(--mw-primary-text-color);
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: #{$track};
+  }
+}
+
+// Everything that fills its own surface with a colour - every variant except
+// outline, link and plain.
+//
+// Two things, and both are what separates a button from a coloured rectangle: a
+// hairline of light along the top edge, as if there were a light source above
+// the page, and a shadow underneath that says the button sits on the surface
+// rather than in it. The pressed state inverts both - the highlight goes and an
+// inner shadow takes its place, which is the whole of what "pushed in" looks
+// like.
+//
+// White and black rather than tokens on purpose: this is lighting, not palette.
+// It has to behave the same on a primary, a danger and whatever a project
+// overrides them with.
+@mixin btn-solid {
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, #fff 15%, transparent),
+    var(--mw-elevation-1);
+
+  // A pixel up, and the shadow steps up with it. The two together are what read
+  // as the button coming toward the pointer - the shadow alone says it, but not
+  // as clearly, and the lift is small enough that a row of buttons does not
+  // twitch. Guarded, so it never latches after a tap.
+  @include hover {
+    box-shadow:
+      inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
+      var(--mw-elevation-2);
+    transform: translateY(-1px);
+  }
+
+  &:active:not(:disabled) {
+    box-shadow: inset 0 2px 5px color-mix(in srgb, #000 25%, transparent);
+  }
+
+  &:disabled {
+    box-shadow: none;
+  }
+}

package/src/scss/abstracts/_variables.scss

@@ -61,6 +61,13 @@ $warning-color: #d1bb21 !default;
 $danger-color: #d41708 !default;
 $info-color: #0780ca !default;
 
+// Ink on the handful of surfaces that stay a fixed grey in both themes and
+// therefore cannot take --mw-accent-text-color: the tooltip, `mw-btn-mini`,
+// `mw-info-mini` and the gallery arrows. Compile-time on purpose - these are
+// not meant to be retuned per project, they just should not be four copies of
+// the same literal in four unrelated files.
+$fixed-surface-text: #efefef !default;
+
 // Uniform hover tone for every solid brand/status surface. Darkening, in both
 // themes: the label on a solid surface is $accent-text-color, and lightening
 // a solid surface is what breaks it.
@@ -114,7 +121,139 @@ $footer-surface-light: 0.95 !default;
 // Lower it for a darker bar. The ink on the bar is near-white, so going far up
 // means overriding --mw-header-text-color and
 // --mw-header-navbar-list-active-color with it.
-$header-surface: 16% !default;
+$header-surface: 14% !default;
+
+// How far the active navbar link is lifted off the primary colour. Lower is a
+// stronger, more saturated blue and closer to the brand tone; higher is paler
+// and carries more contrast against the bar.
+//
+// 25% lands on #435fd5 at 3.67:1 over the bar - past the 3:1 floor a large or
+// bold label needs, under the 4.5:1 an AA body-size label wants. That is a
+// deliberate trade for a nav item that is already marked by an underline and a
+// weight change as well as by colour; raise it toward 35% for the safe end.
+$header-active-tint: 25% !default;
+
+// The shadow pair every elevation is built from - see elevation() below.
+//
+// $shadow-cast-dark is how far a shadow in the dark theme sits below the page
+// colour. A black shadow on a near-black page is invisible, which is why the
+// framework used to carry a single light glow instead; the glow survives as the
+// far layer, and this is the near one that puts weight back underneath it.
+$shadow-cast-dark: 0.3 !default;
+// Near (contact) and far (ambient) opacity per theme. The dark theme's far layer
+// is the light rim that reads as elevation on a dark page, so it stays low - a
+// bright glow carries much further than a dark shadow at the same alpha.
+$shadow-near-dark: 55% !default;
+$shadow-far-dark: 13% !default;
+$shadow-near-light: 14% !default;
+$shadow-far-light: 10% !default;
+
+// ---------------------------------------------------------------------------
+// Control sizes
+//
+// One height per step, shared by everything that can end up in a row next to
+// something else: input, select, textarea, button.
+//
+// Before this each control worked its height out from its own font size, its own
+// line-height and its own padding, and no two of them agreed - an input, a
+// select and a button side by side measured 32.2, 34.4 and 37.2 pixels. That is
+// the kind of flaw you see without being able to name it: the row just looks
+// slightly wrong.
+//
+// A minimum, not a fixed height, so a control whose content needs more room
+// still gets it. The step is what makes the trio line up; the font scale below
+// is what makes them look like one family.
+// ---------------------------------------------------------------------------
+// 32 / 36 / 40px - an even 4px step. The middle one used to be 2.35rem, which
+// made the ramp 32 / 37.6 / 41.6: a 5.6px step to the base size and a 4px one
+// past it, and a base field a shade taller than it needed to be.
+//
+// The padding is not what sets these. A field's height comes from the minimum
+// below, so trimming `padding-block` on its own changes where the text sits
+// inside the box and not how tall the box is.
+$control-height-sm: 2rem !default;
+$control-height: 2.25rem !default;
+$control-height-lg: 2.5rem !default;
+
+// The font each step is set in. All three fields share it - the select used to
+// sit a whole step below the input beside it, which is why the two never looked
+// like a pair. Buttons stay one step above: a button carries a label, a field
+// carries data the user typed, and the label may be the louder of the two.
+$control-font-sm: 0.8rem !default;
+$control-font: 0.9rem !default;
+$control-font-lg: 1rem !default;
+
+// Stated rather than inherited. `line-height: normal` is whatever the font
+// vendor decided, so an input and a select with the same padding still came out
+// different heights - and it changes the moment a project swaps the font stack.
+$control-line-height: 1.35 !default;
+
+// ---------------------------------------------------------------------------
+// Motion
+//
+// Four durations and three curves, and every transition in the framework is
+// built from them. The point is not the numbers - it is that a hover, a drawer
+// and a modal that all say "0.3s ease" feel like three different products,
+// because 300ms is twice too slow for a colour swap and half too fast for a
+// panel crossing the screen.
+//
+// The curves: 'out' decelerates and is what almost everything wants, because
+// something arriving should land rather than stop. 'in-out' is symmetric, for
+// anything that moves from A to B and back. 'spring' overshoots a few percent,
+// which is what makes a press or a pop read as physical instead of animated.
+// ---------------------------------------------------------------------------
+$duration-instant: 110ms !default;
+$duration-fast: 180ms !default;
+$duration-base: 300ms !default;
+$duration-slow: 520ms !default;
+$duration-slower: 900ms !default;
+
+// The curves.
+//
+// 'out' was cubic-bezier(0.22, 1, 0.36, 1) for one revision, and it was wrong:
+// that curve is so front-loaded it covers about seventy percent of the distance
+// in the first quarter of the time. On a colour swap that reads as snappy. On
+// anything that actually travels - an image scaling inside a card, a panel
+// sliding - it reads as a jump followed by a crawl, which is the opposite of
+// smooth. This one decelerates evenly and is the right default for both.
+$ease-out: cubic-bezier(0.33, 1, 0.68, 1) !default;
+$ease-in-out: cubic-bezier(0.65, 0, 0.35, 1) !default;
+// A few percent of overshoot, not a bounce - the earlier 1.56 read as a wobble
+$ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1) !default;
+
+// Anything that moves a large area rather than recolouring one - an image
+// zooming inside a card, a tile growing. Distance and duration go together: the
+// same 300ms that feels right on a 40px button feels snatched on a 300px photo,
+// because the eye reads speed as distance over time, not as time.
+$duration-zoom: 650ms !default;
+
+// What --mw-transition actually animates.
+//
+// It used to be `all`, which is a footgun in two directions: it animates
+// properties nobody meant to animate - a width that changes at a breakpoint
+// crawls to its new value - and it forces the browser to check every property
+// on every change. The list below covers every paint-only property a hover,
+// focus or active state touches, and nothing that moves layout. Anything that
+// really does want to animate a size says so itself.
+$transition-properties:
+  color, background-color, background-image, border-color, box-shadow, opacity,
+  transform, outline-color, outline-offset, filter, backdrop-filter, fill,
+  stroke, text-decoration-color !default;
+
+// ---------------------------------------------------------------------------
+// Focus ring
+//
+// One ring for the whole framework, on :focus-visible only - a mouse click on a
+// button should not leave it outlined. 2px is the floor at which a ring stays
+// visible against a busy surface, and the offset is what keeps it from reading
+// as a border on the control itself.
+// ---------------------------------------------------------------------------
+$focus-ring-width: 2px !default;
+$focus-ring-offset: 2px !default;
+// The soft halo a form field gets instead of a hard ring - a field already has a
+// border to recolour, so a second hard line around it reads as a mistake.
+$focus-halo-size: 3px !default;
+$focus-halo-opacity: 28% !default;
 
 // ---------------------------------------------------------------------------
 // Derivation helpers
@@ -160,6 +299,15 @@ $header-surface: 16% !default;
   );
 }
 
+// Translucent variant of an arbitrary color expression. fade() is the same thing
+// for a token name; this one takes whatever another helper handed back, which is
+// what the shadow tones below need.
+@function alpha($color, $amount) {
+  @return string.unquote(
+    'color-mix(in srgb, #{$color} #{$amount}, transparent)'
+  );
+}
+
 // Darkened straight toward black in sRGB - the ramp a color tool prints as a
 // color's shades, where $amount is how much of the color survives. shade()
 // cannot stand in for it: mixing in hsl scales saturation along with lightness
@@ -209,6 +357,24 @@ $header-surface: 16% !default;
   );
 }
 
+// Two-layer elevation.
+//
+// The near layer is the contact shadow - short offset, tight blur - that gives
+// an element weight and pins it to the surface underneath. The far layer is the
+// ambient spread that says how high it floats. One layer on its own reads as a
+// blur behind the box; the pair reads as light, which is the whole difference
+// between a framework that looks drawn and one that looks rendered.
+//
+// Both tones are theme-prefixed tokens, so the ramp is declared once per theme
+// and the same five level names work in either one - see the note on derived
+// tokens above for why they cannot be one shared set on :root.
+@function elevation($theme, $y-near, $blur-near, $y-far, $blur-far) {
+  @return string.unquote(
+    '0 #{$y-near} #{$blur-near} var(--mw-#{$theme}-shadow-near),' +
+      ' 0 #{$y-far} #{$blur-far} var(--mw-#{$theme}-shadow-far)'
+  );
+}
+
 // Base colors that don't change between themes.
 // Emitted as --mw-<key>.
 //
@@ -311,6 +477,20 @@ $dark-theme-colors: (
   'footer-background': surface('dark-page-background', $footer-surface-dark),
   'border': surface('dark-page-background', 1.35),
   'shadow': fade('dark-text-color', 30%),
+  // The two tones every elevation level is mixed from, and the five-step ramp
+  // itself. A component names a level - `var(--mw-elevation-2)` - instead of
+  // inventing another `0 5px 9px`; before this the framework carried twelve
+  // different shadow values for what were really four heights.
+  'shadow-near': alpha(
+      surface('dark-page-background', $shadow-cast-dark),
+      $shadow-near-dark
+    ),
+  'shadow-far': fade('dark-text-color', $shadow-far-dark),
+  'elevation-1': elevation('dark', 1px, 2px, 1px, 4px),
+  'elevation-2': elevation('dark', 2px, 4px, 5px, 12px),
+  'elevation-3': elevation('dark', 3px, 6px, 10px, 24px),
+  'elevation-4': elevation('dark', 6px, 12px, 18px, 40px),
+  'elevation-5': elevation('dark', 10px, 20px, 30px, 64px),
   'text-color': $dark-text-color,
   'text-muted-color': muted(0.7),
   // Every color as ink on this page. Derived, not hardcoded - a project that
@@ -335,6 +515,17 @@ $light-theme-colors: (
   'footer-background': surface('light-page-background', $footer-surface-light),
   'border': surface('light-page-background', 0.8),
   'shadow': fade('light-text-color', 30%),
+  // The two tones every elevation level is mixed from, and the five-step ramp
+  // itself. A component names a level - `var(--mw-elevation-2)` - instead of
+  // inventing another `0 5px 9px`; before this the framework carried twelve
+  // different shadow values for what were really four heights.
+  'shadow-near': fade('light-text-color', $shadow-near-light),
+  'shadow-far': fade('light-text-color', $shadow-far-light),
+  'elevation-1': elevation('light', 1px, 2px, 1px, 4px),
+  'elevation-2': elevation('light', 2px, 4px, 5px, 12px),
+  'elevation-3': elevation('light', 3px, 6px, 10px, 24px),
+  'elevation-4': elevation('light', 6px, 12px, 18px, 40px),
+  'elevation-5': elevation('light', 10px, 20px, 30px, 64px),
   'text-color': $light-text-color,
   'text-muted-color': muted(0.5),
   // Same idea, other direction: a color too light to be read on paper is
@@ -357,7 +548,7 @@ $header-colors: (
   'background': deepen('primary-color', $header-surface),
   'text-color': tint('primary-color', 92%),
   'navbar-list-color': fade('header-text-color', 70%),
-  'navbar-list-active-color': tint('primary-color', 35%),
+  'navbar-list-active-color': tint('primary-color', $header-active-tint),
   // The burger sits on the primary button surface, and on the secondary one
   // while the drawer is open, so it takes the label ink of each - not the
   // header text color, which is picked for the dark bar behind it.
@@ -466,9 +657,6 @@ $radius: (
   'full': 50%,
 );
 
-// Transitions
-$transition-default: all 0.3s ease;
-
 // Z-index
 $z-index: (
   'lift': 3,