@kiefer-tek/sophea-design-system 0.15.11 → 0.16.0

package/dist/index.css

@@ -5820,15 +5820,15 @@ a.sn-Button-module__btn--Fx11X[aria-disabled="true"] {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
 }
 
-/* Pill — a substantial segmented strip: bordered track, solid brand pill
-   for the active tab with white text (4.6:1 on --theme-primary-05, AA in
-   both themes — replaces the washed-out action-link-02 fill that needed a
-   per-theme text override). */
+/* Pill — a bordered tab track with a brand-gradient fill behind the active tab
+   (white text holds ≥4.5:1; the gradient stops at --theme-primary-05). Radii are
+   moderate (--radius-lg track / --radius-md pills) to match buttons & cards —
+   the old fully-round 9999px read as out of place next to them. */
 
 .sn-Tabs-module__list-pill--B-FxP {
   background: var(--surface-s3);
   border: 1px solid var(--border-02);
-  border-radius: 9999px;
+  border-radius: var(--radius-lg);
   padding: 4px;
   gap: 4px;
 }
@@ -5837,7 +5837,7 @@ a.sn-Button-module__btn--Fx11X[aria-disabled="true"] {
   padding: 7px 16px;
   font-size: 13px;
   color: var(--text-04);
-  border-radius: 9999px;
+  border-radius: var(--radius-md);
   transition: color var(--duration-fast, 120ms) var(--ease-out, ease-out);
 }
 
@@ -5852,11 +5852,13 @@ a.sn-Button-module__btn--Fx11X[aria-disabled="true"] {
 
 .sn-Tabs-module__indicator-pill--ltyFZ {
   /* Inset to sit inside the 4px track padding; no drop shadow — it bled
-     into the bottom inset and made the pill look like it touched the track. */
+     into the bottom inset and made the pill look like it touched the track.
+     Brand-gradient fill (matches the primary-button CTA) — theme-stable; white
+     trigger text holds ≥4.5:1 since the gradient stops at --theme-primary-05. */
   top: 4px;
   height: calc(100% - 8px);
-  background: var(--theme-primary-05);
-  border-radius: 9999px;
+  background-image: var(--sophea-gradient-primary-button);
+  border-radius: var(--radius-md);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -11042,6 +11044,11 @@ html[data-resizing] .sn-AppShell-module__sidebar--9-Zb9 {
      can make the main pane opaque while keeping the rail/sidebar glass — e.g. a
      glass sidebar over an opaque content area. */
   background: var(--shell-main-backdrop, var(--shell-region-glass));
+  /* Optional frosted blur: when the shell card is transparent, the live aurora
+     shows THROUGH a translucent tint — this blurs it (frosted glass) instead of
+     letting it read sharp. Default none (no blur). */
+  -webkit-backdrop-filter: var(--shell-main-backdrop-blur, none);
+  backdrop-filter: var(--shell-main-backdrop-blur, none);
 }
 
 .sn-AppShell-module__mainBackdropImage--bjtQh {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiefer-tek/sophea-design-system",
-  "version": "0.15.11",
+  "version": "0.16.0",
   "description": "Sophea design system: tokens, components, Tailwind preset.",
   "license": "UNLICENSED",
   "type": "module",

package/src/tokens/colors_and_type.css

@@ -602,12 +602,9 @@
     #2e6dad00 100%
   );
   --shell-divider: #5891d01f;
-  /* Light glass — a white frost over the navy aurora (was a dark navy tint)
-     so the shell regions read brighter/airier. Low alpha keeps the dark theme
-     legible (content sits on opaque surfaces, not directly on the glass). */
-  --shell-region-glass: #ffffff24;
+  --shell-region-glass: #141e3473;
   --shell-image-frost: #0a101e4d;
-  --shell-sidebar-bg: #ffffff1a;
+  --shell-sidebar-bg: #070d1a6b;
   --shell-search-bg: #1a25408c;
   --shell-search-bg-open: #1a2540cc;
   --shell-search-kbd-bg: #0a101ecc;
@@ -618,7 +615,7 @@
   --shell-rail-item-hover-bg: rgba(46, 109, 173, 0.1);
   --shell-chrome-hover-bg: rgba(46, 109, 173, 0.14);
 
-  --shell-drawer-glass: #ffffff24; /* light glass — match the shell regions */
+  --shell-drawer-glass: var(--glass-regular-bg);
   /* nous --mask-03 dark: var(--alpha-grey-100-40) → #0006 */
   --shell-drawer-scrim: rgba(0, 0, 0, 0.4);
 }