@akcelik/strct 0.7.2 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "0.7.2",
+  "version": "0.8.1",
   "description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
   "author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
   "license": "MIT",

package/styles/_base.scss

@@ -62,6 +62,14 @@ kbd,
   outline-offset: 2px;
 }
 
+// Stronger, fully-opaque focus ring when the OS asks for more contrast.
+@media (prefers-contrast: more) {
+  :focus-visible {
+    outline: 3px solid var(--acc);
+    outline-offset: 2px;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,

package/styles/_tokens.scss

@@ -61,13 +61,13 @@
   --shadow-rest: var(--sh);
   --shadow-elevated: var(--shh);
   --shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--b2);
-  --text-xs: 11px;
+  --text-xs: 12px;
   --text-sm: 12px;
   --text-md: 13px;
   --text-lg: 14px;
   --text-xl: 16px;
   --leading-tight: 1.2;
-  --leading-normal: 1.45;
+  --leading-normal: 1.5;
   --leading-loose: 1.6;
   --disabled-opacity: 0.5;
 }
@@ -117,13 +117,13 @@
   --shadow-rest: var(--sh);
   --shadow-elevated: var(--shh);
   --shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--b2);
-  --text-xs: 11px;
+  --text-xs: 12px;
   --text-sm: 12px;
   --text-md: 13px;
   --text-lg: 14px;
   --text-xl: 16px;
   --leading-tight: 1.2;
-  --leading-normal: 1.45;
+  --leading-normal: 1.5;
   --leading-loose: 1.6;
   --disabled-opacity: 0.5;
 }
@@ -173,13 +173,13 @@
   --shadow-rest: var(--sh);
   --shadow-elevated: var(--shh);
   --shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--b2);
-  --text-xs: 11px;
+  --text-xs: 12px;
   --text-sm: 12px;
   --text-md: 13px;
   --text-lg: 14px;
   --text-xl: 16px;
   --leading-tight: 1.2;
-  --leading-normal: 1.45;
+  --leading-normal: 1.5;
   --leading-loose: 1.6;
   --disabled-opacity: 0.5;
 }
@@ -229,13 +229,13 @@
   --shadow-rest: var(--sh);
   --shadow-elevated: var(--shh);
   --shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--b2);
-  --text-xs: 11px;
+  --text-xs: 12px;
   --text-sm: 12px;
   --text-md: 13px;
   --text-lg: 14px;
   --text-xl: 16px;
   --leading-tight: 1.2;
-  --leading-normal: 1.45;
+  --leading-normal: 1.5;
   --leading-loose: 1.6;
   --disabled-opacity: 0.5;
 }
@@ -285,13 +285,13 @@
   --shadow-rest: var(--sh);
   --shadow-elevated: var(--shh);
   --shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--b2);
-  --text-xs: 11px;
+  --text-xs: 12px;
   --text-sm: 12px;
   --text-md: 13px;
   --text-lg: 14px;
   --text-xl: 16px;
   --leading-tight: 1.2;
-  --leading-normal: 1.45;
+  --leading-normal: 1.5;
   --leading-loose: 1.6;
   --disabled-opacity: 0.5;
 }
@@ -341,13 +341,35 @@
   --shadow-rest: var(--sh);
   --shadow-elevated: var(--shh);
   --shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--b2);
-  --text-xs: 11px;
+  --text-xs: 12px;
   --text-sm: 12px;
   --text-md: 13px;
   --text-lg: 14px;
   --text-xl: 16px;
   --leading-tight: 1.2;
-  --leading-normal: 1.45;
+  --leading-normal: 1.5;
   --leading-loose: 1.6;
   --disabled-opacity: 0.5;
 }
+
+// Honour the OS "increase contrast" preference (low-vision users / bright ambient
+// light): strengthen borders and lift secondary/tertiary text toward primary.
+// Only active when the OS asks, so the default look is untouched. Scoped by
+// [data-palette][data-theme] (equal specificity to the scheme blocks, later in
+// source) so it wins the cascade for every palette.
+@media (prefers-contrast: more) {
+  [data-palette][data-theme='dark'] {
+    --b1: rgba(255, 255, 255, 0.14);
+    --b2: rgba(255, 255, 255, 0.24);
+    --b3: rgba(255, 255, 255, 0.36);
+    --t2: rgba(255, 255, 255, 0.78);
+    --t3: rgba(255, 255, 255, 0.62);
+  }
+  [data-palette][data-theme='light'] {
+    --b1: rgba(0, 0, 0, 0.18);
+    --b2: rgba(0, 0, 0, 0.3);
+    --b3: rgba(0, 0, 0, 0.42);
+    --t2: rgba(0, 0, 0, 0.82);
+    --t3: rgba(0, 0, 0, 0.7);
+  }
+}

package/types/akcelik-strct.d.ts

@@ -34,6 +34,12 @@ declare class StrctThemeService {
     constructor();
     setPalette(palette: StrctPalette): void;
     setMode(mode: StrctMode): void;
+    private applyPalette;
+    private applyMode;
+    /** The OS-level light/dark preference, or null when matchMedia is unavailable. */
+    private systemMode;
+    /** Track OS theme changes until the user makes an explicit choice. */
+    private watchSystemMode;
     toggleMode(): void;
     private read;
     private write;
@@ -1847,7 +1853,7 @@ declare class StrctAlert {
     readonly closable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Emitted when the alert is dismissed. */
     readonly closed: _angular_core.OutputEmitterRef<void>;
-    protected readonly icon: _angular_core.Signal<"success" | "warning" | "critical" | "info">;
+    protected readonly icon: _angular_core.Signal<"info" | "success" | "warning" | "critical">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctAlert, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctAlert, "strct-alert", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, ["*"], true, never>;
 }