ngx-strata 0.1.0 → 0.2.1

package/assets/styles/base.scss

@@ -9,9 +9,11 @@
 }
 
 html {
-  color: var(--st-text);
-  background-color: var(--st-bg-dark);
-  --st-current-bg-color: var(--st-bg-dark);
+  color: var(--st-color-text-primary);
+
+  background-color: var(--st-color-bg-default);
+  --st-current-bg-color: var(--st-color-bg-default);
+
 }
 
 :root {
@@ -23,4 +25,6 @@ html {
   --st-interactive-element-height-sm: 26px;
   --st-interactive-element-height-md: 34px;
   --st-interactive-element-height-lg: 40px;
+
+  --st-selection-control-size: 20px;
 }

package/assets/styles/colors.scss

@@ -1,13 +1,9 @@
 :root {
-  --st-bg-dark: oklch(0.92 0.005 267);
-  --st-bg: oklch(0.96 0.005 267);
   --st-bg-light: oklch(1 0.005 267);
   --st-bg-contrast-dark: oklch(0.1 0.005 267);
   --st-bg-contrast: oklch(0.15 0.005 267);
   --st-bg-contrast-light: oklch(0.3 0.005 267);
-  --st-text: oklch(0.15 0.01 267);
-  --st-text-muted: oklch(0.4 0.01 267);
-  --st-text-faded: oklch(0.6 0.01 267);
+
   --st-text-faded-contrast: oklch(0.56 0.01 267);
   --st-text-contrast: oklch(0.96 0.01 267);
   --st-highlight: oklch(1 0.01 267);
@@ -28,15 +24,11 @@
 }
 
 [data-theme='dark'] {
-  --st-bg-dark: oklch(0.1 0.005 267);
-  --st-bg: oklch(0.2 0.005 267);
   --st-bg-light: oklch(0.3 0.005 267);
   --st-bg-contrast-dark: oklch(0.92 0.005 267);
   --st-bg-contrast: oklch(0.96 0.005 267);
   --st-bg-contrast-light: oklch(1 0.005 267);
-  --st-text: oklch(0.96 0.01 267);
-  --st-text-muted: oklch(0.76 0.01 267);
-  --st-text-faded: oklch(0.56 0.01 267);
+
   --st-text-faded-contrast: oklch(0.6 0.01 267);
   --st-text-contrast: oklch(0.15 0.01 267);
   --st-highlight: oklch(0.5 0.01 267);
@@ -54,4 +46,4 @@
   --st-success: oklch(0.7 0.05 160);
   --st-info-darl: oklch(0.6 0.05 260);
   --st-info: oklch(0.7 0.05 260);
-}
+}

package/assets/styles/components/_breadcrumb.scss

@@ -0,0 +1,68 @@
+.st-breadcrumb {
+  --st-breadcrumb-gap: var(--st-spacing-xs, 4px);
+  --st-breadcrumb-color: var(--st-color-text-secondary);
+  --st-breadcrumb-color-active: var(--st-color-text-primary);
+  --st-breadcrumb-separator-color: var(--st-color-text-tertiary);
+  --st-breadcrumb-font-size: var(--st-font-size-sm, 14px);
+
+  display: block;
+  font-size: var(--st-breadcrumb-font-size);
+
+  .st-breadcrumb-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.st-breadcrumb-item {
+  display: flex;
+  align-items: center;
+  color: var(--st-breadcrumb-color);
+
+  .st-breadcrumb-item-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .st-breadcrumb-item-content {
+    display: flex;
+    align-items: center;
+    gap: var(--st-breadcrumb-gap);
+    border-radius: var(--st-border-radius-sm, 4px);
+    outline-offset: 2px;
+
+    &:focus-visible {
+      outline: 2px solid var(--st-color-accent-default);
+    }
+
+    &.interactable {
+      cursor: pointer;
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: var(--st-breadcrumb-color-active);
+      }
+
+      &:active {
+        opacity: 0.8;
+      }
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  .st-breadcrumb-separator {
+    color: var(--st-breadcrumb-separator-color);
+    display: flex;
+    align-items: center;
+    margin: 0 var(--st-breadcrumb-gap);
+  }
+}

package/assets/styles/components/accordion.scss

@@ -4,10 +4,12 @@ st-accordion-item {
   width: 100%;
   border: 1px solid var(--st-border);
   border-radius: var(--st-border-radius-sm);
-  background-color: var(--st-bg);
+  background-color: var(--st-color-bg-raised);
+
   transition: 0.1s ease-in height;
   &[open='true'] {
-    background-color: var(--st-bg-dark);
+    background-color: var(--st-color-bg-default);
+
     height: auto;
     svg {
       transform: rotateZ(180deg);

package/assets/styles/components/action-menu.scss

@@ -16,6 +16,11 @@ st-action-menu-item {
     cursor: pointer;
   }
 
+  &.active {
+    color: var(--st-color-accent-active);
+    background-color: var(--st-color-bg-raised);
+  }
+
   .item-start,
   .item-end {
     width: min-content;
@@ -45,6 +50,7 @@ st-action-menu-item {
 }
 
 st-item .item-default {
+
   h1,
   h2,
   h3,
@@ -57,10 +63,15 @@ st-item .item-default {
   }
 }
 
-st-card {
-  width: 200px;
+st-card.action-menu-card {
+  min-width: 200px;
+  z-index: 10000;
+  background-color: var(--st-color-bg-overlay) !important;
+  box-shadow: var(--st-shadow-2);
+  display: block;
+  pointer-events: auto;
 
   st-action-menu-item:not(:last-child) {
     border-bottom: 1px solid var(--st-border-faded);
   }
-}
+}

package/assets/styles/components/alert.scss

@@ -0,0 +1,112 @@
+st-alert {
+  --st-alert-bg: var(--st-color-neutral-200);
+  --st-alert-text: var(--st-color-neutral-900);
+  --st-alert-icon-color: var(--st-color-neutral-500);
+
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+
+  .st-alert-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: var(--st-size-sm) var(--st-size-md);
+    background-color: var(--st-alert-bg);
+    border-radius: var(--st-border-radius-md, 8px);
+    gap: var(--st-size-sm);
+    position: relative;
+  }
+
+  .st-alert-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--st-alert-icon-color);
+    padding-top: 2px; // Minor alignment adjustment
+
+    st-icon {
+      --st-icon-size: 20px;
+    }
+  }
+
+  .st-alert-content {
+    flex: 1;
+    min-width: 0;
+    color: var(--st-alert-text);
+    align-self: center;
+
+    .st-alert-header {
+      font-weight: var(--st-font-weight-bold, 700);
+      margin-bottom: var(--st-size-2xs, 2px);
+    }
+
+    .st-alert-message {
+      font-size: var(--st-font-md, 14px);
+    }
+  }
+
+  .st-alert-actions {
+    display: flex;
+    gap: var(--st-size-xs);
+    align-self: center;
+    flex-shrink: 0;
+  }
+
+  .st-alert-dismiss {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    color: var(--st-alert-icon-color);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    align-self: flex-start;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.08);
+    }
+
+    st-icon {
+      --st-icon-size: 16px;
+    }
+  }
+
+  // Themes
+  &.st-theme-brand {
+    --st-alert-bg: var(--st-color-accent-subtle);
+    --st-alert-text: var(--st-color-accent-text);
+    --st-alert-icon-color: var(--st-color-accent-default);
+  }
+
+
+  &.st-theme-info {
+    --st-alert-bg: var(--st-color-feedback-info-subtle);
+    --st-alert-text: var(--st-color-feedback-info-text);
+    --st-alert-icon-color: var(--st-color-feedback-info-default);
+  }
+
+  &.st-theme-success {
+    --st-alert-bg: var(--st-color-feedback-success-subtle);
+    --st-alert-text: var(--st-color-feedback-success-text);
+    --st-alert-icon-color: var(--st-color-feedback-success-default);
+  }
+
+  &.st-theme-warning {
+    --st-alert-bg: var(--st-color-feedback-warning-subtle);
+    --st-alert-text: var(--st-color-feedback-warning-text);
+    --st-alert-icon-color: var(--st-color-feedback-warning-default);
+  }
+
+  &.st-theme-danger {
+    --st-alert-bg: var(--st-color-feedback-error-subtle);
+    --st-alert-text: var(--st-color-feedback-error-text);
+    --st-alert-icon-color: var(--st-color-feedback-error-default);
+  }
+}

package/assets/styles/components/avatar.scss

@@ -1,8 +1,10 @@
 st-avatar {
   --st-avatar-bg-color: var(--st-bg-light);
-  --st-avatar-text-color: var(--st-text);
+  --st-avatar-text-color: var(--st-color-text-primary);
+
   z-index: var(--z, 0);
-  transition: z-index 0s; /* avoids flicker */
+  transition: z-index 0s;
+  /* avoids flicker */
   background-color: var(--st-avatar-bg-color);
   border-radius: var(--avatar-size);
   overflow: hidden;
@@ -21,6 +23,7 @@ st-avatar {
     font-weight: bold;
     user-select: none;
   }
+
   img {
     width: 100%;
     height: 100%;
@@ -28,56 +31,65 @@ st-avatar {
 }
 
 st-avatar.st-theme-success {
-  --st-avatar-bg-color: var(--st-success);
-  --st-avatar-text-color: var(--st-text-contrast);
+  --st-avatar-bg-color: var(--st-color-feedback-success-subtle);
+  --st-avatar-text-color: var(--st-color-feedback-success-text);
 }
 
 st-avatar.st-theme-info {
-  --st-avatar-bg-color: var(--st-info);
-  --st-avatar-text-color: var(--st-text-contrast);
+  --st-avatar-bg-color: var(--st-color-feedback-info-subtle);
+  --st-avatar-text-color: var(--st-color-feedback-info-text);
 }
 
 st-avatar.st-theme-warning {
-  --st-avatar-bg-color: var(--st-warning);
-  --st-avatar-text-color: var(--st-text-contrast);
+  --st-avatar-bg-color: var(--st-color-feedback-warning-subtle);
+  --st-avatar-text-color: var(--st-color-feedback-warning-text);
 }
 
 st-avatar.st-theme-danger {
-  --st-avatar-bg-color: var(--st-danger);
-  --st-avatar-text-color: var(--st-text-contrast);
+  --st-avatar-bg-color: var(--st-color-feedback-error-subtle);
+  --st-avatar-text-color: var(--st-color-feedback-error-text);
 }
 
 st-avatar.st-theme-brand {
-  --st-avatar-bg-color: var(--st-brand);
-  --st-avatar-text-color: var(--st-text-contrast);
+  --st-avatar-bg-color: var(--st-color-accent-subtle);
+  --st-avatar-text-color: var(--st-color-accent-text);
 }
 
-st-avatar-stack.xs > st-avatar {
+st-avatar-stack.xs>st-avatar {
   --avatar-size: 20px;
+
   span {
     font-size: 0.6rem !important;
   }
 }
+
 st-avatar.xs {
   --avatar-size: 20px;
+
   span {
     font-size: 0.6rem;
   }
 }
-st-avatar-stack.sm > st-avatar {
+
+st-avatar-stack.sm>st-avatar {
   --avatar-size: 32px;
+
   span {
     font-size: 0.8rem !important;
   }
 }
+
 st-avatar.sm {
   --avatar-size: 32px;
+
   span {
     font-size: 0.8rem;
   }
 }
-st-avatar-stack.md > st-avatar {
+
+st-avatar-stack.md>st-avatar {
   --avatar-size: 48px;
+
   span {
     font-size: 1rem !important;
   }
@@ -85,19 +97,23 @@ st-avatar-stack.md > st-avatar {
 
 st-avatar.md {
   --avatar-size: 48px;
+
   span {
     font-size: 1rem;
   }
 }
 
-st-avatar-stack.lg > st-avatar {
+st-avatar-stack.lg>st-avatar {
   --avatar-size: 72px;
+
   span {
     font-size: 1.6rem !important;
   }
 }
+
 st-avatar.lg {
   --avatar-size: 72px;
+
   span {
     font-size: 1.6rem;
   }
@@ -105,28 +121,30 @@ st-avatar.lg {
 
 st-avatar-stack {
   position: relative;
-  isolation: isolate; /* ← critical */
+  isolation: isolate;
+  /* ← critical */
   display: flex;
   align-items: center;
 
-  &.tight > st-avatar:not(:first-child) {
+  &.tight>st-avatar:not(:first-child) {
     margin-left: calc(var(--avatar-size) * -0.65);
   }
 
-  &.mid > st-avatar:not(:first-child) {
+  &.mid>st-avatar:not(:first-child) {
     margin-left: calc(var(--avatar-size) * -0.55);
   }
 
-  &.loose > st-avatar:not(:first-child) {
+  &.loose>st-avatar:not(:first-child) {
     margin-left: calc(var(--avatar-size) * -0.3);
   }
 }
 
-st-avatar-stack > st-avatar {
+st-avatar-stack>st-avatar {
   position: relative;
   border: var(--st-current-bg-color) solid 3px;
   margin: 0px;
+
   &:hover {
     z-index: calc(var(--z, 0) + 100);
   }
-}
+}

package/assets/styles/components/button.scss

@@ -28,8 +28,10 @@ st-button-group {
 
 button[stButton] {
   --st-button-background-color: var(--st-bg-light);
-  --st-button-text-color: var(--st-text);
-  --st-button-hover-color: var(--st-bg);
+  --st-button-text-color: var(--st-color-text-primary);
+
+  --st-button-hover-color: var(--st-color-bg-raised);
+
   color: var(--st-button-text-color);
   background: none;
   display: inline-flex;
@@ -105,20 +107,23 @@ button[stButton] {
 
   &.st-button-secondary {
     --st-button-background-color: var(--st-bg-light);
-    --st-button-text-color: var(--st-text);
+    --st-button-text-color: var(--st-color-text-primary);
+
     font-weight: 500;
   }
 
   &.st-button-outline {
     --st-button-background-color: transparent;
-    --st-button-text-color: var(--st-text);
+    --st-button-text-color: var(--st-color-text-primary);
+
     border: 1px solid var(--st-border-muted);
   }
 
   &.st-button-ghost {
     --st-button-background-color: transparent;
     --st-button-hover-color: var(--st-bg-light);
-    --st-button-text-color: var(--st-text);
+    --st-button-text-color: var(--st-color-text-primary);
+
   }
 
   &:not(:disabled):hover {
@@ -142,33 +147,35 @@ button[stButton] {
 
   &.st-button-primary {
     &.st-theme-brand {
-      --st-button-background-color: var(--st-brand);
-      --st-button-text-color: var(--st-text-contrast);
-      --st-button-hover-color: var(--st-brand-dark);
+      --st-button-background-color: var(--st-color-accent-subtle);
+      --st-button-text-color: var(--st-color-accent-text);
+      --st-button-hover-color: var(--st-color-accent-hover);
     }
 
     &.st-theme-success {
-      --st-button-background-color: var(--st-success);
-      --st-button-text-color: var(--st-text-contrast);
-      --st-button-hover-color: var(--st-success-dark);
+      --st-button-background-color: var(--st-color-feedback-success-subtle);
+      --st-button-text-color: var(--st-color-feedback-success-text);
+      --st-button-hover-color: var(--st-color-feedback-success-hover);
     }
 
     &.st-theme-danger {
-      --st-button-background-color: var(--st-danger);
-      --st-button-text-color: var(--st-text-contrast);
-      --st-button-hover-color: var(--st-danger-dark);
+      --st-button-background-color: var(--st-color-feedback-error-subtle);
+      --st-button-text-color: var(--st-color-feedback-error-text);
+      --st-button-hover-color: var(--st-color-feedback-error-hover);
     }
 
     &.st-theme-warning {
-      --st-button-background-color: var(--st-warning);
-      --st-button-text-color: var(--st-text-contrast);
-      --st-button-hover-color: var(--st-warning-dark);
+      --st-button-background-color: var(--st-color-feedback-warning-subtle);
+      --st-button-text-color: var(--st-color-feedback-warning-text);
+      --st-button-hover-color: var(--st-color-feedback-warning-hover);
     }
 
     &.st-theme-info {
-      --st-button-background-color: var(--st-info);
-      --st-button-text-color: var(--st-text-contrast);
-      --st-button-hover-color: var(--st-info-dark);
+      --st-button-background-color: var(--st-color-feedback-info-subtle);
+      --st-button-text-color: var(--st-color-feedback-info-text);
+      --st-button-hover-color: var(--st-color-feedback-info-hover);
     }
+
+
   }
 }

package/assets/styles/components/card.scss

@@ -1,6 +1,7 @@
 st-card {
   --st-card-padding: var(--st-size-xs);
-  --st-card-background-color: var(--st-bg);
+  --st-card-background-color: var(--st-color-bg-subtle);
+
   width: 100%;
   display: inline-block;
   border-radius: var(--st-border-radius-sm);
@@ -9,34 +10,39 @@ st-card {
   background-color: var(--st-card-background-color);
 
   &.elevated {
-    --st-current-bg-color: var(--st-bg-dark);
-    --st-avatar-bg-color: var(--st-bg-dark);
+    --st-current-bg-color: var(--st-color-bg-default);
+    --st-avatar-bg-color: var(--st-color-bg-default);
     box-shadow: var(--st-shadow-1);
   }
 
+
   &.outline {
     border: 1px solid var(--st-border-muted);
     --st-card-background-color: transparent;
   }
 
   &.st-theme-brand {
-    --st-card-background-color: var(--st-brand-dark);
+    --st-card-background-color: var(--st-color-accent-subtle);
   }
+
   &.st-theme-info {
-    --st-card-background-color: var(--st-info-dark);
+    --st-card-background-color: var(--st-color-feedback-info-subtle);
   }
+
   &.st-theme-danger {
-    --st-card-background-color: var(--st-danger-dark);
+    --st-card-background-color: var(--st-color-feedback-error-subtle);
   }
+
   &.st-theme-warning {
-    --st-card-background-color: var(--st-warning-dark);
+    --st-card-background-color: var(--st-color-feedback-warning-subtle);
   }
+
   &.st-theme-success {
-    --st-card-background-color: var(--st-success-dark);
+    --st-card-background-color: var(--st-color-feedback-success-subtle);
   }
 }
 
-st-card .card-content > st-divider {
+st-card .card-content>st-divider {
   margin-left: calc(-1 * var(--st-card-padding));
   margin-right: calc(-1 * var(--st-card-padding));
 }
@@ -46,11 +52,13 @@ st-card.with-padding .card-content {
 }
 
 st-card.flat {
-  background-color: var(--st-bg);
-  --st-current-bg-color: var(--st-bg-dark);
-  --st-avatar-bg-color: var(--st-bg-dark);
+  background-color: var(--st-color-bg-raised);
+
+  --st-current-bg-color: var(--st-color-bg-default);
+  --st-avatar-bg-color: var(--st-color-bg-default);
 }
 
+
 st-card.outline {
   border: 1px solid var(--st-border);
 }
@@ -79,4 +87,4 @@ st-card h4,
 st-card h5,
 st-card h6 {
   margin-block-start: 0rem;
-}
+}

package/assets/styles/components/checkbox.scss

@@ -1,7 +1,8 @@
 st-checkbox {
-  --st-checkbox-checked-bg-color: var(--st-brand);
-  --st-checkbox-checked-bg-hover-color: var(--st-brand-light);
-  --st-checkbox-checked-icon-color: var(--st-text-contrast);
+  --st-checkbox-checked-bg-color: var(--st-color-accent-default);
+  --st-checkbox-checked-bg-hover-color: var(--st-color-accent-hover);
+  --st-checkbox-checked-icon-color: var(--st-color-text-on-accent);
+
 
   user-select: none;
   display: flex;
@@ -31,17 +32,18 @@ st-checkbox {
   }
 
   input:focus + .checkbox-visual {
-    outline: 1px solid var(--st-brand);
+    outline: 1px solid var(--st-color-accent-default);
+
     outline-offset: 2px;
   }
 
   .checkbox-visual {
     box-sizing: border-box;
-    height: var(--st-interactive-element-height-sm);
-    width: var(--st-interactive-element-height-sm);
-    max-width: var(--st-interactive-element-height-sm);
-    max-height: var(--st-interactive-element-height-sm);
-    background-color: var(--st-bg-dark);
+    height: var(--st-selection-control-size);
+    width: var(--st-selection-control-size);
+    max-width: var(--st-selection-control-size);
+    max-height: var(--st-selection-control-size);
+    background-color: var(--st-color-bg-default);
     border: 1px solid var(--st-border);
     border-radius: var(--st-border-radius-sm);
     color: var(--st-checkbox-checked-icon-color);

package/assets/styles/components/icon.scss

@@ -32,5 +32,10 @@ st-icon {
     display: flex;
     width: inherit;
     height: inherit;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
   }
 }

package/assets/styles/components/input-field.scss

@@ -1,7 +1,9 @@
 st-input-field {
   --st-input-field-bg-color: var(--st-bg-light);
-  --st-input-field-bg-hover-color: var(--st-bg);
-  --st-input-field-text-color: var(--st-text);
+  --st-input-field-bg-hover-color: var(--st-color-bg-raised);
+
+  --st-input-field-text-color: var(--st-color-text-primary);
+
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -31,7 +33,8 @@ st-input-field {
     justify-items: center;
     align-items: center;
     padding: 8px;
-    color: var(--st-text-faded);
+    color: var(--st-color-text-tertiary);
+
     &:empty {
       display: none;
     }