@veluai/velu 0.1.0

package/runtime/velu-ui/components/page-feedback.css

@@ -0,0 +1,241 @@
+/* PageFeedback — "Was this page helpful?" row. All values are tokens;
+   light/dark via [data-theme]. Row layout (flex/gap/wrap) is the
+   <Cluster> primitive; this file owns only typography + the buttons. */
+
+.velu-feedback__question {
+  font-size: var(--f-h6);
+  color: var(--text-color);
+}
+
+.velu-feedback__btn {
+  position: relative; /* anchor for the heart burst */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding-block: var(--s-3);
+  padding-inline: var(--s-1);
+  background: transparent;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  color: var(--text-color);
+  font: inherit;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  line-height: var(--lh-h6);
+  cursor: pointer;
+  transition:
+    border-color 0.12s ease,
+    background 0.12s ease,
+    color 0.12s ease;
+}
+.velu-feedback__btn svg {
+  flex: none;
+  /* Resting icon matches the label (full-contrast text color), not the
+     muted grey — accent is reserved for hover / chosen. */
+  color: var(--text-color);
+}
+.velu-feedback__btn:hover {
+  border-color: var(--accent-color);
+}
+.velu-feedback__btn:hover svg {
+  color: var(--accent-color);
+}
+
+/* The currently-picked button — accent border + tint, accent icon.
+   The vote stays changeable: clicking the other button moves it here. */
+.velu-feedback__btn--chosen {
+  border-color: var(--accent-color);
+  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  color: var(--accent-color);
+}
+.velu-feedback__btn--chosen svg {
+  color: var(--accent-color);
+}
+
+.velu-feedback__thanks {
+  font-size: var(--f-h6);
+  color: var(--muted-color);
+}
+
+/* ── "No" improvement form ──────────────────────────────────────────── */
+/* Vertical rhythm is the <Stack> primitive; this owns only the chrome. */
+.velu-feedback__form {
+  padding-block-start: var(--s0);
+  border-block-start: var(--border-width) solid var(--border-color);
+}
+.velu-feedback__form-title {
+  margin: 0;
+  font-size: var(--f-h4);
+  line-height: var(--lh-h4);
+  font-weight: var(--weight-medium);
+  color: var(--text-color);
+}
+
+/* Reason radio rows — native <input> visually hidden, circle drawn by
+   the adjacent mark span (so :checked can style it). */
+.velu-feedback__radio {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--s-1);
+  cursor: pointer;
+}
+.velu-feedback__radio input {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: var(--icon-size-lg);
+  block-size: var(--icon-size-lg);
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.velu-feedback__radio-mark {
+  position: relative;
+  flex: none;
+  inline-size: var(--icon-size-lg);
+  block-size: var(--icon-size-lg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: 50%;
+  transition: border-color 0.12s ease;
+}
+.velu-feedback__radio input:checked + .velu-feedback__radio-mark {
+  border-color: var(--accent-color);
+}
+.velu-feedback__radio input:checked + .velu-feedback__radio-mark::after {
+  content: '';
+  position: absolute;
+  inset: 22%;
+  background: var(--accent-color);
+  border-radius: 50%;
+}
+.velu-feedback__radio input:focus-visible + .velu-feedback__radio-mark {
+  outline: var(--border-width) solid var(--accent-color);
+  outline-offset: 2px;
+}
+.velu-feedback__radio:hover .velu-feedback__radio-mark {
+  border-color: var(--accent-color);
+}
+.velu-feedback__radio-label {
+  font-size: var(--f-body);
+  color: var(--text-color);
+}
+
+/* Optional free-text detail */
+.velu-feedback__detail {
+  inline-size: 100%;
+  box-sizing: border-box;
+  padding: var(--s-1);
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  resize: vertical;
+  font: inherit;
+  font-size: var(--f-h6);
+  line-height: var(--lh-body);
+  color: var(--text-color);
+}
+.velu-feedback__detail::placeholder {
+  color: var(--muted-color);
+}
+.velu-feedback__detail:focus-visible {
+  outline: none;
+  border-color: var(--accent-color);
+}
+
+/* Cancel / Submit actions */
+.velu-feedback__action {
+  padding-block: var(--s-2);
+  padding-inline: var(--s0);
+  border-radius: var(--radius-md);
+  font: inherit;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  cursor: pointer;
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+.velu-feedback__action--cancel {
+  background: transparent;
+  border: var(--border-width) solid var(--border-color);
+  color: var(--text-color);
+}
+.velu-feedback__action--cancel:hover {
+  border-color: var(--accent-color);
+}
+.velu-feedback__action--submit {
+  background: var(--accent-color);
+  border: var(--border-width) solid var(--accent-color);
+  color: #fff;
+}
+.velu-feedback__action--submit:hover {
+  background: color-mix(in srgb, var(--accent-color) 88%, #000);
+}
+
+/* ── Submitted confirmation — sits below the divider line ───────────── */
+.velu-feedback__sent {
+  padding-block-start: var(--s0);
+  border-block-start: var(--border-width) solid var(--border-color);
+}
+.velu-feedback__sent-title {
+  font-size: var(--f-body);
+  font-weight: var(--weight-medium);
+  color: var(--text-color);
+}
+.velu-feedback__sent-note {
+  font-size: var(--f-h6);
+  color: var(--muted-color);
+}
+
+/* ── Heart burst (on "Yes") ─────────────────────────────────────────── */
+/* Zero-size anchor pinned to the top-center of the Yes button; hearts
+   are absolutely positioned relative to it and fan out from (0,0). */
+.velu-feedback__hearts {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 50%;
+  inline-size: 0;
+  block-size: 0;
+  pointer-events: none;
+}
+.velu-feedback__heart {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: var(--s-1);
+  block-size: var(--s-1);
+  /* --hb-tx / --hb-ty / --hb-rot are set per-heart inline. */
+  animation: velu-feedback-hearts 0.8s ease-out forwards;
+}
+.velu-feedback__heart path {
+  fill: currentColor;
+}
+/* Festive shades, all derived from the brand accent. */
+.velu-feedback__heart--0 {
+  color: var(--accent-color);
+}
+.velu-feedback__heart--1 {
+  color: color-mix(in srgb, var(--accent-color) 60%, #fff);
+}
+.velu-feedback__heart--2 {
+  color: color-mix(in srgb, var(--accent-color) 55%, var(--text-color));
+}
+.velu-feedback__heart--3 {
+  color: color-mix(in srgb, var(--accent-color) 82%, #fff);
+}
+@keyframes velu-feedback-hearts {
+  0% {
+    transform: translate(-50%, 0) rotate(0deg) scale(0.6);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(calc(-50% + var(--hb-tx)), var(--hb-ty))
+      rotate(var(--hb-rot)) scale(1);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .velu-feedback__hearts {
+    display: none;
+  }
+}

package/runtime/velu-ui/components/page-footer.css

@@ -0,0 +1,130 @@
+/* PageFooter — docs site footer. Vertical rhythm + columns / socials
+   are composed from Stack / Switcher / Cluster primitives in the JSX;
+   this file owns only chrome (typography, link colors, icon sizing).
+   Light / dark via [data-theme] via the velu-ui tokens. */
+
+.velu-footer {
+  padding-block: var(--s2);
+  padding-inline: var(--s3);
+  /* Matches the header — same subtle hairline (--surface-color
+     resolves to #f2f3f4 in light / #323334 in dark). */
+  border-block-start: var(--border-width) solid var(--surface-color);
+  color: var(--text-color);
+  /* Opaque so the footer visually eclipses the fixed sidebar / TOC
+     when the page scrolls into it (DocsPage gives the footer a higher
+     z-index than the asides). */
+  background: var(--page-bg);
+}
+
+/* ── Container — wraps the brand row + columns row, centered in the
+   footer. fit-content sizes it to the wider of the two rows; margin
+   auto centers that block within the footer's padding box. */
+.velu-footer__container {
+  inline-size: fit-content;
+  max-inline-size: 100%;
+  margin-inline: auto;
+}
+
+/* Columns row — flex-wrap with split gaps. column-gap is fluid via
+   clamp(): scales with viewport width between a floor (--s4) and a
+   ceiling (calc(var(--s5) * 7)) so it shrinks gracefully on narrow
+   screens. row-gap is small (used only when columns wrap onto a new
+   line). */
+.velu-footer__row--columns {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  column-gap: clamp(var(--s4), 12vw, calc(var(--s5) * 7));
+  row-gap: var(--s2);
+}
+
+/* ── Brand row ──────────────────────────────────────────────────────── */
+/* Brand sits on its own row, hugged to the inline-start (align-self:
+   flex-start stops the outer column-Stack from stretching it across
+   the full row width). */
+.velu-footer__brand,
+.velu-footer__brand-link {
+  align-self: flex-start;
+  color: var(--text-color);
+}
+.velu-footer__brand-link {
+  text-decoration: none;
+  color: inherit;
+}
+.velu-footer__mark {
+  flex: none;
+  inline-size: calc(var(--icon-size-lg) * (32 / 24));
+  block-size: var(--icon-size-lg);
+  color: var(--accent-color);
+}
+/* Outfit Light, per the brand spec — falls back to --font-sans. */
+.velu-footer__wordmark {
+  font-family: var(--font-brand);
+  font-weight: var(--weight-light);
+  font-size: var(--f-h4);
+  line-height: 1;
+  letter-spacing: -0.01em;
+  color: var(--text-color);
+}
+
+/* ── Link columns ───────────────────────────────────────────────────── */
+.velu-footer__column-title {
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  color: var(--text-color);
+}
+.velu-footer__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+/* Footer text is always full-contrast (--text-color) — no muted greys.
+   Links shift to the accent color on hover; no underline.
+   line-height: 1.4 overrides the body's 1.75 so menu links don't sit
+   in a tall box (kept the columns from looking spread out). */
+.velu-footer__link {
+  display: inline-block;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-light);
+  line-height: 1.4;
+  color: var(--text-color);
+  text-decoration: none;
+  transition: color 0.12s ease;
+}
+.velu-footer__link:hover {
+  color: var(--accent-color);
+}
+
+/* ── Social row ─────────────────────────────────────────────────────── */
+/* 2em × 2em (32×32 at 16px base) buttons; the glyph fills ~1.25em so a
+   little breathing room remains around it. Each kind gets its OWN
+   brand color (set via the data-kind attribute below). Monochrome
+   brands (github, x) inherit --text-color so they theme correctly. */
+.velu-footer__social {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  inline-size: 2em;
+  block-size: 2em;
+  padding: 0;
+  color: var(--text-color);
+  text-decoration: none;
+  transition: opacity 0.12s ease;
+}
+.velu-footer__social:hover {
+  opacity: 0.78;
+}
+.velu-footer__social svg {
+  inline-size: var(--icon-size-lg);
+  block-size: var(--icon-size-lg);
+}
+/* Brand colors — YouTube red, LinkedIn blue. GitHub + X stay
+   --text-color (their canonical brand is monochrome and follows the
+   surrounding theme). */
+.velu-footer__social[data-kind='youtube'] {
+  color: #ff0000;
+}
+.velu-footer__social[data-kind='linkedin'] {
+  color: #0a66c2;
+}