maverick-wave 4.10.0 → 4.12.0

package/src/scss/components/_tags.scss

@@ -28,7 +28,7 @@ $_mw-tag-colors: (
   border-radius: radius('xl');
   font-size: font-size('xs');
   border: 1px solid var(--mw-border);
-  transition: all 0.2s ease;
+  transition: var(--mw-transition-fast);
   user-select: none;
 
   &:hover {
@@ -65,7 +65,6 @@ $_mw-tag-colors: (
 
 .mw-tags-icon {
   display: inline-flex;
-  margin-left: spacing('1');
   margin-right: spacing('2');
   font-size: 0.9rem;
 }

package/src/scss/components/_techstack-bucket.scss

@@ -14,7 +14,7 @@
     border: 1px solid var(--mw-border);
     border-radius: radius('md');
     padding: spacing('2');
-    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+    transition: var(--mw-transition-fast);
     color: var(--mw-text-color);
     min-width: 50px;
     min-height: 50px;
@@ -32,9 +32,12 @@
       font-size: font-size('xs');
     }
 
-    &:hover {
+    @include hover {
       transform: translateY(-2px);
-      box-shadow: 0 3px 10px var(--mw-shadow);
+    }
+
+    &:hover {
+      box-shadow: var(--mw-elevation-3);
       border-color: var(--mw-primary-text-color);
 
       .mw-techstack-logo {
@@ -76,7 +79,7 @@
   &-logo {
     object-fit: contain;
     border-radius: radius('sm');
-    transition: transform 0.2s ease;
+    transition: transform var(--mw-duration-fast) var(--mw-ease-out);
     flex-shrink: 0;
   }
 
@@ -91,7 +94,7 @@
   &-name {
     font-weight: font-weight('bold');
     line-height: 1.1;
-    transition: color 0.2s ease;
+    transition: color var(--mw-duration-fast) var(--mw-ease-out);
   }
 
   &-desc {

package/src/scss/components/_theme-toggle.scss

@@ -14,6 +14,16 @@
   align-items: center;
   transition: var(--mw-transition);
   margin-right: spacing('5');
+  appearance: none;
+  padding: 0;
+  @include tappable;
+  @include focus-ring;
+
+  &:active {
+    transform: scale(0.95);
+    transition-duration: var(--mw-duration-instant);
+  }
+
   @include media-down('lg') {
     margin-right: spacing('6');
   }
@@ -21,6 +31,8 @@
   &-slider {
     position: absolute;
     left: 3px;
+    top: 50%;
+    transform: translateY(-50%);
     width: 20px;
     height: 20px;
     border-radius: radius('full');
@@ -38,15 +50,11 @@
     left: 35px;
   }
 
-  &.mw-active &-icon,
-  &.active &-icon {
-    left: 2px;
-  }
-
   &-icon {
-    position: absolute;
-    top: -2px;
-    left: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
     font-size: font-size('base');
     transform: rotate(16deg);
   }

package/src/scss/components/_tiles.scss

@@ -64,7 +64,7 @@
   background: var(--mw-card-background);
   border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
   padding: spacing('5');
-  box-shadow: 0 5px 10px var(--mw-shadow);
+  box-shadow: var(--mw-elevation-2);
   transition: var(--mw-transition);
   border: 1px solid var(--mw-border);
   position: relative;
@@ -74,11 +74,21 @@
   cursor: pointer;
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 7px 15px var(--mw-shadow);
+    box-shadow: var(--mw-elevation-3);
     border-color: var(--mw-border-accent);
   }
 
+  @include hover {
+    transform: translateY(-2px);
+  }
+
+  // A tile is tapped, so it needs a press of its own - the lift above never
+  // runs on a finger.
+  &:active {
+    transform: scale(0.985);
+    transition-duration: var(--mw-duration-instant);
+  }
+
   // Tile image
   &-img {
     width: 100px;
@@ -92,7 +102,7 @@
       width: 100%;
       height: 100%;
       object-fit: cover;
-      transition: var(--mw-transition);
+      transition: transform var(--mw-duration-zoom) var(--mw-ease-out);
     }
   }
 

package/src/scss/components/_timelines.scss

@@ -55,7 +55,7 @@ $_simple-date-width: 110px;
   position: relative;
   margin: spacing('1') auto;
   padding: spacing('5') 0;
-  width: min(96%, 900px);
+  width: min(100%, 900px);
 
   // Center vertical line
   &::before {
@@ -88,7 +88,7 @@ $_simple-date-width: 110px;
     justify-content: center;
     gap: spacing('2');
     cursor: default;
-    transition: transform 0.2s ease;
+    transition: transform var(--mw-duration-fast) var(--mw-ease-out);
     margin-bottom: spacing('4');
   }
 
@@ -109,7 +109,7 @@ $_simple-date-width: 110px;
     display: flex;
     flex-direction: column;
     opacity: 0;
-    animation-duration: 0.9s;
+    animation-duration: var(--mw-duration-slower);
     animation-fill-mode: forwards;
   }
 
@@ -117,7 +117,7 @@ $_simple-date-width: 110px;
     margin-top: spacing('4');
     padding: spacing('2') spacing('3');
     background: var(--mw-card-background);
-    box-shadow: 0 2px 7px var(--mw-shadow);
+    box-shadow: var(--mw-elevation-2);
     border-radius: radius('sm');
     cursor: default;
 
@@ -290,7 +290,7 @@ $_simple-date-width: 110px;
     position: relative;
     z-index: z-index('card');
     cursor: default;
-    transition: transform 0.2s ease;
+    transition: transform var(--mw-duration-fast) var(--mw-ease-out);
   }
 
   &-content {
@@ -304,7 +304,10 @@ $_simple-date-width: 110px;
   // Staggered animation
   @for $i from 1 through 10 {
     &-step:nth-child(#{$i}) &-content {
-      animation: mw-slide-in-right 0.6s forwards;
+      animation: mw-slide-in-right
+        var(--mw-duration-slow)
+        var(--mw-ease-out)
+        forwards;
       animation-delay: $i * 0.2s;
     }
   }

package/src/scss/components/_toasts.scss

@@ -15,7 +15,7 @@
   > * {
     pointer-events: auto;
     margin-bottom: spacing('0');
-    animation: mw-toast-in 0.3s ease;
+    animation: mw-toast-in var(--mw-duration-base) var(--mw-ease-spring);
   }
 
   // Default position

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

@@ -43,6 +43,7 @@ $_mw-checkbox-colors: (
   display: inline-flex;
   align-items: center;
   gap: spacing('2');
+  min-height: 1.5rem;
   cursor: pointer;
   user-select: none;
   position: relative;
@@ -83,7 +84,7 @@ $_mw-checkbox-colors: (
 
   // focus-visible state
   input[type='checkbox']:focus-visible + .mw-checkbox-box {
-    box-shadow: 0 0 0 2px var(--mw-primary-background);
+    @include focus-halo;
     border-color: var(--mw-primary-color);
   }
 

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

@@ -107,7 +107,7 @@
 .mw-field {
   display: flex;
   flex-direction: column;
-  gap: spacing('1');
+  gap: spacing('2');
 
   &-label {
     font-size: font-size('base');
@@ -142,7 +142,7 @@
     .mw-select,
     .mw-textarea {
       border-color: var(--mw-danger-color);
-      box-shadow: 0 0 0 2px var(--mw-danger-info-background);
+      @include focus-halo('danger-text-color');
     }
   }
 }

package/src/scss/form-elements/_input-group.scss

@@ -63,10 +63,20 @@
     }
   }
 
+  // The field inside gives its halo up - three boxes each drawing their own
+  // ring around themselves is not a focused control, it is three focused
+  // controls - and the group draws one around the whole thing instead. Without
+  // this the group was the one field on the page whose focus was a border
+  // colour and nothing else.
   .mw-input:focus {
     box-shadow: none;
   }
 
+  &:focus-within {
+    border-radius: radius('sm');
+    @include focus-halo;
+  }
+
   // Button as suffix/prefix (e.g. search button, copy button)
   .mw-btn {
     border-radius: 0;
@@ -84,13 +94,23 @@
     }
   }
 
-  // Size variants - applied to the group, cascades to prefix/suffix
+  // Size variants - put on the group, and they reach the field too. They used
+  // to style only the prefix and suffix, so `mw-input-group-sm` around a plain
+  // `mw-input` gave a small frame around a full-size field and the modifier
+  // looked broken unless you also knew to write `mw-input-sm` inside it.
   &-sm {
     .mw-input-group-prefix,
     .mw-input-group-suffix {
       padding: spacing('1') spacing('2');
       font-size: font-size('xs');
     }
+
+    .mw-input,
+    .mw-btn {
+      min-height: var(--mw-control-height-sm);
+      font-size: var(--mw-control-font-sm);
+      padding-block: spacing('1');
+    }
   }
 
   &-lg {
@@ -99,5 +119,14 @@
       padding: spacing('3') spacing('4');
       font-size: font-size('sm');
     }
+
+    .mw-input,
+    .mw-btn {
+      min-height: var(--mw-control-height-lg);
+      font-size: var(--mw-control-font-lg);
+      // A step under the minimum, or the padding wins and the group grows past
+      // the size step it was asked for - same trap as on the standalone field
+      padding-block: spacing('2');
+    }
   }
 }

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

@@ -3,7 +3,9 @@
 .mw-input {
   width: 100%;
   padding: spacing('2') spacing('3');
-  font-size: font-size('sm');
+  font-size: var(--mw-control-font);
+  line-height: var(--mw-control-line-height);
+  min-height: var(--mw-control-height);
   background: var(--mw-form-elements-background);
   color: var(--mw-form-elements-color);
   border: 2px solid var(--mw-border);
@@ -20,11 +22,7 @@
     border-color: var(--mw-gray-color);
   }
 
-  &:focus {
-    outline: none;
-    border-color: var(--mw-primary-color);
-    box-shadow: 0 0 0 2px var(--mw-primary-background);
-  }
+  @include field-focus;
 
   &:read-only {
     background-color: var(--mw-gray-background);
@@ -35,11 +33,13 @@
 
   &-sm {
     padding: spacing('1') spacing('2');
-    font-size: font-size('xs');
+    font-size: var(--mw-control-font-sm);
+    min-height: var(--mw-control-height-sm);
   }
   &-lg {
-    padding: spacing('3') spacing('4');
-    font-size: font-size('sm');
+    padding: spacing('2') spacing('4');
+    font-size: var(--mw-control-font-lg);
+    min-height: var(--mw-control-height-lg);
   }
 
   // Numeric input for money and other figures - the entry counterpart to the
@@ -75,7 +75,7 @@
       opacity: 0.55;
       padding: 0;
       margin-left: spacing('1');
-      transition: opacity 0.2s ease;
+      transition: opacity var(--mw-duration-fast) var(--mw-ease-out);
 
       &:hover {
         opacity: 1;

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

@@ -3,7 +3,7 @@
 .mw-login {
   background: var(--mw-card-background);
   border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
-  box-shadow: 0 5px 10px var(--mw-shadow);
+  box-shadow: var(--mw-elevation-2);
   transition: var(--mw-transition);
   border: 1px solid var(--mw-border);
   position: relative;

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

@@ -33,6 +33,7 @@ $_size-lg: spacing('7');
   display: inline-flex;
   align-items: center;
   gap: spacing('2');
+  min-height: 1.5rem;
   cursor: pointer;
   user-select: none;
 
@@ -50,7 +51,7 @@ $_size-lg: spacing('7');
     width: $_size-default;
     height: $_size-default;
     border: 2px solid var(--mw-border);
-    border-radius: 50%;
+    border-radius: radius('full');
     transition: var(--mw-transition);
     background: var(--mw-form-elements-background);
 
@@ -62,7 +63,7 @@ $_size-lg: spacing('7');
       width: 50%;
       height: 50%;
       background: var(--mw-primary-color);
-      border-radius: 50%;
+      border-radius: radius('full');
       transform: translate(-50%, -50%) scale(0);
       transition: var(--mw-transition);
     }
@@ -70,7 +71,7 @@ $_size-lg: spacing('7');
 
   // focus-visible state
   input[type='radio']:focus-visible + .mw-radio-button {
-    box-shadow: 0 0 0 2px var(--mw-primary-background);
+    @include focus-halo;
     border-color: var(--mw-primary-color);
   }
 

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

@@ -3,7 +3,8 @@
 .mw-select {
   width: 100%;
   padding: spacing('2') spacing('6') spacing('2') spacing('3');
-  font-size: font-size('xs');
+  font-size: var(--mw-control-font);
+  min-height: var(--mw-control-height);
   background: var(--mw-form-elements-background);
   color: var(--mw-form-elements-color);
   border: 2px solid var(--mw-border);
@@ -16,28 +17,26 @@
   background-position: right spacing('3') center;
   background-size: spacing('3') spacing('3');
   font-family: inherit;
-  line-height: 1.5;
+  line-height: var(--mw-control-line-height);
 
   &:hover:not(:focus):not(:disabled) {
     border-color: var(--mw-gray-color);
   }
 
-  &:focus {
-    outline: none;
-    border-color: var(--mw-primary-color);
-    box-shadow: 0 0 0 2px var(--mw-primary-background);
-  }
+  @include field-focus;
 
   // size modifiers
   &-sm {
     padding: spacing('1') spacing('5') spacing('1') spacing('2');
-    font-size: font-size('xs');
+    font-size: var(--mw-control-font-sm);
+    min-height: var(--mw-control-height-sm);
     background-position: right spacing('2') center;
     background-size: spacing('2') spacing('2');
   }
   &-lg {
-    padding: spacing('3') spacing('7') spacing('3') spacing('4');
-    font-size: font-size('sm');
+    padding: spacing('2') spacing('7') spacing('2') spacing('4');
+    font-size: var(--mw-control-font-lg);
+    min-height: var(--mw-control-height-lg);
     background-position: right spacing('4') center;
     background-size: spacing('4') spacing('4');
   }

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

@@ -28,7 +28,7 @@ $_mw-slider-colors: (
   border-radius: radius('sm');
   appearance: none;
   cursor: pointer;
-  margin-top: 0.35rem;
+  margin-top: spacing('2');
 
   // thumb
   &::-webkit-slider-thumb {
@@ -37,11 +37,11 @@ $_mw-slider-colors: (
     height: spacing('5');
     background: var(--fill);
     border: 2px solid var(--mw-border);
-    border-radius: 50%;
+    border-radius: radius('full');
     margin-top: spacing('0');
     transition:
-      transform 0.2s ease,
-      border-color 0.2s ease;
+      transform var(--mw-duration-fast) var(--mw-ease-out),
+      border-color var(--mw-duration-fast) var(--mw-ease-out);
   }
   &::-webkit-slider-thumb:hover {
     transform: scale(1.1);
@@ -51,10 +51,10 @@ $_mw-slider-colors: (
     width: spacing('5');
     height: spacing('5');
     border: 2px solid var(--fill);
-    border-radius: 50%;
+    border-radius: radius('full');
     transition:
-      transform 0.2s ease,
-      border-color 0.2s ease;
+      transform var(--mw-duration-fast) var(--mw-ease-out),
+      border-color var(--mw-duration-fast) var(--mw-ease-out);
   }
   &::-moz-range-thumb:hover {
     transform: scale(1.1);
@@ -76,7 +76,7 @@ $_mw-slider-colors: (
     width: spacing('5');
     height: spacing('5');
     border: 2px solid var(--fill);
-    border-radius: 50%;
+    border-radius: radius('full');
   }
 
   // sizes
@@ -97,7 +97,7 @@ $_mw-slider-colors: (
   }
   &-lg {
     height: 16px;
-    margin-top: 0.35rem;
+    margin-top: spacing('2');
     &::-webkit-slider-thumb {
       width: spacing('6');
       height: spacing('6');
@@ -128,8 +128,8 @@ $_mw-slider-colors: (
 .mw-slider-container {
   position: relative;
   width: 100%;
-  line-height: 0.9;
-  padding-bottom: 0.4rem;
+  line-height: 1.2;
+  padding-bottom: spacing('2');
 
   // the badge in top-right
   .mw-slider-value {

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

@@ -5,7 +5,8 @@
   width: 100%;
   height: auto;
   padding: spacing('2') spacing('3');
-  font-size: font-size('xs');
+  font-size: var(--mw-control-font);
+  line-height: var(--mw-control-line-height);
   background: var(--mw-form-elements-background);
   color: var(--mw-form-elements-color);
   border: 2px solid var(--mw-border);
@@ -23,11 +24,7 @@
     border-color: var(--mw-gray-color);
   }
 
-  &:focus {
-    outline: none;
-    border-color: var(--mw-primary-color);
-    box-shadow: 0 0 0 2px var(--mw-primary-background);
-  }
+  @include field-focus;
 
   &:read-only {
     background-color: var(--mw-gray-background);
@@ -38,12 +35,12 @@
 
   &-sm {
     padding: spacing('1') spacing('2');
-    font-size: font-size('xs');
+    font-size: var(--mw-control-font-sm);
   }
   &-lg {
     min-height: spacing('11');
     padding: spacing('3') spacing('4');
-    font-size: font-size('sm');
+    font-size: var(--mw-control-font-lg);
   }
 
   &-resizable {

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

@@ -34,6 +34,7 @@ $_knob-travel-lg: calc(
   display: inline-flex;
   align-items: center;
   gap: spacing('2');
+  min-height: 1.5rem;
   cursor: pointer;
   user-select: none;
   position: relative;
@@ -57,8 +58,8 @@ $_knob-travel-lg: calc(
     background: var(--mw-border);
     border-radius: radius('lg');
     transition:
-      background 0.25s ease,
-      box-shadow 0.25s ease;
+      background var(--mw-duration-base) var(--mw-ease-out),
+      box-shadow var(--mw-duration-base) var(--mw-ease-out);
     flex-shrink: 0;
 
     // The sliding knob
@@ -73,8 +74,8 @@ $_knob-travel-lg: calc(
       // fill *and* on the empty track, so it cannot follow the fill color
       background: var(--mw-accent-text-color);
       border-radius: radius('full');
-      transition: transform 0.25s ease;
-      box-shadow: 0 1px 4px var(--mw-shadow);
+      transition: transform var(--mw-duration-base) var(--mw-ease-out);
+      box-shadow: var(--mw-elevation-1);
     }
   }
 
@@ -87,7 +88,7 @@ $_knob-travel-lg: calc(
   }
 
   input[type='checkbox']:focus-visible + .mw-toggle-track {
-    box-shadow: 0 0 0 2px var(--mw-primary-background);
+    @include focus-halo;
   }
 
   .mw-toggle-label {

package/src/scss/layout/_footer.scss

@@ -61,8 +61,8 @@
             transform: scaleX(1);
             transform-origin: left;
             transition:
-              transform 0.2s ease,
-              opacity 0.2s ease;
+              transform var(--mw-duration-fast) var(--mw-ease-out),
+              opacity var(--mw-duration-fast) var(--mw-ease-out);
           }
 
           &:hover {
@@ -107,15 +107,23 @@
       font-size: font-size('xl');
       transition: var(--mw-transition);
       border: 1px solid var(--mw-border-accent);
-      box-shadow: 0 3px 10px var(--mw-shadow);
+      box-shadow: var(--mw-elevation-3);
       text-decoration: none;
 
       &:hover {
         background: var(--mw-primary-color);
         color: var(--mw-primary-accent-text-color);
-        transform: translateY(-2px);
         border-color: var(--mw-primary-color);
       }
+
+      @include hover {
+        transform: translateY(-2px);
+      }
+
+      &:active {
+        transform: scale(0.92);
+        transition-duration: var(--mw-duration-instant);
+      }
     }
   }
 
@@ -134,8 +142,8 @@
     font-size: font-size('sm');
     padding-top: spacing('4');
     margin: spacing('7') auto spacing('1') auto;
-    width: 85%;
-    border-top: 1px solid var(--mw-secondary-text-color);
+    width: 100%;
+    border-top: 1px solid var(--mw-border-accent);
   }
 
   .mw-last-updated {
@@ -202,7 +210,6 @@
     }
 
     .mw-copyright {
-      width: 100%;
       margin-top: spacing('5');
       font-size: font-size('xs');
     }