refactor: consolidate text-1/text-2 into single --nc-text variable

Author: Leftium

README.md

@@ -156,7 +156,7 @@ For build-time customization, override any SCSS config variable:
 nimble.css combines [Open Props](https://open-props.style/)'s design token philosophy with [PicoCSS](https://picocss.com/)'s classless aesthetics. Key concepts borrowed from Open Props:
 
 - **Surface hierarchy** (`surface-1` through `surface-4`) — layered backgrounds for page, card, input, and overlay contexts. Defined in `_colors.scss` from OKLCH parameters rather than imported at runtime.
-- **Text hierarchy** (`text-1`, `text-2`) — primary and muted text colors, same naming convention as Open Props.
+- **Text color** (`text`) — single text color variable; muted text derived inline via `color-mix()`.
 - **OKLCH color space** — perceptually uniform color system. Change `$primary-hue` and the entire palette regenerates consistently.
 - **Curated scale values** — `$spacing: 1rem` (~Open Props `size-3`) and `$radius: 0.25rem` (~Open Props `radius-2`) are sourced from Open Props' scales.
 - **Minimal DevTools pollution** — ~20 semantic custom properties on `:root` plus scoped `--_` internals per component, rather than dumping hundreds of variables globally.

demo/extended.html

@@ -287,7 +287,7 @@ <h2>Typography</h2>
     </main>
 
     <footer>
-      <p><small>nimble.css — Extended Demo. <a href="https://github.com/nicholasgasior/nimble.css">Source on GitHub</a>.</small></p>
+      <p><small>nimble.css — Extended Demo. <a href="https://github.com/leftium/nimble.css">Source on GitHub</a>.</small></p>
     </footer>
 
     <script>

specs/nimble-css.md

@@ -235,8 +235,8 @@ Compared to the original draft's ~25, we cut:
 - `border-muted` -- derived from `--nc-border` at lower opacity where needed
 - `mark` -- hardcoded yellow, not worth a variable
 - `transition` -- hardcoded `0.2s ease-in-out`
-- `text-heading` -- headings differentiate via size, not color
 - `text-1` / `text-2` -- replaced by single `--nc-text`; muted text uses `color-mix()` inline
+- `text-heading` -- headings differentiate via size, not color
 - `wide-width` -- hardcoded in `.wide` utility
 - `line-height`, `font-size` -- hardcoded sensible defaults (1.5, 100%)
 

src/_colors.scss

@@ -45,14 +45,10 @@
     }
 
     // ----- Text -----
-    #{$prefix}text-1: #{_light-dark(
+    #{$prefix}text: #{_light-dark(
       _oklch(0.280, 0.005, $surface-hue),
       _oklch(0.860, 0.005, $surface-hue)
     )};
-    #{$prefix}text-2: #{_light-dark(
-      _oklch(0.580, 0.005, $surface-hue),
-      _oklch(0.650, 0.005, $surface-hue)
-    )};
 
     // ----- Border -----
     #{$prefix}border: #{_light-dark(

src/_document.scss

@@ -12,7 +12,7 @@
     font-family: var(#{$prefix}font-sans);
     font-size: 100%;    // = 16px in most browsers
     line-height: 1.5;
-    color: var(#{$prefix}text-1);
+    color: var(#{$prefix}text);
     background-color: var(#{$prefix}surface-1);
   }
 
@@ -36,7 +36,7 @@
   // Selection styling using primary accent
   ::selection {
     background-color: var(#{$prefix}primary-focus);
-    color: var(#{$prefix}text-1);
+    color: var(#{$prefix}text);
   }
 
 }

src/_forms.scss

@@ -18,7 +18,7 @@
     background-color: var(--_input-bg);
     border: 1px solid var(#{$prefix}border);
     border-radius: var(#{$prefix}radius);
-    color: var(#{$prefix}text-1);
+    color: var(#{$prefix}text);
     font: inherit;
     font-size: 1rem; // >=16px prevents iOS Safari auto-zoom on focus
     transition: border-color 0.2s, box-shadow 0.2s;
@@ -46,7 +46,7 @@
     margin-top: calc(var(#{$prefix}spacing) * -0.75); // pull up under the input
     margin-bottom: var(#{$prefix}spacing);
     font-size: 0.875em;
-    color: var(#{$prefix}text-2);
+    color: color-mix(in oklch, var(#{$prefix}text), transparent 40%);
   }
 
   // ----- Validation states (aria-invalid) -----
@@ -283,7 +283,7 @@
   // ----- File -----
 
   :where([type="file"]) {
-    color: var(#{$prefix}text-1);
+    color: var(#{$prefix}text);
     font: inherit;
     cursor: pointer;
     max-width: 100%; // Prevent native file input from overflowing container (iOS Safari)
@@ -319,7 +319,7 @@
     background-color: var(--_input-bg);
     border: 1px solid var(#{$prefix}border);
     border-radius: var(#{$prefix}radius);
-    color: var(#{$prefix}text-1);
+    color: var(#{$prefix}text);
     font: inherit;
     font-size: 1rem; // >=16px prevents iOS Safari auto-zoom on focus
     margin-bottom: var(#{$prefix}spacing);

src/_media.scss

@@ -19,7 +19,7 @@
 
   :where(figcaption) {
     font-size: 0.9em;
-    color: var(#{$prefix}text-2);
+    color: color-mix(in oklch, var(#{$prefix}text), transparent 40%);
     margin-top: 0.5em;
   }
 

src/_typography.scss

@@ -103,7 +103,7 @@ $_heading-phone: (
   :where(blockquote) cite {
     font-style: normal;
     font-size: 0.9em;
-    color: var(#{$prefix}text-2);
+    color: color-mix(in oklch, var(#{$prefix}text), transparent 40%);
   }
 
   // ----- Horizontal Rule -----