@thalassic/themes 22.7.0 → 22.8.0

package/package.json

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

package/themes/thalassic/components/_file-input.scss

@@ -1,3 +1,4 @@
+@use '../functions' as functions;
 @use '../mixins' as mixins;
 
 .tls-file-input {
@@ -67,14 +68,14 @@
     &--dragging {
       --tls-file-input-border-color: var(--color-primary);
 
-      background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
+      background-color: functions.tint(var(--color-primary), 8%);
     }
 
     &--rejected {
       --tls-file-input-border-color: var(--color-danger);
 
       color: var(--color-danger);
-      background-color: color-mix(in srgb, var(--color-danger) 8%, transparent);
+      background-color: functions.tint(var(--color-danger), 8%);
     }
 
     &--disabled {

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

@@ -1,6 +1,11 @@
+@use '../../functions' as functions;
+
 .tls-tabs {
   // Flat
   &.tls-tabs--flat {
+    --tls-tabs-active-background-color: #{functions.tint(var(--color-primary), 8%)};
+    --tls-tabs-active-hover-background-color: #{functions.tint(var(--color-primary), 12%)};
+
     .tls-tabs-header {
       border-bottom-width: var(--tls-tabs-border-width);
       border-bottom-style: solid;
@@ -14,21 +19,28 @@
         border-bottom-width: var(--tls-tabs-active-border-width);
         border-bottom-style: solid;
 
+        &.tls-tabs-header__item--active {
+          background-color: var(--tls-tabs-active-background-color);
+
+          &:hover {
+            background-color: var(--tls-tabs-active-hover-background-color);
+          }
+        }
+
         // 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 {
+        // stopping short and leaving a gap. Excludes the active item so
+        // its primary tint is not replaced by the neutral hover fill.
+        //
+        // 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 needs neither of these.
+        &:hover:not(.tls-tabs-header__item--active) {
           background-color: var(--color-surface-container);
-
-          // 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);
-          }
+          border-bottom-color: var(--tls-tabs-border-color);
         }
       }
     }
@@ -72,4 +84,41 @@
       }
     }
   }
+
+  // Segmented
+  &.tls-tabs--segmented {
+    --tls-tabs-border-radius: var(--radius-lg);
+    --tls-tabs-pill-radius: var(--radius-md);
+    --tls-tabs-header-background-color: var(--color-surface-container);
+    --tls-tabs-pill-background-color: var(--color-surface);
+    --tls-tabs-header-padding: var(--spacing-2);
+    --tls-tabs-active-label-color: var(--color-on-surface);
+
+    .tls-tabs-header {
+      padding: var(--tls-tabs-header-padding);
+      gap: var(--tls-tabs-header-padding);
+
+      border-radius: var(--tls-tabs-border-radius);
+
+      background-color: var(--tls-tabs-header-background-color);
+
+      &__item {
+        border: none;
+        border-radius: var(--tls-tabs-pill-radius);
+
+        &:hover:not(.tls-tabs-header__item--active) {
+          background-color: var(--color-surface-container-high);
+        }
+
+        &.tls-tabs-header__item--active {
+          background-color: var(--tls-tabs-pill-background-color);
+          box-shadow: var(--shadow-xs);
+        }
+
+        &-button {
+          padding: var(--spacing-2) var(--spacing-5);
+        }
+      }
+    }
+  }
 }

package/themes/thalassic/functions/_index.scss

@@ -0,0 +1 @@
+@forward 'tint';

package/themes/thalassic/functions/_tint.scss

@@ -0,0 +1,13 @@
+// Produces a translucent wash of a color by mixing it with `transparent`.
+// `$amount` is the share of the color that stays opaque (e.g. 8% → the color
+// at 8% alpha), the rest being transparent. Ideal for state layers — hover,
+// active, selected fills — laid over any background.
+//
+// Works with custom-property colors (`tint(var(--color-primary), 8%)`), which
+// `rgba()` cannot, since the token is not raw channel values.
+//
+// `$space` is the mixing color space; srgb blends the intuitive "normal RGB"
+// way. Override to `oklab` for a perceptually even blend when needed.
+@function tint($color, $amount, $space: srgb) {
+  @return color-mix(in $space, #{$color} $amount, transparent);
+}

package/themes/thalassic/index.scss

@@ -1,4 +1,5 @@
 @forward 'components';
+@forward 'functions';
 @forward 'mixins';
 @forward 'semantic';