@glasshome/ui 1.2.0 → 1.4.0

package/SPEC.md

@@ -34,11 +34,12 @@ Two-tone surfaces add `.glass-edge-gradient`: border-color cannot gradient, so
 the class swaps the border for a masked 1px ring running tone-1→tone-2 at the
 `.glass-tint` edge alpha (element must be positioned).
 | `--glass-light` | number | 0.05 | top-left white sheen (`.glass-tint` raises to 0.16) |
+| `--glass-sheen` | `<x> <y>` | 120% 120% | sheen ellipse size; pin lengths on edge-anchored panels, where a percentage stretches into a blob over a flat field (side sheets use `600px 300px`) |
 | `--glass-shade` | number | 0 | bottom-right dark shade (light-theme depth) |
 | `--glass-glow` | % | 16% | inner tone glow |
 | `--glass-drop` | % | 20% | tone drop shadow |
-| `--glass-lift` | number | 0 | elevation shadow (cards 0.45, overlays 0.55) |
-| `--glass-rim` | number | 1 | bevel strength 0..1 (cards/overlays 0.3) |
+| `--glass-lift` | number | 0 | elevation shadow (cards 0.45, overlays 0.6) |
+| `--glass-rim` | number | 1 | bevel strength 0..1 (cards 0.3, overlays 1) |
 | `--glass-text` | % | 65% | tinted text mix, used by `.glass-tint` only |
 
 `.glass` also publishes `--surface-tone`, an ordinary **inheriting** property
@@ -52,9 +53,12 @@ The `.glass` formula is deliberately **unlayered**, so it owns
 border/background/box-shadow on the element: `bg-*`, `border-*`, and `shadow-*`
 utilities on a glass element are no-ops. Tune via knobs instead.
 
-`backdrop-blur` is not part of the formula. Cards add `CARD_BLUR`
-(`--glass-blur` px knob); toasts and other transform-animated surfaces must not
-blur (Chromium renders black mid-animation).
+`backdrop-blur` is not part of the formula. Cards add `CARD_BLUR` and overlays
+`OVERLAY_BLUR` (both read the `--glass-blur` px knob); toasts and other
+transform-animated surfaces must not blur (Chromium renders black
+mid-animation), and a surface that skips the blur takes an opaque fill
+(`CARD_SURFACE_OPAQUE`, `OVERLAY_SURFACE_OPAQUE`) — a translucent fill with
+nothing blurred behind it is just see-through.
 
 Mixing rules: tone washes mix in **srgb** (oklch drags a tone mixed toward
 transparent down to mud); tinted text mixes in **oklab** (no hue channel, so a
@@ -67,6 +71,8 @@ tone desaturates without swinging yellow — `glassToneText()`).
 | `CARD_SURFACE` / `CARD_SURFACE_OPAQUE` | lib/card-classes.ts | panels; via `<Card>` |
 | `CARD_SURFACE_BASE` + `CARD_BLUR` | lib/card-classes.ts | perf-blur gating (dash SectionCard) |
 | `OVERLAY_SURFACE` | lib/overlay-classes.ts | anything floating: menus, dialogs, sheets, tooltips |
+| `OVERLAY_SURFACE_BASE` + `OVERLAY_BLUR` | lib/overlay-classes.ts | perf-blur gating, same split as the card recipe |
+| `OVERLAY_SURFACE_OPAQUE` | lib/overlay-classes.ts | drag-animated overlays that cannot blur (BottomSheet) |
 | `SCRIM_CLASS` | lib/overlay-classes.ts | modal backdrop (BottomSheet keeps its unblurred scrim for mobile perf) |
 | `INPUT_SURFACE` / `INPUT_CLASS` | lib/input-classes.ts | text fields + pickers (concave) |
 | `FIELD_CHROME` | lib/input-classes.ts | toggle chrome and rails (checkbox box, radio ring, switch track, slider rail, chart wells) |

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { CAROUSEL_DOTS, CAROUSEL_VIEWPORT, type CarouselTransition, carouselDot,
 export { glassToneText, toneTextMix } from "./lib/glass-tone.js";
 export { FIELD_CHROME, INPUT_CLASS, INPUT_SURFACE } from "./lib/input-classes.js";
 export { LOGO_DEFAULT_SIZE, LOGO_DEFAULT_SRC, LOGO_DEFAULT_SUB, LOGO_MARK_CLASS, LOGO_MARK_PX, LOGO_NAME_CLASS, LOGO_ROOT_CLASS, LOGO_SIZES, LOGO_STACK_CLASS, LOGO_SUB_CLASS, type LogoSize, } from "./lib/logo-lockup.js";
-export { OVERLAY_SURFACE, SCRIM_CLASS } from "./lib/overlay-classes.js";
+export { OVERLAY_BLUR, OVERLAY_SURFACE, OVERLAY_SURFACE_BASE, OVERLAY_SURFACE_OPAQUE, SCRIM_CLASS, } from "./lib/overlay-classes.js";
 export { SECTION_INNER_RADIUS, SECTION_OUTER_RADIUS, SECTION_PADDING, SECTION_ROW_CLASS, } from "./lib/section-tokens.js";
 export { createIsMobile } from "./lib/use-is-mobile.js";
 export { cn } from "./lib/utils.js";

package/dist/index.js

@@ -1,13 +1,13 @@
-import { $ as e, B as t, C as n, D as r, E as i, H as a, I as o, J as s, K as c, L as l, Q as u, R as d, S as f, T as p, U as m, V as h, W as g, X as _, Y as v, Z as y, _ as b, a as x, b as S, c as C, d as w, et as T, f as E, g as D, h as O, i as k, k as A, l as j, m as M, n as N, nt as P, o as F, p as I, q as L, r as R, rt as z, s as B, t as V, tt as H, u as U, v as W, w as G, x as K, y as q } from "./utils-C2Qf83PT.js";
-import { createSignal as J, onCleanup as Y, onMount as X } from "solid-js";
+import { $ as e, A as t, B as n, C as r, D as i, E as a, G as o, K as s, M as c, O as l, Q as u, S as d, T as f, U as p, V as m, W as h, X as g, Y as _, Z as v, _ as y, a as b, at as x, b as S, c as C, d as w, et as T, f as E, g as D, h as O, i as ee, it as k, k as A, l as j, m as M, n as N, nt as P, o as F, ot as I, p as L, q as R, r as z, rt as B, s as V, t as H, tt as U, u as W, v as G, w as K, x as q, y as J, z as Y } from "./utils-B020EZLJ.js";
+import { createSignal as X, onCleanup as Z, onMount as Q } from "solid-js";
 //#region src/lib/use-is-mobile.ts
-var Z = 768;
-function Q() {
-	let [e, t] = J(void 0);
-	return X(() => {
-		let e = window.matchMedia(`(max-width: ${Z - 1}px)`), n = () => t(window.innerWidth < Z);
-		e.addEventListener("change", n), t(window.innerWidth < Z), Y(() => e.removeEventListener("change", n));
+var $ = 768;
+function te() {
+	let [e, t] = X(void 0);
+	return Q(() => {
+		let e = window.matchMedia(`(max-width: ${$ - 1}px)`), n = () => t(window.innerWidth < $);
+		e.addEventListener("change", n), t(window.innerWidth < $), Z(() => e.removeEventListener("change", n));
 	}), e;
 }
 //#endregion
-export { c as ALERT_CLASS, L as ALERT_CONTENT_CLASS, s as ALERT_DESCRIPTION_CLASS, v as ALERT_ICON_BG_CLASS, _ as ALERT_ICON_CLASS, y as ALERT_ICON_PATHS, u as ALERT_TITLE_CLASS, e as ALERT_TONES, h as BUTTON_DEFAULT_CLASS, a as BUTTON_OUTLINE_CLASS, A as CARD_BLUR, o as CARD_SURFACE, l as CARD_SURFACE_BASE, d as CARD_SURFACE_OPAQUE, n as CAROUSEL_DOTS, G as CAROUSEL_VIEWPORT, W as FIELD_CHROME, m as ICON_BUTTON_CLASS, q as INPUT_CLASS, S as INPUT_SURFACE, C as LOGO_DEFAULT_SIZE, j as LOGO_DEFAULT_SRC, U as LOGO_DEFAULT_SUB, w as LOGO_MARK_CLASS, E as LOGO_MARK_PX, I as LOGO_NAME_CLASS, M as LOGO_ROOT_CLASS, O as LOGO_SIZES, D as LOGO_STACK_CLASS, b as LOGO_SUB_CLASS, F as OVERLAY_SURFACE, B as SCRIM_CLASS, N as SECTION_INNER_RADIUS, R as SECTION_OUTER_RADIUS, k as SECTION_PADDING, x as SECTION_ROW_CLASS, t as TRACK_SURFACE, T as alertBorder, H as alertFill, P as alertIconBgStyle, z as alertIconFill, g as buttonVariants, p as carouselDot, i as carouselItem, r as carouselTrack, V as cn, Q as createIsMobile, K as glassToneText, f as toneTextMix };
+export { _ as ALERT_CLASS, g as ALERT_CONTENT_CLASS, v as ALERT_DESCRIPTION_CLASS, u as ALERT_ICON_BG_CLASS, e as ALERT_ICON_CLASS, T as ALERT_ICON_PATHS, U as ALERT_TITLE_CLASS, P as ALERT_TONES, h as BUTTON_DEFAULT_CLASS, o as BUTTON_OUTLINE_CLASS, c as CARD_BLUR, Y as CARD_SURFACE, n as CARD_SURFACE_BASE, m as CARD_SURFACE_OPAQUE, a as CAROUSEL_DOTS, i as CAROUSEL_VIEWPORT, q as FIELD_CHROME, s as ICON_BUTTON_CLASS, d as INPUT_CLASS, r as INPUT_SURFACE, w as LOGO_DEFAULT_SIZE, E as LOGO_DEFAULT_SRC, L as LOGO_DEFAULT_SUB, M as LOGO_MARK_CLASS, O as LOGO_MARK_PX, D as LOGO_NAME_CLASS, y as LOGO_ROOT_CLASS, G as LOGO_SIZES, J as LOGO_STACK_CLASS, S as LOGO_SUB_CLASS, F as OVERLAY_BLUR, V as OVERLAY_SURFACE, C as OVERLAY_SURFACE_BASE, j as OVERLAY_SURFACE_OPAQUE, W as SCRIM_CLASS, N as SECTION_INNER_RADIUS, z as SECTION_OUTER_RADIUS, ee as SECTION_PADDING, b as SECTION_ROW_CLASS, p as TRACK_SURFACE, B as alertBorder, k as alertFill, x as alertIconBgStyle, I as alertIconFill, R as buttonVariants, l as carouselDot, A as carouselItem, t as carouselTrack, H as cn, te as createIsMobile, K as glassToneText, f as toneTextMix };

package/dist/lib/button-variants.d.ts

@@ -39,7 +39,7 @@ export declare const buttonVariants: import("cva").CVAComponent<Omit<{
             none: string;
         };
     };
-    defaultVariants: Omit<{}, "variant" | "size"> & {
+    defaultVariants: Omit<{}, "size" | "variant"> & {
         variant: "default";
         size: "default";
     };

package/dist/lib/overlay-classes.d.ts

@@ -1,2 +1,5 @@
-export declare const OVERLAY_SURFACE = "glass [--glass-base:var(--popover)] [--glass-rim:0.3] [--glass-lift:0.55]";
-export declare const SCRIM_CLASS = "bg-background/70 backdrop-blur-sm";
+export declare const OVERLAY_BLUR = "backdrop-blur-[var(--glass-blur,20px)] backdrop-saturate-[1.6]";
+export declare const OVERLAY_SURFACE_BASE = "glass [--glass-rim:1] [--glass-lift:0.6] [--glass-light:0.05] [--glass-edge:color-mix(in_srgb,var(--border)_90%,transparent)] [--glass-base:color-mix(in_srgb,var(--popover)_75%,transparent)]";
+export declare const OVERLAY_SURFACE = "glass [--glass-rim:1] [--glass-lift:0.6] [--glass-light:0.05] [--glass-edge:color-mix(in_srgb,var(--border)_90%,transparent)] [--glass-base:color-mix(in_srgb,var(--popover)_75%,transparent)] backdrop-blur-[var(--glass-blur,20px)] backdrop-saturate-[1.6]";
+export declare const OVERLAY_SURFACE_OPAQUE = "glass [--glass-rim:1] [--glass-lift:0.6] [--glass-light:0.05] [--glass-edge:color-mix(in_srgb,var(--border)_90%,transparent)] [--glass-base:var(--popover)]";
+export declare const SCRIM_CLASS = "bg-background/70 backdrop-blur-md";

package/dist/solid/alert-dialog.d.ts

@@ -21,6 +21,6 @@ declare const AlertDialogDescription: Component<ComponentProps<typeof AlertDialo
  *  buttonVariants() call through `class` cannot work, because the variants
  *  carry tone as arbitrary custom properties that tailwind-merge keeps side by
  *  side, leaving the later stylesheet rule to win. */
-declare const AlertDialogAction: Component<ComponentProps<typeof AlertDialogPrimitive.CloseButton> & Pick<VariantProps<typeof buttonVariants>, "variant" | "size">>;
+declare const AlertDialogAction: Component<ComponentProps<typeof AlertDialogPrimitive.CloseButton> & Partial<Pick<VariantProps<typeof buttonVariants>, "variant" | "size">>>;
 declare const AlertDialogCancel: Component<ComponentProps<typeof AlertDialogPrimitive.CloseButton>>;
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, };