/* Sprout's own styling. The shell, nav, tabs, gallery and thumbnails all come from @ecosystem/design (/design/css/index.css) — what's left here is what only this app has: a preview canvas, a code diff, a family tree, and the social pieces (the heart, comments, a toast). None has a second consumer yet, which is packages/README.md's bar for moving something into the design system. */ /* This app's accent lives in @ecosystem/design — css/app-themes.css, keyed on the `data-app` slug the shell puts on . It moved there when the accents started being DERIVED from each app's logo rather than chosen per app: the ramp, the contrast check and the logo are one decision now, and splitting them across six stylesheets is how they drift apart. Repointing a semantic token is still the supported extension point — that file is just where this particular repointing happens. */ /* ── the canvas ────────────────────────────────────────────────────────── A checkered-neutral stage so a page with a white background still reads as an object sitting on something, rather than bleeding into the app. */ .canvas { display: flex; justify-content: center; padding: var(--ds-space-4); background: var(--ds-surface-sunken); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-lg); overflow-x: auto; } .canvas__frame { /* Tall enough to judge a landing page, capped so the toolbar above it stays reachable without scrolling back up. */ height: min(70vh, 46rem); max-width: 100%; border: 0; border-radius: var(--ds-radius-md); background: #fff; /* the author's page brings its own colours */ box-shadow: var(--ds-shadow-md); transition: width var(--ds-duration-base) var(--ds-ease); } @media (prefers-reduced-motion: reduce) { .canvas__frame { transition: none; } } /* ── facts list in the rail ──────────────────────────────────────────────── */ .facts { display: grid; grid-template-columns: auto 1fr; gap: var(--ds-space-1) var(--ds-space-3); margin: 0; font-size: var(--ds-text-sm); } .facts dt { color: var(--ds-text-muted); } .facts dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; } /* ── diff ────────────────────────────────────────────────────────────────── */ .diff { font-family: var(--ds-font-mono); font-size: 12px; line-height: 1.55; border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-md); overflow: hidden; background: var(--ds-surface); } .diff__file-header { display: flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-surface-sunken); border-bottom: var(--ds-border-width) solid var(--ds-border); font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); } .diff__path { font-family: var(--ds-font-mono); font-weight: var(--ds-weight-medium); } .diff__added { color: var(--ds-success); } .diff__removed { color: var(--ds-danger); } /* Horizontal scrolling belongs to the diff, never to the page. */ .diff__body { overflow-x: auto; } .diff__hunk-sep { padding: var(--ds-space-1) var(--ds-space-3); color: var(--ds-text-muted); background: var(--ds-surface-sunken); border-block: var(--ds-border-width) solid var(--ds-border); } .diff__line { display: grid; grid-template-columns: 3rem 3rem 1fr; white-space: pre; } .diff__gutter { padding-inline: var(--ds-space-2); text-align: right; color: var(--ds-text-subtle); user-select: none; border-inline-end: var(--ds-border-width) solid var(--ds-border); } .diff__text { padding-inline: var(--ds-space-3); } /* Colour is doubled with the +/- already in the text, so the diff still reads correctly to someone who cannot distinguish the two tints. */ .diff__line--add { background: color-mix(in srgb, var(--ds-success) 12%, transparent); } .diff__line--del { background: color-mix(in srgb, var(--ds-danger) 12%, transparent); } @media (max-width: 40rem) { /* One gutter instead of two: on a phone, six characters of line number is a fifth of the width, and the new-file number is the one being read. */ .diff__line { grid-template-columns: 2.5rem 1fr; } .diff__gutter:first-child { display: none; } } /* ── editor ──────────────────────────────────────────────────────────────── */ /* Deliberately a textarea and not an editor: this pass is about versions, forks and diffs. A real editing surface is its own project. */ .editor { width: 100%; min-height: 22rem; font-family: var(--ds-font-mono); font-size: 12px; line-height: 1.55; tab-size: 2; resize: vertical; } /* ── lineage ─────────────────────────────────────────────────────────────── */ .lineage { font-size: var(--ds-text-sm); padding: var(--ds-space-3); background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-md); } /* Depth is data, so it drives the indent through a custom property rather than through repeated whitespace in the markup. */ .lineage__row { display: flex; align-items: baseline; gap: var(--ds-space-2); padding-block: 2px; padding-inline-start: calc(var(--_depth, 0) * var(--ds-space-4)); } .lineage__rail { color: var(--ds-text-subtle); font-family: var(--ds-font-mono); } .lineage__self { font-weight: var(--ds-weight-semibold); } .lineage__private { color: var(--ds-text-muted); font-style: italic; } /* ── the heart ──────────────────────────────────────────────────────────── The one control that appears on a card. It has to read as pressable at thumbnail scale and as pressed without relying on colour alone, hence the fill change AND the outline going solid. */ .heart { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: 2px var(--ds-space-2); border: var(--ds-border-width) solid transparent; border-radius: var(--ds-radius-full); background: none; color: var(--ds-text-subtle); font: inherit; font-size: var(--ds-text-xs); font-variant-numeric: tabular-nums; cursor: pointer; transition: color var(--ds-duration-fast) var(--ds-ease), border-color var(--ds-duration-fast) var(--ds-ease); } .heart:hover { color: var(--ds-danger); border-color: var(--ds-border); } .heart--on { color: var(--ds-danger); } /* The outline going solid, promised by the comment above: the icon is stroke-only until favourited, at which point it fills with the same colour the border and text already turned. */ .heart--on .ds-icon { fill: currentColor; } .heart--lg { font-size: var(--ds-text-sm); padding: var(--ds-space-1) var(--ds-space-2); } .heart--lg .ds-icon { width: var(--ds-icon-md); height: var(--ds-icon-md); } /* ── tab counts ─────────────────────────────────────────────────────────── A count on a tab, and a stronger one when the number is something waiting for you rather than just a total. */ .tab-count { display: inline-block; min-width: 1.25em; padding: 0 4px; border-radius: var(--ds-radius-sm); background: var(--ds-surface-sunken); color: var(--ds-text-muted); font-size: var(--ds-text-xs); font-variant-numeric: tabular-nums; } .tab-count--live { background: var(--ds-accent); color: var(--ds-on-accent); } /* ── comments ───────────────────────────────────────────────────────────── An accepted suggestion is a comment with a badge, not a separate activity feed — so the conversation about a page and the changes to it read as one thread. The tint is the only thing that sets it apart. */ .comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-3); } .comment { padding: var(--ds-space-3); background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-md); } .comment--event { background: var(--ds-success-subtle); border-color: color-mix(in srgb, var(--ds-success) 30%, transparent); } .comment__head { display: flex; align-items: center; gap: var(--ds-space-2); margin-bottom: var(--ds-space-2); font-size: var(--ds-text-sm); } .comment__author { font-weight: var(--ds-weight-medium); } .comment__time { font-size: var(--ds-text-xs); color: var(--ds-text-subtle); } /* A pasted URL must not widen the column. */ .comment__body { font-size: var(--ds-text-sm); white-space: pre-wrap; overflow-wrap: anywhere; } .comment__ref { margin-top: var(--ds-space-2); font-size: var(--ds-text-xs); color: var(--ds-text-muted); } /* ── toast ──────────────────────────────────────────────────────────────── Confirmation for actions whose result is somewhere other than where you are standing — pinning to a board, sending a suggestion. */ .toast { position: fixed; inset-block-end: var(--ds-space-5); inset-inline: 0; z-index: var(--ds-z-toast); width: fit-content; max-width: min(30rem, calc(100vw - 2 * var(--ds-space-4))); margin-inline: auto; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-neutral-800); color: var(--ds-neutral-0); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-lg); font-size: var(--ds-text-sm); animation: toast-in var(--ds-duration-base) var(--ds-ease); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } } /* ── the code editor ────────────────────────────────────────────────────── A transparent

over a coloured <pre>. The two layers MUST agree
   on every metric that affects where a glyph lands, or the colour drifts away
   from the caret — so both take their box from `.code__layer` and neither is
   allowed its own font, padding or wrapping. */

.code {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  height: min(60vh, 34rem);
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  overflow: hidden;
  font-family: var(--ds-font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  tab-size: 2;
}

.code__gutter,
.code__paint,
.code__input {
  font: inherit;
  line-height: inherit;
  tab-size: inherit;
  padding: var(--ds-space-3) 0;
  margin: 0;
  border: 0;
  white-space: pre;
  overflow: hidden;
}

.code__gutter {
  padding-inline: var(--ds-space-3);
  text-align: right;
  color: var(--ds-text-subtle);
  background: var(--ds-surface-sunken);
  border-inline-end: var(--ds-border-width) solid var(--ds-border);
  user-select: none;
}

.code__scroll { position: relative; }

.code__paint,
.code__input {
  position: absolute;
  inset: 0;
  padding-inline: var(--ds-space-3);
}

.code__paint { pointer-events: none; color: var(--ds-text); }

.code__input {
  width: 100%;
  height: 100%;
  resize: none;
  overflow: auto;
  background: transparent;
  /* The text is drawn by the layer underneath; only the caret and the
     selection come from the textarea itself. */
  color: transparent;
  caret-color: var(--ds-accent);
  outline-offset: -2px;
}
.code__input::selection { background: color-mix(in srgb, var(--ds-accent) 28%, transparent); }

/* Tokens. Kept to a handful of roles: more colours make code harder to read,
   not easier, and these survive both themes.

`--code-attr` is defined here rather than taken from the design system on
   purpose. Most of these map onto real semantic roles (a string is a success
   green, a keyword is the accent), but "attribute name in a syntax highlighter"
   is not a role the ecosystem has — inventing one in tokens.css so that one tab
   of one app can colour code would be putting an app's private vocabulary into
   the shared one. */
:root { --code-attr: #b45309; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --code-attr: #fbbf24; }
}
:root[data-theme="dark"] { --code-attr: #fbbf24; }

.tok-com { color: var(--ds-text-subtle); font-style: italic; }
.tok-str { color: var(--ds-success); }
.tok-tag { color: var(--ds-accent); }
.tok-kw  { color: var(--ds-accent); font-weight: var(--ds-weight-medium); }
.tok-atr { color: var(--code-attr); }
.tok-num { color: var(--ds-danger); }
.tok-var { color: var(--code-attr); font-weight: var(--ds-weight-medium); }

/* ── the workbench ────────────────────────────────────────────────────────
   Editing beside a live preview. Stacks on a narrow screen with the preview
   FIRST, because on a phone the reason to open this at all is to see the
   effect of what you typed. */

.workbench {
  display: grid;
  gap: var(--ds-space-3);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 64rem) {
  .workbench { grid-template-columns: minmax(0, 1fr); }
  .workbench__preview { order: -1; }
}

.workbench__preview .canvas__frame { height: min(60vh, 34rem); width: 100%; }

/* ── the design panel ─────────────────────────────────────────────────────
   The knobs a page exposes. This is the surface for someone who will never
   open the Code tab, so it has to look like settings rather than like CSS. */

.knobs { display: flex; flex-direction: column; gap: var(--ds-space-4); }

.knob-group__file {
  font-size: var(--ds-text-xs);
  font-family: var(--ds-font-mono);
  color: var(--ds-text-subtle);
  margin-bottom: var(--ds-space-2);
}

.knob {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
  gap: var(--ds-space-3);
  align-items: center;
  padding-block: var(--ds-space-2);
  border-bottom: var(--ds-border-width) solid var(--ds-border);
}
.knob:last-child { border-bottom: 0; }

.knob__label { font-size: var(--ds-text-sm); }
.knob__label small {
  display: block;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  color: var(--ds-text-subtle);
}

.knob__control { display: flex; align-items: center; gap: var(--ds-space-2); min-width: 0; }
.knob__control input[type="range"] { flex: 1; min-width: 0; }
.knob__control input[type="text"] { flex: 1; min-width: 0; }

.knob__swatch {
  inline-size: 2.25rem;
  block-size: 1.75rem;
  padding: 0;
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: none;
  cursor: pointer;
}

.knob__value {
  min-width: 4.5rem;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── template picker ──────────────────────────────────────────────────── */

.templates { display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.template {
  padding: var(--ds-space-4);
  text-align: start;
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  cursor: pointer;
  font: inherit;
}
.template:hover { border-color: var(--ds-border-strong); }
.template[aria-pressed="true"] { border-color: var(--ds-accent); box-shadow: inset 0 0 0 1px var(--ds-accent); }
.template__name { font-weight: var(--ds-weight-medium); font-size: var(--ds-text-sm); }
.template__desc { font-size: var(--ds-text-xs); color: var(--ds-text-muted); margin-top: 2px; }

/* The signed-out sidebar footer. Sprout is the one app with a real guest
   experience — the gallery is public — so this is an invitation rather than a
   wall, and it has to say what an account actually buys. */
.guest {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  width: 100%;
}
.guest__pitch {
  margin: 0;
  font-size: var(--ds-text-xs);
  line-height: 1.45;
  color: var(--ds-text-muted);
}

/* The embed snippet. Monospace and wrapping, because it is code that has to be
   read and checked before it is pasted onto somebody else's site. */
.embed__snippet {
  width: 100%;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  white-space: pre-wrap;
  word-break: break-all;
}