@rozie-ui/dialog-svelte 0.0.0-stage → 0.2.4

package/src/themes/material.css

@@ -0,0 +1,37 @@
+/*
+ * @rozie-ui/dialog — Material Design 3 bridge.
+ *
+ * Maps the dialog tokens onto the MD3 system color roles (`--md-sys-color-*`)
+ * emitted by material-web / @material/material-color-utilities theme builders.
+ * Falls back to the baseline M3 light palette when those vars are absent, so it
+ * renders correctly even without a generated theme.
+ *
+ *   import '@rozie-ui/dialog-svelte/themes/material.css';
+ *
+ * M3 dialogs are heavily rounded (28dp), use the surface-container-high color,
+ * and a scrim at ~32% of the scrim color role.
+ *
+ * HOW IT MAPS. This bridge declares no public token: it re-declares the private wiring of
+ * each token it maps, with the design system's variable as the fallback
+ * (`--rdg-x: var(--rozie-dialog-x, <design-system variable>)`). The component reads every token
+ * public-first, so on all six targets:
+ *  - a public `--rozie-dialog-*` token set on any ancestor (or on the component) wins;
+ *  - otherwise the design system's variable applies, resolved AT the component (`.rozie-dialog`
+ *    and the Lit host `rozie-dialog`), so a `.dark` / `data-bs-theme` wrapper narrower than
+ *    <html> is followed;
+ *  - a Lit component nested in another shadow root, which no document selector reaches,
+ *    inherits the `:root` copy instead: there the design system's variables are read at
+ *    the document root.
+ * This rule outranks base.css's `:where(:root)` wiring, so import order does not matter.
+ */
+:root,
+.rozie-dialog,
+rozie-dialog {
+  --rdg-bg: var(--rozie-dialog-bg, var(--md-sys-color-surface-container-high, #ece6f0));
+  --rdg-color: var(--rozie-dialog-color, var(--md-sys-color-on-surface, #1d1b20));
+  --rdg-border: var(--rozie-dialog-border, none);
+  --rdg-radius: var(--rozie-dialog-radius, 1.75rem);
+
+  --rdg-backdrop-bg: var(--rozie-dialog-backdrop-bg, color-mix(in srgb, var(--md-sys-color-scrim, #000) 32%, transparent));
+  --rdg-shadow: var(--rozie-dialog-shadow, 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.3));
+}

package/src/themes/shadcn.css

@@ -0,0 +1,38 @@
+/*
+ * @rozie-ui/dialog — shadcn/ui (Radix) bridge.
+ *
+ * Maps the dialog tokens onto the shadcn/ui CSS variables defined on `:root`
+ * / `.dark` (the classic HSL-channel convention: `--background: 0 0% 100%`
+ * consumed as `hsl(var(--background))`). Because it reads those vars live, the
+ * dialog automatically follows light/dark theme switches.
+ *
+ *   import '@rozie-ui/dialog-svelte/themes/shadcn.css';
+ *
+ * If your shadcn setup predates the `hsl()`-wrapping convention (Tailwind v4 /
+ * oklch tokens emit pre-formed colors), drop the `hsl(...)` wrappers below.
+ *
+ * HOW IT MAPS. This bridge declares no public token: it re-declares the private wiring of
+ * each token it maps, with the design system's variable as the fallback
+ * (`--rdg-x: var(--rozie-dialog-x, <design-system variable>)`). The component reads every token
+ * public-first, so on all six targets:
+ *  - a public `--rozie-dialog-*` token set on any ancestor (or on the component) wins;
+ *  - otherwise the design system's variable applies, resolved AT the component (`.rozie-dialog`
+ *    and the Lit host `rozie-dialog`), so a `.dark` / `data-bs-theme` wrapper narrower than
+ *    <html> is followed;
+ *  - a Lit component nested in another shadow root, which no document selector reaches,
+ *    inherits the `:root` copy instead: there the design system's variables are read at
+ *    the document root.
+ * This rule outranks base.css's `:where(:root)` wiring, so import order does not matter.
+ */
+:root,
+.rozie-dialog,
+rozie-dialog {
+  --rdg-bg: var(--rozie-dialog-bg, hsl(var(--background, 0 0% 100%)));
+  --rdg-color: var(--rozie-dialog-color, hsl(var(--foreground, 222.2 84% 4.9%)));
+  --rdg-border: var(--rozie-dialog-border, 1px solid hsl(var(--border, 214.3 31.8% 91.4%)));
+  --rdg-radius: var(--rozie-dialog-radius, var(--radius, 0.5rem));
+
+  /* shadcn dialogs use a soft, low scrim */
+  --rdg-backdrop-bg: var(--rozie-dialog-backdrop-bg, hsl(var(--background, 0 0% 0%) / 0.8));
+  --rdg-shadow: var(--rozie-dialog-shadow, 0 10px 38px hsl(var(--foreground, 222.2 84% 4.9%) / 0.18));
+}