maverick-wave 4.13.0 → 4.15.0

package/src/scss/abstracts/_mixins.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use 'variables' as v;
+@use 'functions' as *;
 
 // Media query mixins
 @mixin media-up($breakpoint) {
@@ -270,3 +271,72 @@
     text-decoration: underline;
   }
 }
+
+// ---------------------------------------------------------------------------
+// Surface
+//
+// The MaverickWave silhouette: sharp corners on the top-left/bottom-right
+// diagonal, round ones on the other. Nine components repeated those four radii
+// by hand - this is the only place the shape is defined now.
+//
+// On top of the radii, an accent arc on the two round corners. The asymmetry
+// alone reads as an accident; a coloured bow sitting exactly on it does not.
+// Point-symmetric like the radii themselves, so it holds up on a tall card, a
+// wide panel and a square tile alike.
+//
+// The ring is drawn inside the padding box rather than on the border, because
+// four of the callers clip with `overflow: hidden` and would swallow a ring
+// sitting on the border edge. Hence $border-width: `inset: 0` already lands on
+// the padding box, but the corner radius there is the outer one minus the
+// border, and a ring drawn at the outer radius would visibly miss the curve.
+//
+// $corners drops the top arc for a surface whose top-right corner is already
+// taken by a fill of its own - see the coloured panel headers.
+// ---------------------------------------------------------------------------
+@mixin surface($border-width: 1px, $corners: 'both') {
+  position: relative;
+  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+
+  &::after {
+    @include corner-accent($border-width, $corners);
+  }
+}
+
+// The arc on its own, for a variant that has to redraw it without restating the
+// shape - it is already on the element by then.
+@mixin corner-accent($border-width: 1px, $corners: 'both') {
+  $sharp: radius('sm') - $border-width;
+  $round: radius('xl') - $border-width;
+  // Opaque out to where the curve ends, fading from there - so the arc runs a
+  // little way into the straight edge instead of being cut off at the tangent.
+  //
+  // The 1.8 is the one number worth retuning here, and it is bounded by the
+  // shortest surface rather than by the nicest-looking card: the fade reaches
+  // from a corner, so on a 50px-high box - `mw-card-simple` with one line in it
+  // - anything past about 2 lets the two arcs meet in the middle and the pair
+  // stops reading as two corners and starts reading as a frame. Higher is
+  // softer on a tall card, lower is more defined on a short one.
+  $reach: $round * 1.8;
+  $top: radial-gradient(circle $reach at 100% 0, #000 $round, transparent 100%);
+  $bottom: radial-gradient(
+    circle $reach at 0 100%,
+    #000 $round,
+    transparent 100%
+  );
+
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  // 2px rather than 1px: in the dark theme --mw-border sits at OKLch lightness
+  // 0.32 and the arc tone at 0.41, so a hairline is separated from the plain
+  // border by little more than its saturation and vanishes at reading distance.
+  border: 2px solid var(--mw-corner-accent);
+  border-radius: $sharp $round $sharp $round;
+
+  @if $corners == 'bottom' {
+    mask-image: $bottom;
+  } @else {
+    mask-image: $top, $bottom;
+  }
+}

package/src/scss/abstracts/_variables.scss

@@ -505,6 +505,9 @@ $dark-theme-colors: (
   // Translucent accent line used for dividers, rules and outlines. Built from
   // the ink tone, not the fill tone, or the line disappears into the page.
   'border-accent': fade('dark-primary-text-color', 70%),
+  // The accent arc on the two round corners of every mw-surface. Full strength
+  // here: against a dark card the ink tone is the faintest it gets.
+  'corner-accent': token('dark-primary-text-color'),
 );
 
 // Light theme colors. Emitted as --mw-light-<key>.
@@ -537,6 +540,10 @@ $light-theme-colors: (
   'danger-text-color': ink-on-light('danger-color'),
   'info-text-color': ink-on-light('info-color'),
   'border-accent': fade('light-primary-text-color', 70%),
+  // Held back a little against the dark theme: the same blue on a near-white
+  // card carries far more contrast than it does on a dark one, and at full
+  // strength the arc stops being a detail and starts being a frame.
+  'corner-accent': fade('light-primary-text-color', 80%),
 );
 
 // Header/navbar colors. The bar is dark in both themes, so every tone here is

package/src/scss/base/_reset.scss

@@ -29,6 +29,15 @@ body {
   }
 }
 
+// The UA rule behind the `hidden` attribute is `[hidden] { display: none }`, and
+// every component in here that sets its own `display` beats it on specificity -
+// a hidden `mw-tag` or `mw-btn` stays on screen. `!important` is the only thing
+// that wins against a class, and it is also what Angular's `[hidden]` binding
+// and every `el.hidden = true` in an application expect to happen.
+[hidden] {
+  display: none !important;
+}
+
 // A selection in the browser default blue on a deep blue page is the one bit of
 // chrome that gives away that nobody looked. Brand tint, kept translucent so it
 // works over a card, a code block and an image caption alike.

package/src/scss/components/_accordions.scss

@@ -2,7 +2,7 @@
 
 .mw-accordion {
   border: 1px solid var(--mw-border);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface;
   overflow: hidden;
   margin: spacing('2');
 

package/src/scss/components/_calendar.scss

@@ -24,7 +24,7 @@ $_mw-calendar-dot-tones: (
   padding: spacing('5');
   background: var(--mw-card-background);
   border: 1px solid var(--mw-border);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface;
   box-shadow: var(--mw-elevation-2);
 }
 

package/src/scss/components/_cards.scss

@@ -47,11 +47,10 @@ $_mw-card-addon-colors: (
   display: flex;
   flex-direction: column;
   background: var(--mw-card-background);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface;
   box-shadow: var(--mw-elevation-2);
   border: 1px solid var(--mw-border);
   transition: var(--mw-transition);
-  position: relative;
   // deliberately not `overflow: hidden` - that would also cut off anything a
   // child wants to show outside the card, a tooltip above a button being the
   // common case. Images round their own corners below, and only the ribbon

package/src/scss/components/_index.scss

@@ -25,6 +25,7 @@
 @forward 'modals';
 @forward 'pagination';
 @forward 'panels';
+@forward 'pricing';
 @forward 'progress';
 @forward 'ratings';
 @forward 'segmented';

package/src/scss/components/_kanban.scss

@@ -288,7 +288,7 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
   background: var(--mw-card-background);
   border: 1px dashed var(--mw-primary-text-color);
   // Same silhouette as a ticket, so it reads as one being written
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface;
 
   &.mw-active {
     display: flex;

package/src/scss/components/_modals.scss

@@ -27,7 +27,7 @@
 // Modal container
 .mw-modal {
   background: var(--mw-card-background);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface(0);
   box-shadow: var(--mw-elevation-5);
   max-width: 520px;
   width: 100%;

package/src/scss/components/_pagination.scss

@@ -7,7 +7,7 @@
   padding: spacing('5');
   background: var(--mw-card-background);
   border: 1px solid var(--mw-border);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface;
   box-shadow: var(--mw-elevation-2);
 }
 

package/src/scss/components/_panels.scss

@@ -2,7 +2,7 @@
 
 .mw-panel {
   background: var(--mw-card-background);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface(2px);
   border: 2px solid var(--mw-border);
   overflow: hidden;
   display: flex;
@@ -62,6 +62,15 @@
     }
   }
 
+  // The coloured header already owns the top-right corner. An arc drawn over it
+  // either disappears into the primary fill or fights the secondary one - a
+  // blue bow on an orange header reads as a rendering fault, not as a mark. The
+  // bottom corner carries it alone on these two.
+  &-primary::after,
+  &-secondary::after {
+    @include corner-accent(2px, 'bottom');
+  }
+
   // Scrollable variant for fixed height
   &-scrollable {
     max-height: 500px;

package/src/scss/components/_pricing.scss

@@ -0,0 +1,222 @@
+@use '../abstracts' as *;
+
+// The word variant is set down from the price size and then has to climb back
+// to its line box - the two numbers only work as a pair, so they are named.
+$_mw-price-line-height: 1.1;
+$_mw-price-word-scale: 0.68;
+
+// ---------------------------------------------------------------------------
+// Price
+//
+// The figure, not the card around it: one baseline row holding the price that
+// was, the price that is, the unit and a discount tag.
+//
+// Every part is sized in `em` off a single token, so the size variants only
+// have to retune `--mw-price-size` and the whole row moves together - cents,
+// currency and struck-through original included.
+// ---------------------------------------------------------------------------
+
+.mw-price {
+  --mw-price-size: #{font-size('3xl')};
+
+  display: flex;
+  flex-wrap: wrap;
+  // Baseline, not centre: figure and words are read as one line of text, and
+  // centring a 0.45em word against a 2.2rem number floats it in the middle of
+  // the digits instead of sitting it on them.
+  align-items: baseline;
+  gap: spacing('2') spacing('3');
+  margin: spacing('0');
+  font-size: var(--mw-price-size);
+  line-height: $_mw-price-line-height;
+  color: var(--mw-primary-text-color);
+
+  // A pill is a box, not a word - on the baseline it hangs off the bottom of
+  // the digits. Centre is where the eye looks for it.
+  > .mw-tag,
+  > .mw-badge {
+    align-self: center;
+    flex-shrink: 0;
+  }
+
+  &-amount {
+    font-weight: font-weight('bold');
+    // Two prices under each other line up, and a figure swapped by a billing
+    // toggle does not jump sideways on the way
+    font-variant-numeric: tabular-nums lining-nums;
+    font-feature-settings: 'tnum', 'lnum';
+    white-space: nowrap;
+  }
+
+  // Cents, written inside the amount. One step down and left on the baseline -
+  // cents raised to the cap height are a discounter's idiom, and a service
+  // price that borrows it reads cheaper than it is.
+  &-fraction {
+    font-size: 0.62em;
+    font-weight: font-weight('medium');
+  }
+
+  // "Euro", "CHF", "€" - the unit, not the number, so it does not carry the
+  // weight either.
+  //
+  // The floor is where the `em` chain stops being useful: 0.45 of an
+  // `mw-price-sm` is 11px, and that is the size most offer cards run at.
+  &-currency {
+    font-size: max(0.45em, #{font-size('xs')});
+    font-weight: font-weight('normal');
+  }
+
+  // What it cost before the discount. Muted *and* struck: muted alone reads as
+  // a footnote, the line is what says "this is no longer the price".
+  //
+  // The rule is drawn explicitly, because the browser default is a hairline
+  // that vanishes at this size against a muted tone.
+  &-original {
+    // Floored higher than the unit - this one is a figure, and a reader has to
+    // be able to compare it with the one next to it
+    font-size: max(0.5em, #{font-size('sm')});
+    font-weight: font-weight('normal');
+    color: var(--mw-text-muted-color);
+    text-decoration: line-through;
+    text-decoration-thickness: 0.09em;
+    white-space: nowrap;
+  }
+
+  // "/ month", "per session" - what the price is per
+  &-period {
+    font-size: max(0.42em, #{font-size('xs')});
+    font-weight: font-weight('normal');
+    color: var(--mw-text-muted-color);
+  }
+
+  // "On request", "free" - not a figure, so not set like one. Still bold, so it
+  // holds the same slot in a row of cards as a real price would.
+  //
+  // The line height is scaled back up to the one a full-size amount has: a row
+  // of offers puts "On request" next to "129", and a shorter line box would sit
+  // that card's price a few pixels out of line with its neighbours.
+  &-word {
+    font-size: $_mw-price-word-scale * 1em;
+    line-height: calc(#{$_mw-price-line-height}em / #{$_mw-price-word-scale});
+    font-weight: font-weight('bold');
+  }
+
+  // The line under a price - what it includes, what it saves. A *sibling* of
+  // the row, not a child: inside it, it would inherit the price size and be a
+  // flex item on the same baseline.
+  &-note {
+    margin: spacing('2') spacing('0') spacing('0');
+    font-size: font-size('sm');
+    color: var(--mw-text-muted-color);
+  }
+}
+
+// Size. Only the token moves - see the `em` above.
+.mw-price-sm {
+  --mw-price-size: #{font-size('xl')};
+}
+
+.mw-price-lg {
+  --mw-price-size: #{font-size('5xl')};
+}
+
+// The old price on its own line above the new one - for a narrow card where the
+// row would otherwise wrap at whatever point it runs out of width. The
+// `flex-basis` is the line break: a wrapper element around the rest would do
+// the same job and cost an element in every price on the page.
+.mw-price-stacked .mw-price-original {
+  flex-basis: 100%;
+  margin-bottom: spacing('-1');
+}
+
+.mw-price-center {
+  justify-content: center;
+}
+
+// Body colour instead of the brand - for a table row or a list where a coloured
+// price would be the loudest thing on screen for no reason.
+.mw-price-plain {
+  color: var(--mw-text-color);
+}
+
+// ---------------------------------------------------------------------------
+// Offer card
+//
+// The card a price is sold from: what you get, what it costs, the button that
+// asks for it. Deliberately thin - shell, body and footer are `mw-card`'s, this
+// adds only what selling something needs.
+// ---------------------------------------------------------------------------
+
+.mw-offer {
+  // Prices in a row of offers have to sit on one line, and the feature lists
+  // are never the same length. Pushed down rather than positioned: the grid
+  // already stretches the cards to equal height, so "as far down as it goes"
+  // resolves to the same line in every card of the row.
+  > .mw-card-body > .mw-price {
+    margin-top: auto;
+    padding-top: spacing('5');
+  }
+
+  // The card body already pushes its footer down the same way. Two `auto`
+  // margins in one column *share* the free space instead of collecting it above
+  // the first, which leaves the price floating somewhere in the middle and at a
+  // different height in every card - so the footer gives its own up as soon as
+  // a price stands in front of it.
+  //
+  // Bottom-aligned, note included: a card that carries a `mw-price-note` and
+  // one that does not will not have their prices on the same line. Give every
+  // card in a row a note, or none of them.
+  > .mw-card-body > .mw-price ~ .mw-card-footer {
+    margin-top: spacing('0');
+  }
+
+  // A solid band across the top carrying the name and the price - the layout
+  // for when the price is the thing being compared and the feature list is
+  // only its justification. Colour comes from `mw-card-addon-*` on the card,
+  // the same set the card badge and the ribbon read.
+  &-head {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: spacing('2');
+    padding: spacing('6') spacing('5');
+    // The card's own radius minus its border - the band sits inside it
+    border-radius: (radius('sm') - 1px) (radius('xl') - 1px) 0 0;
+    background: var(--mw-card-addon-color, var(--mw-primary-color));
+    color: var(--mw-card-addon-text-color, var(--mw-primary-accent-text-color));
+    text-align: center;
+
+    // On a solid fill the price cannot keep the brand colour, and the muted
+    // parts cannot keep a grey that was mixed against the page background
+    .mw-price,
+    .mw-price-original,
+    .mw-price-period {
+      color: inherit;
+    }
+
+    .mw-price-original,
+    .mw-price-period {
+      opacity: 0.7;
+    }
+  }
+
+  &-name {
+    margin: spacing('0');
+    font-size: font-size('md');
+    font-weight: font-weight('bold');
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  // With a band above it the body no longer opens the card, so it does not need
+  // the air a card top usually gets
+  &-head + .mw-card-body {
+    padding-top: spacing('6');
+  }
+}
+
+// The band owns the top-right corner. An arc drawn over it either disappears
+// into the fill or fights it - the same call the coloured panel header makes.
+.mw-offer:has(> .mw-offer-head)::after {
+  @include corner-accent(1px, 'bottom');
+}

package/src/scss/components/_segmented.scss

@@ -65,6 +65,18 @@
     background: var(--mw-primary-color);
     border-color: var(--mw-primary-text-color);
     color: var(--mw-primary-accent-text-color);
+
+    // A tag inside an item - the saving on a billing cycle, a count on a
+    // filter. Its colour variants mix their background from the *page*, so on
+    // the active item's fill they come out muddy: an orange pill on blue turns
+    // purple. On that one the tag borrows the item's own ink; on the others it
+    // keeps its colour, which is what makes a visitor click it in the first
+    // place.
+    .mw-tag {
+      background: transparent;
+      border-color: currentColor;
+      color: inherit;
+    }
   }
 }
 

package/src/scss/components/_tiles.scss

@@ -62,12 +62,11 @@
 // Base tile
 .mw-tile {
   background: var(--mw-card-background);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface;
   padding: spacing('5');
   box-shadow: var(--mw-elevation-2);
   transition: var(--mw-transition);
   border: 1px solid var(--mw-border);
-  position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;

package/src/scss/form-elements/_login.scss

@@ -2,11 +2,10 @@
 
 .mw-login {
   background: var(--mw-card-background);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface;
   box-shadow: var(--mw-elevation-2);
   transition: var(--mw-transition);
   border: 1px solid var(--mw-border);
-  position: relative;
   overflow: hidden;
   width: min(340px, 85%);
   margin: spacing('2') auto;

package/src/scss/utilities/_corner.scss

@@ -0,0 +1,8 @@
+@use '../abstracts' as *;
+
+// Opt-out from the corner accent - the arc on the two round corners that every
+// surface in the framework carries, see the surface() mixin. Everything else
+// stays: the radii, the border, the shadow, the hover.
+.mw-corner-plain::after {
+  content: none;
+}

package/src/scss/utilities/_index.scss

@@ -1,5 +1,6 @@
 @forward 'accessibility';
 @forward 'aspect';
+@forward 'corner';
 @forward 'display';
 @forward 'elevation';
 @forward 'flex';