@splendidlabz/styles 4.4.1 → 4.5.0

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.4.1",
+  "version": "4.5.0",
   "description": "",
   "type": "module",
+  "homepage": "https://splendidlabz.com/docs/styles",
   "author": "Zell Liew <zellwk@gmail.com>",
   "files": [
     "src",

package/src/components/css/prose.css

@@ -5,25 +5,25 @@
     gap: 1lh;
     max-width: 100%;
 
-    /* Using padding instead of margin, so #targets will leave some whitespace above when scrolling to the component. (We can also use scroll-margin-top + margin-top... but this is simpler). */
+    /* Using padding instead of margin, so #targets will leave some whitespace above when scrolling to the component. */
     > * + :where(h2),
     > * + :where(astro-island, astro-slot) > :where(h2):first-child {
       margin-top: calc(var(--spacing) * 6);
-      scroll-margin-top: calc(var(--spacing) * 6);
+      scroll-margin-block: calc(var(--spacing) * 6);
     }
 
     > * + :where(h3),
     > * + :where(astro-island, astro-slot) > :where(h3):first-child {
       margin-top: calc(var(--spacing) * 4);
       margin-bottom: calc(var(--spacing) * -2);
-      scroll-margin-top: calc(var(--spacing) * 4);
+      scroll-margin-block: calc(var(--spacing) * 4);
     }
 
     > * + :where(h4, h5, h6),
     > * + :where(astro-island, astro-slot) > :where(h4, h5, h6):first-child {
       margin-top: calc(var(--spacing) * 4);
       margin-bottom: calc(var(--spacing) * -4);
-      scroll-margin-top: calc(var(--spacing) * 4);
+      scroll-margin-block: calc(var(--spacing) * 4);
     }
 
     :where(ul) {
@@ -59,7 +59,7 @@
     }
 
     :where(a) {
-      text-decoration: underline;
+      text-decoration-line: underline;
     }
 
     :where(> img),
@@ -68,6 +68,15 @@
       border-radius: var(--radius);
     }
 
+    :where(> figure) {
+      inline-size: fit-content;
+      margin-inline: auto;
+    }
+
+    :where(> figure figcaption) {
+      contain: inline-size;
+    }
+
     :where(.fancylist) {
       margin-left: 1em;
       padding-left: 0;

package/src/components/css/table.css

@@ -5,6 +5,7 @@
   & {
     width: 100%;
     font-variant-numeric: lining-nums tabular-nums slashed-zero;
+    caption-side: bottom;
   }
 }
 

package/src/form/textarea.css

@@ -1,5 +1,5 @@
 @theme {
-  --textarea-height: 9em;
+  --textarea-height: 6lh;
 }
 
 @layer base {

package/src/generic/accessibility.css

@@ -22,12 +22,17 @@
     white-space: nowrap;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    * {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
+  @media (prefers-reduced-motion: no-preference) {
+    @view-transition {
+      navigation: auto;
+    }
+
+    html {
+      interpolate-size: allow-keywords;
+
+      &:focus-within {
+        scroll-behavior: var(--scroll-behavior, smooth);
+      }
     }
   }
 }

package/src/generic/anchors-and-buttons.css

@@ -10,7 +10,7 @@
     padding: 0.125lh 0.75lh;
     font: inherit;
     font-family: var(--input-font);
-    text-decoration: none !important;
+    text-decoration-line: none !important;
     cursor: pointer;
 
     &[disabled] {
@@ -45,7 +45,7 @@
   a {
     /* @apply pigment; */
     /* border-radius: 0; */
-    text-decoration: none;
+    text-decoration-line: none;
   }
 
   a:where(:not(.button)) {

package/src/reset.css

@@ -3,6 +3,9 @@
 **************/
 html {
   box-sizing: border-box;
+  tab-size: 2;
+  hanging-punctuation: first allow-end last;
+  overflow-wrap: break-word;
 }
 
 *,
@@ -34,18 +37,22 @@ body {
   border-style: solid;
 }
 
+pre {
+  white-space: pre-wrap;
+}
+
 /*********************
 * Avoid text overflows *
 *********************/
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-  scroll-margin: 2em;
+:target {
+  scroll-margin: 2rlh;
+}
+
+/* Chilled out text underlines */
+/* https://frontendmasters.com/blog/chilled-out-text-underlines/ */
+a {
+  text-underline-offset: 2px;
+  text-decoration-color: color-mix(in srgb, currentcolor, transparent 33%);
 }
 
 /*********************