@sierragridteam/design-system 0.0.0-stage → 0.3.1

package/src/styles/global.css

@@ -0,0 +1,4 @@
+@import './tokens.css';
+@import './base.css';
+@import './components.css';
+@import './shell.css';

package/src/styles/shell.css

@@ -0,0 +1,501 @@
+/**
+ * App shell: sidebar + topbar + content. Desktop shows the sidebar; below
+ * 860px it becomes a drawer opened from the top bar.
+ */
+.shell {
+  display: grid;
+  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
+  min-height: 100dvh;
+}
+
+.sidebar {
+  position: sticky;
+  view-transition-name: sidebar;
+  top: 0;
+  align-self: start;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  background: var(--surface-banner);
+  border-right: var(--border);
+}
+
+.sidebar__brand {
+  display: flex;
+  align-items: center;
+  min-height: var(--topbar-h);
+  padding: 0 var(--space-5);
+  border-bottom: var(--border);
+}
+
+.sidebar__nav {
+  flex: 1 1 auto;
+  padding: var(--space-4) var(--space-3);
+  overflow-y: auto;
+}
+
+.sidebar__group + .sidebar__group {
+  margin-top: var(--space-5);
+}
+
+.sidebar__group-label {
+  display: block;
+  padding: 0 var(--space-3);
+  margin-bottom: var(--space-2);
+  font-size: var(--fs-label);
+  font-weight: var(--fw-semibold);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+  color: var(--brand-brass-text);
+}
+
+.sidebar__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-height: var(--control-h);
+  padding: 0 var(--space-3);
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-ui);
+  font-weight: var(--fw-medium);
+  color: var(--ink-body);
+  text-decoration: none;
+  transition:
+    background-color var(--transition),
+    color var(--transition);
+}
+
+.nav-link .icon {
+  color: var(--ink-muted);
+}
+
+.nav-link:hover {
+  background: var(--surface-card);
+  color: var(--brand-green);
+  text-decoration: none;
+}
+
+.nav-link:hover .icon {
+  color: var(--brand-green);
+}
+
+.nav-link.is-active {
+  background: var(--brand-green-tint);
+  color: var(--brand-green);
+  box-shadow: inset 3px 0 0 var(--brand-green);
+}
+
+.nav-link.is-active .icon {
+  color: var(--brand-green);
+}
+
+.sidebar__footer {
+  padding: var(--space-3) var(--space-3);
+  border-top: var(--border);
+}
+
+/* Compact chip: 240px has to fit avatar, email, and the sign-out button. */
+.sidebar__footer .avatar {
+  width: 28px;
+  height: 28px;
+  font-size: var(--fs-label-lg);
+}
+
+.sidebar__user {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.sidebar__footer .user-chip {
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
+  border-radius: var(--radius-sm);
+  color: inherit;
+  text-decoration: none;
+}
+
+.sidebar__footer a.user-chip:hover {
+  background: var(--surface-card);
+  text-decoration: none;
+}
+
+/* Icon-only sign-out beside the chip; the label is the accessible name. */
+.sidebar__signout {
+  flex: 0 0 auto;
+  display: inline-grid;
+  place-items: center;
+  width: var(--control-h-sm);
+  height: var(--control-h-sm);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--ink-muted);
+  transition:
+    background-color var(--transition),
+    color var(--transition);
+}
+
+.sidebar__signout:hover {
+  background: var(--surface-card);
+  color: var(--brand-green);
+}
+
+/* Top bar: only visible on narrow screens */
+.topbar {
+  display: none;
+  view-transition-name: topbar;
+  position: sticky;
+  top: 0;
+  z-index: var(--z-topbar);
+  align-items: center;
+  gap: var(--space-3);
+  min-height: var(--topbar-h);
+  padding: 0 var(--gutter);
+  background: color-mix(in srgb, var(--surface-page) 92%, transparent);
+  backdrop-filter: saturate(1.1) blur(6px);
+  border-bottom: var(--border);
+}
+
+.topbar__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-2);
+  margin-left: calc(var(--space-2) * -1);
+  background: none;
+  border: 0;
+  color: var(--ink-secondary);
+}
+
+.topbar__toggle:hover {
+  color: var(--brand-green);
+}
+
+.topbar__title {
+  font-family: var(--font-display);
+  font-size: var(--fs-lead);
+  font-weight: var(--fw-semibold);
+  letter-spacing: 0.04em;
+  color: var(--ink-strong);
+}
+
+.main {
+  min-width: 0;
+  view-transition-name: main;
+  padding: var(--space-7) var(--gutter) var(--space-10);
+}
+
+.main__inner {
+  max-width: var(--content-max);
+  margin-inline: auto;
+}
+
+.main__inner--narrow {
+  max-width: var(--content-narrow);
+}
+
+.scrim {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  background: rgb(22 39 30 / 40%);
+}
+
+@media (max-width: 860px) {
+  .shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .topbar {
+    display: flex;
+  }
+
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--z-drawer);
+    width: min(var(--sidebar-w), 84vw);
+    transform: translateX(-100%);
+    transition: transform var(--transition-slow);
+    box-shadow: none;
+  }
+
+  .shell[data-drawer='open'] .sidebar {
+    transform: none;
+    box-shadow: var(--shadow-drawer);
+  }
+
+  .shell[data-drawer='open'] .scrim {
+    display: block;
+  }
+
+  .main {
+    padding-top: var(--space-5);
+  }
+}
+
+/* Auth layout: centred narrow card on the cool hero tint */
+.auth {
+  min-height: 100dvh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  background: var(--surface-hero);
+  background-image:
+    linear-gradient(color-mix(in srgb, var(--brand-green) 4.5%, transparent) 1px, transparent 1px),
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--brand-green) 4.5%, transparent) 1px,
+      transparent 1px
+    );
+  background-size: 52px 52px;
+}
+
+.auth__header {
+  display: flex;
+  justify-content: center;
+  padding: var(--space-7) var(--gutter) 0;
+}
+
+.auth__main {
+  display: grid;
+  place-items: center;
+  padding: var(--space-7) var(--gutter);
+}
+
+.auth__card {
+  width: 100%;
+  max-width: 420px;
+  padding: var(--space-7);
+  background: var(--surface-card);
+  border: var(--border);
+  border-radius: var(--radius);
+}
+
+.auth__card h1 {
+  margin-bottom: var(--space-2);
+}
+
+.auth__card > p {
+  color: var(--ink-secondary);
+  font-size: var(--fs-ui);
+  margin-bottom: var(--space-5);
+}
+
+.auth__footer {
+  padding: 0 var(--gutter) var(--space-6);
+  text-align: center;
+  font-size: var(--fs-small);
+  color: var(--ink-muted);
+}
+
+/* Boot screen: holds auth-dependent pages until the session is known (src/lib/boot.ts) */
+html[data-boot='loading'] body > :not(.boot) {
+  visibility: hidden;
+}
+
+/* Dialogs are appended to <body> later and have their own entrance (components.css). */
+html[data-boot='ready'] body > :not(.boot, .dialog) {
+  animation: boot-in var(--transition-slow) both;
+}
+
+.boot {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: grid;
+  place-items: center;
+  padding: var(--gutter);
+  background: var(--surface-hero);
+  background-image:
+    linear-gradient(color-mix(in srgb, var(--brand-green) 4.5%, transparent) 1px, transparent 1px),
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--brand-green) 4.5%, transparent) 1px,
+      transparent 1px
+    );
+  background-size: 52px 52px;
+  transition: opacity var(--transition-slow);
+}
+
+html[data-boot='ready'] .boot {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.boot__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-5);
+  text-align: center;
+}
+
+/* A fast session never shows the loader; a slow one fades it in. */
+[data-boot-working] {
+  animation: boot-in 400ms ease 180ms both;
+}
+
+.boot__mark {
+  height: 38px;
+  width: auto;
+}
+
+.boot__track {
+  position: relative;
+  width: 120px;
+  height: 2px;
+  overflow: hidden;
+  background: var(--line-soft);
+  border-radius: var(--radius-pill);
+}
+
+.boot__bar {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 40%;
+  background: var(--brand-green);
+  border-radius: inherit;
+  animation: boot-sweep 1.3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+
+.boot__hint {
+  margin: 0;
+  font-size: var(--fs-small);
+  color: var(--ink-muted);
+  animation: boot-in 400ms ease 6s both;
+}
+
+.boot__failed {
+  gap: var(--space-3);
+  max-width: 36ch;
+}
+
+.boot__title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: var(--fs-h2);
+  line-height: var(--lh-heading);
+  color: var(--ink-strong);
+}
+
+.boot__message {
+  margin: 0 0 var(--space-3);
+  font-size: var(--fs-ui);
+  color: var(--ink-secondary);
+}
+
+/* Without JavaScript nothing would ever call reveal(); show the page as it is. */
+@media (scripting: none) {
+  .boot {
+    display: none;
+  }
+
+  html[data-boot='loading'] body > :not(.boot) {
+    visibility: visible;
+  }
+}
+
+@keyframes boot-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes boot-sweep {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* The global rule would stop the sweep after one pass; pulse gently instead. */
+  .boot__bar {
+    width: 100%;
+    animation: boot-pulse 1.6s ease-in-out infinite !important;
+  }
+}
+
+@keyframes boot-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+/* Client-side navigation (src/lib/navigation.ts). The sidebar, top bar, toasts and content
+   column are named view-transition groups (view-transition-name on each rule), so they leave
+   the page's crossfade: the shell stays put while the content swaps with a short fade and lift.
+   The names live here rather than in transition:name / transition:animate directives because
+   those emit an inline <style> the CSP hashes do not cover. */
+::view-transition-group(main) {
+  animation-duration: 0s;
+}
+
+::view-transition-old(main) {
+  animation: content-out 90ms ease-in both;
+}
+
+::view-transition-new(main) {
+  animation: content-in 220ms ease-out both;
+}
+
+@keyframes content-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes content-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+/* A thin sweep along the top while the next page is fetched; the delay keeps it off the
+   screen for the usual instant (prefetched) navigation. */
+html[data-navigating] body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-skiplink);
+  width: 25vw;
+  height: 2px;
+  background: var(--brand-green);
+  animation: nav-sweep 1.1s cubic-bezier(0.65, 0, 0.35, 1) 150ms infinite backwards;
+}
+
+@keyframes nav-sweep {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(400vw);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,172 @@
+/**
+ * Design tokens — S.I.E.R.R.A Members.
+ *
+ * A derivative of the main site's "Civic Direction" system (sierragridteam.org,
+ * src/styles/tokens.css). Palette, typefaces, rules and status colours are
+ * inherited unchanged so the two sites read as one institution. Type roles,
+ * spacing, radii and layout are re-tuned for an application: denser, sans-serif
+ * body, sidebar shell. Rationale and the full comparison: docs/design-system.md.
+ *
+ * This is the ONLY file allowed to contain raw hex colours and raw px font
+ * sizes (stylelint enforces it). Everything else uses var(--…).
+ */
+
+:root {
+  /* ---------------------------------------------------------------------- */
+  /* Surfaces — warm parchment neutrals (inherited)                           */
+  /* ---------------------------------------------------------------------- */
+  --surface-page: #f3efe4; /* app background */
+  --surface-card: #f6f2e7; /* cards, panels, table headers */
+  --surface-banner: #efe9da; /* sidebar, callouts, code, footer strips */
+  --surface-raised: #fdfcf7; /* inputs, hovered rows, popovers */
+  --surface-hero: #edefe7; /* cool tint — auth screens, empty states */
+  --surface-deep: #14281d; /* the one dark ground — admin badge, toasts */
+  --surface-deep-line: #2c4536;
+
+  /* ---------------------------------------------------------------------- */
+  /* Ink (inherited)                                                          */
+  /* ---------------------------------------------------------------------- */
+  --ink-strong: #16271e;
+  --ink-body: #3c453c;
+  --ink-secondary: #5a5e4f;
+  --ink-muted: #6f6750;
+  --ink-on-deep: #f1ece0;
+  --ink-on-deep-muted: #9db3a4;
+
+  /* ---------------------------------------------------------------------- */
+  /* Brand & signal (inherited)                                               */
+  /* ---------------------------------------------------------------------- */
+  --brand-green: #1d5b3f; /* primary: actions, links, focus, active nav */
+  --brand-green-hover: #16472f;
+  --brand-green-tint: #e4ebe4; /* selected row / active nav ground */
+  --brand-brass: #b08a3e; /* rules, secondary outline, pending state */
+  --brand-brass-text: #785d20;
+  --brand-brass-tint: #f1e8d3;
+  --signal-orange: #c2410c; /* risk / destructive only */
+  --signal-orange-hover: #9a330a;
+  --signal-orange-text: #b03808;
+  --signal-orange-tint: #f6e2d6;
+
+  /* Status dots & badges */
+  --state-ok: #1d5b3f;
+  --state-elevated: #b08a3e;
+  --state-alarm: #c2410c;
+  --state-muted: #9a906f;
+
+  /* ---------------------------------------------------------------------- */
+  /* Lines (inherited — always warm tan, never grey)                          */
+  /* ---------------------------------------------------------------------- */
+  --line: #d8d0bd;
+  --line-soft: #e5ddca;
+  --line-control: #928869; /* ≥ 3:1 against inputs */
+  --border-w: 1px;
+  --border: var(--border-w) solid var(--line);
+  --border-soft: var(--border-w) solid var(--line-soft);
+
+  /* ---------------------------------------------------------------------- */
+  /* Typography — same faces, app roles                                       */
+  /* ---------------------------------------------------------------------- */
+  --font-display:
+    "Newsreader Variable", "Newsreader", Georgia, "Times New Roman", serif;
+  --font-ui:
+    "IBM Plex Sans Variable", "IBM Plex Sans", system-ui, -apple-system,
+    sans-serif;
+  --font-mono:
+    "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;
+
+  /* Serif is reserved for page titles and section headings. */
+  --fs-h1: clamp(1.625rem, 1.4rem + 1vw, 2rem); /* 26 → 32px */
+  --fs-h2: 1.375rem; /* 22px */
+  --fs-h3: 1rem; /* 16px, sans, semibold */
+  --fs-lead: 1.0625rem; /* 17px intro text */
+  --fs-body: 1rem; /* 16px — reading text, floor for prose */
+  --fs-ui: 0.875rem; /* 14px — controls, table cells, meta */
+  --fs-small: 0.8125rem; /* 13px — help text, timestamps */
+  --fs-label: 0.6875rem; /* 11px uppercase labels */
+  --fs-label-lg: 0.75rem; /* 12px */
+  --fs-stat: 1.75rem; /* 28px numbers */
+  --fs-code: 1.75rem; /* OTP entry */
+
+  --fw-regular: 400;
+  --fw-medium: 500;
+  --fw-semibold: 600;
+
+  --lh-heading: 1.15;
+  --lh-body: 1.55;
+  --lh-ui: 1.4;
+  --tracking-tight: -0.01em;
+  --tracking-label: 0.14em;
+  --tracking-kicker: 0.22em;
+
+  /* ---------------------------------------------------------------------- */
+  /* Geometry — the app diverges here: soft corners, 4px spacing grid         */
+  /* ---------------------------------------------------------------------- */
+  --radius-sm: 2px; /* controls, badges */
+  --radius: 4px; /* cards, panels, rows */
+  --radius-pill: 999px;
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 32px;
+  --space-8: 40px;
+  --space-9: 48px;
+  --space-10: 64px;
+
+  --control-h: 36px; /* inputs, buttons, selects */
+  --control-h-sm: 28px;
+  --row-h: 48px; /* list rows */
+  --icon: 18px;
+  --icon-lg: 22px;
+
+  /* ---------------------------------------------------------------------- */
+  /* Layout — app shell                                                       */
+  /* ---------------------------------------------------------------------- */
+  --sidebar-w: 240px;
+  --topbar-h: 56px;
+  --content-max: 960px;
+  --content-narrow: 560px;
+  --dialog-w: 560px;
+  --dialog-w-wide: 760px;
+  --gutter: clamp(16px, 3vw, 32px);
+  --section-gap: var(--space-8);
+
+  --z-skiplink: 100;
+  --z-toast: 90;
+  --z-topbar: 50;
+  --z-drawer: 60;
+  --z-overlay: 40;
+
+  /* Shadows: none on cards; only floating things */
+  --shadow-overlay: 0 1px 0 var(--line);
+  --shadow-popover:
+    0 6px 20px rgb(22 39 30 / 14%), 0 1px 3px rgb(22 39 30 / 10%);
+  --shadow-drawer: 0 12px 32px rgb(22 39 30 / 22%);
+  --backdrop: rgb(
+    20 40 29 / 45%
+  ); /* behind modal dialogs: --surface-deep, translucent */
+
+  /* Motion */
+  --transition: 120ms ease;
+  --transition-slow: 200ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --transition: 0s;
+    --transition-slow: 0s;
+  }
+}
+
+/* Map ground: aligned with sierragridteam.org, independent of page layout. */
+:root {
+  --map-water: #dde3da;
+  --map-road: #f8f6ef;
+  --map-road-casing: #ddd4bd;
+  --map-county-line: #c9c1a9;
+  --map-place: #9a906f;
+  --map-shield-text: #7d7459;
+}