@besaitech/ng-design-system 0.0.76 → 0.0.77

package/package.json

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

package/themes/saitech.css

@@ -1,52 +1,68 @@
 /*
- * Saitech theme — the library's original brand blues, and its default.
+ * Saitech theme — the SAITECH brand teal, and the library's default.
  *
- * This file is the DEFAULT look every consumer got before themes existed, extracted verbatim so that
- * adding a second brand could not change the first one. If you are looking for the values that used to
- * live in the showcase's own `styles.css`, they are here.
+ * This file used to hold a monochrome zinc ramp under a comment calling it "brand blues". It was
+ * neither: it was the library's pre-theme default, extracted verbatim so that adding a second brand
+ * could not change the first. SAITECH's actual brand colour is the teal the public site at
+ * saitech.be is built on, so that is what this now carries.
  *
  * Import AFTER `@import "tailwindcss"` — Tailwind v4 processes `@theme` in imported files, and later
  * declarations win:
  *
  *   @import "tailwindcss";
  *   @source "../node_modules/@besaitech/ng-design-system";
+ *   @import "@besaitech/ng-design-system/themes/base.css";
  *   @import "@besaitech/ng-design-system/themes/saitech.css";
+ *
+ * WHY THE STOPS ARE NOT saitech.be's RAMP VERBATIM
+ * The public site uses Tailwind's teal, where 500 is #14b8a6 and 600 is #0d9488. Those are right for
+ * a marketing accent, which is mostly thin strokes, small text and dark-on-light buttons. They are
+ * wrong here, because this library hardcodes `text-white` on the brand fills — `bg-brand-600
+ * text-white` is the primary button, the selected calendar day and the active nav item, and
+ * `bg-brand-500 text-white` is the active nav item on a surface. Against white:
+ *
+ *   #14b8a6  2.49:1   #0d9488  3.74:1   — both fail WCAG AA (4.5:1)
+ *
+ * So the ramp is the same hue, shifted darker at the interactive pins: 500 takes the value the
+ * public site calls 700, and everything below follows. Every stop that carries white text clears AA
+ * with room to spare. Keep it that way — if a stop here is ever lightened, check it against white
+ * first, because nothing in the build will catch it.
  */
 @theme {
-  /* Brand blues */
-  --color-brand-50: #fafafa;
-  --color-brand-100: #f4f4f5;
-  --color-brand-200: #e4e4e7;
-  --color-brand-300: #d4d4d8;
-  --color-brand-400: #a1a1aa;
-  --color-brand-500: #52525b; /* active nav highlight */
-  --color-brand-600: #27272a; /* primary button */
-  --color-brand-700: #18181b; /* top bar base */
-  --color-brand-800: #131316;
-  --color-brand-900: #0a0a0b; /* sidebar background */
-  --color-brand-950: #000000;
+  /* Brand teal */
+  --color-brand-50: #f0fdfa;
+  --color-brand-100: #ccfbf1;
+  --color-brand-200: #99f6e4;
+  --color-brand-300: #5eead4;
+  --color-brand-400: #2dd4bf;
+  --color-brand-500: #0f766e; /* active nav highlight — 5.47:1 on white */
+  --color-brand-600: #115e59; /* primary button — 7.58:1 on white */
+  --color-brand-700: #134e4a; /* top bar base */
+  --color-brand-800: #0f3c39;
+  --color-brand-900: #0a2b29; /* sidebar background — a near-black with the brand cast */
+  --color-brand-950: #04201e;
 }
 
 /*
  * Dark brand ramp. The base.css `.dark` block already flips the neutral roles; this flips the eleven
- * brand steps so the monochrome ramp stays legible on a dark canvas. The pins keep their meaning:
+ * brand steps so the ramp stays legible on a dark canvas. The pins keep their meaning:
  *
  *   50/100/200  soft brand tints (chips, the glass bar's brand edge)  — must go DARK, not stay near-white
  *   500         active nav highlight  — light enough to read as "selected" on the dark rail/surface
- *   600         primary button        — a mid chip that keeps white label text readable (~9:1)
+ *   600         primary button        — a mid chip that keeps white label text readable
  *   700         glass top-bar edge
  *   900         sidebar rail background
  */
 html.dark {
-  --color-brand-50: #1c1c20;
-  --color-brand-100: #212127;
-  --color-brand-200: #2a2a31;
-  --color-brand-300: #3a3a42;
-  --color-brand-400: #52525b;
-  --color-brand-500: #6f6f7a; /* active nav highlight — dark enough for white label text to reach AA */
-  --color-brand-600: #3f3f46; /* primary button */
-  --color-brand-700: #2a2a31; /* glass top-bar edge */
-  --color-brand-800: #202024;
-  --color-brand-900: #14141a; /* sidebar rail background */
+  --color-brand-50: #0c2422;
+  --color-brand-100: #0f2e2b;
+  --color-brand-200: #13403c;
+  --color-brand-300: #1a564f;
+  --color-brand-400: #1d6b62;
+  --color-brand-500: #237a6f; /* active nav highlight — 5.14:1 on white, 3.27:1 against the 900 rail */
+  --color-brand-600: #1a5f58; /* primary button — 7.44:1 on white */
+  --color-brand-700: #14403c; /* glass top-bar edge */
+  --color-brand-800: #102f2d;
+  --color-brand-900: #0a211f; /* sidebar rail background */
   --color-brand-950: #000000;
 }