@apliteni/apliteni-ui 0.11.4 → 0.23.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 (35) hide show
  1. package/package.json +1 -1
  2. package/react/dist/index.css +19 -0
  3. package/react/dist/index.d.ts +43 -2
  4. package/react/dist/index.js +98 -6
  5. package/src/assets/icons.js +51 -9
  6. package/src/components/account-nav.js +1 -1
  7. package/src/components/index.js +16 -2
  8. package/src/components/loading.js +126 -0
  9. package/src/components/shell.js +10 -9
  10. package/src/index.css +6 -1
  11. package/src/index.js +1 -0
  12. package/src/inline.js +4 -0
  13. package/src/styles/badge.css +1 -1
  14. package/src/styles/base.css +1 -1
  15. package/src/styles/button.css +18 -5
  16. package/src/styles/callout.css +37 -18
  17. package/src/styles/card.css +1 -1
  18. package/src/styles/code.css +7 -1
  19. package/src/styles/confirm.css +1 -1
  20. package/src/styles/drawer.css +9 -6
  21. package/src/styles/dropdown.css +14 -7
  22. package/src/styles/empty.css +1 -1
  23. package/src/styles/feedback.css +25 -16
  24. package/src/styles/footer.css +15 -6
  25. package/src/styles/input.css +28 -2
  26. package/src/styles/layout.css +14 -10
  27. package/src/styles/loading.css +144 -0
  28. package/src/styles/motion.css +14 -24
  29. package/src/styles/nav.css +14 -12
  30. package/src/styles/reduced-motion.css +32 -0
  31. package/src/styles/success.css +8 -8
  32. package/src/styles/table.css +21 -12
  33. package/src/styles/topbar.css +27 -12
  34. package/src/tokens/accents.css +7 -7
  35. package/src/tokens/tokens.css +91 -10
package/src/tokens/accents.css CHANGED
@@ -5,10 +5,16 @@
5
5
  * <html data-theme="dark" data-accent="phoenix">
6
6
  *
7
7
  * Each sub-theme only re-points the accent family (--accent, --purple*,
8
- * --glow-purple, --ring, --grad-*). Surfaces, text and signal colours (green =
8
+ * --glow-purple, --grad-*). Surfaces, text and signal colours (green =
9
9
  * live, pink = danger) stay put, so every accent works in light AND dark and
10
10
  * every component follows with zero component-level changes.
11
11
  *
12
+ * --ring is NOT here. It is declared once, in tokens.css, as var(--accent), so
13
+ * re-pointing --accent above re-points the focus ring too. Six hand-written
14
+ * rgba() rings used to sit in this file and every one of them missed the 3:1
15
+ * of WCAG 1.4.11 — 1.35:1 at worst. See #218 and
16
+ * docs/specification.md#the-focus-ring.
17
+ *
12
18
  * Selectors carry two attributes + :root, so they always out-specify the
13
19
  * single-attribute theme blocks in tokens.css regardless of import order.
14
20
  * ========================================================================== */
@@ -25,7 +31,6 @@
25
31
  but not its own wash over a card, which lifts the ground toward the ink. The
26
32
  hue is untouched. See issue #157. */
27
33
  --glow-purple: rgba(255, 106, 61, 0.15);
28
- --ring: 0 0 0 3px rgba(255, 106, 61, 0.38);
29
34
  --grad-from: #ff7a45;
30
35
  --grad-to: #ffcf6a;
31
36
  }
@@ -39,7 +44,6 @@
39
44
  --accent-strong: var(--accent);
40
45
  --accent-contrast: #ffffff;
41
46
  --glow-purple: rgba(214, 74, 18, 0.10);
42
- --ring: 0 0 0 3px rgba(214, 74, 18, 0.28);
43
47
  --grad-from: #d64a12;
44
48
  --grad-to: #e8992a;
45
49
  }
@@ -55,7 +59,6 @@
55
59
  /* Thinned from 0.18 for WCAG AA, the same wash-over-a-card pair as dark
56
60
  Phoenix and from the same alpha. The hue is untouched. See issue #157. */
57
61
  --glow-purple: rgba(59, 157, 255, 0.15);
58
- --ring: 0 0 0 3px rgba(59, 157, 255, 0.38);
59
62
  --grad-from: #3b9dff;
60
63
  --grad-to: #20dcf5;
61
64
  }
@@ -83,7 +86,6 @@
83
86
  rather than the accent — in light a glow tints --purple-light, which
84
87
  stories/signal-contrast.test.js holds. See issue #157. */
85
88
  --glow-purple: rgba(21, 104, 214, 0.10);
86
- --ring: 0 0 0 3px rgba(21, 104, 214, 0.28);
87
89
  --grad-from: #1568d6;
88
90
  --grad-to: #17a2c0;
89
91
  }
@@ -97,7 +99,6 @@
97
99
  --accent-strong: var(--accent);
98
100
  --accent-contrast: #04180f;
99
101
  --glow-purple: rgba(22, 201, 138, 0.18);
100
- --ring: 0 0 0 3px rgba(22, 201, 138, 0.38);
101
102
  --grad-from: #16c98a;
102
103
  --grad-to: #20dcf5;
103
104
  }
@@ -113,7 +114,6 @@
113
114
  /* Thinned from 0.10 for WCAG AA, the same grey-panel pair as light Ocean and
114
115
  from the same alpha. See issue #157. */
115
116
  --glow-purple: rgba(11, 156, 104, 0.08);
116
- --ring: 0 0 0 3px rgba(11, 156, 104, 0.28);
117
117
  --grad-from: #0b9c68;
118
118
  --grad-to: #12b0a0;
119
119
  }
package/src/tokens/tokens.css CHANGED
@@ -41,6 +41,14 @@
41
41
  --space-12: 48px;
42
42
  --space-16: 64px;
43
43
 
44
+ /* -- Measure ------------------------------------------------------------
45
+ * --container is the page, gutter to gutter; --measure is the reading column
46
+ * INSIDE a track, beside a sidebar. Different axes, never interchangeable.
47
+ * Below --measure are --panel-* and --prose-*, at the end of this file (#208).
48
+ * why: docs/specification.md#widths */
49
+ --container: 1120px;
50
+ --measure: 860px;
51
+
44
52
  /* -- Typography --------------------------------------------------------- */
45
53
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
46
54
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
@@ -79,6 +87,12 @@
79
87
  * without brand.generated.css. Delays are the kit's own (not a brand
80
88
  * concern). The reusable effect layer lives in styles/motion.css. */
81
89
  --ease: var(--easing-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
90
+ --ease-out: var(--easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
91
+ --ease-in: var(--easing-ease-in, cubic-bezier(0.4, 0, 1, 1));
92
+ --ease-sharp: var(--easing-sharp, cubic-bezier(0.4, 0, 0.6, 1));
93
+ --ease-spring: var(--easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
94
+
95
+ --dur-instant: var(--duration-instant, 0.08s); /* 80ms — press, tick */
82
96
  --dur-fast: var(--duration-fast, 0.15s); /* 150ms — hover, press */
83
97
  --dur-med: var(--duration-normal, 0.25s); /* 250ms — panels, dropdowns */
84
98
  --dur-slow: var(--duration-slow, 0.4s); /* 400ms — enters, reveals */
@@ -109,7 +123,7 @@
109
123
  the shape light Nebula and light Ocean already ship and which dark Nebula
110
124
  held until #157 lifted the accent onto the old --purple-mid. Left alone,
111
125
  the two tokens would resolve to one colour and the ramp would carry a
112
- duplicate step. #bd8cff is the value docs/adr/0006 reasons about and
126
+ duplicate step. #bd8cff is the value docs/specification.md#colour-and-contrast reasons about and
113
127
  rejects as the accent; it becomes the ramp's top step instead. Light
114
128
  Nebula's ramp does not move. See issue #157. */
115
129
  --purple-light: #b479ff;
@@ -142,13 +156,28 @@
142
156
  --dim: #c6c2d6;
143
157
  --muted: #948fa8;
144
158
 
159
+ /* The paint of a control that is off. NOT an opacity: `opacity` is a group
160
+ property, so it fades a label and the box under it toward the ground
161
+ TOGETHER and the pair a reader is left with is whatever that composite
162
+ lands on — a disabled primary button measured 1.48:1 that way, white on a
163
+ faded accent. These three composite predictably instead: the ink is read on
164
+ the surface beside it, and both are opaque. They are aliases, not new
165
+ colours — the ramp gains nothing to keep in sync. A disabled control drops
166
+ its accent, which is most of what makes it read as inert; the ink going
167
+ quiet is the rest. Held by stories/guidelines/accessibility-floor.test.js.
168
+ why: docs/specification.md#colour-and-contrast */
169
+ --disabled-ink: var(--muted);
170
+ --disabled-surface: var(--surface-2);
171
+ --disabled-border: var(--border);
172
+
145
173
  /* Lifted from #9b5dff, which cleared the flat surfaces and failed on its own
146
174
  wash over a card. This value was already in the ramp as --purple-mid, so no
147
175
  new colour entered it; the ramp then moved up a step above so --accent is
148
176
  --purple-light, which is how every other Nebula and Ocean cell is written.
149
- --glow-purple and --ring follow it down the file. Held by
177
+ --glow-purple follows it down the file; --ring is written as var(--accent)
178
+ and so follows it by reference. Held by
150
179
  stories/accent-contrast.test.js. See issue #157.
151
- why: docs/adr/0006-the-accent-is-measured-against-its-own-wash.md */
180
+ why: docs/specification.md#colour-and-contrast */
152
181
  --accent: #b479ff;
153
182
  --accent-strong: #7c3aed; /* button bg — white text clears WCAG AA at 5.70:1 */
154
183
  --accent-contrast: #ffffff;
@@ -214,12 +243,13 @@
214
243
  /* Resting elevation for a card. Dark cards are borderless — the surface does
215
244
  the grouping on its own — so they cast nothing. */
216
245
  --shadow-card: none;
217
- /* The accent's own rgb at a fixed alpha, so it moves whenever --accent moves —
218
- otherwise a token points at a colour the accent no longer is. At this alpha
219
- the band sits under the 3:1 WCAG 1.4.11 asks of a focus indicator, before
220
- this change and after it; nothing here closes that. See issue #157 and the
221
- ADR's closing section. */
222
- --ring: 0 0 0 3px rgba(180, 121, 255, 0.35);
246
+ /* THE ONLY --ring in the kit — light and every data-accent sub-theme declare
247
+ an --accent and inherit this line. Opaque because a translucent ring is a
248
+ glow: the eight rgba() literals this replaced all missed the 3:1 of WCAG
249
+ 1.4.11, at 1.35:1 worst. Held at 4.22:1 worst by
250
+ stories/guidelines/accessibility-floor.test.js. See issue #218.
251
+ why: docs/specification.md#the-focus-ring */
252
+ --ring: 0 0 0 3px var(--accent);
223
253
 
224
254
  /* The ink a cast shadow is made of, and the specular white that reads as
225
255
  gloss on a raised surface. Effects mix these instead of writing rgba(). */
@@ -273,6 +303,13 @@
273
303
  --dim: #3a404b;
274
304
  --muted: #5c6270;
275
305
 
306
+ /* Same three aliases as dark, same reasoning. Light moves the disabled
307
+ surface AWAY from white for the same reason dark moves it away from the
308
+ card: a control that is off should sink, not rise. */
309
+ --disabled-ink: var(--muted);
310
+ --disabled-surface: var(--surface-2);
311
+ --disabled-border: var(--border);
312
+
276
313
  --accent: #6a2dcc;
277
314
  --accent-strong: #6a2dcc; /* already dark enough for white text */
278
315
  --accent-contrast: #ffffff;
@@ -335,7 +372,7 @@
335
372
  /* A white card on a white page needs its own, flatter-than-sm elevation:
336
373
  a hairline contact shadow plus a wide soft one (see card.css). */
337
374
  --shadow-card: 0 1px 2px rgba(20, 25, 45, 0.04), 0 4px 14px rgba(20, 25, 45, 0.05);
338
- --ring: 0 0 0 3px rgba(106, 45, 204, 0.25);
375
+ /* No --ring here. :root's is var(--accent), and light re-points --accent. */
339
376
 
340
377
  --shadow-ink: #1e1e32;
341
378
  --sheen: #ffffff;
@@ -345,3 +382,47 @@
345
382
  --grad-from: var(--purple-light);
346
383
  --grad-to: var(--cyan);
347
384
  }
385
+
386
+ /* ============================================================================
387
+ * WIDTHS BELOW THE PAGE — the box, and the line
388
+ *
389
+ * --container is the page and --measure the reading column inside it (both
390
+ * above). Underneath them the kit has two scales and one rule for choosing
391
+ * between them: THE UNIT SAYS WHICH SCALE YOU ARE ON.
392
+ *
393
+ * a box that holds a COMPONENT -> --panel-* (px)
394
+ * a box that holds a LINE -> --prose-* (ch)
395
+ *
396
+ * Both are theme-invariant, which is why they sit outside the palette blocks.
397
+ * why: docs/specification.md#boxes-below-the-page
398
+ * ========================================================================== */
399
+ :root {
400
+ /* -- Panel widths -------------------------------------------------------
401
+ * Not a new scale: the drawer has shipped sm/md/lg at exactly these three
402
+ * values since it was written, and confirm, the auth card and the toast each
403
+ * wrote one of them out again on their own. --panel-md answers the question
404
+ * #208 asked — the two 420s were three (--confirm-w, --drawer-w md and
405
+ * .ui-auth__card), and they are one measure now. */
406
+ --panel-sm: 320px;
407
+ --panel-md: 420px;
408
+ --panel-lg: 560px;
409
+
410
+ /* -- Prose measures -----------------------------------------------------
411
+ * ch resolves against the font-size of the element it is DECLARED on, so a
412
+ * step goes on the paragraph itself — never on a wrapper holding two type
413
+ * sizes, where the same token would mean two different widths.
414
+ *
415
+ * The four steps are the reading band (44–72ch), named for what is being
416
+ * read rather than sized s/m/l, so the choice is made by the writer:
417
+ * caption one or two sentences under a glyph, centred
418
+ * lede the line under a title
419
+ * body a left-aligned column of copy
420
+ * dense reference prose set below 13px, where the band runs wider
421
+ * --prose-display is NOT a measure. It is where a display headline rags, and
422
+ * it is far under the band on purpose. */
423
+ --prose-display: 14ch;
424
+ --prose-caption: 44ch;
425
+ --prose-lede: 54ch;
426
+ --prose-body: 62ch;
427
+ --prose-dense: 72ch;
428
+ }