@gallerist/theme-default 0.4.0 → 0.4.1

package/README.md

@@ -41,6 +41,20 @@ screen; an inline viewer keeps it. Keep them with `--gallerist-phone-zoom: flex`
 shows − and + only). A bar whose only tools are these two (and `controls: false`) still shows on a
 phone, empty: leave the plugins out there, or keep the tools with the tokens.
 
+The bar's tools are `--gallerist-tool-size` (44px) with `--gallerist-tool-icon` glyphs (22px;
+Close's `--gallerist-close-icon`, the tool glyph unless set). With a fine pointer (a mouse or trackpad)
+the Console skin's bar is compact: 36px tools, 18px glyphs, Close's 2px larger (Console sets
+`--gallerist-close-icon` to `--gallerist-tool-icon` + 2px, so it follows a page's glyph size; set it
+too to size Close apart), and plugin-zoom's "− 100% +" one bordered group 30px tall
+(`--gallerist-zoom-group: 1`; 0, the default, keeps three loose tools; a unitless 0 or 1, nothing
+else). A touch keeps 44px targets; Gallery and Editorial keep 44px tools. `--gallerist-close-rule` is
+the room before Close (a length: Console 9px; 0px, the default, none), not the line: the 1 × 20 hairline in it is
+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.
+
 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

package/package.json

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

package/src/base.css

@@ -15,6 +15,16 @@
   .gallerist {
     /* structure: sizes every skin shares (a skin may tune them; the layout lint checks each skin) */
     --gallerist-target: 44px;
+    /* the bar's tools: their box and glyph (Close's glyph its own); Console takes 36 / 18 / 20 with
+       a fine pointer. A touch keeps the 44px target. */
+    --gallerist-tool-size: var(--gallerist-target);
+    --gallerist-tool-icon: 22px;
+    --gallerist-close-icon: var(--gallerist-tool-icon);
+    /* plugin-zoom's − 100% +: 0 three loose tools, 1 one bordered group a tool's height less 6px
+       (Console with a fine pointer) */
+    --gallerist-zoom-group: 0;
+    /* room before Close, a hairline 20px tall at its start (Console 9px; 0: none) */
+    --gallerist-close-rule: 0px;
     --gallerist-thumb-h: 84px;
     --gallerist-rail-handle-h: 22px;
     --gallerist-toolbar-h: 56px; /* toolbar band height; a vertical rail starts below it */
@@ -497,6 +507,9 @@
   align-items: center;
   padding: 8px 12px;
   overflow-x: auto;
+  /* a card brought into view (the current one, a focused one) lands clear of the end fades, and of
+     the ‹ › page buttons in them (plugin-thumbnails reads it) */
+  scroll-padding-inline: var(--gallerist-rail-fade);
   scrollbar-width: none;
   -webkit-user-select: none;
   user-select: none;
@@ -509,6 +522,7 @@
 }
 .gallerist-thumbs[data-gallerist-scroll="y"] {
   --_fade-to: to bottom;
+  scroll-padding: var(--gallerist-rail-fade) 0;
 }
 .gallerist[data-gallerist-dir="rtl"] .gallerist-thumbs[data-gallerist-scroll="x"] {
   --_fade-to: to left;
@@ -981,7 +995,7 @@
 .gallerist-thumb-group-head {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px; /* the label, then the meta (the mockup) */
   min-height: 14px;
 }
 .gallerist-thumb-group-head[hidden] {
@@ -1119,6 +1133,8 @@
   backdrop-filter: var(--gallerist-blur);
 }
 .gallerist-bar button {
+  min-width: var(--gallerist-tool-size);
+  min-height: var(--gallerist-tool-size);
   border: var(--gallerist-tool-border);
   background: var(--gallerist-tool-bg);
   color: var(--gallerist-tool-fg);
@@ -1171,21 +1187,77 @@
   display: block;
   pointer-events: none;
 }
+.gallerist-bar .gallerist-icon {
+  width: var(--gallerist-tool-icon);
+  height: var(--gallerist-tool-icon);
+}
+.gallerist-bar .gallerist-close .gallerist-icon {
+  width: var(--gallerist-close-icon);
+  height: var(--gallerist-close-icon);
+}
+/* a hairline before Close, in the room --gallerist-close-rule makes (none at 0) */
+.gallerist-bar .gallerist-close {
+  position: relative;
+  margin-inline-start: var(--gallerist-close-rule);
+}
+.gallerist-bar .gallerist-close::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: calc(-1 * var(--gallerist-close-rule));
+  top: calc(50% - 10px);
+  height: 20px;
+  /* a border, not a background: forced colours keep a border's line (in the text colour) */
+  border-inline-start: min(1px, var(--gallerist-close-rule)) solid var(--gallerist-hairline);
+  pointer-events: none;
+}
 
 /* ── the zoom tool (plugin-zoom): − 100% + ───────────────────────────────────────── */
+/* --gallerist-zoom-group (--_g) 0: three tools 2px apart; 1: one group in a hairline, its parts
+   6px narrower and 8px shorter than a tool (30 × 28 of 36), the percentage between two hairlines */
 .gallerist-zoom-tool {
+  --_g: var(--gallerist-zoom-group);
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: calc(2px - 2px * var(--_g));
+  border: calc(1px * var(--_g)) solid var(--gallerist-hairline);
+  border-radius: var(--gallerist-radius);
 }
 .gallerist-zoom-tool[hidden] {
   display: none;
 }
+/* (a bar tool's specificity, so the percentage's own width wins) */
+.gallerist-zoom-tool > button {
+  min-width: calc(var(--gallerist-tool-size) - 6px * var(--_g));
+  min-height: calc(var(--gallerist-tool-size) - 8px * var(--_g));
+  border-radius: calc(var(--gallerist-control-radius) * (1 - var(--_g)));
+}
+/* the group's ends follow its corners */
+.gallerist-bar .gallerist-zoom-tool > :first-child {
+  border-start-start-radius: var(--_r);
+  border-end-start-radius: var(--_r);
+}
+.gallerist-bar .gallerist-zoom-tool > :last-child {
+  border-start-end-radius: var(--_r);
+  border-end-end-radius: var(--_r);
+}
+.gallerist-zoom-tool > * {
+  --_r: calc(
+    var(--gallerist-control-radius) *
+    (1 - var(--_g)) +
+    (var(--gallerist-radius) - 1px) *
+    var(--_g)
+  );
+}
+.gallerist-bar .gallerist-zoom-tool .gallerist-icon {
+  width: calc(var(--gallerist-tool-icon) - 3px * var(--_g));
+  height: calc(var(--gallerist-tool-icon) - 3px * var(--_g));
+}
 .gallerist-bar .gallerist-zoom-level {
   min-width: 4.5em;
   padding: 0 4px;
-  font: 600 13px / 1 var(--gallerist-mono);
+  font: 600 calc(13px - 1px * var(--_g)) / 1 var(--gallerist-mono);
   font-variant-numeric: tabular-nums;
+  border-inline: calc(1px * var(--_g)) solid var(--gallerist-hairline);
 }
 /* at fit there's nothing to reset: the percentage keeps its colour */
 .gallerist-bar .gallerist-zoom-level[aria-disabled="true"] {
@@ -2584,6 +2656,10 @@
     padding-inline: max(8px, env(safe-area-inset-left, 0px))
       max(8px, env(safe-area-inset-right, 0px));
   }
+  /* the hairline before Close keeps the middle of its room (the bar's gap is 4px less here) */
+  .gallerist-bar .gallerist-close::before {
+    inset-inline-start: calc(2px - var(--gallerist-close-rule));
+  }
   .gallerist-title {
     font-size: 13px;
   }

package/src/console.css

@@ -63,6 +63,7 @@
     --gallerist-tool-border: 0 solid transparent;
     --gallerist-tool-fg: var(--gallerist-fg-muted);
     --gallerist-tool-hover-bg: #1e2125;
+    --gallerist-close-rule: 9px; /* a hairline before Close */
     --gallerist-arrow-size: var(--gallerist-target);
     --gallerist-arrow-bg: var(--gallerist-chrome-bg);
     --gallerist-arrow-border: 1px solid var(--gallerist-hairline);
@@ -115,6 +116,17 @@
     --gallerist-seg-on-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 1px 2px rgb(0 0 0 / 0.5);
   }
 
+  /* a compact bar for a mouse or trackpad (the mockup): 36px tools, 18px glyphs (Close 20px), the
+     zoom tool one bordered group. A touch keeps 44px targets. */
+  @media (pointer: fine) {
+    .gallerist[data-gallerist-skin="console"] {
+      --gallerist-tool-size: 36px;
+      --gallerist-tool-icon: 18px;
+      --gallerist-close-icon: calc(var(--gallerist-tool-icon) + 2px); /* 20px: follows the glyphs */
+      --gallerist-zoom-group: 1;
+    }
+  }
+
   /* accents */
   .gallerist[data-gallerist-skin="console"][data-gallerist-accent="cyan"] {
     --gallerist-accent-dark: #3cc8dc;