@leftium/nimble.css 0.11.0 → 0.12.0

package/src/_typography.scss

@@ -12,21 +12,24 @@
 // h2–h6 always carry top margin so they breathe above any preceding content,
 // regardless of DOM nesting (first-child of section, etc.).
 // Spec §8.3
+// OP normalize uses --font-lineheight-1 (1.25) for ALL headings + --font-weight-9 (900).
+// nimble uses a graduated lh scale + weight 700 (--font-weight-7).
+// OP normalize heading sizes: h1=3.5rem h2=2.5rem h3=2rem h4=1.5rem h5=1.25rem h6=1.1rem
 $_heading-scale: (
-  h1: (size: 2rem,     lh: 1.1,  mt: 0),
-  h2: (size: 1.75rem,  lh: 1.15, mt: 2rem),
-  h3: (size: 1.5rem,   lh: 1.2,  mt: 1.5rem),
-  h4: (size: 1.25rem,  lh: 1.3,  mt: 1.5rem),
-  h5: (size: 1.125rem, lh: 1.4,  mt: 1.5rem),
-  h6: (size: 1rem,     lh: 1.5,  mt: 1.5rem),
+  h1: (size: 2rem,     lh: 1.1,  mt: 0),        // OP --font-size-5/--size-7; lh: --font-lineheight-0
+  h2: (size: 1.75rem,  lh: 1.15, mt: 2rem),      // OP --size-6; lh: no OP match (near lh-0); mt: --size-7
+  h3: (size: 1.5rem,   lh: 1.2,  mt: 1.5rem),    // OP --font-size-4/--size-5; lh: no OP match (near lh-1); mt: --size-5
+  h4: (size: 1.25rem,  lh: 1.3,  mt: 1.5rem),    // OP --font-size-3/--size-4; lh: no OP match (near lh-1); mt: --size-5
+  h5: (size: 1.125rem, lh: 1.4,  mt: 1.5rem),    // no OP match (OP --font-size-2: 1.1rem); lh: no OP match; mt: --size-5
+  h6: (size: 1rem,     lh: 1.5,  mt: 1.5rem),    // OP --font-size-1/--size-3; lh: --font-lineheight-3; mt: --size-5
 );
 
 // Phone breakpoint heading overrides
 // Spec §8.3
 $_heading-phone: (
-  h1: 1.75rem,
-  h2: 1.5rem,
-  h3: 1.3rem,
+  h1: 1.75rem,    // OP --size-6
+  h2: 1.5rem,     // OP --size-5
+  h3: 1.3rem,     // no OP match (near --size-4: 1.25rem)
 );
 
 @layer nimble.base {
@@ -38,8 +41,8 @@ $_heading-phone: (
       font-size: map.get($vals, size);
       line-height: map.get($vals, lh);
       margin-top: map.get($vals, mt);
-      margin-bottom: var(#{$prefix}spacing);
-      font-weight: 700;
+      margin-bottom: var(#{$prefix}spacing);   // OP --size-3
+      font-weight: 700;                        // OP --font-weight-7 (OP normalize uses weight-9: 900)
       text-wrap: balance;
     }
   }
@@ -62,16 +65,29 @@ $_heading-phone: (
     margin-bottom: var(#{$prefix}spacing);
   }
 
+  // Prevent double spacing at page edges: body has padding-block,
+  // so strip margins that would stack with it.
+  // Must live inside @scope so it beats the scoped margin rules above.
+  // Uses :nth-child/:nth-last-child(of ...) to skip <script>/<style>.
+  body > :first-child,
+  body > :first-child > :first-child {
+    margin-top: 0;
+  }
+  body > :nth-last-child(1 of :not(script, style, dialog)),
+  body > :nth-last-child(1 of :not(script, style, dialog)) > :last-child {
+    margin-bottom: 0;
+  }
+
 
 
   // ----- Lists -----
 
   ul, ol {
-    padding-inline-start: 1.5em;
+    padding-inline-start: 1.5em;    // OP ~size-5 (em-relative); OP normalize: --size-8 (3rem)
   }
 
   :where(li) {
-    margin-bottom: 0.25em;
+    margin-bottom: 0.25em;              // OP ~size-1 (em-relative)
   }
 
   // Remove bottom margin on nested lists
@@ -80,12 +96,12 @@ $_heading-phone: (
   }
 
   dt {
-    font-weight: 600;
+    font-weight: 600;                           // OP --font-weight-6 (OP normalize uses weight-7: 700)
   }
 
   dd {
-    margin-inline-start: 1.5em;
-    margin-bottom: 0.5em;
+    margin-inline-start: 1.5em;         // OP ~size-5 (em-relative)
+    margin-bottom: 0.5em;               // OP ~size-2 (em-relative)
   }
 
   // ----- Blockquote -----
@@ -94,15 +110,15 @@ $_heading-phone: (
   blockquote {
     margin-block: var(#{$prefix}spacing);
     margin-inline: 0;
-    padding: 0.25em var(#{$prefix}spacing);
-    border-inline-start: 0.25rem solid var(#{$prefix}border);
+    padding: 0.25em var(#{$prefix}spacing); // OP ~size-1 (em-relative), --size-3
+    border-inline-start: 0.25rem solid var(#{$prefix}border); // OP --size-1
     font-style: italic;
   }
 
   :where(blockquote) footer,
   :where(blockquote) cite {
     font-style: normal;
-    font-size: 0.9em;
+    font-size: 0.9em;                   // no OP match (near ~size-3)
     color: color-mix(in oklch, var(#{$prefix}text), transparent 40%);
   }
 
@@ -120,7 +136,7 @@ $_heading-phone: (
   // Spec §9.10
 
   mark {
-    padding: 0.1em 0.25em;
+    padding: 0.1em 0.25em;              // 0.1em: no OP match (micro); 0.25em: OP ~size-1
     background-color: #{string.unquote('light-dark(#fde68a, oklch(0.55 0.12 85))')};
     color: #{string.unquote('light-dark(inherit, oklch(0.95 0.01 85))')};
     border-radius: 2px;