@thalassic/themes 22.16.1 → 22.17.0

package/themes/thalassic/components/stepper/_stepper.scss

@@ -1,6 +1,7 @@
+@use '../../mixins' as mixins;
+
 .tls-stepper {
   --tls-stepper-label-color: var(--color-outline);
-  --tls-stepper-background-color: var(--color-surface);
 
   --tls-stepper-content-gap: var(--spacing-4);
 
@@ -8,6 +9,8 @@
   --tls-stepper-index-size: calc(32px - var(--tls-stepper-index-border-width) * 2);
 
   --tls-stepper-index-on-color: var(--color-on-surface);
+  // The index circle is opaque so the divider running behind it stays masked;
+  // it matches the surface the stepper sits on, which itself stays transparent.
   --tls-stepper-index-background-color: var(--color-surface);
   --tls-stepper-index-border-color: var(--color-outline-variant);
 
@@ -17,15 +20,10 @@
   --tls-stepper-divider-color: var(--color-outline-variant);
   --tls-stepper-divider-width: 2px;
 
-  background: var(--tls-stepper-background-color);
-
   display: flex;
   flex-direction: column;
   gap: var(--tls-stepper-content-gap);
 
-  transition: border-color var(--motion-theme),
-  background-color var(--motion-theme);
-
   &.tls-stepper--completed {
     .tls-stepper-content {
       .tls-step {
@@ -69,14 +67,33 @@
         position: relative;
         z-index: 1;
 
+        padding: 0;
+
         display: flex;
         flex-direction: column;
         gap: var(--spacing-2);
 
+        border: none;
+
+        background: none;
+
+        font: inherit;
+        text-align: start;
         color: var(--tls-stepper-label-color);
 
-        transition: color var(--motion-fast),
-        background-color var(--motion-fast);
+        cursor: pointer;
+
+        @include mixins.motion {
+          transition: color var(--motion-fast);
+        }
+
+        @include mixins.touch-target(var(--tls-stepper-index-size));
+
+        &:focus-visible {
+          @include mixins.focus-ring;
+
+          border-radius: var(--radius-sm);
+        }
 
         // The header is a tablist: it resolves the clicked step from
         // `event.target` and ignores any target that is not an `HTMLElement`,
@@ -101,13 +118,15 @@
           color: var(--tls-stepper-index-on-color);
           background-color: var(--tls-stepper-index-background-color);
 
-          transition: background-color var(--motion-fast);
+          @include mixins.motion {
+            transition: background-color var(--motion-fast), border-color var(--motion-fast);
+          }
         }
 
         &__text {
           display: flex;
           flex-direction: column;
-          gap: 0.25rem;
+          gap: var(--spacing-1);
 
           .tls-stepper-header-button__label {
             font-size: var(--font-label-large-size);
@@ -123,6 +142,11 @@
             letter-spacing: var(--font-label-medium-letter-spacing);
           }
         }
+
+        // State text (completed / invalid) for assistive technology only.
+        &__state {
+          @include mixins.visually-hidden;
+        }
       }
 
       .tls-stepper-header__divider {
@@ -130,7 +154,9 @@
 
         background-color: var(--tls-stepper-divider-color);
 
-        transition: background-color var(--motion-fast);
+        @include mixins.motion {
+          transition: background-color var(--motion-fast);
+        }
       }
     }
   }

package/themes/thalassic/components/toast/_toast.scss

@@ -138,15 +138,16 @@
   &__title {
     margin: 0;
 
-    font-size: var(--font-size-sm);
+    font-size: var(--font-body-small-size);
     font-weight: var(--font-weight-semibold);
+    line-height: var(--font-body-small-line-height);
   }
 
   &__message {
     margin: 0;
 
-    font-size: var(--font-size-sm);
-    line-height: 1.4;
+    font-size: var(--font-body-small-size);
+    line-height: var(--font-body-small-line-height);
     overflow-wrap: anywhere;
   }
 

package/themes/thalassic/mixins/_index.scss

@@ -2,5 +2,7 @@
 @forward 'focus-ring';
 @forward 'motion';
 @forward 'panel-open';
+@forward 'pop';
 @forward 'touch-target';
 @forward 'variant-treatment';
+@forward 'visually-hidden';

package/themes/thalassic/mixins/_pop.scss

@@ -0,0 +1,26 @@
+@use 'motion';
+
+// A quick grow-and-settle acknowledging a just-committed selection: the element
+// scales up to `--tls-pop-scale` and springs back. Only the peak is keyframed —
+// the edges fill in from the element's underlying transform, so the pop rides
+// on top of whatever scale the element already has (e.g. a hover grow) instead
+// of snapping it back to 1 first.
+@keyframes tls-pop {
+  50% {
+    transform: scale(var(--tls-pop-scale, 1.3));
+  }
+}
+
+@mixin pop(
+  $scale: 1.3,
+  $duration: var(--motion-default),
+  $easing: var(--motion-ease-spring)
+) {
+  // Selection feedback is expressive — the committed state already reads
+  // without it — so the pop belongs to the `full` tier only.
+  @include motion.motion(full) {
+    --tls-pop-scale: #{$scale};
+
+    animation: tls-pop $duration $easing;
+  }
+}

package/themes/thalassic/mixins/_visually-hidden.scss

@@ -0,0 +1,19 @@
+// Removes an element from the visual layout while leaving it in the accessibility tree, so the
+// text keeps naming its control for assistive technology. Use it instead of `display: none`
+// whenever hiding content would otherwise strip a control's accessible name.
+@mixin visually-hidden {
+  position: absolute;
+
+  width: 1px;
+  height: 1px;
+
+  margin: -1px;
+  padding: 0;
+
+  border: 0;
+
+  white-space: nowrap;
+  overflow: hidden;
+
+  clip-path: inset(50%);
+}