@burtson-labs/ui 0.2.0 → 0.3.0

package/dist/theme.css

@@ -13,68 +13,91 @@
 @custom-variant dark (&:where(.dark, .dark *, [data-theme='dark'], [data-theme='dark'] *));
 
 :root {
-  --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;
   --radius: 0.625rem;
   color-scheme: light;
 }
 
 .dark,
 [data-theme='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;
   color-scheme: dark;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-surface: var(--surface);
+  --color-surface-raised: var(--surface-raised);
+  --color-surface-muted: var(--surface-muted);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
@@ -93,17 +116,31 @@
   --color-success-foreground: var(--success-foreground);
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
   --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
   --color-input: var(--input);
   --color-ring: var(--ring);
   --color-brand: var(--brand);
+  --color-brand-hover: var(--brand-hover);
   --color-brand-soft: var(--brand-soft);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --color-brand-soft-foreground: var(--brand-soft-foreground);
+  --color-code: var(--code);
+  --color-code-foreground: var(--code-foreground);
+  /* Controls 8-10px, panels 10-12px, pills only for tags and status. */
+  --radius-xs: 0.375rem;
+  --radius-sm: 0.5rem;
+  --radius-md: 0.625rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  /* Borders carry hierarchy; shadows stay quiet except on floating surfaces. */
+  --shadow-xs: 0 1px 2px rgb(10 8 14 / 0.05);
+  --shadow-sm: 0 1px 3px rgb(10 8 14 / 0.08), 0 1px 2px rgb(10 8 14 / 0.05);
+  --shadow-md: 0 10px 30px rgb(10 8 14 / 0.10), 0 2px 8px rgb(10 8 14 / 0.06);
+  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
+  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
   --animate-in: bl-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
   --animate-out: bl-out 120ms ease-in forwards;
   --animate-sheet-in: bl-sheet-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -186,4 +223,15 @@
   :focus-visible {
     outline-color: var(--color-ring);
   }
+  html,
+  body {
+    background: var(--color-background);
+    color: var(--color-foreground);
+  }
+  body {
+    font-family: var(--font-sans);
+  }
+  ::selection {
+    background: color-mix(in srgb, var(--color-brand) 28%, transparent);
+  }
 }

package/dist/tokens.d.ts

@@ -1,28 +1,56 @@
 /**
- * Burtson UI design tokens. This file is the single source for colour, radius
- * and type: `scripts/theme.mjs` writes src/styles/theme.css from it, and the
+ * Burtson UI design tokens. This file is the single source for colour, radius,
+ * shadow and type: `scripts/theme.mjs` writes src/styles/theme.css from it, and the
  * MUI adapter (`@burtson-labs/ui/mui`) builds its palette from it, so Tailwind
  * apps and MUI apps render the same brand.
  *
- * Colour names follow the shadcn/ui convention (background, primary, muted, …)
- * so components copied from the shadcn ecosystem pick up the Burtson palette.
+ * Burtson's design language: technical, quiet, precise. Purple (`brand`) is a
+ * signal colour for selection, focus, primary actions and small accents, not a
+ * panel fill. Dark is a first-class palette, not an inversion of light. The
+ * base colour names stay registry-compatible, so source copied into an app
+ * keeps working.
  */
-export type ColorToken = 'background' | 'foreground' | 'card' | 'card-foreground' | 'popover' | 'popover-foreground' | 'primary' | 'primary-foreground' | 'secondary' | 'secondary-foreground' | 'muted' | 'muted-foreground' | 'accent' | 'accent-foreground' | 'destructive' | 'destructive-foreground' | 'success' | 'success-foreground' | 'warning' | 'warning-foreground' | 'border' | 'input' | 'ring' | 'brand' | 'brand-soft';
+export type ColorToken = 'background' | 'foreground' | 'surface' | 'surface-raised' | 'surface-muted' | 'card' | 'card-foreground' | 'popover' | 'popover-foreground' | 'primary' | 'primary-foreground' | 'secondary' | 'secondary-foreground' | 'muted' | 'muted-foreground' | 'accent' | 'accent-foreground' | 'destructive' | 'destructive-foreground' | 'success' | 'success-foreground' | 'warning' | 'warning-foreground' | 'info' | 'info-foreground' | 'border' | 'border-strong' | 'input' | 'ring' | 'brand' | 'brand-hover' | 'brand-soft' | 'brand-soft-foreground' | 'code' | 'code-foreground';
 export type Palette = Record<ColorToken, string>;
-/** Burtson Labs purple, the one colour every surface shares. */
+/** Burtson Labs purple. Use as signal, not wallpaper. */
 export declare const brand = "#a60ee5";
 export declare const light: Palette;
 export declare const dark: Palette;
-/** Base corner radius; sm/md/lg/xl derive from it. */
-export declare const radius = "0.625rem";
-export declare const fontSans = "\"Inter\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif";
-export declare const fontMono = "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+export declare const radius: {
+    readonly xs: "0.375rem";
+    readonly sm: "0.5rem";
+    readonly md: "0.625rem";
+    readonly lg: "0.75rem";
+    readonly xl: "1rem";
+    readonly full: "9999px";
+};
+export declare const shadow: {
+    readonly xs: "0 1px 2px rgb(10 8 14 / 0.05)";
+    readonly sm: "0 1px 3px rgb(10 8 14 / 0.08), 0 1px 2px rgb(10 8 14 / 0.05)";
+    readonly md: "0 10px 30px rgb(10 8 14 / 0.10), 0 2px 8px rgb(10 8 14 / 0.06)";
+    readonly focus: "0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent)";
+};
+export declare const fontSans = "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
+export declare const fontMono = "\"JetBrains Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace";
 export declare const tokens: {
     readonly brand: "#a60ee5";
     readonly light: Palette;
     readonly dark: Palette;
-    readonly radius: "0.625rem";
-    readonly fontSans: "\"Inter\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif";
-    readonly fontMono: "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+    readonly radius: {
+        readonly xs: "0.375rem";
+        readonly sm: "0.5rem";
+        readonly md: "0.625rem";
+        readonly lg: "0.75rem";
+        readonly xl: "1rem";
+        readonly full: "9999px";
+    };
+    readonly shadow: {
+        readonly xs: "0 1px 2px rgb(10 8 14 / 0.05)";
+        readonly sm: "0 1px 3px rgb(10 8 14 / 0.08), 0 1px 2px rgb(10 8 14 / 0.05)";
+        readonly md: "0 10px 30px rgb(10 8 14 / 0.10), 0 2px 8px rgb(10 8 14 / 0.06)";
+        readonly focus: "0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent)";
+    };
+    readonly fontSans: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
+    readonly fontMono: "\"JetBrains Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace";
 };
 export default tokens;

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.2.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",