@thalassic/themes 0.6.0 → 0.7.0

package/package.json

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

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

@@ -0,0 +1,60 @@
+.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);
+
+    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;
+      }
+    }
+  }
+
+  &.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/_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/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/form/_form-control-group.scss

@@ -1,7 +1,7 @@
 .tls-form-control-group {
   --tls-form-control-group-border-width: 1px;
   --tls-form-control-group-border-style: solid;
-  --tls-form-control-group-border-color: var(--color-outline);
+  --tls-form-control-group-border-color: var(--color-outline-variant);
 
   border-radius: var(--radius-md);
   border: var(--tls-form-control-group-border-width) var(--tls-form-control-group-border-style)

package/themes/thalassic/components/form/_form-control.scss

@@ -1,7 +1,7 @@
 .tls-form-control {
   --tls-form-control-border-width: 1px;
   --tls-form-control-border-style: solid;
-  --tls-form-control-border-color: var(--color-outline);
+  --tls-form-control-border-color: var(--color-outline-variant);
 
   color: var(--color-on-surface);
   background-color: var(--color-surface);

package/themes/thalassic/components/index.scss

@@ -1,10 +1,16 @@
 @forward 'alert';
 @forward 'button';
+@forward 'chart';
+@forward 'loader';
 @forward 'form';
+@forward 'stepper';
 @forward 'switch';
 @forward 'tabs';
+@forward 'tooltip';
 
 @forward 'checkbox';
 @forward 'divider';
 @forward 'icon';
+@forward 'pin-input';
 @forward 'radio-button';
+@forward 'skeleton';

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

@@ -0,0 +1,2 @@
+@forward 'loader';
+@forward 'loader-size';

package/themes/thalassic/components/loader/_loader-size.scss

@@ -0,0 +1,26 @@
+.tls-loader {
+  &--xs {
+    --tls-loader-size: var(--spacing-4);
+    --tls-loader-width: var(--spacing-1);
+  }
+
+  &--sm {
+    --tls-loader-size: var(--spacing-6);
+    --tls-loader-width: var(--spacing-1);
+  }
+
+  &--md {
+    --tls-loader-size: var(--spacing-8);
+    --tls-loader-width: var(--spacing-2);
+  }
+
+  &--lg {
+    --tls-loader-size: var(--spacing-10);
+    --tls-loader-width: var(--spacing-2);
+  }
+
+  &--xl {
+    --tls-loader-size: var(--spacing-12);
+    --tls-loader-width: var(--spacing-2);
+  }
+}

package/themes/thalassic/components/loader/_loader.scss

@@ -0,0 +1,25 @@
+.tls-loader {
+  --tls-loader-color: var(--color-primary);
+  --tls-loader-rotate-delay: 1000ms;
+
+  display: inline-block;
+
+  width: var(--tls-loader-size);
+  height: var(--tls-loader-size);
+
+  border-radius: 50%;
+
+  background:
+    radial-gradient(farthest-side, var(--tls-loader-color) 95%, #0000) top/var(--tls-loader-width)
+      var(--tls-loader-width) no-repeat,
+    conic-gradient(#0000 30%, var(--tls-loader-color));
+  mask: radial-gradient(farthest-side, #0000 calc(100% - var(--tls-loader-width)), black 0);
+
+  animation: loader-rotate var(--tls-loader-rotate-delay) infinite linear;
+}
+
+@keyframes loader-rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}

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

@@ -0,0 +1,3 @@
+@forward 'stepper';
+@forward 'stepper-color';
+@forward 'stepper-orientation';

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

@@ -0,0 +1,168 @@
+.tls-stepper {
+  @mixin _disabled-reset {
+    --tls-stepper-label-color: var(--color-outline);
+    --tls-stepper-index-on-color: var(--color-on-surface-variant);
+    --tls-stepper-index-background-color: var(--color-surface-variant);
+    --tls-stepper-index-border-color: var(--color-outline-variant);
+    --tls-stepper-divider-color: var(--color-outline-variant);
+  }
+
+  .tls-stepper-header {
+    // Item
+    &__item {
+      // Primary
+      &.tls-stepper-header--primary {
+        // Active
+        &.tls-stepper-header__item--active {
+          --tls-stepper-label-color: var(--color-primary);
+          --tls-stepper-index-border-color: var(--color-primary);
+        }
+
+        // Completed
+        &.tls-stepper-header__item--completed {
+          --tls-stepper-index-on-color: var(--color-on-primary);
+          --tls-stepper-index-background-color: var(--color-primary);
+          --tls-stepper-index-border-color: var(--color-primary);
+          --tls-stepper-divider-color: var(--color-primary);
+        }
+
+        // Disabled overrides color states
+        &.tls-stepper-header__item--disabled {
+          @include _disabled-reset;
+        }
+      }
+
+      // Secondary
+      &.tls-stepper-header--secondary {
+        // Active
+        &.tls-stepper-header__item--active {
+          --tls-stepper-label-color: var(--color-secondary);
+          --tls-stepper-index-border-color: var(--color-secondary);
+        }
+
+        // Completed
+        &.tls-stepper-header__item--completed {
+          --tls-stepper-index-on-color: var(--color-on-secondary);
+          --tls-stepper-index-background-color: var(--color-secondary);
+          --tls-stepper-index-border-color: var(--color-secondary);
+          --tls-stepper-divider-color: var(--color-secondary);
+        }
+
+        // Disabled overrides color states
+        &.tls-stepper-header__item--disabled {
+          @include _disabled-reset;
+        }
+      }
+
+      // Tertiary
+      &.tls-stepper-header--tertiary {
+        // Active
+        &.tls-stepper-header__item--active {
+          --tls-stepper-label-color: var(--color-tertiary);
+          --tls-stepper-index-border-color: var(--color-tertiary);
+        }
+
+        // Completed
+        &.tls-stepper-header__item--completed {
+          --tls-stepper-index-on-color: var(--color-on-tertiary);
+          --tls-stepper-index-background-color: var(--color-tertiary);
+          --tls-stepper-index-border-color: var(--color-tertiary);
+          --tls-stepper-divider-color: var(--color-tertiary);
+        }
+
+        // Disabled overrides color states
+        &.tls-stepper-header__item--disabled {
+          @include _disabled-reset;
+        }
+      }
+
+      // Success
+      &.tls-stepper-header--success {
+        // Active
+        &.tls-stepper-header__item--active {
+          --tls-stepper-label-color: var(--color-success);
+          --tls-stepper-index-border-color: var(--color-success);
+        }
+
+        // Completed
+        &.tls-stepper-header__item--completed {
+          --tls-stepper-index-on-color: var(--color-on-success);
+          --tls-stepper-index-background-color: var(--color-success);
+          --tls-stepper-index-border-color: var(--color-success);
+          --tls-stepper-divider-color: var(--color-success);
+        }
+
+        // Disabled overrides color states
+        &.tls-stepper-header__item--disabled {
+          @include _disabled-reset;
+        }
+      }
+
+      // Info
+      &.tls-stepper-header--info {
+        // Active
+        &.tls-stepper-header__item--active {
+          --tls-stepper-label-color: var(--color-info);
+          --tls-stepper-index-border-color: var(--color-info);
+        }
+
+        // Completed
+        &.tls-stepper-header__item--completed {
+          --tls-stepper-index-on-color: var(--color-on-info);
+          --tls-stepper-index-background-color: var(--color-info);
+          --tls-stepper-index-border-color: var(--color-info);
+          --tls-stepper-divider-color: var(--color-info);
+        }
+
+        // Disabled overrides color states
+        &.tls-stepper-header__item--disabled {
+          @include _disabled-reset;
+        }
+      }
+
+      // Warning
+      &.tls-stepper-header--warning {
+        // Active
+        &.tls-stepper-header__item--active {
+          --tls-stepper-label-color: var(--color-warning);
+          --tls-stepper-index-border-color: var(--color-warning);
+        }
+
+        // Completed
+        &.tls-stepper-header__item--completed {
+          --tls-stepper-index-on-color: var(--color-on-warning);
+          --tls-stepper-index-background-color: var(--color-warning);
+          --tls-stepper-index-border-color: var(--color-warning);
+          --tls-stepper-divider-color: var(--color-warning);
+        }
+
+        // Disabled overrides color states
+        &.tls-stepper-header__item--disabled {
+          @include _disabled-reset;
+        }
+      }
+
+      // Danger
+      &.tls-stepper-header--danger {
+        // Active
+        &.tls-stepper-header__item--active {
+          --tls-stepper-label-color: var(--color-danger);
+          --tls-stepper-index-border-color: var(--color-danger);
+        }
+
+        // Completed
+        &.tls-stepper-header__item--completed {
+          --tls-stepper-index-on-color: var(--color-on-danger);
+          --tls-stepper-index-background-color: var(--color-danger);
+          --tls-stepper-index-border-color: var(--color-danger);
+          --tls-stepper-divider-color: var(--color-danger);
+        }
+
+        // Disabled overrides color states
+        &.tls-stepper-header__item--disabled {
+          @include _disabled-reset;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,56 @@
+.tls-stepper {
+  // Horizontal
+  &.tls-stepper--horizontal {
+    .tls-stepper-header {
+      &__item {
+        width: 100%;
+
+        &:last-child {
+          width: auto;
+        }
+      }
+
+      &__divider {
+        top: calc(var(--tls-stepper-index-size) / 2 - (var(--tls-stepper-divider-width) / 2));
+
+        width: 100%;
+        height: var(--tls-stepper-divider-width);
+      }
+    }
+  }
+
+  // Vertical
+  &.tls-stepper--vertical {
+    height: 100%;
+
+    display: flex;
+
+    .tls-stepper-header {
+      flex-direction: column;
+
+      &__item {
+        height: 100%;
+
+        &:last-child {
+          height: auto;
+        }
+
+        .tls-stepper-header-button {
+          flex-direction: row;
+        }
+      }
+
+      &__divider {
+        top: 0;
+        left: calc(var(--tls-stepper-index-size) / 2 - (var(--tls-stepper-divider-width) / 2));
+
+        width: var(--tls-stepper-divider-width);
+        height: 100%;
+      }
+    }
+
+    .tls-stepper-content {
+      flex-grow: 1;
+    }
+  }
+}

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

@@ -0,0 +1,144 @@
+.tls-stepper {
+  --tls-stepper-label-color: var(--color-outline);
+  --tls-stepper-background-color: var(--color-surface);
+
+  --tls-stepper-content-padding: var(--spacing-4);
+
+  // Index
+  --tls-stepper-index-size: calc(32px - var(--tls-stepper-index-border-width) * 2);
+
+  --tls-stepper-index-on-color: var(--color-on-surface);
+  --tls-stepper-index-background-color: var(--color-surface);
+  --tls-stepper-index-border-color: var(--color-outline-variant);
+
+  --tls-stepper-index-border-width: 1px;
+
+  // Divider
+  --tls-stepper-divider-color: var(--color-outline-variant);
+  --tls-stepper-divider-width: 2px;
+
+  background: var(--tls-stepper-background-color);
+
+  display: block;
+
+  transition:
+    border-color var(--motion-theme),
+    background-color var(--motion-theme);
+
+  &.tls-stepper--completed {
+    .tls-stepper-content {
+      .tls-step {
+        display: none;
+      }
+    }
+  }
+
+  .tls-stepper-header {
+    position: relative;
+
+    display: flex;
+    justify-content: space-between;
+
+    // Item
+    &__item {
+      position: relative;
+      z-index: 1;
+
+      // Unreachable (linear mode)
+      &.tls-stepper-header__item--unreachable {
+        --tls-stepper-label-color: var(--color-outline);
+        --tls-stepper-index-on-color: var(--color-on-surface-variant);
+        --tls-stepper-index-background-color: var(--color-surface-variant);
+        --tls-stepper-index-border-color: var(--color-outline-variant);
+
+        .tls-stepper-header-button {
+          cursor: not-allowed;
+        }
+      }
+
+      // Disabled
+      &.tls-stepper-header__item--disabled {
+        .tls-stepper-header-button {
+          cursor: not-allowed;
+        }
+      }
+
+      // Button
+      .tls-stepper-header-button {
+        position: relative;
+        z-index: 1;
+
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-2);
+
+        color: var(--tls-stepper-label-color);
+
+        transition:
+          color var(--motion-fast),
+          background-color var(--motion-fast);
+
+        &__index {
+          width: var(--tls-stepper-index-size);
+          height: var(--tls-stepper-index-size);
+
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+
+          border: var(--tls-stepper-index-border-width) var(--tls-stepper-index-border-color) solid;
+          border-radius: 50%;
+
+          color: var(--tls-stepper-index-on-color);
+          background-color: var(--tls-stepper-index-background-color);
+
+          transition: background-color var(--motion-fast);
+        }
+
+        &__text {
+          display: flex;
+          flex-direction: column;
+          gap: 0.25rem;
+
+          .tls-stepper-header-button__label {
+            font-size: var(--font-label-large-size);
+            font-weight: var(--font-weight-semibold);
+            line-height: var(--font-label-large-line-height);
+            letter-spacing: var(--font-label-large-letter-spacing);
+          }
+
+          .tls-stepper-header-button__description {
+            font-size: var(--font-label-medium-size);
+            font-weight: var(--font-label-medium-weight);
+            line-height: var(--font-label-medium-line-height);
+            letter-spacing: var(--font-label-medium-letter-spacing);
+          }
+        }
+      }
+
+      .tls-stepper-header__divider {
+        position: absolute;
+
+        background-color: var(--tls-stepper-divider-color);
+
+        transition: background-color var(--motion-fast);
+      }
+    }
+  }
+
+  // Content
+  .tls-stepper-content {
+    padding: var(--tls-stepper-content-padding);
+
+    // Step
+    .tls-step {
+      height: 100%;
+
+      display: none;
+
+      &--active {
+        display: block;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+@forward 'tooltip';
+@forward 'tooltip-color';

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

@@ -0,0 +1,36 @@
+.tls-tooltip {
+  &.tls-tooltip--primary {
+    --tls-tooltip-on-color: var(--color-on-primary);
+    --tls-tooltip-color: var(--color-primary);
+  }
+
+  &.tls-tooltip--secondary {
+    --tls-tooltip-on-color: var(--color-on-secondary);
+    --tls-tooltip-color: var(--color-secondary);
+  }
+
+  &.tls-tooltip--tertiary {
+    --tls-tooltip-on-color: var(--color-on-tertiary);
+    --tls-tooltip-color: var(--color-tertiary);
+  }
+
+  &.tls-tooltip--success {
+    --tls-tooltip-on-color: var(--color-on-success);
+    --tls-tooltip-color: var(--color-success);
+  }
+
+  &.tls-tooltip--info {
+    --tls-tooltip-on-color: var(--color-on-info);
+    --tls-tooltip-color: var(--color-info);
+  }
+
+  &.tls-tooltip--warning {
+    --tls-tooltip-on-color: var(--color-on-warning);
+    --tls-tooltip-color: var(--color-warning);
+  }
+
+  &.tls-tooltip--danger {
+    --tls-tooltip-on-color: var(--color-on-danger);
+    --tls-tooltip-color: var(--color-danger);
+  }
+}

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

@@ -0,0 +1,14 @@
+.tls-tooltip {
+  --tls-tooltip-box-shadow: 0 2px 8px -1px var(--color-shade-30);
+  --tls-tooltip-padding: var(--spacing-3);
+  --tls-tooltip-border-radius: 8px;
+
+  padding: var(--tls-tooltip-padding);
+
+  border-radius: var(--tls-tooltip-border-radius);
+
+  color: var(--tls-tooltip-on-color);
+  background-color: var(--tls-tooltip-color);
+
+  box-shadow: var(--tls-tooltip-box-shadow);
+}

package/themes/thalassic/index.scss

@@ -9,3 +9,5 @@
 @forward 'shadow';
 @forward 'spacing';
 @forward 'typography';
+
+@import '@angular/cdk/overlay-prebuilt.css';