@apliteni/apliteni-ui 0.11.1 → 0.11.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.
- package/README.md +6 -0
- package/package.json +1 -1
- package/react/dist/index.css +0 -1
- package/src/components/index.js +7 -1
- package/src/styles/callout.css +30 -11
package/README.md
CHANGED
|
@@ -31,6 +31,12 @@ as the vanilla kit, so the two layers can't drift.
|
|
|
31
31
|
**Which one:** does the surface hold meaningful client state? No → the HTML-string
|
|
32
32
|
factories below. Yes → the [React components](#react-components-stateful-surfaces).
|
|
33
33
|
|
|
34
|
+
Either layer follows the same UI rules — which component to reach for, the states it
|
|
35
|
+
owes, how colour and wording work. They live in the **Guidelines** section of Storybook,
|
|
36
|
+
which opens on
|
|
37
|
+
[an overview of the five pages](https://ui.apli.tech/storybook/?path=/story/guidelines-overview--overview)
|
|
38
|
+
and what the kit does and does not yet meet. Worth reading before you design a screen.
|
|
39
|
+
|
|
34
40
|
## Install
|
|
35
41
|
|
|
36
42
|
Published on the **public npm registry** — no scope config, no token:
|
package/package.json
CHANGED
package/react/dist/index.css
CHANGED
package/src/components/index.js
CHANGED
|
@@ -93,8 +93,14 @@ export function segmented({ options = [], active = 0, size, block, name = 'seg',
|
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
// ---- Accent picker -------------------------------------------------------
|
|
96
|
+
// Each swatch is made of the tokens its accent selects: it fades from the next
|
|
97
|
+
// distinct step up that accent's dark ramp down to dark --accent. Most accents
|
|
98
|
+
// land on --purple-light; Nebula's is its own --accent since #157, so it walks
|
|
99
|
+
// on to --purple-mid. site/chrome.mjs and site/index.html hand-keep the same
|
|
100
|
+
// four strings and must change with these. Held by stories/accent-swatch.test.js,
|
|
101
|
+
// which derives both sides rather than restating them. See issue #190.
|
|
96
102
|
const ACCENT_SWATCH = {
|
|
97
|
-
default: 'linear-gradient(135deg,#
|
|
103
|
+
default: 'linear-gradient(135deg,#bd8cff,#b479ff)',
|
|
98
104
|
phoenix: 'linear-gradient(135deg,#ff8a5c,#ff6a3d)',
|
|
99
105
|
ocean: 'linear-gradient(135deg,#5ab0ff,#3b9dff)',
|
|
100
106
|
emerald: 'linear-gradient(135deg,#3ad9a0,#16c98a)',
|
package/src/styles/callout.css
CHANGED
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
/* ----------------------------------------------------------------------------
|
|
30
30
|
* Toast — a floating, dismissible notification.
|
|
31
31
|
* A status (colour) × style (surface) matrix, entirely token-driven:
|
|
32
|
-
* status success · danger · warn · info · neutral → sets --toast-accent/-glow/-on/-solid
|
|
32
|
+
* status success · danger · warn · info · neutral → sets --toast-accent/-action-ink/-glow/-on/-solid
|
|
33
33
|
* style soft (tinted) · solid (filled) · outline (bordered)
|
|
34
34
|
* -------------------------------------------------------------------------- */
|
|
35
35
|
.ui-toast {
|
|
@@ -51,12 +51,21 @@
|
|
|
51
51
|
--toast-accent is the status as a line or a small mark, --toast-glow its wash,
|
|
52
52
|
--toast-on the glyph ink on the accent circle. --toast-solid is separate on
|
|
53
53
|
purpose: a full fill is a different job from a 22px circle, and it is chosen
|
|
54
|
-
as a PAIR with --signal-solid-ink rather than against a global. See #149.
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
54
|
+
as a PAIR with --signal-solid-ink rather than against a global. See #149.
|
|
55
|
+
|
|
56
|
+
--toast-action-ink is separate from --toast-accent for the same reason the
|
|
57
|
+
fill is: the accent is a graphic colour, sized for a 3px rule and a 22px
|
|
58
|
+
circle, and in the light theme it is not a colour text can be set in. The
|
|
59
|
+
trailing action is the one part of a toast that is BOTH the status colour and
|
|
60
|
+
a piece of text, so it takes the chip inks, which are the text-grade version
|
|
61
|
+
of the same five statuses. In the dark theme the two are the same value by
|
|
62
|
+
construction — --chip-success-ink IS --green there — so this splits the light
|
|
63
|
+
theme apart and leaves the dark one exactly as it was. */
|
|
64
|
+
.ui-toast--success { --toast-accent: var(--green); --toast-action-ink: var(--chip-success-ink); --toast-glow: var(--glow-green); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-success); }
|
|
65
|
+
.ui-toast--danger { --toast-accent: var(--pink); --toast-action-ink: var(--chip-danger-ink); --toast-glow: var(--glow-pink); --toast-on: var(--danger-contrast); --toast-solid: var(--signal-solid-danger); }
|
|
66
|
+
.ui-toast--warn { --toast-accent: var(--amber); --toast-action-ink: var(--chip-warn-ink); --toast-glow: color-mix(in srgb, var(--amber) 14%, transparent); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-warn); }
|
|
67
|
+
.ui-toast--info { --toast-accent: var(--cyan); --toast-action-ink: var(--chip-info-ink); --toast-glow: var(--glow-cyan); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-info); }
|
|
68
|
+
.ui-toast--neutral { --toast-accent: var(--muted); --toast-action-ink: var(--muted); --toast-glow: var(--surface-2); --toast-on: var(--strong); --toast-solid: var(--signal-solid-neutral); }
|
|
60
69
|
|
|
61
70
|
/* left status marker (soft + outline; solid is already a full fill) */
|
|
62
71
|
.ui-toast--soft::before,
|
|
@@ -71,9 +80,16 @@
|
|
|
71
80
|
.ui-toast__title { font-weight: var(--weight-medium); color: var(--strong); }
|
|
72
81
|
.ui-toast__text { color: var(--dim); }
|
|
73
82
|
|
|
74
|
-
/* trailing action ("Undo" / "Retry")
|
|
75
|
-
|
|
76
|
-
|
|
83
|
+
/* trailing action ("Undo" / "Retry") — status-coloured TEXT, so it takes the
|
|
84
|
+
text-grade ink rather than the accent.
|
|
85
|
+
The hover wash is the page background rather than the accent again: a second
|
|
86
|
+
accent tint on an already accent-tinted ground moved the ground TOWARDS the
|
|
87
|
+
ink and took every soft pair below the floor. --bg is white in the light theme
|
|
88
|
+
and near-black in the dark one, so one expression lightens the ground where
|
|
89
|
+
the ink is dark and darkens it where the ink is bright — the hovered pair is
|
|
90
|
+
at or above the resting pair in both. */
|
|
91
|
+
.ui-toast__action { flex: none; align-self: center; background: none; border: 0; padding: 4px 9px; border-radius: var(--radius-xs); font: inherit; font-weight: var(--weight-medium); color: var(--toast-action-ink); cursor: pointer; }
|
|
92
|
+
.ui-toast__action:hover { background: color-mix(in srgb, var(--bg) 55%, transparent); }
|
|
77
93
|
|
|
78
94
|
.ui-toast__close { flex: none; align-self: flex-start; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; }
|
|
79
95
|
.ui-toast__close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
|
|
@@ -108,7 +124,10 @@
|
|
|
108
124
|
.ui-toast--solid .ui-toast__text { color: color-mix(in srgb, var(--toast-ink) 90%, transparent); }
|
|
109
125
|
.ui-toast--solid .ui-toast__icon { background: color-mix(in srgb, var(--toast-ink) 22%, transparent); color: var(--toast-ink); }
|
|
110
126
|
.ui-toast--solid .ui-toast__action { color: var(--toast-ink); }
|
|
111
|
-
|
|
127
|
+
/* Hover darkens the FILL rather than lightening the ink. Washing the ink over
|
|
128
|
+
itself was the one surface #149 did not reach, and it worked against the pair
|
|
129
|
+
it was drawn from: it pulled the fill towards the ink it has to clear. */
|
|
130
|
+
.ui-toast--solid .ui-toast__action:hover { background: color-mix(in srgb, var(--signal-contrast) 14%, transparent); }
|
|
112
131
|
.ui-toast--solid .ui-toast__close { color: color-mix(in srgb, var(--toast-ink) 68%, transparent); }
|
|
113
132
|
.ui-toast--solid .ui-toast__close:hover { color: var(--toast-ink); }
|
|
114
133
|
.ui-toast--solid .ui-toast__timer { background: color-mix(in srgb, var(--toast-ink) 55%, transparent); }
|