maverick-wave 4.12.0 → 4.14.0

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/_links.scss

@@ -0,0 +1,35 @@
+@use '../abstracts' as *;
+
+// A link inside a sentence. Same look as `mw-btn-link`, but none of the button:
+// no `inline-flex`, no control height. That difference is the whole point -
+// `mw-btn` lifts its line to 2.25rem, which is barely visible in a heading and
+// glaring in a footer disclaimer, where the line around it is half that.
+//
+// So: `mw-link` in running text, `mw-btn mw-btn-link` where the link really is
+// one of several buttons and has to line up with them.
+//
+// `font` and the focus ring are spelled out because this also has to work on a
+// `<button>` - a "show more" in the middle of a paragraph is a button, and the
+// reset hands it the family but not the size. The shorthand carries the line
+// height along, which is what makes the button box come out exactly as tall as
+// the line it sits in. It stays one unbreakable box either way, since no
+// browser lets a `<button>` wrap - use an `<a>` where the label is long enough
+// to need it.
+.mw-link,
+.mw-link-muted {
+  font: inherit;
+
+  @include link-look;
+  @include focus-ring;
+}
+
+.mw-link {
+  color: var(--mw-primary-text-color);
+}
+
+.mw-link-muted {
+  color: var(--mw-text-muted-color);
+  &:hover {
+    color: var(--mw-primary-text-color);
+  }
+}

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/_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';