@leftium/nimble.css 0.10.0 → 0.12.0

package/src/_print.scss

@@ -13,7 +13,7 @@
 
   a[href]::after {
     content: " (" attr(href) ")";
-    font-size: 0.85em;
+    font-size: 0.85em;      // no OP match (near ~size-3)
     color: #555;
   }
 

package/src/_progress.scss

@@ -8,81 +8,12 @@
 
 @layer nimble.base {
 
+  // Native system progress bars on all platforms.
+  // Custom styling via appearance: none is broken on iOS Safari (partial
+  // stripping of native chrome) and cannot be scoped away from WebKit/Blink
+  // via CSS alone.  Native bars look fine everywhere.
   :where(progress) {
-    -webkit-appearance: none;
-    appearance: none;
-    position: relative;
     width: 100%;
-    height: 0.5rem;
-    overflow: hidden;
-    border: 0;
-    border-radius: var(#{$prefix}radius);
-    background-color: var(#{$prefix}surface-3);
-    color: var(#{$prefix}primary); // Firefox uses color for the bar
-  }
-
-  :where(progress)::-webkit-progress-bar {
-    border-radius: var(#{$prefix}radius);
-    background-color: var(#{$prefix}surface-3);
-  }
-
-  :where(progress)::-webkit-progress-value {
-    background-color: var(#{$prefix}primary);
-    border-radius: var(#{$prefix}radius);
-    transition: inline-size 0.3s ease;
-  }
-
-  :where(progress)::-moz-progress-bar {
-    background-color: var(#{$prefix}primary);
-    border-radius: var(#{$prefix}radius);
-  }
-
-  // Indeterminate: evenly-spaced blue bands travel continuously rightward.
-  // Gradient is 200% wide with two identical 10%-wide bands at 15% and 65%.
-  // They're 50% apart — exactly one visible width (100/200 = 50% of gradient).
-  // Animating position by -200% = one full gradient width → seamless loop.
-  :where(progress):not([value]) {
-    --nc-progress-track:
-      linear-gradient(to right,
-        var(#{$prefix}surface-3) 0%,
-        var(#{$prefix}primary) 25%,
-        var(#{$prefix}primary) 25%,
-        var(#{$prefix}surface-3) 50%,
-        var(#{$prefix}surface-3) 50%,
-        var(#{$prefix}primary) 75%,
-        var(#{$prefix}primary) 75%,
-        var(#{$prefix}surface-3) 100%);
-    --nc-progress-track-size: 200% 100%;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @supports selector(progress::after) {
-      :where(progress):not([value])::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        background: var(--nc-progress-track);
-        background-size: var(--nc-progress-track-size);
-        animation: nc-progress-indeterminate 12s linear infinite;
-      }
-    }
-
-    :where(progress):not([value])::-webkit-progress-bar {
-      background: var(--nc-progress-track);
-      background-size: var(--nc-progress-track-size);
-      animation: nc-progress-indeterminate 12s linear infinite;
-    }
-
-    :where(progress):not([value])::-moz-progress-bar {
-      background: var(--nc-progress-track);
-      background-size: var(--nc-progress-track-size);
-      animation: nc-progress-indeterminate 12s linear infinite;
-    }
-  }
-
-  @keyframes nc-progress-indeterminate {
-    from { background-position: 0% 0%; }
-    to { background-position: -200% 0%; }
   }
 
 }

package/src/_reset.scss

@@ -81,11 +81,11 @@
   }
 
   :where(sub) {
-    bottom: -0.25em;
+    bottom: -0.25em;         // OP ~size-1 (em-relative, negative)
   }
 
   :where(sup) {
-    top: -0.5em;
+    top: -0.5em;             // OP ~size-2 (em-relative, negative)
   }
 
   // --- Embedded content ---

package/src/_select.scss

@@ -32,7 +32,7 @@
       border: 1px solid var(#{$prefix}border);
       border-radius: var(#{$prefix}radius);
       background-color: var(#{$prefix}surface-1);
-      padding: 0.25em;
+      padding: 0.25em;         // OP ~size-1 (em-relative)
       // Fade in/out animation
       opacity: 0;
       transition: opacity 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
@@ -50,7 +50,8 @@
 
     // Options inside the picker
     :where(select) option {
-      padding: 0.5em 0.75em;
+      padding: 0.5em 0.75em;   // 0.5em: OP ~size-2; 0.75em: no OP match
+                               // OP normalize: select uses 0.75ch block, --size-relative-4 inline
       border-radius: var(#{$prefix}radius);
       transition: background-color 0.15s;
     }

package/src/_tables.scss

@@ -14,13 +14,14 @@
   }
 
   :where(th, td) {
-    padding: 0.5em 0.75em;
+    padding: 0.5em 0.75em;   // 0.5em: OP ~size-2; 0.75em: no OP match
+                              // OP normalize: --size-2 (0.5rem) both axes
     border-bottom: 1px solid #{string.unquote('color-mix(in oklch, var(#{$prefix}border), transparent 40%)')};
     text-align: start;
   }
 
   :where(thead th, thead td) {
-    font-weight: 600;
+    font-weight: 600;     // OP --font-weight-6
     border-bottom-width: 2px;
     background-color: var(#{$prefix}surface-2);
     text-wrap: balance;

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;