@camstack/ui-library 1.2.288 → 1.2.290

package/dist/theme-to-root-css-CIqt8k0j.cjs

@@ -0,0 +1,256 @@
+//#region src/theme/defaults.ts
+var providerColors = {
+	onvif: "#3b82f6",
+	hikvision: "#a855f7",
+	reolink: "#06b6d4",
+	homeAssistant: "#22d3ee",
+	rtsp: "#78716c"
+};
+var darkColors = {
+	primary: "#f59e42",
+	primaryForeground: "#0c0a09",
+	background: "#0c0a09",
+	backgroundElevated: "#1c1917",
+	surface: "#1c1917",
+	surfaceHover: "#292524",
+	border: "#292524",
+	borderSubtle: "#1c1917",
+	foreground: "#fafaf9",
+	foregroundMuted: "#a8a29e",
+	foregroundSubtle: "#78716c",
+	foregroundDisabled: "#57534e",
+	success: "#4ade80",
+	warning: "#fbbf24",
+	danger: "#f87171",
+	info: "#60a5fa",
+	successFill: "#4ade80",
+	successOn: "#0c0a09",
+	warningFill: "#fbbf24",
+	warningOn: "#0c0a09",
+	dangerFill: "#f87171",
+	dangerOn: "#0c0a09",
+	infoFill: "#60a5fa",
+	infoOn: "#0c0a09",
+	primaryFill: "#f59e42",
+	primaryOn: "#0c0a09",
+	neutralFill: "#44403c",
+	neutralOn: "#fafaf9",
+	provider: providerColors
+};
+var lightColors = {
+	primary: "#e67e22",
+	primaryForeground: "#ffffff",
+	background: "#fafaf9",
+	backgroundElevated: "#ffffff",
+	surface: "#f5f5f4",
+	surfaceHover: "#e7e5e4",
+	border: "#d6d3d1",
+	borderSubtle: "#e7e5e4",
+	foreground: "#1c1917",
+	foregroundMuted: "#57534e",
+	foregroundSubtle: "#78716c",
+	foregroundDisabled: "#a8a29e",
+	success: "#16a34a",
+	warning: "#d97706",
+	danger: "#dc2626",
+	info: "#2563eb",
+	successFill: "#15803d",
+	successOn: "#ffffff",
+	warningFill: "#b45309",
+	warningOn: "#ffffff",
+	dangerFill: "#dc2626",
+	dangerOn: "#ffffff",
+	infoFill: "#2563eb",
+	infoOn: "#ffffff",
+	primaryFill: "#c2410c",
+	primaryOn: "#ffffff",
+	neutralFill: "#57534e",
+	neutralOn: "#ffffff",
+	provider: providerColors
+};
+var defaultTheme = {
+	colors: {
+		dark: darkColors,
+		light: lightColors
+	},
+	spacing: {
+		xs: 2,
+		sm: 4,
+		md: 8,
+		lg: 12,
+		xl: 16,
+		"2xl": 24,
+		"3xl": 32
+	},
+	radius: {
+		sm: 4,
+		md: 6,
+		lg: 8,
+		xl: 12
+	},
+	typography: {
+		fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+		sizes: {
+			xs: {
+				fontSize: 10,
+				lineHeight: 14
+			},
+			sm: {
+				fontSize: 11,
+				lineHeight: 16
+			},
+			base: {
+				fontSize: 12,
+				lineHeight: 18
+			},
+			lg: {
+				fontSize: 13,
+				lineHeight: 18
+			},
+			xl: {
+				fontSize: 14,
+				lineHeight: 20
+			},
+			"2xl": {
+				fontSize: 16,
+				lineHeight: 22
+			},
+			"3xl": {
+				fontSize: 20,
+				lineHeight: 28
+			}
+		},
+		weights: {
+			regular: 400,
+			medium: 500,
+			semibold: 600,
+			bold: 700
+		}
+	},
+	table: {
+		rowHeight: 28,
+		headerHeight: 24,
+		cellPaddingX: 8,
+		cellPaddingY: 6
+	},
+	sidebar: {
+		width: 176,
+		itemHeight: 28,
+		iconSize: 14
+	}
+};
+//#endregion
+//#region src/theme/theme-to-css.ts
+function camelToKebab(str) {
+	return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+function colorTokenToCssVar(key) {
+	return `--color-${camelToKebab(key)}`;
+}
+function generateColorBlock(colors) {
+	const lines = [];
+	for (const [key, value] of Object.entries(colors)) {
+		if (key === "provider") continue;
+		lines.push(`  ${colorTokenToCssVar(key)}: ${value};`);
+	}
+	return lines.join("\n");
+}
+function generateProviderColors(provider) {
+	const lines = [];
+	for (const [key, value] of Object.entries(provider)) lines.push(`  --color-provider-${camelToKebab(key)}: ${value};`);
+	return lines.join("\n");
+}
+function generateSpacingTokens(spacing) {
+	const lines = [];
+	for (const [key, value] of Object.entries(spacing)) lines.push(`  --spacing-${key}: ${value}px;`);
+	return lines.join("\n");
+}
+function generateRadiusTokens(radius) {
+	const lines = [];
+	for (const [key, value] of Object.entries(radius)) lines.push(`  --radius-${key}: ${value}px;`);
+	return lines.join("\n");
+}
+function themeToCss(theme) {
+	const darkColorBlock = generateColorBlock(theme.colors.dark);
+	const lightColorBlock = generateColorBlock(theme.colors.light);
+	return `@theme {
+${generateProviderColors(theme.colors.dark.provider)}
+${generateSpacingTokens(theme.spacing)}
+${generateRadiusTokens(theme.radius)}
+}
+
+.dark {
+${darkColorBlock}
+}
+
+.light {
+${lightColorBlock}
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+${darkColorBlock.replace(/^ {2}/gm, "    ")}
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+${lightColorBlock.replace(/^ {2}/gm, "    ")}
+  }
+}
+`;
+}
+//#endregion
+//#region src/theme/theme-to-root-css.ts
+function colorDeclarations(colors) {
+	return Object.entries(colors).filter(([key]) => key !== "provider").map(([key, value]) => `--color-${camelToKebab(key)}:${String(value)}`).join(";");
+}
+function scaleDeclarations(prefix, scale) {
+	return Object.entries(scale).map(([key, value]) => `--${prefix}-${key}:${value}px`).join(";");
+}
+/**
+* The theme as plain CSS custom properties on `:root`, with no Tailwind
+* directive: light colours by default, dark inside `prefers-color-scheme`.
+* Variable names are the ones {@link themeToCss} emits (`--color-primary`,
+* `--spacing-lg`, `--radius-xl`), so a stylesheet written against the admin
+* UI's tokens reads the same names. For pages with no CSS toolchain, such as
+* the hub's standalone server-rendered pages.
+*/
+function themeToRootCss(theme) {
+	return [`:root{color-scheme:light dark;${[
+		scaleDeclarations("spacing", theme.spacing),
+		scaleDeclarations("radius", theme.radius),
+		`--font-family:${theme.typography.fontFamily}`
+	].join(";")};${colorDeclarations(theme.colors.light)}}`, `@media (prefers-color-scheme:dark){:root{${colorDeclarations(theme.colors.dark)}}}`].join("");
+}
+//#endregion
+Object.defineProperty(exports, "darkColors", {
+	enumerable: true,
+	get: function() {
+		return darkColors;
+	}
+});
+Object.defineProperty(exports, "defaultTheme", {
+	enumerable: true,
+	get: function() {
+		return defaultTheme;
+	}
+});
+Object.defineProperty(exports, "lightColors", {
+	enumerable: true,
+	get: function() {
+		return lightColors;
+	}
+});
+Object.defineProperty(exports, "themeToCss", {
+	enumerable: true,
+	get: function() {
+		return themeToCss;
+	}
+});
+Object.defineProperty(exports, "themeToRootCss", {
+	enumerable: true,
+	get: function() {
+		return themeToRootCss;
+	}
+});

package/dist/theme-to-root-css-Ca6MGqO9.js

@@ -0,0 +1,227 @@
+//#region src/theme/defaults.ts
+var providerColors = {
+	onvif: "#3b82f6",
+	hikvision: "#a855f7",
+	reolink: "#06b6d4",
+	homeAssistant: "#22d3ee",
+	rtsp: "#78716c"
+};
+var darkColors = {
+	primary: "#f59e42",
+	primaryForeground: "#0c0a09",
+	background: "#0c0a09",
+	backgroundElevated: "#1c1917",
+	surface: "#1c1917",
+	surfaceHover: "#292524",
+	border: "#292524",
+	borderSubtle: "#1c1917",
+	foreground: "#fafaf9",
+	foregroundMuted: "#a8a29e",
+	foregroundSubtle: "#78716c",
+	foregroundDisabled: "#57534e",
+	success: "#4ade80",
+	warning: "#fbbf24",
+	danger: "#f87171",
+	info: "#60a5fa",
+	successFill: "#4ade80",
+	successOn: "#0c0a09",
+	warningFill: "#fbbf24",
+	warningOn: "#0c0a09",
+	dangerFill: "#f87171",
+	dangerOn: "#0c0a09",
+	infoFill: "#60a5fa",
+	infoOn: "#0c0a09",
+	primaryFill: "#f59e42",
+	primaryOn: "#0c0a09",
+	neutralFill: "#44403c",
+	neutralOn: "#fafaf9",
+	provider: providerColors
+};
+var lightColors = {
+	primary: "#e67e22",
+	primaryForeground: "#ffffff",
+	background: "#fafaf9",
+	backgroundElevated: "#ffffff",
+	surface: "#f5f5f4",
+	surfaceHover: "#e7e5e4",
+	border: "#d6d3d1",
+	borderSubtle: "#e7e5e4",
+	foreground: "#1c1917",
+	foregroundMuted: "#57534e",
+	foregroundSubtle: "#78716c",
+	foregroundDisabled: "#a8a29e",
+	success: "#16a34a",
+	warning: "#d97706",
+	danger: "#dc2626",
+	info: "#2563eb",
+	successFill: "#15803d",
+	successOn: "#ffffff",
+	warningFill: "#b45309",
+	warningOn: "#ffffff",
+	dangerFill: "#dc2626",
+	dangerOn: "#ffffff",
+	infoFill: "#2563eb",
+	infoOn: "#ffffff",
+	primaryFill: "#c2410c",
+	primaryOn: "#ffffff",
+	neutralFill: "#57534e",
+	neutralOn: "#ffffff",
+	provider: providerColors
+};
+var defaultTheme = {
+	colors: {
+		dark: darkColors,
+		light: lightColors
+	},
+	spacing: {
+		xs: 2,
+		sm: 4,
+		md: 8,
+		lg: 12,
+		xl: 16,
+		"2xl": 24,
+		"3xl": 32
+	},
+	radius: {
+		sm: 4,
+		md: 6,
+		lg: 8,
+		xl: 12
+	},
+	typography: {
+		fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+		sizes: {
+			xs: {
+				fontSize: 10,
+				lineHeight: 14
+			},
+			sm: {
+				fontSize: 11,
+				lineHeight: 16
+			},
+			base: {
+				fontSize: 12,
+				lineHeight: 18
+			},
+			lg: {
+				fontSize: 13,
+				lineHeight: 18
+			},
+			xl: {
+				fontSize: 14,
+				lineHeight: 20
+			},
+			"2xl": {
+				fontSize: 16,
+				lineHeight: 22
+			},
+			"3xl": {
+				fontSize: 20,
+				lineHeight: 28
+			}
+		},
+		weights: {
+			regular: 400,
+			medium: 500,
+			semibold: 600,
+			bold: 700
+		}
+	},
+	table: {
+		rowHeight: 28,
+		headerHeight: 24,
+		cellPaddingX: 8,
+		cellPaddingY: 6
+	},
+	sidebar: {
+		width: 176,
+		itemHeight: 28,
+		iconSize: 14
+	}
+};
+//#endregion
+//#region src/theme/theme-to-css.ts
+function camelToKebab(str) {
+	return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+function colorTokenToCssVar(key) {
+	return `--color-${camelToKebab(key)}`;
+}
+function generateColorBlock(colors) {
+	const lines = [];
+	for (const [key, value] of Object.entries(colors)) {
+		if (key === "provider") continue;
+		lines.push(`  ${colorTokenToCssVar(key)}: ${value};`);
+	}
+	return lines.join("\n");
+}
+function generateProviderColors(provider) {
+	const lines = [];
+	for (const [key, value] of Object.entries(provider)) lines.push(`  --color-provider-${camelToKebab(key)}: ${value};`);
+	return lines.join("\n");
+}
+function generateSpacingTokens(spacing) {
+	const lines = [];
+	for (const [key, value] of Object.entries(spacing)) lines.push(`  --spacing-${key}: ${value}px;`);
+	return lines.join("\n");
+}
+function generateRadiusTokens(radius) {
+	const lines = [];
+	for (const [key, value] of Object.entries(radius)) lines.push(`  --radius-${key}: ${value}px;`);
+	return lines.join("\n");
+}
+function themeToCss(theme) {
+	const darkColorBlock = generateColorBlock(theme.colors.dark);
+	const lightColorBlock = generateColorBlock(theme.colors.light);
+	return `@theme {
+${generateProviderColors(theme.colors.dark.provider)}
+${generateSpacingTokens(theme.spacing)}
+${generateRadiusTokens(theme.radius)}
+}
+
+.dark {
+${darkColorBlock}
+}
+
+.light {
+${lightColorBlock}
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+${darkColorBlock.replace(/^ {2}/gm, "    ")}
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+${lightColorBlock.replace(/^ {2}/gm, "    ")}
+  }
+}
+`;
+}
+//#endregion
+//#region src/theme/theme-to-root-css.ts
+function colorDeclarations(colors) {
+	return Object.entries(colors).filter(([key]) => key !== "provider").map(([key, value]) => `--color-${camelToKebab(key)}:${String(value)}`).join(";");
+}
+function scaleDeclarations(prefix, scale) {
+	return Object.entries(scale).map(([key, value]) => `--${prefix}-${key}:${value}px`).join(";");
+}
+/**
+* The theme as plain CSS custom properties on `:root`, with no Tailwind
+* directive: light colours by default, dark inside `prefers-color-scheme`.
+* Variable names are the ones {@link themeToCss} emits (`--color-primary`,
+* `--spacing-lg`, `--radius-xl`), so a stylesheet written against the admin
+* UI's tokens reads the same names. For pages with no CSS toolchain, such as
+* the hub's standalone server-rendered pages.
+*/
+function themeToRootCss(theme) {
+	return [`:root{color-scheme:light dark;${[
+		scaleDeclarations("spacing", theme.spacing),
+		scaleDeclarations("radius", theme.radius),
+		`--font-family:${theme.typography.fontFamily}`
+	].join(";")};${colorDeclarations(theme.colors.light)}}`, `@media (prefers-color-scheme:dark){:root{${colorDeclarations(theme.colors.dark)}}}`].join("");
+}
+//#endregion
+export { lightColors as a, defaultTheme as i, themeToCss as n, darkColors as r, themeToRootCss as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.288",
+  "version": "1.2.290",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -16,6 +16,11 @@
       "import": "./dist/theme/index.js",
       "require": "./dist/theme/index.cjs"
     },
+    "./theme/tokens": {
+      "types": "./dist/theme/tokens.d.ts",
+      "import": "./dist/theme/tokens.js",
+      "require": "./dist/theme/tokens.cjs"
+    },
     "./tailwind/*": "./src/tailwind/*"
   },
   "camstack": {