@thalassic/themes 0.6.0 → 0.8.0

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

@@ -0,0 +1,85 @@
+.tls-dialog-backdrop {
+  --tls-dialog-backdrop: rgb(0 0 0 / 0.4);
+
+  background-color: var(--tls-dialog-backdrop);
+}
+
+.tls-dialog {
+  --tls-dialog-background: var(--color-surface-container-lowest);
+  --tls-dialog-color: var(--color-on-surface);
+  --tls-dialog-border-radius: var(--radius-xl);
+  --tls-dialog-shadow: var(--shadow-lg);
+  --tls-dialog-padding: var(--spacing-6);
+  --tls-dialog-close-size: 16px;
+  --tls-dialog-close-padding: var(--spacing-4);
+
+  position: relative;
+
+  width: var(--tls-dialog-width);
+
+  display: flex;
+  flex-direction: column;
+
+  pointer-events: auto;
+
+  border-radius: var(--tls-dialog-border-radius);
+  background-color: var(--tls-dialog-background);
+  color: var(--tls-dialog-color);
+  box-shadow: var(--tls-dialog-shadow);
+
+  &__close {
+    position: absolute;
+    top: var(--tls-dialog-close-padding);
+    right: var(--tls-dialog-close-padding);
+    z-index: 1;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: var(--tls-dialog-close-size);
+    height: var(--tls-dialog-close-size);
+
+    color: var(--color-outline);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+
+    transition: color var(--motion-fast) var(--motion-ease-in-out);
+
+    &:hover {
+      color: var(--color-on-surface);
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__header {
+    padding: var(--tls-dialog-padding) var(--tls-dialog-padding) 0;
+  }
+
+  &__title {
+    font-size: var(--font-title-large-size);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-title-large-line-height);
+    color: var(--color-on-surface);
+  }
+
+  &__body {
+    flex: 1;
+    padding: var(--spacing-4) var(--tls-dialog-padding);
+    overflow-y: auto;
+  }
+
+  &__footer {
+    padding: 0 var(--tls-dialog-padding) var(--tls-dialog-padding);
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--spacing-3);
+  }
+}

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

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

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)
@@ -51,7 +51,8 @@
 
     color: var(--color-danger);
 
-    .tls-form-control::placeholder {
+    .tls-form-control::placeholder,
+    .tls-form-control__placeholder {
       color: var(--color-danger);
     }
   }

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

@@ -1,10 +1,10 @@
 .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);
+  background-color: var(--color-surface-container-lowest);
 
   border-radius: var(--radius-md);
   border: var(--tls-form-control-border-width) var(--tls-form-control-border-style)
@@ -20,10 +20,16 @@
   }
 
   &:focus {
-    border: 1px solid var(--color-primary);
+    outline: none;
+    border: var(--tls-form-control-border-width) solid var(--color-primary);
     box-shadow: 0 0 3px -1px var(--color-primary);
   }
 
+  &::placeholder,
+  .tls-form-control__placeholder {
+    color: var(--color-outline);
+  }
+
   // Form control
   &.tls-form-control--disabled {
     background-color: var(--color-surface-variant);
@@ -38,7 +44,8 @@
 
     color: var(--color-danger);
 
-    &::placeholder {
+    &::placeholder,
+    .tls-form-control__placeholder {
       color: var(--color-danger);
     }
   }

package/themes/thalassic/components/index.scss

@@ -1,10 +1,23 @@
 @forward 'alert';
 @forward 'button';
+@forward 'chart';
+@forward 'date-time-picker';
+@forward 'dialog';
+@forward 'loader';
+@forward 'pagination';
+@forward 'select';
 @forward 'form';
+@forward 'stepper';
 @forward 'switch';
 @forward 'tabs';
+@forward 'tooltip';
 
 @forward 'checkbox';
 @forward 'divider';
 @forward 'icon';
+@forward 'password';
+@forward 'pin-input';
+@forward 'popover';
 @forward 'radio-button';
+@forward 'skeleton';
+@forward 'table';

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/pagination/_index.scss

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

package/themes/thalassic/components/pagination/_pagination-size.scss

@@ -0,0 +1,22 @@
+.tls-pagination {
+  &--sm {
+    --tls-pagination-item-size: var(--control-height-sm);
+    --tls-pagination-button-height: var(--control-height-sm);
+    --tls-pagination-button-padding-inline: var(--spacing-3);
+    --tls-pagination-button-icon-size: 14px;
+  }
+
+  &--md {
+    --tls-pagination-item-size: var(--control-height-md);
+    --tls-pagination-button-height: var(--control-height-md);
+    --tls-pagination-button-padding-inline: var(--spacing-4);
+    --tls-pagination-button-icon-size: 16px;
+  }
+
+  &--lg {
+    --tls-pagination-item-size: var(--control-height-lg);
+    --tls-pagination-button-height: var(--control-height-lg);
+    --tls-pagination-button-padding-inline: var(--spacing-5);
+    --tls-pagination-button-icon-size: 18px;
+  }
+}

package/themes/thalassic/components/pagination/_pagination.scss

@@ -0,0 +1,79 @@
+.tls-pagination {
+  --tls-pagination-gap: 16px;
+  --tls-pagination-color: var(--color-secondary);
+  --tls-pagination-radius: 4px;
+  --tls-pagination-hover-outline: 1px solid var(--color-lines);
+
+  --tls-pagination-item-border-color: var(--color-outline-variant);
+
+  --tls-pagination-active-color: var(--color-on-primary);
+  --tls-pagination-active-background: var(--color-primary);
+
+  display: flex;
+  align-items: center;
+
+  &__list {
+    display: flex;
+    gap: var(--tls-pagination-gap);
+  }
+
+  &__button {
+    height: var(--tls-pagination-button-height);
+    padding-inline: var(--tls-pagination-button-padding-inline);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: var(--tls-pagination-color);
+
+    border-radius: var(--tls-pagination-radius);
+
+    cursor: pointer;
+
+    &:hover {
+      outline: var(--tls-pagination-hover-outline);
+    }
+
+    &-icon {
+      width: var(--tls-pagination-button-icon-size);
+      height: var(--tls-pagination-button-icon-size);
+    }
+  }
+
+  &__gap {
+    width: var(--tls-pagination-item-size);
+    height: var(--tls-pagination-item-size);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: var(--tls-pagination-color);
+  }
+
+  &__item-button {
+    width: var(--tls-pagination-item-size);
+    height: var(--tls-pagination-item-size);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: var(--tls-pagination-color);
+
+    border: 1px solid var(--tls-pagination-item-border-color);
+    border-radius: var(--tls-pagination-radius);
+
+    cursor: pointer;
+
+    &:hover {
+      outline: var(--tls-pagination-hover-outline);
+    }
+
+    &--active {
+      color: var(--tls-pagination-active-color);
+      background-color: var(--tls-pagination-active-background);
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+@forward 'select';
+@forward 'select-panel';
+@forward 'select-size';

package/themes/thalassic/components/select/_select-panel.scss

@@ -0,0 +1,68 @@
+.tls-select__panel {
+  --tls-select-panel-max-height: 240px;
+  --tls-select-panel-padding-block: var(--spacing-1);
+  --tls-select-panel-background: var(--color-surface-container-lowest);
+  --tls-select-panel-border-radius: var(--radius-md);
+  --tls-select-panel-shadow: var(--shadow-sm);
+
+  width: 100%;
+  max-height: var(--tls-select-panel-max-height);
+
+  margin: 0;
+  padding: var(--tls-select-panel-padding-block) 0;
+
+  background-color: var(--tls-select-panel-background);
+  border-radius: var(--tls-select-panel-border-radius);
+  box-shadow: var(--tls-select-panel-shadow);
+
+  overflow-y: auto;
+  list-style: none;
+}
+
+.tls-select__option {
+  --tls-select-option-color: var(--color-on-surface);
+  --tls-select-option-background: transparent;
+  --tls-select-option-padding-block: var(--spacing-2);
+  --tls-select-option-padding-inline: var(--spacing-3);
+
+  &.tls-select__option--active {
+    --tls-select-option-background: var(--color-surface-variant);
+  }
+
+  &.tls-select__option--selected {
+    --tls-select-option-color: var(--color-primary);
+  }
+
+  &.tls-select__option--disabled .tls-select__option-button {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .tls-select__option-button {
+    width: 100%;
+    padding-block: var(--tls-select-option-padding-block);
+    padding-inline: var(--tls-select-option-padding-inline);
+
+    display: flex;
+    align-items: center;
+
+    appearance: none;
+    cursor: pointer;
+    text-align: left;
+
+    color: var(--tls-select-option-color);
+    background: var(--tls-select-option-background);
+    border: none;
+
+    font-size: var(--font-body-medium-size);
+    font-weight: var(--font-body-medium-weight);
+    line-height: var(--font-body-medium-line-height);
+    letter-spacing: var(--font-body-medium-letter-spacing);
+
+    transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}

package/themes/thalassic/components/select/_select-size.scss

@@ -0,0 +1,16 @@
+.tls-select {
+  &.tls-form-control--sm {
+    --tls-select-icon-size: 0.625rem;
+    --tls-select-clear-size: 0.625rem;
+  }
+
+  &.tls-form-control--md {
+    --tls-select-icon-size: 0.75rem;
+    --tls-select-clear-size: 0.75rem;
+  }
+
+  &.tls-form-control--lg {
+    --tls-select-icon-size: 0.875rem;
+    --tls-select-clear-size: 0.875rem;
+  }
+}

package/themes/thalassic/components/select/_select.scss

@@ -0,0 +1,94 @@
+.tls-select {
+  --tls-select-width: 200px;
+  --tls-select-gap: var(--spacing-2);
+
+  position: relative;
+  display: inline-block;
+
+  &.tls-form-control {
+    --tls-form-control-width: var(--tls-select-width);
+
+    display: inline-flex;
+    align-items: stretch;
+    padding-inline: 0;
+
+    cursor: pointer;
+
+    &.tls-form-control--fluid {
+      --tls-form-control-width: 100%;
+    }
+
+    &.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);
+    }
+
+    &.tls-select--open {
+      .tls-select__chevron {
+        transform: rotate(180deg);
+      }
+    }
+
+    .tls-select__trigger {
+      flex: 1;
+      min-width: 0;
+
+      display: flex;
+      align-items: center;
+      gap: var(--tls-select-gap);
+
+      padding-inline: var(--tls-form-control-padding-inline);
+
+      appearance: none;
+      outline: none;
+
+      .tls-select__value {
+        flex: 1;
+
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .tls-select__icon {
+        width: var(--tls-select-icon-size);
+        height: var(--tls-select-icon-size);
+
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+
+        .tls-select__chevron {
+          transition: transform var(--motion-fast) var(--motion-ease-in-out);
+        }
+      }
+    }
+
+    // Clear button
+    .tls-select__clear {
+      position: absolute;
+      top: 50%;
+      right: calc(var(--tls-form-control-padding-inline) * 2 + var(--tls-select-icon-size));
+
+      display: flex;
+      align-items: center;
+
+      color: var(--color-outline);
+
+      transform: translateY(-50%);
+
+      &:hover {
+        color: var(--color-on-surface);
+      }
+
+      .tls-select__clear-icon {
+        width: var(--tls-select-clear-size);
+        height: var(--tls-select-clear-size);
+      }
+    }
+  }
+}

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;
+        }
+      }
+    }
+  }
+}