@besaitech/ng-design-system 0.0.54 → 0.0.55

package/package.json

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

package/themes/belvigo-emerald.css

@@ -0,0 +1,73 @@
+/*
+ * Belvigo emerald theme — the brand green of the Belvigo mobile apps, for the web apps that follow them.
+ *
+ * Same token contract as `belvigo.css` / `saitech.css`: only the eleven brand steps are defined here, so
+ * every `sds-*` component re-brands without a component change. It sits beside the black `belvigo.css`
+ * (which other Belvigo apps still import) rather than replacing it.
+ *
+ * Source palette (belvigo-shop-mobile lib/core/theme/tokens.dart): brand #059669, brandPressed/brandText
+ * #047857, brandDeep #065F46, brandTint #E7F5EE; dark brandText #34D399, dark brandTint #0E2A1F.
+ *
+ * This is NOT a straight Tailwind emerald ramp. Each step is pinned to the job the library gives it, and a
+ * few jobs put white text on the fill — where #059669 (3.77:1 with white) and Tailwind's emerald-500
+ * #10b981 (2.54:1) both fail WCAG AA for normal text. So:
+ *
+ *   50   soft tint (selected option/row, tertiary button, calendar hover) — the mobile brandTint
+ *   500  active nav pill (white label), focus rings, focused-field border, accent bar — #05845c,
+ *        4.71:1 with white (AA), a hair darker than #059669 so the label passes
+ *   600  primary button, checkbox/toggle "on", active tab underline, check marks — #047857, 5.48:1 with
+ *        white, the mobile apps' pressed/text green
+ *   700  primary hover, brand text on the 50 tint (badge, tertiary, active tab label) — #065f46,
+ *        7.68:1 on white, 6.84:1 on the 50 tint
+ *   800  primary active, brand top-bar gradient start — 9.72:1 with white
+ *   900  brand sidebar rail — #022c22, 15.15:1 with white; the 500 pill on it is 3.22:1 (UI contrast ≥ 3)
+ *
+ * Import AFTER `@import "tailwindcss"` and after base.css:
+ *
+ *   @import "tailwindcss";
+ *   @source "../node_modules/@besaitech/ng-design-system";
+ *   @import "@besaitech/ng-design-system/themes/base.css";
+ *   @import "@besaitech/ng-design-system/themes/belvigo-emerald.css";
+ */
+@theme {
+  --color-brand-50: #e7f5ee; /* soft tint — mobile brandTint */
+  --color-brand-100: #cdeedd;
+  --color-brand-200: #a5dfc3;
+  --color-brand-300: #6fcaa2;
+  --color-brand-400: #2aa77a;
+  --color-brand-500: #05845c; /* active nav pill, focus ring — white 4.71:1 */
+  --color-brand-600: #047857; /* primary button — white 5.48:1 */
+  --color-brand-700: #065f46; /* hover; brand text on the 50 tint — 6.84:1 */
+  --color-brand-800: #064e3b; /* active; top-bar gradient start */
+  --color-brand-900: #022c22; /* brand sidebar rail — white 15.15:1 */
+  --color-brand-950: #011a14;
+}
+
+/*
+ * Dark brand ramp, for the zinc dark canvas of base.css (surface #18181b). The pins keep their meaning:
+ *
+ *   50/100/200  soft tints — go DARK (50 is the mobile dark brandTint #0e2a1f)
+ *   500         active nav pill / focus ring — #05845c: white 4.71:1, 3.76:1 against the dark surface
+ *   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.
+ *   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
+ */
+html.dark {
+  --color-brand-50: #0e2a1f;
+  --color-brand-100: #12352a;
+  --color-brand-200: #174434;
+  --color-brand-300: #1d5e47;
+  --color-brand-400: #237a5a;
+  --color-brand-500: #05845c;
+  --color-brand-600: #047857;
+  --color-brand-700: #34d399;
+  --color-brand-800: #065f46;
+  --color-brand-900: #0a1f18;
+  --color-brand-950: #03110d;
+}