@aquera/nile-elements 2.0.4 → 2.0.6

package/demo/nxtgen-dark.css

@@ -256,18 +256,18 @@
   --ng-color-blue-800: #1849A9FF;
   --ng-color-blue-900: #194185FF;
   --ng-color-blue-950: #102A56FF;
-  --ng-color-bluedark-25: #F5F8FFFF;
-  --ng-color-bluedark-50: #EFF4FFFF;
-  --ng-color-bluedark-100: #D1E0FFFF;
-  --ng-color-bluedark-200: #B2CCFFFF;
-  --ng-color-bluedark-300: #84ADFFFF;
-  --ng-color-bluedark-400: #528BFFFF;
-  --ng-color-bluedark-500: #2970FFFF;
-  --ng-color-bluedark-600: #155EEFFF;
-  --ng-color-bluedark-700: #004EEBFF;
-  --ng-color-bluedark-800: #0040C1FF;
-  --ng-color-bluedark-900: #00359EFF;
-  --ng-color-bluedark-950: #002266FF;
+  --ng-color-bluedark-25: #F5F8FEFF;
+  --ng-color-bluedark-50: #F0F4FDFF;
+  --ng-color-bluedark-100: #D3E1FAFF;
+  --ng-color-bluedark-200: #B4CEF7FF;
+  --ng-color-bluedark-300: #88B0F3FF;
+  --ng-color-bluedark-400: #5690EEFF;
+  --ng-color-bluedark-500: #2D79EBFF;
+  --ng-color-bluedark-600: #1868DBFF;
+  --ng-color-bluedark-700: #005BD4FF;
+  --ng-color-bluedark-800: #004AAEFF;
+  --ng-color-bluedark-900: #003D90FF;
+  --ng-color-bluedark-950: #01275DFF;
   --ng-color-indigo-25: #F5F8FFFF;
   --ng-color-indigo-50: #EEF4FFFF;
   --ng-color-indigo-100: #E0EAFFFF;
@@ -740,6 +740,61 @@
   --ng-colors-bg-success-primary: var(--ng-color-success-50);
   --ng-colors-bg-success-secondary: var(--ng-color-success-100);
   --ng-colors-bg-success-solid: var(--ng-color-success-600);
+  /* Hue semantics — light mode */
+  --ng-colors-bg-teal-primary: var(--ng-color-teal-50);
+  --ng-colors-bg-teal-secondary: var(--ng-color-teal-100);
+  --ng-colors-bg-teal-solid: var(--ng-color-teal-600);
+  --ng-colors-bg-teal-solid-hover: var(--ng-color-teal-700);
+  --ng-colors-border-teal: var(--ng-color-teal-500);
+  --ng-colors-border-teal-subtle: var(--ng-color-teal-300);
+  --ng-colors-fg-teal-primary: var(--ng-color-teal-600);
+  --ng-colors-fg-teal-secondary: var(--ng-color-teal-500);
+  --ng-colors-fg-teal-on-solid: var(--ng-color-base-white);
+  --ng-colors-bg-cyan-primary: var(--ng-color-cyan-50);
+  --ng-colors-bg-cyan-secondary: var(--ng-color-cyan-100);
+  --ng-colors-bg-cyan-solid: var(--ng-color-cyan-600);
+  --ng-colors-bg-cyan-solid-hover: var(--ng-color-cyan-700);
+  --ng-colors-border-cyan: var(--ng-color-cyan-500);
+  --ng-colors-border-cyan-subtle: var(--ng-color-cyan-300);
+  --ng-colors-fg-cyan-primary: var(--ng-color-cyan-600);
+  --ng-colors-fg-cyan-secondary: var(--ng-color-cyan-500);
+  --ng-colors-fg-cyan-on-solid: var(--ng-color-base-white);
+  --ng-colors-bg-rose-primary: var(--ng-color-rose-50);
+  --ng-colors-bg-rose-secondary: var(--ng-color-rose-100);
+  --ng-colors-bg-rose-solid: var(--ng-color-rose-600);
+  --ng-colors-bg-rose-solid-hover: var(--ng-color-rose-700);
+  --ng-colors-border-rose: var(--ng-color-rose-500);
+  --ng-colors-border-rose-subtle: var(--ng-color-rose-300);
+  --ng-colors-fg-rose-primary: var(--ng-color-rose-600);
+  --ng-colors-fg-rose-secondary: var(--ng-color-rose-500);
+  --ng-colors-fg-rose-on-solid: var(--ng-color-base-white);
+  --ng-colors-bg-violet-primary: var(--ng-color-violet-50);
+  --ng-colors-bg-violet-secondary: var(--ng-color-violet-100);
+  --ng-colors-bg-violet-solid: var(--ng-color-violet-600);
+  --ng-colors-bg-violet-solid-hover: var(--ng-color-violet-700);
+  --ng-colors-border-violet: var(--ng-color-violet-500);
+  --ng-colors-border-violet-subtle: var(--ng-color-violet-300);
+  --ng-colors-fg-violet-primary: var(--ng-color-violet-600);
+  --ng-colors-fg-violet-secondary: var(--ng-color-violet-500);
+  --ng-colors-fg-violet-on-solid: var(--ng-color-base-white);
+  --ng-colors-bg-moss-primary: var(--ng-color-moss-50);
+  --ng-colors-bg-moss-secondary: var(--ng-color-moss-100);
+  --ng-colors-bg-moss-solid: var(--ng-color-moss-600);
+  --ng-colors-bg-moss-solid-hover: var(--ng-color-moss-700);
+  --ng-colors-border-moss: var(--ng-color-moss-500);
+  --ng-colors-border-moss-subtle: var(--ng-color-moss-300);
+  --ng-colors-fg-moss-primary: var(--ng-color-moss-600);
+  --ng-colors-fg-moss-secondary: var(--ng-color-moss-500);
+  --ng-colors-fg-moss-on-solid: var(--ng-color-base-white);
+  --ng-colors-bg-greenlight-primary: var(--ng-color-greenlight-50);
+  --ng-colors-bg-greenlight-secondary: var(--ng-color-greenlight-100);
+  --ng-colors-bg-greenlight-solid: var(--ng-color-greenlight-600);
+  --ng-colors-bg-greenlight-solid-hover: var(--ng-color-greenlight-700);
+  --ng-colors-border-greenlight: var(--ng-color-greenlight-500);
+  --ng-colors-border-greenlight-subtle: var(--ng-color-greenlight-300);
+  --ng-colors-fg-greenlight-primary: var(--ng-color-greenlight-600);
+  --ng-colors-fg-greenlight-secondary: var(--ng-color-greenlight-500);
+  --ng-colors-fg-greenlight-on-solid: var(--ng-color-base-white);
   --ng-componentcolors-utility-yellow-50: var(--ng-color-yellow-50);
   --ng-componentcolors-utility-yellow-100: var(--ng-color-yellow-100);
   --ng-componentcolors-utility-yellow-200: var(--ng-color-yellow-200);
@@ -823,7 +878,7 @@
     --ng-colors-text-tertiary-on-brand: var(--ng-color-bluedark-300);
     --ng-colors-text-quaternary-500: var(--ng-color-graydarkmode-400);
     --ng-colors-text-quaternary-on-brand: var(--ng-color-bluedark-400);
-    --ng-colors-text-disabled: var(--ng-color-graydarkmode-500);
+    --ng-colors-text-disabled: var(--ng-color-graydarkmode-600);
     --ng-colors-text-placeholder: var(--ng-color-graydarkmode-400);
     --ng-colors-text-placeholder-subtle: var(--ng-color-graydarkmode-600);
     --ng-colors-text-brand-primary-900: var(--ng-color-bluedark-200);
@@ -835,10 +890,10 @@
     --ng-colors-text-error-primary-hover: var(--ng-color-error-300);
     --ng-colors-text-warning-primary-600: var(--ng-color-warning-400);
     --ng-colors-text-success-primary-600: var(--ng-color-success-400);
-    --ng-colors-border-primary: var(--ng-color-graydarkmode-700);
-    --ng-colors-border-secondary: var(--ng-color-graydarkmode-800);
-    --ng-colors-border-secondary-alt: #FFFFFF14;
-    --ng-colors-border-tertiary: var(--ng-color-graydarkmode-800);
+    --ng-colors-border-primary: var(--ng-color-graydarkmode-600);
+    --ng-colors-border-secondary: var(--ng-color-graydarkmode-700);
+    --ng-colors-border-secondary-alt: var(--ng-color-graydarkmode-800);
+    --ng-colors-border-tertiary: var(--ng-color-graydarkmode-800); 
     --ng-colors-border-neutral: var(--ng-color-graydarkmode-600);
     --ng-colors-border-disabled: var(--ng-color-graydarkmode-700);
     --ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-800);
@@ -1016,7 +1071,7 @@
     --ng-colors-fg-warning-secondary: var(--ng-color-warning-400);
     --ng-colors-fg-success-primary: var(--ng-color-success-400);
     --ng-colors-fg-success-secondary: var(--ng-color-success-400);
-    --ng-colors-bg-primary: var(--ng-color-graydarkmode-950);
+    --ng-colors-bg-primary: var(--ng-color-graydarkmode-800); 
     --ng-colors-effects-focus-ring: var(--ng-color-bluedark-400);
     --ng-colors-effects-focus-ring-error: var(--ng-color-error-400);
     --ng-colors-effects-shadow-xs: #0000004D;
@@ -1040,20 +1095,20 @@
     --ng-colors-effects-shadow-3xl-02: #00000033;
     --ng-colors-effects-shadow-skeumorphic-inner: #0000004D;
     --ng-colors-effects-shadow-skeumorphic-inner-border: var(--ng-colors-border-primary);
-    --ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-950);
+    --ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-800); 
     --ng-colors-bg-primary-hover: var(--ng-color-graydarkmode-900);
     --ng-colors-bg-primary-solid: var(--ng-color-graydarkmode-100);
     --ng-colors-bg-secondary: var(--ng-color-graydarkmode-900);
     --ng-colors-bg-secondary-alt: var(--ng-color-graydarkmode-900);
     --ng-colors-bg-secondary-hover: var(--ng-color-graydarkmode-800);
-    --ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-950);
+    --ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-800); 
     --ng-colors-bg-secondary-solid: var(--ng-color-graydarkmode-400);
-    --ng-colors-bg-tertiary: var(--ng-color-graydarkmode-800);
+    --ng-colors-bg-tertiary: var(--ng-color-graydarkmode-950); 
     --ng-colors-bg-quaternary: var(--ng-color-graydarkmode-700);
     --ng-colors-bg-quaternary-alt: var(--ng-color-graydarkmode-600);
     --ng-colors-bg-active: var(--ng-color-graydarkmode-900);
-    --ng-colors-bg-disabled: var(--ng-color-graydarkmode-800);
-    --ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-900);
+    --ng-colors-bg-disabled: var(--ng-color-graydarkmode-950); 
+    --ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-800);
     --ng-colors-bg-overlay: var(--ng-color-base-black);
     --ng-colors-bg-brand-primary: var(--ng-color-bluedark-950);
     --ng-colors-bg-brand-primary-alt: var(--ng-color-bluedark-950);
@@ -1072,6 +1127,61 @@
     --ng-colors-bg-success-primary: var(--ng-color-success-950);
     --ng-colors-bg-success-secondary: var(--ng-color-success-900);
     --ng-colors-bg-success-solid: var(--ng-color-success-500);
+    /* Hue semantics — dark mode */
+    --ng-colors-bg-teal-primary: var(--ng-color-teal-950);
+    --ng-colors-bg-teal-secondary: var(--ng-color-teal-900);
+    --ng-colors-bg-teal-solid: var(--ng-color-teal-500);
+    --ng-colors-bg-teal-solid-hover: var(--ng-color-teal-400);
+    --ng-colors-border-teal: var(--ng-color-teal-400);
+    --ng-colors-border-teal-subtle: var(--ng-color-teal-600);
+    --ng-colors-fg-teal-primary: var(--ng-color-teal-500);
+    --ng-colors-fg-teal-secondary: var(--ng-color-teal-400);
+    --ng-colors-fg-teal-on-solid: var(--ng-color-graylightmode-950);
+    --ng-colors-bg-cyan-primary: var(--ng-color-cyan-950);
+    --ng-colors-bg-cyan-secondary: var(--ng-color-cyan-900);
+    --ng-colors-bg-cyan-solid: var(--ng-color-cyan-500);
+    --ng-colors-bg-cyan-solid-hover: var(--ng-color-cyan-400);
+    --ng-colors-border-cyan: var(--ng-color-cyan-400);
+    --ng-colors-border-cyan-subtle: var(--ng-color-cyan-600);
+    --ng-colors-fg-cyan-primary: var(--ng-color-cyan-500);
+    --ng-colors-fg-cyan-secondary: var(--ng-color-cyan-400);
+    --ng-colors-fg-cyan-on-solid: var(--ng-color-graylightmode-950);
+    --ng-colors-bg-rose-primary: var(--ng-color-rose-950);
+    --ng-colors-bg-rose-secondary: var(--ng-color-rose-900);
+    --ng-colors-bg-rose-solid: var(--ng-color-rose-500);
+    --ng-colors-bg-rose-solid-hover: var(--ng-color-rose-400);
+    --ng-colors-border-rose: var(--ng-color-rose-400);
+    --ng-colors-border-rose-subtle: var(--ng-color-rose-600);
+    --ng-colors-fg-rose-primary: var(--ng-color-rose-500);
+    --ng-colors-fg-rose-secondary: var(--ng-color-rose-400);
+    --ng-colors-fg-rose-on-solid: var(--ng-color-graylightmode-950);
+    --ng-colors-bg-violet-primary: var(--ng-color-violet-950);
+    --ng-colors-bg-violet-secondary: var(--ng-color-violet-900);
+    --ng-colors-bg-violet-solid: var(--ng-color-violet-500);
+    --ng-colors-bg-violet-solid-hover: var(--ng-color-violet-400);
+    --ng-colors-border-violet: var(--ng-color-violet-400);
+    --ng-colors-border-violet-subtle: var(--ng-color-violet-600);
+    --ng-colors-fg-violet-primary: var(--ng-color-violet-500);
+    --ng-colors-fg-violet-secondary: var(--ng-color-violet-400);
+    --ng-colors-fg-violet-on-solid: var(--ng-color-graylightmode-950);
+    --ng-colors-bg-moss-primary: var(--ng-color-moss-950);
+    --ng-colors-bg-moss-secondary: var(--ng-color-moss-900);
+    --ng-colors-bg-moss-solid: var(--ng-color-moss-500);
+    --ng-colors-bg-moss-solid-hover: var(--ng-color-moss-400);
+    --ng-colors-border-moss: var(--ng-color-moss-400);
+    --ng-colors-border-moss-subtle: var(--ng-color-moss-600);
+    --ng-colors-fg-moss-primary: var(--ng-color-moss-500);
+    --ng-colors-fg-moss-secondary: var(--ng-color-moss-400);
+    --ng-colors-fg-moss-on-solid: var(--ng-color-graylightmode-950);
+    --ng-colors-bg-greenlight-primary: var(--ng-color-greenlight-950);
+    --ng-colors-bg-greenlight-secondary: var(--ng-color-greenlight-900);
+    --ng-colors-bg-greenlight-solid: var(--ng-color-greenlight-500);
+    --ng-colors-bg-greenlight-solid-hover: var(--ng-color-greenlight-400);
+    --ng-colors-border-greenlight: var(--ng-color-greenlight-400);
+    --ng-colors-border-greenlight-subtle: var(--ng-color-greenlight-600);
+    --ng-colors-fg-greenlight-primary: var(--ng-color-greenlight-500);
+    --ng-colors-fg-greenlight-secondary: var(--ng-color-greenlight-400);
+    --ng-colors-fg-greenlight-on-solid: var(--ng-color-graylightmode-950);
     --ng-componentcolors-utility-yellow-50: var(--ng-color-yellow-950);
     --ng-componentcolors-utility-yellow-100: var(--ng-color-yellow-900);
     --ng-componentcolors-utility-yellow-200: var(--ng-color-yellow-800);
@@ -1429,6 +1539,61 @@
   --ng-colors-bg-success-primary: var(--ng-color-success-50);
   --ng-colors-bg-success-secondary: var(--ng-color-success-100);
   --ng-colors-bg-success-solid: var(--ng-color-success-600);
+  /* Hue semantics — light mode */
+  --ng-colors-bg-teal-primary: var(--ng-color-teal-50);
+  --ng-colors-bg-teal-secondary: var(--ng-color-teal-100);
+  --ng-colors-bg-teal-solid: var(--ng-color-teal-600);
+  --ng-colors-bg-teal-solid-hover: var(--ng-color-teal-700);
+  --ng-colors-border-teal: var(--ng-color-teal-500);
+  --ng-colors-border-teal-subtle: var(--ng-color-teal-300);
+  --ng-colors-fg-teal-primary: var(--ng-color-teal-600);
+  --ng-colors-fg-teal-secondary: var(--ng-color-teal-500);
+  --ng-colors-fg-teal-on-solid: var(--ng-color-base-white);
+  --ng-colors-bg-cyan-primary: var(--ng-color-cyan-50);
+  --ng-colors-bg-cyan-secondary: var(--ng-color-cyan-100);
+  --ng-colors-bg-cyan-solid: var(--ng-color-cyan-600);
+  --ng-colors-bg-cyan-solid-hover: var(--ng-color-cyan-700);
+  --ng-colors-border-cyan: var(--ng-color-cyan-500);
+  --ng-colors-border-cyan-subtle: var(--ng-color-cyan-300);
+  --ng-colors-fg-cyan-primary: var(--ng-color-cyan-600);
+  --ng-colors-fg-cyan-secondary: var(--ng-color-cyan-500);
+  --ng-colors-fg-cyan-on-solid: var(--ng-color-base-white);
+  --ng-colors-bg-rose-primary: var(--ng-color-rose-50);
+  --ng-colors-bg-rose-secondary: var(--ng-color-rose-100);
+  --ng-colors-bg-rose-solid: var(--ng-color-rose-600);
+  --ng-colors-bg-rose-solid-hover: var(--ng-color-rose-700);
+  --ng-colors-border-rose: var(--ng-color-rose-500);
+  --ng-colors-border-rose-subtle: var(--ng-color-rose-300);
+  --ng-colors-fg-rose-primary: var(--ng-color-rose-600);
+  --ng-colors-fg-rose-secondary: var(--ng-color-rose-500);
+  --ng-colors-fg-rose-on-solid: var(--ng-color-base-white);
+  --ng-colors-bg-violet-primary: var(--ng-color-violet-50);
+  --ng-colors-bg-violet-secondary: var(--ng-color-violet-100);
+  --ng-colors-bg-violet-solid: var(--ng-color-violet-600);
+  --ng-colors-bg-violet-solid-hover: var(--ng-color-violet-700);
+  --ng-colors-border-violet: var(--ng-color-violet-500);
+  --ng-colors-border-violet-subtle: var(--ng-color-violet-300);
+  --ng-colors-fg-violet-primary: var(--ng-color-violet-600);
+  --ng-colors-fg-violet-secondary: var(--ng-color-violet-500);
+  --ng-colors-fg-violet-on-solid: var(--ng-color-base-white);
+  --ng-colors-bg-moss-primary: var(--ng-color-moss-50);
+  --ng-colors-bg-moss-secondary: var(--ng-color-moss-100);
+  --ng-colors-bg-moss-solid: var(--ng-color-moss-600);
+  --ng-colors-bg-moss-solid-hover: var(--ng-color-moss-700);
+  --ng-colors-border-moss: var(--ng-color-moss-500);
+  --ng-colors-border-moss-subtle: var(--ng-color-moss-300);
+  --ng-colors-fg-moss-primary: var(--ng-color-moss-600);
+  --ng-colors-fg-moss-secondary: var(--ng-color-moss-500);
+  --ng-colors-fg-moss-on-solid: var(--ng-color-base-white);
+  --ng-colors-bg-greenlight-primary: var(--ng-color-greenlight-50);
+  --ng-colors-bg-greenlight-secondary: var(--ng-color-greenlight-100);
+  --ng-colors-bg-greenlight-solid: var(--ng-color-greenlight-600);
+  --ng-colors-bg-greenlight-solid-hover: var(--ng-color-greenlight-700);
+  --ng-colors-border-greenlight: var(--ng-color-greenlight-500);
+  --ng-colors-border-greenlight-subtle: var(--ng-color-greenlight-300);
+  --ng-colors-fg-greenlight-primary: var(--ng-color-greenlight-600);
+  --ng-colors-fg-greenlight-secondary: var(--ng-color-greenlight-500);
+  --ng-colors-fg-greenlight-on-solid: var(--ng-color-base-white);
   --ng-componentcolors-utility-yellow-50: var(--ng-color-yellow-50);
   --ng-componentcolors-utility-yellow-100: var(--ng-color-yellow-100);
   --ng-componentcolors-utility-yellow-200: var(--ng-color-yellow-200);
@@ -1512,7 +1677,7 @@
   --ng-colors-text-tertiary-on-brand: var(--ng-color-bluedark-300);
   --ng-colors-text-quaternary-500: var(--ng-color-graydarkmode-400);
   --ng-colors-text-quaternary-on-brand: var(--ng-color-bluedark-400);
-  --ng-colors-text-disabled: var(--ng-color-graydarkmode-500);
+  --ng-colors-text-disabled: var(--ng-color-graydarkmode-600);
   --ng-colors-text-placeholder: var(--ng-color-graydarkmode-400);
   --ng-colors-text-placeholder-subtle: var(--ng-color-graydarkmode-600);
   --ng-colors-text-brand-primary-900: var(--ng-color-bluedark-200);
@@ -1524,10 +1689,10 @@
   --ng-colors-text-error-primary-hover: var(--ng-color-error-300);
   --ng-colors-text-warning-primary-600: var(--ng-color-warning-400);
   --ng-colors-text-success-primary-600: var(--ng-color-success-400);
-  --ng-colors-border-primary: var(--ng-color-graydarkmode-700);
-  --ng-colors-border-secondary: var(--ng-color-graydarkmode-800);
-  --ng-colors-border-secondary-alt: #FFFFFF14;
-  --ng-colors-border-tertiary: var(--ng-color-graydarkmode-800);
+  --ng-colors-border-primary: var(--ng-color-graydarkmode-600);
+  --ng-colors-border-secondary: var(--ng-color-graydarkmode-700);
+  --ng-colors-border-secondary-alt: var(--ng-color-graydarkmode-800);
+  --ng-colors-border-tertiary: var(--ng-color-graydarkmode-800); 
   --ng-colors-border-neutral: var(--ng-color-graydarkmode-600);
   --ng-colors-border-disabled: var(--ng-color-graydarkmode-700);
   --ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-800);
@@ -1705,7 +1870,7 @@
   --ng-colors-fg-warning-secondary: var(--ng-color-warning-400);
   --ng-colors-fg-success-primary: var(--ng-color-success-400);
   --ng-colors-fg-success-secondary: var(--ng-color-success-400);
-  --ng-colors-bg-primary: var(--ng-color-graydarkmode-950);
+  --ng-colors-bg-primary: var(--ng-color-graydarkmode-800);
   --ng-colors-effects-focus-ring: var(--ng-color-bluedark-400);
   --ng-colors-effects-focus-ring-error: var(--ng-color-error-400);
   --ng-colors-effects-shadow-xs: #0000004D;
@@ -1729,20 +1894,20 @@
   --ng-colors-effects-shadow-3xl-02: #00000033;
   --ng-colors-effects-shadow-skeumorphic-inner: #0000004D;
   --ng-colors-effects-shadow-skeumorphic-inner-border: var(--ng-colors-border-primary);
-  --ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-950);
+  --ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-800); 
   --ng-colors-bg-primary-hover: var(--ng-color-graydarkmode-900);
   --ng-colors-bg-primary-solid: var(--ng-color-graydarkmode-100);
   --ng-colors-bg-secondary: var(--ng-color-graydarkmode-900);
   --ng-colors-bg-secondary-alt: var(--ng-color-graydarkmode-900);
   --ng-colors-bg-secondary-hover: var(--ng-color-graydarkmode-800);
-  --ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-950);
+  --ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-800); 
   --ng-colors-bg-secondary-solid: var(--ng-color-graydarkmode-400);
-  --ng-colors-bg-tertiary: var(--ng-color-graydarkmode-800);
+  --ng-colors-bg-tertiary: var(--ng-color-graydarkmode-950); 
   --ng-colors-bg-quaternary: var(--ng-color-graydarkmode-700);
   --ng-colors-bg-quaternary-alt: var(--ng-color-graydarkmode-600);
   --ng-colors-bg-active: var(--ng-color-graydarkmode-900);
-  --ng-colors-bg-disabled: var(--ng-color-graydarkmode-800);
-  --ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-900);
+  --ng-colors-bg-disabled: var(--ng-color-graydarkmode-950); 
+  --ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-800);
   --ng-colors-bg-overlay: var(--ng-color-base-black);
   --ng-colors-bg-brand-primary: var(--ng-color-bluedark-950);
   --ng-colors-bg-brand-primary-alt: var(--ng-color-bluedark-950);
@@ -1761,6 +1926,61 @@
   --ng-colors-bg-success-primary: var(--ng-color-success-950);
   --ng-colors-bg-success-secondary: var(--ng-color-success-900);
   --ng-colors-bg-success-solid: var(--ng-color-success-500);
+  /* Hue semantics — dark mode */
+  --ng-colors-bg-teal-primary: var(--ng-color-teal-950);
+  --ng-colors-bg-teal-secondary: var(--ng-color-teal-900);
+  --ng-colors-bg-teal-solid: var(--ng-color-teal-500);
+  --ng-colors-bg-teal-solid-hover: var(--ng-color-teal-400);
+  --ng-colors-border-teal: var(--ng-color-teal-400);
+  --ng-colors-border-teal-subtle: var(--ng-color-teal-600);
+  --ng-colors-fg-teal-primary: var(--ng-color-teal-500);
+  --ng-colors-fg-teal-secondary: var(--ng-color-teal-400);
+  --ng-colors-fg-teal-on-solid: var(--ng-color-graylightmode-950);
+  --ng-colors-bg-cyan-primary: var(--ng-color-cyan-950);
+  --ng-colors-bg-cyan-secondary: var(--ng-color-cyan-900);
+  --ng-colors-bg-cyan-solid: var(--ng-color-cyan-500);
+  --ng-colors-bg-cyan-solid-hover: var(--ng-color-cyan-400);
+  --ng-colors-border-cyan: var(--ng-color-cyan-400);
+  --ng-colors-border-cyan-subtle: var(--ng-color-cyan-600);
+  --ng-colors-fg-cyan-primary: var(--ng-color-cyan-500);
+  --ng-colors-fg-cyan-secondary: var(--ng-color-cyan-400);
+  --ng-colors-fg-cyan-on-solid: var(--ng-color-graylightmode-950);
+  --ng-colors-bg-rose-primary: var(--ng-color-rose-950);
+  --ng-colors-bg-rose-secondary: var(--ng-color-rose-900);
+  --ng-colors-bg-rose-solid: var(--ng-color-rose-500);
+  --ng-colors-bg-rose-solid-hover: var(--ng-color-rose-400);
+  --ng-colors-border-rose: var(--ng-color-rose-400);
+  --ng-colors-border-rose-subtle: var(--ng-color-rose-600);
+  --ng-colors-fg-rose-primary: var(--ng-color-rose-500);
+  --ng-colors-fg-rose-secondary: var(--ng-color-rose-400);
+  --ng-colors-fg-rose-on-solid: var(--ng-color-graylightmode-950);
+  --ng-colors-bg-violet-primary: var(--ng-color-violet-950);
+  --ng-colors-bg-violet-secondary: var(--ng-color-violet-900);
+  --ng-colors-bg-violet-solid: var(--ng-color-violet-500);
+  --ng-colors-bg-violet-solid-hover: var(--ng-color-violet-400);
+  --ng-colors-border-violet: var(--ng-color-violet-400);
+  --ng-colors-border-violet-subtle: var(--ng-color-violet-600);
+  --ng-colors-fg-violet-primary: var(--ng-color-violet-500);
+  --ng-colors-fg-violet-secondary: var(--ng-color-violet-400);
+  --ng-colors-fg-violet-on-solid: var(--ng-color-graylightmode-950);
+  --ng-colors-bg-moss-primary: var(--ng-color-moss-950);
+  --ng-colors-bg-moss-secondary: var(--ng-color-moss-900);
+  --ng-colors-bg-moss-solid: var(--ng-color-moss-500);
+  --ng-colors-bg-moss-solid-hover: var(--ng-color-moss-400);
+  --ng-colors-border-moss: var(--ng-color-moss-400);
+  --ng-colors-border-moss-subtle: var(--ng-color-moss-600);
+  --ng-colors-fg-moss-primary: var(--ng-color-moss-500);
+  --ng-colors-fg-moss-secondary: var(--ng-color-moss-400);
+  --ng-colors-fg-moss-on-solid: var(--ng-color-graylightmode-950);
+  --ng-colors-bg-greenlight-primary: var(--ng-color-greenlight-950);
+  --ng-colors-bg-greenlight-secondary: var(--ng-color-greenlight-900);
+  --ng-colors-bg-greenlight-solid: var(--ng-color-greenlight-500);
+  --ng-colors-bg-greenlight-solid-hover: var(--ng-color-greenlight-400);
+  --ng-colors-border-greenlight: var(--ng-color-greenlight-400);
+  --ng-colors-border-greenlight-subtle: var(--ng-color-greenlight-600);
+  --ng-colors-fg-greenlight-primary: var(--ng-color-greenlight-500);
+  --ng-colors-fg-greenlight-secondary: var(--ng-color-greenlight-400);
+  --ng-colors-fg-greenlight-on-solid: var(--ng-color-graylightmode-950);
   --ng-componentcolors-utility-yellow-50: var(--ng-color-yellow-950);
   --ng-componentcolors-utility-yellow-100: var(--ng-color-yellow-900);
   --ng-componentcolors-utility-yellow-200: var(--ng-color-yellow-800);
@@ -2262,4 +2482,3 @@
     --ng-svg-method-fill: fill;
 }
 
- 

package/demo/nxtgen-properties.css

@@ -1,3 +1,6 @@
+/* @nile-version 1.3.2 */
+:root { --nile-version: "1.3.2"; }
+
 /**
  * Do not edit directly
  * Generated by build-nxtgen-properties.mjs
@@ -2446,88 +2449,88 @@
   initial-value: #102A56FF;
 }
 
-/* --ng-color-bluedark-100: #D1E0FFFF */
+/* --ng-color-bluedark-100: #D3E1FAFF */
 @property --ng-color-bluedark-100 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #D1E0FFFF;
+  initial-value: #D3E1FAFF;
 }
 
-/* --ng-color-bluedark-200: #B2CCFFFF */
+/* --ng-color-bluedark-200: #B4CEF7FF */
 @property --ng-color-bluedark-200 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #B2CCFFFF;
+  initial-value: #B4CEF7FF;
 }
 
-/* --ng-color-bluedark-25: #F5F8FFFF */
+/* --ng-color-bluedark-25: #F5F8FEFF */
 @property --ng-color-bluedark-25 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #F5F8FFFF;
+  initial-value: #F5F8FEFF;
 }
 
-/* --ng-color-bluedark-300: #84ADFFFF */
+/* --ng-color-bluedark-300: #88B0F3FF */
 @property --ng-color-bluedark-300 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #84ADFFFF;
+  initial-value: #88B0F3FF;
 }
 
-/* --ng-color-bluedark-400: #528BFFFF */
+/* --ng-color-bluedark-400: #5690EEFF */
 @property --ng-color-bluedark-400 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #528BFFFF;
+  initial-value: #5690EEFF;
 }
 
-/* --ng-color-bluedark-50: #EFF4FFFF */
+/* --ng-color-bluedark-50: #F0F4FDFF */
 @property --ng-color-bluedark-50 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #EFF4FFFF;
+  initial-value: #F0F4FDFF;
 }
 
-/* --ng-color-bluedark-500: #2970FFFF */
+/* --ng-color-bluedark-500: #2D79EBFF */
 @property --ng-color-bluedark-500 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #2970FFFF;
+  initial-value: #2D79EBFF;
 }
 
-/* --ng-color-bluedark-600: #155EEFFF */
+/* --ng-color-bluedark-600: #1868DBFF */
 @property --ng-color-bluedark-600 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #155EEFFF;
+  initial-value: #1868DBFF;
 }
 
-/* --ng-color-bluedark-700: #004EEBFF */
+/* --ng-color-bluedark-700: #005BD4FF */
 @property --ng-color-bluedark-700 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #004EEBFF;
+  initial-value: #005BD4FF;
 }
 
-/* --ng-color-bluedark-800: #0040C1FF */
+/* --ng-color-bluedark-800: #004AAEFF */
 @property --ng-color-bluedark-800 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #0040C1FF;
+  initial-value: #004AAEFF;
 }
 
-/* --ng-color-bluedark-900: #00359EFF */
+/* --ng-color-bluedark-900: #003D90FF */
 @property --ng-color-bluedark-900 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #00359EFF;
+  initial-value: #003D90FF;
 }
 
-/* --ng-color-bluedark-950: #002266FF */
+/* --ng-color-bluedark-950: #01275DFF */
 @property --ng-color-bluedark-950 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #002266FF;
+  initial-value: #01275DFF;
 }
 
 /* --ng-color-bluelight-100: #E0F2FEFF */