@mkbabb/glass-ui 0.2.0

package/src/styles/transitions.css

@@ -0,0 +1,226 @@
+/* Reusable Vue <Transition> class sets */
+
+/* ── Fade (symmetric, fast) ── */
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity var(--duration-fast) var(--ease-standard);
+}
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+/* ── Fade-slide (spring in, accelerate out) ── */
+.fade-slide-enter-active {
+    transition:
+        opacity var(--duration-normal) var(--ease-out),
+        transform var(--duration-normal) var(--spring-smooth);
+}
+.fade-slide-leave-active {
+    transition:
+        opacity var(--duration-fast) var(--ease-in),
+        transform var(--duration-fast) var(--ease-in);
+}
+.fade-slide-enter-from {
+    opacity: 0;
+    transform: translateY(-4px);
+}
+.fade-slide-leave-to {
+    opacity: 0;
+    transform: translateY(4px);
+}
+
+/* ── Expand-fade (spring in + max-height) ── */
+.expand-fade-enter-active {
+    transition:
+        opacity var(--duration-normal) var(--ease-out),
+        transform var(--duration-normal) var(--spring-smooth),
+        max-height var(--duration-normal) var(--spring-smooth);
+}
+.expand-fade-leave-active {
+    transition:
+        opacity var(--duration-fast) var(--ease-in),
+        transform var(--duration-fast) var(--ease-in),
+        max-height var(--duration-fast) var(--ease-in);
+}
+.expand-fade-enter-from,
+.expand-fade-leave-to {
+    opacity: 0;
+    transform: translateY(-4px);
+}
+
+/* ── Dialog scale (bouncy spring in, ease out) ── */
+.dialog-scale-enter-active {
+    transition:
+        opacity var(--duration-slow) var(--ease-out),
+        transform var(--duration-slow) var(--spring-bouncy);
+}
+.dialog-scale-leave-active {
+    transition:
+        opacity var(--duration-normal) var(--ease-standard),
+        transform var(--duration-normal) var(--ease-standard);
+}
+.dialog-scale-enter-from {
+    opacity: 0;
+    transform: scale(0.95) translateY(8px);
+}
+.dialog-scale-leave-to {
+    opacity: 0;
+    transform: scale(0.95) translateY(8px);
+}
+
+/* ── Spring pop (bouncy in, fast out) ── */
+.pop-enter-active {
+    transition:
+        opacity var(--duration-fast) var(--ease-out),
+        transform var(--duration-slow) var(--spring-bouncy);
+}
+.pop-leave-active {
+    transition:
+        opacity var(--duration-fast) var(--ease-out),
+        transform var(--duration-fast) var(--ease-out);
+}
+.pop-enter-from {
+    opacity: 0;
+    transform: scale(0.9);
+}
+.pop-leave-to {
+    opacity: 0;
+    transform: scale(0.95);
+}
+
+/* ── Dropdown (fast opacity + snappy spring transform) ── */
+.dropdown-enter-active {
+    transition:
+        opacity var(--duration-instant) var(--ease-out),
+        transform var(--duration-normal) var(--spring-snappy);
+}
+.dropdown-leave-active {
+    transition:
+        opacity var(--duration-instant) var(--ease-standard),
+        transform var(--duration-fast) var(--ease-standard);
+}
+.dropdown-enter-from,
+.dropdown-leave-to {
+    opacity: 0;
+    transform: scale(0.96) translateY(4px);
+}
+
+/* ── Tab fade ── */
+.tab-fade-enter-active,
+.tab-fade-leave-active {
+    transition: opacity var(--duration-fast) var(--ease-standard);
+}
+.tab-fade-enter-from,
+.tab-fade-leave-to {
+    opacity: 0;
+}
+
+/* ── Pane swap (horizontal slide + fade) ── */
+.pane-swap-enter-active {
+    transition:
+        opacity var(--duration-normal, 0.3s) var(--ease-out, ease),
+        transform var(--duration-normal, 0.3s) var(--spring-smooth, ease);
+}
+.pane-swap-leave-active {
+    transition:
+        opacity var(--duration-normal, 0.3s) var(--ease-standard, ease),
+        transform var(--duration-normal, 0.3s) var(--ease-standard, ease);
+}
+.pane-swap-enter-from {
+    opacity: 0;
+    transform: translateX(var(--animation-slide-md, 6px));
+}
+.pane-swap-leave-to {
+    opacity: 0;
+    transform: translateX(calc(-1 * var(--animation-slide-md, 6px)));
+}
+
+/* ── Pane slide (collapse/expand) ── */
+.pane-slide-enter-active {
+    transition:
+        opacity var(--duration-panel, 0.55s) var(--ease-out, ease),
+        max-height var(--duration-panel, 0.55s) var(--spring-gentle, ease);
+}
+.pane-slide-leave-active {
+    transition:
+        opacity var(--duration-panel, 0.55s) var(--ease-standard, ease),
+        max-height var(--duration-panel, 0.55s) var(--ease-standard, ease);
+}
+.pane-slide-enter-from,
+.pane-slide-leave-to {
+    opacity: 0;
+    max-height: 0;
+}
+
+/* ── Badge entrance (wiggle + bounce) ── */
+@keyframes badge-in {
+    0% {
+        opacity: 0;
+        transform: translateY(1rem) scale(0.8) rotate(-3deg);
+    }
+    60% {
+        opacity: 1;
+        transform: translateY(-0.15rem) scale(1.02) rotate(1.5deg);
+    }
+    80% {
+        transform: translateY(0.05rem) scale(0.99) rotate(-0.5deg);
+    }
+    100% {
+        transform: translateY(0) scale(1) rotate(0);
+    }
+}
+.badge-enter-active {
+    animation: badge-in 600ms var(--ease-standard, ease);
+}
+.badge-leave-active {
+    animation: badge-in 300ms var(--ease-standard, ease) reverse;
+}
+
+/* ── Reduced motion: preserve fades, remove transform/scale motion ── */
+@media (prefers-reduced-motion: reduce) {
+    .fade-enter-active,
+    .fade-leave-active,
+    .tab-fade-enter-active,
+    .tab-fade-leave-active {
+        /* Fades are safe — keep them but shorten */
+        transition-duration: 0.1s !important;
+    }
+
+    .fade-slide-enter-active,
+    .fade-slide-leave-active,
+    .expand-fade-enter-active,
+    .expand-fade-leave-active,
+    .dialog-scale-enter-active,
+    .dialog-scale-leave-active,
+    .pop-enter-active,
+    .pop-leave-active,
+    .dropdown-enter-active,
+    .dropdown-leave-active,
+    .pane-swap-enter-active,
+    .pane-swap-leave-active,
+    .pane-slide-enter-active,
+    .pane-slide-leave-active,
+    .badge-enter-active,
+    .badge-leave-active {
+        /* Keep opacity transition, eliminate transform motion */
+        transition-property: opacity !important;
+        transition-duration: 0.15s !important;
+        animation-duration: 0.01ms !important;
+    }
+
+    .fade-slide-enter-from,
+    .fade-slide-leave-to,
+    .expand-fade-enter-from,
+    .expand-fade-leave-to,
+    .dialog-scale-enter-from,
+    .dialog-scale-leave-to,
+    .pop-enter-from,
+    .pop-leave-to,
+    .dropdown-enter-from,
+    .dropdown-leave-to,
+    .pane-swap-enter-from,
+    .pane-swap-leave-to {
+        transform: none !important;
+    }
+}

package/src/styles/typography.css

@@ -0,0 +1,277 @@
+/*
+ * typography.css — Golden-ratio type scale + semantic classes
+ *
+ * Scale ratio: sqrt(φ) ≈ 1.272  (modulated golden ratio)
+ * Base: 1rem (16px)
+ *
+ * Key relationships:
+ *   body × φ ≈ subheading
+ *   subheading × φ ≈ title
+ *   title × φ ≈ display-2
+ */
+
+:root {
+    /* Scale tokens */
+    --type-micro: 0.6875rem; /* 11px */
+    --type-caption: 0.75rem; /* 12px */
+    --type-small: 0.875rem; /* 14px */
+    --type-body: 1rem; /* 16px */
+    --type-prose: 1.125rem; /* 18px */
+    --type-subheading: 1.272rem; /* 20.4px — φ^(1/2) */
+    --type-heading: 1.618rem; /* 25.9px — φ^1 */
+    --type-title: 2.058rem; /* 32.9px — φ^(3/2) */
+    --type-display-1: clamp(1.618rem, 1.2rem + 1.6vw, 2.618rem); /* φ^2, fluid */
+    --type-display-2: clamp(2.058rem, 1.5rem + 2.2vw, 3.33rem); /* φ^(5/2), fluid */
+    --type-display-3: clamp(2.618rem, 2rem + 3vw, 4.236rem); /* φ^3, fluid */
+    --type-display-4: clamp(3.33rem, 2.5rem + 4vw, 5.382rem); /* φ^(7/2), fluid */
+    --type-display-5: clamp(4.236rem, 3.5rem + 6vw, 6.854rem); /* φ^4, fluid */
+
+    /* Line heights — semantic, paired to scale steps */
+    --leading-micro: 1.2;
+    --leading-caption: 1.3;
+    --leading-small: 1.4;
+    --leading-body: 1.5;
+    --leading-prose: 1.618; /* golden ratio */
+    --leading-heading: 1.2;
+    --leading-display: 1.1;
+
+    /* Letter spacing */
+    --tracking-tight: -0.025em;
+    --tracking-normal: 0;
+    --tracking-wide: 0.025em;
+    --tracking-wider: 0.05em;
+    --tracking-caps: 0.1em;
+}
+
+@layer components {
+    /* ── Display: Hero / splash — light weight, knife-edge serifs ── */
+    .text-display-5 {
+        font-family: var(--font-display);
+        font-size: var(--type-display-5);
+        line-height: var(--leading-display);
+        letter-spacing: var(--tracking-tight);
+        font-weight: 300;
+        font-optical-sizing: auto;
+        font-variation-settings: "WONK" 1, "SOFT" 0;
+    }
+
+
+    .text-display-4 {
+        font-family: var(--font-display);
+        font-size: var(--type-display-4);
+        line-height: var(--leading-display);
+        letter-spacing: var(--tracking-tight);
+        font-weight: 350;
+        font-optical-sizing: auto;
+        font-variation-settings: "WONK" 1, "SOFT" 0;
+    }
+
+
+    .text-display-3 {
+        font-family: var(--font-display);
+        font-size: var(--type-display-3);
+        line-height: var(--leading-display);
+        letter-spacing: var(--tracking-tight);
+        font-weight: 350;
+        font-optical-sizing: auto;
+        font-variation-settings: "WONK" 1, "SOFT" 0;
+    }
+
+    .text-display-2 {
+        font-family: var(--font-display);
+        font-size: var(--type-display-2);
+        line-height: var(--leading-display);
+        letter-spacing: var(--tracking-tight);
+        font-weight: 350;
+        font-optical-sizing: auto;
+        font-variation-settings: "WONK" 1, "SOFT" 0;
+    }
+
+    .text-display {
+        font-family: var(--font-display);
+        font-size: var(--type-display-1);
+        line-height: var(--leading-display);
+        letter-spacing: var(--tracking-tight);
+        font-weight: 350;
+        font-optical-sizing: auto;
+        font-variation-settings: "WONK" 1, "SOFT" 0;
+    }
+
+    /* ── Title: Page / section heads ── */
+    .text-title {
+        font-family: var(--font-display);
+        font-size: var(--type-title);
+        line-height: var(--leading-heading);
+        letter-spacing: var(--tracking-tight);
+        font-weight: 400;
+        font-optical-sizing: auto;
+    }
+
+    /* ── Heading: Subsection heads ── */
+    .text-heading {
+        font-family: var(--font-display);
+        font-size: var(--type-heading);
+        line-height: var(--leading-heading);
+        letter-spacing: var(--tracking-normal);
+        font-weight: 500;
+    }
+
+    /* ── Subheading: Card titles, field labels ── */
+    .text-subheading {
+        font-family: var(--font-serif);
+        font-size: var(--type-subheading);
+        line-height: var(--leading-body);
+        letter-spacing: var(--tracking-normal);
+        font-weight: 600;
+    }
+
+    /* ── Prose: Long-form reading ── */
+    .text-prose {
+        font-family: var(--font-serif);
+        font-size: var(--type-prose);
+        line-height: var(--leading-prose);
+        letter-spacing: var(--tracking-normal);
+        font-weight: 400;
+    }
+
+    /* ── Body: Default body copy ── */
+    .text-body {
+        font-family: var(--font-serif);
+        font-size: var(--type-body);
+        line-height: var(--leading-body);
+        letter-spacing: var(--tracking-normal);
+        font-weight: 400;
+    }
+
+    /* ── Small: Secondary body, metadata ── */
+    .text-small {
+        font-family: var(--font-serif);
+        font-size: var(--type-small);
+        line-height: var(--leading-small);
+        letter-spacing: var(--tracking-normal);
+        font-weight: 400;
+    }
+
+    /* ── Caption: Labels, timestamps, hints ── */
+    .text-caption {
+        font-family: var(--font-serif);
+        font-size: var(--type-caption);
+        line-height: var(--leading-caption);
+        letter-spacing: var(--tracking-wide);
+        font-weight: 400;
+    }
+
+    /* ── Micro: Fine print, badges ── */
+    .text-micro {
+        font-family: var(--font-serif);
+        font-size: var(--type-micro);
+        line-height: var(--leading-micro);
+        letter-spacing: var(--tracking-wide);
+        font-weight: 500;
+    }
+
+    /* ── Mono variants ── */
+    .text-mono-caption {
+        font-family: var(--font-mono);
+        font-size: var(--type-caption);
+        line-height: var(--leading-caption);
+        letter-spacing: var(--tracking-wider);
+        text-transform: uppercase;
+    }
+
+    .text-mono-small {
+        font-family: var(--font-mono);
+        font-size: var(--type-small);
+        line-height: var(--leading-small);
+        letter-spacing: var(--tracking-normal);
+    }
+
+    /* ── Responsive pane title ── */
+    .text-pane-title {
+        font-family: var(--font-display);
+        font-size: clamp(2.4rem, 1.8rem + 2vw, 3.33rem);
+        line-height: var(--leading-display);
+        letter-spacing: var(--tracking-tight);
+        font-weight: 400;
+        font-optical-sizing: auto;
+    }
+
+    @media (min-width: 640px) {
+        .text-pane-title {
+            font-size: var(--type-display-3);
+        }
+    }
+
+    /* ── Section label (mono, small caps) ── */
+    .section-label {
+        font-family: var(--font-mono);
+        font-size: var(--type-caption);
+        color: var(--muted-foreground);
+        text-transform: uppercase;
+        letter-spacing: var(--tracking-caps);
+    }
+
+    /* ── Pane description ── */
+    .text-pane-description {
+        font-family: var(--font-mono);
+        font-size: var(--type-small);
+        color: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
+    }
+
+    /* ── Font family utilities ── */
+    .font-display {
+        font-family: var(--font-display);
+        font-optical-sizing: auto;
+    }
+
+    .font-mono-code {
+        font-family: var(--font-mono);
+        font-feature-settings: "liga", "calt";
+    }
+
+    /* ── Font feature utilities ── */
+    .tabular-nums {
+        font-variant-numeric: tabular-nums;
+    }
+
+    .proportional-nums {
+        font-variant-numeric: proportional-nums;
+    }
+
+    /* ── Glass legibility — halo shadow for text over translucent backgrounds ── */
+    .text-glass-legible {
+        text-shadow:
+            0 0 12px color-mix(in srgb, var(--background) 50%, transparent),
+            0 0 4px color-mix(in srgb, var(--background) 30%, transparent);
+    }
+
+    /* ── Kinetic: ambient weight breathing ── */
+    .text-breathe {
+        animation: weight-breathe 4s ease-in-out infinite;
+    }
+
+    /* ── Kinetic: Fraunces WONK/SOFT personality shift on hover ── */
+    .text-wonk-hover {
+        font-variation-settings: "WONK" 0, "SOFT" 100;
+        transition: font-variation-settings var(--duration-slow) var(--spring-smooth, ease);
+    }
+    .text-wonk-hover:hover {
+        font-variation-settings: "WONK" 1, "SOFT" 0;
+    }
+
+    /* ── Kinetic: scroll-driven weight reveal (zero JS) ── */
+    @supports (animation-timeline: view()) {
+        .scroll-weight-reveal {
+            animation: weight-reveal linear both;
+            animation-timeline: view();
+            animation-range: entry 0% cover 30%;
+        }
+    }
+
+    /* ── Kinetic: per-character stagger ── */
+    .char-stagger > .char {
+        display: inline-block;
+        animation: fade-in var(--duration-normal) var(--spring-smooth, ease) backwards;
+        animation-delay: calc(var(--char-index, 0) * 30ms);
+    }
+}