al_folio_core 1.0.14 → 1.0.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f2f1858ae1303cd5ae1f61fde71d9222ca59d4df20d37cdce083789287f16eca
-  data.tar.gz: 7bc84f2d2effc1dd18130d089d55d782c3262dd6fb86ae53f7f2314f0d30ba8c
+  metadata.gz: 33f4abd1450ddea086000cfada14301413b73290e2ceed10a64a6c6de52d3c43
+  data.tar.gz: cd5a489172370b4f7a8e8c7283dcfa9e5957e6306f3eb1de52f44b66ce6dfc3e
 SHA512:
-  metadata.gz: db52abe776a109c94b27ecce1f18b11f334f159dcc431470f2b036fd9a332824481d39f9b522c111e75eaba63c7f9cad50a91fa326bb3f9b1933deddb67e3c35
-  data.tar.gz: '008b6d4f07a0af5bee8315559fa4846b0ccef27128dc3329ebefb5d4e4b85ca0908845aaab4d82ff4fa0bdec2c63a6212d8e86ec1beb6e9862976c224b3aefd4'
+  metadata.gz: 253a185eb0d59b0e641a020774f605e6b132c71bb1c7376117651dbea1685e647d7116fc84d2ee810dc1b27fcf9ce5de357324017ce7ffa4cc7ce914ffa09429
+  data.tar.gz: 809c3daf737a1745b64459cddd4e7f27786e6926830bc22161ca8771d8a803b31ee39adfcb159708a4c7d5a3a163afb5723ae931e9513f21cda9f4380c2946ff

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.0.15 - 2026-08-03
+
+- Fixed text colour staggering when switching between light and dark themes, which read as a flicker. `color`, `fill` and `stroke` are inherited properties, but the theme-transition rule applied them to `html.transition *`, so every inheriting element ran its own 240ms ease toward a parent whose colour was still animating — convergence compounded once per level of nesting, and deeper text landed visibly later before snapping when the class was removed. Measured on the about page, an `h2 > a` sat at `rgb(50,50,50)` while the paragraph beside it was already at `rgb(130,130,130)`. Those properties are now transitioned once, on the root and on `body`; non-inherited properties keep their per-element transitions. Text now changes uniformly rather than in waves.
+- Fixed `transition-delay: 0` being silently dropped by the CSS parser — a `<time>` value requires a unit even for zero, unlike `<length>`. Now `0s`.
+- Widened the margin before the `.transition` class is removed. It was 260ms against a 240ms transition, so a single slow frame during the theme repaint truncated the transition into a snap; the cleanup delay is now derived from the duration.
+
 ## 1.0.14 - 2026-08-02
 
 - Added invocation hooks for three new plugin gems: `al_rtl`, `al_email_protect` and `al_marimo`. Each is a parse-safe wrapper under `_includes/plugins/` called from `head.liquid`, `scripts.liquid` or `default.liquid`, and every call sits inside a `site.plugins contains` guard — an unguarded custom tag is a parse error on any site that has not installed the gem, which fails the whole build rather than just the feature.

data/_sass/_utilities.scss

@@ -120,14 +120,35 @@ progress::-moz-progress-bar {
 
 // Themes transition
 
+// `color`, `fill` and `stroke` are INHERITED properties, so they are
+// transitioned on the root only. Applying them to every descendant made each
+// inheriting element run its own 240ms ease toward a parent that was itself
+// still animating — so text converged later the deeper it sat in the tree, and
+// then snapped when this class was removed. Measured on the about page: an
+// `h2 > a` was roughly 2.5x behind the surrounding paragraph mid-transition.
+// Transitioning them once at the root lets every descendant inherit the same
+// animated value on the same frame.
+// `body` is included because it declares `color` itself; without it the value
+// every descendant inherits would change instantly and text would snap rather
+// than fade.
 html.transition,
+html.transition body {
+  transition-property: color, background-color, border-color, fill, stroke, box-shadow !important;
+  transition-duration: 240ms !important;
+  transition-timing-function: ease !important;
+  transition-delay: 0s !important;
+}
+
+// Non-inherited properties still need to be transitioned per element.
 html.transition *,
 html.transition *:before,
 html.transition *:after {
-  transition-property: color, background-color, border-color, fill, stroke, box-shadow !important;
+  transition-property: background-color, border-color, box-shadow !important;
   transition-duration: 240ms !important;
   transition-timing-function: ease !important;
-  transition-delay: 0 !important;
+  // `0` alone is invalid for a <time> value — unlike <length>, time requires a
+  // unit even for zero — so this declaration was being dropped by the parser.
+  transition-delay: 0s !important;
 }
 
 // Copy button

data/assets/js/theme.js

@@ -245,11 +245,19 @@ let setSearchTheme = (theme) => {
   }
 };
 
+// Keep this comfortably longer than the 240ms transition-duration in
+// _utilities.scss. Removing the class mid-transition snaps every element still
+// interpolating straight to its final colour, which reads as a flicker; at the
+// previous 260ms there were only 20ms of slack, so one slow frame during the
+// repaint was enough to truncate it.
+const THEME_TRANSITION_MS = 240;
+const THEME_TRANSITION_CLEANUP_MS = THEME_TRANSITION_MS + 120;
+
 let transTheme = () => {
   document.documentElement.classList.add("transition");
   window.setTimeout(() => {
     document.documentElement.classList.remove("transition");
-  }, 260);
+  }, THEME_TRANSITION_CLEANUP_MS);
 };
 
 // Determine the expected state of the theme toggle, which can be "dark", "light", or

data/lib/al_folio_core/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module AlFolioCore
-  VERSION = "1.0.14"
+  VERSION = "1.0.15"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: al_folio_core
 version: !ruby/object:Gem::Version
-  version: 1.0.14
+  version: 1.0.15
 platform: ruby
 authors:
 - al-folio maintainers
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-08-02 00:00:00.000000000 Z
+date: 2026-08-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll