ngx-strata 0.1.0 → 0.2.1

package/assets/styles/components/spinner.scss

@@ -1,8 +1,10 @@
 st-spinner {
   --st-spinner-size: var(--st-size-xl);
   --st-spinner-stroke-width: var(--st-size-xxxxs);
-  --st-spinner-main-color: var(--st-text-faded);
-  --st-spinner-accent-color: var(--st-text);
+  --st-spinner-main-color: var(--st-color-text-tertiary);
+
+  --st-spinner-accent-color: var(--st-color-text-primary);
+
   --st-spinner-inner-width: calc(var(--st-spinner-size) - (var(--st-spinner-stroke-width) * 4));
 
   display: flex;
@@ -25,24 +27,25 @@ st-spinner {
   }
 
   &.st-theme-brand {
-    --st-spinner-accent-color: var(--st-brand);
+    --st-spinner-accent-color: var(--st-color-accent-default);
   }
 
   &.st-theme-info {
-    --st-spinner-accent-color: var(--st-info);
+    --st-spinner-accent-color: var(--st-color-feedback-info-default);
   }
 
   &.st-theme-success {
-    --st-spinner-accent-color: var(--st-success);
+    --st-spinner-accent-color: var(--st-color-feedback-success-default);
   }
 
   &.st-theme-warning {
-    --st-spinner-accent-color: var(--st-warning);
+    --st-spinner-accent-color: var(--st-color-feedback-warning-default);
   }
 
   &.st-theme-danger {
-    --st-spinner-accent-color: var(--st-danger);
+    --st-spinner-accent-color: var(--st-color-feedback-error-default);
   }
+
   .st-spinner {
     width: var(--st-spinner-size);
     height: var(--st-spinner-size);

package/assets/styles/components/table.scss

@@ -1,6 +1,7 @@
 table.st-table {
   --st-table-background-color: var(transparent);
-  --st-table-background-color-even-row: var(--st-bg);
+  --st-table-background-color-even-row: var(--st-color-bg-raised);
+
   --st-table-divider-color: var(--st-border-faded);
 
   width: 100%;
@@ -14,7 +15,8 @@ table.st-table {
 
     th {
       font-weight: var(--st-font-weight-bold);
-      color: var(--st-text-muted);
+      color: var(--st-color-text-secondary);
+
       font-size: var(--st-font-sm);
       padding: var(--st-size-xxxs);
       padding-bottom: var(--st-size-xxs);

package/assets/styles/components/tabs.scss

@@ -0,0 +1,71 @@
+st-tabs {
+  display: block;
+  width: 100%;
+
+  .tabs-container {
+    display: flex;
+    position: relative;
+    border-bottom: 1px solid var(--st-border);
+    gap: var(--st-size-sm);
+    width: 100%;
+  }
+
+  st-tab-item {
+    padding: 12px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--st-color-text-tertiary);
+
+    cursor: pointer;
+    user-select: none;
+    transition: color 0.15s ease-in-out;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px; // Align with container border
+    outline: none;
+
+    &:focus,
+    &:active {
+      outline: none;
+    }
+
+    &:active:not(.disabled) {
+      background-image: linear-gradient(var(--st-border-muted), var(--st-border-muted));
+      background-size: 100% calc(100% - 2px);
+      background-repeat: no-repeat;
+      border-radius: var(--st-border-radius-sm);
+    }
+
+    &:focus-visible {
+      outline: none;
+      background-color: var(--st-bg-light);
+      border-radius: var(--st-border-radius-sm);
+    }
+
+    &:hover:not(.disabled):not(.active) {
+      color: var(--st-color-text-primary);
+
+    }
+
+    &.active {
+      color: var(--st-color-accent-default);
+
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  .selection-indicator {
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: var(--st-color-accent-default);
+
+    transition:
+      left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+      width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}

package/assets/styles/components/tag.scss

@@ -1,7 +1,9 @@
 st-tag {
-  --st-tag-border-color: var(--st-divider);
-  --st-tag-background-color: var(--st-bg-light);
-  --st-tag-text-color: var(--st-text);
+  --st-tag-border-color: var(--st-color-neutral-300);
+  --st-tag-background-color: var(--st-color-neutral-200);
+  --st-tag-text-color: var(--st-color-neutral-800);
+
+
   color: var(--st-tag-text-color);
   border: 1px solid var(--st-tag-border-color);
   border-radius: var(--st-border-radius-sm);
@@ -34,27 +36,29 @@ st-tag {
   }
 
   &.st-theme-brand {
-    --st-tag-background-color: var(--st-brand);
-    --st-tag-text-color: var(--st-text-contrast);
+    --st-tag-background-color: var(--st-color-accent-subtle);
+    --st-tag-text-color: var(--st-color-accent-text);
   }
 
   &.st-theme-info {
-    --st-tag-background-color: var(--st-info);
-    --st-tag-text-color: var(--st-text-contrast);
+    --st-tag-background-color: var(--st-color-feedback-info-subtle);
+    --st-tag-text-color: var(--st-color-feedback-info-text);
   }
 
   &.st-theme-success {
-    --st-tag-background-color: var(--st-success);
-    --st-tag-text-color: var(--st-text-contrast);
+    --st-tag-background-color: var(--st-color-feedback-success-subtle);
+    --st-tag-text-color: var(--st-color-feedback-success-text);
   }
 
   &.st-theme-danger {
-    --st-tag-background-color: var(--st-danger);
-    --st-tag-text-color: var(--st-text-contrast);
+    --st-tag-background-color: var(--st-color-feedback-error-subtle);
+    --st-tag-text-color: var(--st-color-feedback-error-text);
   }
 
   &.st-theme-warning {
-    --st-tag-background-color: var(--st-warning);
-    --st-tag-text-color: var(--st-text-contrast);
+    --st-tag-background-color: var(--st-color-feedback-warning-subtle);
+    --st-tag-text-color: var(--st-color-feedback-warning-text);
   }
+
+
 }

package/assets/styles/components/toggle.scss

@@ -1,64 +1,93 @@
 st-toggle {
-  --st-toggle-border-color: var(--st-divider);
-  --st-toggle-background-color: var(--st-bg-light);
-  --st-toggle-handle-background-color: var(--st-brand);
-  --st-toggle-handle-background-color-hover: var(--st-brand-dark);
-  --st-toggle-handle-size: 32px;
-  background-color: var(--st-toggle-background-color);
-  border: 1px solid var(--st-toggle-border-color);
-  height: var(--st-toggle-handle-size);
-  width: calc(var(--st-toggle-handle-size) * 1.5);
-  border-radius: var(--st-border-radius-sm);
+  // Internal component hooks
+  --st-toggle-height: var(--st-size-md);
+  --st-toggle-width: var(--st-space-10);
+  --st-toggle-padding: var(--st-size-xxxs);
+  --st-toggle-handle-size: var(--st-size-sm);
+  --st-toggle-gap: var(--st-size-xxs);
 
-  &.sm {
-    --st-toggle-handle-size: 28px;
+  --st-toggle-bg-unchecked: var(--st-color-input-default);
+  --st-toggle-bg-checked: var(--st-color-accent-default);
+  --st-toggle-handle-bg: var(--st-color-neutral-50);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-toggle-gap);
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+
+  &.st-toggle-label-before {
+    flex-direction: row-reverse;
   }
 
-  &.md {
-    --st-toggle-handle-size: 32px;
+  // Accessibility
+  &:focus-visible {
+    outline: none;
+    .st-toggle-track {
+      outline: 2px solid var(--st-color-accent-default);
+      outline-offset: 2px;
+    }
   }
 
-  &.lg {
-    --st-toggle-handle-size: 40px;
+  &:focus {
+    outline: none;
+  }
+
+  .st-toggle-track {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    height: var(--st-toggle-height);
+    width: var(--st-toggle-width);
+    padding: var(--st-toggle-padding);
+    background-color: var(--st-toggle-bg-unchecked);
+    border-radius: var(--st-size-xxxs); // 4px
+    transition: background-color 0.2s ease;
+  }
+
+  .st-toggle-label {
+    font-family: var(--st-font-family);
+    font-size: var(--st-font-size-md);
+    color: var(--st-color-text-primary);
   }
 
   .toggle-handle {
     display: block;
     height: var(--st-toggle-handle-size);
     width: var(--st-toggle-handle-size);
-    background-color: var(--st-toggle-handle-background-color);
-    margin-right: calc(var(--st-toggle-handle-size) / 4);
-    margin-left: calc(var(--st-toggle-handle-size) / 4);
-    border-radius: var(--st-border-radius-sm);
-    transition: all 0.1s linear;
+    background-color: var(--st-toggle-handle-bg);
+    border-radius: var(--st-size-xxxxs); // 2px
+    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }
 
-  &[data-checked='false'] {
-    .toggle-handle {
-      margin-right: var(--st-toggle-handle-size);
-      background-color: var(--st-bg);
-      margin-left: 0px;
+  &[data-checked='true'] {
+    .st-toggle-track {
+      background-color: var(--st-toggle-bg-checked);
     }
-  }
 
-  &[data-checked='true'] {
     .toggle-handle {
-      margin-left: calc(var(--st-toggle-handle-size) / 2);
-      margin-right: 0px;
-      background-color: var(--st-brand);
+      // Move by: Width (40) - Padding (4) - Handle (16) - Padding (4) = 16px
+      transform: translateX(calc(var(--st-toggle-width) - var(--st-toggle-handle-size) - (var(--st-toggle-padding) * 2)));
     }
   }
 
-  &:focus {
-    outline: 1px solid var(--st-brand);
-    outline-offset: 2px;
+  &[data-checked='false']:not([data-disabled='true']):hover {
+    .st-toggle-track {
+      background-color: var(--st-color-input-hover);
+    }
   }
 
-  &:not(:disabled):hover {
-    cursor: pointer;
-    background-color: var(--st-bg-dark);
-    .toggle-handle {
-      background-color: var(--st-brand-light);
+  &[data-checked='true']:not([data-disabled='true']):hover {
+    .st-toggle-track {
+      background-color: var(--st-color-accent-hover);
     }
   }
-}
+
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

package/assets/styles/focus-outline.scss

@@ -1,7 +1,8 @@
 :root {
   --st-focus-ring-width: 2px;
   --st-focus-ring-style: solid;
-  --st-focus-ring-color: var(--st-brand);
+  --st-focus-ring-color: var(--st-color-accent-default);
+
   --st-focus-ring-offset: 2px;
 }
 

package/assets/styles/primitives/color-primitives.scss

@@ -0,0 +1,88 @@
+:root {
+
+    /* --- Neutral --- */
+    --st-color-neutral-0: #ffffff;
+    --st-color-neutral-50: #FBF9F8;
+    --st-color-neutral-100: #F5F3F3;
+    --st-color-neutral-200: #dbd7d6;
+    --st-color-neutral-300: #bebcbb;
+    --st-color-neutral-400: #9c9896;
+    --st-color-neutral-500: #78716C;
+    --st-color-neutral-600: #5F5E5E;
+    --st-color-neutral-700: #484747;
+    --st-color-neutral-800: #343232;
+    --st-color-neutral-900: #212121;
+    --st-color-neutral-950: #151414;
+
+    /* --- Blue (brand/accent) --- */
+    --st-color-blue-50: #eff6ff;
+    --st-color-blue-100: #dbeafe;
+    --st-color-blue-200: #bfdbfe;
+    --st-color-blue-300: #93c5fd;
+    --st-color-blue-400: #60a5fa;
+    --st-color-blue-500: #3b82f6;
+    --st-color-blue-600: #2563eb;
+    --st-color-blue-700: #1d4ed8;
+    --st-color-blue-800: #1e40af;
+    --st-color-blue-900: #1e3a8a;
+
+    /* --- Red (error/danger) --- */
+    --st-color-red-50: #FFE1DF;
+    --st-color-red-100: #fabbb8;
+    --st-color-red-200: #ee9895;
+    --st-color-red-300: #de7f7d;
+    --st-color-red-400: #c76666;
+    --st-color-red-500: #A85657;
+    --st-color-red-600: #AC373A;
+    --st-color-red-700: #80171D;
+    --st-color-red-800: #5c0f13;
+    --st-color-red-900: #3a080b;
+
+    /* --- Green (success) --- */
+    --st-color-green-50: #EBF7EC;
+    --st-color-green-100: #c8e9ce;
+    --st-color-green-200: #9dd8ac;
+    --st-color-green-300: #6ec48c;
+    --st-color-green-400: #4eb779;
+    --st-color-green-500: #3C9365;
+    --st-color-green-600: #198f4c;
+    --st-color-green-700: #008234;
+    --st-color-green-800: #006b30;
+    --st-color-green-900: #005529;
+
+    /* --- Yellow (warning) --- */
+    --st-color-yellow-50: #fefce8;
+    --st-color-yellow-100: #fef9c3;
+    --st-color-yellow-200: #fef08a;
+    --st-color-yellow-300: #fde047;
+    --st-color-yellow-400: #facc15;
+    --st-color-yellow-500: #eab308;
+    --st-color-yellow-600: #ca8a04;
+    --st-color-yellow-700: #a16207;
+    --st-color-yellow-800: #854d0e;
+    --st-color-yellow-900: #713f12;
+
+    /* --- Orange --- */
+    --st-color-orange-50: #FFF8E4;
+    --st-color-orange-100: #ffe6b8;
+    --st-color-orange-200: #ffca8a;
+    --st-color-orange-300: #ffa85c;
+    --st-color-orange-400: #ff7b2e;
+    --st-color-orange-500: #FD4900;
+    --st-color-orange-600: #d53d01;
+    --st-color-orange-700: #b03103;
+    --st-color-orange-800: #882703;
+    --st-color-orange-900: #561801;
+
+    /* --- Teal (info) --- */
+    --st-color-teal-50: #f0fdfa;
+    --st-color-teal-100: #ccfbf1;
+    --st-color-teal-200: #99f6e4;
+    --st-color-teal-300: #5eead4;
+    --st-color-teal-400: #2dd4bf;
+    --st-color-teal-500: #14b8a6;
+    --st-color-teal-600: #0d9488;
+    --st-color-teal-700: #0f766e;
+    --st-color-teal-800: #115e59;
+    --st-color-teal-900: #134e4a;
+}

package/assets/styles/primitives/spacing-primitives.scss

@@ -0,0 +1,16 @@
+/*
+   --st-space-{step}
+   Steps follow a 4px base grid. Uses integers that map to the grid.
+*/
+
+:root {
+    --st-space-1: 4px;
+    --st-space-2: 8px;
+    --st-space-3: 12px;
+    --st-space-4: 16px;
+    --st-space-6: 24px;
+    --st-space-8: 32px;
+    --st-space-10: 40px;
+    --st-space-12: 48px;
+    --st-space-16: 64px;
+}

package/assets/styles/public-api.scss

@@ -1,36 +1,45 @@
-@use "base";
-@use "breakpoints";
-@use "colors";
-@use "focus-outline";
-@use "scrollbar";
-@use "shadows";
-@use "sizes";
-@use "typography";
+@use "./primitives/color-primitives";
+@use "./primitives/spacing-primitives";
+
+@use "./base";
+@use "./breakpoints";
+@use "./colors";
+@use "./focus-outline";
+@use "./scrollbar";
+@use "./shadows";
+@use "./sizes";
+@use "./typography";
+@use "./semantics/color-semantic";
 
 // Components
-@use "components/action-menu";
-@use "components/avatar";
-@use "components/accordion";
-@use "components/button";
-@use "components/card";
-@use "components/checkbox";
-@use "components/divider";
-@use "components/grid";
-@use "components/icon";
-@use "components/input-field";
-@use "components/item";
-@use "components/modal";
-@use "components/number-display";
-@use "components/notification";
-@use "components/overlay";
-@use "components/pagination";
-@use "components/progress";
-@use "components/segmented-control";
-@use "components/select";
-@use "components/slider";
-@use "components/spinner";
-@use "components/table";
-@use "components/tag";
-@use "components/text-stack";
-@use "components/toggle";
-@use "components/tooltip";
+@use "./components/action-menu";
+@use "./components/alert";
+@use "./components/avatar";
+@use "./components/accordion";
+@use "./components/button";
+@use "./components/card";
+@use "./components/checkbox";
+@use "./components/divider";
+@use "./components/grid";
+@use "./components/icon";
+@use "./components/input-field";
+@use "./components/item";
+@use "./components/modal";
+@use "./components/number-display";
+@use "./components/notification";
+@use "./components/overlay";
+@use "./components/pagination";
+@use "./components/progress";
+@use "./components/radio";
+@use "./components/segmented-control";
+@use "./components/select";
+@use "./components/slider";
+@use "./components/spinner";
+@use "./components/table";
+@use "./components/tag";
+@use "./components/tabs";
+@use "./components/text-stack";
+@use "./components/toggle";
+@use "./components/tooltip";
+@use "./components/breadcrumb";
+@use "./components/sidemenu";

package/assets/styles/semantics/color-semantic.scss

@@ -0,0 +1,121 @@
+:root {
+    /* --- Background --- */
+    --st-color-bg-default: var(--st-color-neutral-100);
+    --st-color-bg-subtle: var(--st-color-neutral-0);
+    --st-color-bg-raised: var(--st-color-neutral-0);
+    --st-color-bg-overlay: var(--st-color-neutral-0);
+    --st-color-bg-inverse: var(--st-color-neutral-900);
+    --st-color-bg-disabled: var(--st-color-neutral-100);
+
+    /* --- Text --- */
+    --st-color-text-primary: var(--st-color-neutral-900);
+    --st-color-text-secondary: var(--st-color-neutral-600);
+    --st-color-text-tertiary: var(--st-color-neutral-400);
+    --st-color-text-disabled: var(--st-color-neutral-300);
+    --st-color-text-inverse: var(--st-color-neutral-0);
+    --st-color-text-on-accent: var(--st-color-neutral-0);
+    --st-color-text-link: var(--st-color-blue-600);
+    --st-color-text-link-hover: var(--st-color-blue-700);
+
+    /* --- Accent (interactive / brand) --- */
+    --st-color-accent-default: var(--st-color-orange-600);
+    --st-color-accent-hover: var(--st-color-orange-700);
+    --st-color-accent-active: var(--st-color-orange-800);
+    --st-color-accent-subtle: var(--st-color-orange-50);
+    --st-color-accent-text: var(--st-color-orange-700);
+
+
+    /* --- Feedback: Error --- */
+    --st-color-feedback-error-default: var(--st-color-red-500);
+    --st-color-feedback-error-hover: var(--st-color-red-600);
+    --st-color-feedback-error-subtle: var(--st-color-red-50);
+    --st-color-feedback-error-border: var(--st-color-red-300);
+    --st-color-feedback-error-text: var(--st-color-red-700);
+
+    /* --- Feedback: Warning --- */
+    --st-color-feedback-warning-default: var(--st-color-yellow-400);
+    --st-color-feedback-warning-hover: var(--st-color-yellow-500);
+    --st-color-feedback-warning-subtle: var(--st-color-yellow-50);
+    --st-color-feedback-warning-border: var(--st-color-yellow-300);
+    --st-color-feedback-warning-text: var(--st-color-yellow-800);
+
+    /* --- Feedback: Success --- */
+    --st-color-feedback-success-default: var(--st-color-green-500);
+    --st-color-feedback-success-hover: var(--st-color-green-600);
+    --st-color-feedback-success-subtle: var(--st-color-green-100);
+    --st-color-feedback-success-border: var(--st-color-green-300);
+    --st-color-feedback-success-text: var(--st-color-green-700);
+
+    /* --- Feedback: Info --- */
+    --st-color-feedback-info-default: var(--st-color-blue-500);
+    --st-color-feedback-info-hover: var(--st-color-blue-600);
+    --st-color-feedback-info-subtle: var(--st-color-blue-100);
+    --st-color-feedback-info-border: var(--st-color-blue-300);
+    --st-color-feedback-info-text: var(--st-color-blue-800);
+
+
+    --st-color-input-default: var(--st-color-neutral-200);
+    --st-color-input-disabled: var(--st-color-neutral-100);
+    --st-color-input-hover: var(--st-color-neutral-300);
+}
+
+
+:root[data-theme="dark"] {
+    /* --- Background --- */
+    --st-color-bg-default: var(--st-color-neutral-950);
+    --st-color-bg-subtle: var(--st-color-neutral-900);
+    --st-color-bg-raised: var(--st-color-neutral-800);
+    --st-color-bg-overlay: var(--st-color-neutral-800);
+    --st-color-bg-inverse: var(--st-color-neutral-0);
+    --st-color-bg-disabled: var(--st-color-neutral-800);
+
+    /* --- Text --- */
+    --st-color-text-primary: var(--st-color-neutral-50);
+    --st-color-text-secondary: var(--st-color-neutral-400);
+    --st-color-text-tertiary: var(--st-color-neutral-600);
+    --st-color-text-disabled: var(--st-color-neutral-700);
+    --st-color-text-inverse: var(--st-color-neutral-900);
+    --st-color-text-on-accent: var(--st-color-neutral-0);
+    --st-color-text-link: var(--st-color-blue-400);
+    --st-color-text-link-hover: var(--st-color-blue-300);
+
+    /* --- Accent --- */
+    --st-color-accent-default: var(--st-color-orange-500);
+    --st-color-accent-hover: var(--st-color-orange-400);
+    --st-color-accent-active: var(--st-color-orange-300);
+    --st-color-accent-subtle: var(--st-color-orange-900);
+    --st-color-accent-text: var(--st-color-orange-400);
+
+    /* --- Feedback: Error --- */
+    --st-color-feedback-error-default: var(--st-color-red-400);
+    --st-color-feedback-error-hover: var(--st-color-red-300);
+    --st-color-feedback-error-subtle: var(--st-color-red-800);
+    --st-color-feedback-error-border: var(--st-color-red-700);
+    --st-color-feedback-error-text: var(--st-color-red-200);
+
+
+    /* --- Feedback: Warning --- */
+    --st-color-feedback-warning-default: var(--st-color-yellow-400);
+    --st-color-feedback-warning-hover: var(--st-color-yellow-300);
+    --st-color-feedback-warning-subtle: var(--st-color-yellow-900);
+    --st-color-feedback-warning-border: var(--st-color-yellow-700);
+    --st-color-feedback-warning-text: var(--st-color-yellow-300);
+
+    /* --- Feedback: Success --- */
+    --st-color-feedback-success-default: var(--st-color-green-400);
+    --st-color-feedback-success-hover: var(--st-color-green-300);
+    --st-color-feedback-success-subtle: var(--st-color-green-900);
+    --st-color-feedback-success-border: var(--st-color-green-700);
+    --st-color-feedback-success-text: var(--st-color-green-300);
+
+    /* --- Feedback: Info --- */
+    --st-color-feedback-info-default: var(--st-color-blue-400);
+    --st-color-feedback-info-hover: var(--st-color-blue-300);
+    --st-color-feedback-info-subtle: var(--st-color-blue-900);
+    --st-color-feedback-info-border: var(--st-color-blue-700);
+    --st-color-feedback-info-text: var(--st-color-blue-300);
+
+    --st-color-input-default: var(--st-color-neutral-800);
+    --st-color-input-disabled: var(--st-color-neutral-900);
+    --st-color-input-hover: var(--st-color-neutral-700);
+}