@thalassic/themes 22.17.4 → 22.17.5

package/package.json

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

package/themes/thalassic/_radius.scss

@@ -5,4 +5,12 @@
   --radius-xl: 16px;
   --radius-2xl: 20px;
   --radius-3xl: 24px;
+
+  // Continuous corner curvature: the corner hugs the box instead of cutting a
+  // quarter-circle out of it, so a control reads as a soft square rather than a
+  // rounded rectangle. Because the curve stays closer to the corner, it needs a
+  // larger radius than a circular corner of the same visual weight — pair it
+  // with a value one step up the scale. Browsers without `corner-shape` drop the
+  // declaration and fall back to a circular corner.
+  --corner-shape-squircle: superellipse(2.5);
 }

package/themes/thalassic/components/_menu.scss

@@ -2,6 +2,7 @@
 
 .tls-menu {
   --tls-menu-min-width: 160px;
+  --tls-menu-max-width: 320px;
   --tls-menu-padding-block: var(--spacing-1);
 
   --tls-menu-border-radius: var(--radius-md);
@@ -17,6 +18,7 @@
   --tls-menu-item-padding-block: var(--spacing-2);
   --tls-menu-item-padding-inline: var(--spacing-4);
   --tls-menu-item-icon-size: 14px;
+  --tls-menu-item-check-size: 14px;
 
   --tls-menu-label-color: var(--color-outline);
   --tls-menu-label-padding-block: var(--spacing-2);
@@ -26,6 +28,7 @@
   --tls-menu-divider-margin-block: var(--spacing-1);
 
   min-width: var(--tls-menu-min-width);
+  max-width: var(--tls-menu-max-width);
   padding-block: var(--tls-menu-padding-block);
 
   background-color: var(--tls-menu-background);
@@ -80,6 +83,23 @@
     }
   }
 
+  // Leading indicator of a checkable (radio / checkbox) item. Always rendered for
+  // such items so the label doesn't shift when the checkmark appears.
+  &__item-check {
+    width: var(--tls-menu-item-check-size);
+    height: var(--tls-menu-item-check-size);
+
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    .tls-icon {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
   &__item-icon {
     flex-shrink: 0;
 
@@ -96,23 +116,35 @@
     }
   }
 
-  &__item-label {
+  &__item-text {
+    min-width: 0;
+
     flex: 1;
+    display: flex;
+    flex-direction: column;
   }
 
-  &__item-shortcut {
-    margin-inline-start: auto;
-    color: var(--tls-menu-label-color);
+  // Labels keep the item's nowrap and truncate at the menu's max-width instead of widening it.
+  &__item-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
+  &__item-description {
     font-size: var(--font-label-small-size);
     font-weight: var(--font-label-small-weight);
     line-height: var(--font-label-small-line-height);
     letter-spacing: var(--font-label-small-letter-spacing);
+    white-space: normal;
+    color: var(--tls-menu-label-color);
+  }
 
-    font-family: inherit;
-    background: none;
-    border: none;
-    padding: 0;
+  &__item-shortcut {
+    margin-inline-start: auto;
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-1);
   }
 
   &__label {

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

@@ -2,9 +2,4 @@
 
 .tls-button {
   @include mixins.color-variants('tls-button', $tonal: true);
-
-  &.tls-button--disabled {
-    --tls-button-on-color: var(--color-on-surface-variant);
-    --tls-button-color: var(--color-surface-variant);
-  }
 }

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

@@ -16,10 +16,6 @@
     padding-inline: 0;
 
     aspect-ratio: 1 / 1;
-
-    &.tls-button--rounded {
-      --tls-button-border-radius: 50%;
-    }
   }
 
   &.tls-button--fluid {
@@ -30,41 +26,38 @@
     --tls-button-height: var(--control-height-sm);
     --tls-button-padding-inline: var(--spacing-3);
 
+    --tls-button-radius-round: var(--radius-md);
+    --tls-button-radius-squircle: var(--radius-lg);
+
     --tls-button-font-size: var(--font-label-small-size);
     --tls-button-font-weight: var(--font-label-small-weight);
     --tls-button-line-height: var(--font-label-small-line-height);
     --tls-button-letter-spacing: var(--font-label-small-letter-spacing);
-
-    &.tls-button--rounded {
-      --tls-button-border-radius: var(--radius-xl);
-    }
   }
 
   &.tls-button--md {
     --tls-button-height: var(--control-height-md);
     --tls-button-padding-inline: var(--spacing-4);
 
+    --tls-button-radius-round: var(--radius-lg);
+    --tls-button-radius-squircle: var(--radius-xl);
+
     --tls-button-font-size: var(--font-label-medium-size);
     --tls-button-font-weight: var(--font-label-medium-weight);
     --tls-button-line-height: var(--font-label-medium-line-height);
     --tls-button-letter-spacing: var(--font-label-medium-letter-spacing);
-
-    &.tls-button--rounded {
-      --tls-button-border-radius: var(--radius-2xl);
-    }
   }
 
   &.tls-button--lg {
     --tls-button-height: var(--control-height-lg);
     --tls-button-padding-inline: var(--spacing-5);
 
+    --tls-button-radius-round: var(--radius-xl);
+    --tls-button-radius-squircle: var(--radius-2xl);
+
     --tls-button-font-size: var(--font-label-large-size);
     --tls-button-font-weight: var(--font-label-large-weight);
     --tls-button-line-height: var(--font-label-large-line-height);
     --tls-button-letter-spacing: var(--font-label-large-letter-spacing);
-
-    &.tls-button--rounded {
-      --tls-button-border-radius: var(--radius-3xl);
-    }
   }
 }

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

@@ -22,13 +22,16 @@
     @include mixins.variant-treatment(elevated, 'tls-button');
   }
 
+  // Unavailability overrides the treatment entirely: every variant collapses to
+  // the same neutral container, so the state reads identically wherever it
+  // appears rather than asking the reader to recognise five faded silhouettes.
   &--disabled {
-    border-color: var(--color-outline);
+    border-color: transparent;
 
-    background-color: var(--tls-button-color);
+    background-color: var(--tls-button-disabled-color);
     box-shadow: none;
 
-    color: var(--tls-button-on-color);
+    color: var(--tls-button-disabled-on-color);
 
     cursor: not-allowed;
   }

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

@@ -2,7 +2,15 @@
 
 .tls-button {
   --tls-button-border-width: 1px;
-  --tls-button-border-radius: var(--radius-sm);
+
+  // Unavailability is signalled by dropping the accent for a neutral pair, which
+  // keeps the label at full contrast instead of fading it below legibility.
+  --tls-button-disabled-color: var(--color-surface-variant);
+  --tls-button-disabled-on-color: var(--color-on-surface-variant);
+
+  // Each size carries a radius per corner shape: the continuous curve needs the
+  // larger of the two to read with the same weight as the circular fallback.
+  --tls-button-border-radius: var(--tls-button-radius-round);
 
   position: relative;
   z-index: 1;
@@ -16,6 +24,7 @@
 
   border: var(--tls-button-border-width) solid transparent;
   border-radius: var(--tls-button-border-radius);
+  corner-shape: var(--corner-shape-squircle);
 
   background-color: var(--color-surface);
 
@@ -28,9 +37,21 @@
     box-shadow var(--motion-fast) var(--motion-ease-in-out),
     color var(--motion-fast) var(--motion-ease-in-out);
 
+  @supports (corner-shape: squircle) {
+    --tls-button-border-radius: var(--tls-button-radius-squircle);
+  }
+
   &:focus-visible {
     @include mixins.focus-ring;
   }
 
+  // A pill has no corner left to shape — the arc spans the whole edge, which a
+  // superellipse would flatten back towards a rectangle.
+  &--rounded {
+    --tls-button-border-radius: calc(var(--tls-button-height) / 2);
+
+    corner-shape: round;
+  }
+
   @include mixins.touch-target(var(--tls-button-height));
 }