fix(buttons): align [role="button"] and group vertical rhythm

- Add margin-block-end to [role="button"] so wrapped link-as-button
  rows don't collide
- Reduce button group margin from var(--nc-spacing) to 0.25em to
  match individual button rhythm
- Annotate all magic numbers across 15 SCSS files with Open Props
  token comments (OP --size-*, --font-*, --font-lineheight-*,
  --font-weight-*) and cross-reference with OP normalize choices
- Flag values with no OP match for future alignment

Author: Leftium

src/_buttons.scss

@@ -11,16 +11,16 @@
   // ----- Base button -----
 
   :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
-    --_btn-padding-v: 0.5em;
-    --_btn-padding-h: 1em;
+    --_btn-padding-v: 0.5em;   // OP ~size-2 (em-relative)
+    --_btn-padding-h: 1em;     // OP ~size-3 (em-relative)
 
     padding: var(--_btn-padding-v) var(--_btn-padding-h);
     background-color: var(#{$prefix}primary);
     color: var(#{$prefix}primary-contrast);
     border: 1px solid var(#{$prefix}primary);
     border-radius: var(#{$prefix}radius);
     font: inherit;
-    font-size: 1rem;
+    font-size: 1rem;            // OP --size-3
     line-height: 1.5;
     cursor: pointer;
     text-decoration: none;
@@ -30,10 +30,10 @@
     transition: background-color 0.2s, border-color 0.2s;
   }
 
-  // Vertical rhythm for flow-level buttons (not [role="button"] on
-  // arbitrary elements like logo containers — those opt in manually).
-  :where(button, [type="submit"], [type="reset"], [type="button"]) {
-    margin-block-end: 0.25em;
+  // Vertical rhythm for flow-level buttons and link-as-button elements
+  // so wrapped rows don't collide.
+  :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
+    margin-block-end: 0.25em;   // OP ~size-1 (em-relative)
   }
 
   :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]):hover {
@@ -66,10 +66,10 @@
   // ----- Inline (buttons within flow text) -----
 
   :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]).inline {
-    --_btn-padding-v: 0.05em;
-    --_btn-padding-h: 0.4em;
-    margin: 0.1em 0.15em;
-    font-size: 0.875em;
+    --_btn-padding-v: 0.05em;   // no OP match (micro)
+    --_btn-padding-h: 0.4em;    // no OP match (near ~size-2)
+    margin: 0.1em 0.15em;       // no OP match (micro)
+    font-size: 0.875em;         // no OP match (7/8)
     vertical-align: baseline;
   }
 
@@ -87,7 +87,7 @@
 
   :where([role="group"]) {
     display: inline-flex;
-    margin-bottom: var(#{$prefix}spacing);
+    margin-bottom: 0.25em;               // OP ~size-1 (em-relative); match individual buttons
   }
 
   [role="group"] > * {
@@ -171,15 +171,15 @@
   // ----- Search groups (pill shape) -----
 
   [role="search"] [role="group"] > :first-child {
-    border-start-start-radius: 5rem;
-    border-end-start-radius: 5rem;
-    padding-inline-start: 1.25em;
+    border-start-start-radius: 5rem;     // OP --size-10 (pill)
+    border-end-start-radius: 5rem;       // OP --size-10 (pill)
+    padding-inline-start: 1.25em;        // OP ~size-4 (em-relative)
   }
 
   [role="search"] [role="group"] > :last-child {
-    border-start-end-radius: 5rem;
-    border-end-end-radius: 5rem;
-    padding-inline-end: 1.25em;
+    border-start-end-radius: 5rem;       // OP --size-10 (pill)
+    border-end-end-radius: 5rem;         // OP --size-10 (pill)
+    padding-inline-end: 1.25em;          // OP ~size-4 (em-relative)
   }
 
 }

src/_code.scss

@@ -9,10 +9,10 @@
 
   :where(code, kbd, samp) {
     font-family: var(#{$prefix}font-mono);
-    font-size: 0.875em;
+    font-size: 0.875em;      // no OP match (7/8); OP normalize inherits font-size
     background-color: var(#{$prefix}surface-2);
     border-radius: var(#{$prefix}radius);
-    padding: 0.15em 0.35em;
+    padding: 0.15em 0.35em;  // no OP match; OP normalize: --size-1 --size-2
   }
 
   :where(pre) {

src/_config.scss

@@ -46,13 +46,13 @@ $surface-dark-chroma-boost: 0.003 !default;
 $surface-dark-hue-shift: 10 !default;
 
 // --- Typography ---
-$font-sans: system-ui, sans-serif !default;
-$font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro',
+$font-sans: system-ui, sans-serif !default;                        // OP --font-sans (--font-system-ui)
+$font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro',       // OP ~--font-mono (--font-monospace-code); subset
             Menlo, Consolas, 'DejaVu Sans Mono', monospace !default;
 
 // --- Spacing & Layout ---
-$spacing: 1rem !default;
-$radius: 0.25rem !default;
+$spacing: 1rem !default;       // OP --size-3
+$radius: 0.25rem !default;     // OP --size-1
 $content-width: 60ch !default;
 $wide-width: 1200px !default;
 

src/_details.scss

@@ -14,23 +14,24 @@
       border-radius: var(#{$prefix}radius);
       // No vertical padding — summary provides its own via the
       // negative-margin/padding trick for vertical centering.
-      padding: 0 1em;
+      padding: 0 1em;          // OP ~size-3 (em-relative)
+                               // OP normalize: padding-inline: --size-3, padding-block: --size-2
     }
 
     :where(details) {
-      margin-bottom: 0.5em;
+      margin-bottom: 0.5em;    // OP ~size-2 (em-relative)
     }
 
     :where(summary) {
       cursor: pointer;
-      font-weight: 600;
+      font-weight: 600;    // OP --font-weight-6 (OP normalize uses weight-7: 700 for dt/summary)
       // Stretch summary across the horizontal padding area, then
       // re-apply vertical + horizontal padding on itself. When
       // collapsed the text is vertically centered with equal padding.
       // Vertical padding matches button padding (0.5em) so collapsed
       // details height equals button height (2px border + 2.5em).
-      margin: 0 -1em;
-      padding: 0.5em 1em;
+      margin: 0 -1em;          // OP ~size-3 (em-relative, negative)
+      padding: 0.5em 1em;     // OP ~size-2 ~size-3 (em-relative)
       // Custom markers fix iOS Safari's tiny native disclosure triangle.
       // Full-size Unicode triangles inherit font metrics and sit on the
       // baseline like native markers.
@@ -51,15 +52,15 @@
     :where(summary[role="button"]) {
       display: block;
       width: auto;
-      margin: 0 -1em;          // restore stretch (button sets margin: 0)
+      margin: 0 -1em;          // OP ~size-3 (em-relative, negative); restore stretch
       list-style: none;         // remove ▶/▼ marker — replaced by ::before
     }
 
     :where(summary[role="button"])::before {
       content: '▶\00a0';
       display: inline-block;
       transition: transform 0.2s ease;
-      font-size: 0.75em;
+      font-size: 0.75em;       // no OP match (3/4)
       vertical-align: middle;
     }
 
@@ -69,7 +70,7 @@
 
     // When open, restore vertical padding for content spacing.
     :where(details[open]) {
-      padding-bottom: 0.5em;
+      padding-bottom: 0.5em;   // OP ~size-2 (em-relative)
     }
 
   }

src/_dialog.scss

@@ -13,7 +13,7 @@
       background-color: var(#{$prefix}surface-4);
       border: 1px solid var(#{$prefix}border);
       border-radius: var(#{$prefix}radius);
-      max-width: min(90vw, 40rem);
+      max-width: min(90vw, 40rem); // no OP match (above scale)
       max-height: 85vh;
       padding: var(#{$prefix}spacing);
     }
@@ -40,7 +40,7 @@
 
     dialog::backdrop {
       background: rgb(0 0 0 / 0.5);
-      backdrop-filter: blur(4px);
+      backdrop-filter: blur(4px); // OP --size-px-1
       animation: nc-backdrop-in 0.2s ease;
     }
 

src/_document.scss

@@ -10,8 +10,8 @@
 
   html {
     font-family: var(#{$prefix}font-sans);
-    font-size: 100%;    // = 16px in most browsers
-    line-height: 1.5;
+    font-size: 100%;    // = 16px (OP --size-3) in most browsers
+    line-height: 1.5;   // OP --font-lineheight-3
     color: var(#{$prefix}text);
     background-color: var(#{$prefix}surface-1);
     scrollbar-gutter: stable;

src/_forms.scss

@@ -13,14 +13,15 @@
          select, textarea) {
     --_input-bg: color-mix(in oklch, var(#{$prefix}surface-1), var(#{$prefix}surface-2) 20%);
 
-    padding: 0.5em 0.75em;
+    padding: 0.5em 0.75em;  // 0.5em: OP ~size-2; 0.75em: no OP match
+                            // OP normalize: padding-block: --size-1, padding-inline: --size-2
     min-height: calc(1em * 1.5 + 1em + 2px); // line-height + vertical padding + border
     background-color: var(--_input-bg);
     border: 1px solid var(#{$prefix}border);
     border-radius: var(#{$prefix}radius);
     color: var(#{$prefix}text);
     font: inherit;
-    font-size: 1rem; // >=16px prevents iOS Safari auto-zoom on focus
+    font-size: 1rem; // OP --size-3; >=16px prevents iOS Safari auto-zoom on focus
     transition: border-color 0.2s, box-shadow 0.2s;
   }
 
@@ -51,7 +52,7 @@
     display: block;
     margin-top: calc(var(#{$prefix}spacing) * -0.75); // pull up under the input
     margin-bottom: var(#{$prefix}spacing);
-    font-size: 0.875em;
+    font-size: 0.875em;     // no OP match (7/8)
     color: color-mix(in oklch, var(#{$prefix}text), transparent 40%);
   }
 
@@ -78,17 +79,17 @@
 
   :where(label) {
     display: block;
-    margin-bottom: 0.25em;
+    margin-bottom: 0.25em;   // OP ~size-1 (em-relative)
   }
 
   :where(label:has(+ input, + select, + textarea)) {
-    font-weight: 600;
+    font-weight: 600;    // OP --font-weight-6
   }
 
   // file and range are short/inline controls — increase the label gap to match
   // the visual weight of the spacing above and beside them.
   :where(label:has(+ [type="file"], + [type="range"])) {
-    margin-bottom: 0.5em;
+    margin-bottom: 0.5em;    // OP ~size-2 (em-relative)
   }
 
   // ----- Fieldset -----
@@ -109,25 +110,25 @@
   }
 
   :where(legend) {
-    font-weight: 600;
-    padding-inline: 0.25em;
+    font-weight: 600;    // OP --font-weight-6
+    padding-inline: 0.25em;  // OP ~size-1 (em-relative)
   }
 
   // ----- Checkbox & Radio -----
   // Use accent-color to tint native controls to match the primary color
 
   :where([type="checkbox"], [type="radio"]) {
     accent-color: var(#{$prefix}primary);
-    width: 1.125em;
-    height: 1.125em;
+    width: 1.125em;          // no OP match (OP normalize: --size-3 = 1rem)
+    height: 1.125em;         // no OP match (OP normalize: --size-3 = 1rem)
     margin: 0; // Remove browser default margin so flex labels align flush left
   }
 
   :where(label:has([type="checkbox"], [type="radio"])) {
     display: flex;
     align-items: center;
-    gap: 0.35em;
-    margin-bottom: 0.5em;
+    gap: 0.35em;             // no OP match (near ~size-1)
+    margin-bottom: 0.5em;    // OP ~size-2 (em-relative)
   }
 
   // Last checkbox/radio label in a group drops its bottom margin
@@ -139,8 +140,8 @@
   // ----- Search (pill shape) -----
 
   :where([type="search"]) {
-    border-radius: 5rem;
-    padding-inline: 1.25em;
+    border-radius: 5rem;     // OP --size-10 (pill)
+    padding-inline: 1.25em;  // OP ~size-4 (em-relative)
   }
 
   // ----- Range -----
@@ -170,9 +171,9 @@
   }
 
   :where([type="file"])::file-selector-button {
-    padding: 0.5em 1em;
-    margin-right: 0.75em;
-    margin-inline-end: 0.75em;
+    padding: 0.5em 1em;      // OP ~size-2 ~size-3 (em-relative)
+    margin-right: 0.75em;    // no OP match (between ~size-2/~size-3)
+    margin-inline-end: 0.75em; // no OP match (between ~size-2/~size-3)
     background-color: var(#{$prefix}primary);
     color: var(#{$prefix}primary-contrast);
     border: 1px solid var(#{$prefix}primary);
@@ -191,7 +192,7 @@
   // Natural width so picker icon stays near content (excluded from full-width rule above).
   // appearance: none is applied outside @layer (see below) to fix iOS Safari sizing.
   :where([type="date"], [type="month"], [type="week"], [type="time"], [type="datetime-local"]) {
-    min-width: 10em; // Prevent collapse when empty (e.g. time with no value)
+    min-width: 10em; // no OP match; prevent collapse when empty (e.g. time with no value)
     margin-bottom: var(#{$prefix}spacing);
   }
 
@@ -201,7 +202,7 @@
     --_color-size: calc(1em * 1.5 + 1em + 2px); // Match text input height
     margin-bottom: var(#{$prefix}spacing);
 
-    --_color-pad: 0.25em;
+    --_color-pad: 0.25em;    // OP ~size-1 (em-relative)
 
     height: var(--_color-size);
     width: calc((var(--_color-size) - 2 * var(--_color-pad)) * 1.618 + 2 * var(--_color-pad)); // Golden ratio inner swatch
@@ -229,14 +230,14 @@
     :where(label:has([type="checkbox"][role="switch"])) {
       display: flex;
       align-items: center;
-      gap: 0.5em;
+      gap: 0.5em;              // OP ~size-2 (em-relative)
     }
 
     :where([type="checkbox"][role="switch"]) {
       appearance: none;
-      width: 2.5em;
-      height: 1.25em;
-      border-radius: 1em;
+      width: 2.5em;            // no OP match (custom switch width)
+      height: 1.25em;          // OP ~size-4 (em-relative)
+      border-radius: 1em;      // OP ~size-3 (pill, em-relative)
       background-color: var(#{$prefix}border);
       position: relative;
       cursor: pointer;

src/_links.scss

@@ -11,7 +11,7 @@
   :where(a:not([role="button"])) {
     color: var(#{$prefix}primary);
     text-decoration: underline;
-    text-underline-offset: 0.15em;
+    text-underline-offset: 0.15em; // no OP match; OP normalize: 1px (2px Firefox)
     text-decoration-color: #{string.unquote('color-mix(in oklch, var(#{$prefix}primary), transparent 50%)')};
     transition: color 0.2s, text-decoration-color 0.2s;
   }

src/_media.scss

@@ -18,9 +18,9 @@
   }
 
   :where(figcaption) {
-    font-size: 0.9em;
+    font-size: 0.9em;        // no OP match; OP normalize: --font-size-1 (1rem)
     color: color-mix(in oklch, var(#{$prefix}text), transparent 40%);
-    margin-top: 0.5em;
+    margin-top: 0.5em;       // OP ~size-2 (em-relative)
   }
 
 }

src/_meter.scss

@@ -16,7 +16,7 @@
     -moz-appearance: none;
     appearance: none;
     width: 100%;
-    height: 0.5rem;
+    height: 0.5rem;          // OP --size-2
     overflow: hidden;
     border: 0;
     border-radius: var(#{$prefix}radius);
@@ -32,7 +32,7 @@
     border-radius: var(#{$prefix}radius);
     background-color: var(#{$prefix}surface-3);
     border: 0;
-    height: 0.5rem;
+    height: 0.5rem;          // OP --size-2
   }
 
   // WebKit: value bars for each semantic state