Depth, light and translucency without changing the API

Niveus read flat: thin sheens, short shadows, opaque grey chrome and a
painted canvas. This retunes values and component internals only; every
class and token name is unchanged, so existing pages pick it up as is.

- Canvas: a faint accent light falls across the page, so translucent
  layers have something to show through.
- Surfaces: the surface sheen runs the full height (lit top, shaded
  foot); raised and filled sheens, highlights and bevels are stronger;
  the elevation scale is deeper and softer.
- Translucency: cards, dialogs, the sidebar and tab tracks let some of
  the canvas through, with blur so busy grounds never read as texture;
  frosted and glass materials are clearer with more blur.
- Filled buttons give off a soft glow of their own color.
- Light fields are paper instead of grey wells that looked disabled.
- Fixes: navigation bars wrap and lists scroll inside them instead of
  overflowing the page on phones; choice labels sit at control size;
  disabled ghost buttons no longer grow a filled well; the color-swatch
  rule is split so neither engine drops it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019iMUTHrD8K9CSuHqsanje9

niveus/components/button.css

@@ -123,6 +123,12 @@
   --_fg: var(--nv-color-on-accent);
   --_border: transparent;
   --_sheen: var(--nv-sheen-filled);
+  /* A filled key gives off a little of its own color: the glow is what makes
+     it read as lit rather than printed. */
+  --_shadow: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-2),
+    0 6px 16px -8px color-mix(in oklab, var(--_bg) 80%, transparent);
+  --_shadow-hover: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-3),
+    0 8px 22px -8px color-mix(in oklab, var(--_bg) 85%, transparent);
   font-weight: var(--nv-font-weight-semibold);
 }
 
@@ -133,6 +139,10 @@
   --_fg: var(--nv-color-on-danger);
   --_border: transparent;
   --_sheen: var(--nv-sheen-filled);
+  --_shadow: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-2),
+    0 6px 16px -8px color-mix(in oklab, var(--_bg) 80%, transparent);
+  --_shadow-hover: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-3),
+    0 8px 22px -8px color-mix(in oklab, var(--_bg) 85%, transparent);
   --nv-color-focus-ring: var(--nv-color-danger-border);
   font-weight: var(--nv-font-weight-semibold);
 }
@@ -149,6 +159,14 @@
   --_shadow-active: var(--nv-elevation-inset-sm);
 }
 
+/* A ghost has no material to lose, so disabling it only dims the label —
+   it does not suddenly grow a well its enabled siblings never had. */
+.nv-button--ghost:disabled,
+.nv-button--ghost[aria-disabled="true"] {
+  background-color: transparent;
+  border-color: transparent;
+}
+
 @media (hover: hover) {
   .nv-button--ghost:hover:not(:disabled, [aria-disabled="true"]) {
     color: var(--nv-color-text-primary);

niveus/components/card.css

@@ -14,7 +14,11 @@
    ========================================================================== */
 
 .nv-card {
-  --_bg: var(--nv-color-surface);
+  /* Content surfaces are mostly solid: enough of the canvas comes through to
+     tie a card to the light around it, never enough to compete with what it
+     holds. The blur keeps anything busy behind it (a bed, an image) from
+     reading through as texture. */
+  --_bg: color-mix(in oklab, var(--nv-color-surface) 90%, transparent);
   --_border: var(--nv-color-border-subtle);
   --_shadow: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-1);
   --_sheen: var(--nv-sheen-surface);
@@ -31,6 +35,8 @@
   border: var(--nv-border-width) solid var(--_border);
   border-radius: var(--nv-radius-lg);
   box-shadow: var(--_shadow);
+  backdrop-filter: var(--nv-backdrop-glass);
+  -webkit-backdrop-filter: var(--nv-backdrop-glass);
 
   /* Children are clipped to the corner radius so media and inset regions
      cannot square off the card. */
@@ -39,17 +45,17 @@
 }
 
 .nv-card--elevated {
-  --_bg: var(--nv-color-surface-elevated);
+  --_bg: color-mix(in oklab, var(--nv-color-surface-elevated) 90%, transparent);
   --_shadow: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-2);
 }
 
 .nv-card--floating {
-  --_bg: var(--nv-color-surface-elevated);
+  --_bg: color-mix(in oklab, var(--nv-color-surface-elevated) 88%, transparent);
   --_shadow: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-3);
 }
 
 .nv-card--inset {
-  --_bg: var(--nv-color-surface-inset);
+  --_bg: color-mix(in oklab, var(--nv-color-surface-inset) 85%, transparent);
   --_shadow: var(--nv-elevation-inset-md), var(--nv-ledge);
   --_sheen: none;
   --_border: var(--nv-color-border-subtle);

niveus/components/dialog.css

@@ -23,8 +23,13 @@
   max-block-size: min(42rem, calc(100svh - var(--nv-space-12)));
   padding: 0;
 
-  background-color: var(--nv-color-surface-elevated);
+  /* The dialog sits over a dimmed, blurred page, so it can afford to let a
+     little of it through: it reads as a pane lifted off the page rather than
+     a card pasted over it. */
+  background-color: color-mix(in oklab, var(--nv-color-surface-elevated) 86%, transparent);
   background-image: var(--nv-sheen-surface);
+  backdrop-filter: var(--nv-backdrop-frosted);
+  -webkit-backdrop-filter: var(--nv-backdrop-frosted);
   color: var(--nv-color-text-primary);
   border: var(--nv-border-width) solid var(--nv-color-border-subtle);
   border-radius: var(--nv-radius-xl);

niveus/components/input.css

@@ -59,8 +59,10 @@
   min-inline-size: 0;
   block-size: var(--_height);
   padding-inline: var(--_padding);
-
-  background-color: var(--nv-color-surface-inset);
+  /* A well in dark, where recess reads as shade; paper in light, where a grey
+     well reads as a field that has been switched off. The inset shadow and
+     ledge carry the recess either way. */
+  background-color: light-dark(var(--nv-color-surface), var(--nv-color-surface-inset));
   color: var(--nv-color-text-primary);
   border: var(--nv-border-width) solid var(--_border);
   border-radius: var(--_radius);
@@ -134,7 +136,13 @@ textarea.nv-input {
   padding: 0;
 }
 
-.nv-input--color::-webkit-color-swatch,
+.nv-input--color::-webkit-color-swatch {
+  border: var(--nv-border-width) solid var(--nv-color-border);
+  border-radius: calc(var(--nv-radius-md) - var(--nv-space-1));
+}
+
+/* Separate rules on purpose: a selector list that names another engine's
+   pseudo-element is invalid as a whole, and each browser would drop both. */
 .nv-input--color::-moz-color-swatch {
   border: var(--nv-border-width) solid var(--nv-color-border);
   border-radius: calc(var(--nv-radius-md) - var(--nv-space-1));
@@ -227,6 +235,9 @@ textarea.nv-input {
 .nv-radio {
   position: relative;
   flex: none;
+  /* The marks are drawn in em; pinning the size keeps them the same whatever
+     the label around them is set in. */
+  font-size: var(--nv-font-size-md);
   inline-size: var(--nv-space-5);
   block-size: var(--nv-space-5);
   margin: 0;
@@ -391,7 +402,10 @@ textarea.nv-input {
   display: flex;
   align-items: center;
   gap: var(--nv-space-2-5);
+  /* Labelled at control size, so a row of switches and checkboxes sits level
+     with the buttons and fields beside it. */
   font: var(--nv-font-body);
+  font-size: var(--nv-font-size-sm);
   cursor: pointer;
 }
 

niveus/components/menu.css

@@ -43,6 +43,7 @@
   margin-block-start: var(--nv-space-2);
 
   background-color: var(--nv-material-frosted-bg);
+  background-image: var(--nv-sheen-surface);
   border: var(--nv-border-width) solid var(--nv-material-frosted-border);
   border-radius: var(--nv-radius-lg);
   box-shadow: var(--nv-material-frosted-shadow);

niveus/components/navigation.css

@@ -20,11 +20,12 @@
 
   display: flex;
   align-items: center;
-  gap: var(--nv-space-4);
+  flex-wrap: wrap;
+  gap: var(--nv-space-2) var(--nv-space-4);
   padding: var(--nv-space-2) var(--nv-space-4);
   min-block-size: var(--nv-control-height-lg);
-
   background-color: var(--nv-material-frosted-bg);
+  background-image: var(--nv-sheen-raised);
   border-block-end: var(--nv-border-width) solid var(--nv-color-border-subtle);
 
   /* The travelling selection marker sits behind its item at z-index -1; the
@@ -46,6 +47,7 @@
 
 .nv-nav--plain {
   background-color: var(--nv-color-surface);
+  background-image: var(--nv-sheen-raised);
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
 }
@@ -64,6 +66,7 @@
 
   background-color: transparent;
   border-block-end: 0;
+  background-image: none;
   box-shadow: none;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
@@ -88,6 +91,15 @@
   padding: 0;
   list-style: none;
   min-inline-size: 0;
+  /* On a narrow screen a long list scrolls inside the bar instead of pushing
+     the page sideways. */
+  max-inline-size: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.nv-nav__list::-webkit-scrollbar {
+  display: none;
 }
 
 .nv-nav__spacer {
@@ -235,11 +247,15 @@
   gap: var(--nv-space-1);
   inline-size: 15rem;
   block-size: 100svh;
+  flex-wrap: nowrap;
   padding: var(--nv-space-4) var(--nv-space-3);
-
-  background-color: var(--nv-color-background-subtle);
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
+  /* A sidebar is a pane of the canvas rather than chrome over content, so it
+     stays mostly opaque — but it lets the light of the canvas through, which
+     is what stops it reading as a grey slab beside the page. */
+  background-color: color-mix(in oklab, var(--nv-color-background-subtle) 72%, transparent);
+  background-image: var(--nv-sheen-surface);
+  backdrop-filter: var(--nv-backdrop-frosted);
+  -webkit-backdrop-filter: var(--nv-backdrop-frosted);
   border-block-end: 0;
   border-inline-end: var(--nv-border-width) solid var(--nv-color-border-subtle);
   box-shadow: none;
@@ -281,10 +297,10 @@
 .nv-nav-tabs {
   display: inline-flex;
   align-items: center;
+  max-inline-size: 100%;
   gap: var(--nv-space-0-5);
   padding: var(--nv-space-1);
-
-  background-color: var(--nv-color-surface-inset);
+  background-color: color-mix(in oklab, var(--nv-color-surface-inset) 80%, transparent);
   border: var(--nv-border-width) solid var(--nv-color-border-subtle);
   border-radius: var(--nv-radius-md);
   box-shadow: var(--nv-elevation-inset-md), var(--nv-ledge);

niveus/components/window.css

@@ -37,6 +37,7 @@
   min-inline-size: 0;
 
   background-color: var(--nv-color-surface);
+  background-image: var(--nv-sheen-surface);
   color: var(--nv-color-text-primary);
   border: var(--nv-border-width) solid var(--nv-color-border-subtle);
   border-radius: var(--nv-radius-xl);