@thalassic/themes 22.5.1 → 22.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thalassic/themes",
-  "version": "22.5.1",
+  "version": "22.7.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,66 @@
+@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;
+  }
+
+  &--inset &__indicator {
+    --tls-badge-offset: 0px;
+  }
+}

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/image-compare/_image-compare-orientation.scss

@@ -0,0 +1,47 @@
+.tls-image-compare {
+  // Horizontal: the divider is vertical and wipes along the inline axis. The
+  // inline slide mirrors in RTL, where the layout-start edge sits on the
+  // opposite physical side.
+  &--horizontal {
+    // The whole component is grabbable — a pointer-down anywhere drags the
+    // divider — so the resize cursor lives on the host, not just the handle.
+    cursor: ew-resize;
+
+    > .tls-image-compare__handle {
+      inset-block: 0;
+
+      transform: translateX(-50%);
+
+      :root[dir='rtl'] & {
+        transform: translateX(50%);
+      }
+
+      // Vertical divider line down the centre of the handle.
+      &::before {
+        inset-block: 0;
+        inset-inline-start: calc(50% - var(--tls-image-compare-line-thickness) / 2);
+
+        width: var(--tls-image-compare-line-thickness);
+      }
+    }
+  }
+
+  // Vertical: the divider is horizontal and wipes along the block axis.
+  &--vertical {
+    cursor: ns-resize;
+
+    > .tls-image-compare__handle {
+      inset-inline: 0;
+
+      transform: translateY(-50%);
+
+      // Horizontal divider line across the centre of the handle.
+      &::before {
+        inset-inline: 0;
+        inset-block-start: calc(50% - var(--tls-image-compare-line-thickness) / 2);
+
+        height: var(--tls-image-compare-line-thickness);
+      }
+    }
+  }
+}

package/themes/thalassic/components/image-compare/_image-compare.scss

@@ -0,0 +1,115 @@
+@use '../../mixins' as mixins;
+
+.tls-image-compare {
+  // Divider line running the full length of the component.
+  --tls-image-compare-line-color: var(--color-surface);
+  --tls-image-compare-line-thickness: 2px;
+
+  // Circular grab handle centred on the divider.
+  --tls-image-compare-handle-size: var(--spacing-8);
+  --tls-image-compare-handle-color: var(--color-surface);
+  --tls-image-compare-handle-border: var(--tls-image-compare-line-thickness);
+
+  position: relative;
+
+  width: 100%;
+
+  display: block;
+
+  overflow: hidden;
+
+  // A pointer-down anywhere drags the divider, so suppress native pan/zoom
+  // gestures across the whole component (not just the handle) — otherwise a
+  // touch drag over the image scrolls the page and cancels the pointer.
+  touch-action: none;
+
+  &--dragging {
+    user-select: none;
+  }
+
+  &__layer {
+    // Projected media never captures the pointer or gets dragged as an image.
+    > * {
+      display: block;
+
+      user-select: none;
+      -webkit-user-drag: none;
+    }
+  }
+
+  // The `after` layer sits in normal flow: its media's natural aspect ratio
+  // gives the whole component its height.
+  &__after {
+    > * {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  // The `before` layer overlays the `after` layer at the same box and is clipped
+  // to the divider band; its media is stretched to cover that box so the two
+  // images register pixel-for-pixel.
+  &__before {
+    position: absolute;
+    inset: 0;
+
+    > * {
+      width: 100%;
+      height: 100%;
+
+      object-fit: cover;
+    }
+  }
+
+  &__handle {
+    position: absolute;
+    z-index: 1;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: transparent;
+
+    &:focus-visible {
+      outline: none;
+
+      .tls-image-compare__grip {
+        border-color: var(--color-primary);
+      }
+    }
+
+    &:hover {
+      .tls-image-compare__grip {
+        border-color: var(--color-primary);
+      }
+    }
+
+    // Divider line. Axis-specific sizing/insets live in the orientation partial.
+    &::before {
+      content: '';
+
+      position: absolute;
+
+      background-color: var(--tls-image-compare-line-color);
+    }
+  }
+
+  &__grip {
+    // Lifts the handle above the divider line in paint order.
+    position: relative;
+
+    width: var(--tls-image-compare-handle-size);
+    height: var(--tls-image-compare-handle-size);
+
+    border: var(--tls-image-compare-handle-border) solid transparent;
+    border-radius: 50%;
+
+    background-color: var(--tls-image-compare-handle-color);
+    box-shadow: var(--shadow-sm);
+
+    @include mixins.motion(essential) {
+      transition: border-color var(--motion-fast);
+    }
+  }
+}

package/themes/thalassic/components/image-compare/_index.scss

@@ -0,0 +1,2 @@
+@forward 'image-compare';
+@forward 'image-compare-orientation';

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';
@@ -26,6 +28,7 @@
 @forward 'file-input';
 @forward 'form-item';
 @forward 'icon';
+@forward 'image-compare';
 @forward 'menu';
 @forward 'odometer';
 @forward 'password';
@@ -34,5 +37,6 @@
 @forward 'popover';
 @forward 'radio-button';
 @forward 'skeleton';
+@forward 'splitter';
 @forward 'table';
 @forward 'toggle-group';

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);
         }
       }