@apliteni/apliteni-ui 0.122.0 → 0.123.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/guidelines/colour-and-theming.md +2 -2
  2. package/package.json +1 -1
  3. package/src/styles/segmented.css +16 -9
package/guidelines/colour-and-theming.md CHANGED
@@ -32,13 +32,13 @@
32
32
 
33
33
  **Rule:** Use `--accent-strong` for an accent ground and `--accent` for accent ink.
34
34
 
35
- **Why:** `--accent` is text on the canvas; its darker sibling, `--accent-strong`, lets white clear AA.
35
+ **Why:** `--accent` is text on the canvas; darker `--accent-strong` lets white clear AA.
36
36
 
37
37
  **Do:** Use `--accent-strong` behind white text.
38
38
 
39
39
  **Don't:** Use `--accent` as that ground.
40
40
 
41
- **Except:** In Phoenix, Ocean and Emerald, both are one token; the difference matters only in Nebula.
41
+ **Except:** In Phoenix, Ocean and Emerald, both are one token; it matters only in Nebula. The selected segmented pill keeps `--accent` in dark, by Artur's choice on #614.
42
42
 
43
43
  <!-- rule: accent-strong -->
44
44
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apliteni/apliteni-ui",
3
- "version": "0.122.0",
3
+ "version": "0.123.0",
4
4
  "workspaces": [
5
5
  "react"
6
6
  ],
package/src/styles/segmented.css CHANGED
@@ -37,19 +37,26 @@
37
37
  .ui-seg button:hover { color: var(--strong); }
38
38
  /* aria-pressed is what segmented() emits now; aria-selected is kept so markup
39
39
  copied from an older release keeps painting its active pill. */
40
- /* The chosen pill is its fill and its ink. The accent outline it also drew was an
41
- outline used for selection, which is the property and the shape the focus band
42
- takes — on a chosen pill the two sat one pixel apart. Artur separated them on #578
43
- round r34, and the fill left behind has to be the mark: the track is --surface, and
44
- --surface on --surface is 1.000:1, so the pill read as its ink alone. --surface-3 is
45
- the kit's quiet non-text fill and steps off the track in both themes — 1.140:1 light,
46
- 1.160:1 dark — which stories/selected-fill.test.js measures.
40
+ /* Selection uses the accent fill. The outline marks keyboard focus only.
47
41
  why: docs/foundations.md#the-focus-ring */
48
42
  .ui-seg button.is-active,
49
43
  .ui-seg button[aria-pressed="true"],
50
44
  .ui-seg button[aria-selected="true"] {
51
- color: var(--strong);
52
- background: var(--surface-3); /* code-bg: inherit — a control's own selected fill; nothing nested reads a ground from it. */
45
+ color: var(--accent-contrast);
46
+ background: var(--accent);
47
+ }
48
+ /* White ink falls below the text floor on the lighter dark-theme accents. */
49
+ :where(:root[data-theme="dark"]) .ui-seg button.is-active,
50
+ :where(:root[data-theme="dark"]) .ui-seg button[aria-pressed="true"],
51
+ :where(:root[data-theme="dark"]) .ui-seg button[aria-selected="true"] {
52
+ color: var(--signal-contrast);
53
+ }
54
+
55
+ /* A disabled selection stays readable without the active accent fill. */
56
+ .ui-seg button.is-active:where(:disabled),
57
+ .ui-seg button[aria-pressed="true"]:where(:disabled),
58
+ .ui-seg button[aria-selected="true"]:where(:disabled) {
59
+ background: var(--surface-3); /* code-bg: inherit — the selected control's own fill. */
53
60
  }
54
61
 
55
62
  /* Standard pills tighten on phones so six short month names fit one row. */