@thalassic/themes 22.5.1 → 22.7.0

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/splitter/_index.scss

@@ -0,0 +1,2 @@
+@forward 'splitter';
+@forward 'splitter-orientation';

package/themes/thalassic/components/splitter/_splitter-orientation.scss

@@ -0,0 +1,61 @@
+.tls-splitter {
+  // Horizontal: panels sit side by side, separated by vertical gutters. The
+  // direct-child selector stops these rules from leaking into a nested splitter
+  // of the opposite orientation.
+  &--horizontal {
+    flex-direction: row;
+
+    > .tls-splitter-gutter {
+      inset-block: 0;
+
+      width: var(--tls-splitter-gutter-size);
+
+      cursor: col-resize;
+
+      // Centre the gutter on the seam. The inline slide mirrors in RTL, where
+      // the logical start edge sits on the opposite physical side.
+      transform: translateX(-50%);
+
+      --tls-splitter-handle-inline: var(--tls-splitter-handle-thickness);
+      --tls-splitter-handle-block: var(--tls-splitter-handle-length);
+
+      :root[dir='rtl'] & {
+        transform: translateX(50%);
+      }
+
+      // Vertical seam line down the centre of the gutter.
+      &::before {
+        inset-block: 0;
+        inset-inline-start: calc(50% - var(--tls-splitter-line-thickness) / 2);
+
+        width: var(--tls-splitter-line-thickness);
+      }
+    }
+  }
+
+  // Vertical: panels stack, separated by horizontal gutters.
+  &--vertical {
+    flex-direction: column;
+
+    > .tls-splitter-gutter {
+      inset-inline: 0;
+
+      height: var(--tls-splitter-gutter-size);
+
+      cursor: row-resize;
+
+      transform: translateY(-50%);
+
+      --tls-splitter-handle-inline: var(--tls-splitter-handle-length);
+      --tls-splitter-handle-block: var(--tls-splitter-handle-thickness);
+
+      // Horizontal seam line across the centre of the gutter.
+      &::before {
+        inset-inline: 0;
+        inset-block-start: calc(50% - var(--tls-splitter-line-thickness) / 2);
+
+        height: var(--tls-splitter-line-thickness);
+      }
+    }
+  }
+}

package/themes/thalassic/components/splitter/_splitter.scss

@@ -0,0 +1,96 @@
+@use '../../mixins' as mixins;
+
+.tls-splitter {
+  // Draggable hit area straddling the seam; larger than the visible line/handle.
+  --tls-splitter-gutter-size: var(--spacing-4);
+
+  // Thin seam line running the full length of the gutter.
+  --tls-splitter-line-color: var(--color-outline-variant);
+  --tls-splitter-line-thickness: 1px;
+
+  // Grab handle centred on the seam.
+  --tls-splitter-handle-color: var(--color-outline);
+  --tls-splitter-handle-hover-color: var(--color-primary);
+  --tls-splitter-handle-thickness: 4px;
+  --tls-splitter-handle-length: var(--spacing-8);
+  --tls-splitter-handle-radius: var(--radius-sm);
+
+  // Handle box, resolved per orientation on the gutter (see the orientation
+  // partial) and inherited by the handle. Defaults suit a horizontal splitter.
+  --tls-splitter-handle-inline: var(--tls-splitter-handle-thickness);
+  --tls-splitter-handle-block: var(--tls-splitter-handle-length);
+
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+
+  overflow: hidden;
+
+  &--resizing {
+    user-select: none;
+  }
+
+  .tls-splitter-panel {
+    position: relative;
+
+    min-width: 0;
+    min-height: 0;
+
+    overflow: auto;
+  }
+
+  .tls-splitter-gutter {
+    position: absolute;
+    z-index: 1;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: transparent;
+
+    touch-action: none;
+
+    &:focus-visible {
+      outline: none;
+
+      .tls-splitter-gutter__handle {
+        background-color: var(--tls-splitter-handle-hover-color);
+      }
+    }
+
+    &:hover {
+      .tls-splitter-gutter__handle {
+        background-color: var(--tls-splitter-handle-hover-color);
+      }
+    }
+
+    // Seam line. Axis-specific sizing/insets live in the orientation partial.
+    &::before {
+      content: '';
+
+      position: absolute;
+
+      background-color: var(--tls-splitter-line-color);
+    }
+
+    &__handle {
+      // Lifts the handle above the seam line in paint order.
+      position: relative;
+
+      width: var(--tls-splitter-handle-inline);
+      height: var(--tls-splitter-handle-block);
+
+      border-radius: var(--tls-splitter-handle-radius);
+
+      background-color: var(--tls-splitter-handle-color);
+
+      @include mixins.motion(essential) {
+        transition: background-color var(--motion-fast);
+      }
+    }
+  }
+}

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

@@ -1,4 +1,12 @@
 .tls-tabs {
+  // Horizontal
+  &.tls-tabs--horizontal {
+    .tls-tabs-header {
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+  }
+
   // Vertical
   &.tls-tabs--vertical {
     display: flex;
@@ -7,6 +15,9 @@
     .tls-tabs-header {
       flex-direction: column;
 
+      overflow-x: hidden;
+      overflow-y: auto;
+
       border-color: var(--tls-tabs-border-color);
     }
 

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

@@ -24,7 +24,19 @@
 
     border-color: var(--tls-tabs-border-color);
 
+    // Tabs that exceed the header's extent scroll instead of shrinking
+    // (e.g. a horizontal strip on a narrow viewport). The scrollbar is
+    // hidden so it never covers the active-tab indicator line, while
+    // wheel/touch/keyboard scrolling stays available.
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
     &__item {
+      flex-shrink: 0;
+
       display: flex;
 
       color: var(--tls-tabs-label-color);
@@ -53,6 +65,8 @@
       }
 
       &-button {
+        width: 100%;
+
         padding: var(--spacing-3) var(--spacing-6);
 
         // TODO: use mixin

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