@mkbabb/glass-ui 0.2.0 → 2.0.0

package/src/fonts/fira-code/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2014, The Fira Code Project Authors (https://github.com/tonsky/FiraCode)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/fonts/plus-jakarta-sans/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Plus Jakarta Sans Project Authors (https://github.com/tokotype/PlusJakartaSans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/styles/animations.css

@@ -14,100 +14,6 @@
     }
 }
 
-/* ── Dialog open / close ── */
-@keyframes dialog-in {
-    from {
-        opacity: 0;
-        transform: scale(0.95) translateY(8px);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1) translateY(0);
-    }
-}
-
-@keyframes dialog-out {
-    from {
-        opacity: 1;
-        transform: scale(1) translateY(0);
-    }
-    to {
-        opacity: 0;
-        transform: scale(0.95) translateY(8px);
-    }
-}
-
-/* ── Dialog ↔ drawer transitions ── */
-@keyframes dialog-out-to-drawer {
-    from {
-        opacity: 1;
-        transform: scale(1) translateX(0);
-    }
-    to {
-        opacity: 0;
-        transform: scale(0.35) translateX(-120%);
-    }
-}
-
-@keyframes dialog-in-from-drawer {
-    from {
-        opacity: 0;
-        transform: scale(0.35) translateX(-120%);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1) translateX(0);
-    }
-}
-
-@media (width < 640px) {
-    @keyframes dialog-out-to-drawer {
-        from {
-            opacity: 1;
-            transform: scale(1) translateY(0);
-        }
-        to {
-            opacity: 0;
-            transform: scale(0.5) translateY(60%);
-        }
-    }
-    @keyframes dialog-in-from-drawer {
-        from {
-            opacity: 0;
-            transform: scale(0.5) translateY(60%);
-        }
-        to {
-            opacity: 1;
-            transform: scale(1) translateY(0);
-        }
-    }
-}
-
-/* ── Card menu entrance ── */
-@keyframes card-menu-in {
-    from {
-        opacity: 0;
-        filter: blur(4px);
-        transform: translateX(-100%) scale(0.96);
-    }
-    to {
-        opacity: 1;
-        filter: blur(0);
-        transform: translateX(-100%) scale(1);
-    }
-}
-
-/* ── Golden shimmer ── */
-@keyframes golden-shimmer {
-    0%,
-    100% {
-        background-position: 100% 100%;
-    }
-    50% {
-        background-position: 0% 0%;
-    }
-}
-
 /* ── Collapsible (reka-ui) ── */
 @keyframes collapsible-open {
     from {
@@ -179,17 +85,19 @@
     }
 }
 
-/* ── Rainbow hue rotate ── */
-@keyframes rainbow-hue {
+/* ── Dock entrance ── */
+@keyframes dock-in {
     from {
-        filter: hue-rotate(0deg);
+        opacity: 0;
+        transform: translateY(14px) scale(0.96);
     }
     to {
-        filter: hue-rotate(360deg);
+        opacity: 1;
+        transform: translateY(0) scale(1);
     }
 }
 
-/* ── Shimmer sweep (background-position for .shimmer-text) ── */
+/* ── Shimmer sweep (background-position for generated animation utilities) ── */
 @keyframes shimmer-sweep {
     0% {
         background-position: -200% 0;
@@ -199,6 +107,12 @@
     }
 }
 
+/* ── 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%,
@@ -220,14 +134,165 @@
     }
 }
 
-/* ── Kinetic typography: weight breathing ── */
-@keyframes weight-breathe {
-    0%, 100% { font-variation-settings: "wght" 300; }
-    50%      { font-variation-settings: "wght" 500; }
+/* ── 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); }
 }
 
-/* ── Kinetic typography: scroll-driven weight reveal ── */
-@keyframes weight-reveal {
-    from { font-variation-settings: "wght" 100; opacity: 0.3; }
-    to   { font-variation-settings: "wght" 400; opacity: 1; }
+/* ── 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/src/styles/cards.css

@@ -1,49 +1,11 @@
-/* Card utilities — cartoon, elevated, paper texture */
+/* 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 {
-    /* Shared card base */
-    .cartoon-card,
-    .elevated-card {
-        border-radius: var(--radius-xl);
-        border: 2px solid color-mix(in srgb, var(--foreground) calc(var(--border-opacity-light) * 100%), transparent);
-        background: var(--card);
-        color: var(--card-foreground);
-        transition:
-            box-shadow var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard);
-    }
-
-    /* Cartoon card — thick border + offset hard shadow */
-    .cartoon-card {
-        box-shadow: var(--shadow-cartoon-md);
-    }
-
-    .cartoon-card:hover {
-        border-color: color-mix(in srgb, var(--foreground) calc(var(--border-opacity-medium) * 100%), transparent);
-        box-shadow: var(--shadow-cartoon-lg);
-    }
-
-    :where(.dark) .cartoon-card {
-        border-color: color-mix(in srgb, var(--foreground) 12%, transparent);
-    }
-
-    :where(.dark) .cartoon-card:hover {
-        border-color: color-mix(in srgb, var(--foreground) 18%, transparent);
-    }
-
-    /* Elevated card — soft shadow */
-    .elevated-card {
-        box-shadow: var(--shadow-md);
-        transition:
-            box-shadow var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard),
-            transform var(--duration-normal) var(--ease-standard);
-    }
-
-    .elevated-card:hover {
-        box-shadow: var(--shadow-lg);
-    }
-
     /* Paper texture overlay */
     .paper-texture {
         background-image: var(--paper-clean-texture);
@@ -52,15 +14,31 @@
         background-blend-mode: multiply;
     }
 
-    .paper-texture-aged {
-        background-image: var(--paper-aged-texture);
-        background-repeat: repeat;
-        background-size: var(--paper-texture-size);
-        background-blend-mode: multiply;
+    :where(.dark) .paper-texture {
+        background-blend-mode: screen;
     }
+}
 
-    :where(.dark) .paper-texture,
-    :where(.dark) .paper-texture-aged {
-        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/src/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. */
+    }
+}