@thalassic/themes 0.6.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thalassic/themes",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^21.0.0",

package/themes/thalassic/components/_password.scss

@@ -0,0 +1,18 @@
+.tls-password {
+  display: inline-flex;
+
+  .tls-password-toggle {
+    display: grid;
+    align-items: center;
+
+    &__item {
+      grid-area: 1 / 1;
+
+      text-align: center;
+
+      &--hidden {
+        visibility: hidden;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+.tls-pin-input {
+  --tls-pin-input-size: 40px;
+  --tls-pin-input-border-color: var(--color-outline-variant);
+  --tls-pin-border-radius: var(--radius-sm);
+
+  display: inline-flex;
+  gap: var(--spacing-1);
+
+  &__cell {
+    width: var(--tls-pin-input-size);
+    height: var(--tls-pin-input-size);
+
+    text-align: center;
+
+    font-family: inherit;
+    font-size: var(--font-label-large-size);
+    font-weight: var(--font-label-large-weight);
+    line-height: var(--font-label-large-line-height);
+    letter-spacing: var(--font-label-large-letter-spacing);
+
+    background-color: var(--color-surface-container-lowest);
+
+    border: 1px solid var(--tls-pin-input-border-color);
+    border-radius: var(--tls-pin-border-radius);
+
+    outline: none;
+
+    transition:
+      border-color var(--motion-fast) var(--motion-ease-in-out),
+      background-color var(--motion-fast) var(--motion-ease-in-out),
+      box-shadow var(--motion-fast) var(--motion-ease-in-out);
+
+    &:focus {
+      border-color: var(--color-primary);
+      box-shadow: 0 0 3px -1px var(--color-primary);
+
+      &::placeholder {
+        opacity: 0;
+      }
+    }
+
+    &::placeholder {
+      color: var(--color-outline);
+    }
+  }
+
+  &.tls-pin-input--disabled {
+    .tls-pin-input__cell {
+      background-color: var(--color-surface-variant);
+
+      cursor: not-allowed;
+    }
+  }
+
+  &:not(.tls-pin-input--disabled).tls-pin-input--touched.tls-pin-input--invalid {
+    --tls-pin-input-border-color: var(--color-danger);
+
+    .tls-pin-input__cell {
+      color: var(--color-danger);
+
+      &::placeholder {
+        color: var(--color-danger);
+      }
+    }
+  }
+}

package/themes/thalassic/components/_popover.scss

@@ -0,0 +1,21 @@
+.tls-popover {
+  --tls-popover-padding: var(--spacing-4);
+
+  --tls-popover-border-radius: var(--radius-lg);
+  --tls-popover-border-width: 1px;
+
+  --tls-popover-box-shadow: var(--shadow-sm);
+  --tls-popover-background-color: var(--color-surface-container-lowest);
+  --tls-popover-color: var(--color-on-surface);
+  --tls-popover-border-color: var(--color-outline-variant);
+
+  padding: var(--tls-popover-padding);
+
+  border-radius: var(--tls-popover-border-radius);
+  border: var(--tls-popover-border-width) solid var(--tls-popover-border-color);
+
+  color: var(--tls-popover-color);
+  background-color: var(--tls-popover-background-color);
+
+  box-shadow: var(--tls-popover-box-shadow);
+}

package/themes/thalassic/components/_skeleton.scss

@@ -0,0 +1,41 @@
+.tls-skeleton {
+  --tls-skeleton-color: var(--color-surface-variant);
+  --tls-skeleton-shimmer-color: var(--color-surface);
+
+  display: block;
+
+  width: var(--tls-skeleton-width);
+  height: var(--tls-skeleton-height);
+
+  border-radius: var(--tls-skeleton-radius);
+
+  background: linear-gradient(
+    110deg,
+    var(--tls-skeleton-color) 25%,
+    var(--tls-skeleton-shimmer-color) 50%,
+    var(--tls-skeleton-color) 75%
+  );
+  background-size: 200% 100%;
+
+  animation: skeleton-shimmer var(--tls-skeleton-duration) linear infinite;
+
+  &.tls-skeleton--no-animate {
+    animation: none;
+    background: var(--tls-skeleton-color);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    background: var(--tls-skeleton-color);
+  }
+}
+
+@keyframes skeleton-shimmer {
+  from {
+    background-position: 200% center;
+  }
+
+  to {
+    background-position: -200% center;
+  }
+}

package/themes/thalassic/components/_table.scss

@@ -0,0 +1,78 @@
+.tls-table {
+  --tls-table-background: var(--color-surface-container-lowest);
+  --tls-table-color: var(--color-on-surface);
+
+  --tls-table-header-background: var(--color-surface-container-lowest);
+  --tls-table-header-color: var(--color-on-surface-variant);
+  --tls-table-header-weight: var(--font-weight-medium);
+
+  --tls-table-border-color: var(--color-outline-variant);
+
+  --tls-table-row-hover-bg: var(--color-surface-container);
+  --tls-table-stripe-background: var(--color-surface-container-low);
+
+  --tls-table-cell-padding-x: var(--spacing-4);
+  --tls-table-cell-padding-y: var(--spacing-3);
+
+  --tls-table-font-size: var(--font-body-medium-size);
+  --tls-table-font-weight: var(--font-body-medium-weight);
+  --tls-table-line-height: var(--font-body-medium-line-height);
+  --tls-table-letter-spacing: var(--font-body-medium-letter-spacing);
+
+  --tls-table-radius: var(--radius-md);
+
+  width: 100%;
+
+  border-collapse: collapse;
+  border-radius: var(--tls-table-radius);
+  overflow: hidden;
+
+  font-size: var(--tls-table-font-size);
+  font-weight: var(--tls-table-font-weight);
+  line-height: var(--tls-table-line-height);
+  letter-spacing: var(--tls-table-letter-spacing);
+  color: var(--tls-table-color);
+
+  &__header-row {
+    background: var(--tls-table-header-background);
+  }
+
+  &--hide-header &__header-row {
+    display: none;
+  }
+
+  &--striped &__row:nth-child(even) &__cell {
+    background-color: var(--tls-table-stripe-background);
+  }
+
+  &__header-cell {
+    padding: var(--tls-table-cell-padding-y) var(--tls-table-cell-padding-x);
+
+    color: var(--tls-table-header-color);
+
+    border-bottom: 1px solid var(--tls-table-border-color);
+
+    text-align: start;
+    font-size: var(--font-label-small-size);
+    font-weight: var(--tls-table-header-weight);
+    letter-spacing: var(--font-label-small-letter-spacing);
+    white-space: nowrap;
+  }
+
+  &__row {
+    transition: background var(--motion-fast) var(--motion-ease-in-out);
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--tls-table-border-color);
+    }
+
+    &:hover {
+      background: var(--tls-table-row-hover-bg);
+    }
+  }
+
+  &__cell {
+    padding: var(--tls-table-cell-padding-y) var(--tls-table-cell-padding-x);
+    background-color: var(--tls-table-background);
+  }
+}

package/themes/thalassic/components/chart/_chart.scss

@@ -0,0 +1,19 @@
+.tls-chart {
+  --tls-chart-x-axis-color: var(--color-outline);
+  --tls-chart-x-grid-color: var(--color-outline-variant);
+  --tls-chart-x-ticks-color: var(--color-on-surface);
+
+  --tls-chart-y-axis-color: var(--color-outline);
+  --tls-chart-y-grid-color: var(--color-outline-variant);
+  --tls-chart-y-ticks-color: var(--color-on-surface);
+
+  --tls-chart-r-angle-lines-color: var(--color-outline);
+  --tls-chart-r-grid-color: var(--color-outline-variant);
+  --tls-chart-r-ticks-color: var(--color-on-surface);
+  --tls-chart-r-ticks-backdrop-color: var(--color-surface);
+  --tls-chart-r-labels-color: var(--color-on-surface);
+
+  --tls-chart-background-color: transparent;
+  --tls-chart-border-color: transparent;
+  --tls-chart-color: transparent;
+}

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

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

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

@@ -0,0 +1,85 @@
+@use 'mixins' as picker-mixins;
+@use '../../mixins' as mixins;
+
+.tls-calendar {
+  display: block;
+  width: fit-content;
+
+  &__header {
+    @include picker-mixins.header;
+  }
+
+  &__header-button {
+    @include picker-mixins.header-button;
+  }
+
+  &__nav {
+    @include picker-mixins.nav;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(7, var(--spacing-9));
+    gap: 2px;
+  }
+
+  &__weekday {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: var(--spacing-9);
+
+    font-size: var(--font-label-medium-size);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-on-surface-variant);
+  }
+
+  &__day {
+    width: var(--spacing-9);
+    height: var(--spacing-9);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: var(--font-label-large-size);
+
+    border: none;
+    border-radius: 50%;
+
+    background: transparent;
+    color: var(--color-on-surface);
+
+    cursor: pointer;
+    transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+
+    &:hover {
+      background-color: var(--color-surface-container-high);
+    }
+
+    &:focus-visible {
+      @include mixins.focus-ring;
+    }
+
+    &--outside {
+      color: var(--color-on-surface-variant);
+      opacity: 0.4;
+    }
+
+    &--today {
+      color: var(--color-primary);
+      font-weight: var(--font-weight-semibold);
+    }
+
+    &--selected {
+      background-color: var(--color-primary);
+      color: var(--color-on-primary);
+
+      &:hover {
+        background-color: var(--color-primary);
+        filter: brightness(0.9);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+.tls-date-time-picker {
+  --tls-date-time-picker-width: 200px;
+
+  display: inline-block;
+
+  &__panel {
+    padding: var(--spacing-3);
+    background-color: var(--color-surface-container-lowest);
+    border: 1px solid var(--color-outline-variant);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 2px 8px rgba(var(--color-shadow), 0.12);
+
+    &--disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    &--readonly {
+      pointer-events: none;
+    }
+
+    &--invalid {
+      border-color: var(--color-danger);
+    }
+  }
+
+  &.tls-form-control {
+    --tls-form-control-width: var(--tls-date-time-picker-width);
+
+    display: inline-flex;
+    align-items: stretch;
+    padding-inline: 0;
+
+    cursor: pointer;
+
+    &.tls-form-control--disabled {
+      cursor: not-allowed;
+    }
+
+    &:focus-within {
+      border: var(--tls-form-control-border-width) solid var(--color-primary);
+      box-shadow: 0 0 3px -1px var(--color-primary);
+    }
+  }
+
+  &__trigger {
+    flex: 1;
+
+    display: flex;
+    align-items: center;
+
+    padding-inline: var(--tls-form-control-padding-inline);
+
+    appearance: none;
+    outline: none;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+
+    cursor: inherit;
+  }
+}

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

@@ -0,0 +1,5 @@
+@forward 'calendar';
+@forward 'date-time-picker';
+@forward 'month-picker';
+@forward 'time-picker';
+@forward 'year-picker';

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

@@ -0,0 +1,108 @@
+@use '../../mixins' as mixins;
+
+@mixin header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--spacing-2);
+}
+
+@mixin cell {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: var(--font-label-large-size);
+
+  border-radius: var(--radius-md);
+
+  color: var(--color-on-surface);
+
+  cursor: pointer;
+  transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+
+  &:hover {
+    background-color: var(--color-surface-container-high);
+  }
+
+  &:focus-visible {
+    @include mixins.focus-ring;
+  }
+
+  &--current {
+    color: var(--color-primary);
+    font-weight: var(--font-weight-medium);
+  }
+
+  &--selected {
+    background-color: var(--color-primary);
+    color: var(--color-on-primary);
+
+    &:hover {
+      background-color: var(--color-primary);
+      filter: brightness(0.9);
+    }
+  }
+}
+
+@mixin header-button {
+  align-self: stretch;
+
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: var(--font-label-large-size);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-on-surface);
+
+  border: none;
+  border-radius: var(--radius-sm);
+
+  background: transparent;
+
+  cursor: pointer;
+
+  transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+
+  &:hover {
+    background-color: var(--color-surface-container-high);
+  }
+
+  &:focus-visible {
+    @include mixins.focus-ring;
+  }
+}
+
+@mixin nav {
+  width: var(--spacing-7);
+  height: var(--spacing-7);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border: none;
+  border-radius: var(--radius-sm);
+
+  background: transparent;
+  color: var(--color-on-surface-variant);
+
+  cursor: pointer;
+
+  transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+
+  svg {
+    width: 8px;
+    height: 14px;
+  }
+
+  &:hover {
+    background-color: var(--color-surface-container-high);
+  }
+
+  &:focus-visible {
+    @include mixins.focus-ring;
+  }
+}

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

@@ -0,0 +1,32 @@
+@use 'mixins' as picker-mixins;
+
+.tls-month-picker {
+  --tls-month-picker-cell-height: var(--spacing-10);
+
+  display: block;
+  width: fit-content;
+
+  &__header {
+    @include picker-mixins.header;
+  }
+
+  &__header-button {
+    @include picker-mixins.header-button;
+  }
+
+  &__nav {
+    @include picker-mixins.nav;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(4, var(--spacing-15));
+    gap: var(--spacing-1);
+  }
+
+  &__cell {
+    height: var(--tls-month-picker-cell-height);
+
+    @include picker-mixins.cell;
+  }
+}

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

@@ -0,0 +1,61 @@
+@use '../../mixins' as mixins;
+
+.tls-time-picker {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-1);
+
+  &__column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-1);
+  }
+
+  &__value {
+    font-size: var(--font-title-medium-size);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-on-surface);
+    min-width: var(--spacing-9);
+    text-align: center;
+    line-height: 1;
+    padding: var(--spacing-1) 0;
+  }
+
+  &__separator {
+    font-size: var(--font-title-medium-size);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-on-surface-variant);
+    align-self: center;
+    padding-bottom: var(--spacing-2);
+  }
+
+  &__arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacing-7);
+    height: var(--spacing-7);
+    border: none;
+    background: transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    color: var(--color-on-surface-variant);
+    transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+
+    svg {
+      width: 14px;
+      height: 8px;
+    }
+
+    &:hover {
+      background-color: var(--color-surface-container-high);
+      color: var(--color-on-surface);
+    }
+
+    &:focus-visible {
+      @include mixins.focus-ring;
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+@use 'mixins' as picker-mixins;
+
+.tls-year-picker {
+  --tls-year-picker-cell-height: var(--spacing-10);
+
+  display: block;
+  width: fit-content;
+
+  &__header {
+    @include picker-mixins.header;
+  }
+
+  &__range {
+    font-size: var(--font-label-large-size);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-on-surface);
+  }
+
+  &__nav {
+    @include picker-mixins.nav;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(4, var(--spacing-15));
+    gap: var(--spacing-1);
+  }
+
+  &__cell {
+    height: var(--tls-year-picker-cell-height);
+
+    @include picker-mixins.cell;
+  }
+}

package/themes/thalassic/components/dialog/_dialog-size.scss

@@ -0,0 +1,29 @@
+.tls-dialog {
+  &.tls-dialog--sm {
+    --tls-dialog-width: 400px;
+  }
+
+  &.tls-dialog--md {
+    --tls-dialog-width: 560px;
+  }
+
+  &.tls-dialog--lg {
+    --tls-dialog-width: 720px;
+  }
+
+  &.tls-dialog--xl {
+    --tls-dialog-width: 920px;
+  }
+
+  &.tls-dialog--wide {
+    --tls-dialog-width: calc(100svw - var(--spacing-12));
+    max-height: calc(100dvh - var(--spacing-12));
+  }
+
+  &.tls-dialog--full {
+    --tls-dialog-width: 100svw;
+    --tls-dialog-border-radius: 0;
+    height: 100dvh;
+    max-height: 100dvh;
+  }
+}