@besaitech/ng-design-system 0.0.44 → 0.0.46

package/package.json

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

package/themes/base.css

@@ -53,6 +53,83 @@
 
   /* Typography — override in your app's own @theme if your brand uses a different face. */
   --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+
+  /*
+   * Ambient decoration — the slow, breathing drift of the brand-tinted blobs behind the glass top bar,
+   * sidebar and gradient container. Registered here so `animate-sds-ambient` exists in any consuming app
+   * (the decorations are opt-in via [decorations] on sds-topbar / sds-sidebar / sds-shell). The wave is
+   * deliberately gentle — decoration must never pull the eye off content, and it respects reduced motion
+   * below.
+   */
+  --animate-sds-ambient: sds-ambient 14s ease-in-out infinite;
+
+  @keyframes sds-ambient {
+    0%,
+    100% {
+      opacity: 0.55;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.9;
+      transform: scale(1.08);
+    }
+  }
+}
+
+/*
+ * Dark mode is CLASS-based: the `.dark` class on <html> flips the theme, and SdsThemeService toggles it.
+ * This overrides Tailwind's default media-query `dark:` so an in-app switch (not just the OS setting) can
+ * drive it. Consuming apps get this for free by importing base.css.
+ */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*
+ * Dark palette. Only the NEUTRAL/semantic roles are redefined here — surfaces, ink, border, the accent
+ * tiles and status. Because every sds-* component names a role (bg-surface, text-ink, border-border…)
+ * rather than a colour, redefining the role under `.dark` re-themes the whole library at once, with no
+ * per-component `dark:` variants. The brand RAMP is theme-specific, so each brand file (saitech.css,
+ * belvigo.css) ships its own `.dark` ramp beside its light one.
+ *
+ * `html.dark` (element + class) outranks Tailwind's `:root`-scoped @theme defaults regardless of source
+ * order, so the flip is deterministic.
+ */
+html.dark {
+  /*
+   * Neutrals / surfaces — a neutral near-black in the SAME zinc family as the grayscale brand ramp
+   * (brand-900 is #14141a). Deliberately NOT a navy: an earlier deep-blue palette read as blue/purple,
+   * especially under the brand-tinted glass and gradient washes. Zinc keeps the dark cohesive and clean.
+   */
+  --color-canvas: #09090b;
+  --color-surface: #18181b;
+  --color-muted: #202023;
+  --color-border: #2f2f34;
+  --color-ink: #f4f4f5;
+  --color-ink-soft: #a1a1aa;
+  --color-ink-faint: #71717a;
+
+  /* Accent icon-tiles — brighter foregrounds for contrast on dark, darkened soft backgrounds. */
+  --color-accent-blue: #6ea8fe;
+  --color-accent-blue-soft: #172a44;
+  --color-accent-green: #46d389;
+  --color-accent-green-soft: #123324;
+  --color-accent-amber: #f3c063;
+  --color-accent-amber-soft: #33270f;
+  --color-accent-red: #f2748c;
+  --color-accent-red-soft: #331722;
+  --color-accent-indigo: #a99bf5;
+  --color-accent-indigo-soft: #211b3d;
+
+  /* Status — nudged lighter so they read on the dark canvas. */
+  --color-success: #34d67e;
+  --color-warning: #f6c453;
+  --color-danger: #f2748c;
+}
+
+/* Honour a reader's reduced-motion setting: the ambient drift is decoration, so it simply stops. */
+@media (prefers-reduced-motion: reduce) {
+  .animate-sds-ambient {
+    animation: none !important;
+  }
 }
 
 @layer base {

package/themes/belvigo.css

@@ -35,3 +35,22 @@
   --color-brand-900: #0a0a0b; /* sidebar background */
   --color-brand-950: #000000;
 }
+
+/*
+ * Dark brand ramp — same contract as the light ramp above, flipped for a dark canvas. See the note in
+ * saitech.css: soft tints (50–200) go dark, 500 stays light enough to read as the active nav highlight,
+ * 600 is a mid chip that keeps white button text legible, and 900 is the dark sidebar rail.
+ */
+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-950: #000000;
+}

package/themes/saitech.css

@@ -26,3 +26,27 @@
   --color-brand-900: #0a0a0b; /* sidebar background */
   --color-brand-950: #000000;
 }
+
+/*
+ * 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:
+ *
+ *   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)
+ *   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-950: #000000;
+}