@lyeve-labs/ui-kit 0.45.0 → 0.46.0

package/dist/internal/field.js

@@ -40,6 +40,15 @@ export const FIELD_LABEL = 'text-sm font-medium text-fg';
 export const FIELD_HINT = 'text-xs text-faint';
 /** Error text below a control. Replaces the hint rather than stacking with it. */
 export const FIELD_ERROR = 'text-xs text-danger';
+/**
+ * The depth every field shares: an inner shadow along the top edge that sinks
+ * it into the surface, and the cyan glow around the focus ring. Both are
+ * shadows, so the field keeps its height and its border, and the ring stays
+ * the indicator that clears 3:1. The glow appears with the ring rather than
+ * easing in, because a focus indicator that fades is late for the key press
+ * that moved it.
+ */
+const CONTROL_DEPTH = 'inset-shadow-well focus-visible:shadow-glow';
 /**
  * Everything a single-line control needs except its border color.
  *
@@ -58,11 +67,13 @@ export const FIELD_ERROR = 'text-xs text-danger';
  */
 export const CONTROL_BASE = 'w-full h-control rounded-lg bg-surface-2 border px-3 text-sm text-fg ' +
     'placeholder:text-faint transition-colors outline-none ' +
+    `${CONTROL_DEPTH} ` +
     'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand ' +
     'disabled:opacity-50 disabled:cursor-not-allowed';
 /** As CONTROL_BASE, for controls whose height is driven by their content. */
 export const CONTROL_MULTILINE = 'w-full min-h-control rounded-lg bg-surface-2 border px-3 py-2 text-sm text-fg ' +
     'placeholder:text-faint transition-colors outline-none ' +
+    `${CONTROL_DEPTH} ` +
     'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand ' +
     'disabled:opacity-50 disabled:cursor-not-allowed';
 /**
@@ -111,7 +122,7 @@ export function describedBy(id, error, hint) {
  * held the caret.
  */
 export const CONTROL_SEGMENTED = 'inline-flex h-control items-center gap-0.5 rounded-lg bg-surface-2 border px-3 ' +
-    'text-sm text-fg transition-colors';
+    'text-sm text-fg transition-colors inset-shadow-well has-[:focus-visible]:shadow-glow';
 /** As controlBorder, for a wrapper that is only ever focused through a child. */
 export function segmentedBorder(error) {
     return error

package/dist/internal/layout.d.ts

@@ -91,8 +91,15 @@ export declare const PAGE_STACK = "flex flex-col gap-section";
  * children flush to the border. `overflow-hidden` is deliberately absent: the
  * focus ring sits 2px outside the element it belongs to, so a clipping surface
  * crops the ring of every button inside it down to whichever edge fits.
+ *
+ * The depth is a few percent of light at the top, a 1px light along the top
+ * edge and a soft drop under the card. The light is a translucent background
+ * image laid over the background color, so a caller who passes its own bg-*
+ * keeps that color under it. The rest are shadows, so the card is the same
+ * size with or without them and the 1px border stays the boundary a forced
+ * colors scheme keeps.
  */
-export declare const CARD_SURFACE = "bg-surface border border-line rounded-xl";
+export declare const CARD_SURFACE = "bg-surface bg-card border border-line rounded-card shadow-card inset-shadow-highlight";
 /**
  * The card surface in the danger tone, for a group of destructive actions.
  *
@@ -101,7 +108,7 @@ export declare const CARD_SURFACE = "bg-surface border border-line rounded-xl";
  * percent keeps the controls of a form inside it on a ground they were drawn
  * for. The contrast suite reads the share from this string.
  */
-export declare const PANEL_DANGER_SURFACE = "bg-[color-mix(in_srgb,var(--color-danger)_5%,var(--color-surface))] border border-danger/40 rounded-xl";
+export declare const PANEL_DANGER_SURFACE = "bg-[color-mix(in_srgb,var(--color-danger)_5%,var(--color-surface))] border border-danger/40 rounded-card shadow-card inset-shadow-highlight";
 /**
  * Card padding by name.
  *
@@ -181,8 +188,20 @@ export declare function sectionHeading(level: 2 | 3, variant?: SectionVariant):
  *
  * `border-e` and not `border-r`: the shell is the one place a right-to-left
  * locale flips, and a physical border leaves the rule on the wrong edge.
+ *
+ * The sidebar runs from the surface at the top a step toward ink at the foot,
+ * and its edge is a rule that fades in and out at its ends, drawn over a
+ * transparent border. The border keeps the column's width, and a forced
+ * colors scheme, which draws no gradient, paints that border in the system
+ * text color, so the edge is still there.
  */
-export declare const APP_SIDEBAR = "h-full shrink-0 flex-col border-e border-line bg-surface transition-[width] duration-base ease-move";
+export declare const APP_SIDEBAR: string;
+/**
+ * The faded edge of the sidebar, a 1px line laid over its transparent
+ * border. It sets a width of its own, so it stays out of APP_SIDEBAR, which
+ * holds no width at all.
+ */
+export declare const APP_SIDEBAR_EDGE = "after:pointer-events-none after:absolute after:inset-y-0 after:-end-px after:w-px after:bg-rule-y";
 /**
  * The sidebar's two widths. Expanded is the 224px column every authed screen
  * had. The rail is the 56px icon column the theme had named and nothing used:
@@ -201,8 +220,14 @@ export declare const APP_SIDEBAR_RAIL = "w-nav-rail";
 /**
  * The header bar. Its gutter is the page gutter, so the section name in the
  * header sits directly above the page title under it rather than 8px off.
+ *
+ * The surface is translucent, so the light at the top of the canvas carries
+ * up under it and the header reads as part of the page rather than a lid on
+ * it. Its rule fades out toward the end edge and stays solid where it meets
+ * the brand row's, so the two read as one line across the top. The rule sits
+ * over a transparent border, for the same reason as the sidebar's.
  */
-export declare const APP_HEADER = "flex h-header shrink-0 items-center gap-2 border-b border-line bg-surface px-page-x";
+export declare const APP_HEADER: string;
 /**
  * The sidebar's brand row. Exactly as tall as the header beside it: the two
  * meet at the top left corner and a 4px disagreement there reads as a seam.

package/dist/internal/layout.js

@@ -102,8 +102,15 @@ export const PAGE_STACK = 'flex flex-col gap-section';
  * children flush to the border. `overflow-hidden` is deliberately absent: the
  * focus ring sits 2px outside the element it belongs to, so a clipping surface
  * crops the ring of every button inside it down to whichever edge fits.
+ *
+ * The depth is a few percent of light at the top, a 1px light along the top
+ * edge and a soft drop under the card. The light is a translucent background
+ * image laid over the background color, so a caller who passes its own bg-*
+ * keeps that color under it. The rest are shadows, so the card is the same
+ * size with or without them and the 1px border stays the boundary a forced
+ * colors scheme keeps.
  */
-export const CARD_SURFACE = 'bg-surface border border-line rounded-xl';
+export const CARD_SURFACE = 'bg-surface bg-card border border-line rounded-card shadow-card inset-shadow-highlight';
 /**
  * The card surface in the danger tone, for a group of destructive actions.
  *
@@ -112,7 +119,7 @@ export const CARD_SURFACE = 'bg-surface border border-line rounded-xl';
  * percent keeps the controls of a form inside it on a ground they were drawn
  * for. The contrast suite reads the share from this string.
  */
-export const PANEL_DANGER_SURFACE = 'bg-[color-mix(in_srgb,var(--color-danger)_5%,var(--color-surface))] border border-danger/40 rounded-xl';
+export const PANEL_DANGER_SURFACE = 'bg-[color-mix(in_srgb,var(--color-danger)_5%,var(--color-surface))] border border-danger/40 rounded-card shadow-card inset-shadow-highlight';
 /**
  * Card padding by name.
  *
@@ -188,8 +195,12 @@ export const MODAL_PAD = 'px-card py-card-sm';
 export function sectionHeading(level, variant = 'default') {
     // The eyebrow reads the same at both levels. It is a label for the band under
     // it rather than a title, so it does not take the level's size at all.
+    //
+    // It is muted and semibold rather than faint and medium. A band label in the
+    // faintest gray read as metadata beside the stronger page title, so it
+    // stepped up once in weight and once in color.
     if (variant === 'eyebrow')
-        return 'text-xs font-medium uppercase tracking-wide text-faint';
+        return 'text-xs font-semibold uppercase tracking-wider text-muted';
     // Level 2 is the brand ramp's H3, which the guideline describes as the card
     // and group head this is. Its leading and tracking come with it: a --text-*
     // token sets font-size and nothing else, so the ratio has to be asked for by
@@ -215,8 +226,21 @@ export function sectionHeading(level, variant = 'default') {
  *
  * `border-e` and not `border-r`: the shell is the one place a right-to-left
  * locale flips, and a physical border leaves the rule on the wrong edge.
+ *
+ * The sidebar runs from the surface at the top a step toward ink at the foot,
+ * and its edge is a rule that fades in and out at its ends, drawn over a
+ * transparent border. The border keeps the column's width, and a forced
+ * colors scheme, which draws no gradient, paints that border in the system
+ * text color, so the edge is still there.
  */
-export const APP_SIDEBAR = 'h-full shrink-0 flex-col border-e border-line bg-surface transition-[width] duration-base ease-move';
+export const APP_SIDEBAR = 'relative h-full shrink-0 flex-col border-e border-transparent bg-surface bg-sidebar ' +
+    'transition-[width] duration-base ease-move';
+/**
+ * The faded edge of the sidebar, a 1px line laid over its transparent
+ * border. It sets a width of its own, so it stays out of APP_SIDEBAR, which
+ * holds no width at all.
+ */
+export const APP_SIDEBAR_EDGE = 'after:pointer-events-none after:absolute after:inset-y-0 after:-end-px after:w-px after:bg-rule-y';
 /**
  * The sidebar's two widths. Expanded is the 224px column every authed screen
  * had. The rail is the 56px icon column the theme had named and nothing used:
@@ -235,8 +259,16 @@ export const APP_SIDEBAR_RAIL = 'w-nav-rail';
 /**
  * The header bar. Its gutter is the page gutter, so the section name in the
  * header sits directly above the page title under it rather than 8px off.
+ *
+ * The surface is translucent, so the light at the top of the canvas carries
+ * up under it and the header reads as part of the page rather than a lid on
+ * it. Its rule fades out toward the end edge and stays solid where it meets
+ * the brand row's, so the two read as one line across the top. The rule sits
+ * over a transparent border, for the same reason as the sidebar's.
  */
-export const APP_HEADER = 'flex h-header shrink-0 items-center gap-2 border-b border-line bg-surface px-page-x';
+export const APP_HEADER = 'relative flex h-header shrink-0 items-center gap-2 border-b border-transparent bg-surface/70 px-page-x ' +
+    'after:pointer-events-none after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-rule-end ' +
+    'rtl:after:-scale-x-100';
 /**
  * The sidebar's brand row. Exactly as tall as the header beside it: the two
  * meet at the top left corner and a 4px disagreement there reads as a seam.

package/dist/internal/panel.d.ts

@@ -52,8 +52,11 @@
  *
  * No vertical offset and no side. Both belong to placePanel, which measures
  * the room and puts the panel above the anchor when there is none below.
+ *
+ * shadow-popover is the rung above a card, so a menu opened from a card reads
+ * as lifted off it rather than as part of it.
  */
-export declare const PANEL_SURFACE = "absolute z-dropdown overflow-hidden rounded-xl border border-line-strong bg-surface text-fg shadow-2xl";
+export declare const PANEL_SURFACE = "absolute z-dropdown overflow-hidden rounded-xl border border-line-strong bg-surface text-fg shadow-popover inset-shadow-highlight";
 /**
  * The scrolling region inside it.
  *

package/dist/internal/panel.js

@@ -53,8 +53,11 @@ import { TOUCH_GROW } from './touch.js';
  *
  * No vertical offset and no side. Both belong to placePanel, which measures
  * the room and puts the panel above the anchor when there is none below.
+ *
+ * shadow-popover is the rung above a card, so a menu opened from a card reads
+ * as lifted off it rather than as part of it.
  */
-export const PANEL_SURFACE = 'absolute z-dropdown overflow-hidden rounded-xl border border-line-strong bg-surface text-fg shadow-2xl';
+export const PANEL_SURFACE = 'absolute z-dropdown overflow-hidden rounded-xl border border-line-strong bg-surface text-fg shadow-popover inset-shadow-highlight';
 /**
  * The scrolling region inside it.
  *

package/dist/styles/theme.css

@@ -91,6 +91,124 @@
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-2xl: 24px;
+  /* A role rather than a rung: the card, the table frame, the stat, the empty
+   * state and the dialog share it, so the surfaces that sit side by side on a
+   * page agree. One step past xl. The 2xl rung read as a toy at console
+   * density, where a card holds a 14px table rather than a hero. */
+  --radius-card: 20px;
+
+  /* -- Depth: what lifts a surface off the page ------------------- *
+   *  Three colors and a short ladder of shadows built from them. The
+   *  geometry is shared and the colors invert with the theme, so the
+   *  light palette gets the same layering without a second ladder:
+   *  in dark a surface is lit from above by a faint white line along
+   *  its top edge, and in light the white line disappears into the
+   *  white card and the hairline under it does the separating.
+   *
+   *    highlight  the 1px line along a raised surface's top edge
+   *    shade      every drop shadow, and the inner shadow of a well
+   *    glow       the cyan halo around focus and the primary action
+   *
+   *  Each is a shadow or a background image and never a border, so no
+   *  surface changes size when it gains or loses one, and a forced
+   *  colors scheme drops all of them without losing a boundary: every
+   *  surface keeps its 1px border.                                    */
+  --color-highlight: rgb(255 255 255 / 0.12);
+  --color-shade: rgb(2 6 14 / 0.5);
+  --color-glow: rgb(0 212 255 / 0.16);
+  /* The pool of light under the primary button, its own fill color. A token
+   * of its own so paper and a forced colors scheme can switch it off without
+   * touching the brand, which print turns black. */
+  --color-halo: var(--color-brand);
+  /* The place you are: a table's head row, a hovered row and the current nav
+   * row. Brand mixed into the surface rather than laid over it, so it is one
+   * opaque color the contrast suite can measure. Five percent, because a
+   * violet badge in a hovered row lays its own tint over this one, and at
+   * eight its label fell to 4.35:1. */
+  --color-tint: color-mix(in srgb, var(--color-brand) 5%, var(--color-surface));
+
+  /* The ramp, from a control to a dialog. Each rung casts further than the
+   * one below it, so a menu reads above the card it opened from and a dialog
+   * above both. A raised control sits closest. */
+  --shadow-raised: 0 1px 2px 0 var(--color-shade);
+  --shadow-card: 0 1px 2px 0 var(--color-shade), 0 8px 24px -12px var(--color-shade);
+  --shadow-popover: 0 4px 8px -2px var(--color-shade), 0 16px 32px -8px var(--color-shade);
+  --shadow-overlay: 0 12px 24px -6px var(--color-shade), 0 32px 64px -16px var(--color-shade);
+  /* A tight ring that fills the 2px gap between a control and its focus
+   * outline, and a soft halo past it. On a field it sits outside the border. */
+  --shadow-glow: 0 0 0 4px var(--color-glow), 0 0 20px 2px var(--color-glow);
+  /* The primary button glows at rest, a pool of its own color under it, and
+   * the pool grows under the pointer. Brand at a share small enough that the
+   * fill still clears 3:1 against the brightest part of its own halo. */
+  --shadow-primary:
+    0 1px 2px 0 var(--color-shade), 0 6px 18px -6px color-mix(in srgb, var(--color-halo) 30%, transparent);
+  --shadow-primary-hover:
+    0 1px 2px 0 var(--color-shade), 0 0 0 3px var(--color-glow),
+    0 10px 28px -6px color-mix(in srgb, var(--color-halo) 40%, transparent);
+  /* A few pixels of light around a mark, such as the current nav row's bar. */
+  --shadow-mark: 0 0 8px 1px var(--color-glow);
+
+  /* Inner shadows compose with the drop shadows above, because Tailwind keeps
+   * them in a variable of their own: a card is shadow-card and
+   * inset-shadow-highlight together. highlight is a 1px line with no blur,
+   * so it lights the top edge and never sits under a line of text. bevel is
+   * the brighter edge a filled
+   * button carries on its own color, so it does not change with the theme.
+   * well sinks a field into the surface it sits on, at half the shade, so the
+   * field's border still clears 3:1 against the darkest band inside it. */
+  --inset-shadow-highlight: inset 0 1px 0 0 var(--color-highlight);
+  --inset-shadow-bevel: inset 0 1px 0 0 rgb(255 255 255 / 0.22);
+  --inset-shadow-well: inset 0 1px 2px 0 color-mix(in srgb, var(--color-shade) 50%, transparent);
+
+  /* Two gradients and no more. hero is the wash behind a hero or an empty
+   * state: a tenth of violet mixed into the page's own ink, lit from the top
+   * center and falling off to plain ink, so text on it is measured against
+   * both ends. accent is cyan into violet for a mark a few
+   * pixels wide: the active tab and nav indicator and a progress fill. It never
+   * sits behind text. accent-y is the same mark standing upright. */
+  --background-image-hero: radial-gradient(
+    ellipse 90% 80% at 50% 0%,
+    color-mix(in srgb, var(--color-violet) 10%, var(--color-ink)) 0%,
+    var(--color-ink) 100%
+  );
+  --background-image-accent: linear-gradient(90deg, var(--color-brand), var(--color-violet));
+  --background-image-accent-y: linear-gradient(180deg, var(--color-brand), var(--color-violet));
+
+  /* The surfaces' own light, each redeclared for the light palette.
+   *
+   *   canvas   cyan and violet pooled at the top of the app shell's content,
+   *            gone within 400px, behind the page header
+   *   sidebar  the surface at the top, a step toward ink at the foot
+   *   card     a few percent of light at a card's top, fading to nothing,
+   *            laid over the card's own background color so a caller's
+   *            bg-* still shows through it
+   *   lift     white falling off down a filled button, over its own color, so
+   *            the hover and held colors still show through it
+   *   rule-y   a vertical rule that fades in and out at its ends
+   *   rule-end a horizontal rule that fades out toward its end edge
+   *
+   * Every one of them has text on it or beside it, so the contrast suite
+   * measures each text token at each end. The canvas pools are as strong as
+   * they can be while brand-deep and faint still clear 4.5:1 where the two
+   * overlap. */
+  --background-image-canvas:
+    radial-gradient(70% 400px at 15% 0, color-mix(in srgb, var(--color-brand) 6%, transparent), transparent),
+    radial-gradient(60% 400px at 85% 0, color-mix(in srgb, var(--color-violet) 7%, transparent), transparent);
+  --background-image-sidebar: linear-gradient(
+    180deg,
+    var(--color-surface),
+    color-mix(in srgb, var(--color-ink) 60%, var(--color-surface))
+  );
+  --background-image-card: linear-gradient(180deg, rgb(255 255 255 / 0.04), transparent);
+  --background-image-lift: linear-gradient(180deg, rgb(255 255 255 / 0.18), transparent 70%);
+  --background-image-rule-y: linear-gradient(
+    180deg,
+    transparent,
+    var(--color-line) 15%,
+    var(--color-line) 85%,
+    transparent
+  );
+  --background-image-rule-end: linear-gradient(90deg, var(--color-line) 50%, transparent);
 
   /* -- Elevation: the stacking order of everything that floats --- *
    *  Every floating surface in the kit carried a bare z-50, so which
@@ -217,6 +335,10 @@
   --leading-body: 1.55;
   --leading-caption: 1.5;
   --leading-mono: 1.5;
+  /* The console's page title: 32px on a 38px line. H2's 1.15 is drawn for a
+   * marketing headline set in a column, and at 32px over a 14px page it sat
+   * the description too close under the title. */
+  --leading-title: 1.1875;
 
   --tracking-display: -0.04em;
   --tracking-h1: -0.025em;
@@ -424,6 +546,28 @@ html[data-theme='light'] {
   --color-success: #126c34;
   --color-warn: #904207;
   --color-danger: #ab1a1a;
+
+  /* Depth translated rather than copied. A white top line is invisible on a
+   * white card, so the highlight only brightens surface-2, and the shade is a
+   * cool gray at a sixth of the dark one's weight: in light a shadow
+   * separates, it does not darken. The glow is the mark's #0099c4 face, since
+   * the deep brand reads as a gray halo on white. */
+  --color-highlight: rgb(255 255 255 / 0.8);
+  --color-shade: rgb(16 24 40 / 0.08);
+  --color-glow: rgb(0 153 196 / 0.22);
+
+  /* A cool tint at the top of the page rather than a glow: on white, light
+   * cannot be added, so the wash darkens a little toward the brand. The card's
+   * layer darkens toward the page's ink at the foot, the same lit top,
+   * reached from the other side. */
+  --background-image-canvas:
+    radial-gradient(70% 400px at 15% 0, color-mix(in srgb, var(--color-brand) 6%, transparent), transparent),
+    radial-gradient(60% 400px at 85% 0, color-mix(in srgb, var(--color-violet) 5%, transparent), transparent);
+  --background-image-card: linear-gradient(
+    180deg,
+    transparent,
+    color-mix(in srgb, var(--color-ink) 70%, transparent)
+  );
 }
 
 /*
@@ -437,6 +581,38 @@ html[data-theme='light'] {
     --color-mark-ink: CanvasText;
     --color-mark-foot: GrayText;
     --color-mark-step: GrayText;
+    /* The browser drops box shadows and gradients here already. Naming it
+     * keeps a browser that does not from painting the cyan halo or a wash
+     * that no longer matches the forced canvas. */
+    --color-glow: transparent;
+    --color-halo: transparent;
+    --background-image-hero: none;
+    --background-image-accent: none;
+    --background-image-accent-y: none;
+    --background-image-canvas: none;
+    --background-image-sidebar: none;
+    --background-image-card: none;
+    --background-image-lift: none;
+    --background-image-rule-y: none;
+    --background-image-rule-end: none;
+  }
+
+  /*
+   * A field, a menu row and a nav row show focus with a ring, and a ring is a
+   * box shadow, which a forced colors scheme removes. The reader was left with
+   * no focus indicator on exactly the controls typed into. An outline in the
+   * system highlight takes its place. Unlayered, so it wins over the
+   * outline-none those controls carry. A control that draws its ring inset
+   * does so because a scrolling box would clip anything outside it, so its
+   * outline sits inside too.
+   */
+  :focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+
+  [class*='focus-visible:ring-inset']:focus-visible {
+    outline-offset: -2px;
   }
 }
 
@@ -512,6 +688,18 @@ html[data-theme='light'] {
     outline-offset: 2px;
   }
 
+  /*
+   * The glow around the ring. It is a shadow, so the ring above stays the
+   * indicator that clears 3:1 and the glow only adds to it. Any box shadow a
+   * component states wins over this one, which is why a raised button and a
+   * field ask for the glow by name as well. A surface focused only from script
+   * (tabindex -1: a dialog, the main region after the skip link) is not a
+   * control and takes no halo.
+   */
+  :focus-visible:not([tabindex='-1']) {
+    box-shadow: var(--shadow-glow);
+  }
+
   :focus:not(:focus-visible) {
     outline: none;
   }
@@ -614,6 +802,21 @@ html[data-theme='light'] {
     --color-success: #000000;
     --color-warn: #000000;
     --color-danger: #000000;
+    /* Paper has no light source, and a printer renders a soft shadow as a gray
+     * smear around every card. */
+    --color-highlight: transparent;
+    --color-shade: transparent;
+    --color-glow: transparent;
+    --color-halo: transparent;
+    --background-image-hero: none;
+    --background-image-accent: none;
+    --background-image-accent-y: none;
+    --background-image-canvas: none;
+    --background-image-sidebar: none;
+    --background-image-card: none;
+    --background-image-lift: none;
+    --background-image-rule-y: none;
+    --background-image-rule-end: none;
     color-scheme: light;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.45.0",
+  "version": "0.46.0",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",