@apliteni/apliteni-ui 0.125.0 → 0.125.1

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 (2) hide show
  1. package/guidelines/colour-and-theming.md +33 -21
  2. package/package.json +1 -1
package/guidelines/colour-and-theming.md CHANGED
@@ -4,53 +4,67 @@
4
4
 
5
5
  **Rule:** Add and use a semantic colour token before writing a literal.
6
6
 
7
- **Why:** Literals cannot follow the theme or accent.
7
+ **Why:** Literals cannot follow themes or accents.
8
8
 
9
9
  **Do:** Use tokens for ground and ink.
10
10
 
11
- **Don't:** Freeze colours at dark-theme values.
11
+ **Don't:** Freeze dark-theme colours.
12
12
 
13
- **Except:** Token definitions set the colours; `#000` inside a mask controls alpha, not colour.
13
+ **Except:** Token definitions set colours. Mask `#000` controls alpha, not colour.
14
14
 
15
15
  <!-- rule: tokens -->
16
16
 
17
17
  ## Stable signals
18
18
 
19
- **Rule:** Let the accent change with a sub-theme, but keep `--pink` and `--green` unchanged.
19
+ **Rule:** Accents can follow sub-themes, but `--pink` and `--green` stay fixed.
20
20
 
21
- **Why:** If danger followed the accent, revoke and go would look identical.
21
+ **Why:** If danger followed accents, revoke and go would look identical.
22
22
 
23
- **Do:** Keep error as `--pink` under every accent.
23
+ **Do:** Keep errors `--pink` under every accent.
24
24
 
25
25
  **Don't:** Point `--pink` at the accent.
26
26
 
27
- **Except:** Across `data-theme`, signals change: light deepens `--pink` from `#e97ca5` to `#b63361` so it reads as ink on white.
27
+ **Except:** Across `data-theme`, signals change: light deepens `--pink` from `#e97ca5` to `#b63361` for legibility on white.
28
28
 
29
29
  <!-- rule: signals -->
30
30
 
31
31
  ## Accent contrast
32
32
 
33
- **Rule:** Use `--accent-strong` for an accent ground and `--accent` for accent ink.
33
+ **Rule:** Use `--accent-strong` for accent ground and `--accent` for accent ink.
34
34
 
35
- **Why:** `--accent` is text on the canvas; darker `--accent-strong` lets white clear AA.
35
+ **Why:** `--accent` is canvas ink; darker `--accent-strong` lets white clear AA.
36
36
 
37
- **Do:** Use `--accent-strong` behind white text.
37
+ **Do:** Set white text on `--accent-strong`.
38
38
 
39
- **Don't:** Use `--accent` as that ground.
39
+ **Don't:** Use `--accent` as ground.
40
40
 
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.
41
+ **Except:** Only Nebula gives the two tokens different values. Artur chose `--accent` for dark selected Segmented pills on #614.
42
42
 
43
43
  <!-- rule: accent-strong -->
44
44
 
45
+ ## Limit selection accents
46
+
47
+ <!-- rule: selection-accent -->
48
+
49
+ **Rule:** Limit selected navigation to one accent signal: a Segmented pill's fill or an underline tab's bar.
50
+
51
+ **Why:** Two accent marks on one item imply two states.
52
+
53
+ **Do:** Use contrasting ink on Segmented pills and strong ink above underline bars. See Keep text off grey fills for SidebarNav.
54
+
55
+ **Don't:** Add a second accent mark, such as an accent counter, to a selected tab.
56
+
57
+ **Except:** NavTabs pills keep accent ink on soft fill. Fill alone is too faint to mark the route. Artur chose this on #429.
58
+
45
59
  ## Theme checks
46
60
 
47
- **Rule:** Check dark and light themes and at least two accents before opening a PR.
61
+ **Rule:** Check both themes and two accents before a PR.
48
62
 
49
- **Why:** A pair that clears AA in dark can fail in light over a card’s wash.
63
+ **Why:** A pair passing AA in dark can fail in light over a card wash.
50
64
 
51
65
  **Do:** Test both themes and two accents.
52
66
 
53
- **Don't:** Check only dark mode and one accent.
67
+ **Don't:** Check only dark and one accent.
54
68
 
55
69
 
56
70
  <!-- rule: both-themes -->
@@ -59,17 +73,15 @@
59
73
 
60
74
  <!-- rule: text-surface -->
61
75
 
62
- **Rule:** Put text on the page or card surface, never on a grey fill.
76
+ **Rule:** Keep text on page or card surfaces, never grey fills.
63
77
 
64
- **Why:** Grey blocks make reading areas look disabled.
78
+ **Why:** Grey reading areas appear disabled.
65
79
 
66
- **Do:** Draw inputs with an edge. Keep grey fills for non-text states, such as disabled tracks and dividers.
80
+ **Do:** Give inputs edges. Reserve grey fills for non-text states, such as disabled tracks and dividers.
67
81
 
68
82
  **Don't:** Put text on grey fields, chips, headers or footers.
69
83
 
70
- **Except:** The sidebar rail's current row. Its mark may be neither an accent nor an edge — an outline there means focus — and in the page shell the rail is the card surface already. It takes the quiet fill a rung off its rail, label and all. Artur, r34 of [#475](https://github.com/apliteni/apliteni-ui/issues/475).
71
-
72
- **Except:** A status chip carries a soft fill. Where its tone reports no verdict it takes a light tint of muted ink that leaves the panel in one direction per theme, so the neutral tones read as the same family as the coloured ones.
84
+ **Except:** The page shell's SidebarNav rail is the card surface. Its current row and label take a quiet fill one rung off the rail, without accent or edge. An outline means focus. Artur chose this in r34 of #475. Neutral status chips use a light muted ink tint that leaves the panel in one direction per theme. They read as one family with coloured chips.
73
85
 
74
86
  ## Mark selection in forced colours
75
87
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apliteni/apliteni-ui",
3
- "version": "0.125.0",
3
+ "version": "0.125.1",
4
4
  "workspaces": [
5
5
  "react"
6
6
  ],