@locusgraph/tokens 0.1.1 → 0.3.0

package/README.md

@@ -14,17 +14,58 @@ pnpm add @locusgraph/tokens
 
 `@locusgraph/components/theme.css` already imports both; import tokens directly only in an app that does not use the components.
 
+Everything the theme defines is prefixed with `locus`: variables are `--locus-*` (light on `:root`, dark on `.dark`) and our classes, utilities and keyframes are `locus-*`. The Tailwind keys keep their names (`bg-surface`, `text-soft`, `bg-primary`, `text-muted-foreground`), now pointing at `--locus-*`. An app that also uses shadcn components and needs the shadcn variable names (`--background`, `--primary`, `--muted-foreground`, `--radius`, …) adds the optional aliases:
+
+```css
+@import "@locusgraph/tokens/shadcn.css";
+```
+
 ## 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.
+- Palette: one white (`--locus-surface`, also `--locus-background`), text, muted, status colors and a dark set under `.dark`.
+- Hairlines: `--locus-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.
+- Effects: `locus-brand-grid` and `locus-brand-grid-quiet` backgrounds, `locus-enter-cascade`, `locus-rises`, `locus-shimmer`, `locus-scroll-fade-b`, `locus-scroll-fade-x`, `locus-no-scrollbar`, `locus-scrollbar-none`, `locus-scrollbar-thin`, `locus-scrollbar-gutter-stable`, the `locus-eyebrow` label, `locus-ignites` and `locus-tracked`. Motion falls back to a fade under reduced motion.
 
 `typeset.css` styles long-form content inside `.typeset`; it is vendored from shadcn/typeset.
 
+## Migrating from 0.2
+
+Every CSS variable, class, utility and keyframe the theme defines now starts with `locus`, so it
+cannot clash with an app's own names (a shadcn app's `--muted` is a background, ours was a text
+color). Tailwind classes such as `bg-surface`, `text-soft`, `text-good`, `bg-btn`, `shadow-overlay`,
+`bg-primary` and `text-muted-foreground` are unchanged.
+
+| 0.2 | 0.3 |
+|---|---|
+| `--background`, `--surface`, `--foreground`, `--border`, `--muted`, `--faint` | `--locus-background`, `--locus-surface`, `--locus-foreground`, `--locus-border`, `--locus-muted`, `--locus-faint` |
+| `--btn`, `--btn-ink`, `--ghost`, `--popover`, `--popover-foreground`, `--input` | `--locus-btn`, `--locus-btn-ink`, `--locus-ghost`, `--locus-popover`, `--locus-popover-foreground`, `--locus-input` |
+| `--s1` … `--s8`, `--good`, `--bad`, `--info`, `--warn` | `--locus-s1` … `--locus-s8`, `--locus-good`, `--locus-bad`, `--locus-info`, `--locus-warn` |
+| `--skeleton`, `--scrim`, `--overlay-shadow`, `--radius` | `--locus-skeleton`, `--locus-scrim`, `--locus-overlay-shadow`, `--locus-radius` |
+| `--sidebar`, `--sidebar-*`, `--chart-1` … `--chart-5` | `--locus-sidebar`, `--locus-sidebar-*`, `--locus-chart-1` … `--locus-chart-5` |
+| `--font-inter`, `--font-archivo`, `--font-fira-code` | `--locus-font-inter`, `--locus-font-archivo`, `--locus-font-fira-code` |
+| `--brand-glow`, `--brand-loop`, `--brand-grid-image`, `--brand-grid-size` | `--locus-brand-glow`, `--locus-brand-loop`, `--locus-brand-grid-image`, `--locus-brand-grid-size` |
+| `--shimmer-spread`, `--shimmer-color`, `--shimmer-duration` | `--locus-shimmer-spread`, `--locus-shimmer-color`, `--locus-shimmer-duration` |
+| `--scroll-fade-size`, `--scroll-fade-reveal` | `--locus-scroll-fade-size`, `--locus-scroll-fade-reveal` |
+| `--docs-header-height` (Docs shell) | `--locus-docs-header-height` |
+| `eyebrow`, `rises`, `shimmer` | `locus-eyebrow`, `locus-rises`, `locus-shimmer` |
+| `no-scrollbar`, `scrollbar-none`, `scrollbar-thin`, `scrollbar-gutter-stable` | `locus-no-scrollbar`, `locus-scrollbar-none`, `locus-scrollbar-thin`, `locus-scrollbar-gutter-stable` |
+| `scroll-fade-b`, `scroll-fade-x` | `locus-scroll-fade-b`, `locus-scroll-fade-x` |
+| `.brand-grid`, `.brand-grid-quiet`, `.ignites`, `.tracked` | `.locus-brand-grid`, `.locus-brand-grid-quiet`, `.locus-ignites`, `.locus-tracked` |
+| `.enter-cascade`, `.typeset-docs` | `.locus-enter-cascade`, `.locus-typeset-docs` |
+| keyframes `rise`, `sweep`, `ink`, `tip`, `tick`, `breathe`, `ignite` | `locus-rise`, `locus-sweep`, `locus-ink`, `locus-tip`, `locus-tick`, `locus-breathe`, `locus-ignite` |
+| keyframes `tw-shimmer`, `enter-rise`, `enter-fade`, `brand-grid-halo`, `scroll-fade-reveal-*` | `locus-shimmer`, `locus-enter-rise`, `locus-enter-fade`, `locus-brand-grid-halo`, `locus-scroll-fade-reveal-*` |
+
+The theme no longer defines the shadcn names (`--background`, `--primary`, `--muted-foreground`,
+`--ring`, `--radius` and the rest). An app that also uses its own shadcn components, or reads those
+variables, imports the aliases after the theme:
+
+```css
+@import "@locusgraph/components/shadcn.css";
+```
+
 ## Values
 
 ```ts

package/dist/base.css

@@ -30,11 +30,11 @@ html {
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
+  background: var(--locus-background);
+  color: var(--locus-foreground);
 }
 
-.typeset-docs {
+.locus-typeset-docs {
   --typeset-font-body: var(--font-sans);
   --typeset-font-heading: var(--font-heading);
   --typeset-font-mono: var(--font-mono);
@@ -43,7 +43,7 @@ body {
   --typeset-flow: 1.25em;
 }
 
-@utility no-scrollbar {
+@utility locus-no-scrollbar {
   scrollbar-width: none;
   -ms-overflow-style: none;
   &::-webkit-scrollbar {
@@ -60,6 +60,6 @@ body {
 }
 
 [data-rehype-pretty-code-figure] [data-highlighted-line] {
-  background: var(--ghost);
-  box-shadow: inset 2px 0 var(--line);
+  background: var(--locus-ghost);
+  box-shadow: inset 2px 0 var(--locus-border);
 }

package/dist/effects/brand.css

@@ -1,49 +1,49 @@
 :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;
+  --locus-brand-glow: #0099ff;
+  --locus-brand-loop: 7s;
+  --locus-brand-grid-image:
+    radial-gradient(circle, color-mix(in oklch, var(--locus-foreground) 7%, transparent) 1.5px, transparent 1.5px),
+    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in oklch, var(--locus-foreground) 3%, transparent) 23px 24px),
+    repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in oklch, var(--locus-foreground) 3%, transparent) 23px 24px);
+  --locus-brand-grid-size: 24px 24px, 24px 24px, 24px 24px;
 }
 
-.brand-grid {
+.locus-brand-grid {
   position: relative;
   isolation: isolate;
-  background-color: var(--background);
+  background-color: var(--locus-background);
 }
 
-.brand-grid::before,
-.brand-grid::after {
+.locus-brand-grid::before,
+.locus-brand-grid::after {
   content: "";
   position: absolute;
   z-index: -1;
   pointer-events: none;
 }
 
-.brand-grid::before {
+.locus-brand-grid::before {
   inset: 0;
-  background-image: var(--brand-grid-image);
-  background-size: var(--brand-grid-size);
+  background-image: var(--locus-brand-grid-image);
+  background-size: var(--locus-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 {
+.locus-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%);
+  background: radial-gradient(circle, color-mix(in oklch, var(--locus-brand-glow) 16%, transparent), transparent 62%);
   filter: blur(14px);
   opacity: 0.55;
-  animation: brand-grid-halo var(--brand-loop) ease-in-out infinite;
+  animation: locus-brand-grid-halo var(--locus-brand-loop) ease-in-out infinite;
 }
 
-@keyframes brand-grid-halo {
+@keyframes locus-brand-grid-halo {
   0%,
   46% {
     opacity: 0.5;
@@ -67,27 +67,27 @@
   }
 }
 
-.brand-grid-quiet {
+.locus-brand-grid-quiet {
   position: relative;
   isolation: isolate;
-  background-color: var(--background);
+  background-color: var(--locus-background);
 }
 
-.brand-grid-quiet::before {
+.locus-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-image: radial-gradient(circle, color-mix(in oklch, var(--locus-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 {
+.locus-brand-grid-quiet::after {
   content: "";
   position: absolute;
   z-index: -1;
@@ -97,11 +97,11 @@
   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%);
+  background: radial-gradient(circle, color-mix(in oklch, var(--locus-brand-glow) 9%, transparent), transparent 66%);
   opacity: 0.4;
 }
 
-@keyframes ignite {
+@keyframes locus-ignite {
   0% {
     opacity: 0;
     transform: scale(0.4) rotate(-10deg);
@@ -110,32 +110,32 @@
   60% {
     opacity: 1;
     transform: scale(1.08) rotate(0deg);
-    filter: blur(0) drop-shadow(0 0 16px var(--brand-glow));
+    filter: blur(0) drop-shadow(0 0 16px var(--locus-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));
+    filter: drop-shadow(0 0 7px color-mix(in oklch, var(--locus-brand-glow) 55%, transparent));
   }
 }
 
-.ignites {
-  animation: ignite 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
+.locus-ignites {
+  animation: locus-ignite 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
-.tracked {
+.locus-tracked {
   letter-spacing: 0.32em;
   text-transform: uppercase;
   font-size: 10px;
-  color: color-mix(in oklch, var(--foreground) 55%, transparent);
+  color: color-mix(in oklch, var(--locus-foreground) 55%, transparent);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .ignites {
+  .locus-ignites {
     animation: none;
     opacity: 1;
   }
-  .brand-grid::after {
+  .locus-brand-grid::after {
     animation: none;
     opacity: 0.6;
   }

package/dist/effects/enter.css

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

package/dist/effects/keyframes.css

@@ -1,4 +1,4 @@
-@keyframes rise {
+@keyframes locus-rise {
   from {
     opacity: 0;
     transform: translateY(6px);
@@ -9,12 +9,12 @@
   }
 }
 
-@utility rises {
-  animation: rise 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
+@utility locus-rises {
+  animation: locus-rise 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  @keyframes rise {
+  @keyframes locus-rise {
     from,
     to {
       opacity: 1;
@@ -23,7 +23,7 @@
   }
 }
 
-@keyframes sweep {
+@keyframes locus-sweep {
   0%,
   100% {
     transform: translate(-1.5px, 0);
@@ -33,7 +33,7 @@
   }
 }
 
-@keyframes ink {
+@keyframes locus-ink {
   0% {
     stroke-dashoffset: 22;
   }
@@ -43,7 +43,7 @@
   }
 }
 
-@keyframes tip {
+@keyframes locus-tip {
   0%,
   100% {
     transform: rotate(-9deg);
@@ -53,7 +53,7 @@
   }
 }
 
-@keyframes tick {
+@keyframes locus-tick {
   0%,
   100% {
     opacity: 0.25;
@@ -63,7 +63,7 @@
   }
 }
 
-@keyframes breathe {
+@keyframes locus-breathe {
   0%,
   100% {
     transform: scale(0.9);
@@ -76,19 +76,19 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  @keyframes sweep {
+  @keyframes locus-sweep {
   }
-  @keyframes tip {
+  @keyframes locus-tip {
   }
-  @keyframes breathe {
+  @keyframes locus-breathe {
   }
-  @keyframes tick {
+  @keyframes locus-tick {
     0%,
     100% {
       opacity: 1;
     }
   }
-  @keyframes ink {
+  @keyframes locus-ink {
     0%,
     100% {
       stroke-dashoffset: 0;

package/dist/effects/scroll-fade.css

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

package/dist/effects/utilities.css

@@ -1,5 +1,5 @@
 @theme inline {
-  @keyframes tw-shimmer {
+  @keyframes locus-shimmer {
     from {
       background-position: 100% 0;
     }
@@ -9,10 +9,10 @@
   }
 }
 
-@utility shimmer {
-  --_spread: var(--shimmer-spread, calc(3ch + 40px));
+@utility locus-shimmer {
+  --_spread: var(--locus-shimmer-spread, calc(3ch + 40px));
   --_base: currentColor;
-  --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha * 0.2)));
+  --_highlight: var(--locus-shimmer-color, oklch(from currentColor l c h / calc(alpha * 0.2)));
   background-image: linear-gradient(
     90deg,
     var(--_base) calc(50% - var(--_spread)),
@@ -26,10 +26,10 @@
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
+  animation: locus-shimmer var(--locus-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)));
+    --_highlight: var(--locus-shimmer-color, oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4)));
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -39,7 +39,7 @@
   }
 }
 
-@utility scrollbar-none {
+@utility locus-scrollbar-none {
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
@@ -47,10 +47,19 @@
   }
 }
 
-@utility scrollbar-thin {
+@utility locus-scrollbar-thin {
   scrollbar-width: thin;
 }
 
-@utility scrollbar-gutter-stable {
+@utility locus-scrollbar-gutter-stable {
   scrollbar-gutter: stable;
 }
+
+@utility locus-eyebrow {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--locus-muted);
+}

package/dist/theme.css

@@ -1,8 +1,8 @@
 @import "@fontsource-variable/inter";
 @import "@fontsource-variable/archivo";
 @import "@fontsource-variable/fira-code";
-@import "./palette.css";
-@import "./mapping.css";
+@import "./variables/palette.css";
+@import "./variables/mapping.css";
 @import "./base.css";
 @import "./effects/keyframes.css";
 @import "./effects/utilities.css";

package/dist/typeset.css

@@ -1 +1,5 @@
 @import "./vendor/typeset.css";
+
+.typeset {
+  --radius: var(--locus-radius);
+}

package/dist/values/colors.d.ts

@@ -1,6 +1,6 @@
-export type ColorName = "surface" | "foreground" | "muted" | "faint" | "btn" | "btnInk" | "ghost" | "good" | "bad" | "info" | "warn" | "brandGlow";
+export type ColorName = "surface" | "background" | "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 const hairlineMix = 0.09;
 export declare function hairline(palette: Palette): string;

package/dist/values/colors.js

@@ -1,5 +1,6 @@
 export const lightColors = {
     surface: "#ffffff",
+    background: "#fafafa",
     foreground: "#09090b",
     muted: "#71717a",
     faint: "#a1a1aa",
@@ -13,7 +14,8 @@ export const lightColors = {
     brandGlow: "#0099ff",
 };
 export const darkColors = {
-    surface: "#101011",
+    surface: "#111113",
+    background: "#0c0c0d",
     foreground: "#ededed",
     muted: "#a1a1aa",
     faint: "#71717a",
@@ -26,7 +28,7 @@ export const darkColors = {
     warn: "#e0a400",
     brandGlow: "#0099ff",
 };
-export const hairlineMix = 0.13;
+export const hairlineMix = 0.09;
 export function hairline(palette) {
     return mixHex(palette.foreground, palette.surface, hairlineMix);
 }

package/dist/variables/mapping.css

@@ -0,0 +1,60 @@
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--locus-background);
+  --color-surface: var(--locus-surface);
+  --color-line: var(--locus-border);
+  --color-foreground: var(--locus-foreground);
+  --color-soft: var(--locus-muted);
+  --color-faint: var(--locus-faint);
+  --color-btn: var(--locus-btn);
+  --color-btn-ink: var(--locus-btn-ink);
+  --color-ghost: var(--locus-ghost);
+  --color-s1: var(--locus-s1);
+  --color-s2: var(--locus-s2);
+  --color-s3: var(--locus-s3);
+  --color-good: var(--locus-good);
+  --color-bad: var(--locus-bad);
+  --color-info: var(--locus-info);
+  --color-warn: var(--locus-warn);
+  --color-border: var(--locus-border);
+  --color-input: var(--locus-input);
+  --color-skeleton: var(--locus-skeleton);
+  --color-scrim: var(--locus-scrim);
+  --color-ring: var(--locus-s1);
+  --color-primary: var(--locus-btn);
+  --color-primary-foreground: var(--locus-btn-ink);
+  --color-secondary: var(--locus-ghost);
+  --color-secondary-foreground: var(--locus-foreground);
+  --color-accent: var(--locus-ghost);
+  --color-accent-foreground: var(--locus-foreground);
+  --color-muted: var(--locus-ghost);
+  --color-muted-foreground: var(--locus-muted);
+  --color-popover: var(--locus-popover);
+  --color-popover-foreground: var(--locus-foreground);
+  --color-card: var(--locus-surface);
+  --color-card-foreground: var(--locus-foreground);
+  --color-destructive: var(--locus-bad);
+  --color-destructive-foreground: #ffffff;
+  --color-sidebar: var(--locus-sidebar);
+  --color-sidebar-foreground: var(--locus-sidebar-foreground);
+  --color-sidebar-primary: var(--locus-sidebar-primary);
+  --color-sidebar-primary-foreground: var(--locus-sidebar-primary-foreground);
+  --color-sidebar-accent: var(--locus-sidebar-accent);
+  --color-sidebar-accent-foreground: var(--locus-sidebar-accent-foreground);
+  --color-sidebar-border: var(--locus-sidebar-border);
+  --color-sidebar-ring: var(--locus-sidebar-ring);
+  --font-sans: var(--locus-font-inter);
+  --font-heading: var(--locus-font-archivo);
+  --font-mono: var(--locus-font-fira-code);
+  --font-brand: var(--locus-font-archivo);
+  --shadow-overlay: var(--locus-overlay-shadow);
+  --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/variables/palette.css

@@ -0,0 +1,75 @@
+:root {
+  --locus-surface: #ffffff;
+  --locus-background: #fafafa;
+  --locus-foreground: #09090b;
+  --locus-border: color-mix(in oklch, var(--locus-foreground) 9%, var(--locus-surface));
+  --locus-muted: #71717a;
+  --locus-faint: #a1a1aa;
+  --locus-btn: #18181b;
+  --locus-btn-ink: #fafafa;
+  --locus-ghost: #f4f4f5;
+  --locus-s1: #2a78d6;
+  --locus-s2: #eb6834;
+  --locus-s3: #1baf7a;
+  --locus-s4: #eda100;
+  --locus-s5: #e87ba4;
+  --locus-s6: #008300;
+  --locus-s7: #4a3aa7;
+  --locus-s8: #e34948;
+  --locus-good: #006300;
+  --locus-bad: #d03b3b;
+  --locus-info: #1f6fd1;
+  --locus-warn: #a15c00;
+  --locus-popover: var(--locus-surface);
+  --locus-input: color-mix(in oklch, var(--locus-foreground) 26%, var(--locus-surface));
+  --locus-skeleton: color-mix(in oklch, var(--locus-foreground) 9%, var(--locus-surface));
+  --locus-scrim: rgb(0 0 0 / 0.28);
+  --locus-overlay-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 10px 28px -6px rgb(0 0 0 / 0.16);
+  --locus-popover-foreground: var(--locus-foreground);
+  --locus-radius: 0px;
+  --locus-sidebar: var(--locus-surface);
+  --locus-sidebar-foreground: var(--locus-foreground);
+  --locus-sidebar-primary: var(--locus-btn);
+  --locus-sidebar-primary-foreground: var(--locus-btn-ink);
+  --locus-sidebar-accent: var(--locus-ghost);
+  --locus-sidebar-accent-foreground: var(--locus-foreground);
+  --locus-sidebar-border: var(--locus-border);
+  --locus-sidebar-ring: var(--locus-s1);
+  --locus-font-inter: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+  --locus-font-archivo: "Archivo Variable", ui-sans-serif, system-ui, sans-serif;
+  --locus-font-fira-code: "Fira Code Variable", ui-monospace, monospace;
+  --locus-chart-1: var(--color-blue-300);
+  --locus-chart-2: var(--color-blue-500);
+  --locus-chart-3: var(--color-blue-600);
+  --locus-chart-4: var(--color-blue-700);
+  --locus-chart-5: var(--color-blue-800);
+}
+
+.dark {
+  --locus-surface: #111113;
+  --locus-background: #0c0c0d;
+  --locus-foreground: #ededed;
+  --locus-border: color-mix(in oklch, var(--locus-foreground) 10%, var(--locus-surface));
+  --locus-muted: #a1a1aa;
+  --locus-faint: #71717a;
+  --locus-btn: #ededed;
+  --locus-btn-ink: #0a0a0a;
+  --locus-ghost: #1b1b1d;
+  --locus-s1: #3987e5;
+  --locus-s2: #d95926;
+  --locus-s3: #199e70;
+  --locus-s4: #c98500;
+  --locus-s5: #d55181;
+  --locus-s6: #008300;
+  --locus-s7: #9085e9;
+  --locus-s8: #e66767;
+  --locus-good: #0ca30c;
+  --locus-bad: #e66767;
+  --locus-info: #5b9df0;
+  --locus-warn: #e0a400;
+  --locus-input: color-mix(in oklch, var(--locus-foreground) 24%, var(--locus-surface));
+  --locus-skeleton: color-mix(in oklch, var(--locus-foreground) 11%, var(--locus-surface));
+  --locus-popover: #18181a;
+  --locus-scrim: rgb(0 0 0 / 0.62);
+  --locus-overlay-shadow: 0 0 0 1px rgb(255 255 255 / 0.04), 0 16px 40px -8px rgb(0 0 0 / 0.7);
+}

package/dist/variables/shadcn.css

@@ -0,0 +1,35 @@
+:root,
+.dark {
+  --background: var(--locus-background);
+  --foreground: var(--locus-foreground);
+  --card: var(--locus-surface);
+  --card-foreground: var(--locus-foreground);
+  --popover: var(--locus-popover);
+  --popover-foreground: var(--locus-popover-foreground);
+  --primary: var(--locus-btn);
+  --primary-foreground: var(--locus-btn-ink);
+  --secondary: var(--locus-ghost);
+  --secondary-foreground: var(--locus-foreground);
+  --muted: var(--locus-ghost);
+  --muted-foreground: var(--locus-muted);
+  --accent: var(--locus-ghost);
+  --accent-foreground: var(--locus-foreground);
+  --destructive: var(--locus-bad);
+  --border: var(--locus-border);
+  --input: var(--locus-input);
+  --ring: var(--locus-s1);
+  --radius: var(--locus-radius);
+  --sidebar: var(--locus-sidebar);
+  --sidebar-foreground: var(--locus-sidebar-foreground);
+  --sidebar-primary: var(--locus-sidebar-primary);
+  --sidebar-primary-foreground: var(--locus-sidebar-primary-foreground);
+  --sidebar-accent: var(--locus-sidebar-accent);
+  --sidebar-accent-foreground: var(--locus-sidebar-accent-foreground);
+  --sidebar-border: var(--locus-sidebar-border);
+  --sidebar-ring: var(--locus-sidebar-ring);
+  --chart-1: var(--locus-chart-1);
+  --chart-2: var(--locus-chart-2);
+  --chart-3: var(--locus-chart-3);
+  --chart-4: var(--locus-chart-4);
+  --chart-5: var(--locus-chart-5);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@locusgraph/tokens",
-  "version": "0.1.1",
+  "version": "0.3.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": {
@@ -22,7 +22,8 @@
       "default": "./dist/values/index.js"
     },
     "./theme.css": "./dist/theme.css",
-    "./typeset.css": "./dist/typeset.css"
+    "./typeset.css": "./dist/typeset.css",
+    "./shadcn.css": "./dist/variables/shadcn.css"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -35,7 +36,7 @@
     "@fontsource-variable/inter": "^5.3.0"
   },
   "devDependencies": {
-    "@locusgraph/config": "0.1.0",
+    "@locusgraph/config": "0.1.1",
     "@types/node": "^22.0.0",
     "typescript": "^7.0.2",
     "vitest": "^5.0.3"

package/dist/mapping.css

@@ -1,57 +0,0 @@
-@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

@@ -1,66 +0,0 @@
-: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;
-}