@thalassic/themes 22.5.0 → 22.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thalassic/themes",
-  "version": "22.5.0",
+  "version": "22.6.0",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^22.0.0",

package/themes/thalassic/components/_checkbox.scss

@@ -29,10 +29,9 @@
 
     background-color: var(--color-surface);
 
-    transition:
-      box-shadow var(--motion-fast) var(--motion-ease-in-out),
-      border-color var(--motion-fast) var(--motion-ease-in-out),
-      background-color var(--motion-fast) var(--motion-ease-in-out);
+    transition: box-shadow var(--motion-fast) var(--motion-ease-in-out),
+    border-color var(--motion-fast) var(--motion-ease-in-out),
+    background-color var(--motion-fast) var(--motion-ease-in-out);
 
     &:checked {
       background-color: var(--color-primary);
@@ -47,6 +46,10 @@
     position: absolute;
     inset: 0;
 
+    width: calc(var(--tls-checkbox-size) * 0.75);
+    height: calc(var(--tls-checkbox-size) * 0.75);
+    margin: auto;
+
     opacity: 0;
     scale: 0;
 
@@ -54,9 +57,8 @@
 
     color: var(--tls-checkbox-checked-icon-color);
 
-    transition:
-      scale var(--motion-default) var(--motion-ease-bounce),
-      opacity var(--motion-fast) var(--motion-ease-in-out);
+    transition: scale var(--motion-default) var(--motion-ease-bounce),
+    opacity var(--motion-fast) var(--motion-ease-in-out);
   }
 
   // Checked & Indeterminate

package/themes/thalassic/components/_icon.scss

@@ -1,15 +1,35 @@
-.tls-icon {
-  width: auto;
-  height: auto;
-
-  min-width: auto;
-  min-height: auto;
+// Default 1em box at zero specificity, so any consumer size class (e.g.
+// .tls-select__chevron) overrides it without needing a compound selector.
+:where(.tls-icon) {
+  width: 1em;
+  height: 1em;
+}
 
-  display: inline-block;
+.tls-icon {
+  display: inline-flex;
 
   color: inherit;
 
   .tls-svg-icon {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+
     color: inherit;
+
+    svg {
+      width: 100%;
+      height: 100%;
+
+      display: block;
+    }
+  }
+
+  .tls-img-icon {
+    width: 100%;
+    height: 100%;
+
+    object-fit: contain;
   }
 }

package/themes/thalassic/components/badge/_badge-color.scss

@@ -0,0 +1,6 @@
+@use '../../mixins' as mixins;
+
+.tls-badge {
+  @include mixins.color-variants('tls-badge', $tonal: true);
+  @include mixins.tonal-swap('tls-badge');
+}

package/themes/thalassic/components/badge/_badge-position.scss

@@ -0,0 +1,21 @@
+.tls-badge {
+  &--top-start &__indicator {
+    inset-block-start: var(--tls-badge-offset);
+    inset-inline-start: var(--tls-badge-offset);
+  }
+
+  &--top-end &__indicator {
+    inset-block-start: var(--tls-badge-offset);
+    inset-inline-end: var(--tls-badge-offset);
+  }
+
+  &--bottom-start &__indicator {
+    inset-block-end: var(--tls-badge-offset);
+    inset-inline-start: var(--tls-badge-offset);
+  }
+
+  &--bottom-end &__indicator {
+    inset-block-end: var(--tls-badge-offset);
+    inset-inline-end: var(--tls-badge-offset);
+  }
+}

package/themes/thalassic/components/badge/_badge-size.scss

@@ -0,0 +1,22 @@
+.tls-badge {
+  &.tls-badge--sm {
+    --tls-badge-size: 16px;
+    --tls-badge-dot-size: 6px;
+    --tls-badge-padding-inline: var(--spacing-1);
+    --tls-badge-font-size: var(--font-label-small-size);
+  }
+
+  &.tls-badge--md {
+    --tls-badge-size: 20px;
+    --tls-badge-dot-size: 8px;
+    --tls-badge-padding-inline: var(--spacing-2);
+    --tls-badge-font-size: var(--font-label-small-size);
+  }
+
+  &.tls-badge--lg {
+    --tls-badge-size: 24px;
+    --tls-badge-dot-size: 10px;
+    --tls-badge-padding-inline: var(--spacing-2);
+    --tls-badge-font-size: var(--font-label-medium-size);
+  }
+}

package/themes/thalassic/components/badge/_badge.scss

@@ -0,0 +1,62 @@
+@use '../../mixins' as mixins;
+
+@keyframes tls-badge-pop {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.tls-badge {
+  position: relative;
+
+  display: inline-flex;
+
+  &__indicator {
+    --tls-badge-offset: calc(var(--tls-badge-size) / -2);
+
+    position: absolute;
+    z-index: 1;
+
+    min-width: var(--tls-badge-size);
+    height: var(--tls-badge-size);
+
+    padding-inline: var(--tls-badge-padding-inline);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: var(--radius-xl);
+
+    background-color: var(--tls-badge-color);
+
+    font-size: var(--tls-badge-font-size);
+    font-weight: 600;
+    line-height: 1;
+    color: var(--tls-badge-on-color);
+
+    pointer-events: none;
+
+    @include mixins.motion(essential) {
+      &--enter {
+        animation: tls-badge-pop var(--motion-instant) var(--motion-ease-out) both;
+      }
+
+      &--leave {
+        animation: tls-badge-pop var(--motion-instant) var(--motion-ease-in) reverse both;
+      }
+    }
+  }
+
+  &--dot &__indicator {
+    --tls-badge-size: var(--tls-badge-dot-size);
+
+    padding-inline: 0;
+  }
+}

package/themes/thalassic/components/badge/_index.scss

@@ -0,0 +1,4 @@
+@forward "badge";
+@forward "badge-color";
+@forward "badge-position";
+@forward "badge-size";

package/themes/thalassic/components/button/_button-color.scss

@@ -1,38 +1,8 @@
-.tls-button {
-  &.tls-button--primary {
-    --tls-button-on-color: var(--color-on-primary);
-    --tls-button-color: var(--color-primary);
-  }
-
-  &.tls-button--secondary {
-    --tls-button-on-color: var(--color-on-secondary);
-    --tls-button-color: var(--color-secondary);
-  }
-
-  &.tls-button--tertiary {
-    --tls-button-on-color: var(--color-on-tertiary);
-    --tls-button-color: var(--color-tertiary);
-  }
-
-  &.tls-button--success {
-    --tls-button-on-color: var(--color-on-success);
-    --tls-button-color: var(--color-success);
-  }
-
-  &.tls-button--info {
-    --tls-button-on-color: var(--color-on-info);
-    --tls-button-color: var(--color-info);
-  }
+@use '../../mixins' as mixins;
 
-  &.tls-button--warning {
-    --tls-button-on-color: var(--color-on-warning);
-    --tls-button-color: var(--color-warning);
-  }
-
-  &.tls-button--danger {
-    --tls-button-on-color: var(--color-on-danger);
-    --tls-button-color: var(--color-danger);
-  }
+.tls-button {
+  @include mixins.color-variants('tls-button', $tonal: true);
+  @include mixins.tonal-swap('tls-button');
 
   &.tls-button--disabled {
     --tls-button-on-color: var(--color-on-surface-variant);

package/themes/thalassic/components/button/_button-variant.scss

@@ -13,7 +13,8 @@
   }
 
   // Variants
-  &--filled {
+  &--filled,
+  &--tonal {
     color: var(--tls-button-on-color);
 
     &::before {

package/themes/thalassic/components/calendar/_calendar.scss

@@ -18,9 +18,9 @@
   }
 
   &__nav-button {
-    svg {
-      width: 8px;
-      height: 14px;
+    .tls-icon {
+      width: 18px;
+      height: 18px;
     }
   }
 

package/themes/thalassic/components/chip/_chip-color.scss

@@ -1,36 +1,5 @@
-.tls-chip {
-  &.tls-chip--primary {
-    --tls-chip-color: var(--color-primary);
-    --tls-chip-on-color: var(--color-on-primary);
-  }
-
-  &.tls-chip--secondary {
-    --tls-chip-color: var(--color-secondary);
-    --tls-chip-on-color: var(--color-on-secondary);
-  }
-
-  &.tls-chip--tertiary {
-    --tls-chip-color: var(--color-tertiary);
-    --tls-chip-on-color: var(--color-on-tertiary);
-  }
-
-  &.tls-chip--success {
-    --tls-chip-color: var(--color-success);
-    --tls-chip-on-color: var(--color-on-success);
-  }
+@use '../../mixins' as mixins;
 
-  &.tls-chip--info {
-    --tls-chip-color: var(--color-info);
-    --tls-chip-on-color: var(--color-on-info);
-  }
-
-  &.tls-chip--warning {
-    --tls-chip-color: var(--color-warning);
-    --tls-chip-on-color: var(--color-on-warning);
-  }
-
-  &.tls-chip--danger {
-    --tls-chip-color: var(--color-danger);
-    --tls-chip-on-color: var(--color-on-danger);
-  }
-}
+.tls-chip {
+  @include mixins.color-variants('tls-chip', $tonal: true);
+}

package/themes/thalassic/components/chip/_chip-control.scss

@@ -1,3 +1,5 @@
+@use '../../mixins' as mixins;
+
 .tls-chip {
   &.tls-chip--control {
     cursor: pointer;
@@ -9,49 +11,24 @@
     border-color: var(--tls-chip-color);
   }
 
-  &.tls-chip--checked-primary {
-    --tls-chip-color: var(--color-primary);
-    --tls-chip-on-color: var(--color-on-primary);
-  }
-
-  &.tls-chip--checked-secondary {
-    --tls-chip-color: var(--color-secondary);
-    --tls-chip-on-color: var(--color-on-secondary);
-  }
-
-  &.tls-chip--checked-tertiary {
-    --tls-chip-color: var(--color-tertiary);
-    --tls-chip-on-color: var(--color-on-tertiary);
-  }
-
-  &.tls-chip--checked-success {
-    --tls-chip-color: var(--color-success);
-    --tls-chip-on-color: var(--color-on-success);
-  }
-
-  &.tls-chip--checked-info {
-    --tls-chip-color: var(--color-info);
-    --tls-chip-on-color: var(--color-on-info);
-  }
-
-  &.tls-chip--checked-warning {
-    --tls-chip-color: var(--color-warning);
-    --tls-chip-on-color: var(--color-on-warning);
-  }
-
-  &.tls-chip--checked-danger {
-    --tls-chip-color: var(--color-danger);
-    --tls-chip-on-color: var(--color-on-danger);
-  }
+  @include mixins.color-variants('tls-chip', $tonal: true, $modifier: 'checked-');
 
   // Checked variant overrides (higher specificity than the base variant so the
-  // checked appearance wins regardless of stylesheet order).
+  // checked appearance wins regardless of stylesheet order). Each reads its pair
+  // directly rather than swapping a shared token, so the base variant never leaks
+  // across the checked boundary.
   &.tls-chip--checked.tls-chip--checked-filled {
     background-color: var(--tls-chip-color);
     color: var(--tls-chip-on-color);
     border-color: var(--tls-chip-color);
   }
 
+  &.tls-chip--checked.tls-chip--checked-tonal {
+    background-color: var(--tls-chip-color-container);
+    color: var(--tls-chip-on-color-container);
+    border-color: var(--tls-chip-color-container);
+  }
+
   &.tls-chip--checked.tls-chip--checked-outlined {
     background-color: transparent;
     color: var(--tls-chip-color);

package/themes/thalassic/components/chip/_chip-variant.scss

@@ -4,6 +4,11 @@
     color: var(--tls-chip-on-color);
   }
 
+  &.tls-chip--tonal {
+    background-color: var(--tls-chip-color-container);
+    color: var(--tls-chip-on-color-container);
+  }
+
   &.tls-chip--outlined {
     background-color: transparent;
     color: var(--tls-chip-color);

package/themes/thalassic/components/date-time-picker/_mixins.scss

@@ -88,9 +88,9 @@
 
   cursor: pointer;
 
-  svg {
-    width: 8px;
-    height: 14px;
+  .tls-icon {
+    width: 18px;
+    height: 18px;
   }
 
   &:hover {

package/themes/thalassic/components/date-time-picker/_time-picker.scss

@@ -43,9 +43,9 @@
     cursor: pointer;
     color: var(--color-on-surface-variant);
 
-    svg {
-      width: 14px;
-      height: 8px;
+    .tls-icon {
+      width: 18px;
+      height: 18px;
     }
 
     &:hover {

package/themes/thalassic/components/dialog/_dialog.scss

@@ -51,7 +51,7 @@
       color: var(--color-on-surface);
     }
 
-    svg {
+    .tls-icon {
       width: 100%;
       height: 100%;
     }

package/themes/thalassic/components/drawer/_drawer.scss

@@ -87,7 +87,7 @@
       color: var(--color-on-surface);
     }
 
-    svg {
+    .tls-icon {
       width: 100%;
       height: 100%;
     }

package/themes/thalassic/components/index.scss

@@ -1,4 +1,5 @@
 @forward 'alert';
+@forward 'badge';
 @forward 'button';
 @forward 'calendar';
 @forward 'chart';
@@ -16,6 +17,7 @@
 @forward 'switch';
 @forward 'tabs';
 @forward 'textarea';
+@forward 'toast';
 @forward 'tooltip';
 
 @forward 'checkbox';

package/themes/thalassic/components/multi-select/_multi-select-size.scss

@@ -1,16 +1,16 @@
 .tls-multi-select {
   &.tls-form-control--sm {
-    --tls-multi-select-icon-size: 0.625rem;
-    --tls-multi-select-clear-size: 0.625rem;
+    --tls-multi-select-icon-size: 0.875rem;
+    --tls-multi-select-clear-size: 0.875rem;
   }
 
   &.tls-form-control--md {
-    --tls-multi-select-icon-size: 0.75rem;
-    --tls-multi-select-clear-size: 0.75rem;
+    --tls-multi-select-icon-size: 1rem;
+    --tls-multi-select-clear-size: 1rem;
   }
 
   &.tls-form-control--lg {
-    --tls-multi-select-icon-size: 0.875rem;
-    --tls-multi-select-clear-size: 0.875rem;
+    --tls-multi-select-icon-size: 1.125rem;
+    --tls-multi-select-clear-size: 1.125rem;
   }
 }

package/themes/thalassic/components/multi-select/_multi-select.scss

@@ -67,6 +67,9 @@
         }
 
         .tls-multi-select__chevron {
+          width: 100%;
+          height: 100%;
+
           transition: transform var(--motion-fast) var(--motion-ease-in-out);
         }
       }

package/themes/thalassic/components/pagination/_pagination.scss

@@ -38,6 +38,11 @@
     &-icon {
       width: var(--tls-pagination-button-icon-size);
       height: var(--tls-pagination-button-icon-size);
+
+      .tls-icon {
+        width: 100%;
+        height: 100%;
+      }
     }
   }
 

package/themes/thalassic/components/select/_select-size.scss

@@ -1,16 +1,16 @@
 .tls-select {
   &.tls-form-control--sm {
-    --tls-select-icon-size: 0.625rem;
-    --tls-select-clear-size: 0.625rem;
+    --tls-select-icon-size: 0.875rem;
+    --tls-select-clear-size: 0.875rem;
   }
 
   &.tls-form-control--md {
-    --tls-select-icon-size: 0.75rem;
-    --tls-select-clear-size: 0.75rem;
+    --tls-select-icon-size: 1rem;
+    --tls-select-clear-size: 1rem;
   }
 
   &.tls-form-control--lg {
-    --tls-select-icon-size: 0.875rem;
-    --tls-select-clear-size: 0.875rem;
+    --tls-select-icon-size: 1.125rem;
+    --tls-select-clear-size: 1.125rem;
   }
 }

package/themes/thalassic/components/select/_select.scss

@@ -67,6 +67,9 @@
         }
 
         .tls-select__chevron {
+          width: 100%;
+          height: 100%;
+
           transition: transform var(--motion-fast) var(--motion-ease-in-out);
         }
       }

package/themes/thalassic/components/tabs/_tabs-header-position.scss

@@ -21,10 +21,14 @@
         margin-bottom: 0;
         margin-top: -1px;
 
-        &.tls-tabs-header__item--active {
-          border-bottom-width: 0;
-          border-top-width: var(--tls-tabs-active-border-width);
-          border-top-style: solid;
+        border-bottom-width: 0;
+        border-top-width: var(--tls-tabs-active-border-width);
+        border-top-style: solid;
+
+        // See the flat variant's own hover rule for why this is needed:
+        // it keeps the divider line visible under the hover fill.
+        &:hover:not(.tls-tabs-header__item--active) {
+          border-top-color: var(--tls-tabs-border-color);
         }
       }
     }
@@ -53,10 +57,14 @@
         margin-inline-end: 0;
         margin-inline-start: -1px;
 
-        &.tls-tabs-header__item--active {
-          border-inline-end-width: 0;
-          border-inline-start-width: var(--tls-tabs-active-border-width);
-          border-inline-start-style: solid;
+        border-inline-end-width: 0;
+        border-inline-start-width: var(--tls-tabs-active-border-width);
+        border-inline-start-style: solid;
+
+        // See the flat variant's own hover rule for why this is needed:
+        // it keeps the divider line visible under the hover fill.
+        &:hover:not(.tls-tabs-header__item--active) {
+          border-inline-start-color: var(--tls-tabs-border-color);
         }
       }
     }

package/themes/thalassic/components/tabs/_tabs-orientation.scss

@@ -25,10 +25,14 @@
           margin-bottom: 0;
           margin-inline-end: -1px;
 
-          &.tls-tabs-header__item--active {
-            border-bottom-width: 0;
-            border-inline-end-width: var(--tls-tabs-active-border-width);
-            border-inline-end-style: solid;
+          border-bottom-width: 0;
+          border-inline-end-width: var(--tls-tabs-active-border-width);
+          border-inline-end-style: solid;
+
+          // See the flat variant's own hover rule for why this is needed:
+          // it keeps the divider line visible under the hover fill.
+          &:hover:not(.tls-tabs-header__item--active) {
+            border-inline-end-color: var(--tls-tabs-border-color);
           }
         }
       }

package/themes/thalassic/components/tabs/_tabs-variant.scss

@@ -8,15 +8,27 @@
       &__item {
         margin-bottom: -1px;
 
+        // Border is always reserved at the active width and toggles only
+        // border-color (transparent to active) so switching tabs never
+        // changes the item's box height and shifts the label.
+        border-bottom-width: var(--tls-tabs-active-border-width);
+        border-bottom-style: solid;
+
+        // Hover fill sits on the item, not the button, so it paints under
+        // the item's border and reaches the divider line instead of
+        // stopping short and leaving a gap.
         &:hover {
-          .tls-tabs-header__item-button {
-            background-color: var(--color-surface-container);
-          }
-        }
+          background-color: var(--color-surface-container);
 
-        &.tls-tabs-header__item--active {
-          border-bottom-width: var(--tls-tabs-active-border-width);
-          border-bottom-style: solid;
+          // The item's border overlaps the header's divider line by
+          // `--tls-tabs-border-width` (see `margin-bottom: -1px` above).
+          // Made opaque only while hovering, it paints over the hover
+          // fill and keeps that shared pixel visible instead of the
+          // fill covering it. The active item already has an opaque
+          // border, so it's excluded here.
+          &:not(.tls-tabs-header__item--active) {
+            border-bottom-color: var(--tls-tabs-border-color);
+          }
         }
       }
     }

package/themes/thalassic/components/tabs/_tabs.scss

@@ -14,9 +14,8 @@
   display: flex;
   flex-direction: column;
 
-  transition:
-    border-color var(--motion-theme),
-    background-color var(--motion-theme);
+  transition: border-color var(--motion-theme),
+  background-color var(--motion-theme);
 
   overflow: clip;
 
@@ -26,14 +25,15 @@
     border-color: var(--tls-tabs-border-color);
 
     &__item {
+      display: flex;
+
       color: var(--tls-tabs-label-color);
 
       border-color: transparent;
 
-      transition:
-        color var(--motion-fast),
-        border-color var(--motion-fast),
-        background-color var(--motion-theme);
+      transition: color var(--motion-fast),
+      border-color var(--motion-fast),
+      background-color var(--motion-theme);
 
       &:has(&-link:hover, &-link:focus) {
         background-color: var(--color-grey-95);
@@ -58,7 +58,7 @@
         // TODO: use mixin
         font-size: var(--font-label-large-size);
         font-weight: var(--font-label-large-weight);
-        line-height: var(--font-label-large-border-height);
+        line-height: var(--font-label-large-line-height);
         letter-spacing: var(--font-label-large-letter-spacing);
 
         cursor: pointer;

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

@@ -0,0 +1,2 @@
+@forward 'toast';
+@forward 'toast-color';

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

@@ -0,0 +1,43 @@
+.tls-toast {
+  &.tls-toast--primary {
+    --tls-toast-color: var(--color-on-primary-container);
+    --tls-toast-background-color: var(--color-primary-container);
+    --tls-toast-icon-color: var(--color-primary);
+  }
+
+  &.tls-toast--secondary {
+    --tls-toast-color: var(--color-on-secondary-container);
+    --tls-toast-background-color: var(--color-secondary-container);
+    --tls-toast-icon-color: var(--color-secondary);
+  }
+
+  &.tls-toast--tertiary {
+    --tls-toast-color: var(--color-on-tertiary-container);
+    --tls-toast-background-color: var(--color-tertiary-container);
+    --tls-toast-icon-color: var(--color-tertiary);
+  }
+
+  &.tls-toast--success {
+    --tls-toast-color: var(--color-on-success-container);
+    --tls-toast-background-color: var(--color-success-container);
+    --tls-toast-icon-color: var(--color-success);
+  }
+
+  &.tls-toast--info {
+    --tls-toast-color: var(--color-on-info-container);
+    --tls-toast-background-color: var(--color-info-container);
+    --tls-toast-icon-color: var(--color-info);
+  }
+
+  &.tls-toast--warning {
+    --tls-toast-color: var(--color-on-warning-container);
+    --tls-toast-background-color: var(--color-warning-container);
+    --tls-toast-icon-color: var(--color-warning);
+  }
+
+  &.tls-toast--danger {
+    --tls-toast-color: var(--color-on-danger-container);
+    --tls-toast-background-color: var(--color-danger-container);
+    --tls-toast-icon-color: var(--color-danger);
+  }
+}

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

@@ -0,0 +1,226 @@
+@use '../../mixins' as mixins;
+
+@keyframes tls-toast-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes tls-toast-progress {
+  from {
+    width: 100%;
+  }
+
+  to {
+    width: 0%;
+  }
+}
+
+.tls-toast-outlet {
+  position: fixed;
+  inset: 0;
+
+  pointer-events: none;
+}
+
+.tls-toast-region {
+  --tls-toast-region-inset: var(--spacing-4);
+  --tls-toast-width: 360px;
+
+  position: absolute;
+
+  width: var(--tls-toast-width);
+  max-width: calc(100vw - var(--tls-toast-region-inset) * 2);
+
+  pointer-events: auto;
+
+  &--top {
+    inset-block-start: var(--tls-toast-region-inset);
+  }
+
+  &--bottom {
+    inset-block-end: var(--tls-toast-region-inset);
+  }
+
+  &--start {
+    inset-inline-start: var(--tls-toast-region-inset);
+  }
+
+  &--end {
+    inset-inline-end: var(--tls-toast-region-inset);
+  }
+
+  &--center {
+    inset-inline: 0;
+
+    margin-inline: auto;
+  }
+
+  // Toasts are anchored to the region's block edge and overlap there; the outlet
+  // offsets them with transforms. The scale origin sits on that same edge so the
+  // pile shrinks toward the anchor.
+  &--top .tls-toast {
+    inset-block-start: 0;
+
+    transform-origin: top center;
+  }
+
+  &--bottom .tls-toast {
+    inset-block-end: 0;
+
+    transform-origin: bottom center;
+  }
+}
+
+.tls-toast {
+  position: absolute;
+  inset-inline: 0;
+
+  @include mixins.motion(essential) {
+    transition: transform var(--motion-default) var(--motion-ease-out);
+
+    &--enter {
+      animation: tls-toast-fade var(--motion-default) var(--motion-ease-out) both;
+    }
+
+    &--leave {
+      animation: tls-toast-fade var(--motion-default) var(--motion-ease-in) reverse both;
+    }
+  }
+
+  &__surface {
+    position: relative;
+
+    padding: var(--spacing-3) var(--spacing-4);
+
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-3);
+
+    border-radius: var(--radius-md);
+
+    background-color: var(--tls-toast-background-color);
+    box-shadow: var(--shadow-md);
+    opacity: var(--tls-toast-depth-opacity, 1);
+
+    color: var(--tls-toast-color);
+
+    @include mixins.motion(essential) {
+      transition: opacity var(--motion-default) var(--motion-ease-out);
+    }
+  }
+
+  &__icon {
+    width: 16px;
+    height: 16px;
+
+    flex-shrink: 0;
+
+    display: flex;
+
+    color: var(--tls-toast-icon-color);
+  }
+
+  &__body {
+    min-width: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+
+    flex: 1;
+  }
+
+  &__title {
+    margin: 0;
+
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  &__message {
+    margin: 0;
+
+    font-size: var(--font-size-sm);
+    line-height: 1.4;
+    overflow-wrap: anywhere;
+  }
+
+  &__action {
+    flex-shrink: 0;
+
+    margin-inline-start: calc(var(--spacing-2) * -1);
+  }
+
+  &__close {
+    flex-shrink: 0;
+
+    width: 28px;
+    height: 28px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border: none;
+    border-radius: var(--radius-sm);
+
+    background-color: transparent;
+
+    color: inherit;
+
+    cursor: pointer;
+
+    @include mixins.motion(essential) {
+      transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+    }
+
+    &:hover {
+      background-color: rgb(var(--color-shadow) / 0.12);
+    }
+  }
+
+  &__close-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  // Countdown bar hugging the surface's block-end edge; its width animates from
+  // full to empty over the auto-dismiss delay. Only rendered under motion (the
+  // mixin hides it at the `none` level, so no misleading static bar is shown).
+  &__progress {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+
+    width: 100%;
+    height: 3px;
+
+    display: none;
+
+    border-end-start-radius: var(--radius-md);
+    border-end-end-radius: var(--radius-md);
+
+    background-color: var(--tls-toast-icon-color);
+    opacity: 0.9;
+
+    @include mixins.motion(essential) {
+      display: block;
+
+      animation: tls-toast-progress var(--tls-toast-duration, 5000ms) linear forwards;
+    }
+  }
+
+  // Freezes the bar while the stack is hovered / focused, in lockstep with the
+  // paused auto-dismiss timers. Gated by the same motion tier so it outranks the
+  // `animation` shorthand above (which resets `animation-play-state` to running).
+  &--paused &__progress {
+    @include mixins.motion(essential) {
+      animation-play-state: paused;
+    }
+  }
+}

package/themes/thalassic/components/toggle-group/_toggle-group-color.scss

@@ -1,36 +1,6 @@
-.tls-toggle-group {
-  &--primary {
-    --tls-toggle-group-color: var(--color-primary);
-    --tls-toggle-group-on-color: var(--color-on-primary);
-  }
-
-  &--secondary {
-    --tls-toggle-group-color: var(--color-secondary);
-    --tls-toggle-group-on-color: var(--color-on-secondary);
-  }
-
-  &--tertiary {
-    --tls-toggle-group-color: var(--color-tertiary);
-    --tls-toggle-group-on-color: var(--color-on-tertiary);
-  }
-
-  &--success {
-    --tls-toggle-group-color: var(--color-success);
-    --tls-toggle-group-on-color: var(--color-on-success);
-  }
+@use '../../mixins' as mixins;
 
-  &--info {
-    --tls-toggle-group-color: var(--color-info);
-    --tls-toggle-group-on-color: var(--color-on-info);
-  }
-
-  &--warning {
-    --tls-toggle-group-color: var(--color-warning);
-    --tls-toggle-group-on-color: var(--color-on-warning);
-  }
-
-  &--danger {
-    --tls-toggle-group-color: var(--color-danger);
-    --tls-toggle-group-on-color: var(--color-on-danger);
-  }
+.tls-toggle-group {
+  @include mixins.color-variants('tls-toggle-group', $tonal: true);
+  @include mixins.tonal-swap('tls-toggle-group');
 }

package/themes/thalassic/components/tooltip/_tooltip-color.scss

@@ -1,36 +1,5 @@
-.tls-tooltip {
-  &.tls-tooltip--primary {
-    --tls-tooltip-on-color: var(--color-on-primary);
-    --tls-tooltip-color: var(--color-primary);
-  }
-
-  &.tls-tooltip--secondary {
-    --tls-tooltip-on-color: var(--color-on-secondary);
-    --tls-tooltip-color: var(--color-secondary);
-  }
-
-  &.tls-tooltip--tertiary {
-    --tls-tooltip-on-color: var(--color-on-tertiary);
-    --tls-tooltip-color: var(--color-tertiary);
-  }
-
-  &.tls-tooltip--success {
-    --tls-tooltip-on-color: var(--color-on-success);
-    --tls-tooltip-color: var(--color-success);
-  }
+@use '../../mixins' as mixins;
 
-  &.tls-tooltip--info {
-    --tls-tooltip-on-color: var(--color-on-info);
-    --tls-tooltip-color: var(--color-info);
-  }
-
-  &.tls-tooltip--warning {
-    --tls-tooltip-on-color: var(--color-on-warning);
-    --tls-tooltip-color: var(--color-warning);
-  }
-
-  &.tls-tooltip--danger {
-    --tls-tooltip-on-color: var(--color-on-danger);
-    --tls-tooltip-color: var(--color-danger);
-  }
+.tls-tooltip {
+  @include mixins.color-variants('tls-tooltip');
 }

package/themes/thalassic/mixins/_color-variants.scss

@@ -0,0 +1,39 @@
+$colors: primary, secondary, tertiary, success, info, warning, danger;
+
+// Maps each theme hue onto a component's --<block>-color / --<block>-on-color pair.
+// Expects the component to consume those two custom properties.
+//
+// With $tonal: true, each hue additionally exposes the container token pair
+// (--<block>-color-container / --<block>-on-color-container) for a lower-emphasis,
+// tonal appearance.
+//
+// $modifier prefixes the hue classes, so a component with a second, independently
+// colored state can reuse the same mapping (e.g. $modifier: 'checked-' emits
+// `--checked-primary` … `--checked-danger`).
+@mixin color-variants($block, $tonal: false, $modifier: '') {
+  @each $color in $colors {
+    &.#{$block}--#{$modifier}#{$color} {
+      --#{$block}-color: var(--color-#{$color});
+      --#{$block}-on-color: var(--color-on-#{$color});
+
+      @if $tonal {
+        --#{$block}-color-container: var(--color-#{$color}-container);
+        --#{$block}-on-color-container: var(--color-on-#{$color}-container);
+      }
+    }
+  }
+}
+
+// Convenience for components with a single variant layer: a `tonal` class that swaps
+// the active pair to the container pair, so one fill rule serves both filled and
+// tonal. Requires color-variants(..., $tonal: true).
+//
+// Do NOT use for a component with a second variant layer (e.g. chip's base vs
+// checked variant): swapping a shared token leaks the tonal treatment across the
+// state boundary. Such components consume the container pair directly per rule.
+@mixin tonal-swap($block, $modifier: '') {
+  &.#{$block}--#{$modifier}tonal {
+    --#{$block}-color: var(--#{$block}-color-container);
+    --#{$block}-on-color: var(--#{$block}-on-color-container);
+  }
+}

package/themes/thalassic/mixins/_index.scss

@@ -1,3 +1,4 @@
+@forward 'color-variants';
 @forward 'focus-ring';
 @forward 'motion';
 @forward 'panel-open';