@besaitech/ng-design-system 0.0.11

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@besaitech/ng-design-system",
+  "version": "0.0.11",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": "^20.3.0 || ^21.0.0 || ^22.0.0",
+    "@angular/core": "^20.3.0 || ^21.0.0 || ^22.0.0",
+    "@angular/forms": "^20.3.0 || ^21.0.0 || ^22.0.0",
+    "@angular/platform-browser": "^20.3.0 || ^21.0.0 || ^22.0.0",
+    "@angular/router": "^20.3.0 || ^21.0.0 || ^22.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "exports": {
+    "./preflight.css": {
+      "default": "./preflight.css"
+    },
+    "./themes/*": {
+      "default": "./themes/*"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/besaitech-ng-design-system.mjs"
+    }
+  },
+  "module": "fesm2022/besaitech-ng-design-system.mjs",
+  "typings": "index.d.ts"
+}

package/preflight.css

@@ -0,0 +1,113 @@
+/*
+ * @besaitech/ng-design-system — scoped Preflight
+ * ------------------------------------------------------------------
+ * The library's components are authored against Tailwind's Preflight
+ * (its base reset). Apps that don't load Preflight — e.g. because they
+ * also use another global design system (@stlucdesign/saint-luc-design-system)
+ * and only import `tailwindcss/utilities` — leave the components exposed to
+ * that other system's bare-element rules (button fonts, `ul{list-style}`,
+ * `li{margin}`, heading styles, …).
+ *
+ * Import this file into a cascade layer that sits ABOVE the legacy design
+ * system but BELOW Tailwind's `utilities` layer, e.g.:
+ *
+ *   @layer legacy, ng-design-system-base, theme, utilities;
+ *   @import '@stlucdesign/saint-luc-design-system/style.css' layer(legacy);
+ *   @import '@besaitech/ng-design-system/preflight.css'      layer(ng-design-system-base);
+ *   @import 'tailwindcss/theme'     layer(theme);
+ *   @import 'tailwindcss/utilities' layer(utilities);
+ *
+ * Every rule is scoped to the `sds-*` component subtree, so it never touches
+ * the host app's own elements. Because it lives below `utilities`, the
+ * components' own utility classes always win — this only neutralises styles
+ * the components don't set themselves.
+ */
+
+:where(
+  sds-icon, sds-button, sds-input, sds-textarea, sds-toggle-switch, sds-avatar,
+  sds-badge, sds-card, sds-calendar, sds-date-picker, sds-select, sds-multi-select,
+  sds-phone-input, sds-paginator, sds-tabs, sds-tab-list, sds-tab, sds-tab-panels,
+  sds-tab-panel, sds-accordion, sds-accordion-panel, sds-accordion-header,
+  sds-accordion-content, sds-table, sds-table-cell, sds-table-row-expansion,
+  sds-topbar, sds-shell, sds-sidebar, sds-nav-group, sds-nav-item,
+  /*
+   * Overlay panels (dropdown lists, country picker) are relocated to
+   * <body> while open, so they're no longer inside an sds-* element. Scope
+   * them by their markers so the reset still reaches their <ul>/<li>/buttons.
+   * The date-picker overlay wraps <sds-calendar> (already covered above).
+   */
+  [data-sds-select-panel], [data-sds-phone-panel]
+) {
+  /* Box model + typography baseline for everything inside a component.
+     `border: 0 solid` mirrors Tailwind Preflight: components add borders via
+     utilities, so this strips the legacy `input{border:…}` from native controls. */
+  & :where(*, *::before, *::after) {
+    box-sizing: border-box;
+    border: 0 solid;
+    font-family: var(--font-sans, ui-sans-serif, system-ui, -apple-system, sans-serif);
+  }
+
+  /* Headings: neutralise size/weight/spacing so component utilities define them. */
+  & :where(h1, h2, h3, h4, h5, h6) {
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    margin: 0;
+  }
+
+  /* Block text. */
+  & :where(p, figure, blockquote, dl, dd) {
+    margin: 0;
+  }
+
+  /* Lists: strip bullets and default spacing (counters ul{list-style:disc}, li{margin}). */
+  & :where(ul, ol) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  & :where(li) {
+    margin: 0;
+  }
+
+  /* Form controls: inherit typography instead of the host's button/input rules. */
+  & :where(button, input, optgroup, select, textarea) {
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+  }
+  & :where(button) {
+    background: none;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  /* Links. */
+  & :where(a) {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  /* Media. */
+  & :where(img, svg, video, canvas) {
+    display: block;
+    vertical-align: middle;
+  }
+}
+
+/*
+ * sds-icon renders line icons as inline SVG with `fill="none"` and
+ * `stroke="currentColor"` set as *attributes*. A host `svg { fill: currentColor }`
+ * rule (e.g. from @stlucdesign/saint-luc-design-system) overrides those attributes
+ * and flood-fills every icon. Re-assert them here. Anchored on `sds-icon` so it also
+ * covers icons inside body-relocated overlay panels. Inner shapes that opt into a
+ * fill via their own `fill="currentColor"` attribute (e.g. dots) are unaffected.
+ */
+:where(sds-icon) svg {
+  width: 100%;
+  height: 100%;
+  fill: none;
+  stroke: currentColor;
+}

package/themes/belvigo.css

@@ -0,0 +1,37 @@
+/*
+ * Belvigo theme — a black brand ramp.
+ *
+ * Same token contract as `saitech.css`; only the eleven brand steps differ, so every `sds-*` component
+ * re-brands without a single component change. That is the whole point of the ramp being tokens: the
+ * library never names a colour, it names a ROLE, and the role is filled here.
+ *
+ * The steps are not a generic grey scale — each one is pinned to the job the library gives it:
+ *
+ *   500  active nav highlight   — must read as "selected" against a white sidebar, so mid-grey, not black
+ *   600  primary button         — near-black, the CTA
+ *   700  top bar base
+ *   900  sidebar background
+ *
+ * 950 is true #000. Reserve it for deliberate full-black surfaces; using it for text or a CTA leaves no
+ * darker step for hover, which is why 600 rather than 950 is the button.
+ *
+ * Import AFTER `@import "tailwindcss"`:
+ *
+ *   @import "tailwindcss";
+ *   @source "../node_modules/@besaitech/ng-design-system";
+ *   @import "@besaitech/ng-design-system/themes/belvigo.css";
+ */
+@theme {
+  /* Brand blacks */
+  --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;
+}

package/themes/saitech.css

@@ -0,0 +1,28 @@
+/*
+ * Saitech theme — the library's original brand blues (StaffKit / Cliniques universitaires Saint-Luc).
+ *
+ * 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.
+ *
+ * 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/saitech.css";
+ */
+@theme {
+  /* Brand blues */
+  --color-brand-50: #eef3fb;
+  --color-brand-100: #d7e3f6;
+  --color-brand-200: #aec6ee;
+  --color-brand-300: #7ba3e2;
+  --color-brand-400: #4f81d6;
+  --color-brand-500: #2f6bd4; /* active nav highlight */
+  --color-brand-600: #2456a6; /* primary button */
+  --color-brand-700: #1b4498; /* top bar base */
+  --color-brand-800: #14387f;
+  --color-brand-900: #0f2452; /* sidebar background */
+  --color-brand-950: #0a1a3d;
+}