@adres/mgda-ui 0.0.0-stage → 0.0.2

package/src/styles/typography.css

@@ -0,0 +1,173 @@
+/*
+ * @adres/mgda-ui - typography.css
+ *
+ * Semantic single-class typography utilities built with @apply.
+ * One class covers font-size, font-weight, line-height, and letter-spacing.
+ * Color is excluded. Apply it separately:
+ *
+ *   <h1 class="ax:t-display-xl ax:text-foreground">…</h1>
+ *   <p  class="ax:t-body-md ax:text-muted-foreground">…</p>
+ *
+ * Registered with @utility so Tailwind v4 generates responsive variants
+ * (ax:md:t-display-xl, ax:lg:t-h1, etc.) automatically.
+ *
+ * ─── Scale ────────────────────────────────────────────────────────────────────
+ *
+ *   Display   t-display-3xl / 2xl / xl / sm / lg / md   Marketing + hero headlines
+ *   Heading   t-h1 → t-h6                    Page + section structure
+ *   Body      t-body-lg / md / sm             Readable prose
+ *   Label     t-label-lg / md / sm / xs       UI controls (buttons, nav, tabs)
+ *   Caption   t-caption                       Metadata, timestamps
+ *   Overline  t-overline                      Eyebrow / category badges
+ *   Code      t-code                          Monospace / technical content
+ *   Micro     t-micro                         10px UI annotations (sub-caption)
+ */
+
+/* ── Display ────────────────────────────────────────────────────────────────
+ * Hero headlines and campaign copy.
+ * Sub-1 leading requires an arbitrary value: no Tailwind default exists.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+@utility t-display-3xl {
+  @apply ax:font-sans ax:text-8xl ax:font-semibold ax:leading-24 ax:tracking-tighter ax:text-foreground-strong;
+}
+
+@utility t-display-2xl {
+  @apply ax:font-sans ax:text-7xl ax:font-semibold ax:leading-18 ax:tracking-tighter ax:text-foreground-strong;
+}
+
+@utility t-display-xl {
+  /* 64px - explicit so the display ramp stays monotonic regardless of the
+     base text-* scale (base.css leaves text-6xl at the Tailwind default 60px). */
+  @apply ax:font-sans ax:text-[4rem] ax:font-semibold ax:leading-16 ax:tracking-tighter ax:text-foreground-strong;
+}
+
+@utility t-display-lg {
+  /* 56px - sits between md (48) and xl (64). */
+  @apply ax:font-sans ax:text-[3.5rem] ax:font-semibold ax:leading-14 ax:tracking-tight ax:text-foreground-strong;
+}
+
+@utility t-display-md {
+  @apply ax:font-sans ax:text-4xl ax:font-semibold ax:leading-10.5 ax:tracking-tight ax:text-foreground-strong;
+}
+
+@utility t-display-sm {
+  @apply ax:font-sans ax:text-3xl ax:font-semibold ax:leading-8.5 ax:tracking-tight ax:text-foreground-strong;
+}
+
+/* ── Heading ────────────────────────────────────────────────────────────────
+ * Page titles and document / section hierarchy.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+@utility t-h1 {
+  @apply ax:text-2xl ax:font-semibold ax:leading-8 ax:tracking-tight ax:text-foreground-strong;
+}
+
+@utility t-h2 {
+  @apply ax:text-xl ax:font-semibold ax:leading-7 ax:tracking-tight ax:text-foreground-strong;
+}
+
+@utility t-h3 {
+  @apply ax:text-lg ax:font-semibold ax:leading-6 ax:tracking-tight ax:text-foreground-strong;
+}
+
+@utility t-h4 {
+  @apply ax:text-base ax:font-semibold ax:leading-5 ax:text-foreground-strong;
+}
+
+@utility t-h5 {
+  @apply ax:text-sm ax:font-semibold ax:leading-normal ax:text-foreground-strong;
+}
+
+@utility t-h6 {
+  @apply ax:text-xs ax:font-semibold ax:leading-normal ax:text-foreground-strong;
+}
+
+/* ── Body ───────────────────────────────────────────────────────────────────
+ * Readable prose. Set max-width separately (max-w-prose ≈ 65ch).
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+@utility t-body-2xl {
+  @apply ax:text-2xl ax:leading-8 ax:font-medium ax:tracking-tight;
+}
+
+ @utility t-body-xl {
+  @apply ax:text-xl ax:leading-7 ax:font-medium ax:tracking-tight;
+}
+
+@utility t-body-lg {
+  @apply ax:text-lg ax:leading-6.5 ax:font-medium;
+}
+
+@utility t-body-md {
+  @apply ax:text-base ax:leading-snug;
+}
+
+@utility t-body-sm {
+  @apply ax:text-sm ax:leading-snug;
+}
+
+@utility t-body-xs {
+  @apply ax:text-xs ax:leading-snug;
+}
+
+/* ── Label ──────────────────────────────────────────────────────────────────
+ * UI controls: buttons, tabs, nav items, form labels, badge text.
+ * leading-none - labels are single-line by design.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+@utility t-label-lg {
+  @apply ax:text-lg ax:font-medium ax:leading-none;
+}
+
+@utility t-label-md {
+  @apply ax:text-base ax:font-medium ax:leading-none;
+}
+
+@utility t-label-sm {
+  @apply ax:text-sm ax:font-medium ax:leading-none;
+}
+
+@utility t-label-xs {
+  @apply ax:text-xs ax:font-medium ax:leading-none ax:tracking-wide;
+}
+
+@utility t-label-2xs {
+  font-size: var(--text-3xs); /* 10px */
+  @apply ax:font-medium ax:leading-none ax:tracking-wide;
+}
+
+/* ── Caption ────────────────────────────────────────────────────────────────
+ * Auxiliary information: timestamps, photo credits, metadata footnotes.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+@utility t-caption {
+  @apply ax:text-xs ax:font-normal ax:leading-tight;
+}
+
+/* ── Overline ───────────────────────────────────────────────────────────────
+ * Eyebrow labels, category badges, section markers.
+ * Always uppercase with wide tracking.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+@utility t-overline {
+  font-size: var(--text-3xs);
+  @apply ax:font-semibold ax:leading-none ax:tracking-widest ax:uppercase;
+}
+
+/* ── Code ───────────────────────────────────────────────────────────────────
+ * Monospace content: code snippets, property IDs, API values.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+@utility t-code {
+  @apply ax:font-mono ax:text-sm ax:font-normal ax:leading-relaxed ax:tracking-tight;
+}
+
+/* ── Micro ──────────────────────────────────────────────────────────────────
+ * Sub-caption annotations: "Before / After", status micro-labels, dense
+ * data badges. 10 px. Use only when truly space-constrained.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+@utility t-micro {
+  @apply ax:text-[10px] ax:font-medium ax:leading-none ax:tracking-wide;
+}

package/src/theme/theme.css

@@ -0,0 +1,391 @@
+/*
+ * MGDA theme - theme.css
+ *
+ * MGDA brand tokens.
+ *
+ * Brand identity:
+ *   Primary    Vivid blue     hsl(208 100% 50%)  - actions, links, the brand spark
+ *   Secondary  Pale cyan      hsl(184 100% 64%)  - quiet utility surfaces
+ *   Accent     Gold           hsl(38 90% 55%)    - emphasis highlights (not brief-specified;
+ *                                                   chosen to complement primary/secondary)
+ *   Neutrals   Cool blue-gray hsl(220 20% 45%)
+ *
+ * Typography: Gilroy, self-hosted via @adres/fonts/gilroy. Weights 300-700.
+ * The consuming app must render the `gilroy` loader's `.variable` className
+ * on <html> (or an ancestor) so --font-gilroy resolves below.
+ * Radius: architectural - 4 / 6 / 8 / 12px.
+ *
+ * Layer 1 - primitives (neutrals + primary / secondary / accent / status scales)
+ * Layer 2 - semantic tokens (--background, --primary, etc.) consumed by the design system
+ *
+ * Pulled in by @adres/mgda-ui/styles; apps do not import it directly.
+ */
+
+:root {
+  /* ─── Layer 1 - primitives ──────────────────────────────────────────── */
+
+  /* Neutrals - cool blue-gray (h:220, s:20%), anchored at 500 = hsl(220 20% 45%) */
+  --neutral-50:  220 20% 97%;
+  --neutral-100: 220 20% 92%;
+  --neutral-200: 220 20% 86%;
+  --neutral-300: 220 20% 74%;
+  --neutral-400: 220 20% 60%;
+  --neutral-500: 220 20% 45%;
+  --neutral-600: 220 20% 40%;
+  --neutral-700: 220 20% 30%;
+  --neutral-800: 220 20% 20%;
+  --neutral-900: 220 20% 10%;
+  --neutral-950: 220 20% 5%;
+
+  /* Primary - vivid blue, anchored at 500 = hsl(208 100% 50%) */
+  --primary-50:  208 100% 97%;
+  --primary-100: 208 100% 92%;
+  --primary-200: 208 100% 86%;
+  --primary-300: 208 100% 74%;
+  --primary-400: 208 100% 59%;
+  --primary-500: 208 100% 50%;                   /* DEFAULT */
+  --primary-600: 208 100% 41%;
+  --primary-700: 208 100% 32%;
+  --primary-800: 208 100% 23%;
+  --primary-900: 208 100% 14%;
+  --primary-950: 208 100% 5%;
+
+  /* Secondary - pale cyan, anchored at 500 = hsl(184 100% 64%) */
+  --secondary-50:  184 100% 97%;
+  --secondary-100: 184 100% 94%;
+  --secondary-200: 184 100% 90%;
+  --secondary-300: 184 100% 84%;
+  --secondary-400: 184 100% 76%;
+  --secondary-500: 184 100% 64%;                 /* DEFAULT */
+  --secondary-600: 184 100% 50%;
+  --secondary-700: 184 100% 38%;
+  --secondary-800: 184 100% 26%;
+  --secondary-900: 184 100% 16%;
+  --secondary-950: 184 100% 10%;
+
+  /* Accent - gold, anchored at 500 = hsl(38 90% 55%). Not brief-specified;
+   * chosen to pair with the blue/cyan primary + secondary. */
+  --accent-50:  38 90% 97%;
+  --accent-100: 38 90% 89%;
+  --accent-200: 38 90% 80%;
+  --accent-300: 38 90% 72%;
+  --accent-400: 38 90% 63%;
+  --accent-500: 38 90% 55%;                      /* DEFAULT */
+  --accent-600: 38 90% 45%;
+  --accent-700: 38 90% 35%;
+  --accent-800: 38 90% 25%;
+  --accent-900: 38 90% 15%;
+  --accent-950: 38 90% 5%;
+
+  /* Status - destructive / success / warning. Unified palette, identical across
+   * all Adres brands (explicit HSL, full 50→950 scale). */
+  --destructive-50:  0 80% 97%;
+  --destructive-100: 0 80% 94%;
+  --destructive-200: 0 80% 88%;
+  --destructive-300: 0 80% 80%;
+  --destructive-400: 0 80% 75%;
+  --destructive-500: 0 80% 62%;
+  --destructive-600: 0 80% 44%;
+  --destructive-700: 0 80% 32%;
+  --destructive-800: 0 80% 18%;
+  --destructive-900: 0 80% 10%;
+  --destructive-950: 0 80% 6%;
+
+  --success-50:  158 80% 97%;
+  --success-100: 158 80% 94%;
+  --success-200: 158 80% 88%;
+  --success-300: 158 80% 80%;
+  --success-400: 158 80% 75%;
+  --success-500: 158 80% 62%;
+  --success-600: 158 80% 44%;
+  --success-700: 158 80% 32%;
+  --success-800: 158 80% 18%;
+  --success-900: 158 80% 10%;
+  --success-950: 158 80% 6%;
+
+  --warning-50:  32 92% 97%;
+  --warning-100: 32 92% 94%;
+  --warning-200: 32 92% 88%;
+  --warning-300: 32 92% 80%;
+  --warning-400: 32 92% 75%;
+  --warning-500: 32 92% 62%;
+  --warning-600: 32 92% 44%;
+  --warning-700: 32 92% 32%;
+  --warning-800: 32 92% 18%;
+  --warning-900: 38 55% 10%;
+  --warning-950: 32 92% 6%;
+
+  /* ─── Typography primitives - Gilroy, self-hosted via @adres/fonts/gilroy.
+   * --font-gilroy is supplied by the `gilroy.variable` className the
+   * consuming app renders on <html>. Storybook (Vite, can't run next/font)
+   * does not set that variable; it loads the "Gilroy" family from the
+   * Fontshare CDN in preview-head.html. The fallback inside var() uses that
+   * family name when the variable is unset. */
+  --font-family-sans:
+    var(--font-gilroy, "Gilroy"), "Gilroy", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+
+  /* ─── Brand-specific radius - architectural register ───────────────────── */
+  --radius-xs:   0.125rem; /* 2px */
+  --radius-sm:   0.25rem;  /* 4px */
+  --radius:      0.375rem; /* 6px - DEFAULT - buttons, inputs */
+  --radius-md:   0.5rem;   /* 8px - cards */
+  --radius-lg:   0.75rem;  /* 12px - modals */
+  --radius-xl:   1rem;     /* 16px */
+  --radius-full: 9999px;
+  --radius-badge: var(--radius-sm);
+  --button-radius: var(--radius);
+  --input-radius: var(--radius);
+
+  --surface-n1: var(--neutral-200);
+  --surface-0:  var(--neutral-100);
+  --surface-1:  0 0% 100%;
+  --surface-2:  0 0% 100%;
+  --surface-3:  var(--neutral-300);
+
+  /* ─── Layer 2 - semantic tokens (LIGHT theme) ───────────────────────────
+   * These are the names the design system consumes.
+   * Format: HSL channels only (no hsl() wrapper) - design-system wraps them.
+   * ───────────────────────────────────────────────────────────────────── */
+
+  --background:           var(--neutral-50);
+  --foreground:           var(--neutral-strong);
+  --foreground-strong:    var(--neutral-strongest);
+  --foreground-muted:     var(--neutral);
+
+  --card:                 var(--white);
+  --card-foreground:      var(--neutral-strong);
+
+  --popover:              var(--white);
+  --popover-foreground:   var(--neutral-strong);
+
+  --primary:              var(--primary-500);
+  --primary-foreground:   var(--primary-600);
+
+  --secondary:            var(--secondary-500);
+  --secondary-foreground: var(--secondary-strong);
+
+  --accent:               var(--accent-500);
+  --accent-foreground:    var(--accent-strong);
+
+  --muted:                var(--neutral-weakest);
+  --muted-foreground:     var(--neutral);
+
+  --selected:             var(--neutral-weaker);
+
+  --destructive:          var(--destructive-500);
+  --destructive-foreground: var(--destructive-strong);
+
+  --success:              var(--success-500);
+  --success-foreground:   var(--success-strong);
+
+  --warning:              var(--warning-500);
+  --warning-foreground:   var(--warning-strong);
+
+  --border:               var(--neutral-weaker);
+  --border-strong:        var(--neutral-weak);
+  --input:                var(--neutral-weak);
+  --ring:                 var(--primary);
+
+  /* ─── Named aliases - point at numbered steps so DS @theme inline mapping
+   * (--color-primary-weakest, --color-accent-stronger, etc.) resolves to a
+   * single edit point per palette: the numbered scale above.
+   * ─────────────────────────────────────────────────────────────────────── */
+
+  --neutral:          var(--neutral-500);
+  --neutral-muted:    var(--neutral-50);
+  --neutral-weakest: var(--neutral-100);
+  --neutral-weaker:  var(--neutral-200);
+  --neutral-weak:    var(--neutral-300);
+  --neutral-strong:     var(--neutral-700);
+  --neutral-stronger:   var(--neutral-800);
+  --neutral-strongest:  var(--neutral-900);
+
+  --primary-muted:    var(--primary-50);
+  --primary-weakest: var(--primary-100);
+  --primary-weaker:  var(--primary-200);
+  --primary-weak:    var(--primary-300);
+  --primary-strong:     var(--primary-700);
+  --primary-stronger:   var(--primary-800);
+  --primary-strongest:  var(--primary-900);
+
+  --secondary-muted:    var(--secondary-50);
+  --secondary-weakest: var(--secondary-100);
+  --secondary-weaker:  var(--secondary-200);
+  --secondary-weak:    var(--secondary-300);
+  --secondary-strong:     var(--secondary-700);
+  --secondary-stronger:   var(--secondary-800);
+  --secondary-strongest:  var(--secondary-900);
+
+  --accent-muted:    var(--accent-50);
+  --accent-weakest: var(--accent-100);
+  --accent-weaker:  var(--accent-200);
+  --accent-weak:    var(--accent-300);
+  --accent-strong:     var(--accent-700);
+  --accent-stronger:   var(--accent-800);
+  --accent-strongest:  var(--accent-900);
+
+  --destructive-muted:    var(--destructive-50);
+  --destructive-weakest: var(--destructive-100);
+  --destructive-weaker:  var(--destructive-200);
+  --destructive-weak:    var(--destructive-300);
+  --destructive-strong:     var(--destructive-700);
+  --destructive-stronger:   var(--destructive-800);
+  --destructive-strongest:  var(--destructive-900);
+
+  --success-muted:    var(--success-50);
+  --success-weakest: var(--success-100);
+  --success-weaker:  var(--success-200);
+  --success-weak:    var(--success-300);
+  --success-strong:     var(--success-700);
+  --success-stronger:   var(--success-800);
+  --success-strongest:  var(--success-900);
+
+  --warning-muted:    var(--warning-50);
+  --warning-weakest: var(--warning-100);
+  --warning-weaker:  var(--warning-200);
+  --warning-weak:    var(--warning-300);
+  --warning-strong:     var(--warning-700);
+  --warning-stronger:   var(--warning-800);
+  --warning-strongest:  var(--warning-900);
+
+  /* ─── Data visualisation palette ────────────────────────────────────────────
+   * Categorical colours for charts, graphs, and maps ONLY.
+   * Source: Tableau 10 (production-tested, perceptually balanced).
+   * Do NOT use these for UI chrome - they exist solely for data encoding.
+   * ────────────────────────────────────────────────────────────────────────── */
+  --chart-1:  211 36% 48%; /* blue        #4e79a7 */
+  --chart-2:  30  88% 56%; /* orange      #f28e2c */
+  --chart-3:  359 70% 61%; /* red         #e15759 */
+  --chart-4:  175 31% 59%; /* teal        #76b7b2 */
+  --chart-5:  113 34% 47%; /* green       #59a14f */
+  --chart-6:  47  82% 61%; /* yellow      #edc949 */
+  --chart-7:  316 25% 58%; /* purple      #af7aa1 */
+  --chart-8:  354 100% 81%; /* pink       #ff9da7 */
+  --chart-9:  22  24% 49%; /* brown       #9c755f */
+  --chart-10: 20  10% 70%; /* grey        #bab0ab */
+}
+
+/* ─── Layer 2 - semantic tokens (DARK theme) ──────────────────────────────
+ * Activated when `.dark` class is present on <html> or any ancestor.
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root.dark,
+:root[data-theme="dark"] {
+  --background:           var(--neutral-weakest);
+  --foreground:           var(--neutral-strong);
+  --foreground-strong:    var(--neutral-strongest);
+  --foreground-muted:     var(--neutral);
+
+  --card:                 var(--neutral-muted);
+  --card-foreground:      var(--neutral-strong);
+
+  --popover:              var(--neutral-muted);
+  --popover-foreground:   var(--neutral-strong);
+
+  --primary:              var(--primary-500);
+  --primary-foreground:   var(--primary);
+
+  --secondary:            var(--secondary-500);
+  --secondary-foreground: var(--secondary-strong);
+
+  --accent:               var(--accent-500);
+  --accent-foreground:    var(--accent);
+
+  --muted:                var(--neutral-weaker);
+  --muted-foreground:     var(--neutral);
+
+  --selected:             var(--neutral-weaker);
+
+  --destructive:          var(--destructive-500);
+  --destructive-foreground: var(--destructive);
+
+  --success:              var(--success-500);
+  --success-foreground:   var(--success);
+
+  --warning:              var(--warning-500);
+  --warning-foreground:   var(--warning);
+
+  --border:               var(--neutral-weaker);
+  --border-strong:        var(--neutral-weak);
+  --input:                var(--neutral-weak);
+  --ring:                 var(--primary);
+
+  --surface-n1: var(--neutral-900);
+  --surface-0:  var(--neutral-950);
+  --surface-1:  var(--neutral-900);
+  --surface-2:  var(--neutral-800);
+  --surface-3:  var(--neutral-700);
+
+  /* Strong-emphasis aliases inverted for dark surfaces - light step reads
+   * as a confident brand colour on the dark background. */
+
+  /* Data visualisation - lightened and more vivid for dark backgrounds */
+  --chart-1:  211 70% 65%;
+  --chart-2:  30  95% 63%;
+  --chart-3:  359 85% 70%;
+  --chart-4:  175 55% 65%;
+  --chart-5:  113 50% 58%;
+  --chart-6:  47  90% 68%;
+  --chart-7:  316 50% 68%;
+  --chart-8:  354 100% 85%;
+  --chart-9:  22  55% 62%;
+  --chart-10: 220 15% 72%;
+
+  /* Emphasis aliases INVERT in dark: weak side -> dark steps, strong side -> light steps. */
+  --primary-muted: var(--primary-900);
+  --primary-weakest: var(--primary-800);
+  --primary-weaker: var(--primary-700);
+  --primary-weak: var(--primary-600);
+  --primary-strong: var(--primary-300);
+  --primary-stronger: var(--primary-200);
+  --primary-strongest: var(--primary-100);
+
+  --secondary-muted: var(--secondary-950);
+  --secondary-weakest: var(--secondary-900);
+  --secondary-weaker: var(--secondary-800);
+  --secondary-weak: var(--secondary-700);
+  --secondary-strong: var(--secondary-300);
+  --secondary-stronger: var(--secondary-200);
+  --secondary-strongest: var(--secondary-100);
+
+  --accent-muted: var(--accent-900);
+  --accent-weakest: var(--accent-800);
+  --accent-weaker: var(--accent-700);
+  --accent-weak: var(--accent-600);
+  --accent-strong: var(--accent-300);
+  --accent-stronger: var(--accent-200);
+  --accent-strongest: var(--accent-100);
+
+  --neutral-muted: var(--neutral-950);
+  --neutral-weakest: var(--neutral-900);
+  --neutral-weaker: var(--neutral-800);
+  --neutral-weak: var(--neutral-700);
+  --neutral-strong: var(--neutral-300);
+  --neutral-stronger: var(--neutral-200);
+  --neutral-strongest: var(--neutral-100);
+
+  --destructive-muted: var(--destructive-900);
+  --destructive-weakest: var(--destructive-800);
+  --destructive-weaker: var(--destructive-700);
+  --destructive-weak: var(--destructive-600);
+  --destructive-strong: var(--destructive-300);
+  --destructive-stronger: var(--destructive-200);
+  --destructive-strongest: var(--destructive-100);
+
+  --success-muted: var(--success-900);
+  --success-weakest: var(--success-800);
+  --success-weaker: var(--success-700);
+  --success-weak: var(--success-600);
+  --success-strong: var(--success-300);
+  --success-stronger: var(--success-200);
+  --success-strongest: var(--success-100);
+
+  --warning-muted: var(--warning-900);
+  --warning-weakest: var(--warning-800);
+  --warning-weaker: var(--warning-700);
+  --warning-weak: var(--warning-600);
+  --warning-strong: var(--warning-300);
+  --warning-stronger: var(--warning-200);
+  --warning-strongest: var(--warning-100);
+}

package/src/theme/tokens.ts

@@ -0,0 +1,29 @@
+import type { BrandMeta, BrandTokens } from "./types"
+
+/**
+ * @adres/brand-mgda - authored brand facts
+ *
+ * Palette, type, and radius live in `theme.css`. This file is meta, shape, and voice.
+ */
+
+export const mgdaBrand = {
+  name: "MGDA",
+  description:
+    "MGDA brand tokens. Vivid blue primary, pale cyan secondary, cool blue-gray neutrals, Gilroy typography.",
+  id: "mgda",
+} as const satisfies BrandMeta
+
+export const mgdaTokens = {
+  shape: {
+    softBg: false,
+    cardBorderless: false,
+    cardElevation: "sm",
+    tabsRounded: false,
+  },
+  voice: {
+    personality: ["Clear", "Structured", "Institutional", "Trustworthy"],
+    avoid: ["Decorative", "Noisy", "Off-brand whimsy"],
+  },
+} as const satisfies BrandTokens
+
+export type MgdaTokens = typeof mgdaTokens

package/src/theme/types.ts

@@ -0,0 +1,26 @@
+/** Registry metadata for the theme. */
+export interface BrandMeta {
+  id: string
+  name: string
+  description: string
+}
+
+export type BrandCardElevation = "none" | "xs" | "sm" | "md"
+
+/** Authored JS facts CSS cannot express. Palette values live in theme.css. */
+export interface BrandTokens {
+  shape: BrandTokenShape
+  voice: BrandTokenVoice
+}
+
+export interface BrandTokenShape {
+  softBg: boolean
+  cardBorderless: boolean
+  cardElevation: BrandCardElevation
+  tabsRounded: boolean
+}
+
+export interface BrandTokenVoice {
+  personality: readonly string[]
+  avoid: readonly string[]
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.