@thalassic/themes 22.4.0 → 22.5.1

package/package.json

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

package/themes/thalassic/components/calendar/_agenda.scss

@@ -0,0 +1,73 @@
+@use '../../mixins' as mixins;
+
+.tls-calendar-agenda-view {
+  display: flex;
+  flex-direction: column;
+
+  &__day {
+    display: grid;
+    grid-template-columns: var(--spacing-24) 1fr;
+    gap: var(--spacing-4);
+
+    padding-block: var(--spacing-3);
+
+    & + & {
+      border-block-start: 1px solid var(--color-outline-variant);
+    }
+  }
+
+  &__date {
+    padding: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+
+    border: none;
+
+    background-color: transparent;
+
+    text-align: start;
+    color: var(--color-on-surface);
+
+    cursor: pointer;
+
+    &:focus-visible {
+      @include mixins.focus-ring;
+    }
+
+    &--today {
+      color: var(--color-primary);
+    }
+  }
+
+  &__weekday {
+    font-size: var(--font-label-medium-size);
+    font-weight: var(--font-weight-medium);
+  }
+
+  &__date-label {
+    font-size: var(--font-label-small-size);
+    color: var(--color-on-surface-variant);
+  }
+
+  &__events {
+    margin: 0;
+    padding: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+
+    list-style: none;
+  }
+
+  &__empty {
+    margin: 0;
+
+    padding: var(--spacing-8);
+
+    text-align: center;
+    color: var(--color-on-surface-variant);
+  }
+}

package/themes/thalassic/components/calendar/_calendar-event.scss

@@ -0,0 +1,70 @@
+.tls-calendar-event {
+  display: block;
+
+  height: 100%;
+
+  &__button {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+
+    padding-inline: var(--spacing-2);
+
+    display: flex;
+    align-items: center;
+
+    border: none;
+    border-radius: var(--radius-sm);
+
+    background-color: var(--tls-calendar-event-color, var(--color-primary-container));
+
+    font-size: var(--font-label-small-size);
+    line-height: var(--font-label-small-line-height);
+    color: var(--tls-calendar-event-on-color, var(--color-on-primary-container));
+
+    cursor: pointer;
+
+    &--primary {
+      --tls-calendar-event-color: var(--color-primary-container);
+      --tls-calendar-event-on-color: var(--color-on-primary-container);
+    }
+
+    &--secondary {
+      --tls-calendar-event-color: var(--color-secondary-container);
+      --tls-calendar-event-on-color: var(--color-on-secondary-container);
+    }
+
+    &--tertiary {
+      --tls-calendar-event-color: var(--color-tertiary-container);
+      --tls-calendar-event-on-color: var(--color-on-tertiary-container);
+    }
+
+    &--success {
+      --tls-calendar-event-color: var(--color-success-container);
+      --tls-calendar-event-on-color: var(--color-on-success-container);
+    }
+
+    &--info {
+      --tls-calendar-event-color: var(--color-info-container);
+      --tls-calendar-event-on-color: var(--color-on-info-container);
+    }
+
+    &--warning {
+      --tls-calendar-event-color: var(--color-warning-container);
+      --tls-calendar-event-on-color: var(--color-on-warning-container);
+    }
+
+    &--danger {
+      --tls-calendar-event-color: var(--color-danger-container);
+      --tls-calendar-event-on-color: var(--color-on-danger-container);
+    }
+  }
+
+  &__label {
+    min-width: 0;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/themes/thalassic/components/calendar/_calendar.scss

@@ -0,0 +1,39 @@
+.tls-calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+
+  &__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-4);
+  }
+
+  &__nav {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-2);
+  }
+
+  &__nav-button {
+    svg {
+      width: 8px;
+      height: 14px;
+    }
+  }
+
+  &__title {
+    margin: 0;
+
+    font-size: var(--font-title-large-size);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--font-title-large-line-height);
+    color: var(--color-on-surface);
+  }
+
+  &__views {
+    flex-shrink: 0;
+  }
+}

package/themes/thalassic/components/calendar/_index.scss

@@ -0,0 +1,5 @@
+@forward 'agenda';
+@forward 'calendar';
+@forward 'calendar-event';
+@forward 'month-view';
+@forward 'time-grid';

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

@@ -0,0 +1,155 @@
+@use '../../mixins' as mixins;
+
+.tls-calendar-month-view {
+  // Lane geometry shared by the cell height and the bar overlay. The day-number reservation
+  // clears the cell's top padding plus today's circle, so bars never overlap the number.
+  --tls-calendar-day-number-height: var(--spacing-8);
+  --tls-calendar-bar-height: var(--spacing-6);
+  --tls-calendar-bar-gap: var(--spacing-1);
+  --tls-calendar-more-height: var(--spacing-5);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+
+  &__weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  &__weekday {
+    padding-block: var(--spacing-2);
+
+    font-size: var(--font-label-medium-size);
+    font-weight: var(--font-weight-medium);
+    text-align: center;
+    color: var(--color-on-surface-variant);
+  }
+
+  &__grid {
+    display: grid;
+    // Reserve room for the day number, every visible lane (plus the gaps between them), and
+    // the "+N more" affordance.
+    grid-auto-rows: minmax(
+      calc(
+        var(--tls-calendar-day-number-height) + var(--tls-calendar-max-lanes, 3) *
+          var(--tls-calendar-bar-height) + (var(--tls-calendar-max-lanes, 3) - 1) *
+          var(--tls-calendar-bar-gap) + var(--tls-calendar-more-height)
+      ),
+      1fr
+    );
+
+    // Collapsed borders: the grid draws the top/start edge, each cell the bottom/end edge,
+    // so shared borders never double up and there are no gaps between cells.
+    border-block-start: 1px solid var(--color-outline-variant);
+    border-inline-start: 1px solid var(--color-outline-variant);
+  }
+
+  &__week {
+    position: relative;
+
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  &__day {
+    min-width: 0;
+
+    padding: var(--spacing-1) var(--spacing-2);
+
+    display: flex;
+    flex-direction: column;
+
+    border-block-end: 1px solid var(--color-outline-variant);
+    border-inline-end: 1px solid var(--color-outline-variant);
+
+    background-color: var(--color-surface-container-lowest);
+
+    color: var(--color-on-surface);
+
+    cursor: pointer;
+
+    @include mixins.motion(essential) {
+      transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+    }
+
+    &:hover {
+      background-color: var(--color-surface-container-low);
+    }
+
+    &:focus-visible {
+      @include mixins.focus-ring;
+    }
+
+    &--outside {
+      background-color: var(--color-surface-container);
+
+      color: var(--color-on-surface-variant);
+    }
+
+    &--today {
+      .tls-calendar-month-view__day-number {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        width: var(--spacing-6);
+        height: var(--spacing-6);
+
+        border-radius: 50%;
+
+        background-color: var(--color-primary);
+
+        color: var(--color-on-primary);
+      }
+    }
+  }
+
+  &__day-number {
+    align-self: flex-end;
+
+    font-size: var(--font-label-small-size);
+    font-weight: var(--font-weight-medium);
+  }
+
+  &__more {
+    margin-block-start: auto;
+
+    font-size: var(--font-label-small-size);
+    color: var(--color-on-surface-variant);
+  }
+
+  &__bars {
+    position: absolute;
+    inset-block: var(--tls-calendar-day-number-height) var(--tls-calendar-more-height);
+    inset-inline: 0;
+
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-auto-rows: var(--tls-calendar-bar-height);
+    // Gaps between lanes (rows) and neighbouring events (columns). A spanning bar absorbs the
+    // column gaps inside its span, so it stays continuous.
+    gap: var(--tls-calendar-bar-gap);
+
+    // Small inset so the outer bars don't sit flush against the grid's outer border.
+    padding-inline: var(--tls-calendar-bar-gap);
+
+    pointer-events: none;
+  }
+
+  &__bar {
+    min-width: 0;
+
+    pointer-events: auto;
+
+    &--continues-before .tls-calendar-event__button {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+
+    &--continues-after .tls-calendar-event__button {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+  }
+}

package/themes/thalassic/components/calendar/_time-grid.scss

@@ -0,0 +1,124 @@
+@use '../../mixins' as mixins;
+
+.tls-calendar-time-grid {
+  --tls-calendar-gutter: var(--spacing-16);
+
+  display: block;
+
+  &__header,
+  &__all-day,
+  &__body {
+    display: grid;
+    grid-template-columns: var(--tls-calendar-gutter) repeat(var(--tls-calendar-columns), minmax(0, 1fr));
+  }
+
+  &__header {
+    border-block-end: 1px solid var(--color-outline-variant);
+  }
+
+  &__heading {
+    width: 100%;
+
+    padding: var(--spacing-2);
+
+    border: none;
+
+    background-color: transparent;
+
+    font-size: var(--font-label-medium-size);
+    font-weight: var(--font-weight-medium);
+    text-align: center;
+    color: var(--color-on-surface-variant);
+
+    cursor: pointer;
+
+    &:focus-visible {
+      @include mixins.focus-ring;
+    }
+
+    &--today {
+      color: var(--color-primary);
+    }
+  }
+
+  &__all-day {
+    border-block-end: 1px solid var(--color-outline-variant);
+  }
+
+  &__gutter-label {
+    padding: var(--spacing-2);
+
+    font-size: var(--font-label-small-size);
+    text-align: end;
+    color: var(--color-on-surface-variant);
+  }
+
+  &__all-day-cell {
+    padding: var(--spacing-1);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+
+    border-inline-start: 1px solid var(--color-outline-variant);
+  }
+
+  &__gutter {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // Labels keep their default top alignment, so each sits just under its hour line and the
+  // first ("12 AM") stays clear of the all-day row above. `border-box` keeps the top padding
+  // inside the hour height so rows stay aligned with the columns.
+  &__hour-label {
+    box-sizing: border-box;
+    height: var(--tls-calendar-hour-height);
+
+    padding-block-start: var(--spacing-1);
+    padding-inline-end: var(--spacing-2);
+
+    font-size: var(--font-label-small-size);
+    text-align: end;
+    color: var(--color-on-surface-variant);
+  }
+
+  &__column {
+    position: relative;
+
+    border-inline-start: 1px solid var(--color-outline-variant);
+
+    &--today {
+      background-color: var(--color-surface-container-low);
+    }
+  }
+
+  &__hour-line {
+    // Keep the top border inside the height so rows stay exactly one hour tall and the lines
+    // line up with the gutter's hour labels.
+    box-sizing: border-box;
+    height: var(--tls-calendar-hour-height);
+
+    border-block-start: 1px solid var(--color-outline-variant);
+  }
+
+  &__event {
+    // `border-box` keeps the inline top/height/width from the template accurate once padded.
+    box-sizing: border-box;
+    position: absolute;
+
+    padding: 2px;
+
+    z-index: 1;
+  }
+
+  &__now {
+    position: absolute;
+    inset-inline: 0;
+    z-index: 2;
+
+    height: 0;
+
+    border-block-start: 2px solid var(--color-primary);
+  }
+}

package/themes/thalassic/components/date-time-picker/{_calendar.scss → _date-picker-calendar.scss}

@@ -1,7 +1,7 @@
 @use 'mixins' as picker-mixins;
 @use '../../mixins' as mixins;
 
-.tls-calendar {
+.tls-date-picker-calendar {
   display: block;
   width: fit-content;
 

package/themes/thalassic/components/date-time-picker/_index.scss

@@ -1,4 +1,4 @@
-@forward 'calendar';
+@forward 'date-picker-calendar';
 @forward 'date-time-picker';
 @forward 'month-picker';
 @forward 'time-picker';

package/themes/thalassic/components/index.scss

@@ -1,5 +1,6 @@
 @forward 'alert';
 @forward 'button';
+@forward 'calendar';
 @forward 'chart';
 @forward 'chip';
 @forward 'date-time-picker';

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

@@ -1,2 +1,4 @@
 @forward 'tabs';
 @forward 'tabs-variant';
+@forward 'tabs-orientation';
+@forward 'tabs-header-position';

package/themes/thalassic/components/tabs/_tabs-header-position.scss

@@ -0,0 +1,83 @@
+.tls-tabs {
+  &.tls-tabs--header-end {
+    .tls-tabs-header {
+      order: 1;
+    }
+
+    .tls-tabs-content {
+      order: 0;
+    }
+  }
+
+  // Horizontal: divider faces the content, so it moves from the header's
+  // bottom edge to its top edge once the header trails the content.
+  &.tls-tabs--horizontal.tls-tabs--header-end {
+    &.tls-tabs--flat .tls-tabs-header {
+      border-bottom-width: 0;
+      border-top-width: var(--tls-tabs-border-width);
+      border-top-style: solid;
+
+      &__item {
+        margin-bottom: 0;
+        margin-top: -1px;
+
+        border-bottom-width: 0;
+        border-top-width: var(--tls-tabs-active-border-width);
+        border-top-style: solid;
+
+        // See the flat variant's own hover rule for why this is needed:
+        // it keeps the divider line visible under the hover fill.
+        &:hover:not(.tls-tabs-header__item--active) {
+          border-top-color: var(--tls-tabs-border-color);
+        }
+      }
+    }
+
+    &.tls-tabs--outlined .tls-tabs-header {
+      border-bottom-width: 0;
+      border-top-width: var(--tls-tabs-border-width);
+      border-top-style: solid;
+
+      &__item {
+        margin-bottom: 0;
+        margin-top: -1px;
+      }
+    }
+  }
+
+  // Vertical: divider faces the content, so it moves from the header's
+  // inline-end edge to its inline-start edge once the header trails the content.
+  &.tls-tabs--vertical.tls-tabs--header-end {
+    &.tls-tabs--flat .tls-tabs-header {
+      border-inline-end-width: 0;
+      border-inline-start-width: var(--tls-tabs-border-width);
+      border-inline-start-style: solid;
+
+      &__item {
+        margin-inline-end: 0;
+        margin-inline-start: -1px;
+
+        border-inline-end-width: 0;
+        border-inline-start-width: var(--tls-tabs-active-border-width);
+        border-inline-start-style: solid;
+
+        // See the flat variant's own hover rule for why this is needed:
+        // it keeps the divider line visible under the hover fill.
+        &:hover:not(.tls-tabs-header__item--active) {
+          border-inline-start-color: var(--tls-tabs-border-color);
+        }
+      }
+    }
+
+    &.tls-tabs--outlined .tls-tabs-header {
+      border-inline-end-width: 0;
+      border-inline-start-width: var(--tls-tabs-border-width);
+      border-inline-start-style: solid;
+
+      &__item {
+        margin-inline-end: 0;
+        margin-inline-start: -1px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+.tls-tabs {
+  // Vertical
+  &.tls-tabs--vertical {
+    display: flex;
+    flex-direction: row;
+
+    .tls-tabs-header {
+      flex-direction: column;
+
+      border-color: var(--tls-tabs-border-color);
+    }
+
+    .tls-tabs-content {
+      flex-grow: 1;
+    }
+
+    // Flat
+    &.tls-tabs--flat {
+      .tls-tabs-header {
+        border-bottom-width: 0;
+        border-inline-end-width: var(--tls-tabs-border-width);
+        border-inline-end-style: solid;
+
+        &__item {
+          margin-bottom: 0;
+          margin-inline-end: -1px;
+
+          border-bottom-width: 0;
+          border-inline-end-width: var(--tls-tabs-active-border-width);
+          border-inline-end-style: solid;
+
+          // See the flat variant's own hover rule for why this is needed:
+          // it keeps the divider line visible under the hover fill.
+          &:hover:not(.tls-tabs-header__item--active) {
+            border-inline-end-color: var(--tls-tabs-border-color);
+          }
+        }
+      }
+    }
+
+    // Outlined
+    &.tls-tabs--outlined {
+      .tls-tabs-header {
+        border-bottom-width: 0;
+        border-inline-end-width: var(--tls-tabs-border-width);
+        border-inline-end-style: solid;
+
+        &__item {
+          margin-bottom: 0;
+          margin-inline-end: -1px;
+
+          border-inline-start-width: 0;
+          border-inline-end-width: 0;
+          border-block-start-width: var(--tls-tabs-active-border-width);
+          border-block-end-width: var(--tls-tabs-active-border-width);
+          border-style: solid;
+
+          &:first-child {
+            border-inline-start-width: 0;
+            border-block-start-width: 0;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -8,15 +8,27 @@
       &__item {
         margin-bottom: -1px;
 
+        // Border is always reserved at the active width and toggles only
+        // border-color (transparent to active) so switching tabs never
+        // changes the item's box height and shifts the label.
+        border-bottom-width: var(--tls-tabs-active-border-width);
+        border-bottom-style: solid;
+
+        // 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 {
-          .tls-tabs-header__item-button {
-            background-color: var(--color-surface-container);
-          }
-        }
+          background-color: var(--color-surface-container);
 
-        &.tls-tabs-header__item--active {
-          border-bottom-width: var(--tls-tabs-active-border-width);
-          border-bottom-style: solid;
+          // 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);
+          }
         }
       }
     }

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

@@ -11,11 +11,11 @@
 
   background: var(--tls-tabs-background-color);
 
-  display: block;
+  display: flex;
+  flex-direction: column;
 
-  transition:
-    border-color var(--motion-theme),
-    background-color var(--motion-theme);
+  transition: border-color var(--motion-theme),
+  background-color var(--motion-theme);
 
   overflow: clip;
 
@@ -25,14 +25,15 @@
     border-color: var(--tls-tabs-border-color);
 
     &__item {
+      display: flex;
+
       color: var(--tls-tabs-label-color);
 
       border-color: transparent;
 
-      transition:
-        color var(--motion-fast),
-        border-color var(--motion-fast),
-        background-color var(--motion-theme);
+      transition: color var(--motion-fast),
+      border-color var(--motion-fast),
+      background-color var(--motion-theme);
 
       &:has(&-link:hover, &-link:focus) {
         background-color: var(--color-grey-95);
@@ -57,7 +58,7 @@
         // TODO: use mixin
         font-size: var(--font-label-large-size);
         font-weight: var(--font-label-large-weight);
-        line-height: var(--font-label-large-border-height);
+        line-height: var(--font-label-large-line-height);
         letter-spacing: var(--font-label-large-letter-spacing);
 
         cursor: pointer;