@mkbabb/glass-ui 0.2.0

package/src/styles/dock.css

@@ -0,0 +1,221 @@
+/* Dock utilities — icon buttons, select triggers, separators, layer grid */
+
+@layer components {
+    .dock-icon-btn {
+        @apply inline-flex items-center justify-center flex-shrink-0 cursor-pointer p-0 border-none bg-transparent;
+        width: var(--size-icon-btn);
+        height: var(--size-icon-btn);
+        border-radius: var(--radius-pill);
+        color: color-mix(in srgb, var(--foreground) 80%, transparent);
+        transition: all var(--duration-fast) var(--ease-standard);
+    }
+
+    .dock-icon-btn:hover:not(:disabled) {
+        background: var(--muted);
+        color: var(--btn-hover-color, var(--foreground));
+        transform: scale(var(--scale-hover-dock));
+    }
+
+    .dock-icon-btn:active:not(:disabled) {
+        transform: scale(var(--scale-press-dock));
+    }
+
+    .dock-icon-btn:focus-visible {
+        box-shadow: var(--focus-ring-shadow);
+        outline: none;
+    }
+
+    .dock-icon-btn:disabled {
+        opacity: 0.35;
+        cursor: not-allowed;
+    }
+
+    .dock-icon-btn.is-active,
+    .dock-icon-btn.active {
+        background: var(--muted);
+        color: var(--foreground);
+    }
+
+    /* Compact variant — auto-sized for inline use */
+    .dock-icon-btn-compact {
+        @apply inline-flex items-center justify-center flex-shrink-0 cursor-pointer border-none bg-transparent w-auto h-auto min-w-0 p-1;
+        border-radius: var(--radius-pill);
+        color: color-mix(in srgb, var(--foreground) 80%, transparent);
+        transition: all var(--duration-fast) var(--ease-standard);
+    }
+
+    .dock-icon-btn-compact:hover:not(:disabled) {
+        background: var(--muted);
+        color: var(--btn-hover-color, var(--foreground));
+        transform: scale(var(--scale-hover-dock));
+    }
+
+    .dock-icon-btn-compact:active:not(:disabled) {
+        transform: scale(var(--scale-press-dock));
+    }
+
+    .dock-icon-btn-compact:focus-visible {
+        box-shadow: var(--focus-ring-shadow);
+        outline: none;
+    }
+
+    .dock-icon-btn-compact:disabled {
+        opacity: 0.35;
+        cursor: not-allowed;
+    }
+
+    .dock-select-trigger {
+        @apply inline-flex items-center gap-1 py-1 px-2 cursor-pointer whitespace-nowrap border-none bg-transparent;
+        border-radius: var(--radius-pill);
+        color: color-mix(in srgb, var(--foreground) 80%, transparent);
+        transition: all var(--duration-fast) var(--ease-standard);
+    }
+
+    .dock-select-trigger:hover:not(:disabled) {
+        background: var(--muted);
+        color: var(--foreground);
+    }
+
+    .dock-select-trigger:active:not(:disabled) {
+        transform: scale(var(--scale-press));
+    }
+
+    .dock-select-trigger:focus-visible {
+        box-shadow:
+            0 0 0 var(--focus-ring-width) var(--dock-ring, color-mix(in srgb, var(--ring) 30%, transparent)),
+            0 0 8px color-mix(in srgb, var(--ring) 15%, transparent);
+        outline: none;
+    }
+
+    .dock-select-trigger[aria-expanded="true"],
+    .dock-select-trigger.is-active {
+        background: var(--muted);
+    }
+
+    .dock-select-trigger:disabled {
+        opacity: 0.35;
+        cursor: not-allowed;
+    }
+
+    /* Dropdown trigger — variable width, text + icon + chevron */
+    .dock-dropdown-trigger {
+        @apply inline-flex items-center gap-1 py-1 px-2 flex-shrink-0 cursor-pointer whitespace-nowrap border-none bg-transparent;
+        border-radius: var(--radius-pill);
+        transition: all var(--duration-fast) var(--ease-standard);
+    }
+
+    .dock-dropdown-trigger:hover:not(:disabled) {
+        background: var(--muted);
+        transform: scale(var(--scale-hover-dock));
+    }
+
+    .dock-dropdown-trigger:active:not(:disabled) {
+        transform: scale(var(--scale-press-dock));
+    }
+
+    .dock-dropdown-trigger[aria-expanded="true"],
+    .dock-dropdown-trigger.is-active {
+        background: var(--muted);
+    }
+
+    .dock-dropdown-trigger:focus-visible {
+        box-shadow: var(--focus-ring-shadow);
+        outline: none;
+    }
+
+    .dock-dropdown-trigger:disabled {
+        opacity: 0.35;
+        cursor: not-allowed;
+    }
+
+    .dock-label {
+        @apply inline-flex items-center gap-1 cursor-default whitespace-nowrap;
+        padding: 0.25rem 0.375rem;
+        border-radius: var(--radius-pill);
+        color: var(--muted-foreground);
+        font-size: var(--type-small);
+        transition: all var(--duration-fast) var(--ease-standard);
+    }
+
+    .dock-label:hover {
+        color: color-mix(in srgb, var(--foreground) 85%, transparent);
+    }
+
+    .dock-play-btn {
+        @apply inline-flex items-center justify-center cursor-pointer border-none;
+        border-radius: var(--radius-pill);
+        transition:
+            filter var(--duration-fast) var(--ease-standard),
+            transform var(--duration-fast) var(--ease-standard);
+    }
+
+    .dock-play-btn:hover:not(:disabled) {
+        filter: brightness(1.1);
+    }
+
+    .dock-play-btn:active:not(:disabled) {
+        transform: scale(var(--scale-press-dock));
+    }
+
+    .dock-play-btn:focus-visible {
+        box-shadow: var(--focus-ring-shadow);
+        outline: none;
+    }
+
+    .dock-play-btn:disabled {
+        opacity: 0.35;
+        cursor: not-allowed;
+    }
+
+    .dock-separator {
+        @apply flex-shrink-0;
+        width: 1px;
+        height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5);
+        margin: 0 0.375rem;
+        background: color-mix(in srgb, var(--foreground) 15%, transparent);
+    }
+
+    .dock-spacer {
+        @apply flex-1;
+    }
+
+    /* ── Layer transition grid ── */
+    .dock-layer-grid {
+        display: grid;
+        position: relative;
+        transition: width var(--duration-normal) var(--spring-snappy);
+    }
+
+    .dock-layer-item {
+        grid-area: 1 / 1;
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        min-width: 0;
+        transition: opacity var(--duration-normal) var(--ease-standard);
+    }
+
+    /* Inactive layers: out of flow so only the active layer drives grid width */
+    .dock-layer-item:not(.dock-layer-active) {
+        position: absolute !important;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    .dock-layer-item.dock-layer-active {
+        position: relative;
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    .dock-layer-item.dock-layer-leaving {
+        z-index: var(--z-controls);
+    }
+
+    /* ── Dock-safe insets — content clears top + bottom floating docks ── */
+    /* Content insets that clear floating top + bottom docks. */
+    .dock-inset {
+        padding-top: calc(var(--dock-h) + var(--dock-margin));
+        padding-bottom: calc(var(--dock-menubar-reserve) + var(--dock-margin));
+    }
+}

package/src/styles/floating-panel.css

@@ -0,0 +1,49 @@
+/* Floating panel — teleported action menus, swatch popovers */
+
+@layer components {
+    .floating-panel {
+        position: fixed;
+        z-index: var(--z-overlay);
+        border-radius: var(--radius-panel);
+        border: 1px solid var(--glass-border-medium);
+        background: var(--glass-bg-medium);
+        backdrop-filter: var(--glass-blur-medium);
+        -webkit-backdrop-filter: var(--glass-blur-medium);
+        color: var(--popover-foreground);
+        box-shadow: var(--glass-shadow-medium);
+        pointer-events: auto;
+        animation: floating-panel-in var(--duration-fast) var(--ease-out);
+    }
+
+    .floating-panel-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        padding: 0.375rem;
+        border-radius: var(--radius-pill);
+        color: inherit;
+        cursor: pointer;
+        transition:
+            background-color var(--duration-fast) var(--ease-standard),
+            transform var(--duration-fast) var(--ease-standard);
+    }
+
+    .floating-panel-item:hover {
+        background-color: color-mix(in srgb, var(--foreground) 6%, transparent);
+    }
+
+    .floating-panel-item:focus-visible {
+        outline: none;
+        border-radius: var(--radius-pill);
+        box-shadow: var(--focus-ring-shadow);
+    }
+
+    .floating-panel-item:active:not(:disabled) {
+        transform: scale(0.95);
+    }
+    .floating-panel-item:disabled {
+        opacity: 0.35;
+        pointer-events: none;
+    }
+}

package/src/styles/glass.css

@@ -0,0 +1,266 @@
+/* Glass utilities — glassmorphism surface classes referencing --glass-* tokens */
+
+@layer components {
+    /* ── Four-tier surface classes (visual only, no geometry) ── */
+
+    .glass-subtle {
+        position: relative;
+        background: var(--glass-bg-subtle);
+        backdrop-filter: var(--glass-blur-subtle);
+        -webkit-backdrop-filter: var(--glass-blur-subtle);
+        border: 1px solid var(--glass-border-subtle);
+        box-shadow: var(--glass-highlight);
+    }
+
+    .glass-default {
+        position: relative;
+        background: var(--glass-bg-default);
+        backdrop-filter: var(--glass-blur-default);
+        -webkit-backdrop-filter: var(--glass-blur-default);
+        border: 1px solid var(--glass-border-default);
+        box-shadow: var(--glass-highlight);
+    }
+
+    .glass-medium {
+        position: relative;
+        background: var(--glass-bg-medium);
+        backdrop-filter: var(--glass-blur-medium);
+        -webkit-backdrop-filter: var(--glass-blur-medium);
+        border: 1px solid var(--glass-border-medium);
+        box-shadow: var(--glass-highlight);
+    }
+
+    .glass-elevated {
+        position: relative;
+        background: var(--glass-bg-elevated);
+        backdrop-filter: var(--glass-blur-elevated);
+        -webkit-backdrop-filter: var(--glass-blur-elevated);
+        border: 1px solid var(--glass-border-elevated);
+        box-shadow: var(--glass-highlight);
+    }
+
+    /* Grain noise overlay — reuses paper texture SVG, no extra assets */
+    .glass-subtle::after,
+    .glass-default::after,
+    .glass-medium::after,
+    .glass-elevated::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background: var(--paper-clean-texture);
+        background-repeat: repeat;
+        background-size: var(--paper-texture-size);
+        opacity: var(--glass-grain-opacity);
+        pointer-events: none;
+        mix-blend-mode: overlay;
+    }
+
+    .dark .glass-subtle::after,
+    .dark .glass-default::after,
+    .dark .glass-medium::after,
+    .dark .glass-elevated::after {
+        mix-blend-mode: soft-light;
+    }
+
+    /* ── Convenience shorthands (tier + shape) ── */
+
+    .glass-card {
+        position: relative;
+        background: var(--glass-bg-default);
+        backdrop-filter: var(--glass-blur-default);
+        -webkit-backdrop-filter: var(--glass-blur-default);
+        border: 1px solid var(--glass-border-default);
+        border-radius: var(--radius-card);
+        box-shadow: var(--glass-shadow-default);
+    }
+
+    .glass-pill {
+        position: relative;
+        background: var(--glass-bg-default);
+        backdrop-filter: var(--glass-blur-default);
+        -webkit-backdrop-filter: var(--glass-blur-default);
+        border: 1px solid var(--glass-border-default);
+        border-radius: var(--radius-pill);
+        box-shadow: var(--glass-shadow-subtle);
+    }
+
+    /* ── Glassmorphic circular icon button ── */
+
+    .glass-btn {
+        @apply flex items-center justify-center cursor-pointer;
+
+        width: var(--size-icon-btn);
+        height: var(--size-icon-btn);
+        border-radius: var(--radius-pill);
+        border: 1.5px solid var(--glass-border-subtle);
+        background: var(--glass-bg-subtle);
+        backdrop-filter: var(--glass-blur-subtle);
+        color: var(--muted-foreground);
+        transition:
+            background var(--duration-fast) ease,
+            border-color var(--duration-fast) ease,
+            color var(--duration-fast) ease,
+            transform var(--duration-normal) var(--spring-snappy);
+    }
+
+    .glass-btn:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--background) 85%, transparent);
+        border-color: color-mix(in srgb, var(--foreground) 20%, transparent);
+        color: var(--foreground);
+        transform: scale(var(--scale-hover));
+    }
+
+    .glass-btn:active:not(:disabled) {
+        transform: scale(var(--scale-press));
+    }
+
+    .glass-btn:focus-visible {
+        outline: var(--focus-ring-width) solid var(--ring);
+        outline-offset: var(--focus-ring-width);
+    }
+
+    .glass-btn:disabled {
+        opacity: 0.35;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    .glass-btn.is-active {
+        background: color-mix(in srgb, var(--foreground) 10%, transparent);
+        border-color: color-mix(in srgb, var(--foreground) 25%, transparent);
+        color: var(--foreground);
+    }
+
+    /* ── Pill button base ─────────────────────────── */
+    .btn-pill {
+        @apply inline-flex items-center justify-center cursor-pointer font-medium border-none;
+
+        gap: 0.375rem;
+        border-radius: var(--radius-pill);
+        padding: 0.5rem 1rem;
+        font-size: 1rem;
+        transition: all var(--duration-fast) var(--ease-standard);
+    }
+
+    .btn-pill > * {
+        @apply flex-shrink-0;
+    }
+
+
+    .btn-pill:active:not(:disabled) {
+        transform: scale(0.96);
+    }
+
+    .btn-pill:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+    }
+
+    .btn-pill-accent {
+        background: var(--th-accent-opaque, var(--primary));
+        color: var(--foreground);
+    }
+
+    .btn-pill-accent:hover:not(:disabled) {
+        opacity: 0.9;
+    }
+
+    .btn-pill-ghost {
+        background: transparent;
+        color: color-mix(in srgb, var(--foreground) 70%, transparent);
+    }
+
+    .btn-pill-ghost:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--foreground) 8%, transparent);
+        color: var(--foreground);
+    }
+
+    .btn-pill-glass {
+        background: var(--glass-bg-subtle);
+        backdrop-filter: var(--glass-blur-subtle);
+        border: 1px solid var(--glass-border-default);
+        color: var(--foreground);
+    }
+
+    .btn-pill-glass:hover:not(:disabled) {
+        box-shadow: var(--glass-shadow-default);
+    }
+
+    /* ── Pill input ───────────────────────────────── */
+    .input-pill {
+        @apply flex w-full;
+
+        height: 2.5rem;
+        border-radius: var(--radius-pill);
+        border: 1.5px solid var(--glass-border-subtle);
+        background: var(--glass-bg-default);
+        backdrop-filter: var(--glass-blur-subtle);
+        padding: 0 1rem;
+        font-size: 1rem;
+        color: var(--foreground);
+        transition: all var(--duration-fast) var(--ease-standard);
+    }
+
+    .input-pill::placeholder {
+        color: color-mix(in srgb, var(--foreground) 35%, transparent);
+    }
+
+    .input-pill:focus {
+        outline: none;
+        border-color: var(--color-accent-opaque, var(--ring));
+        box-shadow: 0 0 0 2px var(--color-accent, color-mix(in srgb, var(--ring) 30%, transparent));
+    }
+
+    .input-pill:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+/* ── Accessibility: reduced transparency ────────── */
+@media (prefers-reduced-transparency: reduce) {
+    :root {
+        --glass-opacity-subtle: 1;
+        --glass-opacity-default: 1;
+        --glass-opacity-medium: 1;
+        --glass-opacity-elevated: 1;
+        --glass-blur-subtle: none;
+        --glass-blur-default: none;
+        --glass-blur-medium: none;
+        --glass-blur-elevated: none;
+        --glass-grain-opacity: 0;
+        --glass-highlight: none;
+    }
+}
+
+/* ── Accessibility: high contrast ───────────────── */
+@media (prefers-contrast: more) {
+    :root {
+        --glass-opacity-subtle: 0.88;
+        --glass-opacity-default: 0.92;
+        --glass-opacity-medium: 0.96;
+        --glass-opacity-elevated: 1;
+    }
+}
+
+/* ── @supports fallbacks for non-backdrop-filter browsers ── */
+@layer components {
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+        .glass-subtle {
+            background: color-mix(in srgb, var(--card) 88%, transparent);
+        }
+        .glass-default {
+            background: color-mix(in srgb, var(--card) 92%, transparent);
+        }
+        .glass-medium {
+            background: color-mix(in srgb, var(--card) 96%, transparent);
+        }
+        .glass-elevated {
+            background: var(--card);
+        }
+        .glass-btn {
+            background: color-mix(in srgb, var(--background) 92%, transparent);
+        }
+    }
+}

package/src/styles/index.css

@@ -0,0 +1,26 @@
+/*
+ * @mkbabb/glass-ui — Unified design system styles
+ *
+ * Import this in your project's main CSS file:
+ *   @import "tailwindcss";
+ *   @import "tw-animate-css";
+ *   @import "@mkbabb/glass-ui/styles";
+ *   (then add your project-specific token overrides locally)
+ */
+
+/* Order matters: tokens first, then theme (for @theme), then component layers */
+@import "./tokens.css";
+@import "./typography.css";
+@import "./theme.css";
+@import "./glass.css";
+@import "./dock.css";
+@import "./cards.css";
+@import "./scroll-pane.css";
+@import "./floating-panel.css";
+@import "./transitions.css";
+@import "./animations.css";
+@import "./utilities.css";
+
+/* Ensure consumer's Tailwind scans glass-ui components for utility classes
+   (e.g. CVA button variants like text-destructive-foreground) */
+@source "../components";

package/src/styles/scroll-pane.css

@@ -0,0 +1,10 @@
+/* Scroll-pane utilities — sticky header with scroll-driven animations */
+
+/* Named scroll timeline so ScrollPaneHeader animations respond
+   to THIS container's scroll, not portal-triggered layout shifts
+   in ancestor containers. */
+.pane-scroll-fade {
+    scroll-timeline: --pane-scroll block;
+}
+
+/* Pane title and description styles are in typography.css — single source of truth */