@gallerist/theme-default 0.4.1 → 0.5.0

package/README.md

@@ -54,11 +54,34 @@ drawn as a border, so forced colours keep it.
 The rail (`.gallerist-thumbs`) has a `scroll-padding` of `--gallerist-rail-fade` (40px) at its ends,
 inline on a sideways rail and block on a side rail: plugin-thumbnails reads it to keep the current
 card clear of the end fades and the ‹ › buttons in them, and a card focused with Tab lands clear too.
+On a phone (600px wide or less with a coarse pointer, where the ‹ › buttons never show) the fade is
+16px (0.5), so the current card kept clear of it leaves room for the next card whole beside it. A
+page's own `--gallerist-rail-fade` wins (the theme's tokens are in a cascade layer).
+
+Loading (0.5): an item's `placeholder` image is blurred `--gallerist-placeholder-blur` (6px) and
+clipped to the image's box; the image fades in over it in `--gallerist-dur-reveal` (150ms). A box
+with no size to go by takes `--gallerist-media-ratio` (`3 / 2`). A load still running after
+`--gallerist-loading-delay` (400ms) shows a "Loading full size" pill (the panel, hairline and muted
+text tokens; no warning colours). With no placeholder the box is a skeleton after 300ms:
+`--gallerist-placeholder` with a `--gallerist-shimmer` sweep, gone at once when the image is in. No
+loading animation outlives the load. See the renderer's README.
+
+The rail's current label (a flat rail's group label, a timeline's time label) is
+`--gallerist-label-current` (the accent) at `--gallerist-label-current-weight` (500). A focused thumb's
+ring is 2px `--gallerist-focus` in `--gallerist-thumb-focus-style` (`solid`; `dashed` tells it apart
+from a solid selection ring), 2px out, or `--gallerist-thumb-focus-offset-current` (2px) out on the
+current thumb, whose ring (`--gallerist-thumb-ring`, `--gallerist-item-ring`) may sit outside it. A
+focused thumb that isn't current shows at `--gallerist-thumb-focus-opacity` (1, as when hovered);
+`var(--gallerist-thumb-idle-opacity)` keeps it dimmed, so only the current one is bright (hover still
+brightens it).
 
 The theme follows `forced-colors: active` (Windows High Contrast): the View popover's chosen segment
 takes the system's selection colours and the focus rings the text colour. The rail's
 item clusters (`thumbnails({ cluster })`) use `--gallerist-cluster-inner` (2px) inside a cluster and
-`--gallerist-cluster-gap` (8px) between two.
+`--gallerist-cluster-gap` (8px) between two. An item thumb's badge (`thumbnails({ renderItemBadge })`)
+sits `--gallerist-thumb-badge-inset-block` from its image's top and bottom, as `inset-block` takes
+them: `3px auto`, the top end corner; `auto 3px` puts it in the bottom end corner, still on the image
+(a caption band under it stays clear).
 
 Full docs: the [monorepo README](https://github.com/shafayet9780/gallerist#readme) and [`docs/`](https://github.com/shafayet9780/gallerist/tree/main/docs).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gallerist/theme-default",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Default Gallerist theme — pure CSS, no JS dependency. Driven by --gallerist-* custom properties.",
   "license": "MIT",
   "sideEffects": [

package/src/base.css

@@ -43,6 +43,13 @@
     --gallerist-dur-gentle: 280ms;
     --gallerist-dur-exit: 180ms; /* exits run shorter than entrances */
     --gallerist-dur-panel: 220ms; /* the rail collapsing, the item column opening (plugin-thumbnails) */
+    --gallerist-dur-reveal: 150ms; /* a loaded image fading in over its placeholder */
+
+    /* loading: an image placeholder's blur, the ratio of a box with no size to go by (a skeleton),
+       and how long a load runs before its "Loading full size" pill shows */
+    --gallerist-placeholder-blur: 6px;
+    --gallerist-media-ratio: 3 / 2;
+    --gallerist-loading-delay: 400ms;
 
     /* the accent: each skin names its accents as a dark/light pair, the scheme picks one */
     --gallerist-accent: var(--gallerist-accent-dark);
@@ -97,6 +104,16 @@
     /* item clusters (thumbnails `cluster`): the gap inside one, and between two */
     --gallerist-cluster-inner: 2px;
     --gallerist-cluster-gap: 8px;
+    /* an item thumb's badge (thumbnails `renderItemBadge`), its `inset-block` from the image's edges:
+       the top end corner; `auto 3px` takes it to the bottom end */
+    --gallerist-thumb-badge-inset-block: 3px auto;
+    /* the rail's current group label (flat) or time label (timeline), and a focused thumb's ring:
+       its outline-style, and its offset on the current thumb (whose ring is outside it). A focused
+       thumb that isn't current: --gallerist-thumb-focus-opacity (unset: 1) */
+    --gallerist-label-current: var(--gallerist-accent);
+    --gallerist-label-current-weight: 500;
+    --gallerist-thumb-focus-style: solid;
+    --gallerist-thumb-focus-offset-current: 2px;
 
     /* popovers (the View menu, the shortcut list) sit a step above the bands; a segmented control
        is a recessed track with its checked segment raised */
@@ -110,6 +127,13 @@
     --gallerist-arrow-hover-bg: var(--gallerist-arrow-bg);
     --gallerist-itemnav-button-hover-bg: var(--gallerist-itemnav-button-bg);
   }
+  /* a phone's rail fades 16px (no ‹ › page buttons sit in it on touch): the current card kept clear
+     of the fade leaves room for the card ahead whole beside it */
+  @media (max-width: 600px) and (pointer: coarse) {
+    .gallerist {
+      --gallerist-rail-fade: 16px;
+    }
+  }
 }
 
 .gallerist {
@@ -307,14 +331,143 @@
   width: 100%;
   height: 100%;
   object-fit: contain;
-  background-repeat: no-repeat;
-  background-position: center;
   opacity: 0;
-  transition: opacity 180ms ease-out;
+  transition: opacity var(--gallerist-dur-reveal) var(--gallerist-ease-out);
 }
 .gallerist-media-image[data-gallerist-loaded] {
   opacity: 1;
 }
+.gallerist-media-image[data-gallerist-error] {
+  visibility: hidden;
+}
+/* `item.placeholder` in the image's box (ratio: naturalSize, the placeholder's, or the token). An
+   image one is blurred, overscanned 2× the blur and clipped (no fringe), sharp as the image fades in,
+   then hidden; a failure keeps it, sharp. None: a skeleton after 300ms, gone when the image is in. */
+.gallerist-content {
+  container-type: size;
+}
+.gallerist-media-placeholder {
+  --_i: 0px;
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: min(100cqw - 2 * var(--_i), (100cqh - 2 * var(--_i)) * var(--gallerist-media-ratio));
+  height: min(100cqh - 2 * var(--_i), (100cqw - 2 * var(--_i)) / (var(--gallerist-media-ratio)));
+  overflow: hidden;
+}
+.gallerist[data-gallerist-frame] .gallerist-media-placeholder {
+  --_i: var(--gallerist-frame-inset);
+}
+.gallerist-media-placeholder > img {
+  --_o: calc(-2 * var(--gallerist-placeholder-blur));
+  position: absolute;
+  inset: var(--_o);
+  width: calc(100% - 2 * var(--_o));
+  height: calc(100% - 2 * var(--_o));
+  object-fit: cover;
+  filter: blur(var(--gallerist-placeholder-blur));
+  transition: var(--gallerist-dur-reveal) var(--gallerist-ease-out);
+  transition-property: filter, inset, width, height;
+}
+.gallerist-media-placeholder:is([data-gallerist-loaded], [data-gallerist-error]) > img {
+  --_o: 0px;
+  filter: none;
+}
+.gallerist-media-placeholder[data-gallerist-loaded] {
+  visibility: hidden;
+  transition: visibility 0s var(--gallerist-dur-reveal);
+}
+[data-gallerist-skeleton]:not([data-gallerist-loaded]) {
+  background: var(--gallerist-placeholder);
+  animation: gallerist-fade var(--gallerist-dur-exit) 0.3s backwards;
+}
+[data-gallerist-skeleton]:not([data-gallerist-loaded])::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+      100deg,
+      transparent 30%,
+      var(--gallerist-shimmer) 50%,
+      transparent 70%
+    )
+    150% 0 / 220% 100%;
+  animation: gallerist-shimmer 1.4s ease-in-out 0.3s infinite;
+}
+@keyframes gallerist-shimmer {
+  to {
+    background-position: -50% 0;
+  }
+}
+/* a slow load's pill, bottom end: after the delay, or at once on a failure (Retry). Neutral */
+.gallerist-media-pill {
+  position: absolute;
+  bottom: 12px;
+  inset-inline-end: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: calc(100% - 24px);
+  min-height: 30px;
+  box-sizing: border-box;
+  padding: 2px 12px 2px 10px;
+  border: 1px solid var(--gallerist-hairline);
+  border-radius: 99px;
+  background: var(--gallerist-panel);
+  color: var(--gallerist-fg-muted);
+  font: 12.5px / 1.3 var(--gallerist-font);
+  animation: gallerist-fade var(--gallerist-dur-exit) var(--gallerist-loading-delay) backwards;
+}
+/* the spinner; on a failure, a ! in a ring */
+.gallerist-media-pill::before {
+  content: "";
+  flex: none;
+  box-sizing: border-box;
+  width: 13px;
+  height: 13px;
+  border: 1.5px solid;
+  border-inline-end-color: transparent;
+  border-radius: 50%;
+  font: 700 9px / 10px var(--gallerist-font);
+  text-align: center;
+  animation: gallerist-spin 0.9s linear infinite;
+}
+[data-gallerist-error] > .gallerist-media-pill {
+  color: var(--gallerist-fg);
+  animation: none;
+}
+[data-gallerist-error] > .gallerist-media-pill::before {
+  content: "!";
+  border-color: currentColor;
+  animation: none;
+}
+.gallerist-media-pill > button {
+  font: inherit;
+  font-weight: 600;
+  color: inherit;
+  background: none;
+  border: 0;
+  padding: 3px 2px;
+  border-radius: 4px;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+.gallerist-media-pill > button::before {
+  content: "·" / "";
+  display: inline-block;
+  margin-inline-end: 8px;
+  color: var(--gallerist-fg-muted);
+}
+.gallerist-media-pill > button:focus-visible {
+  outline: 2px solid var(--gallerist-focus);
+  outline-offset: 2px;
+}
+@keyframes gallerist-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
 /* A failed load shows a centered error card (icon + the item's alt as a caption) instead of a
    blank stage or the browser's default top-left broken-image glyph (I-UX3). The broken <img>
    itself stays hidden (opacity:0); the adapter injects .gallerist-media-error as a sibling. */
@@ -340,34 +493,14 @@
   max-width: 40ch;
   color: var(--gallerist-fg);
 }
-/* Loading shimmer for slow media — shown only while an image is still pending (no loaded/error
-   marker yet), delayed so fast loads never flash it. Degrades to nothing where :has is absent. */
-.gallerist-content:has(
-    .gallerist-media-image:not([data-gallerist-loaded]):not([data-gallerist-error])
-  )::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background: linear-gradient(
-    100deg,
-    transparent 35%,
-    var(--gallerist-shimmer) 50%,
-    transparent 65%
-  );
-  background-size: 200% 100%;
-  animation: gallerist-shimmer 1.4s ease-in-out 0.6s infinite;
-}
-@keyframes gallerist-shimmer {
-  from {
-    background-position: 150% 0;
-  }
-  to {
-    background-position: -50% 0;
-  }
-}
 @media (prefers-reduced-motion: reduce) {
-  .gallerist-content::before {
+  .gallerist-media-placeholder > img {
+    --_o: 0px;
+    filter: none;
+    transition: none;
+  }
+  [data-gallerist-skeleton]:not([data-gallerist-loaded])::after,
+  .gallerist-media-pill::before {
     animation: none;
   }
 }
@@ -620,21 +753,27 @@
   border-color: var(--gallerist-thumb-active-border);
   box-shadow: var(--gallerist-thumb-ring);
 }
-.gallerist-thumb:not([data-active]) > .gallerist-thumb-img,
-.gallerist-thumb-item:not([data-active]) > .gallerist-thumb-img {
+:is(.gallerist-thumb, .gallerist-thumb-item):not([data-active]) > .gallerist-thumb-img {
   opacity: var(--gallerist-thumb-idle-opacity);
   transition: opacity var(--gallerist-dur-gentle) var(--gallerist-ease-out);
 }
-.gallerist-thumb:is(:hover, :focus-visible) > .gallerist-thumb-img,
-.gallerist-thumb-item:is(:hover, :focus-visible) > .gallerist-thumb-img {
+:is(.gallerist-thumb, .gallerist-thumb-item):not([data-active]):focus-visible
+  > .gallerist-thumb-img {
+  opacity: var(--gallerist-thumb-focus-opacity, 1);
+}
+:is(.gallerist-thumb, .gallerist-thumb-item):not([data-active]):hover > .gallerist-thumb-img {
   opacity: 1;
 }
 .gallerist-thumb:focus-visible,
 .gallerist-thumb-item:focus-visible,
 .gallerist-grid-cell:focus-visible {
-  outline: 2px solid var(--gallerist-focus);
+  outline: 2px var(--gallerist-thumb-focus-style) var(--gallerist-focus);
   outline-offset: 2px;
 }
+/* the current thumb's ring is outside it: focus there may sit further out */
+:is(.gallerist-thumb, .gallerist-thumb-item)[data-active]:focus-visible {
+  outline-offset: var(--gallerist-thumb-focus-offset-current);
+}
 .gallerist-thumb-img {
   width: 100%;
   object-fit: cover;
@@ -721,10 +860,13 @@
 .gallerist-thumbs-aside[hidden] {
   display: none;
 }
+/* a grid, not a flex column: its image's row is a box the badge can sit in (a caption band or a
+   touch's 44px under the image stay out of it) */
 .gallerist-thumb-item {
   position: relative;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: start;
   flex: 0 0 auto;
   width: calc(var(--gallerist-thumb-h) * 1.2);
   padding: 0;
@@ -824,10 +966,11 @@
   isolation: isolate; /* keeps the track line behind its own label */
 }
 .gallerist-thumb-wrap[data-active] .gallerist-thumb-time {
-  color: var(--gallerist-accent);
+  color: var(--gallerist-label-current);
+  font-weight: var(--gallerist-label-current-weight);
 }
 .gallerist-thumb-wrap[data-active] .gallerist-thumb-time::before {
-  background: var(--gallerist-accent);
+  background: var(--gallerist-label-current);
 }
 /* numbered items (thumbnails `numberItems`) */
 .gallerist-thumb-num {
@@ -946,7 +1089,8 @@
   font-family: var(--gallerist-mono);
 }
 .gallerist-thumb-group[data-active] .gallerist-thumb-group-cap {
-  color: var(--gallerist-accent);
+  color: var(--gallerist-label-current);
+  font-weight: var(--gallerist-label-current-weight);
 }
 .gallerist-thumb-group-row {
   display: flex;
@@ -1010,10 +1154,13 @@
   width: calc(var(--gallerist-thumb-h) * 1.4);
   min-height: 14px;
 }
-/* an item's badge: the top end corner (a number from `numberItems` has the start) */
+/* an item's badge: the image's top end corner (a number from `numberItems` has the start), or its
+   bottom end with `--gallerist-thumb-badge-inset-block: auto 3px`; placed in the image's grid row (an
+   absolute box's `auto` grid line is the thumb's edge: the row's end line is named) */
 .gallerist-thumb-badge {
   position: absolute;
-  top: 3px;
+  grid-row: 1 / 2;
+  inset-block: var(--gallerist-thumb-badge-inset-block);
   inset-inline-end: 3px;
   display: flex;
   align-items: center;
@@ -2199,8 +2346,8 @@
 }
 
 /* the `tour` preset: the photo keeps clear of the arrows and the item navigator */
-.gallerist[data-gallerist-preset="tour"][data-gallerist-frame] .gallerist-media,
-.gallerist[data-gallerist-preset="tour"][data-gallerist-frame] .gallerist-media-image {
+.gallerist[data-gallerist-preset="tour"][data-gallerist-frame]
+  :is(.gallerist-media, .gallerist-media-placeholder) {
   border-radius: 16px;
 }
 
@@ -2581,7 +2728,6 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .gallerist-media-image,
   .gallerist-bar,
   .gallerist-controls > button,
   .gallerist-itemnav,

package/src/console.css

@@ -39,7 +39,7 @@
     --gallerist-caption-band: transparent;
     --gallerist-group-bg: #1a1c1f;
     --gallerist-placeholder: rgb(255 255 255 / 0.04);
-    --gallerist-shimmer: rgb(255 255 255 / 0.05);
+    --gallerist-shimmer: rgb(255 255 255 / 0.09); /* a skeleton's sweep: plain on the dark stage */
     --gallerist-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
     --gallerist-stack-shadow: 3px 3px 0 -1px #3a3f46, 6px 6px 0 -2px #2a2e34;
     --gallerist-blur: none;

package/src/gallery.css

@@ -36,7 +36,7 @@
     --gallerist-caption-band: transparent;
     --gallerist-group-bg: rgb(255 255 255 / 0.05);
     --gallerist-placeholder: rgb(255 255 255 / 0.04);
-    --gallerist-shimmer: rgb(255 255 255 / 0.06);
+    --gallerist-shimmer: rgb(255 255 255 / 0.08);
     --gallerist-shadow: 0 16px 40px rgb(0 0 0 / 0.5);
     --gallerist-stack-shadow: 3px 3px 0 -1px #2c2c2f, 6px 6px 0 -2px #232326;
     --gallerist-blur: blur(16px) saturate(140%);