@besaitech/ng-design-system 0.0.56 → 0.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besaitech/ng-design-system",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"

package/themes/base.css

@@ -125,6 +125,19 @@ html.dark {
   --color-danger: #f2748c;
 }
 
+/*
+ * Dark fills a brand preset can take over. In dark mode the library's solid primary fills (primary
+ * button, toggle "on", tri-state "contains", status-tile check, count badges) invert to `ink` on
+ * `surface`, and its selected tints (chip, tertiary button, drop zone) go neutral — right for a
+ * monochrome brand, whose dark 600 step reads as disabled. A coloured brand sets these custom properties
+ * under `html.dark` in its preset to keep its colour (belvigo-emerald.css does); unset, each falls back to
+ * the inverted/neutral look, so saitech.css and belvigo.css are unchanged. Plain properties, not @theme
+ * tokens: they are never utilities of their own.
+ *
+ *   --sds-dark-primary, --sds-dark-primary-hover, --sds-dark-primary-active, --sds-dark-on-primary
+ *   --sds-dark-tint, --sds-dark-tint-hover, --sds-dark-tint-active, --sds-dark-tint-border, --sds-dark-on-tint
+ */
+
 /* Honour a reader's reduced-motion setting: the ambient drift is decoration, so it simply stops. */
 @media (prefers-reduced-motion: reduce) {
   .animate-sds-ambient {

package/themes/belvigo-emerald.css

@@ -51,10 +51,10 @@
  *   600         fills with white marks (checkbox, selected day, tab underline) — #047857: white 5.48:1,
  *               3.23:1 against the dark surface
  *   700         brand TEXT in dark (active tab label, selected option, brand badge) — the mobile dark
- *               brandText #34d399: 9.22:1 on the surface, 7.98:1 on the 50 tint. Trade-off: a component
- *               that uses 700 as a fill under white text (the calendar's selected-day hover, the `brand`
- *               top bar) loses contrast in dark; the library's primary button, toggle and tri-state chip
- *               already switch to ink fills in dark, and the Belvigo apps use the glass top bar.
+ *               brandText #34d399: 9.22:1 on the surface, 7.98:1 on the 50 tint. It is NOT a fill in
+ *               dark: the fill hover the library would take from 700 (calendar day, current page) comes
+ *               from --sds-dark-primary-hover below instead. The `brand` top bar still uses 700; the
+ *               Belvigo apps use the glass top bar.
  *   800         dark brand text on white (the collapsed-rail badge) — #065f46, 7.68:1
  *   900         brand sidebar rail — #0a1f18, white 17.18:1; the 500 pill on it is 3.65:1
  */
@@ -70,4 +70,22 @@ html.dark {
   --color-brand-800: #065f46;
   --color-brand-900: #0a1f18;
   --color-brand-950: #03110d;
+
+  /*
+   * Dark fills (see base.css, "Dark fills a brand preset can take over"). The monochrome presets invert
+   * the solid primary fill to ink-on-surface in dark, which with a coloured brand turned every primary
+   * button, toggle "on" and tri-state "contains" WHITE. Emerald keeps its green instead:
+   *   solid fill 600 #047857 (white 5.48:1), hover 500 #05845c (4.71:1), pressed 800 #065f46 (7.68:1),
+   *   white text; selected tints (chip, tertiary button, drop zone) use the 50/100/200 dark tints with
+   *   the 600 border and the 700 text green (7.98:1 on the 50 tint).
+   */
+  --sds-dark-primary: var(--color-brand-600);
+  --sds-dark-primary-hover: var(--color-brand-500);
+  --sds-dark-primary-active: var(--color-brand-800);
+  --sds-dark-on-primary: #ffffff;
+  --sds-dark-tint: var(--color-brand-50);
+  --sds-dark-tint-hover: var(--color-brand-100);
+  --sds-dark-tint-active: var(--color-brand-200);
+  --sds-dark-tint-border: var(--color-brand-600);
+  --sds-dark-on-tint: var(--color-brand-700);
 }