@locusgraph/tokens 0.1.0 → 0.2.0

package/dist/effects/utilities.css

@@ -54,3 +54,12 @@
 @utility scrollbar-gutter-stable {
   scrollbar-gutter: stable;
 }
+
+@utility eyebrow {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--muted);
+}

package/dist/mapping.css

@@ -18,7 +18,9 @@
   --color-info: var(--info);
   --color-warn: var(--warn);
   --color-border: var(--border);
-  --color-input: var(--border);
+  --color-input: var(--input);
+  --color-skeleton: var(--skeleton);
+  --color-scrim: var(--scrim);
   --color-ring: var(--s1);
   --color-primary: var(--btn);
   --color-primary-foreground: var(--btn-ink);
@@ -28,7 +30,7 @@
   --color-accent-foreground: var(--foreground);
   --color-muted: var(--ghost);
   --color-muted-foreground: var(--muted);
-  --color-popover: var(--surface);
+  --color-popover: var(--popover);
   --color-popover-foreground: var(--foreground);
   --color-card: var(--surface);
   --color-card-foreground: var(--foreground);
@@ -46,6 +48,7 @@
   --font-heading: var(--font-archivo);
   --font-mono: var(--font-fira-code);
   --font-brand: var(--font-archivo);
+  --shadow-overlay: var(--overlay-shadow);
   --radius-xs: 0px;
   --radius-sm: 0px;
   --radius-md: 0px;

package/dist/palette.css

@@ -1,8 +1,8 @@
 :root {
   --surface: #ffffff;
-  --background: var(--surface);
+  --background: #fafafa;
   --foreground: #09090b;
-  --border: color-mix(in oklch, var(--foreground) 13%, var(--surface));
+  --border: color-mix(in oklch, var(--foreground) 9%, var(--surface));
   --muted: #71717a;
   --faint: #a1a1aa;
   --btn: #18181b;
@@ -21,6 +21,10 @@
   --info: #1f6fd1;
   --warn: #a15c00;
   --popover: var(--surface);
+  --input: color-mix(in oklch, var(--foreground) 26%, var(--surface));
+  --skeleton: color-mix(in oklch, var(--foreground) 9%, var(--surface));
+  --scrim: rgb(0 0 0 / 0.28);
+  --overlay-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 10px 28px -6px rgb(0 0 0 / 0.16);
   --popover-foreground: var(--foreground);
   --radius: 0px;
   --sidebar: var(--surface);
@@ -42,10 +46,10 @@
 }
 
 .dark {
-  --surface: #101011;
-  --background: var(--surface);
+  --surface: #111113;
+  --background: #0c0c0d;
   --foreground: #ededed;
-  --border: color-mix(in oklch, var(--foreground) 13%, var(--surface));
+  --border: color-mix(in oklch, var(--foreground) 10%, var(--surface));
   --muted: #a1a1aa;
   --faint: #71717a;
   --btn: #ededed;
@@ -63,4 +67,9 @@
   --bad: #e66767;
   --info: #5b9df0;
   --warn: #e0a400;
+  --input: color-mix(in oklch, var(--foreground) 24%, var(--surface));
+  --skeleton: color-mix(in oklch, var(--foreground) 11%, var(--surface));
+  --popover: #18181a;
+  --scrim: rgb(0 0 0 / 0.62);
+  --overlay-shadow: 0 0 0 1px rgb(255 255 255 / 0.04), 0 16px 40px -8px rgb(0 0 0 / 0.7);
 }

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/values/index.d.ts

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

package/dist/values/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@locusgraph/tokens",
-  "version": "0.1.0",
+  "version": "0.2.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": {
@@ -35,13 +35,13 @@
     "@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"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && rsync -a --include='*/' --include='*.css' --exclude='*' src/ dist/",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && rsync -a --include='*/' --include='*.css' --exclude='*' src/ dist/ && node ../../scripts/esm-extensions.mjs dist",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "vitest run"
   }