@jungherz-de/glasskit 1.24.0 → 1.26.0

package/CHANGELOG.md

@@ -7,6 +7,38 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [1.26.0] – 2026-10-18
+
+### Added
+
+- **`--gl-color-primary-text`, the primary as text.** The primary did two jobs: as a fill under white text — buttons, the checked toggle, the current step, the chosen day — and as text straight on the page or the glass: links in `.glass-prose`, the icon and label of the active tab, `.glass-modal__action--primary`, `.glass-list__item--accent`, `.glass-range-value`, the accordion trigger on hover and the chevron of an open item. A brand that darkens its primary in the dark theme so that white button text passes 4.5:1 got text too dark to read, and could not lighten it without changing every button. These eight rules take `--gl-color-primary-text` now, declared in both themes as `var(--gl-color-primary)`, so nothing changes until a project sets it. Measured on GlassKit's own dark background with `#c25028` as primary at 390 px, with `color-mix(in srgb, var(--gl-color-primary) 18%, #ffffff)` in the dark theme: a link on the page goes from 2.00:1 to 7.37:1, a link on a glass card from 1.37:1 to 5.05:1, the value of a range on a card from 1.78:1 to 6.55:1, the label of the active floating tab from 2.24:1 to 8.28:1. An accent row of a list on a card, the lightest place, goes from 1.06:1 to 3.47:1; white reaches 4.41:1 there. Docs, README, SKILL.md and `theme-override.css` show the recipe, with the light rule after the dark one, because `:root` matches a page in the light theme too. ([#12](https://github.com/JUNGHERZ/GlassKit/issues/12))
+- **`--gl-tab-bar-active-color`** colours the icon and label of the active tab alone, where it is set; unset, they take `--gl-color-primary-text`. The spotlight of the floating bar lightens the active item more than any other surface, so a brand may need a lighter tone there than in running text. Glow and dot stay in the primary, the spotlight in `--gl-tab-bar-spotlight-color`. ([#12](https://github.com/JUNGHERZ/GlassKit/issues/12))
+
+With the tokens unset, docs, showcase and landing pages of GlassKit and GlassKit Elements render pixel-identical to 1.25.0 in Chromium, WebKit and Firefox. Both tokens reach the shadow roots of GlassKit Elements by inheritance, with and without `glasskit.css` on the page. Checked in all three engines for plain markup and for the elements, in both themes, at the top of the page and in a nested `data-theme="light"` scope, which keeps the light primary.
+
+---
+
+## [1.25.0] – 2026-10-16
+
+### Added
+
+- **Tint surfaces: `data-surface="tint"`.** The solid preset mixes each surface over `--gl-color-bg-mid`, which fits a page whose background is the theme's middle colour. On a page with a background of its own — a brand colour, a photo, a pattern — an opaque surface stood out as a foreign block. The tint preset makes the surfaces in the flow of the page see-through tints of the text colour (`--gl-surface-1` … `-5` at 4, 6, 9, 12 and 16 %, the card glow likewise), nothing blurred: a field on a card stays as see-through as the card, and its contrast follows the text. What lies over other content keeps the solid values — modal, sheet, popover, toast and the tab bars, with the fields and rows inside them — and so do the milk surfaces, because a see-through secondary button would lose its dark text on a dark page. The solid values are kept as `--gl-solid-surface-1` … `-5` and `--gl-solid-card-glow-*` and follow `--gl-color-bg-mid`, so a brand sets that to its own colour. The solid preset is built on them now and renders pixel-identical to 1.24.0. Measured in Chromium, WebKit and Firefox, in both themes: of 19 elements rendered over red and over blue — plain and GlassKit Elements, one nested `data-theme` scope among them — the ones in the flow show the page through, while the panels, the secondary button and a field inside a popover do not; `<glk-modal>`'s panel is opaque inside its shadow root; nothing is blurred. The showcase switch has a third option. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+- **`--gl-blur-overlay`, a blur behind dialogs that the presets leave alone.** `.glass-modal-overlay` and `.glass-sheet-overlay` blur with it where it is set, else with `--gl-blur-soft` as before, which the surface presets set to `0`. A blurred dimmer suits a page without glass as well. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+- **Toggle track tokens:** `--gl-toggle-track-bg` and `--gl-toggle-track-bg-checked`; unset, `--gl-surface-2` and the primary gradient. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+- **Radio tokens:** `--gl-radio-bg`, `--gl-radio-bg-checked`, `--gl-radio-border`, `--gl-radio-border-checked`, `--gl-radio-dot-size` and `--gl-radio-dot-color`; unset, today's values. A ring in the text colour that turns the accent colour takes six declarations, shown in the docs. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+- **`--gl-textarea-field-sizing`:** `content` lets text areas grow with their text where `field-sizing` is supported. It is off by default because it ignores `rows`: a text area with `rows="8"` would shrink from 214 to 120 px. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+- **`--gl-input-picker-icon`:** `none` hides Chromium's picker button of date and time fields, and the arrow of a datalist, for a field whose prefix is the picker. Unset, every browser keeps its own (`revert`). ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+
+### Fixed
+
+- **An empty `.glass-label` takes no room.** It kept the input group's 8px gap above its field. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+- **A long value or placeholder in `.glass-input` ends in an ellipsis** while the field is not being edited, instead of being cut off. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+- **A read-only or disabled text area has no resize handle.** ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+
+With the presets and the new tokens unset, docs, showcase and landing pages of GlassKit and GlassKit Elements render pixel-identical to 1.24.0 in Chromium and WebKit.
+
+---
+
 ## [1.24.0] – 2026-10-14
 
 ### Added
@@ -1096,6 +1128,8 @@ during development. Version 1.3 is the first public open-source release.
 
 ---
 
+[1.26.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.26.0
+[1.25.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.25.0
 [1.24.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.24.0
 [1.23.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.23.0
 [1.22.2]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.22.2
@@ -1132,4 +1166,4 @@ during development. Version 1.3 is the first public open-source release.
 [1.3.2]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.2
 [1.3.1]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.1
 [1.3.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.0
-[Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.24.0...HEAD
+[Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.25.0...HEAD

package/README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <img src="https://img.shields.io/badge/version-1.24.0-orange?style=flat-square" alt="Version">
+  <img src="https://img.shields.io/badge/version-1.26.0-orange?style=flat-square" alt="Version">
   <img src="https://img.shields.io/badge/CSS-only-blue?style=flat-square" alt="CSS only">
   <img src="https://img.shields.io/badge/components-34-green?style=flat-square" alt="Components">
   <img src="https://img.shields.io/badge/license-MIT-lightgrey?style=flat-square" alt="License">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.24.0-f5a623?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.26.0-f5a623?style=flat-square" alt="Changelog"></a>
   <a href="https://www.npmjs.com/package/@jungherz-de/glasskit"><img src="https://img.shields.io/npm/v/@jungherz-de/glasskit?style=flat-square&color=cb3837&label=npm" alt="npm"></a>
   <a href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit/"><img src="https://img.shields.io/badge/CDN-jsDelivr-blue?style=flat-square" alt="jsDelivr"></a>
 </p>
@@ -72,16 +72,16 @@ No download, no build tool – just include and go:
 
 ```html
 <!-- jsDelivr – Minified -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.24/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.26/glasskit.min.css">
 
 <!-- jsDelivr – Unminified (for reading/debugging) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.24/glasskit.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.26/glasskit.css">
 
 <!-- unpkg – Alternative -->
-<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.24/glasskit.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.26/glasskit.min.css">
 ```
 
-> **Tip:** Replace `@1.24` with `@latest` for the newest version – or pin to a specific version for maximum stability.
+> **Tip:** Replace `@1.26` with `@latest` for the newest version – or pin to a specific version for maximum stability.
 
 ### npm / yarn / pnpm
 
@@ -274,6 +274,20 @@ substituted where it is *declared*, so a brand set on a subtree does not re-deri
 tokens inherited from `:root`. Every derived token is still a plain default and loses to
 a later declaration if you want to bend one.
 
+**Primary as text (since 1.26.0).** Links in `.glass-prose`, the icon and label of the active tab, the primary modal action, accent list rows, the value of a range and the accordion draw text in `--gl-color-primary-text`, which is the primary unless you set it. A brand that darkens its primary for white button text lightens the text in the dark theme instead, and the buttons keep their colour:
+
+```css
+:root, [data-theme="dark"] {
+  --gl-color-primary-text: color-mix(in srgb, var(--gl-color-primary) 18%, #ffffff);
+}
+/* after the dark rule: :root matches a page in the light theme too */
+[data-theme="light"] {
+  --gl-color-primary-text: var(--gl-color-primary);
+}
+```
+
+`--gl-tab-bar-active-color` colours the icon and label of the active tab alone, for a spotlight that needs a lighter tone still; unset, they take `--gl-color-primary-text`.
+
 The `theme-override.css` template comes with **4 example themes**:
 - 🔵 Ocean Blue
 - 🟢 Emerald Green
@@ -318,7 +332,7 @@ Every token can also be set on its own, for one density or both — the toggle's
 
 Like `data-theme`, keep `data-density` on `<html>`: an element further down that carries `data-theme="dark"` re-declares the dark block, the default sizes included.
 
-### Solid surfaces
+### Solid and tint surfaces
 
 Not every screen wants glass — admin screens, forms on a plain background, designs without it. Since **1.24.0** `data-surface="solid"` on `<html>` makes every surface opaque and turns blur and gloss off:
 
@@ -334,6 +348,18 @@ Each surface takes the colour the glass shows over the theme's middle background
 
 GlassKit Elements carries the attribute into its shadow roots, as it does with `data-theme`.
 
+A page with a background of its own — a brand colour, a photo, a pattern — takes `data-surface="tint"` instead (since **1.25.0**). The surfaces in the flow of the page become see-through tints of the text colour, nothing blurred, so a field on a card stays as see-through as the card. What lies over other content (modal, sheet, popover, toast, the tab bars) and the secondary button keep the solid values, which come from `--gl-color-bg-mid` — set it to a colour of your brand:
+
+```html
+<html data-theme="dark" data-surface="tint">
+```
+
+```css
+[data-surface='tint'] { --gl-color-bg-mid: #5c1310; }   /* panels in a dark red */
+```
+
+Both presets set the blur tokens to 0 but leave `--gl-blur-overlay` alone: set it to keep a blurred dimmer behind dialogs.
+
 ### Printing
 
 Print dialogs leave out background graphics by default, and some states are drawn with a background only. Since **1.21.1** those parts keep their colours on paper — the checked box and its tick, the chosen radio, the toggle's track, the progress fill, the current step, the chosen day of date strip and calendar, the slider thumb and the tone dots — while the rest of the page prints economically. Nothing to set.
@@ -361,6 +387,7 @@ All visual values are controlled via CSS Custom Properties:
 ```css
 /* Colors */
 --gl-color-primary        /* Primary color */
+--gl-color-primary-text   /* text and line icons in the primary; defaults to it */
 --gl-color-text           /* Text color */
 --gl-color-text-muted     /* Secondary text */
 
@@ -405,6 +432,14 @@ All visual values are controlled via CSS Custom Properties:
 --gl-list-title-white-space     /* nowrap, or normal to wrap list titles */
 --gl-list-subtitle-white-space  /* nowrap, or normal to wrap list subtitles */
 --gl-list-subtitle-lines        /* clamp of __subtitle--wrap, 3; none = all */
+--gl-blur-overlay               /* blur behind dialogs; unset: --gl-blur-soft; kept by the surface presets */
+--gl-toggle-track-bg            /* toggle track when off; unset: --gl-surface-2 (…-checked: the primary gradient) */
+--gl-radio-bg, --gl-radio-bg-checked, --gl-radio-border, --gl-radio-border-checked
+--gl-radio-dot-size             /* 10px */
+--gl-radio-dot-color            /* white */
+--gl-textarea-field-sizing      /* fixed; content lets text areas grow with their text */
+--gl-input-picker-icon          /* none hides Chromium's picker button of date and time fields */
+--gl-tab-bar-active-color       /* icon and label of the active tab; unset: --gl-color-primary-text */
 ```
 
 The full token reference can be found in the [Documentation](docs.html).

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: glasskit-css
-description: GlassKit is a pure CSS glassmorphism component library (v1.24.0) with 34 components, Dark & Light mode, design tokens, and BEM-like naming. Use this reference whenever generating HTML that uses GlassKit classes to ensure correct structure, nesting, modifiers, and token usage.
+description: GlassKit is a pure CSS glassmorphism component library (v1.26.0) with 34 components, Dark & Light mode, design tokens, and BEM-like naming. Use this reference whenever generating HTML that uses GlassKit classes to ensure correct structure, nesting, modifiers, and token usage.
 ---
 
 # GlassKit CSS – AI Component Reference
@@ -104,6 +104,8 @@ Opaque surfaces without blur and gloss, for admin screens, forms on a plain back
 
 Each surface (`--gl-surface-*`, the milk surfaces, the card glow) takes the colour the glass shows over `--gl-color-bg-mid`, so the order of the surfaces stays and a re-branded background carries over. `--gl-blur*` are `0px`, the `--gl-inset-*` shine and the gloss tokens (`--gl-gloss-card`, `--gl-gloss-modal`, `--gl-gloss-progress`, `--gl-range-thumb-border`) are off. Borders, drop shadows, the tints of badges and chips and the overlay stay. A theme scope inside the page (an element with its own `data-theme`) stays solid. It is tokens only: tune it with `[data-surface='solid'] { --gl-surface-2: … }`, never by overriding a component's `background` or `backdrop-filter`. Without the attribute nothing changes; `removeAttribute('data-surface')` switches back at runtime. GlassKit Elements mirrors the attribute into its shadow roots.
 
+**Tint (since 1.25.0).** For a page with a background of its own — a brand colour, a photo, a pattern — `data-surface="tint"`: the surfaces in the flow of the page become see-through tints of the text colour (`--gl-surface-1` … `-5` at 4, 6, 9, 12, 16 %, the card glow likewise), nothing blurred. What lies over other content — modal, sheet, popover, toast, the tab bars, with the fields and rows inside them — keeps the solid values, and so do the milk surfaces (the secondary button is a light plate for dark ink). The solid values are kept as `--gl-solid-surface-1` … `-5` and `--gl-solid-card-glow-*` and follow `--gl-color-bg-mid`: a brand sets `[data-surface='tint'] { --gl-color-bg-mid: … }`. Blur and gloss are off as with solid; both presets leave `--gl-blur-overlay` alone.
+
 ### Printing (since 1.21.1)
 
 Print dialogs leave out backgrounds by default. The parts that carry a state keep their colours on paper (`print-color-adjust: exact` inside `@media print`): checkbox box and tick, radio circle and dot, toggle track and thumb, progress fill, the current step, the chosen day of date strip and calendar, the slider thumb, the tone dots. Everything else prints economically. Nothing to set — do not add your own `print-color-adjust` to whole components: it also stops the browser from darkening light text for paper.
@@ -161,6 +163,7 @@ All are derived from the state color via `color-mix()`, so overriding
 | `--gl-color-success-on-surface` | Badge text on the success tint | lightened / darkened success |
 | `--gl-color-error-on-surface` | Badge text on the error tint | lightened / darkened error |
 | `--gl-color-warning-on-surface` | Badge text on the warning tint (since 1.18.0) | lightened (dark) / darkened (light) warning |
+| `--gl-color-primary-text` | Text and line icons in the primary straight on the page or the glass: `.glass-prose` links, icon and label of the active tab, `.glass-modal__action--primary`, `.glass-list__item--accent`, `.glass-range-value`, the accordion trigger on hover and the chevron of an open item (since 1.26.0) | `var(--gl-color-primary)` in both themes |
 | `--gl-color-primary-surface` / `-border` | Badge fill / border | `color-mix(… primary 25% / 30%, transparent)` |
 | `--gl-color-success-surface` / `-border` | Badge fill / border | `color-mix(… success 15% / 30%, transparent)` |
 | `--gl-color-error-surface` / `-border` | Badge fill / border | `color-mix(… error 15% / 30%, transparent)` |
@@ -189,6 +192,15 @@ fully-translucent pre-1.7.0 chip.
 > surface.** Those values are fills. Use the matching `-on-surface` token, which is what
 > `.glass-badge--*` does.
 
+> **Primary-coloured text on the page or the glass takes `--gl-color-primary-text`** (since 1.26.0), not `--gl-color-primary`. It defaults to the primary, so it looks the same, but a brand that darkens its primary for white button text can lighten the text in its dark theme without touching a button. Write the light rule after the dark one, because `:root` matches a page in the light theme too:
+>
+> ```css
+> :root, [data-theme="dark"] { --gl-color-primary-text: color-mix(in srgb, var(--gl-color-primary) 18%, #ffffff); }
+> [data-theme="light"]       { --gl-color-primary-text: var(--gl-color-primary); }
+> ```
+>
+> Measured on GlassKit's dark background with `#c25028` as primary: a link on a glass card goes from 1.37:1 to 5.05:1, the active tab of the floating bar from 2.24:1 to 8.28:1. The active tab also reads `--gl-tab-bar-active-color` (unset → `--gl-color-primary-text`), for icon and label alone.
+
 ### Glass Surfaces
 
 | Token | Dark | Usage |
@@ -431,7 +443,7 @@ Fixed bottom navigation with glass background. Requires `glass-bg--has-tab-bar`
 |---|---|
 | `.glass-tab-bar` | Container: fixed bottom, glass blur |
 | `.glass-tab-bar__item` | Individual tab |
-| `.glass-tab-bar__item.is-active` | Active tab (primary color) |
+| `.glass-tab-bar__item.is-active` | Active tab: icon and label in `--gl-tab-bar-active-color` where set, else `--gl-color-primary-text` (since 1.26.0; both default to the primary); glow and dot in the primary |
 | `.glass-tab-bar__icon` | Icon wrapper |
 | `.glass-tab-bar__badge` | Numeric badge inside icon |
 | `.glass-tab-bar__label` | Text label below icon |
@@ -459,7 +471,7 @@ Pill-shaped, centered, floating bar (iOS 26 Liquid Glass style). Wrap it in `.gl
 |---|---|
 | `.glass-tab-bar-dock` | Wrapper: fixed bottom-center, holds bar + accessory |
 | `.glass-tab-bar-dock--accessory-left` | Modifier: accessory on the left |
-| `.glass-tab-bar--floating` | Pill shape, max-content width, spotlight active state |
+| `.glass-tab-bar--floating` | Pill shape, max-content width, spotlight active state (`--gl-tab-bar-spotlight-color`, the primary) |
 | `.glass-tab-bar__accessory` | Standalone glass capsule next to the bar |
 | `.glass-tab-bar__accessory--accent` / `--success` / `--error` | Filled colored accessory (white icon) |
 | `.glass-bg--has-tab-bar-floating` | Background padding for the floating variant |
@@ -733,6 +745,8 @@ dialog.addEventListener('cancel', (e) => { e.preventDefault(); closeDialog(); })
 
 While a modal dialog is open everything outside it is inert — a toast shown then is neither clickable nor announced; give feedback inside the dialog. Wider dialogs (forms, tables): `.my-dialog { --gl-modal-max-width: 560px; }`.
 
+**Blur behind the dialog (since 1.25.0).** The dimmer of `.glass-modal-overlay` and `.glass-sheet-overlay` blurs with `--gl-blur-overlay` where set, else with `--gl-blur-soft`. The surface presets set the blur tokens to 0 but not this one, so `:root { --gl-blur-overlay: 8px; }` keeps a blurred dimmer on a page without glass.
+
 ---
 
 ### 3.13 Toast
@@ -832,6 +846,8 @@ Date and time fields (`type="date"`, `time`, `datetime-local`, `month`) take the
 </div>
 ```
 
+**Long values, empty labels, picker icon (since 1.25.0).** A value or placeholder too long for the field ends in an ellipsis while the field is not being edited, and a `.glass-label` without text takes no room (`:empty`; it used to keep the group's 8px gap). Date and time fields keep the browser's own picker button; `--gl-input-picker-icon: none` hides it in Chromium (WebKit and Firefox draw none to hide) — for a field whose prefix is the picker; call `showPicker()` from it then. It also hides the arrow of a field with a `<datalist>`.
+
 ---
 
 ### 3.15 Textarea
@@ -846,6 +862,8 @@ Multi-line text field.
 |---|---|
 | `.glass-textarea` | Multi-line glass input |
 
+**Growing and read-only (since 1.25.0).** `--gl-textarea-field-sizing: content` lets text areas grow with their text, where `field-sizing` is supported; off by default (`fixed`), because it ignores `rows`. A read-only or disabled text area has no resize handle.
+
 ---
 
 ### 3.16 Select
@@ -917,6 +935,8 @@ iOS-style switch.
 
 The input is invisible but lies **on top of** the track and takes the click itself (since 1.20.0) — a test tool clicking the switch by role (`getByRole('switch')` with `role="switch"` on the input) reaches it. It covers only the track; label text, links in it included, stays the label's. An empty `__label` takes no room (no 12px gap). Both apply to checkbox and radio as well.
 
+**Track tokens (since 1.25.0).** `--gl-toggle-track-bg` (off; unset `--gl-surface-2`) and `--gl-toggle-track-bg-checked` (on; unset the primary gradient) — a stronger track for a page without glass, e.g. `color-mix(in srgb, var(--gl-color-text) 35%, transparent)`.
+
 ---
 
 ### 3.19 Checkbox
@@ -979,6 +999,8 @@ Animated radio button with dot.
 
 **Important:** Radio buttons in the same group need the same `name` attribute value.
 
+**Radio tokens (since 1.25.0).** `--gl-radio-bg` / `--gl-radio-bg-checked` (unset `--gl-surface-2` / the primary gradient), `--gl-radio-border` / `--gl-radio-border-checked` (whole border values; unset `1.5px solid` in `--gl-border-medium` / `--gl-border-warm` — give both the same width), `--gl-radio-dot-size` (`10px`; `50%` follows the circle) and `--gl-radio-dot-color` (`white`). A ring that turns the accent colour: `--gl-radio-bg: transparent; --gl-radio-bg-checked: transparent; --gl-radio-border: 2px solid color-mix(in srgb, var(--gl-color-text) 60%, transparent); --gl-radio-border-checked: 2px solid var(--gl-color-primary); --gl-radio-dot-size: 50%; --gl-radio-dot-color: var(--gl-color-primary)`.
+
 ---
 
 ### 3.21 Range Slider
@@ -2141,6 +2163,19 @@ Two things worth knowing:
 }
 ```
 
+The opposite case — a primary dark enough for white button text, too dark for text on a dark background — is `--gl-color-primary-text` (since 1.26.0, section 2). It colours prose links, the active tab, the primary modal action, accent list rows, the range value and the accordion, and defaults to the primary. Set it per theme, the light rule after the dark one:
+
+```css
+:root, [data-theme="dark"] {
+  --gl-color-primary-text:   color-mix(in srgb, var(--gl-color-primary) 18%, #ffffff);
+  --gl-tab-bar-active-color: #ffffff;   /* optional: icon and label of the active tab alone */
+}
+[data-theme="light"] {
+  --gl-color-primary-text:   var(--gl-color-primary);
+  --gl-tab-bar-active-color: var(--gl-color-primary-text);
+}
+```
+
 Overriding `--gl-color-success` / `--gl-color-error` is enough on its own: fill, border,
 text and glow of every state component are derived from those tokens. Only if you want
 a different ink than the derived one do you need to touch `--gl-color-{state}-on-surface`.