maverick-wave 4.12.0 → 4.14.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "4.12.0",
+  "version": "4.14.0",
   "config": {
-    "version_short": "4.12"
+    "version_short": "4.14"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/src/partials/accordions-container.html

@@ -94,7 +94,7 @@
           <button
             type="button"
             onclick="location.href = '#get-started'"
-            class="mw-btn mw-btn-link mw-p-0"
+            class="mw-link"
           >
             See the "Get Started" section
           </button>

package/src/partials/buttons-container.html

@@ -219,7 +219,8 @@
   request row, a modal backdrop. It brings nothing but the focus ring and the
   pointer; everything else it inherits. Not the same as
   <code>mw-btn-link</code>, which is a button dressed as a link with a colour
-  and a minimum width of its own.
+  and a control height of its own, nor the same as <code>mw-link</code>, which
+  is the link inside a sentence.
 </p>
 <div class="mw-card mw-card-simple">
   <p class="mw-mb-4">
@@ -236,6 +237,28 @@
   </div>
 </div>
 
+<h3 class="mw-mb-4 mw-mt-6">Text Links</h3>
+<p class="mw-text-muted">
+  <code>mw-link</code> is the link inside a sentence,
+  <code>mw-link-muted</code> the quieter one. Same look as
+  <code>mw-btn-link</code>, without the button: <code>mw-btn</code> carries a
+  control height, and in running text that lifts the one line the link sits on
+  above every line around it - glaring in a footer disclaimer, where the text is
+  a size smaller to begin with. So <code>mw-link</code> in a paragraph,
+  <code>mw-btn mw-btn-link</code> where the link really is one of several
+  buttons and has to line up with them. Both work on an
+  <code>&lt;a&gt;</code> and on a <code>&lt;button&gt;</code>.
+</p>
+<div class="mw-card mw-card-simple">
+  <p class="mw-mb-0">
+    Built with
+    <a href="https://astro.build" target="_blank" class="mw-link">Astro</a>
+    and written up in the
+    <a href="#get-started" class="mw-link-muted">Get Started</a> section - both
+    sit on the line, not above it.
+  </p>
+</div>
+
 <h3 class="mw-mb-4 mw-mt-6">Touch Targets</h3>
 <p class="mw-text-muted">
   On a coarse pointer or below 768px the compact controls grow to a size a thumb

package/src/partials/code-container.html

@@ -117,17 +117,11 @@ function Counter() {
       <p>
         For automatic highlighting of various languages, integrate a dedicated
         JavaScript library like
-        <a
-          href="https://prismjs.com/"
-          target="_blank"
-          class="mw-btn mw-btn-link mw-p-0"
+        <a href="https://prismjs.com/" target="_blank" class="mw-link"
           >Prism.js</a
         >
         or
-        <a
-          href="https://highlightjs.org/"
-          target="_blank"
-          class="mw-btn mw-btn-link mw-p-0"
+        <a href="https://highlightjs.org/" target="_blank" class="mw-link"
           >Highlight.js</a
         >.
       </p>

package/src/partials/footer-container.html

@@ -101,13 +101,7 @@
 
 <p class="mw-copyright">
   &copy; <span>{{LAST_BUILD_YEAR}}</span> MaverickWave v{{VERSION}} - by
-  <a
-    href="https://m1well.com"
-    target="_blank"
-    class="mw-btn mw-btn-link mw-px-0 mw-py-0"
-  >
-    m1well
-  </a>
+  <a href="https://m1well.com" target="_blank" class="mw-link"> m1well </a>
 </p>
 
 <p class="mw-last-updated">Last updated: <span>{{LAST_BUILD_DATE}}</span></p>

package/src/partials/grid-container.html

@@ -10,37 +10,37 @@
 
 <h3 class="mw-mb-4">Grid with 1 Column</h3>
 <div class="mw-grid-1 mw-mb-6">
-  <div class="mw-card mw-card-simple">Column 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
 </div>
 
 <h3 class="mw-mb-4">Grid with 2 Columns</h3>
 <div class="mw-grid-2 mw-mb-6">
-  <div class="mw-card mw-card-simple">Column 1</div>
-  <div class="mw-card mw-card-simple">Column 2</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
 </div>
 
 <h3 class="mw-mb-4">Grid with 3 Columns</h3>
 <div class="mw-grid-3 mw-mb-6">
-  <div class="mw-card mw-card-simple">Column 1</div>
-  <div class="mw-card mw-card-simple">Column 2</div>
-  <div class="mw-card mw-card-simple">Column 3</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
 </div>
 
 <h3 class="mw-mb-4">Grid with 4 Columns</h3>
 <div class="mw-grid-4 mw-mb-6">
-  <div class="mw-card mw-card-simple">Column 1</div>
-  <div class="mw-card mw-card-simple">Column 2</div>
-  <div class="mw-card mw-card-simple">Column 3</div>
-  <div class="mw-card mw-card-simple">Column 4</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 4</div>
 </div>
 
 <h3 class="mw-mb-4">Grid with 5 Columns</h3>
 <div class="mw-grid-5 mw-mb-6">
-  <div class="mw-card mw-card-simple">Column 1</div>
-  <div class="mw-card mw-card-simple">Column 2</div>
-  <div class="mw-card mw-card-simple">Column 3</div>
-  <div class="mw-card mw-card-simple">Column 4</div>
-  <div class="mw-card mw-card-simple">Column 5</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 4</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 5</div>
 </div>
 
 <h3 class="mw-mb-3">Flexible Grid with Column Spans</h3>
@@ -48,9 +48,13 @@
   12-column grid with custom spans: 2 columns + 4 columns + 1 column
 </p>
 <div class="mw-grid-flex mw-mb-6">
-  <div class="mw-col-span-2 mw-card mw-card-simple">Span 2 Columns</div>
-  <div class="mw-col-span-4 mw-card mw-card-simple">Span 4 Columns</div>
-  <div class="mw-col-span-1 mw-card mw-card-simple">1 col</div>
+  <div class="mw-col-span-2 mw-card mw-card-simple mw-corner-plain">
+    Span 2 Columns
+  </div>
+  <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
+    Span 4 Columns
+  </div>
+  <div class="mw-col-span-1 mw-card mw-card-simple mw-corner-plain">1 col</div>
 </div>
 
 <h3 class="mw-mb-3">Mixed Column Spans</h3>
@@ -58,11 +62,15 @@
   Various column combinations: 3 + 6 + 3 columns
 </p>
 <div class="mw-grid-flex mw-mb-6">
-  <div class="mw-col-span-3 mw-card mw-card-simple">Span 3 Columns</div>
-  <div class="mw-col-span-6 mw-card mw-card-simple">
+  <div class="mw-col-span-3 mw-card mw-card-simple mw-corner-plain">
+    Span 3 Columns
+  </div>
+  <div class="mw-col-span-6 mw-card mw-card-simple mw-corner-plain">
     Span 6 Columns (Main Content)
   </div>
-  <div class="mw-col-span-3 mw-card mw-card-simple">Span 3 Columns</div>
+  <div class="mw-col-span-3 mw-card mw-card-simple mw-corner-plain">
+    Span 3 Columns
+  </div>
 </div>
 
 <h3 class="mw-mb-3">Asymmetric Layout</h3>
@@ -70,8 +78,10 @@
   Sidebar + content layout: 4 + 8 columns
 </p>
 <div class="mw-grid-flex mw-mb-6">
-  <div class="mw-col-span-4 mw-card mw-card-simple">Sidebar (4 cols)</div>
-  <div class="mw-col-span-8 mw-card mw-card-simple">
+  <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
+    Sidebar (4 cols)
+  </div>
+  <div class="mw-col-span-8 mw-card mw-card-simple mw-corner-plain">
     Main Content Area (8 cols)
   </div>
 </div>
@@ -83,46 +93,54 @@
   dynamic content.
 </p>
 <div class="mw-grid-auto-sm mw-mb-6">
-  <div class="mw-card mw-card-simple">Product Card</div>
-  <div class="mw-card mw-card-simple">Service Card</div>
-  <div class="mw-card mw-card-simple">Team Member</div>
-  <div class="mw-card mw-card-simple">Portfolio Item</div>
-  <div class="mw-card mw-card-simple">Blog Post</div>
-  <div class="mw-card mw-card-simple">Feature</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Product Card</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Service Card</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Team Member</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Portfolio Item</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Blog Post</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Feature</div>
 </div>
 
 <h3 class="mw-mb-4">Grid with 3 Columns - Default Spacing</h3>
 <div class="mw-grid-3 mw-mb-6">
-  <div class="mw-card mw-card-simple">Column 1</div>
-  <div class="mw-card mw-card-simple">Column 2</div>
-  <div class="mw-card mw-card-simple">Column 3</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
 </div>
 
 <h3 class="mw-mb-4">Grid with 3 Columns - Large Spacing</h3>
 <div class="mw-grid-3-lg mw-mb-6">
-  <div class="mw-card mw-card-simple">Column 1</div>
-  <div class="mw-card mw-card-simple">Column 2</div>
-  <div class="mw-card mw-card-simple">Column 3</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
 </div>
 
 <h3 class="mw-mb-4">Flexible Grid - Default Spacing</h3>
 <div class="mw-grid-flex mw-mb-6">
-  <div class="mw-col-span-4 mw-card mw-card-simple">4 Columns</div>
-  <div class="mw-col-span-8 mw-card mw-card-simple">8 Columns</div>
+  <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
+    4 Columns
+  </div>
+  <div class="mw-col-span-8 mw-card mw-card-simple mw-corner-plain">
+    8 Columns
+  </div>
 </div>
 
 <h3 class="mw-mb-4">Flexible Grid - Large Spacing</h3>
 <div class="mw-grid-flex-lg mw-mb-6">
-  <div class="mw-col-span-4 mw-card mw-card-simple">4 Columns</div>
-  <div class="mw-col-span-8 mw-card mw-card-simple">8 Columns</div>
+  <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
+    4 Columns
+  </div>
+  <div class="mw-col-span-8 mw-card mw-card-simple mw-corner-plain">
+    8 Columns
+  </div>
 </div>
 
 <h3 class="mw-mb-4">Auto Grid - Large Spacing</h3>
 <div class="mw-grid-auto-lg mw-mb-6">
-  <div class="mw-card mw-card-simple">Auto 1</div>
-  <div class="mw-card mw-card-simple">Auto 2</div>
-  <div class="mw-card mw-card-simple">Auto 3</div>
-  <div class="mw-card mw-card-simple">Auto 4</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Auto 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Auto 2</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Auto 3</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Auto 4</div>
 </div>
 
 <h3 class="mw-mb-4">Grid Stack - Natural Width (Left Aligned)</h3>
@@ -130,7 +148,7 @@
   <button class="mw-btn mw-btn-primary">Small Button</button>
   <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
   <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
-  <div class="mw-card mw-card-simple" style="width: 200px">
+  <div class="mw-card mw-card-simple mw-corner-plain" style="width: 200px">
     Fixed Width Card
   </div>
 </div>
@@ -140,7 +158,7 @@
   <button class="mw-btn mw-btn-primary">Small Button</button>
   <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
   <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
-  <div class="mw-card mw-card-simple" style="width: 200px">
+  <div class="mw-card mw-card-simple mw-corner-plain" style="width: 200px">
     Fixed Width Card
   </div>
 </div>
@@ -150,7 +168,7 @@
   <button class="mw-btn mw-btn-primary">Small Button</button>
   <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
   <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
-  <div class="mw-card mw-card-simple" style="width: 200px">
+  <div class="mw-card mw-card-simple mw-corner-plain" style="width: 200px">
     Fixed Width Card
   </div>
 </div>
@@ -160,12 +178,14 @@
   <button class="mw-btn mw-btn-primary">Small Button</button>
   <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
   <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
-  <div class="mw-card mw-card-simple">Full Width Card</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Full Width Card</div>
 </div>
 
 <h3 class="mw-mb-4">Grid Stack - Large Spacing & Centered</h3>
 <div class="mw-grid-stack-center-lg mw-mb-6">
   <button class="mw-btn mw-btn-primary">Button 1</button>
   <button class="mw-btn mw-btn-secondary">Button 2</button>
-  <div class="mw-card mw-card-simple" style="width: 300px">Centered Card</div>
+  <div class="mw-card mw-card-simple mw-corner-plain" style="width: 300px">
+    Centered Card
+  </div>
 </div>

package/src/partials/tabs-container.html

@@ -219,7 +219,7 @@ href="path/maverick-wave.min.css"&gt;</code></pre>
           <button
             type="button"
             onclick="location.href = '#get-started'"
-            class="mw-btn mw-btn-link mw-p-0"
+            class="mw-link"
           >
             Refer to the "Get Started" section
           </button>

package/src/partials/utilities-container.html

@@ -26,12 +26,17 @@
     </p>
 
     <div class="mw-card mw-card-simple mw-mb-4">
-      <div class="mw-card mw-card-simple mw-mx-auto" style="width: 60%">
+      <div
+        class="mw-card mw-card-simple mw-corner-plain mw-mx-auto"
+        style="width: 60%"
+      >
         mw-mx-auto
       </div>
     </div>
 
-    <div class="mw-card mw-card-simple mw-d-flex mw-items-center mw-gap-3">
+    <div
+      class="mw-card mw-card-simple mw-corner-plain mw-d-flex mw-items-center mw-gap-3"
+    >
       <span>Left</span>
       <span class="mw-tag mw-tag-primary mw-ml-auto">mw-ml-auto</span>
     </div>
@@ -43,18 +48,18 @@
     <div class="mw-card mw-card-simple mw-mb-4">
       <h4 class="mw-mb-2">Flex Row</h4>
       <div class="mw-d-flex mw-justify-between mw-gap-3">
-        <div class="mw-card mw-card-simple mw-p-2">Item 1</div>
-        <div class="mw-card mw-card-simple mw-p-2">Item 2</div>
-        <div class="mw-card mw-card-simple mw-p-2">Item 3</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 1</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 2</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 3</div>
       </div>
     </div>
 
     <div class="mw-card mw-card-simple mw-mb-4">
       <h4 class="mw-mb-2">Flex Column</h4>
       <div class="mw-d-flex mw-flex-column mw-gap-3">
-        <div class="mw-card mw-card-simple mw-p-2">Item 1</div>
-        <div class="mw-card mw-card-simple mw-p-2">Item 2</div>
-        <div class="mw-card mw-card-simple mw-p-2">Item 3</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 1</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 2</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 3</div>
       </div>
     </div>
 
@@ -64,8 +69,12 @@
         class="mw-d-flex mw-justify-center mw-items-center mw-gap-3"
         style="height: 90px"
       >
-        <div class="mw-card mw-card-simple mw-p-2">Centered</div>
-        <div class="mw-card mw-card-simple mw-p-2">Centered</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">
+          Centered
+        </div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">
+          Centered
+        </div>
       </div>
     </div>
 
@@ -76,10 +85,20 @@
         <code>mw-self-*</code> lets a single child break out of it.
       </p>
       <div class="mw-d-flex mw-items-stretch mw-gap-3" style="height: 130px">
-        <div class="mw-card mw-card-simple mw-p-2">stretch</div>
-        <div class="mw-card mw-card-simple mw-p-2 mw-self-start">start</div>
-        <div class="mw-card mw-card-simple mw-p-2 mw-self-center">center</div>
-        <div class="mw-card mw-card-simple mw-p-2 mw-self-end">end</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">stretch</div>
+        <div
+          class="mw-card mw-card-simple mw-p-2 mw-self-start mw-corner-plain"
+        >
+          start
+        </div>
+        <div
+          class="mw-card mw-card-simple mw-p-2 mw-self-center mw-corner-plain"
+        >
+          center
+        </div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-self-end mw-corner-plain">
+          end
+        </div>
       </div>
     </div>
   </div>
@@ -92,30 +111,30 @@
       <div class="mw-mb-4">
         <p class="mw-mb-2">Small gap (gap-2)</p>
         <div class="mw-d-flex mw-gap-2 mw-flex-wrap">
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
         </div>
       </div>
 
       <div class="mw-mb-4">
         <p class="mw-mb-2">Medium gap (gap-4)</p>
         <div class="mw-d-flex mw-gap-4 mw-flex-wrap">
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
         </div>
       </div>
 
       <div>
         <p class="mw-mb-2">Large gap (gap-7)</p>
         <div class="mw-d-flex mw-gap-7 mw-flex-wrap">
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
         </div>
       </div>
     </div>

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) {
@@ -253,3 +254,89 @@
     box-shadow: none;
   }
 }
+
+// The look a link has: no box of its own, the underline only on hover, and it
+// sits a little lower than the browser's default so a descender does not cross
+// it. Shared by `mw-link` in running text and `mw-btn-link` in a row of
+// buttons - the two differ in whether they carry a control height, not in how
+// they look.
+@mixin link-look {
+  background: transparent;
+  border: none;
+  padding: 0;
+  text-underline-offset: 0.22em;
+  text-decoration-thickness: 1.5px;
+
+  &:hover:not(:disabled) {
+    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/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/_buttons.scss

@@ -111,17 +111,12 @@
   }
 }
 
+// A button that looks like a link but is still a button: it keeps the control
+// height, so it lines up with the Save next to it in a card's actions or a
+// button bar. A link inside a sentence is `mw-link` instead - see _links.scss.
 .mw-btn-link,
 .mw-btn-link-muted {
-  background: transparent;
-  border: none;
-  padding: 0;
-  text-underline-offset: 0.22em;
-  text-decoration-thickness: 1.5px;
-
-  &:hover:not(:disabled) {
-    text-decoration: underline;
-  }
+  @include link-look;
 }
 
 .mw-btn-link {
@@ -220,7 +215,8 @@
 // the right element and a button is the wrong look.
 //
 // Not the same as `mw-btn-link`: that one is a button dressed as a link, with
-// its own colour and a min-width. This one has no look at all.
+// its own colour and a control height. Nor `mw-link`, which is the link inside
+// a sentence. This one has no look at all.
 .mw-btn-plain {
   display: inline-flex;
   align-items: center;

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

@@ -18,6 +18,7 @@
 @forward 'info';
 @forward 'kanban';
 @forward 'kbd';
+@forward 'links';
 @forward 'lists';
 @forward 'localhost-indicator';
 @forward 'meta-info';