ngx-strata 0.3.0 → 0.4.0

package/assets/styles/components/stepper.scss

@@ -0,0 +1,378 @@
+st-stepper {
+  --st-stepper-indicator-size: 32px;
+  --st-stepper-indicator-font-size: var(--st-font-md, 14px);
+  --st-stepper-indicator-font-weight: 600;
+  --st-stepper-title-font-size: var(--st-font-md, 14px);
+  --st-stepper-desc-font-size: var(--st-font-sm, 12px);
+
+  --st-stepper-line-thickness: 2px;
+  --st-stepper-line-color: var(--st-color-border-subtle);
+  --st-stepper-line-active-color: var(--st-color-text-primary);
+
+  --st-stepper-future-indicator-bg: var(--st-color-bg-default);
+  --st-stepper-future-indicator-border: var(--st-color-border-strong);
+  --st-stepper-future-indicator-color: var(--st-color-text-tertiary);
+  --st-stepper-future-title-color: var(--st-color-text-secondary);
+  --st-stepper-future-desc-color: var(--st-color-text-tertiary);
+
+  --st-stepper-current-indicator-bg: var(--st-color-text-primary);
+  --st-stepper-current-indicator-border: var(--st-color-text-primary);
+  --st-stepper-current-indicator-color: var(--st-color-text-inverse);
+  --st-stepper-current-halo: 0 0 0 3px var(--st-color-border-default);
+  --st-stepper-current-title-color: var(--st-color-text-primary);
+  --st-stepper-current-desc-color: var(--st-color-text-secondary);
+
+  --st-stepper-completed-indicator-bg: var(--st-color-control-bg);
+  --st-stepper-completed-indicator-border: var(--st-color-text-primary);
+  --st-stepper-completed-indicator-color: var(--st-color-text-primary);
+  --st-stepper-completed-title-color: var(--st-color-text-primary);
+  --st-stepper-completed-desc-color: var(--st-color-text-secondary);
+
+  --st-stepper-error-indicator-bg: var(--st-color-feedback-error-subtle);
+  --st-stepper-error-indicator-border: var(--st-color-feedback-error-default);
+  --st-stepper-error-indicator-color: var(--st-color-feedback-error-text);
+  --st-stepper-error-title-color: var(--st-color-feedback-error-text);
+  --st-stepper-error-desc-color: var(--st-color-text-tertiary);
+
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+
+  &.st-size-sm {
+    --st-stepper-indicator-size: 24px;
+    --st-stepper-indicator-font-size: var(--st-font-xs, 10px);
+    --st-stepper-title-font-size: var(--st-font-sm, 12px);
+    --st-stepper-desc-font-size: var(--st-font-xs, 10px);
+  }
+
+  &.st-size-md {
+    --st-stepper-indicator-size: 32px;
+    --st-stepper-indicator-font-size: var(--st-font-md, 14px);
+    --st-stepper-title-font-size: var(--st-font-md, 14px);
+    --st-stepper-desc-font-size: var(--st-font-sm, 12px);
+  }
+
+  &.st-theme-brand {
+    --st-stepper-line-active-color: var(--st-color-accent-default);
+
+    --st-stepper-current-indicator-bg: var(--st-color-accent-default);
+    --st-stepper-current-indicator-border: var(--st-color-accent-default);
+    --st-stepper-current-indicator-color: var(--st-color-text-on-accent);
+    --st-stepper-current-halo: 0 0 0 3px var(--st-color-accent-subtle);
+
+    --st-stepper-completed-indicator-bg: var(--st-color-accent-subtle);
+    --st-stepper-completed-indicator-border: var(--st-color-accent-default);
+    --st-stepper-completed-indicator-color: var(--st-color-accent-text);
+  }
+
+  &.st-theme-success {
+    --st-stepper-line-active-color: var(--st-color-feedback-success-default);
+
+    --st-stepper-current-indicator-bg: var(--st-color-feedback-success-default);
+    --st-stepper-current-indicator-border: var(--st-color-feedback-success-default);
+    --st-stepper-current-indicator-color: var(--st-color-text-inverse);
+    --st-stepper-current-halo: 0 0 0 3px var(--st-color-feedback-success-subtle);
+
+    --st-stepper-completed-indicator-bg: var(--st-color-feedback-success-subtle);
+    --st-stepper-completed-indicator-border: var(--st-color-feedback-success-default);
+    --st-stepper-completed-indicator-color: var(--st-color-feedback-success-text);
+  }
+
+  &.st-theme-info {
+    --st-stepper-line-active-color: var(--st-color-feedback-info-default);
+
+    --st-stepper-current-indicator-bg: var(--st-color-feedback-info-default);
+    --st-stepper-current-indicator-border: var(--st-color-feedback-info-default);
+    --st-stepper-current-indicator-color: var(--st-color-text-inverse);
+    --st-stepper-current-halo: 0 0 0 3px var(--st-color-feedback-info-subtle);
+
+    --st-stepper-completed-indicator-bg: var(--st-color-feedback-info-subtle);
+    --st-stepper-completed-indicator-border: var(--st-color-feedback-info-default);
+    --st-stepper-completed-indicator-color: var(--st-color-feedback-info-text);
+  }
+
+  &.st-theme-warning {
+    --st-stepper-line-active-color: var(--st-color-feedback-warning-default);
+
+    --st-stepper-current-indicator-bg: var(--st-color-feedback-warning-default);
+    --st-stepper-current-indicator-border: var(--st-color-feedback-warning-default);
+    --st-stepper-current-indicator-color: var(--st-color-neutral-900);
+    --st-stepper-current-halo: 0 0 0 3px var(--st-color-feedback-warning-subtle);
+
+    --st-stepper-completed-indicator-bg: var(--st-color-feedback-warning-subtle);
+    --st-stepper-completed-indicator-border: var(--st-color-feedback-warning-default);
+    --st-stepper-completed-indicator-color: var(--st-color-feedback-warning-text);
+  }
+
+  &.st-theme-danger {
+    --st-stepper-line-active-color: var(--st-color-feedback-error-default);
+
+    --st-stepper-current-indicator-bg: var(--st-color-feedback-error-default);
+    --st-stepper-current-indicator-border: var(--st-color-feedback-error-default);
+    --st-stepper-current-indicator-color: var(--st-color-text-inverse);
+    --st-stepper-current-halo: 0 0 0 3px var(--st-color-feedback-error-subtle);
+
+    --st-stepper-completed-indicator-bg: var(--st-color-feedback-error-subtle);
+    --st-stepper-completed-indicator-border: var(--st-color-feedback-error-default);
+    --st-stepper-completed-indicator-color: var(--st-color-feedback-error-text);
+  }
+
+  .st-stepper-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    box-sizing: border-box;
+  }
+
+  &.st-orientation-horizontal .st-stepper-list {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  &.st-orientation-vertical .st-stepper-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+}
+
+st-step {
+  display: block;
+  box-sizing: border-box;
+
+  &.st-orientation-horizontal {
+    flex: 1;
+    min-width: 0;
+
+    .st-step-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+    }
+
+    .st-step-top {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      align-self: stretch;
+      position: relative;
+    }
+
+    .st-step-line {
+      flex: 1;
+      height: var(--st-stepper-line-thickness);
+      background-color: var(--st-stepper-line-color);
+      transition: background-color 0.2s ease;
+      margin: 0;
+
+      &.st-line-active {
+        background-color: var(--st-stepper-line-active-color);
+      }
+    }
+
+    .st-step-line-after {
+      margin-right: -1px;
+    }
+
+    .st-step-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      margin-top: var(--st-size-xs, 8px);
+      width: 100%;
+      padding: 0 var(--st-size-xxs, 4px);
+      box-sizing: border-box;
+    }
+
+    &.st-step-first {
+      .st-step-wrapper {
+        align-items: flex-start;
+      }
+
+      .st-step-content {
+        align-items: flex-start;
+        text-align: left;
+        padding-left: 0;
+      }
+    }
+
+    &.st-step-last {
+      .st-step-wrapper {
+        align-items: flex-end;
+      }
+
+      .st-step-content {
+        align-items: flex-end;
+        text-align: right;
+        padding-right: 0;
+      }
+    }
+
+    .st-step-title {
+      font-size: var(--st-stepper-title-font-size);
+      line-height: 1.3;
+      font-weight: 500;
+      transition: color 0.2s ease, font-size 0.2s ease;
+      word-break: break-word;
+    }
+
+    .st-step-description {
+      font-size: var(--st-stepper-desc-font-size);
+      line-height: 1.3;
+      margin-top: var(--st-size-xxxxs, 2px);
+      transition: color 0.2s ease, font-size 0.2s ease;
+      word-break: break-word;
+    }
+  }
+
+  &.st-orientation-vertical {
+    width: 100%;
+
+    .st-step-wrapper {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+    }
+
+    .st-step-vertical-left {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex: 0 0 auto;
+      margin-right: var(--st-size-sm, 16px);
+      position: relative;
+    }
+
+    .st-step-vertical-line {
+      width: var(--st-stepper-line-thickness);
+      flex: 1;
+      min-height: var(--st-size-xl, 32px);
+      background-color: var(--st-stepper-line-color);
+      transition: background-color 0.2s ease;
+
+      &.st-line-active {
+        background-color: var(--st-stepper-line-active-color);
+      }
+    }
+
+    .st-step-content {
+      flex: 1;
+      min-width: 0;
+      padding-bottom: var(--st-size-md, 24px);
+    }
+
+    &.st-step-last .st-step-content {
+      padding-bottom: 0;
+    }
+
+    .st-step-header {
+      display: flex;
+      flex-direction: column;
+      min-height: var(--st-stepper-indicator-size);
+      justify-content: center;
+    }
+
+    .st-step-title {
+      font-size: var(--st-stepper-title-font-size);
+      line-height: 1.3;
+      font-weight: 500;
+      transition: color 0.2s ease;
+    }
+
+    .st-step-description {
+      font-size: var(--st-stepper-desc-font-size);
+      line-height: 1.3;
+      margin-top: var(--st-size-xxxxs, 2px);
+      transition: color 0.2s ease;
+    }
+
+    .st-step-body {
+      margin-top: var(--st-size-xs, 8px);
+    }
+  }
+
+  .st-step-indicator {
+    flex: 0 0 auto;
+    width: var(--st-stepper-indicator-size);
+    height: var(--st-stepper-indicator-size);
+    border-radius: var(--st-border-radius-full, 9999px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--st-stepper-indicator-font-size);
+    font-weight: var(--st-stepper-indicator-font-weight);
+    box-sizing: border-box;
+    transition: all 0.2s ease;
+    z-index: 1;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &.st-state-future {
+    .st-step-indicator {
+      background-color: var(--st-stepper-future-indicator-bg);
+      border: 1px solid var(--st-stepper-future-indicator-border);
+      color: var(--st-stepper-future-indicator-color);
+    }
+
+    .st-step-title {
+      color: var(--st-stepper-future-title-color);
+    }
+
+    .st-step-description {
+      color: var(--st-stepper-future-desc-color);
+    }
+  }
+
+  &.st-state-current {
+    .st-step-indicator {
+      background-color: var(--st-stepper-current-indicator-bg);
+      border: 1px solid var(--st-stepper-current-indicator-border);
+      color: var(--st-stepper-current-indicator-color);
+      box-shadow: var(--st-stepper-current-halo);
+    }
+
+    .st-step-title {
+      color: var(--st-stepper-current-title-color);
+      font-weight: 600;
+    }
+
+    .st-step-description {
+      color: var(--st-stepper-current-desc-color);
+    }
+  }
+
+  &.st-state-completed {
+    .st-step-indicator {
+      background-color: var(--st-stepper-completed-indicator-bg);
+      border: 1px solid var(--st-stepper-completed-indicator-border);
+      color: var(--st-stepper-completed-indicator-color);
+    }
+
+    .st-step-title {
+      color: var(--st-stepper-completed-title-color);
+    }
+
+    .st-step-description {
+      color: var(--st-stepper-completed-desc-color);
+    }
+  }
+
+  &.st-state-error {
+    .st-step-indicator {
+      background-color: var(--st-stepper-error-indicator-bg);
+      border: 1px solid var(--st-stepper-error-indicator-border);
+      color: var(--st-stepper-error-indicator-color);
+    }
+
+    .st-step-title {
+      color: var(--st-stepper-error-title-color);
+    }
+
+    .st-step-description {
+      color: var(--st-stepper-error-desc-color);
+    }
+  }
+}

package/assets/styles/components/table.scss

@@ -62,7 +62,7 @@ st-card {
   }
 
   &:not(.outline) table.st-table {
-    --st-table-background-color-even-row: var(--st-bg-light);
+    --st-table-background-color-even-row: var(--st-color-bg-raised);
     --st-table-divider-color: var(--st-border-muted);
   }
 }

package/assets/styles/components/tabs.scss

@@ -37,7 +37,7 @@ st-tabs {
 
     &:focus-visible {
       outline: none;
-      background-color: var(--st-bg-light);
+      background-color: var(--st-color-bg-raised);
       border-radius: var(--st-border-radius-sm);
     }
 

package/assets/styles/components/toggle.scss

@@ -12,6 +12,7 @@ st-toggle {
 
   display: inline-flex;
   align-items: center;
+  min-height: var(--st-interactive-element-height-md);
   gap: var(--st-toggle-gap);
   cursor: pointer;
   user-select: none;

package/assets/styles/components/tooltip.scss

@@ -1,4 +1,7 @@
 .st-tooltip {
+  --st-tooltip-bg: var(--st-color-bg-inverse);
+  --st-tooltip-color: var(--st-color-text-inverse);
+
   /* Float on top of the UI */
   position: absolute;
 
@@ -8,8 +11,8 @@
   left: 0;
   visibility: hidden;
   border-radius: 8px;
-  background-color: var(--st-bg-contrast-dark);
-  color: var(--st-text-contrast);
+  background-color: var(--st-tooltip-bg);
+  color: var(--st-tooltip-color);
   box-shadow:
     0px 4px 16px 0px rgba(0, 0, 0, 0.1),
     0px 2px 4px 0px rgba(0, 0, 0, 0.05);
@@ -39,14 +42,14 @@
   &.st-tooltip-arrow-top-end {
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
-    border-top: 6px solid var(--st-bg-contrast-dark);
+    border-top: 6px solid var(--st-tooltip-bg, var(--st-color-bg-inverse));
   }
   &.st-tooltip-arrow-bottom,
   &.st-tooltip-arrow-bottom-start,
   &.st-tooltip-arrow-bottom-end {
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
-    border-bottom: 6px solid var(--st-bg-contrast-dark);
+    border-bottom: 6px solid var(--st-tooltip-bg, var(--st-color-bg-inverse));
     top: -6px;
   }
   &.st-tooltip-arrow-left,
@@ -54,7 +57,7 @@
   &.st-tooltip-arrow-left-end {
     border-top: 6px solid transparent;
     border-bottom: 6px solid transparent;
-    border-left: 6px solid var(--st-bg-contrast-dark);
+    border-left: 6px solid var(--st-tooltip-bg, var(--st-color-bg-inverse));
     right: -6px;
   }
   &.st-tooltip-arrow-right,
@@ -62,7 +65,7 @@
   &.st-tooltip-arrow-right-end {
     border-top: 6px solid transparent;
     border-bottom: 6px solid transparent;
-    border-right: 6px solid var(--st-bg-contrast-dark);
+    border-right: 6px solid var(--st-tooltip-bg, var(--st-color-bg-inverse));
     left: -6px;
   }
 }

package/assets/styles/public-api.scss

@@ -16,6 +16,7 @@
 @use "./components/alert";
 @use "./components/avatar";
 @use "./components/accordion";
+@use "./components/badge";
 @use "./components/button";
 @use "./components/card";
 @use "./components/checkbox";
@@ -42,4 +43,8 @@
 @use "./components/toggle";
 @use "./components/tooltip";
 @use "./components/breadcrumb";
-@use "./components/sidemenu";
+@use "./components/sidemenu";
+@use "./components/otp";
+@use "./components/stepper";
+@use "./components/file-upload";
+@use "./components/image-cropper";