@besaitech/ng-design-system 0.0.75 → 0.0.77

package/index.d.ts

@@ -1686,25 +1686,26 @@ declare class SdsBulkBar {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsBulkBar, "sds-bulk-bar", never, { "count": { "alias": "count"; "required": false; "isSignal": true; }; "countLabel": { "alias": "countLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, { "clear": "clear"; }, never, ["*"], true, never>;
 }
 
-/** Whether the bar pins to the bottom of the scroll container (default) or sits in flow. */
+/** Whether the bar floats at the bottom of the scroll container (default) or sits in flow. */
 type SdsFormActionsPosition = 'sticky' | 'static';
 /**
  * The action bar at the foot of a form: Cancel, Save, and whatever commits the thing — projected as
- * buttons, right-aligned, on a bordered strip that pins to the bottom of the scroll container so the
- * save button stays in reach on a long editor.
+ * buttons on a floating card that rides at the bottom of the scroll container, so the save button
+ * stays in reach on a long editor.
  *
  * Project a destructive or secondary action with `sdsFormActionsStart` and it is pushed to the left,
  * away from the confirming buttons, which is the point: Delete should not sit a few pixels from Save.
  *
- * Not {@link SdsBulkBar}, which is for a selection: that one hides itself at zero, says "N selected",
- * carries a clear-selection button and is announced as a toolbar. A form footer is none of those, and
- * dressing one up as the other costs a fake count and a screen reader that announces a save bar as
- * bulk actions. This is a plain labelled `role="group"` — not a toolbar, because the buttons belong in
- * the form's normal tab order and a toolbar role tells a screen-reader user to expect arrow keys.
+ * Deliberately the same chrome as {@link SdsBulkBar} — rounded card, full border, solid surface,
+ * `shadow-xl`, floating clear of the bottom edge rather than welded to it, same entrance. The two are
+ * the app's only bars that hover over scrolling content, and a form footer that looked like a
+ * different species from the bulk bar would read as a different kind of thing. What they are not is
+ * the same semantics: that one is a `role="toolbar"` for a selection, announcing "N selected" and
+ * hiding itself at zero. This is a plain labelled `role="group"`, because these buttons belong in the
+ * form's normal tab order and a toolbar role tells a screen-reader user to expect arrow keys.
  *
- * The bar spans its container and carries its own horizontal padding. To let it bleed past a padded
- * container's edge, put the matching negative margin on the host — the host is a block element:
- * `<sds-form-actions class="-mx-4 md:-mx-6">`.
+ * It floats, so do not bleed it past its container with negative margins the way a flush strip wants:
+ * the rounded corners and the shadow need the inset to read as a card.
  *
  * @example
  * <sds-form-actions>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besaitech/ng-design-system",
-  "version": "0.0.75",
+  "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;
 }