@locusgraph/tokens 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 LocusGraph
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,34 @@
-# Temporary Holding Version
+# @locusgraph/tokens
 
-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.
+The LocusGraph theme for Tailwind CSS 4, and the same values as TypeScript for places CSS cannot reach, such as email.
+
+```bash
+pnpm add @locusgraph/tokens
+```
+
+```css
+@import "tailwindcss";
+@import "@locusgraph/tokens/theme.css";
+@import "@locusgraph/tokens/typeset.css";
+```
+
+`@locusgraph/components/theme.css` already imports both; import tokens directly only in an app that does not use the components.
+
+## What `theme.css` holds
+
+- Palette: one white (`--surface`, also `--background`), text, muted, status colors and a dark set under `.dark`.
+- Hairlines: `--border` is 13% of the text color mixed into the surface.
+- Square containers: every radius token is 0. Use `rounded-full` for pills.
+- Fonts: Inter for text, Archivo for headings and the brand, Fira Code for mono labels.
+- Base: 17px root size, tight balanced headings, `text-pretty` paragraphs.
+- Effects: `brand-grid` and `brand-grid-quiet` backgrounds, `enter-cascade`, `rises`, `shimmer`, `scroll-fade-x`, `no-scrollbar`. Motion falls back to a fade under reduced motion.
+
+`typeset.css` styles long-form content inside `.typeset`; it is vendored from shadcn/typeset.
+
+## Values
+
+```ts
+import { darkColors, fonts, hairline, lightColors, radius } from "@locusgraph/tokens";
+
+hairline(lightColors);
+```

package/dist/base.css

@@ -0,0 +1,65 @@
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    font-family: var(--font-sans);
+  }
+
+  :where(code, pre, kbd, samp) {
+    font-variant-ligatures: none;
+    font-feature-settings:
+      "liga" 0,
+      "calt" 0;
+  }
+
+  :where(h1, h2, h3) {
+    font-family: var(--font-heading);
+    letter-spacing: -0.02em;
+    text-wrap: balance;
+  }
+
+  :where(p) {
+    text-wrap: pretty;
+  }
+}
+
+html {
+  font-size: 17px;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.typeset-docs {
+  --typeset-font-body: var(--font-sans);
+  --typeset-font-heading: var(--font-heading);
+  --typeset-font-mono: var(--font-mono);
+  --typeset-size: 15px;
+  --typeset-leading: 1.75;
+  --typeset-flow: 1.25em;
+}
+
+@utility no-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+[data-rehype-pretty-code-figure] code span {
+  color: var(--shiki-light);
+}
+
+.dark [data-rehype-pretty-code-figure] code span {
+  color: var(--shiki-dark);
+}
+
+[data-rehype-pretty-code-figure] [data-highlighted-line] {
+  background: var(--ghost);
+  box-shadow: inset 2px 0 var(--line);
+}

package/dist/effects/brand.css

@@ -0,0 +1,142 @@
+:root {
+  --brand-glow: #0099ff;
+  --brand-loop: 7s;
+  --brand-grid-image:
+    radial-gradient(circle, color-mix(in oklch, var(--foreground) 7%, transparent) 1.5px, transparent 1.5px),
+    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in oklch, var(--foreground) 3%, transparent) 23px 24px),
+    repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in oklch, var(--foreground) 3%, transparent) 23px 24px);
+  --brand-grid-size: 24px 24px, 24px 24px, 24px 24px;
+}
+
+.brand-grid {
+  position: relative;
+  isolation: isolate;
+  background-color: var(--background);
+}
+
+.brand-grid::before,
+.brand-grid::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.brand-grid::before {
+  inset: 0;
+  background-image: var(--brand-grid-image);
+  background-size: var(--brand-grid-size);
+  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 18%, transparent 76%);
+  mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 18%, transparent 76%);
+}
+
+.brand-grid::after {
+  left: 50%;
+  top: 46%;
+  width: min(44rem, 92vw);
+  aspect-ratio: 1;
+  transform: translate(-50%, -50%) scale(0.98);
+  transform-origin: center;
+  background: radial-gradient(circle, color-mix(in oklch, var(--brand-glow) 16%, transparent), transparent 62%);
+  filter: blur(14px);
+  opacity: 0.55;
+  animation: brand-grid-halo var(--brand-loop) ease-in-out infinite;
+}
+
+@keyframes brand-grid-halo {
+  0%,
+  46% {
+    opacity: 0.5;
+    transform: translate(-50%, -50%) scale(0.98);
+  }
+  60% {
+    opacity: 0.86;
+    transform: translate(-50%, -50%) scale(1.03);
+  }
+  66% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1.07);
+  }
+  80% {
+    opacity: 0.72;
+    transform: translate(-50%, -50%) scale(1.02);
+  }
+  100% {
+    opacity: 0.5;
+    transform: translate(-50%, -50%) scale(0.98);
+  }
+}
+
+.brand-grid-quiet {
+  position: relative;
+  isolation: isolate;
+  background-color: var(--background);
+}
+
+.brand-grid-quiet::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 40rem;
+  z-index: -1;
+  pointer-events: none;
+  background-image: radial-gradient(circle, color-mix(in oklch, var(--foreground) 22%, transparent) 0.8px, transparent 1px);
+  background-size: 16px 16px;
+  background-position: 8px 8px;
+  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 10%, transparent 75%);
+  mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 10%, transparent 75%);
+}
+
+.brand-grid-quiet::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+  left: 50%;
+  top: min(34%, 18rem);
+  width: min(40rem, 70%);
+  aspect-ratio: 1;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(circle, color-mix(in oklch, var(--brand-glow) 9%, transparent), transparent 66%);
+  opacity: 0.4;
+}
+
+@keyframes ignite {
+  0% {
+    opacity: 0;
+    transform: scale(0.4) rotate(-10deg);
+    filter: blur(4px);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(1.08) rotate(0deg);
+    filter: blur(0) drop-shadow(0 0 16px var(--brand-glow));
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+    filter: drop-shadow(0 0 7px color-mix(in oklch, var(--brand-glow) 55%, transparent));
+  }
+}
+
+.ignites {
+  animation: ignite 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.tracked {
+  letter-spacing: 0.32em;
+  text-transform: uppercase;
+  font-size: 10px;
+  color: color-mix(in oklch, var(--foreground) 55%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ignites {
+    animation: none;
+    opacity: 1;
+  }
+  .brand-grid::after {
+    animation: none;
+    opacity: 0.6;
+  }
+}

package/dist/effects/enter.css

@@ -0,0 +1,36 @@
+@keyframes enter-rise {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+    filter: blur(2px);
+  }
+}
+
+@keyframes enter-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+.enter-cascade > * {
+  animation: enter-rise 300ms cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+
+.enter-cascade > :nth-child(2) {
+  animation-delay: 50ms;
+}
+
+.enter-cascade > :nth-child(3) {
+  animation-delay: 100ms;
+}
+
+.enter-cascade > :nth-child(n + 4) {
+  animation-delay: 150ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .enter-cascade > * {
+    animation: enter-fade 150ms ease-out both;
+    animation-delay: 0ms;
+  }
+}

package/dist/effects/keyframes.css

@@ -0,0 +1,97 @@
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@utility rises {
+  animation: rise 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  @keyframes rise {
+    from,
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+}
+
+@keyframes sweep {
+  0%,
+  100% {
+    transform: translate(-1.5px, 0);
+  }
+  50% {
+    transform: translate(1.5px, -1px);
+  }
+}
+
+@keyframes ink {
+  0% {
+    stroke-dashoffset: 22;
+  }
+  55%,
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes tip {
+  0%,
+  100% {
+    transform: rotate(-9deg);
+  }
+  50% {
+    transform: rotate(9deg);
+  }
+}
+
+@keyframes tick {
+  0%,
+  100% {
+    opacity: 0.25;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+@keyframes breathe {
+  0%,
+  100% {
+    transform: scale(0.9);
+    opacity: 0.55;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  @keyframes sweep {
+  }
+  @keyframes tip {
+  }
+  @keyframes breathe {
+  }
+  @keyframes tick {
+    0%,
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes ink {
+    0%,
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+}

package/dist/effects/scroll-fade.css

@@ -0,0 +1,76 @@
+@property --scroll-fade-b {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-fade-s {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-fade-e {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@theme inline {
+  @keyframes scroll-fade-reveal-b {
+    from {
+      --scroll-fade-b: var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)));
+    }
+    to {
+      --scroll-fade-b: 0px;
+    }
+  }
+  @keyframes scroll-fade-reveal-s {
+    from {
+      --scroll-fade-s: 0px;
+    }
+    to {
+      --scroll-fade-s: var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)));
+    }
+  }
+  @keyframes scroll-fade-reveal-e {
+    from {
+      --scroll-fade-e: var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)));
+    }
+    to {
+      --scroll-fade-e: 0px;
+    }
+  }
+}
+
+@utility scroll-fade-b {
+  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--scroll-fade-b, 0px)), transparent 100%);
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-b 1ms ease-in-out both;
+    animation-timeline: scroll(self y);
+    animation-range: calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+  }
+}
+
+@utility scroll-fade-x {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation:
+      scroll-fade-reveal-s 1ms ease-in-out both,
+      scroll-fade-reveal-e 1ms ease-in-out both;
+    animation-timeline: scroll(self inline), scroll(self inline);
+    animation-range:
+      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+  }
+}

package/dist/effects/utilities.css

@@ -0,0 +1,56 @@
+@theme inline {
+  @keyframes tw-shimmer {
+    from {
+      background-position: 100% 0;
+    }
+    to {
+      background-position: 0 0;
+    }
+  }
+}
+
+@utility shimmer {
+  --_spread: var(--shimmer-spread, calc(3ch + 40px));
+  --_base: currentColor;
+  --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha * 0.2)));
+  background-image: linear-gradient(
+    90deg,
+    var(--_base) calc(50% - var(--_spread)),
+    color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * 0.5),
+    var(--_highlight) 50%,
+    color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * 0.5),
+    var(--_base) calc(50% + var(--_spread))
+  );
+  background-repeat: no-repeat;
+  background-size: calc(200% + var(--_spread) * 2) 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
+
+  @variant dark {
+    --_highlight: var(--shimmer-color, oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4)));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}
+
+@utility scrollbar-none {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility scrollbar-thin {
+  scrollbar-width: thin;
+}
+
+@utility scrollbar-gutter-stable {
+  scrollbar-gutter: stable;
+}

package/dist/mapping.css

@@ -0,0 +1,57 @@
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-surface: var(--surface);
+  --color-line: var(--border);
+  --color-foreground: var(--foreground);
+  --color-soft: var(--muted);
+  --color-faint: var(--faint);
+  --color-btn: var(--btn);
+  --color-btn-ink: var(--btn-ink);
+  --color-ghost: var(--ghost);
+  --color-s1: var(--s1);
+  --color-s2: var(--s2);
+  --color-s3: var(--s3);
+  --color-good: var(--good);
+  --color-bad: var(--bad);
+  --color-info: var(--info);
+  --color-warn: var(--warn);
+  --color-border: var(--border);
+  --color-input: var(--border);
+  --color-ring: var(--s1);
+  --color-primary: var(--btn);
+  --color-primary-foreground: var(--btn-ink);
+  --color-secondary: var(--ghost);
+  --color-secondary-foreground: var(--foreground);
+  --color-accent: var(--ghost);
+  --color-accent-foreground: var(--foreground);
+  --color-muted: var(--ghost);
+  --color-muted-foreground: var(--muted);
+  --color-popover: var(--surface);
+  --color-popover-foreground: var(--foreground);
+  --color-card: var(--surface);
+  --color-card-foreground: var(--foreground);
+  --color-destructive: var(--bad);
+  --color-destructive-foreground: #ffffff;
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --font-sans: var(--font-inter);
+  --font-heading: var(--font-archivo);
+  --font-mono: var(--font-fira-code);
+  --font-brand: var(--font-archivo);
+  --radius-xs: 0px;
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-xl: 0px;
+  --radius-2xl: 0px;
+  --radius-3xl: 0px;
+  --radius-4xl: 0px;
+}

package/dist/palette.css

@@ -0,0 +1,66 @@
+:root {
+  --surface: #ffffff;
+  --background: var(--surface);
+  --foreground: #09090b;
+  --border: color-mix(in oklch, var(--foreground) 13%, var(--surface));
+  --muted: #71717a;
+  --faint: #a1a1aa;
+  --btn: #18181b;
+  --btn-ink: #fafafa;
+  --ghost: #f4f4f5;
+  --s1: #2a78d6;
+  --s2: #eb6834;
+  --s3: #1baf7a;
+  --s4: #eda100;
+  --s5: #e87ba4;
+  --s6: #008300;
+  --s7: #4a3aa7;
+  --s8: #e34948;
+  --good: #006300;
+  --bad: #d03b3b;
+  --info: #1f6fd1;
+  --warn: #a15c00;
+  --popover: var(--surface);
+  --popover-foreground: var(--foreground);
+  --radius: 0px;
+  --sidebar: var(--surface);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--btn);
+  --sidebar-primary-foreground: var(--btn-ink);
+  --sidebar-accent: var(--ghost);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--s1);
+  --font-inter: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-archivo: "Archivo Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-fira-code: "Fira Code Variable", ui-monospace, monospace;
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+}
+
+.dark {
+  --surface: #101011;
+  --background: var(--surface);
+  --foreground: #ededed;
+  --border: color-mix(in oklch, var(--foreground) 13%, var(--surface));
+  --muted: #a1a1aa;
+  --faint: #71717a;
+  --btn: #ededed;
+  --btn-ink: #0a0a0a;
+  --ghost: #1b1b1d;
+  --s1: #3987e5;
+  --s2: #d95926;
+  --s3: #199e70;
+  --s4: #c98500;
+  --s5: #d55181;
+  --s6: #008300;
+  --s7: #9085e9;
+  --s8: #e66767;
+  --good: #0ca30c;
+  --bad: #e66767;
+  --info: #5b9df0;
+  --warn: #e0a400;
+}

package/dist/theme.css

@@ -0,0 +1,11 @@
+@import "@fontsource-variable/inter";
+@import "@fontsource-variable/archivo";
+@import "@fontsource-variable/fira-code";
+@import "./palette.css";
+@import "./mapping.css";
+@import "./base.css";
+@import "./effects/keyframes.css";
+@import "./effects/utilities.css";
+@import "./effects/scroll-fade.css";
+@import "./effects/enter.css";
+@import "./effects/brand.css";

package/dist/typeset.css

@@ -0,0 +1 @@
+@import "./vendor/typeset.css";

package/dist/values/colors.d.ts

@@ -0,0 +1,6 @@
+export type ColorName = "surface" | "foreground" | "muted" | "faint" | "btn" | "btnInk" | "ghost" | "good" | "bad" | "info" | "warn" | "brandGlow";
+export type Palette = Record<ColorName, string>;
+export declare const lightColors: Palette;
+export declare const darkColors: Palette;
+export declare const hairlineMix = 0.13;
+export declare function hairline(palette: Palette): string;

package/dist/values/colors.js

@@ -0,0 +1,37 @@
+export const lightColors = {
+    surface: "#ffffff",
+    foreground: "#09090b",
+    muted: "#71717a",
+    faint: "#a1a1aa",
+    btn: "#18181b",
+    btnInk: "#fafafa",
+    ghost: "#f4f4f5",
+    good: "#006300",
+    bad: "#d03b3b",
+    info: "#1f6fd1",
+    warn: "#a15c00",
+    brandGlow: "#0099ff",
+};
+export const darkColors = {
+    surface: "#101011",
+    foreground: "#ededed",
+    muted: "#a1a1aa",
+    faint: "#71717a",
+    btn: "#ededed",
+    btnInk: "#0a0a0a",
+    ghost: "#1b1b1d",
+    good: "#0ca30c",
+    bad: "#e66767",
+    info: "#5b9df0",
+    warn: "#e0a400",
+    brandGlow: "#0099ff",
+};
+export const hairlineMix = 0.13;
+export function hairline(palette) {
+    return mixHex(palette.foreground, palette.surface, hairlineMix);
+}
+function mixHex(top, base, amount) {
+    const channel = (hex, index) => Number.parseInt(hex.slice(1 + index * 2, 3 + index * 2), 16);
+    const mixed = [0, 1, 2].map((index) => Math.round(channel(top, index) * amount + channel(base, index) * (1 - amount)));
+    return `#${mixed.map((value) => value.toString(16).padStart(2, "0")).join("")}`;
+}

package/dist/values/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./colors";
+export * from "./type";

package/dist/values/index.js

@@ -0,0 +1,2 @@
+export * from "./colors";
+export * from "./type";

package/dist/values/type.d.ts

@@ -0,0 +1,13 @@
+export declare const fonts: {
+    readonly sans: '"Inter Variable", ui-sans-serif, system-ui, sans-serif';
+    readonly heading: '"Archivo Variable", ui-sans-serif, system-ui, sans-serif';
+    readonly mono: '"Fira Code Variable", ui-monospace, monospace';
+    readonly emailSafeSans: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif";
+    readonly emailSafeMono: "'Fira Code', SFMono-Regular, Menlo, Consolas, monospace";
+};
+export declare const radius: {
+    readonly container: 0;
+    readonly pill: 9999;
+};
+export declare const headingTracking = "-0.02em";
+export declare const labelSize = "11.5px";

package/dist/values/type.js

@@ -0,0 +1,10 @@
+export const fonts = {
+    sans: '"Inter Variable", ui-sans-serif, system-ui, sans-serif',
+    heading: '"Archivo Variable", ui-sans-serif, system-ui, sans-serif',
+    mono: '"Fira Code Variable", ui-monospace, monospace',
+    emailSafeSans: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif",
+    emailSafeMono: "'Fira Code', SFMono-Regular, Menlo, Consolas, monospace",
+};
+export const radius = { container: 0, pill: 9999 };
+export const headingTracking = "-0.02em";
+export const labelSize = "11.5px";

package/dist/vendor/typeset.css

@@ -0,0 +1,490 @@
+/*
+ * shadcn/typeset
+ * https://ui.shadcn.com/docs/typeset.
+ */
+
+@layer components {
+  .typeset {
+    --typeset-font-body: inherit;
+    --typeset-font-heading: var(--font-heading);
+    --typeset-font-mono: var(--font-mono);
+    --typeset-size: 1em;
+    --typeset-leading: 1.75;
+    --typeset-flow: 1.25em;
+  }
+}
+
+@layer components {
+  .typeset {
+    font-family: var(--typeset-font-body);
+    font-size: calc(var(--typeset-size) * 1.125);
+    line-height: var(--typeset-leading);
+    color: var(--color-foreground, currentColor);
+    overflow-wrap: break-word;
+    margin-trim: block-start;
+
+    @media (min-width: 48rem), print {
+      font-size: var(--typeset-size);
+    }
+
+    --typeset-muted: var(
+      --color-muted-foreground,
+      color-mix(in oklab, currentColor 60%, transparent)
+    );
+    --typeset-rule: var(
+      --color-border,
+      color-mix(in oklab, currentColor 20%, transparent)
+    );
+  }
+
+  .typeset
+    *:not(
+      :where(
+        .not-typeset,
+        [data-not-typeset],
+        .not-typeset *,
+        [data-not-typeset] *
+      )
+    ) {
+    /* Paragraphs. */
+    &:where(p) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+
+    /* Headings. */
+    &:where(h1, h2, h3, h4, h5, h6) {
+      color: var(--color-foreground, currentColor);
+      font-family: var(--typeset-font-heading);
+      font-weight: 600;
+      margin-block-end: 0;
+    }
+    &:where(h1) {
+      font-size: 1.75em;
+      line-height: 1.3;
+      margin-block-start: var(--typeset-flow);
+    }
+    &:where(h2) {
+      font-size: 1.25em;
+      line-height: 1.4;
+      margin-block-start: calc(var(--typeset-flow) * 1.4);
+    }
+    &:where(h3) {
+      font-size: 1.125em;
+      line-height: 1.45;
+      margin-block-start: var(--typeset-flow);
+    }
+    &:where(h4) {
+      font-size: 1em;
+      line-height: 1.5;
+      margin-block-start: var(--typeset-flow);
+    }
+    &:where(h5) {
+      font-size: 0.875em;
+      line-height: 1.5;
+      font-weight: 500;
+      color: var(--typeset-muted);
+      margin-block-start: calc(var(--typeset-flow) / 0.875);
+    }
+    &:where(h6) {
+      font-size: 0.8125em;
+      line-height: 1.5;
+      font-weight: 500;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--typeset-muted);
+      margin-block-start: calc(var(--typeset-flow) / 0.8125);
+    }
+    /* Anchors. */
+    &:where([id]) {
+      scroll-margin-block-start: var(--typeset-flow);
+    }
+
+    /* Headings own the space below them. */
+    &:where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
+      margin-block-start: 1em;
+    }
+    &:where(:is(h1, h2, h3, h4) :is(code)) {
+      font-size: 0.9em;
+    }
+
+    /* Links. */
+    &:where(a) {
+      color: inherit;
+      font-weight: 500;
+      text-decoration-line: underline;
+      text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
+    }
+    &:where(a:hover) {
+      text-decoration-color: currentColor;
+    }
+    &:where(a:focus-visible) {
+      outline: 2px solid var(--color-ring, currentColor);
+      outline-offset: 2px;
+      border-radius: 0.125em;
+    }
+    &:where(:is(h1, h2, h3, h4, h5, h6) :is(a)) {
+      font-weight: inherit;
+    }
+
+    /* Inline semantics. */
+    &:where(strong, b) {
+      font-weight: 600;
+    }
+    &:where(:is(h1, h2, h3, h4) :is(strong, b)) {
+      font-weight: 600;
+    }
+    &:where(mark) {
+      background-color: color-mix(
+        in oklab,
+        oklch(0.86 0.17 95) 40%,
+        transparent
+      );
+      color: inherit;
+      padding: 0.05em 0.15em;
+      border-radius: 0.2em;
+    }
+    &:where(abbr[title]) {
+      text-decoration-line: underline;
+      text-decoration-style: dotted;
+      text-underline-offset: 0.2em;
+      cursor: help;
+    }
+    &:where(del, s) {
+      color: var(--typeset-muted);
+      text-decoration-line: line-through;
+    }
+    &:where(sup, sub) {
+      font-size: 0.75em;
+      line-height: 0;
+      position: relative;
+      vertical-align: baseline;
+    }
+    &:where(sup) {
+      top: -0.5em;
+    }
+    &:where(sub) {
+      bottom: -0.25em;
+    }
+    &:where(sup a) {
+      text-decoration-line: none;
+      font-weight: 500;
+    }
+
+    /* Lists. */
+    &:where(ul) {
+      list-style-type: disc;
+    }
+    &:where(ol) {
+      list-style-type: decimal;
+    }
+    &:where(ul ul) {
+      list-style-type: circle;
+    }
+    &:where(ul ul ul) {
+      list-style-type: square;
+    }
+    &:where(ol[type="a" i]) {
+      list-style-type: lower-alpha;
+    }
+    &:where(ol[type="i" i]) {
+      list-style-type: lower-roman;
+    }
+    &:where(ol[type="A" s]) {
+      list-style-type: upper-alpha;
+    }
+    &:where(ol[type="I" s]) {
+      list-style-type: upper-roman;
+    }
+    &:where(ul, ol) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+      padding-inline-start: 1.5em;
+    }
+    &:where(li) {
+      margin-block-start: 0.5em;
+      padding-inline-start: 0.4em;
+    }
+    &:where(li > p, li > ul, li > ol) {
+      margin-block-start: 0.5em;
+    }
+    &:where(ul > li)::marker {
+      color: var(--typeset-muted);
+    }
+    &:where(ol > li)::marker {
+      color: var(--typeset-muted);
+    }
+
+    /* GFM task lists. */
+    &:where(ul.contains-task-list) {
+      list-style-type: none;
+      padding-inline-start: 0.25em;
+    }
+    &:where(li.task-list-item > input[type="checkbox"]) {
+      margin-inline-end: 0.5em;
+      vertical-align: -0.1em;
+      accent-color: var(--color-primary, currentColor);
+    }
+
+    /* Disclosures. */
+    &:where(details) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+    &:where(summary) {
+      cursor: pointer;
+      font-weight: 500;
+    }
+    &:where(summary)::marker {
+      color: var(--typeset-muted);
+    }
+
+    /* Keyboard keys. */
+    &:where(kbd) {
+      font-family: inherit;
+      font-size: 0.85em;
+      font-weight: 500;
+      border: 1px solid var(--typeset-rule);
+      border-block-end-width: 2px;
+      border-radius: min(calc(var(--radius, 0.5em) * 0.6), 0.35em);
+      padding: 0.0625em 0.35em;
+    }
+
+    /* Definition lists. */
+    &:where(dl) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+    &:where(dt) {
+      font-weight: 500;
+      margin-block-start: 1em;
+    }
+    &:where(dt + dt) {
+      margin-block-start: 0.25em;
+    }
+    &:where(dd) {
+      margin-block-start: 0.25em;
+      margin-inline-start: 0;
+      padding-inline-start: 1em;
+      color: var(--typeset-muted);
+    }
+
+    /* Inline code. */
+    &:where(:not(pre) > code) {
+      background-color: var(
+        --color-muted,
+        color-mix(in oklab, currentColor 8%, transparent)
+      );
+      font-family: var(--typeset-font-mono);
+      font-size: 0.85em;
+      border-radius: min(calc(var(--radius, 0.5em) * 0.6), 0.35em);
+      padding: 0.125em 0.3em;
+    }
+
+    /* Code blocks. */
+    &:where(pre) {
+      background-color: var(
+        --color-muted,
+        color-mix(in oklab, currentColor 8%, transparent)
+      );
+      font-family: var(--typeset-font-mono);
+      font-size: 0.875em;
+      line-height: 1.5;
+      tab-size: 2;
+      direction: ltr;
+      border-radius: var(--radius, 0.5em);
+      padding: 0.75em 1em;
+      overflow-x: auto;
+      margin-block-start: calc(var(--typeset-flow) / 0.875);
+      margin-block-end: 0;
+    }
+    &:where(pre code) {
+      background-color: transparent;
+      font-family: inherit;
+      font-size: inherit;
+      padding: 0;
+      border-radius: 0;
+    }
+
+    /* Blockquote. */
+    &:where(blockquote) {
+      border-inline-start: 2px solid var(--typeset-rule);
+      padding-inline-start: 1em;
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+      margin-inline: 0;
+    }
+
+    /* Dividers. */
+    &:where(hr) {
+      border: 0;
+      border-block-start: 1px solid var(--typeset-rule);
+      margin-block-start: calc(var(--typeset-flow) * 2.4);
+      margin-block-end: 0;
+    }
+    &:where(hr + h1, hr + h2, hr + h3, hr + h4) {
+      margin-block-start: var(--typeset-flow);
+    }
+
+    /* GFM footnotes. */
+    &:where(.footnotes, [data-footnotes]) {
+      margin-block-start: calc(var(--typeset-flow) * 2);
+      border-block-start: 1px solid var(--typeset-rule);
+      padding-block-start: var(--typeset-flow);
+      font-size: 0.875em;
+      color: var(--typeset-muted);
+    }
+
+    /* Math. */
+    &:where(math[display="block"]) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      padding-block: 0.25em;
+    }
+
+    /* Media. */
+    &:where(img, video) {
+      border-radius: var(--radius, 0.5em);
+      max-width: 100%;
+      height: auto;
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+    &:where(p img) {
+      margin-block-start: 0;
+    }
+    &:where(figure) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+      margin-inline: 0;
+    }
+    &:where(figcaption, caption) {
+      color: var(--typeset-muted);
+      font-size: 0.875em;
+      text-align: center;
+      margin-block-start: calc(0.75em / 0.875);
+    }
+    &:where(caption) {
+      caption-side: bottom;
+    }
+
+    /* Tables. Separators sit on cells, not tr:last-child: append-safe.
+       Bare tables stay real tables (keep their semantics) and wrap to fit. */
+    &:where(table) {
+      max-width: 100%;
+      font-size: 1em;
+      line-height: 1.5;
+      font-variant-numeric: tabular-nums;
+      border-collapse: separate;
+      border-spacing: 0;
+      border-block-end: 1px solid var(--typeset-rule);
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+
+    /* Horizontal scroll for any wide block. Wrap it and the wrapper owns the
+       flow margin. Tables shrink to fit, so widen the table to make it scroll
+       instead of compress. */
+    &:where(.typeset-scroll) {
+      overflow-x: auto;
+      margin-block-start: var(--typeset-flow);
+    }
+    &:where(.typeset-scroll > *) {
+      margin-block-start: 0;
+    }
+    &:where(.typeset-scroll table) {
+      width: max-content;
+      max-width: none;
+    }
+    &:where(thead th) {
+      font-weight: 500;
+      text-align: start;
+      white-space: nowrap;
+      padding: 0.65em 1em;
+    }
+    &:where(:is(tbody, tfoot) :is(td, th)) {
+      padding: 0.75em 1em;
+      text-align: start;
+      vertical-align: top;
+      border-block-start: 1px solid var(--typeset-rule);
+    }
+    &:where(tbody th, tfoot th) {
+      font-weight: 500;
+    }
+    &:where(th:first-child, td:first-child) {
+      padding-inline-start: 0;
+    }
+    &:where(th[align="center"], td[align="center"]) {
+      text-align: center;
+    }
+    &:where(th[align="right"], td[align="right"]) {
+      text-align: end;
+    }
+
+    /* Blocks inside list items keep the list's tighter rhythm. */
+    &:where(li > blockquote, li > table, li > figure) {
+      margin-block-start: 0.5em;
+    }
+    &:where(li > pre) {
+      margin-block-start: calc(0.5em / 0.875);
+    }
+
+    @media print {
+      &:where(pre, table, blockquote, figure) {
+        break-inside: avoid;
+      }
+      &:where(h1, h2, h3, h4) {
+        break-after: avoid;
+      }
+    }
+
+    /* Forced colors strips the code background, so give it a border. */
+    @media (forced-colors: active) {
+      &:where(:not(pre) > code) {
+        border: 1px solid;
+      }
+    }
+  }
+
+  /* First child adds no space above. Last so it wins ties. */
+  .typeset
+    > :where(:first-child):not(
+      :where(
+        .not-typeset,
+        [data-not-typeset],
+        .not-typeset *,
+        [data-not-typeset] *
+      )
+    ),
+  .typeset
+    > :where(:first-child)
+    > :where(:first-child):not(
+      :where(
+        .not-typeset,
+        [data-not-typeset],
+        .not-typeset *,
+        [data-not-typeset] *
+      )
+    ),
+  .typeset
+    :where(
+      li > :first-child,
+      blockquote > :first-child,
+      td > :first-child,
+      th > :first-child,
+      dd > :first-child,
+      figure > :first-child,
+      figure > picture > img
+    ):not(
+      :where(
+        .not-typeset,
+        [data-not-typeset],
+        .not-typeset *,
+        [data-not-typeset] *
+      )
+    ) {
+    margin-block-start: 0;
+  }
+}

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@locusgraph/tokens",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "LocusGraph design tokens: theme CSS for Tailwind v4, typography, brand effects and motion, plus the color and type values for places CSS cannot reach.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/locusgraph/design.git",
+    "directory": "packages/tokens"
+  },
+  "homepage": "https://design.locusgraph.com",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/values/index.d.ts",
+      "default": "./dist/values/index.js"
+    },
+    "./theme.css": "./dist/theme.css",
+    "./typeset.css": "./dist/typeset.css"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@fontsource-variable/archivo": "^5.3.0",
+    "@fontsource-variable/fira-code": "^5.3.0",
+    "@fontsource-variable/inter": "^5.3.0"
+  },
+  "devDependencies": {
+    "@locusgraph/config": "0.1.0",
+    "@types/node": "^22.0.0",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.3"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && rsync -a --include='*/' --include='*.css' --exclude='*' src/ dist/",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
+  }
 }