@akcelik/strct 0.7.1 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "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

@@ -28,7 +28,7 @@
   --b3: rgba(255, 255, 255, 0.14);
   --t1: rgba(255, 255, 255, 0.9);
   --t2: rgba(255, 255, 255, 0.52);
-  --t3: rgba(255, 255, 255, 0.28);
+  --t3: rgba(255, 255, 255, 0.47);
   --t4: rgba(255, 255, 255, 0.15);
   --inv: #0e1015;
   --acc: #7b9ec8;
@@ -61,20 +61,20 @@
   --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;
 }
 
 [data-palette='arctic'][data-theme='light'] {
   --bg-0: #f3f4f6;
-  --bg-1: #ffffff;
+  --bg-1: #fbfcfd;
   --bg-2: #f8f9fb;
   --bg-3: #eef0f3;
   --bg-h: #f0f1f4;
@@ -84,7 +84,7 @@
   --b3: rgba(0, 0, 0, 0.15);
   --t1: rgba(0, 0, 0, 0.9);
   --t2: rgba(0, 0, 0, 0.62);
-  --t3: rgba(0, 0, 0, 0.42);
+  --t3: rgba(0, 0, 0, 0.55);
   --t4: rgba(0, 0, 0, 0.14);
   --inv: #ffffff;
   --acc: #5a7ea3;
@@ -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;
 }
@@ -139,8 +139,8 @@
   --b2: rgba(255, 235, 210, 0.09);
   --b3: rgba(255, 235, 210, 0.14);
   --t1: rgba(255, 240, 220, 0.88);
-  --t2: rgba(255, 235, 210, 0.5);
-  --t3: rgba(255, 230, 200, 0.27);
+  --t2: rgba(255, 235, 210, 0.59);
+  --t3: rgba(255, 230, 200, 0.51);
   --t4: rgba(255, 225, 195, 0.14);
   --inv: #12100d;
   --acc: #c49a6c;
@@ -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;
 }
@@ -195,8 +195,8 @@
   --b2: rgba(80, 50, 20, 0.1);
   --b3: rgba(80, 50, 20, 0.16);
   --t1: rgba(50, 35, 20, 0.9);
-  --t2: rgba(60, 40, 20, 0.64);
-  --t3: rgba(70, 50, 30, 0.44);
+  --t2: rgba(60, 40, 20, 0.74);
+  --t3: rgba(70, 50, 30, 0.7);
   --t4: rgba(80, 55, 30, 0.14);
   --inv: #fdfcfa;
   --acc: #96724e;
@@ -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;
 }
@@ -251,8 +251,8 @@
   --b2: rgba(210, 240, 225, 0.09);
   --b3: rgba(210, 240, 225, 0.14);
   --t1: rgba(220, 242, 230, 0.88);
-  --t2: rgba(210, 235, 220, 0.5);
-  --t3: rgba(200, 228, 215, 0.27);
+  --t2: rgba(210, 235, 220, 0.62);
+  --t3: rgba(200, 228, 215, 0.54);
   --t4: rgba(195, 222, 210, 0.14);
   --inv: #0d1210;
   --acc: #7aab90;
@@ -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;
 }
@@ -307,8 +307,8 @@
   --b2: rgba(20, 60, 40, 0.1);
   --b3: rgba(20, 60, 40, 0.16);
   --t1: rgba(18, 45, 30, 0.9);
-  --t2: rgba(25, 55, 38, 0.64);
-  --t3: rgba(30, 60, 42, 0.44);
+  --t2: rgba(25, 55, 38, 0.76);
+  --t3: rgba(30, 60, 42, 0.7);
   --t4: rgba(35, 65, 45, 0.14);
   --inv: #fafcfb;
   --acc: #4e8a68;
@@ -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;