@mkbabb/glass-ui 0.2.0 → 2.0.0

package/dist/styles/animations.css

@@ -0,0 +1,298 @@
+/* Shared @keyframes — global animations used across projects */
+
+/* ── Floating panel entrance ── */
+@keyframes floating-panel-in {
+    from {
+        opacity: 0;
+        filter: blur(4px);
+        scale: 0.96;
+    }
+    to {
+        opacity: 1;
+        filter: blur(0);
+        scale: 1;
+    }
+}
+
+/* ── Collapsible (reka-ui) ── */
+@keyframes collapsible-open {
+    from {
+        height: 0;
+        opacity: 0;
+    }
+    to {
+        height: var(--reka-collapsible-content-height);
+        opacity: 1;
+    }
+}
+
+@keyframes collapsible-close {
+    from {
+        height: var(--reka-collapsible-content-height);
+        opacity: 1;
+    }
+    to {
+        height: 0;
+        opacity: 0;
+    }
+}
+
+/* ── Tooltip entrance ── */
+@keyframes tooltip-in {
+    from {
+        opacity: 0;
+        transform: scale(0.96);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* ── Generic fade-in ── */
+@keyframes fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(6px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* ── Scale-in ── */
+@keyframes scale-in {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* ── Slide-up ── */
+@keyframes slide-up {
+    from {
+        opacity: 0;
+        transform: translateY(16px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* ── Dock entrance ── */
+@keyframes dock-in {
+    from {
+        opacity: 0;
+        transform: translateY(14px) scale(0.96);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+/* ── Shimmer sweep (background-position for generated animation utilities) ── */
+@keyframes shimmer-sweep {
+    0% {
+        background-position: -200% 0;
+    }
+    100% {
+        background-position: 200% 0;
+    }
+}
+
+/* ── Shimmer sweep (background-position for shimmer utilities) ── */
+@keyframes shimmer {
+    0% { background-position: 250% 0; }
+    100% { background-position: -250% 0; }
+}
+
+/* ── Shake (horizontal ±4px for .shake-error) ── */
+@keyframes shake {
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+        transform: translateX(-4px);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+        transform: translateX(4px);
+    }
+}
+
+/* ── Gold shimmer: metallic text highlight sweep ── */
+
+@keyframes gold-shimmer-slide {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+/* ── Sparkle sweep: four-point star traverses a surface diagonally ──
+ *
+ * Reserved for the chassis primary-action hover (dock-tab-button[data-tier="primary"])
+ * and the `Complete!` shimmer cycle. Single keyframe, ~600ms per pass; the
+ * consumer rule sets the duration and easing. Reduced-motion guard at the
+ * consumer site (per surface — not all sparkle uses share the same gate).
+ */
+@keyframes sparkle-sweep {
+    0% {
+        transform: translate(-30%, -30%) scale(0.5);
+        opacity: 0;
+    }
+    25% {
+        opacity: 1;
+    }
+    100% {
+        transform: translate(180%, 180%) scale(1.2);
+        opacity: 0;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    @keyframes sparkle-sweep {
+        0%, 100% { opacity: 0; transform: none; }
+    }
+}
+
+/* ── Pulse dot bounce: dots variant of <Pulse> ──
+ *
+ * Three-dot loading indicator. Opacity 0.35 ↔ 1, scale 0.8 ↔ 1.2. Consumer
+ * (.pulse-dot in Pulse.vue) sets duration via --pulse-duration and staggers
+ * via animation-delay using --pulse-index.
+ */
+@keyframes pulse-dot-bounce {
+    0%, 80%, 100% { opacity: 0.35; transform: scale(0.8); }
+    40%           { opacity: 1;    transform: scale(1.2); }
+}
+
+/* ── Pulse ring spin: ring variant of <Pulse> ──
+ *
+ * Continuous-rotation spinner. Consumer (.pulse-ring in Pulse.vue) sets
+ * duration via --pulse-duration.
+ */
+@keyframes pulse-ring-spin {
+    to { transform: rotate(360deg); }
+}
+
+/* ── Typewriter cursor blink: cursor for <TypewriterText> ──
+ *
+ * Hard-edged step blink (50/50 duty). Consumer (.tw-cursor--blink in
+ * TypewriterText.vue) sets the 1.06s step-end timing.
+ */
+@keyframes typewriter-blink {
+    0%, 50%   { opacity: 1; }
+    51%, 100% { opacity: 0; }
+}
+
+/* ── Ambient pulse: aura variant of <Pulse> ──
+ *
+ * Slow breathing cycle for the surface-scope `Pulse variant="aura"`.
+ * Tokens at tokens.css §AMBIENT MOTION drive the duration/scale/easing
+ * so consumers do not redefine the rhythm per site. The breath travels
+ * from scale-min @ opacity-min → scale-max @ opacity-max → back, with
+ * a 6s default cycle. The Pulse.vue scoped block consumes this keyframe
+ * directly; consumer-side rules must not re-declare it.
+ *
+ * Reduced-motion fallback is in Pulse.vue (animation: none + static
+ * mid-cycle render) — the keyframe itself doesn't gate, but it COULD
+ * collapse here if a future consumer composes `ambient-pulse` outside
+ * the Pulse primitive. The current contract: every aura caller goes
+ * through <Pulse variant="aura">.
+ */
+@keyframes ambient-pulse {
+    0%,
+    100% {
+        transform: scale(var(--animate-ambient-pulse-scale-min, 1));
+        opacity: var(--pulse-aura-opacity-min, 0.55);
+    }
+    50% {
+        transform: scale(var(--animate-ambient-pulse-scale-max, 1.15));
+        opacity: var(--pulse-aura-opacity-max, 0.95);
+    }
+}
+
+/* ── Scrim breath: gentle opacity oscillation for portaled dialog scrims ──
+ *
+ * Canon keyframe for the `--scrim-animation: scrim-breath 6s ease-in-out
+ * infinite` shorthand that CellularWarningDialog (and any DialogContent
+ * consumer that opts in) writes onto the portaled overlay via
+ * `<ModalOverlay scrim-animation="…">`. The cascade rule below
+ * (`[data-scrim-animation]`) consumes the shorthand; this keyframe
+ * resolves the animation-name half of that shorthand.
+ *
+ * Amplitude is ~6% (0.92 → 0.98), slow enough to read as breath rather
+ * than throb. The var() fallbacks let a consumer retune the band
+ * (`--scrim-opacity-min` / `--scrim-opacity-max`) without re-declaring
+ * the keyframe. Duration + easing live in the shorthand the consumer
+ * writes — not here — so the rhythm stays composable.
+ *
+ * Reduced-motion fallback is double-gated: the cascade rule below sets
+ * `animation: none` under PRM (primary gate), AND the keyframe itself
+ * collapses to a flat opacity under PRM (defensive — protects future
+ * consumers that compose `scrim-breath` outside `[data-scrim-animation]`).
+ * Mirrors the `sparkle-sweep` PRM convention above.
+ */
+@keyframes scrim-breath {
+    0%, 100% { opacity: var(--scrim-opacity-min, 0.92); }
+    50%      { opacity: var(--scrim-opacity-max, 0.98); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    @keyframes scrim-breath {
+        0%, 100% { opacity: var(--scrim-opacity-min, 0.92); }
+    }
+}
+
+/* ── Scrim animation cascade (AJ-W4-δ) ─────────────────────────────────
+ *
+ * reka-ui's DialogPortal teleports the overlay outside the consumer's
+ * component subtree, so a consumer-side scoped `--scrim-animation`
+ * declaration on a parent of `<Dialog>` never reaches the portaled
+ * `<DialogOverlay>`. The publisher closes the gap: `<ModalOverlay
+ * scrim-animation="…">` writes the value to the typed `--scrim-animation`
+ * cascade variable on the overlay's inline style + tags the element with
+ * `data-scrim-animation`, and this rule consumes the variable.
+ *
+ * The rule lives in animations.css (global, not scoped) precisely because
+ * the portaled element sits outside any scoped-style boundary. The
+ * `data-scrim-animation` attribute selector is opt-in: only overlays that
+ * pass the prop receive an animation declaration, so the default scrim
+ * (which relies on `tw-animate-css`'s data-state fade) stays untouched.
+ *
+ * The two animation grammars compose cleanly:
+ *   - `[data-state]` keys the `tw-animate-css` enter/exit fade
+ *     (open → fade-in, closed → fade-out)
+ *   - `[data-scrim-animation]` keys this long-running scrim-breath
+ *     (independent rhythm, runs while the dialog is open)
+ *
+ * Distinct selectors → no cascade fight. The breath plays underneath the
+ * data-state fade because the latter wins via shorter-lived specificity
+ * during transitions; the former resumes once the data-state transition
+ * settles.
+ *
+ * Reduced-motion contract: PRM users retire the breath. The fallback
+ * resolves to `none` via the var() default + the @media block below.
+ */
+[data-scrim-animation] {
+    animation: var(--scrim-animation, none);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    [data-scrim-animation] {
+        animation: none;
+    }
+}

package/dist/styles/cards.css

@@ -0,0 +1,44 @@
+/* Card-feature styles — the coherent home for card surface decorations.
+ * `.cartoon-card` + `.elevated-card` recipe classes were removed at C.W5 per the
+ * W0 overfitting audit (Card's tier system covers both). `cartoon-surface` is the
+ * Q.W3 Lane B re-model of the former `.glass-cartoon` recipe: a decoration-only
+ * utility (no tier of its own), relocated here from glass.css — which now holds
+ * only the 5-rung glass ladder. */
+
+@layer components {
+    /* Paper texture overlay */
+    .paper-texture {
+        background-image: var(--paper-clean-texture);
+        background-repeat: repeat;
+        background-size: var(--paper-texture-size);
+        background-blend-mode: multiply;
+    }
+
+    :where(.dark) .paper-texture {
+        background-blend-mode: screen;
+    }
+}
+
+/* ── Cartoon surface decoration ───────────────────────────────────
+   The Memphis-sticker register. Composes ON TOP of a glass tier — it is
+   NOT itself a tier. The former `.glass-cartoon` recipe declared
+   `var(--glass-bg-cartoon, var(--glass-bg-quiet))` etc., but the
+   `--glass-{bg,blur,border}-cartoon` tokens were never defined anywhere
+   in src/ (Qχ §2): the fall-through always resolved to the `quiet` rung.
+   That phantom-token layer is dropped — background / backdrop-filter /
+   border-color come from the `glass-${tier}` class the host already
+   applies. `cartoon-surface` carries ONLY the three real deltas over a
+   bare tier: a 2px border weight, an offset-stamp shadow, and a
+   hover-lift. <Card surface="cartoon"> layers it onto its resolved tier. */
+@utility cartoon-surface {
+    border-width: 2px;
+    box-shadow: var(--shadow-cartoon-md);
+    transition:
+        transform var(--duration-normal) var(--ease-apple-spring),
+        box-shadow var(--duration-normal) var(--ease-apple);
+
+    &:hover:not(:disabled) {
+        transform: translate(var(--lift-sm), var(--lift-sm));
+        box-shadow: var(--shadow-cartoon-lg);
+    }
+}

package/dist/styles/disco-glyph.css

@@ -0,0 +1,26 @@
+/* disco-glyph.css — host rule for <DiscoGlyph>.
+ *
+ * Per P.W3 sub-B. The component renders an inline <svg> with a faceted
+ * gradient + specular cap painted over the silhouette path. The host
+ * rule scopes layout (block flow, inherit colour) and exposes a
+ * minimal opt-in selector for phase-tinted state styling.
+ *
+ * Self-contained sheet; no token additions. Consumers may override
+ * via the `--phase-color` cascade established by the chassis layer.
+ */
+
+@layer components {
+    .disco-glyph {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        color: currentColor;
+        line-height: 0;
+    }
+
+    .disco-glyph--phase-tinted {
+        /* Hook for consumers that animate hue under phase changes;
+         * the gradient stops already read currentColor or an explicit
+         * phaseColor prop, so this class stays empty by default. */
+    }
+}