@inklu/docs 0.2.0 → 0.2.2

package/src/typeset.css

@@ -11,7 +11,12 @@
     --typeset-size: 1em;
     --typeset-leading: 1.8;
     --typeset-flow: 1.5em;
-    --typeset-body: color-mix(in oklab, currentColor 82%, transparent);
+    --typeset-body: color-mix(in oklab, currentColor 78%, transparent);
+    --typeset-muted: var(
+      --color-muted-foreground,
+      color-mix(in oklab, currentColor 58%, transparent)
+    );
+    --typeset-faint: color-mix(in oklab, currentColor 42%, transparent);
   }
 
   .typeset-docs {
@@ -25,6 +30,15 @@
 
   .dark .typeset {
     --typeset-leading: 1.85;
+    /* Muted tones need to be a touch brighter in dark mode to stay legible
+       against a near-black background, since the contrast ratio compresses
+       faster there than it does on light backgrounds. */
+    --typeset-body: color-mix(in oklab, currentColor 80%, transparent);
+    --typeset-muted: var(
+      --color-muted-foreground,
+      color-mix(in oklab, currentColor 55%, transparent)
+    );
+    --typeset-faint: color-mix(in oklab, currentColor 40%, transparent);
   }
   .dark .typeset-docs {
     --typeset-leading: 1.6;
@@ -44,10 +58,6 @@
       font-size: var(--typeset-size);
     }
 
-    --typeset-muted: var(
-      --color-muted-foreground,
-      color-mix(in oklab, currentColor 60%, transparent)
-    );
     --typeset-rule: var(
       --color-border,
       color-mix(in oklab, currentColor 20%, transparent)
@@ -57,11 +67,11 @@
   .typeset
     *:not(
       :where(
-          .not-typeset,
-          [data-not-typeset],
-          .not-typeset *,
-          [data-not-typeset] *
-        )
+        .not-typeset,
+        [data-not-typeset],
+        .not-typeset *,
+        [data-not-typeset] *
+      )
     ) {
     /* Paragraphs. */
     &:where(p) {
@@ -70,7 +80,18 @@
       color: var(--typeset-body);
     }
 
-    /* Headings. */
+    /*
+     * Headings.
+     *
+     * The scale is intentionally compressed: h1 → h4 sit within ~0.25em of
+     * body text and of each other. Hierarchy is carried primarily by
+     * font-weight and full-opacity color (headings are never color-mixed,
+     * body copy always is), with size doing only secondary work. This reads
+     * as calmer and more "documentation-like" than a large type scale, and
+     * keeps h1–h4 visually close enough that jumping levels never feels like
+     * a jarring size cliff — only h5/h6 drop into the muted tier, since by
+     * that point they're acting more like eyebrow labels than headings.
+     */
     &:where(h1, h2, h3, h4, h5, h6) {
       color: var(--color-foreground, currentColor);
       font-family: var(--typeset-font-heading);
@@ -78,17 +99,18 @@
       margin-block-end: 0;
     }
     &:where(h1) {
-      font-size: 1.45em;
-      line-height: 1.3;
+      font-size: 1.25em;
+      line-height: 1.35;
+      letter-spacing: -0.01em;
       margin-block-start: var(--typeset-flow);
     }
     &:where(h2) {
-      font-size: 1.25em;
+      font-size: 1.125em;
       line-height: 1.4;
       margin-block-start: calc(var(--typeset-flow) * 1.4);
     }
     &:where(h3) {
-      font-size: 1.125em;
+      font-size: 1.0625em;
       line-height: 1.45;
       margin-block-start: var(--typeset-flow);
     }
@@ -98,17 +120,17 @@
       margin-block-start: var(--typeset-flow);
     }
     &:where(h5) {
-      font-size: 0.875em;
+      font-size: 0.9375em;
       line-height: 1.5;
       font-weight: 500;
       color: var(--typeset-muted);
-      margin-block-start: calc(var(--typeset-flow) / 0.875);
+      margin-block-start: calc(var(--typeset-flow) / 0.9375);
     }
     &:where(h6) {
       font-size: 0.8125em;
       line-height: 1.5;
       font-weight: 500;
-      letter-spacing: 0.08em;
+      letter-spacing: 0.06em;
       text-transform: uppercase;
       color: var(--typeset-muted);
       margin-block-start: calc(var(--typeset-flow) / 0.8125);
@@ -148,6 +170,7 @@
     /* Inline semantics. */
     &:where(strong, b) {
       font-weight: 600;
+      color: var(--color-foreground, currentColor);
     }
     &:where(:is(h1, h2, h3, h4) :is(strong, b)) {
       font-weight: 600;
@@ -169,7 +192,7 @@
       cursor: help;
     }
     &:where(del, s) {
-      color: var(--typeset-muted);
+      color: var(--typeset-faint);
       text-decoration-line: line-through;
     }
     &:where(sup, sub) {
@@ -228,10 +251,10 @@
       margin-block-start: 0.5em;
     }
     &:where(ul > li)::marker {
-      color: var(--typeset-muted);
+      color: var(--typeset-faint);
     }
     &:where(ol > li)::marker {
-      color: var(--typeset-muted);
+      color: var(--typeset-faint);
     }
 
     /* GFM task lists. */
@@ -255,7 +278,7 @@
       font-weight: 500;
     }
     &:where(summary)::marker {
-      color: var(--typeset-muted);
+      color: var(--typeset-faint);
     }
 
     /* Keyboard keys. */
@@ -263,6 +286,7 @@
       font-family: inherit;
       font-size: 0.85em;
       font-weight: 500;
+      color: var(--typeset-body);
       border: 1px solid var(--typeset-rule);
       border-block-end-width: 2px;
       border-radius: min(calc(var(--radius, 0.5em) * 0.6), 0.35em);
@@ -294,6 +318,7 @@
         --color-muted,
         color-mix(in oklab, currentColor 8%, transparent)
       );
+      color: var(--typeset-body);
       font-family: var(--typeset-font-mono);
       font-size: 0.85em;
       border-radius: min(calc(var(--radius, 0.5em) * 0.6), 0.35em);
@@ -319,6 +344,7 @@
     }
     &:where(pre code) {
       background-color: transparent;
+      color: inherit;
       font-family: inherit;
       font-size: inherit;
       padding: 0;
@@ -327,6 +353,7 @@
 
     /* Blockquote. */
     &:where(blockquote) {
+      color: var(--typeset-muted);
       border-inline-start: 2px solid var(--typeset-rule);
       padding-inline-start: 1em;
       margin-block-start: var(--typeset-flow);
@@ -351,7 +378,7 @@
       border-block-start: 1px solid var(--typeset-rule);
       padding-block-start: var(--typeset-flow);
       font-size: 0.875em;
-      color: var(--typeset-muted);
+      color: var(--typeset-faint);
     }
 
     /* Math. */
@@ -380,7 +407,7 @@
       margin-inline: 0;
     }
     &:where(figcaption, caption) {
-      color: var(--typeset-muted);
+      color: var(--typeset-faint);
       font-size: 0.875em;
       text-align: center;
       margin-block-start: calc(0.75em / 0.875);
@@ -419,6 +446,7 @@
     }
     &:where(thead th) {
       font-weight: 500;
+      color: var(--typeset-muted);
       text-align: start;
       white-space: nowrap;
       padding: 0.65em 1em;
@@ -434,6 +462,7 @@
     }
     &:where(tbody th, tfoot th) {
       font-weight: 500;
+      color: var(--color-foreground, currentColor);
     }
     &:where(th:first-child, td:first-child) {
       padding-inline-start: 0;
@@ -473,23 +502,23 @@
 
   /* First child adds no space above. Last so it wins ties. */
   .typeset
-  > :where(:first-child):not(
-    :where(
+    > :where(:first-child):not(
+      :where(
         .not-typeset,
         [data-not-typeset],
         .not-typeset *,
         [data-not-typeset] *
       )
-  ),
+    ),
   .typeset
     > :where(:first-child)
     > :where(:first-child):not(
       :where(
-          .not-typeset,
-          [data-not-typeset],
-          .not-typeset *,
-          [data-not-typeset] *
-        )
+        .not-typeset,
+        [data-not-typeset],
+        .not-typeset *,
+        [data-not-typeset] *
+      )
     ),
   .typeset
     :where(
@@ -502,11 +531,11 @@
       figure > picture > img
     ):not(
       :where(
-          .not-typeset,
-          [data-not-typeset],
-          .not-typeset *,
-          [data-not-typeset] *
-        )
+        .not-typeset,
+        [data-not-typeset],
+        .not-typeset *,
+        [data-not-typeset] *
+      )
     ) {
     margin-block-start: 0;
   }