@aquera/nile-elements 2.0.3 → 2.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/README.md +21 -0
  2. package/demo/nxtgen-classes.css +596 -2
  3. package/demo/nxtgen-dark.css +240 -21
  4. package/demo/nxtgen-properties.css +2 -2
  5. package/demo/nxtgen-utilities.css +598 -4
  6. package/demo/nxtgen.css +57 -2
  7. package/dist/index.cjs.js +1 -1
  8. package/dist/index.esm.js +1 -1
  9. package/dist/index.js +458 -317
  10. package/dist/nile-combobox/nile-combobox.cjs.js +1 -1
  11. package/dist/nile-combobox/nile-combobox.cjs.js.map +1 -1
  12. package/dist/nile-combobox/nile-combobox.css.cjs.js +1 -1
  13. package/dist/nile-combobox/nile-combobox.css.cjs.js.map +1 -1
  14. package/dist/nile-combobox/nile-combobox.css.esm.js +28 -15
  15. package/dist/nile-combobox/nile-combobox.esm.js +11 -8
  16. package/dist/nile-combobox/portal-manager.cjs.js +1 -1
  17. package/dist/nile-combobox/portal-manager.cjs.js.map +1 -1
  18. package/dist/nile-combobox/portal-manager.esm.js +1 -1
  19. package/dist/nile-combobox/renderer.cjs.js +1 -1
  20. package/dist/nile-combobox/renderer.cjs.js.map +1 -1
  21. package/dist/nile-combobox/renderer.esm.js +31 -43
  22. package/dist/nile-empty-state/nile-empty-state.cjs.js +1 -1
  23. package/dist/nile-empty-state/nile-empty-state.cjs.js.map +1 -1
  24. package/dist/nile-empty-state/nile-empty-state.css.cjs.js +1 -1
  25. package/dist/nile-empty-state/nile-empty-state.css.cjs.js.map +1 -1
  26. package/dist/nile-empty-state/nile-empty-state.css.esm.js +129 -6
  27. package/dist/nile-empty-state/nile-empty-state.esm.js +45 -31
  28. package/dist/nile-pagination/nile-pagination.cjs.js +1 -1
  29. package/dist/nile-pagination/nile-pagination.cjs.js.map +1 -1
  30. package/dist/nile-pagination/nile-pagination.esm.js +25 -25
  31. package/dist/nile-wysiwyg-editor/engine/create-state.cjs.js +1 -1
  32. package/dist/nile-wysiwyg-editor/engine/create-state.esm.js +1 -1
  33. package/dist/nile-wysiwyg-editor/engine/index.cjs.js +1 -1
  34. package/dist/nile-wysiwyg-editor/engine/index.esm.js +1 -1
  35. package/dist/nile-wysiwyg-editor/engine/plugins/code-highlight.cjs.js +1 -1
  36. package/dist/nile-wysiwyg-editor/engine/plugins/code-highlight.cjs.js.map +1 -1
  37. package/dist/nile-wysiwyg-editor/engine/plugins/code-highlight.esm.js +1 -1
  38. package/dist/nile-wysiwyg-editor/index.cjs.js +1 -1
  39. package/dist/nile-wysiwyg-editor/index.esm.js +1 -1
  40. package/dist/nile-wysiwyg-editor/nile-wysiwyg-editor.cjs.js +1 -1
  41. package/dist/nile-wysiwyg-editor/nile-wysiwyg-editor.esm.js +1 -1
  42. package/dist/nile-wysiwyg-editor/ui/code-block-menu.cjs.js +1 -1
  43. package/dist/nile-wysiwyg-editor/ui/code-block-menu.esm.js +1 -1
  44. package/dist/nile-wysiwyg-editor/ui/source-view.cjs.js +1 -1
  45. package/dist/nile-wysiwyg-editor/ui/source-view.esm.js +1 -1
  46. package/dist/src/nile-combobox/nile-combobox.css.js +28 -15
  47. package/dist/src/nile-combobox/nile-combobox.css.js.map +1 -1
  48. package/dist/src/nile-combobox/nile-combobox.js +49 -10
  49. package/dist/src/nile-combobox/nile-combobox.js.map +1 -1
  50. package/dist/src/nile-combobox/portal-manager.js +2 -22
  51. package/dist/src/nile-combobox/portal-manager.js.map +1 -1
  52. package/dist/src/nile-combobox/renderer.d.ts +2 -3
  53. package/dist/src/nile-combobox/renderer.js +14 -45
  54. package/dist/src/nile-combobox/renderer.js.map +1 -1
  55. package/dist/src/nile-empty-state/nile-empty-state.css.js +127 -4
  56. package/dist/src/nile-empty-state/nile-empty-state.css.js.map +1 -1
  57. package/dist/src/nile-empty-state/nile-empty-state.d.ts +35 -5
  58. package/dist/src/nile-empty-state/nile-empty-state.js +159 -42
  59. package/dist/src/nile-empty-state/nile-empty-state.js.map +1 -1
  60. package/dist/src/nile-empty-state/nile-empty-state.test.d.ts +1 -0
  61. package/dist/src/nile-empty-state/nile-empty-state.test.js +186 -15
  62. package/dist/src/nile-empty-state/nile-empty-state.test.js.map +1 -1
  63. package/dist/src/nile-pagination/nile-pagination.js +5 -5
  64. package/dist/src/nile-pagination/nile-pagination.js.map +1 -1
  65. package/dist/src/version.d.ts +1 -1
  66. package/dist/src/version.js +11 -3
  67. package/dist/src/version.js.map +1 -1
  68. package/dist/tsconfig.tsbuildinfo +1 -1
  69. package/dist/version.cjs.js +1 -1
  70. package/dist/version.cjs.js.map +1 -1
  71. package/dist/version.esm.js +1 -1
  72. package/dist/xml-09119317.cjs.js +2 -0
  73. package/dist/xml-09119317.cjs.js.map +1 -0
  74. package/dist/{xml-25c4108a.esm.js → xml-9bf771b3.esm.js} +1 -1
  75. package/package.json +2 -1
  76. package/scripts/replace-version.cjs +12 -10
  77. package/src/nile-combobox/nile-combobox.css.ts +28 -15
  78. package/src/nile-combobox/nile-combobox.ts +61 -12
  79. package/src/nile-combobox/portal-manager.ts +4 -22
  80. package/src/nile-combobox/renderer.ts +26 -69
  81. package/src/nile-empty-state/nile-empty-state.css.ts +127 -4
  82. package/src/nile-empty-state/nile-empty-state.test.ts +192 -15
  83. package/src/nile-empty-state/nile-empty-state.ts +195 -34
  84. package/src/nile-pagination/nile-pagination.ts +5 -5
  85. package/src/version.ts +11 -2
  86. package/vscode-html-custom-data.json +79 -16
  87. package/dist/xml-90fd974e.cjs.js +0 -2
  88. package/dist/xml-90fd974e.cjs.js.map +0 -1
package/demo/nxtgen-dark.css CHANGED
@@ -740,6 +740,61 @@
740
740
  --ng-colors-bg-success-primary: var(--ng-color-success-50);
741
741
  --ng-colors-bg-success-secondary: var(--ng-color-success-100);
742
742
  --ng-colors-bg-success-solid: var(--ng-color-success-600);
743
+ /* Hue semantics — light mode */
744
+ --ng-colors-bg-teal-primary: var(--ng-color-teal-50);
745
+ --ng-colors-bg-teal-secondary: var(--ng-color-teal-100);
746
+ --ng-colors-bg-teal-solid: var(--ng-color-teal-600);
747
+ --ng-colors-bg-teal-solid-hover: var(--ng-color-teal-700);
748
+ --ng-colors-border-teal: var(--ng-color-teal-500);
749
+ --ng-colors-border-teal-subtle: var(--ng-color-teal-300);
750
+ --ng-colors-fg-teal-primary: var(--ng-color-teal-600);
751
+ --ng-colors-fg-teal-secondary: var(--ng-color-teal-500);
752
+ --ng-colors-fg-teal-on-solid: var(--ng-color-base-white);
753
+ --ng-colors-bg-cyan-primary: var(--ng-color-cyan-50);
754
+ --ng-colors-bg-cyan-secondary: var(--ng-color-cyan-100);
755
+ --ng-colors-bg-cyan-solid: var(--ng-color-cyan-600);
756
+ --ng-colors-bg-cyan-solid-hover: var(--ng-color-cyan-700);
757
+ --ng-colors-border-cyan: var(--ng-color-cyan-500);
758
+ --ng-colors-border-cyan-subtle: var(--ng-color-cyan-300);
759
+ --ng-colors-fg-cyan-primary: var(--ng-color-cyan-600);
760
+ --ng-colors-fg-cyan-secondary: var(--ng-color-cyan-500);
761
+ --ng-colors-fg-cyan-on-solid: var(--ng-color-base-white);
762
+ --ng-colors-bg-rose-primary: var(--ng-color-rose-50);
763
+ --ng-colors-bg-rose-secondary: var(--ng-color-rose-100);
764
+ --ng-colors-bg-rose-solid: var(--ng-color-rose-600);
765
+ --ng-colors-bg-rose-solid-hover: var(--ng-color-rose-700);
766
+ --ng-colors-border-rose: var(--ng-color-rose-500);
767
+ --ng-colors-border-rose-subtle: var(--ng-color-rose-300);
768
+ --ng-colors-fg-rose-primary: var(--ng-color-rose-600);
769
+ --ng-colors-fg-rose-secondary: var(--ng-color-rose-500);
770
+ --ng-colors-fg-rose-on-solid: var(--ng-color-base-white);
771
+ --ng-colors-bg-violet-primary: var(--ng-color-violet-50);
772
+ --ng-colors-bg-violet-secondary: var(--ng-color-violet-100);
773
+ --ng-colors-bg-violet-solid: var(--ng-color-violet-600);
774
+ --ng-colors-bg-violet-solid-hover: var(--ng-color-violet-700);
775
+ --ng-colors-border-violet: var(--ng-color-violet-500);
776
+ --ng-colors-border-violet-subtle: var(--ng-color-violet-300);
777
+ --ng-colors-fg-violet-primary: var(--ng-color-violet-600);
778
+ --ng-colors-fg-violet-secondary: var(--ng-color-violet-500);
779
+ --ng-colors-fg-violet-on-solid: var(--ng-color-base-white);
780
+ --ng-colors-bg-moss-primary: var(--ng-color-moss-50);
781
+ --ng-colors-bg-moss-secondary: var(--ng-color-moss-100);
782
+ --ng-colors-bg-moss-solid: var(--ng-color-moss-600);
783
+ --ng-colors-bg-moss-solid-hover: var(--ng-color-moss-700);
784
+ --ng-colors-border-moss: var(--ng-color-moss-500);
785
+ --ng-colors-border-moss-subtle: var(--ng-color-moss-300);
786
+ --ng-colors-fg-moss-primary: var(--ng-color-moss-600);
787
+ --ng-colors-fg-moss-secondary: var(--ng-color-moss-500);
788
+ --ng-colors-fg-moss-on-solid: var(--ng-color-base-white);
789
+ --ng-colors-bg-greenlight-primary: var(--ng-color-greenlight-50);
790
+ --ng-colors-bg-greenlight-secondary: var(--ng-color-greenlight-100);
791
+ --ng-colors-bg-greenlight-solid: var(--ng-color-greenlight-600);
792
+ --ng-colors-bg-greenlight-solid-hover: var(--ng-color-greenlight-700);
793
+ --ng-colors-border-greenlight: var(--ng-color-greenlight-500);
794
+ --ng-colors-border-greenlight-subtle: var(--ng-color-greenlight-300);
795
+ --ng-colors-fg-greenlight-primary: var(--ng-color-greenlight-600);
796
+ --ng-colors-fg-greenlight-secondary: var(--ng-color-greenlight-500);
797
+ --ng-colors-fg-greenlight-on-solid: var(--ng-color-base-white);
743
798
  --ng-componentcolors-utility-yellow-50: var(--ng-color-yellow-50);
744
799
  --ng-componentcolors-utility-yellow-100: var(--ng-color-yellow-100);
745
800
  --ng-componentcolors-utility-yellow-200: var(--ng-color-yellow-200);
@@ -835,13 +890,13 @@
835
890
  --ng-colors-text-error-primary-hover: var(--ng-color-error-300);
836
891
  --ng-colors-text-warning-primary-600: var(--ng-color-warning-400);
837
892
  --ng-colors-text-success-primary-600: var(--ng-color-success-400);
838
- --ng-colors-border-primary: var(--ng-color-graydarkmode-700);
839
- --ng-colors-border-secondary: var(--ng-color-graydarkmode-800);
893
+ --ng-colors-border-primary: var(--ng-color-graydarkmode-600);
894
+ --ng-colors-border-secondary: var(--ng-color-graydarkmode-700);
840
895
  --ng-colors-border-secondary-alt: #FFFFFF14;
841
- --ng-colors-border-tertiary: var(--ng-color-graydarkmode-800);
896
+ --ng-colors-border-tertiary: var(--ng-color-graydarkmode-950);
842
897
  --ng-colors-border-neutral: var(--ng-color-graydarkmode-600);
843
- --ng-colors-border-disabled: var(--ng-color-graydarkmode-700);
844
- --ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-800);
898
+ --ng-colors-border-disabled: var(--ng-color-graydarkmode-600);
899
+ --ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-700);
845
900
  --ng-colors-border-brand: var(--ng-color-bluedark-400);
846
901
  --ng-colors-border-brand-alt: var(--ng-color-bluedark-500);
847
902
  --ng-colors-border-error: var(--ng-color-error-400);
@@ -1016,7 +1071,7 @@
1016
1071
  --ng-colors-fg-warning-secondary: var(--ng-color-warning-400);
1017
1072
  --ng-colors-fg-success-primary: var(--ng-color-success-400);
1018
1073
  --ng-colors-fg-success-secondary: var(--ng-color-success-400);
1019
- --ng-colors-bg-primary: var(--ng-color-graydarkmode-950);
1074
+ --ng-colors-bg-primary: var(--ng-color-graydarkmode-800);
1020
1075
  --ng-colors-effects-focus-ring: var(--ng-color-bluedark-400);
1021
1076
  --ng-colors-effects-focus-ring-error: var(--ng-color-error-400);
1022
1077
  --ng-colors-effects-shadow-xs: #0000004D;
@@ -1040,19 +1095,19 @@
1040
1095
  --ng-colors-effects-shadow-3xl-02: #00000033;
1041
1096
  --ng-colors-effects-shadow-skeumorphic-inner: #0000004D;
1042
1097
  --ng-colors-effects-shadow-skeumorphic-inner-border: var(--ng-colors-border-primary);
1043
- --ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-950);
1098
+ --ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-800);
1044
1099
  --ng-colors-bg-primary-hover: var(--ng-color-graydarkmode-900);
1045
1100
  --ng-colors-bg-primary-solid: var(--ng-color-graydarkmode-100);
1046
1101
  --ng-colors-bg-secondary: var(--ng-color-graydarkmode-900);
1047
1102
  --ng-colors-bg-secondary-alt: var(--ng-color-graydarkmode-900);
1048
1103
  --ng-colors-bg-secondary-hover: var(--ng-color-graydarkmode-800);
1049
- --ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-950);
1104
+ --ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-800);
1050
1105
  --ng-colors-bg-secondary-solid: var(--ng-color-graydarkmode-400);
1051
- --ng-colors-bg-tertiary: var(--ng-color-graydarkmode-800);
1106
+ --ng-colors-bg-tertiary: var(--ng-color-graydarkmode-950);
1052
1107
  --ng-colors-bg-quaternary: var(--ng-color-graydarkmode-700);
1053
1108
  --ng-colors-bg-quaternary-alt: var(--ng-color-graydarkmode-600);
1054
1109
  --ng-colors-bg-active: var(--ng-color-graydarkmode-900);
1055
- --ng-colors-bg-disabled: var(--ng-color-graydarkmode-800);
1110
+ --ng-colors-bg-disabled: var(--ng-color-graydarkmode-950);
1056
1111
  --ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-900);
1057
1112
  --ng-colors-bg-overlay: var(--ng-color-base-black);
1058
1113
  --ng-colors-bg-brand-primary: var(--ng-color-bluedark-950);
@@ -1072,6 +1127,61 @@
1072
1127
  --ng-colors-bg-success-primary: var(--ng-color-success-950);
1073
1128
  --ng-colors-bg-success-secondary: var(--ng-color-success-900);
1074
1129
  --ng-colors-bg-success-solid: var(--ng-color-success-500);
1130
+ /* Hue semantics — dark mode */
1131
+ --ng-colors-bg-teal-primary: var(--ng-color-teal-950);
1132
+ --ng-colors-bg-teal-secondary: var(--ng-color-teal-900);
1133
+ --ng-colors-bg-teal-solid: var(--ng-color-teal-500);
1134
+ --ng-colors-bg-teal-solid-hover: var(--ng-color-teal-400);
1135
+ --ng-colors-border-teal: var(--ng-color-teal-400);
1136
+ --ng-colors-border-teal-subtle: var(--ng-color-teal-600);
1137
+ --ng-colors-fg-teal-primary: var(--ng-color-teal-500);
1138
+ --ng-colors-fg-teal-secondary: var(--ng-color-teal-400);
1139
+ --ng-colors-fg-teal-on-solid: var(--ng-color-graylightmode-950);
1140
+ --ng-colors-bg-cyan-primary: var(--ng-color-cyan-950);
1141
+ --ng-colors-bg-cyan-secondary: var(--ng-color-cyan-900);
1142
+ --ng-colors-bg-cyan-solid: var(--ng-color-cyan-500);
1143
+ --ng-colors-bg-cyan-solid-hover: var(--ng-color-cyan-400);
1144
+ --ng-colors-border-cyan: var(--ng-color-cyan-400);
1145
+ --ng-colors-border-cyan-subtle: var(--ng-color-cyan-600);
1146
+ --ng-colors-fg-cyan-primary: var(--ng-color-cyan-500);
1147
+ --ng-colors-fg-cyan-secondary: var(--ng-color-cyan-400);
1148
+ --ng-colors-fg-cyan-on-solid: var(--ng-color-graylightmode-950);
1149
+ --ng-colors-bg-rose-primary: var(--ng-color-rose-950);
1150
+ --ng-colors-bg-rose-secondary: var(--ng-color-rose-900);
1151
+ --ng-colors-bg-rose-solid: var(--ng-color-rose-500);
1152
+ --ng-colors-bg-rose-solid-hover: var(--ng-color-rose-400);
1153
+ --ng-colors-border-rose: var(--ng-color-rose-400);
1154
+ --ng-colors-border-rose-subtle: var(--ng-color-rose-600);
1155
+ --ng-colors-fg-rose-primary: var(--ng-color-rose-500);
1156
+ --ng-colors-fg-rose-secondary: var(--ng-color-rose-400);
1157
+ --ng-colors-fg-rose-on-solid: var(--ng-color-graylightmode-950);
1158
+ --ng-colors-bg-violet-primary: var(--ng-color-violet-950);
1159
+ --ng-colors-bg-violet-secondary: var(--ng-color-violet-900);
1160
+ --ng-colors-bg-violet-solid: var(--ng-color-violet-500);
1161
+ --ng-colors-bg-violet-solid-hover: var(--ng-color-violet-400);
1162
+ --ng-colors-border-violet: var(--ng-color-violet-400);
1163
+ --ng-colors-border-violet-subtle: var(--ng-color-violet-600);
1164
+ --ng-colors-fg-violet-primary: var(--ng-color-violet-500);
1165
+ --ng-colors-fg-violet-secondary: var(--ng-color-violet-400);
1166
+ --ng-colors-fg-violet-on-solid: var(--ng-color-graylightmode-950);
1167
+ --ng-colors-bg-moss-primary: var(--ng-color-moss-950);
1168
+ --ng-colors-bg-moss-secondary: var(--ng-color-moss-900);
1169
+ --ng-colors-bg-moss-solid: var(--ng-color-moss-500);
1170
+ --ng-colors-bg-moss-solid-hover: var(--ng-color-moss-400);
1171
+ --ng-colors-border-moss: var(--ng-color-moss-400);
1172
+ --ng-colors-border-moss-subtle: var(--ng-color-moss-600);
1173
+ --ng-colors-fg-moss-primary: var(--ng-color-moss-500);
1174
+ --ng-colors-fg-moss-secondary: var(--ng-color-moss-400);
1175
+ --ng-colors-fg-moss-on-solid: var(--ng-color-graylightmode-950);
1176
+ --ng-colors-bg-greenlight-primary: var(--ng-color-greenlight-950);
1177
+ --ng-colors-bg-greenlight-secondary: var(--ng-color-greenlight-900);
1178
+ --ng-colors-bg-greenlight-solid: var(--ng-color-greenlight-500);
1179
+ --ng-colors-bg-greenlight-solid-hover: var(--ng-color-greenlight-400);
1180
+ --ng-colors-border-greenlight: var(--ng-color-greenlight-400);
1181
+ --ng-colors-border-greenlight-subtle: var(--ng-color-greenlight-600);
1182
+ --ng-colors-fg-greenlight-primary: var(--ng-color-greenlight-500);
1183
+ --ng-colors-fg-greenlight-secondary: var(--ng-color-greenlight-400);
1184
+ --ng-colors-fg-greenlight-on-solid: var(--ng-color-graylightmode-950);
1075
1185
  --ng-componentcolors-utility-yellow-50: var(--ng-color-yellow-950);
1076
1186
  --ng-componentcolors-utility-yellow-100: var(--ng-color-yellow-900);
1077
1187
  --ng-componentcolors-utility-yellow-200: var(--ng-color-yellow-800);
@@ -1429,6 +1539,61 @@
1429
1539
  --ng-colors-bg-success-primary: var(--ng-color-success-50);
1430
1540
  --ng-colors-bg-success-secondary: var(--ng-color-success-100);
1431
1541
  --ng-colors-bg-success-solid: var(--ng-color-success-600);
1542
+ /* Hue semantics — light mode */
1543
+ --ng-colors-bg-teal-primary: var(--ng-color-teal-50);
1544
+ --ng-colors-bg-teal-secondary: var(--ng-color-teal-100);
1545
+ --ng-colors-bg-teal-solid: var(--ng-color-teal-600);
1546
+ --ng-colors-bg-teal-solid-hover: var(--ng-color-teal-700);
1547
+ --ng-colors-border-teal: var(--ng-color-teal-500);
1548
+ --ng-colors-border-teal-subtle: var(--ng-color-teal-300);
1549
+ --ng-colors-fg-teal-primary: var(--ng-color-teal-600);
1550
+ --ng-colors-fg-teal-secondary: var(--ng-color-teal-500);
1551
+ --ng-colors-fg-teal-on-solid: var(--ng-color-base-white);
1552
+ --ng-colors-bg-cyan-primary: var(--ng-color-cyan-50);
1553
+ --ng-colors-bg-cyan-secondary: var(--ng-color-cyan-100);
1554
+ --ng-colors-bg-cyan-solid: var(--ng-color-cyan-600);
1555
+ --ng-colors-bg-cyan-solid-hover: var(--ng-color-cyan-700);
1556
+ --ng-colors-border-cyan: var(--ng-color-cyan-500);
1557
+ --ng-colors-border-cyan-subtle: var(--ng-color-cyan-300);
1558
+ --ng-colors-fg-cyan-primary: var(--ng-color-cyan-600);
1559
+ --ng-colors-fg-cyan-secondary: var(--ng-color-cyan-500);
1560
+ --ng-colors-fg-cyan-on-solid: var(--ng-color-base-white);
1561
+ --ng-colors-bg-rose-primary: var(--ng-color-rose-50);
1562
+ --ng-colors-bg-rose-secondary: var(--ng-color-rose-100);
1563
+ --ng-colors-bg-rose-solid: var(--ng-color-rose-600);
1564
+ --ng-colors-bg-rose-solid-hover: var(--ng-color-rose-700);
1565
+ --ng-colors-border-rose: var(--ng-color-rose-500);
1566
+ --ng-colors-border-rose-subtle: var(--ng-color-rose-300);
1567
+ --ng-colors-fg-rose-primary: var(--ng-color-rose-600);
1568
+ --ng-colors-fg-rose-secondary: var(--ng-color-rose-500);
1569
+ --ng-colors-fg-rose-on-solid: var(--ng-color-base-white);
1570
+ --ng-colors-bg-violet-primary: var(--ng-color-violet-50);
1571
+ --ng-colors-bg-violet-secondary: var(--ng-color-violet-100);
1572
+ --ng-colors-bg-violet-solid: var(--ng-color-violet-600);
1573
+ --ng-colors-bg-violet-solid-hover: var(--ng-color-violet-700);
1574
+ --ng-colors-border-violet: var(--ng-color-violet-500);
1575
+ --ng-colors-border-violet-subtle: var(--ng-color-violet-300);
1576
+ --ng-colors-fg-violet-primary: var(--ng-color-violet-600);
1577
+ --ng-colors-fg-violet-secondary: var(--ng-color-violet-500);
1578
+ --ng-colors-fg-violet-on-solid: var(--ng-color-base-white);
1579
+ --ng-colors-bg-moss-primary: var(--ng-color-moss-50);
1580
+ --ng-colors-bg-moss-secondary: var(--ng-color-moss-100);
1581
+ --ng-colors-bg-moss-solid: var(--ng-color-moss-600);
1582
+ --ng-colors-bg-moss-solid-hover: var(--ng-color-moss-700);
1583
+ --ng-colors-border-moss: var(--ng-color-moss-500);
1584
+ --ng-colors-border-moss-subtle: var(--ng-color-moss-300);
1585
+ --ng-colors-fg-moss-primary: var(--ng-color-moss-600);
1586
+ --ng-colors-fg-moss-secondary: var(--ng-color-moss-500);
1587
+ --ng-colors-fg-moss-on-solid: var(--ng-color-base-white);
1588
+ --ng-colors-bg-greenlight-primary: var(--ng-color-greenlight-50);
1589
+ --ng-colors-bg-greenlight-secondary: var(--ng-color-greenlight-100);
1590
+ --ng-colors-bg-greenlight-solid: var(--ng-color-greenlight-600);
1591
+ --ng-colors-bg-greenlight-solid-hover: var(--ng-color-greenlight-700);
1592
+ --ng-colors-border-greenlight: var(--ng-color-greenlight-500);
1593
+ --ng-colors-border-greenlight-subtle: var(--ng-color-greenlight-300);
1594
+ --ng-colors-fg-greenlight-primary: var(--ng-color-greenlight-600);
1595
+ --ng-colors-fg-greenlight-secondary: var(--ng-color-greenlight-500);
1596
+ --ng-colors-fg-greenlight-on-solid: var(--ng-color-base-white);
1432
1597
  --ng-componentcolors-utility-yellow-50: var(--ng-color-yellow-50);
1433
1598
  --ng-componentcolors-utility-yellow-100: var(--ng-color-yellow-100);
1434
1599
  --ng-componentcolors-utility-yellow-200: var(--ng-color-yellow-200);
@@ -1524,13 +1689,13 @@
1524
1689
  --ng-colors-text-error-primary-hover: var(--ng-color-error-300);
1525
1690
  --ng-colors-text-warning-primary-600: var(--ng-color-warning-400);
1526
1691
  --ng-colors-text-success-primary-600: var(--ng-color-success-400);
1527
- --ng-colors-border-primary: var(--ng-color-graydarkmode-700);
1528
- --ng-colors-border-secondary: var(--ng-color-graydarkmode-800);
1692
+ --ng-colors-border-primary: var(--ng-color-graydarkmode-600);
1693
+ --ng-colors-border-secondary: var(--ng-color-graydarkmode-700);
1529
1694
  --ng-colors-border-secondary-alt: #FFFFFF14;
1530
- --ng-colors-border-tertiary: var(--ng-color-graydarkmode-800);
1695
+ --ng-colors-border-tertiary: var(--ng-color-graydarkmode-950);
1531
1696
  --ng-colors-border-neutral: var(--ng-color-graydarkmode-600);
1532
- --ng-colors-border-disabled: var(--ng-color-graydarkmode-700);
1533
- --ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-800);
1697
+ --ng-colors-border-disabled: var(--ng-color-graydarkmode-600);
1698
+ --ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-700);
1534
1699
  --ng-colors-border-brand: var(--ng-color-bluedark-400);
1535
1700
  --ng-colors-border-brand-alt: var(--ng-color-bluedark-500);
1536
1701
  --ng-colors-border-error: var(--ng-color-error-400);
@@ -1705,7 +1870,7 @@
1705
1870
  --ng-colors-fg-warning-secondary: var(--ng-color-warning-400);
1706
1871
  --ng-colors-fg-success-primary: var(--ng-color-success-400);
1707
1872
  --ng-colors-fg-success-secondary: var(--ng-color-success-400);
1708
- --ng-colors-bg-primary: var(--ng-color-graydarkmode-950);
1873
+ --ng-colors-bg-primary: var(--ng-color-graydarkmode-800);
1709
1874
  --ng-colors-effects-focus-ring: var(--ng-color-bluedark-400);
1710
1875
  --ng-colors-effects-focus-ring-error: var(--ng-color-error-400);
1711
1876
  --ng-colors-effects-shadow-xs: #0000004D;
@@ -1729,19 +1894,19 @@
1729
1894
  --ng-colors-effects-shadow-3xl-02: #00000033;
1730
1895
  --ng-colors-effects-shadow-skeumorphic-inner: #0000004D;
1731
1896
  --ng-colors-effects-shadow-skeumorphic-inner-border: var(--ng-colors-border-primary);
1732
- --ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-950);
1897
+ --ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-800);
1733
1898
  --ng-colors-bg-primary-hover: var(--ng-color-graydarkmode-900);
1734
1899
  --ng-colors-bg-primary-solid: var(--ng-color-graydarkmode-100);
1735
1900
  --ng-colors-bg-secondary: var(--ng-color-graydarkmode-900);
1736
1901
  --ng-colors-bg-secondary-alt: var(--ng-color-graydarkmode-900);
1737
1902
  --ng-colors-bg-secondary-hover: var(--ng-color-graydarkmode-800);
1738
- --ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-950);
1903
+ --ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-800);
1739
1904
  --ng-colors-bg-secondary-solid: var(--ng-color-graydarkmode-400);
1740
- --ng-colors-bg-tertiary: var(--ng-color-graydarkmode-800);
1905
+ --ng-colors-bg-tertiary: var(--ng-color-graydarkmode-950);
1741
1906
  --ng-colors-bg-quaternary: var(--ng-color-graydarkmode-700);
1742
1907
  --ng-colors-bg-quaternary-alt: var(--ng-color-graydarkmode-600);
1743
1908
  --ng-colors-bg-active: var(--ng-color-graydarkmode-900);
1744
- --ng-colors-bg-disabled: var(--ng-color-graydarkmode-800);
1909
+ --ng-colors-bg-disabled: var(--ng-color-graydarkmode-950);
1745
1910
  --ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-900);
1746
1911
  --ng-colors-bg-overlay: var(--ng-color-base-black);
1747
1912
  --ng-colors-bg-brand-primary: var(--ng-color-bluedark-950);
@@ -1761,6 +1926,61 @@
1761
1926
  --ng-colors-bg-success-primary: var(--ng-color-success-950);
1762
1927
  --ng-colors-bg-success-secondary: var(--ng-color-success-900);
1763
1928
  --ng-colors-bg-success-solid: var(--ng-color-success-500);
1929
+ /* Hue semantics — dark mode */
1930
+ --ng-colors-bg-teal-primary: var(--ng-color-teal-950);
1931
+ --ng-colors-bg-teal-secondary: var(--ng-color-teal-900);
1932
+ --ng-colors-bg-teal-solid: var(--ng-color-teal-500);
1933
+ --ng-colors-bg-teal-solid-hover: var(--ng-color-teal-400);
1934
+ --ng-colors-border-teal: var(--ng-color-teal-400);
1935
+ --ng-colors-border-teal-subtle: var(--ng-color-teal-600);
1936
+ --ng-colors-fg-teal-primary: var(--ng-color-teal-500);
1937
+ --ng-colors-fg-teal-secondary: var(--ng-color-teal-400);
1938
+ --ng-colors-fg-teal-on-solid: var(--ng-color-graylightmode-950);
1939
+ --ng-colors-bg-cyan-primary: var(--ng-color-cyan-950);
1940
+ --ng-colors-bg-cyan-secondary: var(--ng-color-cyan-900);
1941
+ --ng-colors-bg-cyan-solid: var(--ng-color-cyan-500);
1942
+ --ng-colors-bg-cyan-solid-hover: var(--ng-color-cyan-400);
1943
+ --ng-colors-border-cyan: var(--ng-color-cyan-400);
1944
+ --ng-colors-border-cyan-subtle: var(--ng-color-cyan-600);
1945
+ --ng-colors-fg-cyan-primary: var(--ng-color-cyan-500);
1946
+ --ng-colors-fg-cyan-secondary: var(--ng-color-cyan-400);
1947
+ --ng-colors-fg-cyan-on-solid: var(--ng-color-graylightmode-950);
1948
+ --ng-colors-bg-rose-primary: var(--ng-color-rose-950);
1949
+ --ng-colors-bg-rose-secondary: var(--ng-color-rose-900);
1950
+ --ng-colors-bg-rose-solid: var(--ng-color-rose-500);
1951
+ --ng-colors-bg-rose-solid-hover: var(--ng-color-rose-400);
1952
+ --ng-colors-border-rose: var(--ng-color-rose-400);
1953
+ --ng-colors-border-rose-subtle: var(--ng-color-rose-600);
1954
+ --ng-colors-fg-rose-primary: var(--ng-color-rose-500);
1955
+ --ng-colors-fg-rose-secondary: var(--ng-color-rose-400);
1956
+ --ng-colors-fg-rose-on-solid: var(--ng-color-graylightmode-950);
1957
+ --ng-colors-bg-violet-primary: var(--ng-color-violet-950);
1958
+ --ng-colors-bg-violet-secondary: var(--ng-color-violet-900);
1959
+ --ng-colors-bg-violet-solid: var(--ng-color-violet-500);
1960
+ --ng-colors-bg-violet-solid-hover: var(--ng-color-violet-400);
1961
+ --ng-colors-border-violet: var(--ng-color-violet-400);
1962
+ --ng-colors-border-violet-subtle: var(--ng-color-violet-600);
1963
+ --ng-colors-fg-violet-primary: var(--ng-color-violet-500);
1964
+ --ng-colors-fg-violet-secondary: var(--ng-color-violet-400);
1965
+ --ng-colors-fg-violet-on-solid: var(--ng-color-graylightmode-950);
1966
+ --ng-colors-bg-moss-primary: var(--ng-color-moss-950);
1967
+ --ng-colors-bg-moss-secondary: var(--ng-color-moss-900);
1968
+ --ng-colors-bg-moss-solid: var(--ng-color-moss-500);
1969
+ --ng-colors-bg-moss-solid-hover: var(--ng-color-moss-400);
1970
+ --ng-colors-border-moss: var(--ng-color-moss-400);
1971
+ --ng-colors-border-moss-subtle: var(--ng-color-moss-600);
1972
+ --ng-colors-fg-moss-primary: var(--ng-color-moss-500);
1973
+ --ng-colors-fg-moss-secondary: var(--ng-color-moss-400);
1974
+ --ng-colors-fg-moss-on-solid: var(--ng-color-graylightmode-950);
1975
+ --ng-colors-bg-greenlight-primary: var(--ng-color-greenlight-950);
1976
+ --ng-colors-bg-greenlight-secondary: var(--ng-color-greenlight-900);
1977
+ --ng-colors-bg-greenlight-solid: var(--ng-color-greenlight-500);
1978
+ --ng-colors-bg-greenlight-solid-hover: var(--ng-color-greenlight-400);
1979
+ --ng-colors-border-greenlight: var(--ng-color-greenlight-400);
1980
+ --ng-colors-border-greenlight-subtle: var(--ng-color-greenlight-600);
1981
+ --ng-colors-fg-greenlight-primary: var(--ng-color-greenlight-500);
1982
+ --ng-colors-fg-greenlight-secondary: var(--ng-color-greenlight-400);
1983
+ --ng-colors-fg-greenlight-on-solid: var(--ng-color-graylightmode-950);
1764
1984
  --ng-componentcolors-utility-yellow-50: var(--ng-color-yellow-950);
1765
1985
  --ng-componentcolors-utility-yellow-100: var(--ng-color-yellow-900);
1766
1986
  --ng-componentcolors-utility-yellow-200: var(--ng-color-yellow-800);
@@ -2262,4 +2482,3 @@
2262
2482
  --ng-svg-method-fill: fill;
2263
2483
  }
2264
2484
 
2265
-
package/demo/nxtgen-properties.css CHANGED
@@ -841,13 +841,13 @@
841
841
  font-family (syntax: *)
842
842
  ============================================================ */
843
843
 
844
- /* --ng-font-family-body: Inter */
844
+ /* --ng-font-family-body: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif */
845
845
  @property --ng-font-family-body {
846
846
  syntax: "*";
847
847
  inherits: true;
848
848
  }
849
849
 
850
- /* --ng-font-family-display: Inter */
850
+ /* --ng-font-family-display: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif */
851
851
  @property --ng-font-family-display {
852
852
  syntax: "*";
853
853
  inherits: true;