@thalassic/themes 0.6.0 → 0.8.0

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';