@apliteni/apliteni-ui 0.53.1 → 0.53.3

package/guidelines/empty-states.md

@@ -0,0 +1,13 @@
+# Empty states
+
+## Explain what is missing and show the next step
+
+<!-- rule: next-action -->
+
+**Rule:** Use the kit’s `emptyState()` or React `EmptyState` when there is no content. Say what is missing and include an action that helps the reader continue. Inline “no matches” text inside a dropdown or command palette is a result message, not an empty state.
+
+**Why:** A blank area may leave readers unsure whether there is no content or the page has failed.
+
+**Do:** Show “No projects yet” with a “Create project” action. Use the kit’s existing spacing and illustration.
+
+**Don't:** Show “Nothing here” without an action.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.53.1",
+  "version": "0.53.3",
   "workspaces": [
     "react"
   ],

package/src/styles/callout.css

@@ -31,62 +31,40 @@
 
 /* ----------------------------------------------------------------------------
  * Toast — a floating, dismissible notification.
- * A status (colour) × style (surface) matrix, entirely token-driven:
- *   status  success · danger · warn · info · neutral  → sets --toast-accent/-action-ink/-glow/-on/-solid
- *   style   soft (tinted) · solid (filled) · outline (bordered)
+ * Neutral card; tone is carried by the unfilled glyph and action.
  * -------------------------------------------------------------------------- */
 .ui-toast {
   position: relative;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 12px;
-  padding: 13px 15px;
-  border-radius: var(--radius-md);
+  padding: var(--space-3);
+  border-radius: var(--radius-sm);
   color: var(--text);
   font-size: var(--text-base);
   width: 100%;
   max-width: var(--panel-md);
-  overflow: hidden; /* clips the timer bar + left marker to the rounded corners */
-  /* A toast floats. It carries a status rather than the neutral hairline, so each
-     style below re-points --elev-edge at its own tint and leaves the outer line
-     where it already drew it. why: docs/specification.md#elevation */
+  overflow: hidden; /* clips the timer bar to the rounded corners */
+  background: var(--surface); --ring-gap: var(--surface);
+  border: 1px solid var(--border);
   box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
   animation: ui-toast-in var(--dur-med) var(--ease-out) both;
 }
 
-/* status → the paint tokens every style below consumes.
-   --toast-accent is the status as a line or a small mark, --toast-glow its wash,
-   --toast-on the glyph ink on the accent circle. --toast-solid and
-   --toast-action-ink are separate from the accent on purpose: a fill and a piece
-   of text are different jobs from a 22px circle.
-   why: docs/specification.md#colour-and-contrast */
+/* Existing tone inks also colour the unfilled glyph. */
 .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); }
 .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); }
 .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); }
 .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); }
 .ui-toast--neutral { --toast-accent: var(--muted); --toast-action-ink: var(--text);            --toast-glow: var(--surface-2); --toast-on: var(--signal-solid-ink); --toast-solid: var(--signal-solid-neutral); }
 
-/* left status marker (soft + outline; solid is already a full fill) */
-.ui-toast--soft::before,
-.ui-toast--outline::before {
-  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
-  width: 3px; background: var(--toast-accent);
-}
-
-.ui-toast__icon { width: 22px; height: 22px; flex: none; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--toast-accent); color: var(--toast-on); }
-.ui-toast__icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.8; } /* 2.8 of a 24 box drawn at 13px = 1.52 CSS px. The circle has no room for a bigger glyph, so the weight comes out of the stroke. docs/specification.md#icons-and-glyphs */
+.ui-toast__icon { width: 22px; height: 22px; flex: none; display: grid; place-items: center; background: transparent; color: var(--toast-action-ink); }
+.ui-toast__icon svg { width: var(--space-4); height: var(--space-4); stroke: currentColor; fill: none; stroke-width: 2.25; } /* 16px × 2.25 / 24 = 1.5 CSS px. */
 .ui-toast__body { flex: 1; min-width: 0; }
 .ui-toast__title { font-weight: var(--weight-medium); color: var(--strong); }
 .ui-toast__text { color: var(--text); }
 
-/* trailing action ("Undo" / "Retry") — status-coloured TEXT, so it takes the
-   text-grade ink rather than the accent.
-   The hover wash is the page background rather than the accent again: a second
-   accent tint on an already accent-tinted ground moved the ground TOWARDS the
-   ink and took every soft pair below the floor. --bg is white in the light theme
-   and near-black in the dark one, so one expression lightens the ground where
-   the ink is dark and darkens it where the ink is bright — the hovered pair is
-   at or above the resting pair in both. */
+/* Tone ink keeps actions readable on the neutral surface. */
 .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; }
 .ui-toast__action:hover { background: color-mix(in srgb, var(--bg) 55%, transparent); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
 
@@ -98,7 +76,7 @@
    TARGET grows instead and the glyph does not move at all.
    Centred, so the overhang is 2.5px on every side. It has 12px of flex gap to
    .ui-toast__action beside it and 12px between stacked toasts, so it reaches no
-   neighbouring target; .ui-toast's overflow: hidden clips at 15px of padding,
+   neighbouring target; .ui-toast's overflow: hidden clips at 12px of padding,
    well outside it. Measured, not asserted:
    stories/guidelines/accessibility-floor.test.js reads this rule out of the
    sheet and reports the target it makes. #219 */
@@ -117,51 +95,11 @@
 .ui-toast__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--toast-accent); opacity: 0.85; transform-origin: left; }
 .ui-toast__timer.is-running { animation: ui-toast-timer var(--toast-dur, 5s) linear forwards; /* motion: ambient — the bar spends the toast's dismiss timer, which the caller sets */ }
 
-/* style: soft — tinted surface. The shadow used to be its edge, so it takes the
-   status-tinted hairline the outline style carries, at half the weight. #295 */
-.ui-toast--soft {
-  background: var(--toast-glow); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */
-  border: 1px solid color-mix(in srgb, var(--toast-accent) 22%, transparent);
-  --elev-edge: color-mix(in srgb, var(--toast-accent) 11%, transparent);
-}
-
-/* style: solid — the status at fill strength, inked with the pole opposite it.
-   The fill and the ink are one pair, taken together from --signal-solid-*: dark
-   fills are the bright signals and take near-black, light fills are the deepened
-   ones and take white. What this replaced picked the fill from the status and
-   the ink from one of two globals, on independent axes, so nothing made them
-   clear each other — and four of the ten status x theme combinations did not.
-   Gated for all ten in stories/signal-contrast.test.js. See #149. */
-.ui-toast--solid {
-  --toast-ink: var(--signal-solid-ink); --ring-color: var(--toast-ink);
-  background: var(--toast-solid); --ring-gap: var(--toast-solid);
-  color: var(--toast-ink);
-  /* No inner line: a solid toast has no outer one either. It keeps the drop. */
-  --elev-edge: transparent;
-}
-.ui-toast--solid .ui-toast__title { color: var(--toast-ink); }
-/* The body copy is the quieter of the two, but it stays quiet by dilution the
-   pair can carry: 90% of the ink measures 4.71 on the worst fill in the matrix
-   (--chip-success-ink in light). The opacity: 0.82 this replaced measured 4.19
-   there, and 2.25 on the dark danger fill — the pair was correct and the
-   dilution then spent it. */
-.ui-toast--solid .ui-toast__text { color: var(--toast-ink); }
-.ui-toast--solid .ui-toast__icon { background: color-mix(in srgb, var(--toast-ink) 22%, transparent); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--toast-ink); }
-.ui-toast--solid .ui-toast__action { color: var(--toast-ink); }
-/* Hover darkens the FILL rather than lightening the ink. Washing the ink over
-   itself was the one surface #149 did not reach, and it worked against the pair
-   it was drawn from: it pulled the fill towards the ink it has to clear. */
-.ui-toast--solid .ui-toast__action:hover { background: color-mix(in srgb, var(--signal-contrast) 14%, transparent); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
-.ui-toast--solid .ui-toast__close { /* muted-ink: glyph — dismiss icon on solid toast */ color: color-mix(in srgb, var(--toast-ink) 68%, transparent); }
-.ui-toast--solid .ui-toast__close:hover { color: var(--toast-ink); }
-.ui-toast--solid .ui-toast__timer { background: color-mix(in srgb, var(--toast-ink) 55%, transparent); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ }
-
-/* style: outline — elevated card with a status-tinted border */
-.ui-toast--outline { background: var(--bg-elevated); --ring-gap: var(--bg-elevated); border: 1px solid color-mix(in srgb, var(--toast-accent) 40%, transparent); --elev-edge: color-mix(in srgb, var(--toast-accent) 20%, transparent); }
+/* Legacy style classes share the neutral card. */
+.ui-toast--soft, .ui-toast--solid, .ui-toast--outline { background: var(--surface); --ring-gap: var(--surface); color: var(--text); }
 
 /* compact — single line, no body text */
-.ui-toast--compact { align-items: center; padding-top: 10px; padding-bottom: 10px; }
-.ui-toast--compact .ui-toast__icon { margin-top: 0; }
+.ui-toast--compact { align-items: center; }
 
 @keyframes ui-toast-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
 @keyframes ui-toast-out { to { opacity: 0; transform: translateX(24px); } }

package/src/tokens/tokens.css

@@ -439,6 +439,8 @@
 .ui-table--zebra tbody tr:nth-child(even) td,
 .ui-table--zebra tbody tr:hover td,
 .ui-table--zebra.ui-table--hover tbody tr:hover td,
+.ui-toast,
+.ui-toast--soft,
 .ui-toast--outline,
 .ui-toast--solid,
 .vsw__menu {