ngx-strata 0.1.0 → 0.2.0

package/assets/styles/components/toggle.scss

@@ -1,64 +1,66 @@
 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);
 
-  &.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;
+  position: relative;
+  box-sizing: border-box;
 
-  &.md {
-    --st-toggle-handle-size: 32px;
+  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
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  // Accessibility
+  &:focus-visible {
+    outline: 2px solid var(--st-color-accent-default);
+    outline-offset: 2px;
   }
 
-  &.lg {
-    --st-toggle-handle-size: 40px;
+  &:focus {
+    outline: none;
   }
 
   .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'] {
+  &[data-checked='true'] {
+    background-color: var(--st-toggle-bg-checked);
+
     .toggle-handle {
-      margin-right: var(--st-toggle-handle-size);
-      background-color: var(--st-bg);
-      margin-left: 0px;
+      // 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)));
     }
   }
 
-  &[data-checked='true'] {
-    .toggle-handle {
-      margin-left: calc(var(--st-toggle-handle-size) / 2);
-      margin-right: 0px;
-      background-color: var(--st-brand);
-    }
+  &[data-checked='false']:not([data-disabled='true']):hover {
+    background-color: var(--st-color-input-hover);
   }
 
-  &:focus {
-    outline: 1px solid var(--st-brand);
-    outline-offset: 2px;
+  &[data-checked='true']:not([data-disabled='true']):hover {
+    background-color: var(--st-color-accent-hover);
   }
 
-  &:not(:disabled):hover {
-    cursor: pointer;
-    background-color: var(--st-bg-dark);
-    .toggle-handle {
-      background-color: var(--st-brand-light);
-    }
+  &[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,44 @@
-@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/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);
+}

package/assets/styles/typography.scss

@@ -9,58 +9,148 @@
   --st-font-xxxxl: 60px;
   --st-font-xxxxxl: 72px;
 
-  --st-font-weight-thin: 300;
-  --st-font-weight-normal: 500;
-  --st-font-weight-bold: 700;
-  --st-font-weight-heavy: 900;
+  --st-font-weight-light: 300;
+  --st-font-weight-regular: 400;
+  --st-font-weight-medium: 500;
+  --st-font-weight-semibold: 600;
+  --st-font-weight-bold: 800;
+
+  --st-font-mono: ui-monospace, monospace;
 }
 
-h1 {
-  font-size: var(--st-font-xxxl);
-  font-weight: var(--st-font-weight-heavy);
-  letter-spacing: 0.05rem;
+a {
+  color: var(--st-color-text-secondary);
+
+  width: 100%;
 }
 
-h2 {
-  font-size: var(--st-font-xxl);
+.st-label {
+  font-size: 0.75rem;
+  font-weight: var(--st-font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--st-color-text-tertiary);
+
 }
 
-h3 {
-  font-size: var(--st-font-xl);
+/* --- Typography utility classes --- */
+
+.st-headline-xl {
+  font-size: 4.5rem;
+  font-weight: var(--st-font-weight-bold);
+  line-height: 1.1;
 }
 
-h4 {
-  font-size: var(--st-font-lg);
+.st-headline-l {
+  font-size: 3rem;
+  font-weight: var(--st-font-weight-bold);
+  line-height: 1.15;
 }
 
-h5 {
-  font-size: var(--st-font-md);
+.st-headline-m {
+  font-size: 2rem;
+  font-weight: var(--st-font-weight-semibold);
+  line-height: 1.2;
 }
 
-h6 {
-  font-size: var(--st-font-sm);
+.st-headline-s {
+  font-size: 1.5rem;
+  font-weight: var(--st-font-weight-semibold);
+  line-height: 1.25;
 }
 
-a {
-  color: var(--st-text-muted);
-  width: 100%;
+.st-body-l {
+  font-size: 1.125rem;
+  font-weight: var(--st-font-weight-regular);
+  line-height: 1.5;
+}
+
+.st-body-l-bold {
+  font-size: 1.125rem;
+  font-weight: var(--st-font-weight-bold);
+  line-height: 1.5;
+}
+
+.st-body,
+p,
+ol,
+ul,
+li {
+  font-size: 1rem;
+  font-weight: var(--st-font-weight-regular);
+  line-height: 1.5;
+}
+
+.st-body-bold {
+  font-size: 1rem;
+  font-weight: var(--st-font-weight-bold);
+  line-height: 1.5;
 }
 
-p {
-  font-size: var(--st-font-md);
-  line-height: 1.4rem;
+.st-body-s {
+  font-size: 0.875rem;
+  font-weight: var(--st-font-weight-regular);
+  line-height: 1.5;
+  color: var(--st-color-text-secondary);
+
+}
+
+.st-body-xs {
+  font-size: 0.75rem;
+  font-weight: var(--st-font-weight-regular);
+  line-height: 1.5;
+  color: var(--st-color-text-secondary);
+
 }
 
-label {
-  font-weight: var(--st-font-weight-thin);
-  font-size: var(--st-font-sm);
-  margin-left: var(--st-size-xxs);
-  margin-right: var(--st-size-xxs);
-  margin-block-start: var(--st-size-xxs);
-  margin-block-end: var(--st-size-xxs);
+.st-mono {
+  font-family: var(--st-font-mono);
+  font-size: 1rem;
+  font-weight: var(--st-font-weight-regular);
+  line-height: 1.5;
 }
 
-[subtitle] {
-  font-size: var(--st-font-sm);
-  color: var(--st-text-muted);
+.st-mono-s {
+  font-family: var(--st-font-mono);
+  font-size: 0.875rem;
+  font-weight: var(--st-font-weight-regular);
+  line-height: 1.5;
+}
+
+/* --- Responsive headline scaling --- */
+
+@media (max-width: 768px) {
+  .st-headline-xl {
+    font-size: 3rem;
+  }
+
+  .st-headline-l {
+    font-size: 2.25rem;
+  }
+
+  .st-headline-m {
+    font-size: 1.75rem;
+  }
+
+  .st-headline-s {
+    font-size: 1.25rem;
+  }
 }
+
+@media (max-width: 480px) {
+  .st-headline-xl {
+    font-size: 2.5rem;
+  }
+
+  .st-headline-l {
+    font-size: 1.75rem;
+  }
+
+  .st-headline-m {
+    font-size: 1.5rem;
+  }
+
+  .st-headline-s {
+    font-size: 1.125rem;
+  }
+}