Every weekly report is keyed by client_id and pulled once per day. Set
utm_campaign before the draft goes out; if ga4_property
is missing, the report falls back to last week's source.
Tokens · brand_voice.yaml · draft_214
UI Components
Chip.
Monospace chip for code values and field names in text.
ContentAtomNo dependencies Beautiful UI, MIT
Using Claude Code? Give it the agent prompt and skip these steps.
-
Import the foundation once
foundation.css holds the tokens every component reads.
--- // src/layouts/Layout.astro import "../styles/foundation.css"; --- -
Use it
--- import Chip from "../components/viewership/chip/Chip.astro"; --- <Chip />
Props 1
| Prop | Type | Default | Description |
|---|---|---|---|
tone | "neutral" | "accent" | "orange" | "neutral" | Background tint and text color. |
Source 1 file
---
/**
* Chip: monospace token chip for code values like `utm_campaign`.
*
* Ported from Beautiful UI `components/atoms/Chip.tsx`
* (MIT, © 2026 Shane Levine). Renders a <code> element.
*
* @example
* Keyed by <Chip>client_id</Chip>
*/
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"code"> & {
tone?: "neutral" | "accent" | "orange";
};
const { tone = "neutral", class: className, ...rest } = Astro.props;
---
<code class:list={["vs-chip", `vs-chip--${tone}`, className]} {...rest}><slot /></code>
<style>
.vs-chip {
display: inline;
padding: 2px 6px;
border-radius: var(--vs-radius-chip);
font-family: var(--vs-font-mono);
font-size: 12px;
line-height: 1;
vertical-align: -1px;
}
.vs-chip--neutral {
background: var(--vs-inset);
color: var(--vs-ink-2);
}
.vs-chip--accent {
background: var(--vs-accent-tint);
color: var(--vs-accent-ink);
}
.vs-chip--orange {
background: var(--vs-orange-tint);
color: var(--vs-orange);
}
@media (forced-colors: active) {
.vs-chip {
outline: 1px solid CanvasText;
}
}
</style>Ported from Beautiful UI, MIT. Notices.