@besaitech/ng-design-system 0.0.76 → 0.0.78

package/index.d.ts

@@ -1532,6 +1532,58 @@ declare class SdsStatusTile {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsStatusTile, "sds-status-tile", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "availableLabel": { "alias": "availableLabel"; "required": false; "isSignal": true; }; "soldOutLabel": { "alias": "soldOutLabel"; "required": false; "isSignal": true; }; "hiddenLabel": { "alias": "hiddenLabel"; "required": false; "isSignal": true; }; }, { "activate": "activate"; "imageError": "imageError"; }, never, never, true, never>;
 }
 
+/**
+ * Clinical severity, lowest to highest. `unknown` is not a low severity — it means nobody has
+ * assessed it, which is a different statement and deliberately sits outside the ramp.
+ */
+type SdsSeverityLevel = 'unknown' | 'mild' | 'moderate' | 'severe' | 'critical';
+type SdsSeverityVariant = 'badge' | 'meter';
+type SdsSeveritySize = 'sm' | 'md';
+/**
+ * How bad the thing itself is — an allergy's criticality, a reaction, an observation's abnormal
+ * flag, a triage level.
+ *
+ * <b>This is not `sds-badge` with a status colour.</b> Status says what the UI did (saved, failed);
+ * severity says what the record says. A red meaning "save failed" in one place and "anaphylaxis" in
+ * another is a safety problem, so severity has its own measured ramp (see base.css) and its own
+ * shape: five ordered steps that can render as a filled meter, where status is three categorical
+ * states that render as a badge.
+ *
+ * <b>[label] is required and is never defaulted.</b> The component will not invent the word
+ * "Severe" for you: colour alone must not carry meaning (greyscale, colour-blind readers, screen
+ * readers), and a hardcoded English default is the exact bug that ships a trilingual app with one
+ * untranslatable word in it. Pass your own translated text.
+ *
+ * `critical` is filled rather than tinted — the top of a scale should be louder than one more step
+ * of the same treatment.
+ *
+ * @example
+ * <sds-severity level="severe" [label]="'allergy.severe' | translate" />
+ * <sds-severity level="moderate" variant="meter" [label]="'reaction.moderate' | translate" />
+ */
+declare class SdsSeverity {
+    readonly level: _angular_core.InputSignal<SdsSeverityLevel>;
+    /** The visible wording, in the reader's language. Required on purpose — see the class docs. */
+    readonly label: _angular_core.InputSignal<string>;
+    readonly variant: _angular_core.InputSignal<SdsSeverityVariant>;
+    readonly size: _angular_core.InputSignal<SdsSeveritySize>;
+    /**
+     * Accessible name for the meter, when the visible label alone would not say what the number
+     * means ("Élevée" out of context). Defaults to the label.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    protected readonly ramp: readonly SdsSeverityLevel[];
+    protected readonly small: _angular_core.Signal<boolean>;
+    protected readonly tintClass: _angular_core.Signal<string>;
+    protected readonly dotClass: _angular_core.Signal<string>;
+    protected readonly fillClass: _angular_core.Signal<string>;
+    protected readonly accessibleName: _angular_core.Signal<string>;
+    /** How many of the four steps are lit. `unknown` lights none: it is not a low score. */
+    protected readonly reached: _angular_core.Signal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSeverity, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSeverity, "sds-severity", never, { "level": { "alias": "level"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /** An actionable row. */
 interface SdsMenuAction {
     /** Optional stable id, handy in the `(select)` handler. */
@@ -2499,7 +2551,7 @@ declare class SdsRangeCalendar {
     /** BCP 47 locale for month and weekday names. Defaults to `en-GB`; pass the app's locale. */
     readonly locale: _angular_core.InputSignal<string>;
     /** Months shown side by side (from the `sm` breakpoint; always one below it). */
-    readonly months: _angular_core.InputSignal<2 | 1>;
+    readonly months: _angular_core.InputSignal<1 | 2>;
     /** Accessible name of the calendar group. English default — translate it in the app. */
     readonly calendarLabel: _angular_core.InputSignal<string>;
     /** Accessible name of the icon-only "previous month" button (its ONLY name — translate it). */
@@ -2518,7 +2570,7 @@ declare class SdsRangeCalendar {
     protected readonly hovered: _angular_core.WritableSignal<Date | null>;
     private readonly wide;
     /** Months actually rendered: {@link months}, but one on narrow viewports. */
-    protected readonly monthsShown: _angular_core.Signal<2 | 1>;
+    protected readonly monthsShown: _angular_core.Signal<1 | 2>;
     constructor();
     private watchViewport;
     protected readonly navBtn = "inline-flex h-8 w-8 items-center justify-center rounded-control text-ink-soft hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-40";
@@ -2597,7 +2649,7 @@ declare class SdsDateRangePicker implements OnDestroy {
     readonly size: _angular_core.InputSignal<SdsDateRangePickerSize>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Months side by side in the panel (from the `sm` breakpoint; always one below it). */
-    readonly months: _angular_core.InputSignal<2 | 1>;
+    readonly months: _angular_core.InputSignal<1 | 2>;
     /**
      * Display formatter for the field. Default: `Intl.DateTimeFormat#formatRange` with day, short
      * month and year in {@link locale} (e.g. `1–7 Oct 2026`) — see `formatDateRange`.
@@ -5582,5 +5634,5 @@ declare const SDS_CHART_CONFIG: InjectionToken<SdsChartConfig>;
  */
 declare function provideSdsCharts(config: SdsChartConfig): Provider;
 
-export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_CHART_CONFIG, SDS_CHART_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsDateRangePicker, SdsEnvBanner, SdsFileDrop, SdsFormActions, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsRangeCalendar, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, diffInDays, formatDateRange, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSameRange, isSdsThemeMode, isoDay, pad2, provideSdsCharts, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsLastDays, sdsLastMonths, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
-export type { SdsAccordionActive, SdsAccordionValue, SdsAddressAutocompleteAppearance, SdsAddressAutocompleteShape, SdsAddressAutocompleteSize, SdsAddressExtraContext, SdsAddressExtraPosition, SdsAddressLocateFn, SdsAddressSearchFn, SdsAddressSuggestion, SdsAllergen, SdsAvatarShape, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsBulkBarPosition, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsChartConfig, SdsChartLabels, SdsCheckboxSize, SdsChecklistStatus, SdsChipOption, SdsChipSize, SdsCropRect, SdsDatePickerSize, SdsDateRange, SdsDateRangePickerSize, SdsDateRangePreset, SdsEnvBannerEnv, SdsFileDropAppearance, SdsFileRejection, SdsFileRejectionReason, SdsFormActionsPosition, SdsIconName, SdsIconSize, SdsImageCropperBlobOptions, SdsImageCropperShape, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsKpiChangeText, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuAction, SdsMenuAlign, SdsMenuEntry, SdsMenuItemTone, SdsMenuSeparator, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsNavItemBadgeTone, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsRadioSize, SdsScoreSize, SdsScoreTier, SdsScoreVariant, SdsSearchAppearance, SdsSearchItem, SdsSegmentedOption, SdsSegmentedSize, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsSortableAppearance, SdsSortableItemContext, SdsSortableReorderEvent, SdsSparklineSummaryText, SdsStatusTileState, SdsTabValue, SdsTableCellCommitEvent, SdsTableCellContext, SdsTableCellErrors, SdsTableColumn, SdsTableEditTrigger, SdsTableEditor, SdsTableEmptyContext, SdsTableHeaderContext, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSelectOption, SdsTableSize, SdsTableSortEvent, SdsTabsVariant, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeMode, SdsThemeToggleAppearance, SdsTimeInputAppearance, SdsTimeInputSize, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTrendDirection, SdsTriState, SdsTriStateChipSize, SdsUiPrefs, SdsUserMenuAlign, SdsUserMenuAppearance };
+export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_CHART_CONFIG, SDS_CHART_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsDateRangePicker, SdsEnvBanner, SdsFileDrop, SdsFormActions, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsRangeCalendar, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsSeverity, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, diffInDays, formatDateRange, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSameRange, isSdsThemeMode, isoDay, pad2, provideSdsCharts, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsLastDays, sdsLastMonths, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
+export type { SdsAccordionActive, SdsAccordionValue, SdsAddressAutocompleteAppearance, SdsAddressAutocompleteShape, SdsAddressAutocompleteSize, SdsAddressExtraContext, SdsAddressExtraPosition, SdsAddressLocateFn, SdsAddressSearchFn, SdsAddressSuggestion, SdsAllergen, SdsAvatarShape, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsBulkBarPosition, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsChartConfig, SdsChartLabels, SdsCheckboxSize, SdsChecklistStatus, SdsChipOption, SdsChipSize, SdsCropRect, SdsDatePickerSize, SdsDateRange, SdsDateRangePickerSize, SdsDateRangePreset, SdsEnvBannerEnv, SdsFileDropAppearance, SdsFileRejection, SdsFileRejectionReason, SdsFormActionsPosition, SdsIconName, SdsIconSize, SdsImageCropperBlobOptions, SdsImageCropperShape, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsKpiChangeText, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuAction, SdsMenuAlign, SdsMenuEntry, SdsMenuItemTone, SdsMenuSeparator, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsNavItemBadgeTone, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsRadioSize, SdsScoreSize, SdsScoreTier, SdsScoreVariant, SdsSearchAppearance, SdsSearchItem, SdsSegmentedOption, SdsSegmentedSize, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsSeverityLevel, SdsSeveritySize, SdsSeverityVariant, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsSortableAppearance, SdsSortableItemContext, SdsSortableReorderEvent, SdsSparklineSummaryText, SdsStatusTileState, SdsTabValue, SdsTableCellCommitEvent, SdsTableCellContext, SdsTableCellErrors, SdsTableColumn, SdsTableEditTrigger, SdsTableEditor, SdsTableEmptyContext, SdsTableHeaderContext, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSelectOption, SdsTableSize, SdsTableSortEvent, SdsTabsVariant, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeMode, SdsThemeToggleAppearance, SdsTimeInputAppearance, SdsTimeInputSize, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTrendDirection, SdsTriState, SdsTriStateChipSize, SdsUiPrefs, SdsUserMenuAlign, SdsUserMenuAppearance };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besaitech/ng-design-system",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -37,6 +37,10 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/besaitech-ng-design-system.mjs"
     },
+    "./calendar": {
+      "types": "./calendar/index.d.ts",
+      "default": "./fesm2022/besaitech-ng-design-system-calendar.mjs"
+    },
     "./charts": {
       "types": "./charts/index.d.ts",
       "default": "./fesm2022/besaitech-ng-design-system-charts.mjs"

package/themes/base.css

@@ -47,12 +47,50 @@
   --color-warning: #f3b73c;
   --color-danger: #df4f6b;
 
+  /*
+   * Clinical severity — an ORDINAL scale, and deliberately not the status trio.
+   *
+   * Status says what the UI did: saved, needs attention, failed. Severity says how bad the thing
+   * itself is. A red that sometimes means "save failed" and sometimes means "anaphylaxis" is a
+   * safety problem, so these are a separate ramp and must never be substituted for each other.
+   *
+   * Two mechanisms keep them apart. The COLOURS are perceptually distant: every level below is at
+   * least dE76 30 from the nearest of success/warning/danger in CIELAB, and adjacent levels are at
+   * least 27 from each other, so the ramp is readable as a ramp. The FORM differs too — status is
+   * three categorical states and renders as a solid badge, severity is five ordered steps and can
+   * render as a filled meter (sds-severity). Shape is the channel that survives greyscale.
+   *
+   * `unknown` sits OUTSIDE the ramp on purpose: "not assessed" is not a low severity, and colouring
+   * it like one tells a clinician something nobody established.
+   *
+   * Every fg clears 4.5:1 on surface, canvas, muted AND on its own -soft in both modes. If you
+   * restep one, re-measure it — nothing in the build will catch a contrast regression.
+   */
+  --color-severity-unknown: #55606f;
+  --color-severity-unknown-soft: #eef1f5;
+  --color-severity-mild: #0f766e;
+  --color-severity-mild-soft: #e2f3f0;
+  --color-severity-moderate: #9a4708;
+  --color-severity-moderate-soft: #fbeedd;
+  --color-severity-severe: #b91c1c;
+  --color-severity-severe-soft: #fde6e6;
+  --color-severity-critical: #7f1d1d;
+  --color-severity-critical-soft: #f7cccc;
+  /*
+   * The top step is FILLED rather than tinted, so it is louder than a colour change alone — and the
+   * fill needs its own pair. `-critical` is a foreground (dark red on a pale surface, light pink on
+   * a dark one), so reusing it as a background would, in dark mode, put pale text on pale pink.
+   * `-fill` is the background and `-on` the text that sits on it; both measured, both modes.
+   */
+  --color-severity-critical-fill: #7f1d1d;
+  --color-severity-critical-on: #ffffff;
+
   /* Radius */
   --radius-control: 0.5rem;
   --radius-card: 0.75rem;
 
   /* 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;
+  --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,
@@ -123,6 +161,20 @@ html.dark {
   --color-success: #34d67e;
   --color-warning: #f6c453;
   --color-danger: #f2748c;
+
+  /* Clinical severity — re-stepped for the dark surface, same measured rules as light. */
+  --color-severity-unknown: #a9b0bb;
+  --color-severity-unknown-soft: #27272b;
+  --color-severity-mild: #2dd4bf;
+  --color-severity-mild-soft: #0f2e2b;
+  --color-severity-moderate: #e8903a;
+  --color-severity-moderate-soft: #33240f;
+  --color-severity-severe: #f87171;
+  --color-severity-severe-soft: #361616;
+  --color-severity-critical: #fca5a5;
+  --color-severity-critical-soft: #3f1111;
+  --color-severity-critical-fill: #991b1b;
+  --color-severity-critical-on: #fee2e2;
 }
 
 /*

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;
 }