@apliteni/apliteni-ui 0.23.3 → 0.23.4

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 (5) hide show
  1. package/README.md +6 -0
  2. package/package.json +1 -1
  3. package/src/styles/base.css +1 -1
  4. package/src/tokens/accents.css +18 -3
  5. package/src/tokens/tokens.css +0 -2
package/README.md CHANGED
@@ -132,6 +132,12 @@ Each accent re-points only the accent family (`--accent`, `--purple*`, `--glow-p
132
132
  stay put — so **every accent works in both themes** and every component follows with no
133
133
  component-level change.
134
134
 
135
+ Both attributes are overrides, not requirements: with neither present the kit paints dark
136
+ Nebula, and `data-accent` alone paints that accent on the dark theme. An absent `data-theme`
137
+ is *not* "follow the system" — the kit ships no `prefers-color-scheme` rule, so a host that
138
+ wants the OS preference resolves it in JS and stamps the attribute. See
139
+ [`docs/library.md`](./docs/library.md#an-absent-attribute-means-dark).
140
+
135
141
  Shipped accents: **Nebula** (purple, default), **Phoenix** (ember), **Ocean** (azure),
136
142
  **Emerald** (jade). Runtime helpers: `applyTheme('light')` / `applyAccent('phoenix')`
137
143
  (both persist to `localStorage`); or the `accentPicker()` component wired by `wireTopbar()`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apliteni/apliteni-ui",
3
- "version": "0.23.3",
3
+ "version": "0.23.4",
4
4
  "workspaces": [
5
5
  "react"
6
6
  ],
package/src/styles/base.css CHANGED
@@ -16,7 +16,7 @@ html {
16
16
 
17
17
  body {
18
18
  background: var(--bg);
19
- color: var(--ink);
19
+ color: var(--text);
20
20
  font-family: var(--font-sans);
21
21
  font-weight: var(--weight-normal);
22
22
  font-size: var(--text-base);
package/src/tokens/accents.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /* Accent sub-themes — an orthogonal `data-accent` dimension on top of
2
- * `data-theme`. Set both on <html>:
2
+ * `data-theme`. On <html>, with or without a theme:
3
3
  *
4
4
  * <html data-theme="dark" data-accent="phoenix">
5
+ * <html data-accent="phoenix"> <!-- default theme, same accent -->
5
6
  *
6
7
  * Each sub-theme only re-points the accent family. Surfaces, text and signal
7
8
  * colours (green = live, pink = danger) stay put, so every accent works in
@@ -10,12 +11,24 @@
10
11
  * --ring is NOT here: it is declared once in tokens.css as var(--accent), so
11
12
  * re-pointing --accent re-points the focus ring too.
12
13
  *
13
- * Selectors carry two attributes + :root, so they always out-specify the
14
- * single-attribute theme blocks in tokens.css regardless of import order.
14
+ * Every dark cell is a two-line selector list — a bare `:root[data-accent]`
15
+ * above the stamped form — which is the shape tokens.css gives the dark theme
16
+ * one file earlier, and for the same reason: the default theme needs no
17
+ * attribute, so neither may the accent. Written stamped-only, `data-accent`
18
+ * paints nothing at all in the state hosts use to mean "follow the system",
19
+ * where data-theme is simply absent. See issue #250.
20
+ *
21
+ * That bare line ties on specificity with :root[data-theme="light"] and wins on
22
+ * import order, so LIGHT is what the cascade has to be careful about: each light
23
+ * cell carries three attributes to out-specify it, and declares the same
24
+ * properties as its dark twin so none of the dark ramp leaks past it. Adding a
25
+ * property to one half of a pair and not the other is what breaks that, and
26
+ * stories/accent-without-theme.test.js is the gate that says so.
15
27
  *
16
28
  * why: docs/specification.md#the-focus-ring */
17
29
 
18
30
  /* ---- Phoenix — ember / rising fire (the strategy's namesake) ------------- */
31
+ :root[data-accent="phoenix"],
19
32
  :root[data-theme="dark"][data-accent="phoenix"] {
20
33
  --purple: #e0531f;
21
34
  --purple-light: #ff8a5c;
@@ -45,6 +58,7 @@
45
58
  }
46
59
 
47
60
  /* ---- Ocean — azure ------------------------------------------------------- */
61
+ :root[data-accent="ocean"],
48
62
  :root[data-theme="dark"][data-accent="ocean"] {
49
63
  --purple: #1f7fe0;
50
64
  --purple-light: #5ab0ff;
@@ -77,6 +91,7 @@
77
91
  }
78
92
 
79
93
  /* ---- Emerald — jade ------------------------------------------------------ */
94
+ :root[data-accent="emerald"],
80
95
  :root[data-theme="dark"][data-accent="emerald"] {
81
96
  --purple: #0fa876;
82
97
  --purple-light: #3ad9a0;
package/src/tokens/tokens.css CHANGED
@@ -157,7 +157,6 @@
157
157
  --accent: #b479ff;
158
158
  --accent-strong: #7c3aed; /* button bg — white text clears WCAG AA at 5.70:1 */
159
159
  --accent-contrast: #ffffff;
160
- --ink: #e9e7f0;
161
160
 
162
161
  /* Ink that reads on a SIGNAL colour once that colour becomes a fill — the glyph in a
163
162
  success circle, or on a toast's status circle. One near-black ink clears all five in
@@ -267,7 +266,6 @@
267
266
  --accent: #6a2dcc;
268
267
  --accent-strong: #6a2dcc; /* already dark enough for white text */
269
268
  --accent-contrast: #ffffff;
270
- --ink: #1e232b;
271
269
 
272
270
  --signal-contrast: #0c0c0c;
273
271
  --danger-contrast: #ffffff;