@bagelink/vue 1.15.80 → 1.15.86

package/src/styles/motion.css

@@ -11,7 +11,8 @@
 :root {
     --bgl-reveal-distance: 24px;
     --bgl-reveal-duration: 0.6s;
-    --bgl-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); /* gentle "out-expo" */
+    --bgl-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
+    /* gentle "out-expo" */
 }
 
 /* Hidden initial state — set by v-reveal on mount. We animate the entrance with
@@ -28,9 +29,19 @@
     will-change: opacity, transform;
 }
 
-.bgl-reveal[data-reveal-dir="down"]  { --bgl-reveal-y: calc(-1 * var(--bgl-reveal-distance)); }
-.bgl-reveal[data-reveal-dir="left"]  { --bgl-reveal-x: var(--bgl-reveal-distance); --bgl-reveal-y: 0px; }
-.bgl-reveal[data-reveal-dir="right"] { --bgl-reveal-x: calc(-1 * var(--bgl-reveal-distance)); --bgl-reveal-y: 0px; }
+.bgl-reveal[data-reveal-dir="down"] {
+    --bgl-reveal-y: calc(-1 * var(--bgl-reveal-distance));
+}
+
+.bgl-reveal[data-reveal-dir="left"] {
+    --bgl-reveal-x: var(--bgl-reveal-distance);
+    --bgl-reveal-y: 0px;
+}
+
+.bgl-reveal[data-reveal-dir="right"] {
+    --bgl-reveal-x: calc(-1 * var(--bgl-reveal-distance));
+    --bgl-reveal-y: 0px;
+}
 
 /* Revealed: run a fade+move keyframe, then settle at the resting state (the
    declared opacity/transform below) so a `transition` utility like .hover-lift
@@ -44,36 +55,113 @@
 }
 
 @keyframes bgl-reveal-enter {
-    from { opacity: 0; transform: translate3d(var(--bgl-reveal-x), var(--bgl-reveal-y), 0); }
-    to   { opacity: 1; transform: none; }
+    from {
+        opacity: 0;
+        transform: translate3d(var(--bgl-reveal-x), var(--bgl-reveal-y), 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
 }
 
 /* ---- Hover lift: standardize the "card floats up on hover" pattern. -------- */
 .hover-lift {
-    transition: transform 0.2s var(--bgl-reveal-ease), box-shadow 0.2s var(--bgl-reveal-ease);
+    transition: transform 0.4s var(--bgl-reveal-ease), box-shadow 0.2s var(--bgl-reveal-ease), filter 0.2s var(--bgl-reveal-ease);
 }
+
 .hover-lift:hover {
     transform: translateY(-4px);
-    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.18);
+    box-shadow: 0 12px 28px -8px var(--bgl-shadow);
+}
+
+.hover-lift:active {
+    transform: translateY(-2px);
+    filter: var(--bgl-hover-filter);
 }
 
 /* Hover grow — for thumbnails/media inside an overflow-hidden frame. */
-.hover-grow { transition: transform 0.4s var(--bgl-reveal-ease); }
-.hover-grow:hover { transform: scale(1.04); }
+.hover-grow {
+    transition: transform 0.4s var(--bgl-reveal-ease);
+    filter: var(--bgl-hover-filter);
+}
+
+.hover-grow:hover {
+    transform: scale(1.04);
+}
+
+.hover-grow:active {
+    transform: scale(1.02);
+    filter: var(--bgl-hover-filter);
+}
 
 /* ---- One-shot entrance animations (no scroll trigger needed). ------------- */
-@keyframes bgl-fade-in { from { opacity: 0; } to { opacity: 1; } }
-@keyframes bgl-rise-in { from { opacity: 0; transform: translateY(var(--bgl-reveal-distance)); } to { opacity: 1; transform: none; } }
-@keyframes bgl-pop-in  { 0% { opacity: 0; transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } }
-@keyframes bgl-float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
+@keyframes bgl-fade-in {
+    from {
+        opacity: 0;
+    }
 
-.animate-fade-in { animation: bgl-fade-in var(--bgl-reveal-duration) var(--bgl-reveal-ease) both; }
-.animate-rise-in { animation: bgl-rise-in var(--bgl-reveal-duration) var(--bgl-reveal-ease) both; }
-.animate-pop-in  { animation: bgl-pop-in 0.4s var(--bgl-reveal-ease) both; }
-.animate-float   { animation: bgl-float 4s ease-in-out infinite; }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes bgl-rise-in {
+    from {
+        opacity: 0;
+        transform: translateY(var(--bgl-reveal-distance));
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes bgl-pop-in {
+    0% {
+        opacity: 0;
+        transform: scale(0.92);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes bgl-float {
+
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-8px);
+    }
+}
+
+.animate-fade-in {
+    animation: bgl-fade-in var(--bgl-reveal-duration) var(--bgl-reveal-ease) both;
+}
+
+.animate-rise-in {
+    animation: bgl-rise-in var(--bgl-reveal-duration) var(--bgl-reveal-ease) both;
+}
+
+.animate-pop-in {
+    animation: bgl-pop-in 0.4s var(--bgl-reveal-ease) both;
+}
+
+.animate-float {
+    animation: bgl-float 4s ease-in-out infinite;
+}
 
 /* Respect user motion preferences — kill all of the above. */
 @media (prefers-reduced-motion: reduce) {
+
     .bgl-reveal,
     .bgl-reveal-in,
     .bgl-reveal[data-reveal-dir],
@@ -88,4 +176,4 @@
         animation: none !important;
         transition: none !important;
     }
-}
+}

package/src/styles/theme.css

@@ -362,4 +362,87 @@
     background: var(--bgl-selection-bg);
 }
 
-/* App-level layout rules moved to app-layout.css (June 2026) */
+/* App-level layout rules moved to app-layout.css (June 2026) */
+
+/* New role colors: secondary / tertiary / quaternary */
+/* New role colors — sensible blue-family defaults, override per project */
+:root {
+    --bgl-secondary: #00d8c0;   /* turquoise-leaning accent */
+    --bgl-tertiary: #8a4baf;    /* purple-leaning accent */
+    --bgl-quaternary: #0091ff;  /* sky-blue accent */
+}
+
+:root {
+    --bgl-secondary-light: color-mix(in oklab, white 92%, var(--bgl-secondary));
+    --bgl-tertiary-light: color-mix(in oklab, white 92%, var(--bgl-tertiary));
+    --bgl-quaternary-light: color-mix(in oklab, white 92%, var(--bgl-quaternary));
+    --bgl-secondary-tint: color-mix(in srgb, var(--bgl-secondary) 20%, transparent);
+    --bgl-tertiary-tint: color-mix(in srgb, var(--bgl-tertiary) 20%, transparent);
+    --bgl-quaternary-tint: color-mix(in srgb, var(--bgl-quaternary) 20%, transparent);
+}
+
+:root {
+    --bgl-secondary-10: color-mix(in oklab, white 90%, var(--bgl-secondary));
+    --bgl-tertiary-10: color-mix(in oklab, white 90%, var(--bgl-tertiary));
+    --bgl-quaternary-10: color-mix(in oklab, white 90%, var(--bgl-quaternary));
+}
+:root {
+    --bgl-secondary-20: color-mix(in oklab, white 80%, var(--bgl-secondary));
+    --bgl-tertiary-20: color-mix(in oklab, white 80%, var(--bgl-tertiary));
+    --bgl-quaternary-20: color-mix(in oklab, white 80%, var(--bgl-quaternary));
+}
+:root {
+    --bgl-secondary-30: color-mix(in oklab, white 70%, var(--bgl-secondary));
+    --bgl-tertiary-30: color-mix(in oklab, white 70%, var(--bgl-tertiary));
+    --bgl-quaternary-30: color-mix(in oklab, white 70%, var(--bgl-quaternary));
+}
+:root {
+    --bgl-secondary-40: color-mix(in oklab, white 60%, var(--bgl-secondary));
+    --bgl-tertiary-40: color-mix(in oklab, white 60%, var(--bgl-tertiary));
+    --bgl-quaternary-40: color-mix(in oklab, white 60%, var(--bgl-quaternary));
+}
+:root {
+    --bgl-secondary-50: color-mix(in oklab, white 50%, var(--bgl-secondary));
+    --bgl-tertiary-50: color-mix(in oklab, white 50%, var(--bgl-tertiary));
+    --bgl-quaternary-50: color-mix(in oklab, white 50%, var(--bgl-quaternary));
+}
+:root {
+    --bgl-secondary-60: color-mix(in oklab, white 40%, var(--bgl-secondary));
+    --bgl-tertiary-60: color-mix(in oklab, white 40%, var(--bgl-tertiary));
+    --bgl-quaternary-60: color-mix(in oklab, white 40%, var(--bgl-quaternary));
+}
+:root {
+    --bgl-secondary-70: color-mix(in oklab, white 30%, var(--bgl-secondary));
+    --bgl-tertiary-70: color-mix(in oklab, white 30%, var(--bgl-tertiary));
+    --bgl-quaternary-70: color-mix(in oklab, white 30%, var(--bgl-quaternary));
+}
+:root {
+    --bgl-secondary-80: color-mix(in oklab, white 20%, var(--bgl-secondary));
+    --bgl-tertiary-80: color-mix(in oklab, white 20%, var(--bgl-tertiary));
+    --bgl-quaternary-80: color-mix(in oklab, white 20%, var(--bgl-quaternary));
+}
+:root {
+    --bgl-secondary-90: color-mix(in oklab, white 10%, var(--bgl-secondary));
+    --bgl-tertiary-90: color-mix(in oklab, white 10%, var(--bgl-tertiary));
+    --bgl-quaternary-90: color-mix(in oklab, white 10%, var(--bgl-quaternary));
+}
+:root {
+    --bgl-secondary-100: var(--bgl-secondary);
+    --bgl-tertiary-100: var(--bgl-tertiary);
+    --bgl-quaternary-100: var(--bgl-quaternary);
+}
+:root {
+    --bgl-secondary-110: color-mix(in oklab, black 10%, var(--bgl-secondary));
+    --bgl-tertiary-110: color-mix(in oklab, black 10%, var(--bgl-tertiary));
+    --bgl-quaternary-110: color-mix(in oklab, black 10%, var(--bgl-quaternary));
+}
+:root {
+    --bgl-secondary-120: color-mix(in oklab, black 20%, var(--bgl-secondary));
+    --bgl-tertiary-120: color-mix(in oklab, black 20%, var(--bgl-tertiary));
+    --bgl-quaternary-120: color-mix(in oklab, black 20%, var(--bgl-quaternary));
+}
+:root {
+    --bgl-secondary-130: color-mix(in oklab, black 30%, var(--bgl-secondary));
+    --bgl-tertiary-130: color-mix(in oklab, black 30%, var(--bgl-tertiary));
+    --bgl-quaternary-130: color-mix(in oklab, black 30%, var(--bgl-quaternary));
+}

package/vite.config.ts

@@ -7,7 +7,7 @@ import tsconfigPaths from 'vite-tsconfig-paths'
 
 const indexDir = resolve(import.meta.dirname, 'src')
 
-export default defineConfig(() => ({
+export default defineConfig({
 	plugins: [
 		tsconfigPaths({ root: indexDir, }),
 		vue(),
@@ -49,4 +49,4 @@ export default defineConfig(() => ({
 		},
 		emptyOutDir: true, // types are emitted by vite-plugin-dts in this same build; stale files must not survive
 	},
-}))
+})