@thalassic/themes 22.17.2 → 22.17.3

package/package.json

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

package/themes/thalassic/_shade.scss

@@ -0,0 +1,19 @@
+:root {
+  --color-black: #000000;
+  --color-white: #ffffff;
+
+  --color-shade-5: hsl(0, 0%, 5%);
+  --color-shade-10: hsl(0, 0%, 10%);
+  --color-shade-15: hsl(0, 0%, 15%);
+  --color-shade-20: hsl(0, 0%, 20%);
+  --color-shade-30: hsl(0, 0%, 30%);
+  --color-shade-40: hsl(0, 0%, 40%);
+  --color-shade-50: hsl(0, 0%, 50%);
+  --color-shade-60: hsl(0, 0%, 60%);
+  --color-shade-70: hsl(0, 0%, 70%);
+  --color-shade-80: hsl(0, 0%, 80%);
+  --color-shade-85: hsl(0, 0%, 85%);
+  --color-shade-90: hsl(0, 0%, 90%);
+  --color-shade-95: hsl(0, 0%, 95%);
+  --color-shade-98: hsl(0, 0%, 98%);
+}

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

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

package/themes/thalassic/components/_odometer.scss

@@ -1,3 +1,4 @@
+@use '../../../../../core/src/styles' as core;
 @use '../mixins' as mixins;
 
 .tls-odometer {
@@ -13,7 +14,7 @@
   line-height: 1;
 
   &__value {
-    @include mixins.visually-hidden;
+    @include core.visually-hidden;
   }
 
   &__row {

package/themes/thalassic/components/activity-heatmap/_activity-heatmap.scss

@@ -1,11 +1,11 @@
+@use '../../../../../../core/src/styles' as core;
 @use '../../mixins' as mixins;
-@use '../../functions' as functions;
 
 .tls-activity-heatmap {
   // Fill of a day with no activity, and the base every shaded cell is mixed against.
   --tls-activity-heatmap-empty: var(--color-surface-container-high);
   // Hairline that keeps a faint cell readable against the surface behind it.
-  --tls-activity-heatmap-outline: #{functions.tint(var(--color-on-surface), 12%)};
+  --tls-activity-heatmap-outline: #{core.tint(var(--color-on-surface), 12%)};
   // Gap between cells, shared by the grid and the labels aligned to it.
   --tls-activity-heatmap-gap: var(--spacing-1);
 

package/themes/thalassic/components/calendar/_month-view.scss

@@ -1,3 +1,4 @@
+@use '../../../../../../core/src/styles' as core;
 @use '../../mixins' as mixins;
 @use 'compact';
 @use 'lines';
@@ -163,7 +164,7 @@
   }
 
   &__markers-label {
-    @include mixins.visually-hidden;
+    @include core.visually-hidden;
   }
 
   &__marker {

package/themes/thalassic/components/stepper/_stepper.scss

@@ -1,3 +1,4 @@
+@use '../../../../../../core/src/styles' as core;
 @use '../../mixins' as mixins;
 
 .tls-stepper {
@@ -145,7 +146,7 @@
 
         // State text (completed / invalid) for assistive technology only.
         &__state {
-          @include mixins.visually-hidden;
+          @include core.visually-hidden;
         }
       }
 

package/themes/thalassic/components/tab-header/_tab-header-variant.scss

@@ -1,10 +1,10 @@
-@use '../../functions' as functions;
+@use '../../../../../../core/src/styles' as core;
 
 .tls-tab-header {
   // Flat
   &.tls-tab-header--flat {
-    --tls-tab-header-active-background-color: #{functions.tint(var(--color-primary), 8%)};
-    --tls-tab-header-active-hover-background-color: #{functions.tint(var(--color-primary), 12%)};
+    --tls-tab-header-active-background-color: #{core.tint(var(--color-primary), 8%)};
+    --tls-tab-header-active-hover-background-color: #{core.tint(var(--color-primary), 12%)};
 
     border-bottom-width: var(--tls-tab-header-border-width);
     border-bottom-style: solid;

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

@@ -1,7 +1,7 @@
 @use '../../mixins' as mixins;
 
 .tls-tooltip {
-  --tls-tooltip-box-shadow: 0 2px 8px -1px var(--color-shade-30);
+  --tls-tooltip-box-shadow: 0 2px 8px -1px rgb(var(--color-shadow) / 0.35);
   --tls-tooltip-padding: var(--spacing-3);
   --tls-tooltip-border-radius: 8px;
   --tls-tooltip-arrow-width: 12px;

package/themes/thalassic/index.scss

@@ -1,5 +1,4 @@
 @forward 'components';
-@forward 'functions';
 @forward 'mixins';
 @forward 'semantic';
 
@@ -7,6 +6,7 @@
 @forward 'colors';
 @forward 'motion';
 @forward 'radius';
+@forward 'shade';
 @forward 'shadow';
 @forward 'spacing';
 @forward 'typography';

package/themes/thalassic/mixins/_index.scss

@@ -1,8 +1,7 @@
+@forward '../../../../../core/src/styles/tools/motion';
 @forward 'color-variants';
 @forward 'focus-ring';
-@forward 'motion';
 @forward 'panel-open';
 @forward 'pop';
 @forward 'touch-target';
 @forward 'variant-treatment';
-@forward 'visually-hidden';

package/themes/thalassic/mixins/_panel-open.scss

@@ -1,4 +1,4 @@
-@use 'motion';
+@use '../../../../../core/src/styles' as core;
 
 @keyframes tls-panel-open {
   from {
@@ -21,7 +21,7 @@
 
   // Panel motion is a functional origin cue, so it belongs to the `essential`
   // tier and survives reduced motion (resolved by `MotionService`).
-  @include motion.motion(essential) {
+  @include core.motion(essential) {
     &--enter {
       animation: tls-panel-open $duration $enter-easing both;
     }

package/themes/thalassic/mixins/_pop.scss

@@ -1,4 +1,4 @@
-@use 'motion';
+@use '../../../../../core/src/styles' as core;
 
 // A quick grow-and-settle acknowledging a just-committed selection: the element
 // scales up to `--tls-pop-scale` and springs back. Only the peak is keyframed —
@@ -18,7 +18,7 @@
 ) {
   // Selection feedback is expressive — the committed state already reads
   // without it — so the pop belongs to the `full` tier only.
-  @include motion.motion(full) {
+  @include core.motion(full) {
     --tls-pop-scale: #{$scale};
 
     animation: tls-pop $duration $easing;

package/themes/thalassic/functions/_index.scss

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

package/themes/thalassic/functions/_tint.scss

@@ -1,13 +0,0 @@
-// 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/mixins/_motion.scss

@@ -1,21 +0,0 @@
-// Gates its content on the resolved motion level reflected by `MotionService`
-// onto the document root (`data-motion` attribute).
-//
-// - `essential`: functional motion (panel origin cues, focus). Plays at the
-//   `essential` and `full` levels.
-// - `full`: expressive/decorative motion. Plays only at the `full` level.
-//
-// At the `none` level (or when no attribute is present) nothing is emitted, so
-// the wrapped animation never runs.
-@mixin motion($tier: essential) {
-  @if $tier == full {
-    :root[data-motion='full'] & {
-      @content;
-    }
-  } @else {
-    :root[data-motion='essential'] &,
-    :root[data-motion='full'] & {
-      @content;
-    }
-  }
-}

package/themes/thalassic/mixins/_visually-hidden.scss

@@ -1,19 +0,0 @@
-// Removes an element from the visual layout while leaving it in the accessibility tree, so the
-// text keeps naming its control for assistive technology. Use it instead of `display: none`
-// whenever hiding content would otherwise strip a control's accessible name.
-@mixin visually-hidden {
-  position: absolute;
-
-  width: 1px;
-  height: 1px;
-
-  margin: -1px;
-  padding: 0;
-
-  border: 0;
-
-  white-space: nowrap;
-  overflow: hidden;
-
-  clip-path: inset(50%);
-}