@veluai/velu 0.2.25 → 0.2.28

package/runtime/velu-ui/components/theme-toggle.css

@@ -1,102 +1,102 @@
-/* ThemeToggle — circular button with a sun/moon glyph; click flips
-   the theme. Geometry is a 32 × 32 circle with an 18 × 18 glyph
-   centred inside. The pill-with-slider design was replaced earlier;
-   only the circle survives now.
-
-   In light mode: --page-bg circle, sun glyph.
-   In dark mode:  --page-bg circle, moon glyph.
-
-   Visibility model: BOTH icons are always rendered, stacked at the
-   same `position: absolute` slot inside the button. Opacity controls
-   which one is visible. We use opacity (not display: none) because:
-
-     1. Stacked icons render at the exact same point — no layout
-        shift when the theme flips.
-     2. Opacity is not touched anywhere else for these elements, so
-        the cascade is trivial — no risk of a stray rule (preflight,
-        utility class, dev-time fallback) overriding `display: none`
-        and revealing the wrong icon.
-     3. Identical markup on server + client → SSR-safe, no hydration
-        mismatch and no icon flash.
-
-   All values are tokens. */
-
-.velu-theme-toggle {
-  /* `relative` so the absolutely-positioned icons inside are
-     anchored to this button, not the page. */
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 2rem;
-  block-size: 2rem;
-  border: var(--border-width) solid var(--border-color);
-  border-radius: 999px;
-  padding: 0;
-  background: var(--page-bg);
-  cursor: pointer;
-  transition: border-color 0.12s ease, background 0.12s ease,
-    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-.velu-theme-toggle:hover {
-  background: var(--surface-color);
-  border-color: var(--accent-color);
-}
-/* Tactile press feedback on click. */
-.velu-theme-toggle:active {
-  transform: scale(0.9);
-}
-
-/* Both icons stack here, centred. Each animates in/out on a theme flip:
-   the hidden glyph is faded, shrunk, and rotated off its axis; the active
-   one springs to full size at 0deg. Centring is done with margins (above),
-   so `transform` is free to drive the rotate/scale animation. */
-.velu-theme-toggle__icon {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-  inline-size: 1.125rem;
-  block-size: 1.125rem;
-  margin-block-start: -0.5625rem;     /* half of block-size */
-  margin-inline-start: -0.5625rem;    /* half of inline-size */
-  color: var(--text-color);
-  opacity: 0;
-  transition: opacity 0.28s ease,
-    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-  pointer-events: none;
-}
-
-/* Hidden state per glyph — sun spins out clockwise, moon anti-clockwise,
-   so the swap reads as one rotating through the other. */
-.velu-theme-toggle__icon--sun {
-  transform: rotate(90deg) scale(0.4);
-}
-.velu-theme-toggle__icon--moon {
-  transform: rotate(-90deg) scale(0.4);
-}
-
-/* Exactly one glyph is shown — the sun in light, the moon in dark — at full
-   size, upright. Higher specificity than the hidden defaults above, so it
-   wins for whichever glyph the active theme selects. */
-:root:not([data-theme='dark']) .velu-theme-toggle__icon--sun,
-[data-theme='dark'] .velu-theme-toggle__icon--moon {
-  opacity: 1;
-  transform: rotate(0deg) scale(1);
-}
-
-/* Honour reduced-motion: keep a plain crossfade — no spin, scale, or press. */
-@media (prefers-reduced-motion: reduce) {
-  .velu-theme-toggle {
-    transition: border-color 0.12s ease, background 0.12s ease;
-  }
-  .velu-theme-toggle:active {
-    transform: none;
-  }
-  .velu-theme-toggle__icon {
-    transition: opacity 0.2s ease;
-  }
-  .velu-theme-toggle__icon--sun,
-  .velu-theme-toggle__icon--moon {
-    transform: none;
-  }
-}
+/* ThemeToggle — circular button with a sun/moon glyph; click flips
+   the theme. Geometry is a 32 × 32 circle with an 18 × 18 glyph
+   centred inside. The pill-with-slider design was replaced earlier;
+   only the circle survives now.
+
+   In light mode: --page-bg circle, sun glyph.
+   In dark mode:  --page-bg circle, moon glyph.
+
+   Visibility model: BOTH icons are always rendered, stacked at the
+   same `position: absolute` slot inside the button. Opacity controls
+   which one is visible. We use opacity (not display: none) because:
+
+     1. Stacked icons render at the exact same point — no layout
+        shift when the theme flips.
+     2. Opacity is not touched anywhere else for these elements, so
+        the cascade is trivial — no risk of a stray rule (preflight,
+        utility class, dev-time fallback) overriding `display: none`
+        and revealing the wrong icon.
+     3. Identical markup on server + client → SSR-safe, no hydration
+        mismatch and no icon flash.
+
+   All values are tokens. */
+
+.velu-theme-toggle {
+  /* `relative` so the absolutely-positioned icons inside are
+     anchored to this button, not the page. */
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: 999px;
+  padding: 0;
+  background: var(--page-bg);
+  cursor: pointer;
+  transition: border-color 0.12s ease, background 0.12s ease,
+    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.velu-theme-toggle:hover {
+  background: var(--surface-color);
+  border-color: var(--accent-color);
+}
+/* Tactile press feedback on click. */
+.velu-theme-toggle:active {
+  transform: scale(0.9);
+}
+
+/* Both icons stack here, centred. Each animates in/out on a theme flip:
+   the hidden glyph is faded, shrunk, and rotated off its axis; the active
+   one springs to full size at 0deg. Centring is done with margins (above),
+   so `transform` is free to drive the rotate/scale animation. */
+.velu-theme-toggle__icon {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
+  margin-block-start: -0.5625rem;     /* half of block-size */
+  margin-inline-start: -0.5625rem;    /* half of inline-size */
+  color: var(--text-color);
+  opacity: 0;
+  transition: opacity 0.28s ease,
+    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  pointer-events: none;
+}
+
+/* Hidden state per glyph — sun spins out clockwise, moon anti-clockwise,
+   so the swap reads as one rotating through the other. */
+.velu-theme-toggle__icon--sun {
+  transform: rotate(90deg) scale(0.4);
+}
+.velu-theme-toggle__icon--moon {
+  transform: rotate(-90deg) scale(0.4);
+}
+
+/* Exactly one glyph is shown — the sun in light, the moon in dark — at full
+   size, upright. Higher specificity than the hidden defaults above, so it
+   wins for whichever glyph the active theme selects. */
+:root:not([data-theme='dark']) .velu-theme-toggle__icon--sun,
+[data-theme='dark'] .velu-theme-toggle__icon--moon {
+  opacity: 1;
+  transform: rotate(0deg) scale(1);
+}
+
+/* Honour reduced-motion: keep a plain crossfade — no spin, scale, or press. */
+@media (prefers-reduced-motion: reduce) {
+  .velu-theme-toggle {
+    transition: border-color 0.12s ease, background 0.12s ease;
+  }
+  .velu-theme-toggle:active {
+    transform: none;
+  }
+  .velu-theme-toggle__icon {
+    transition: opacity 0.2s ease;
+  }
+  .velu-theme-toggle__icon--sun,
+  .velu-theme-toggle__icon--moon {
+    transform: none;
+  }
+}