@apliteni/apliteni-ui 0.3.0 → 0.5.0

package/src/styles/success.css

@@ -0,0 +1,189 @@
+/* ============================================================================
+ * Success / confirmation surface — .ui-sx*
+ *   The emotional high point of a flow, with craft: a self-drawing SVG check
+ *   (ring burst + spring), an aurora / glow backdrop, follow-up actions, an
+ *   optional confetti field and an optional auto-redirect countdown. Three
+ *   layouts (hero / split / compact) and three backdrops (aurora / glow / flat).
+ *
+ *   Accent-aware via the kit tokens; the success mark stays on the --green
+ *   family (green = success), the surrounds follow --accent so it re-themes with
+ *   the sub-theme. Every motion path is reduced-motion safe — see the block at
+ *   the foot. Markup comes from success() in components/index (re-exported).
+ * ========================================================================== */
+
+.ui-sx {
+  --sx-green: var(--green);
+  --sx-tint: color-mix(in srgb, var(--green) 18%, transparent);
+  --sx-track: color-mix(in srgb, var(--green) 32%, transparent);
+
+  position: relative;
+  overflow: hidden;
+  border-radius: 20px;
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-md);
+  isolation: isolate;
+}
+
+/* ---- Backdrops ----------------------------------------------------------- */
+/* Aurora: two soft blurred blobs — a green wash under the check + an accent
+   blob for identity — so the success matches the rest of the kit's warmth. */
+.ui-sx__aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
+.ui-sx__glow {
+  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.9;
+  aspect-ratio: 1; will-change: transform;
+}
+.ui-sx__glow--a {
+  width: 58%; top: -14%; left: 50%; translate: -50% 0;
+  background: radial-gradient(circle at center, var(--sx-tint), transparent 68%);
+  animation: ui-sx-float 14s ease-in-out infinite alternate;
+}
+.ui-sx__glow--b {
+  width: 52%; bottom: -20%; left: 12%;
+  background: radial-gradient(circle at center,
+    color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%);
+  animation: ui-sx-float 18s ease-in-out -6s infinite alternate;
+}
+:root[data-theme="light"] .ui-sx__glow { opacity: 0.7; }
+@keyframes ui-sx-float {
+  from { transform: translate(-2%, -2%) scale(1); }
+  to   { transform: translate(3%, 3%) scale(1.14); }
+}
+/* Glow backdrop: reuse the shared .ui-glow--green, parked behind the check. */
+.ui-sx__bg-glow { top: -40%; left: 50%; translate: -50% 0; width: 360px; height: 360px; }
+
+/* ---- Layout shell -------------------------------------------------------- */
+.ui-sx__inner { position: relative; z-index: 1; }
+.ui-sx__content { min-width: 0; }
+.ui-sx__eyebrow {
+  color: var(--green); font-size: 12px; font-weight: var(--weight-semibold);
+  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px;
+}
+.ui-sx__title {
+  color: var(--strong); font-size: 22px; font-weight: var(--weight-semibold);
+  letter-spacing: -.02em; line-height: 1.2; margin: 0;
+}
+.ui-sx__body {
+  color: var(--dim); font-size: 14.5px; line-height: 1.6; margin: 9px 0 0; max-width: 44ch;
+}
+.ui-sx__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
+
+/* hero — centred column, the upgraded default */
+.ui-sx--hero { padding: 44px 32px 40px; text-align: center; }
+.ui-sx--hero .ui-sx__inner { display: flex; flex-direction: column; align-items: center; }
+.ui-sx--hero .ui-sx__visual { margin-bottom: 22px; }
+.ui-sx--hero .ui-sx__body { margin-left: auto; margin-right: auto; }
+.ui-sx--hero .ui-sx__actions { justify-content: center; }
+.ui-sx--hero .ui-sx__check { width: 96px; height: 96px; }
+
+/* split — visual panel beside the copy */
+.ui-sx--split .ui-sx__inner {
+  display: grid; grid-template-columns: minmax(200px, 300px) 1fr; align-items: stretch;
+}
+.ui-sx--split .ui-sx__visual {
+  display: grid; place-items: center; padding: 40px 24px;
+  background: color-mix(in srgb, var(--green) 8%, transparent);
+  border-right: 1px solid var(--border);
+}
+.ui-sx--split .ui-sx__check { width: 120px; height: 120px; }
+.ui-sx--split .ui-sx__content { padding: 40px 36px; align-self: center; }
+
+/* compact — inline, panel/toast-adjacent */
+.ui-sx--compact { padding: 18px 20px; }
+.ui-sx--compact .ui-sx__inner { display: flex; align-items: center; gap: 16px; }
+.ui-sx--compact .ui-sx__visual { flex: none; }
+.ui-sx--compact .ui-sx__check { width: 44px; height: 44px; }
+.ui-sx--compact .ui-sx__title { font-size: 16px; }
+.ui-sx--compact .ui-sx__body { font-size: 13px; margin-top: 3px; }
+.ui-sx--compact .ui-sx__actions { margin-top: 0; margin-left: auto; flex: none; }
+.ui-sx--compact .ui-sx__content { flex: 1; display: flex; align-items: center; gap: 16px; }
+.ui-sx--compact .ui-sx__content > div:first-child,
+.ui-sx--compact .ui-sx__title { min-width: 0; }
+
+/* ---- The self-drawing check --------------------------------------------- */
+.ui-sx__check { display: block; overflow: visible; }
+/* Soft tinted disc that springs in behind the tick. */
+.ui-sx__disc {
+  fill: var(--sx-tint); stroke: var(--sx-track); stroke-width: 1.5;
+  transform-origin: center; animation: ui-sx-pop .5s cubic-bezier(.22,1,.3,1) both;
+}
+/* The tick, stroked on via dash-offset (path length ~34). */
+.ui-sx__tick {
+  fill: none; stroke: var(--sx-green); stroke-width: 5;
+  stroke-linecap: round; stroke-linejoin: round;
+  stroke-dasharray: 34; stroke-dashoffset: 34;
+  animation: ui-sx-draw .5s cubic-bezier(.6,0,.35,1) .28s forwards;
+  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--green) 55%, transparent));
+}
+/* Burst ring that expands and fades once, framing the moment. */
+.ui-sx__ring {
+  fill: none; stroke: var(--sx-green); stroke-width: 2;
+  transform-origin: center; opacity: 0;
+  animation: ui-sx-burst .7s cubic-bezier(.3,.7,.4,1) .2s forwards;
+}
+
+@keyframes ui-sx-pop {
+  0% { transform: scale(.4); opacity: 0; }
+  60% { transform: scale(1.06); opacity: 1; }
+  100% { transform: scale(1); }
+}
+@keyframes ui-sx-draw { to { stroke-dashoffset: 0; } }
+@keyframes ui-sx-burst {
+  0% { transform: scale(.55); opacity: .7; }
+  100% { transform: scale(1.7); opacity: 0; }
+}
+
+/* ---- Confetti (opt-in) --------------------------------------------------- */
+.ui-sx__confetti { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
+.ui-sx__piece {
+  position: absolute; top: -8%; width: 8px; height: 8px; border-radius: 2px;
+  opacity: 0; transform-origin: center;
+  animation: ui-sx-fall 2.4s cubic-bezier(.2,.6,.35,1) var(--sx-d, 0s) forwards;
+  scale: var(--sx-s, 1);
+}
+.ui-sx__piece--a { background: var(--accent); }
+.ui-sx__piece--g { background: var(--green); }
+.ui-sx__piece--c { background: var(--cyan); }
+.ui-sx__piece--p { background: var(--purple-light); }
+.ui-sx__piece--k { background: var(--pink); border-radius: 50%; }
+@keyframes ui-sx-fall {
+  0%   { opacity: 0; transform: translateY(-10px) rotate(0deg); }
+  12%  { opacity: 1; }
+  100% { opacity: 0; transform: translateY(340px) rotate(var(--sx-r, 40deg)); }
+}
+
+/* ---- Countdown ----------------------------------------------------------- */
+/* Registered angle so the conic sweep can actually interpolate (a plain
+   conic-gradient background is not animatable). */
+@property --sx-a { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
+.ui-sx__count { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; }
+.ui-sx--hero .ui-sx__count { justify-content: center; }
+.ui-sx__count-ring {
+  flex: none; width: 16px; height: 16px; border-radius: 50%;
+  background: conic-gradient(var(--green) var(--sx-a, 360deg), var(--surface-2) 0);
+  mask: radial-gradient(circle, transparent 5px, #000 6px);
+  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px);
+  animation: ui-sx-sweep var(--sx-secs, 5s) linear forwards;
+}
+@keyframes ui-sx-sweep { from { --sx-a: 360deg; } to { --sx-a: 0deg; } }
+.ui-sx__count-text { color: var(--muted); font-size: 13px; }
+.ui-sx__count-text b { color: var(--dim); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
+
+/* ---- Reduced motion — static check, no burst / confetti / sweep ---------- */
+@media (prefers-reduced-motion: reduce) {
+  .ui-sx__glow--a, .ui-sx__glow--b { animation: none; }
+  .ui-sx__disc { animation: none; }
+  .ui-sx__tick { animation: none; stroke-dashoffset: 0; }
+  .ui-sx__ring { display: none; }
+  .ui-sx__confetti { display: none; }
+  .ui-sx__count-ring { animation: none; background: var(--surface-2); }
+}
+
+/* ---- Narrow — split stacks -------------------------------------------- */
+@media (max-width: 560px) {
+  .ui-sx--split .ui-sx__inner { grid-template-columns: 1fr; }
+  .ui-sx--split .ui-sx__visual { border-right: 0; border-bottom: 1px solid var(--border); padding: 32px 24px; }
+  .ui-sx--split .ui-sx__content { padding: 28px 26px; text-align: center; }
+  .ui-sx--split .ui-sx__actions { justify-content: center; }
+  .ui-sx--compact .ui-sx__content { flex-direction: column; align-items: flex-start; gap: 10px; }
+  .ui-sx--compact .ui-sx__actions { margin-left: 0; }
+}

package/src/styles/table.css

@@ -59,18 +59,5 @@
 .ui-table__num--strong { color: var(--strong); font-weight: var(--weight-semibold); }
 .ui-table__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
 
-/* Empty state inside a table area */
-.ui-empty {
-  text-align: center;
-  padding: 48px 24px;
-  color: var(--muted);
-}
-.ui-empty__icon {
-  width: 44px; height: 44px;
-  margin: 0 auto 14px;
-  color: var(--muted);
-  opacity: 0.6;
-}
-.ui-empty__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; }
-.ui-empty__title { color: var(--text); font-size: var(--text-md); font-weight: var(--weight-medium); margin-bottom: 5px; }
-.ui-empty__sub { font-size: var(--text-sm); max-width: 320px; margin: 0 auto; line-height: 1.55; }
+/* The empty state (.ui-empty) — shown when a table/list has no rows — now
+   lives in styles/empty.css as a standalone component (illustration support). */

package/src/styles/topbar.css

@@ -21,16 +21,22 @@
   align-items: center;
   gap: 14px;
 }
-.topbar .brand {
+/* Brand lockup (mark + wordmark) — self-contained so the mark stays optically
+   centered with the word, with an even gap, in ANY context (topbar, auth cards,
+   consent). These rules used to be scoped to `.topbar`, so a lockup dropped into
+   the consent/auth card fell back to inline layout: the mark rode the text
+   baseline with no gap between it and the word. */
+.brand {
   display: inline-flex;
   align-items: center;
   gap: 9px;
-  font-size: 13px;
   font-weight: 600;
   color: var(--strong);
   text-decoration: none;
 }
-.topbar .brand svg { display: block; flex: none; }
+.brand svg { display: block; flex: none; }
+/* Topbar wordmark runs a touch smaller than the auth-card lockup. */
+.topbar .brand { font-size: 13px; }
 .topbar .spacer { flex: 1; }
 
 /* Deck / Text (segmented, pill) */

package/src/tokens/brand.generated.css

@@ -0,0 +1,121 @@
+/* ============================================================================
+ * apliteni-ui — BRAND PRIMITIVES (generated, do not edit)
+ *
+ * Synced from apliteni/design-system@954109e
+ * via: npm run tokens:sync
+ *
+ * The Apliteni umbrella-brand primitives: colour ramps + motion vocabulary
+ * (--duration-*, --easing-*). The upstream owns them; edit them there, not here.
+ * Our semantic tokens (--bg, --surface, --accent, ...) live in tokens.css and may
+ * reference these over time. Run `npm run tokens:drift` to see where they diverge.
+ * ========================================================================== */
+:root {
+  --duration-instant: 80ms; /** Micro-interactions: checkbox tick, ripple. */
+  --duration-fast: 150ms; /** Hover states, button feedback. */
+  --duration-normal: 250ms; /** Panel open, dropdown, tooltip. */
+  --duration-slow: 400ms; /** Modal enter, page transition. */
+  --duration-slower: 600ms; /** Complex layout shifts, onboarding. */
+  --duration-crawl: 1000ms; /** Skeleton loaders, ambient loops. */
+  --easing-linear: linear; /** Progress bars, continuous animations. */
+  --easing-ease-in: cubic-bezier(0.4, 0, 1, 1); /** Elements leaving the screen. */
+  --easing-ease-out: cubic-bezier(0, 0, 0.2, 1); /** Elements entering the screen. */
+  --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /** Symmetrical transitions (e.g. toggle). */
+  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /** Playful overshoot — modals, cards. */
+  --easing-sharp: cubic-bezier(0.4, 0, 0.6, 1); /** Snappy dismiss, collapse. */
+  --color-apliteni-primary-black: #121212; /** Primary black. */
+  --color-apliteni-primary-violet: #914dff; /** Primary violet. */
+  --color-apliteni-primary-white: #ffffff; /** Primary white. */
+  --color-apliteni-supporting-red: #ff453a;
+  --color-apliteni-supporting-yellow: #ffd12f;
+  --color-apliteni-supporting-orange: #f79027;
+  --color-apliteni-supporting-green: #62c862;
+  --color-apliteni-supporting-blue: #3a86ff;
+  --color-apliteni-supporting-pink: #fa6c8f;
+  --color-apliteni-neutral-1: #121212;
+  --color-apliteni-neutral-2: #191919;
+  --color-apliteni-neutral-3: #434240;
+  --color-apliteni-neutral-4: #6a6866;
+  --color-apliteni-neutral-5: #928f8b;
+  --color-apliteni-neutral-6: #b9b5b1;
+  --color-apliteni-neutral-7: #e0dcd7;
+  --color-apliteni-neutral-8: #f1efed;
+  --color-apliteni-neutral-9: #ffffff;
+  --color-apliteni-red-1: #f33126;
+  --color-apliteni-red-2: #f93b30;
+  --color-apliteni-red-3: #ff453a;
+  --color-apliteni-red-4: #ff6754;
+  --color-apliteni-red-5: #ff836f;
+  --color-apliteni-red-6: #ff9d8a;
+  --color-apliteni-red-7: #ffb6a6;
+  --color-apliteni-red-8: #ffcfc3;
+  --color-apliteni-yellow-1: #f6c700;
+  --color-apliteni-yellow-2: #ffcf01;
+  --color-apliteni-yellow-3: #ffd12f;
+  --color-apliteni-yellow-4: #ffdb47;
+  --color-apliteni-yellow-5: #ffe16a;
+  --color-apliteni-yellow-6: #ffe789;
+  --color-apliteni-yellow-7: #ffeda7;
+  --color-apliteni-yellow-8: #fff3c5;
+  --color-apliteni-orange-1: #ff7700;
+  --color-apliteni-orange-2: #ff8100;
+  --color-apliteni-orange-3: #ff8f18;
+  --color-apliteni-orange-4: #ffa43a;
+  --color-apliteni-orange-5: #ffaa52;
+  --color-apliteni-orange-6: #fab671;
+  --color-apliteni-orange-7: #fbcb9a;
+  --color-apliteni-orange-8: #fddcbb;
+  --color-apliteni-green-1: #48a848;
+  --color-apliteni-green-2: #4faf4f;
+  --color-apliteni-green-3: #62c862;
+  --color-apliteni-green-4: #6be56b;
+  --color-apliteni-green-5: #76f076;
+  --color-apliteni-green-6: #8ef78e;
+  --color-apliteni-green-7: #a9ffa9;
+  --color-apliteni-green-8: #cbffcb;
+  --color-apliteni-blue-1: #3572d4;
+  --color-apliteni-blue-2: #3577df;
+  --color-apliteni-blue-3: #3a86ff;
+  --color-apliteni-blue-4: #5696ff;
+  --color-apliteni-blue-5: #6fa6ff;
+  --color-apliteni-blue-6: #87b6ff;
+  --color-apliteni-blue-7: #9fc5ff;
+  --color-apliteni-blue-8: #b7d4ff;
+  --color-apliteni-pink-1: #fc547e;
+  --color-apliteni-pink-2: #fb6288;
+  --color-apliteni-pink-3: #fa6c8f;
+  --color-apliteni-pink-4: #fa7b9b;
+  --color-apliteni-pink-5: #fb8da8;
+  --color-apliteni-pink-6: #fb9fb6;
+  --color-apliteni-pink-7: #fbb2c5;
+  --color-apliteni-pink-8: #fbc6d5;
+  --color-apliteni-violet-1: #914dff;
+  --color-apliteni-violet-2: #9b5dff;
+  --color-apliteni-violet-3: #a771ff;
+  --color-apliteni-violet-4: #b586fe;
+  --color-apliteni-violet-5: #c39bfc;
+  --color-apliteni-violet-6: #cfaffa;
+  --color-apliteni-violet-7: #dac3f8;
+  --color-apliteni-violet-8: #e5d8f5;
+  --color-apliteni-theme-dark-border: #333130; /** Default border. */
+  --color-apliteni-theme-dark-border-subtle: #2a2826; /** Subtle dividers. */
+  --color-apliteni-theme-light-accent-subtle: #efe1ff; /** Accent tint, badges. */
+  --color-apliteni-theme-dark-background: var(--color-apliteni-neutral-1); /** Page/app background. */
+  --color-apliteni-theme-dark-surface: var(--color-apliteni-neutral-2); /** Cards, panels. */
+  --color-apliteni-theme-dark-surface-raised: var(--color-apliteni-neutral-3); /** Elevated surfaces, tooltips. */
+  --color-apliteni-theme-dark-text-primary: var(--color-apliteni-primary-white); /** Headings, body. */
+  --color-apliteni-theme-dark-text-muted: var(--color-apliteni-neutral-5); /** Secondary text, labels. */
+  --color-apliteni-theme-dark-text-disabled: var(--color-apliteni-neutral-4); /** Disabled state. */
+  --color-apliteni-theme-dark-accent: var(--color-apliteni-primary-violet); /** Primary action, links. */
+  --color-apliteni-theme-dark-accent-hover: var(--color-apliteni-violet-2); /** Accent on hover. */
+  --color-apliteni-theme-dark-accent-subtle: var(--color-apliteni-violet-8); /** Accent tint, badges. */
+  --color-apliteni-theme-light-background: var(--color-apliteni-neutral-8); /** Page/app background. */
+  --color-apliteni-theme-light-surface: var(--color-apliteni-primary-white); /** Cards, panels. */
+  --color-apliteni-theme-light-surface-raised: var(--color-apliteni-neutral-9); /** Elevated surfaces, tooltips. */
+  --color-apliteni-theme-light-border: var(--color-apliteni-neutral-7); /** Default border. */
+  --color-apliteni-theme-light-border-subtle: var(--color-apliteni-neutral-8); /** Subtle dividers. */
+  --color-apliteni-theme-light-text-primary: var(--color-apliteni-primary-black); /** Headings, body. */
+  --color-apliteni-theme-light-text-muted: var(--color-apliteni-neutral-5); /** Secondary text, labels. */
+  --color-apliteni-theme-light-text-disabled: var(--color-apliteni-neutral-6); /** Disabled state. */
+  --color-apliteni-theme-light-accent: var(--color-apliteni-primary-violet); /** Primary action, links. */
+  --color-apliteni-theme-light-accent-hover: var(--color-apliteni-violet-1); /** Accent on hover. */
+}

package/src/tokens/tokens.css

@@ -70,11 +70,24 @@
   --tracking-wide: 0.04em;
   --tracking-caps: 0.14em;
 
-  /* -- Motion ------------------------------------------------------------- */
-  --ease: cubic-bezier(0.4, 0, 0.2, 1);
-  --dur-fast: 0.15s;
-  --dur-med: 0.25s;
-  --dur-slow: 0.4s;
+  /* -- Motion -------------------------------------------------------------
+   * Durations + easings are the Apliteni brand's motion vocabulary, synced
+   * from design-system into brand.generated.css (--duration-*, --easing-*).
+   * The kit's legacy --dur-* and --ease names alias onto them, so every existing
+   * component transitively consumes the brand primitives — one vocabulary,
+   * zero drift. Fallbacks keep tokens.css self-sufficient when imported
+   * without brand.generated.css. Delays are the kit's own (not a brand
+   * concern). The reusable effect layer lives in styles/motion.css. */
+  --ease: var(--easing-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
+  --dur-fast: var(--duration-fast, 0.15s);   /* 150ms — hover, press */
+  --dur-med: var(--duration-normal, 0.25s);  /* 250ms — panels, dropdowns */
+  --dur-slow: var(--duration-slow, 0.4s);    /* 400ms — enters, reveals */
+
+  --delay-1: 60ms;
+  --delay-2: 120ms;
+  --delay-3: 180ms;
+  --delay-4: 240ms;
+  --delay-5: 300ms;
 
   /* -- Elevation (z) ------------------------------------------------------ */
   --z-base: 1;