@burtson-labs/ui 0.1.0 → 0.3.0

package/dist/tokens.js

@@ -1,73 +1,106 @@
 //#region src/tokens.ts
-/** Burtson Labs purple, the one colour every surface shares. */
+/** Burtson Labs purple. Use as signal, not wallpaper. */
 var brand = "#a60ee5";
 var light = {
-	background: "#ffffff",
-	foreground: "#17151c",
+	background: "#fbfafc",
+	foreground: "#17131c",
+	surface: "#ffffff",
+	"surface-raised": "#ffffff",
+	"surface-muted": "#f7f4f9",
 	card: "#ffffff",
-	"card-foreground": "#17151c",
+	"card-foreground": "#17131c",
 	popover: "#ffffff",
-	"popover-foreground": "#17151c",
-	primary: "#a60ee5",
+	"popover-foreground": "#17131c",
+	primary: "#8f0bc7",
 	"primary-foreground": "#ffffff",
-	secondary: "#f3f0f7",
-	"secondary-foreground": "#221c2b",
-	muted: "#f5f3f8",
-	"muted-foreground": "#655e70",
-	accent: "#f1e7fb",
-	"accent-foreground": "#4d0a6b",
-	destructive: "#d42a3a",
+	secondary: "#f1edf4",
+	"secondary-foreground": "#29212f",
+	muted: "#f4f1f6",
+	"muted-foreground": "#6c6472",
+	accent: "#f3e7fb",
+	"accent-foreground": "#561071",
+	destructive: "#c92d3f",
 	"destructive-foreground": "#ffffff",
-	success: "#12805c",
+	success: "#0e7a56",
 	"success-foreground": "#ffffff",
-	warning: "#a35c00",
+	warning: "#9b5c08",
 	"warning-foreground": "#ffffff",
-	border: "#e4dfeb",
-	input: "#d9d2e2",
+	info: "#2563eb",
+	"info-foreground": "#ffffff",
+	border: "#e5dfe8",
+	"border-strong": "#cfc5d5",
+	input: "#d8cfdd",
 	ring: "#a60ee5",
 	brand: "#a60ee5",
-	"brand-soft": "#f4e6fd"
+	"brand-hover": "#8f0bc7",
+	"brand-soft": "#f5e8fc",
+	"brand-soft-foreground": "#5b1476",
+	code: "#18141d",
+	"code-foreground": "#f5f0f7"
 };
 var dark = {
-	background: "#101016",
-	foreground: "#f0edf7",
-	card: "#16151d",
-	"card-foreground": "#f0edf7",
-	popover: "#191820",
-	"popover-foreground": "#f0edf7",
-	primary: "#a60ee5",
+	background: "#0d0d12",
+	foreground: "#f2eef5",
+	surface: "#121218",
+	"surface-raised": "#18171f",
+	"surface-muted": "#17151c",
+	card: "#14131a",
+	"card-foreground": "#f2eef5",
+	popover: "#18171f",
+	"popover-foreground": "#f2eef5",
+	primary: "#b836ed",
 	"primary-foreground": "#ffffff",
-	secondary: "#221f2b",
-	"secondary-foreground": "#e4ddeb",
-	muted: "#1d1b25",
-	"muted-foreground": "#a39bac",
-	accent: "#2b193a",
-	"accent-foreground": "#e9cffc",
-	destructive: "#e5484d",
-	"destructive-foreground": "#ffffff",
-	success: "#2fb67f",
-	"success-foreground": "#07170f",
-	warning: "#f0a53a",
-	"warning-foreground": "#1c1204",
-	border: "#2e2a3b",
-	input: "#3a3548",
-	ring: "#c77afa",
-	brand: "#c77afa",
-	"brand-soft": "#2b193a"
+	secondary: "#211e28",
+	"secondary-foreground": "#e7e0eb",
+	muted: "#1b1921",
+	"muted-foreground": "#a49ca9",
+	accent: "#291734",
+	"accent-foreground": "#efd7fa",
+	destructive: "#ef5b65",
+	"destructive-foreground": "#1b090b",
+	success: "#36c58d",
+	"success-foreground": "#07160f",
+	warning: "#f3b24c",
+	"warning-foreground": "#201304",
+	info: "#6ea8ff",
+	"info-foreground": "#071226",
+	border: "#2a2732",
+	"border-strong": "#403a49",
+	input: "#34303d",
+	ring: "#c65ef1",
+	brand: "#c65ef1",
+	"brand-hover": "#d384f3",
+	"brand-soft": "#291734",
+	"brand-soft-foreground": "#efd7fa",
+	code: "#09090d",
+	"code-foreground": "#f5f0f7"
+};
+var radius = {
+	xs: "0.375rem",
+	sm: "0.5rem",
+	md: "0.625rem",
+	lg: "0.75rem",
+	xl: "1rem",
+	full: "9999px"
+};
+var shadow = {
+	xs: "0 1px 2px rgb(10 8 14 / 0.05)",
+	sm: "0 1px 3px rgb(10 8 14 / 0.08), 0 1px 2px rgb(10 8 14 / 0.05)",
+	md: "0 10px 30px rgb(10 8 14 / 0.10), 0 2px 8px rgb(10 8 14 / 0.06)",
+	focus: "0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent)"
 };
-/** Base corner radius; sm/md/lg/xl derive from it. */
-var radius = "0.625rem";
-var fontSans = "\"Inter\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif";
-var fontMono = "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+var fontSans = "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
+var fontMono = "\"JetBrains Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace";
 var tokens = {
 	brand,
 	light,
 	dark,
 	radius,
+	shadow,
 	fontSans,
 	fontMono
 };
 //#endregion
-export { brand, dark, tokens as default, tokens, fontMono, fontSans, light, radius };
+export { brand, dark, tokens as default, tokens, fontMono, fontSans, light, radius, shadow };
 
 //# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":[],"sources":["../src/tokens.ts"],"sourcesContent":["/**\n * Burtson UI design tokens. This file is the single source for colour, radius\n * and type: `scripts/theme.mjs` writes src/styles/theme.css from it, and the\n * MUI adapter (`@burtson-labs/ui/mui`) builds its palette from it, so Tailwind\n * apps and MUI apps render the same brand.\n *\n * Colour names follow the shadcn/ui convention (background, primary, muted, …)\n * so components copied from the shadcn ecosystem pick up the Burtson palette.\n */\n\nexport type ColorToken =\n  | 'background'\n  | 'foreground'\n  | 'card'\n  | 'card-foreground'\n  | 'popover'\n  | 'popover-foreground'\n  | 'primary'\n  | 'primary-foreground'\n  | 'secondary'\n  | 'secondary-foreground'\n  | 'muted'\n  | 'muted-foreground'\n  | 'accent'\n  | 'accent-foreground'\n  | 'destructive'\n  | 'destructive-foreground'\n  | 'success'\n  | 'success-foreground'\n  | 'warning'\n  | 'warning-foreground'\n  | 'border'\n  | 'input'\n  | 'ring'\n  | 'brand'\n  | 'brand-soft';\n\nexport type Palette = Record<ColorToken, string>;\n\n/** Burtson Labs purple, the one colour every surface shares. */\nexport const brand = '#a60ee5';\n\nexport const light: Palette = {\n  background: '#ffffff',\n  foreground: '#17151c',\n  card: '#ffffff',\n  'card-foreground': '#17151c',\n  popover: '#ffffff',\n  'popover-foreground': '#17151c',\n  primary: '#a60ee5',\n  'primary-foreground': '#ffffff',\n  secondary: '#f3f0f7',\n  'secondary-foreground': '#221c2b',\n  muted: '#f5f3f8',\n  'muted-foreground': '#655e70',\n  accent: '#f1e7fb',\n  'accent-foreground': '#4d0a6b',\n  destructive: '#d42a3a',\n  'destructive-foreground': '#ffffff',\n  success: '#12805c',\n  'success-foreground': '#ffffff',\n  warning: '#a35c00',\n  'warning-foreground': '#ffffff',\n  border: '#e4dfeb',\n  input: '#d9d2e2',\n  ring: '#a60ee5',\n  brand: '#a60ee5',\n  'brand-soft': '#f4e6fd',\n};\n\nexport const dark: Palette = {\n  background: '#101016',\n  foreground: '#f0edf7',\n  card: '#16151d',\n  'card-foreground': '#f0edf7',\n  popover: '#191820',\n  'popover-foreground': '#f0edf7',\n  primary: '#a60ee5',\n  'primary-foreground': '#ffffff',\n  secondary: '#221f2b',\n  'secondary-foreground': '#e4ddeb',\n  muted: '#1d1b25',\n  'muted-foreground': '#a39bac',\n  accent: '#2b193a',\n  'accent-foreground': '#e9cffc',\n  destructive: '#e5484d',\n  'destructive-foreground': '#ffffff',\n  success: '#2fb67f',\n  'success-foreground': '#07170f',\n  warning: '#f0a53a',\n  'warning-foreground': '#1c1204',\n  border: '#2e2a3b',\n  input: '#3a3548',\n  ring: '#c77afa',\n  brand: '#c77afa',\n  'brand-soft': '#2b193a',\n};\n\n/** Base corner radius; sm/md/lg/xl derive from it. */\nexport const radius = '0.625rem';\n\nexport const fontSans =\n  '\"Inter\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif';\nexport const fontMono =\n  '\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';\n\nexport const tokens = { brand, light, dark, radius, fontSans, fontMono } as const;\nexport default tokens;\n"],"mappings":";;AAwCA,IAAa,QAAQ;AAErB,IAAa,QAAiB;CAC5B,YAAY;CACZ,YAAY;CACZ,MAAM;CACN,mBAAmB;CACnB,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,WAAW;CACX,wBAAwB;CACxB,OAAO;CACP,oBAAoB;CACpB,QAAQ;CACR,qBAAqB;CACrB,aAAa;CACb,0BAA0B;CAC1B,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,QAAQ;CACR,OAAO;CACP,MAAM;CACN,OAAO;CACP,cAAc;AAChB;AAEA,IAAa,OAAgB;CAC3B,YAAY;CACZ,YAAY;CACZ,MAAM;CACN,mBAAmB;CACnB,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,WAAW;CACX,wBAAwB;CACxB,OAAO;CACP,oBAAoB;CACpB,QAAQ;CACR,qBAAqB;CACrB,aAAa;CACb,0BAA0B;CAC1B,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,QAAQ;CACR,OAAO;CACP,MAAM;CACN,OAAO;CACP,cAAc;AAChB;;AAGA,IAAa,SAAS;AAEtB,IAAa,WACX;AACF,IAAa,WACX;AAEF,IAAa,SAAS;CAAE;CAAO;CAAO;CAAM;CAAQ;CAAU;AAAS"}
+{"version":3,"file":"tokens.js","names":[],"sources":["../src/tokens.ts"],"sourcesContent":["/**\n * Burtson UI design tokens. This file is the single source for colour, radius,\n * shadow and type: `scripts/theme.mjs` writes src/styles/theme.css from it, and the\n * MUI adapter (`@burtson-labs/ui/mui`) builds its palette from it, so Tailwind\n * apps and MUI apps render the same brand.\n *\n * Burtson's design language: technical, quiet, precise. Purple (`brand`) is a\n * signal colour for selection, focus, primary actions and small accents, not a\n * panel fill. Dark is a first-class palette, not an inversion of light. The\n * base colour names stay registry-compatible, so source copied into an app\n * keeps working.\n */\n\nexport type ColorToken =\n  | 'background'\n  | 'foreground'\n  | 'surface'\n  | 'surface-raised'\n  | 'surface-muted'\n  | 'card'\n  | 'card-foreground'\n  | 'popover'\n  | 'popover-foreground'\n  | 'primary'\n  | 'primary-foreground'\n  | 'secondary'\n  | 'secondary-foreground'\n  | 'muted'\n  | 'muted-foreground'\n  | 'accent'\n  | 'accent-foreground'\n  | 'destructive'\n  | 'destructive-foreground'\n  | 'success'\n  | 'success-foreground'\n  | 'warning'\n  | 'warning-foreground'\n  | 'info'\n  | 'info-foreground'\n  | 'border'\n  | 'border-strong'\n  | 'input'\n  | 'ring'\n  | 'brand'\n  | 'brand-hover'\n  | 'brand-soft'\n  | 'brand-soft-foreground'\n  | 'code'\n  | 'code-foreground';\n\nexport type Palette = Record<ColorToken, string>;\n\n/** Burtson Labs purple. Use as signal, not wallpaper. */\nexport const brand = '#a60ee5';\n\nexport const light: Palette = {\n  background: '#fbfafc',\n  foreground: '#17131c',\n  surface: '#ffffff',\n  'surface-raised': '#ffffff',\n  'surface-muted': '#f7f4f9',\n  card: '#ffffff',\n  'card-foreground': '#17131c',\n  popover: '#ffffff',\n  'popover-foreground': '#17131c',\n  primary: '#8f0bc7',\n  'primary-foreground': '#ffffff',\n  secondary: '#f1edf4',\n  'secondary-foreground': '#29212f',\n  muted: '#f4f1f6',\n  'muted-foreground': '#6c6472',\n  accent: '#f3e7fb',\n  'accent-foreground': '#561071',\n  destructive: '#c92d3f',\n  'destructive-foreground': '#ffffff',\n  success: '#0e7a56',\n  'success-foreground': '#ffffff',\n  warning: '#9b5c08',\n  'warning-foreground': '#ffffff',\n  info: '#2563eb',\n  'info-foreground': '#ffffff',\n  border: '#e5dfe8',\n  'border-strong': '#cfc5d5',\n  input: '#d8cfdd',\n  ring: '#a60ee5',\n  brand: '#a60ee5',\n  'brand-hover': '#8f0bc7',\n  'brand-soft': '#f5e8fc',\n  'brand-soft-foreground': '#5b1476',\n  code: '#18141d',\n  'code-foreground': '#f5f0f7',\n};\n\nexport const dark: Palette = {\n  background: '#0d0d12',\n  foreground: '#f2eef5',\n  surface: '#121218',\n  'surface-raised': '#18171f',\n  'surface-muted': '#17151c',\n  card: '#14131a',\n  'card-foreground': '#f2eef5',\n  popover: '#18171f',\n  'popover-foreground': '#f2eef5',\n  primary: '#b836ed',\n  'primary-foreground': '#ffffff',\n  secondary: '#211e28',\n  'secondary-foreground': '#e7e0eb',\n  muted: '#1b1921',\n  'muted-foreground': '#a49ca9',\n  accent: '#291734',\n  'accent-foreground': '#efd7fa',\n  destructive: '#ef5b65',\n  'destructive-foreground': '#1b090b',\n  success: '#36c58d',\n  'success-foreground': '#07160f',\n  warning: '#f3b24c',\n  'warning-foreground': '#201304',\n  info: '#6ea8ff',\n  'info-foreground': '#071226',\n  border: '#2a2732',\n  'border-strong': '#403a49',\n  input: '#34303d',\n  ring: '#c65ef1',\n  brand: '#c65ef1',\n  'brand-hover': '#d384f3',\n  'brand-soft': '#291734',\n  'brand-soft-foreground': '#efd7fa',\n  code: '#09090d',\n  'code-foreground': '#f5f0f7',\n};\n\nexport const radius = {\n  xs: '0.375rem',\n  sm: '0.5rem',\n  md: '0.625rem',\n  lg: '0.75rem',\n  xl: '1rem',\n  full: '9999px',\n} as const;\n\nexport const shadow = {\n  xs: '0 1px 2px rgb(10 8 14 / 0.05)',\n  sm: '0 1px 3px rgb(10 8 14 / 0.08), 0 1px 2px rgb(10 8 14 / 0.05)',\n  md: '0 10px 30px rgb(10 8 14 / 0.10), 0 2px 8px rgb(10 8 14 / 0.06)',\n  focus: '0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent)',\n} as const;\n\nexport const fontSans =\n  'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif';\nexport const fontMono =\n  '\"JetBrains Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace';\n\nexport const tokens = { brand, light, dark, radius, shadow, fontSans, fontMono } as const;\nexport default tokens;\n"],"mappings":";;AAqDA,IAAa,QAAQ;AAErB,IAAa,QAAiB;CAC5B,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,kBAAkB;CAClB,iBAAiB;CACjB,MAAM;CACN,mBAAmB;CACnB,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,WAAW;CACX,wBAAwB;CACxB,OAAO;CACP,oBAAoB;CACpB,QAAQ;CACR,qBAAqB;CACrB,aAAa;CACb,0BAA0B;CAC1B,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,MAAM;CACN,mBAAmB;CACnB,QAAQ;CACR,iBAAiB;CACjB,OAAO;CACP,MAAM;CACN,OAAO;CACP,eAAe;CACf,cAAc;CACd,yBAAyB;CACzB,MAAM;CACN,mBAAmB;AACrB;AAEA,IAAa,OAAgB;CAC3B,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,kBAAkB;CAClB,iBAAiB;CACjB,MAAM;CACN,mBAAmB;CACnB,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,WAAW;CACX,wBAAwB;CACxB,OAAO;CACP,oBAAoB;CACpB,QAAQ;CACR,qBAAqB;CACrB,aAAa;CACb,0BAA0B;CAC1B,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,MAAM;CACN,mBAAmB;CACnB,QAAQ;CACR,iBAAiB;CACjB,OAAO;CACP,MAAM;CACN,OAAO;CACP,eAAe;CACf,cAAc;CACd,yBAAyB;CACzB,MAAM;CACN,mBAAmB;AACrB;AAEA,IAAa,SAAS;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAEA,IAAa,SAAS;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,IAAa,WACX;AACF,IAAa,WACX;AAEF,IAAa,SAAS;CAAE;CAAO;CAAO;CAAM;CAAQ;CAAQ;CAAU;AAAS"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@burtson-labs/ui",
-  "version": "0.1.0",
-  "description": "Burtson UI: accessible React components on Radix and Tailwind, themed for Burtson Labs and paired with Burtson Icons. Install the package or copy the source with the shadcn CLI.",
+  "version": "0.3.0",
+  "description": "Burtson UI: a quiet, precise, dark-first React component system for agents, IDEs and ops tools. Accessible (Radix underneath), Tailwind-themed, Burtson Icons built in. Install the package or copy the source.",
   "license": "MIT",
   "author": {
     "name": "Burtson Labs",
@@ -89,6 +89,7 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "radix-ui": "^1.6.7",
     "tailwind-merge": "^3.7.0"
   },