@stnd/styles 0.6.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stnd/styles
 
+## 0.7.1
+
+### Patch Changes
+
+- Auto-bumped @stnd/styles due to modified code.
+
+## 0.7.0
+
+### Minor Changes
+
+- Auto-bumped @stnd/styles due to modified code.
+
 ## 0.6.0
 
 ### Minor Changes

package/_standard-08-media.scss

@@ -142,29 +142,31 @@ figcaption {
 /* They provide a simple "zoom-on-hold" experience.                 */
 /* ================================================================ */
 
-/* When JS is off, holding click on an image will trigger this zoom effect. */
-html:not(.js-image-zoom-enabled) img:active {
-  cursor: zoom-out;
-  display: block;
-  position: fixed;
-  z-index: var(--z-image-zoom);
-  max-height: calc(100vh);
-  max-width: calc(100vw);
-  object-fit: contain;
-  margin: 0 auto;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  user-select: none;
-}
+/* When JS is off, holding click on an image will trigger this zoom effect on desktop with fine pointer. */
+@media (min-width: #{$small}) and (pointer: fine) {
+  html:not(.js-image-zoom-enabled) img:active {
+    cursor: zoom-out;
+    display: block;
+    position: fixed;
+    z-index: var(--z-image-zoom);
+    max-height: calc(100vh);
+    max-width: calc(100vw);
+    object-fit: contain;
+    margin: 0 auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    user-select: none;
+  }
 
-/* Creates a backdrop for the :active zoom. */
-html:not(.js-image-zoom-enabled):has(img:active)::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  background: var(--color-background);
-  z-index: calc(var(--z-image-zoom) - 1);
+  /* Creates a backdrop for the :active zoom. */
+  html:not(.js-image-zoom-enabled):has(img:active)::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background: var(--color-background);
+    z-index: calc(var(--z-image-zoom) - 1);
+  }
 }
 
 /* ================================================================ */
@@ -221,7 +223,7 @@ html.image-zoomed-active {
 
 /* Uses #{$small} — same breakpoint variable as everywhere else in the
    framework. */
-@media (min-width: #{$small}) {
+@media (min-width: #{$small}) and (pointer: fine) {
   /* Global zoomable image cursor */
   img:not([data-no-zoom]) {
     cursor: zoom-in !important;

package/_standard-11-forms.scss

@@ -249,7 +249,13 @@ input[type="radio"] {
 input[type="checkbox"][role="switch"] {
   --switch-height: calc(var(--space) - var(--space-d3));
   --switch-width: calc(var(--switch-height) * 2);
-  --switch-padding: 2px;
+  /* Was a fixed 2px — correct-looking at the default ~16px-tall switch
+     (an 8px thumb inset by 2px on each side), but any consumer overriding
+     --switch-height alone (a smaller, denser control panel, say) kept that
+     same fixed inset and ended up with a visibly undersized thumb, since
+     the padding never scaled down with it. 1/8 of the height reproduces
+     the original ~2px look at the default size while actually scaling. */
+  --switch-padding: calc(var(--switch-height) / 8);
 
   appearance: none;
   box-sizing: border-box; /* Reset content-box from base checkbox rule */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stnd/styles",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "type": "module",
   "author": "Francis Fontaine",
   "license": "MIT",