@camstack/ui-library 1.2.289 → 1.2.291

package/dist/theme/index.cjs

@@ -1,4 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_theme_to_root_css = require("../theme-to-root-css-CIqt8k0j.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/theme/theme-provider.tsx
@@ -72,148 +73,6 @@ function useThemeMode() {
 	return context;
 }
 //#endregion
-//#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/create-theme.ts
 function deepMerge(target, source) {
 	const result = { ...target };
@@ -226,82 +85,18 @@ function deepMerge(target, source) {
 	return result;
 }
 function createTheme(overrides) {
-	if (!overrides) return structuredClone(defaultTheme);
-	return deepMerge(structuredClone(defaultTheme), overrides);
-}
-//#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, "    ")}
-  }
-}
-`;
+	if (!overrides) return structuredClone(require_theme_to_root_css.defaultTheme);
+	return deepMerge(structuredClone(require_theme_to_root_css.defaultTheme), overrides);
 }
 //#endregion
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeProvider$1 = ThemeProvider;
 exports.createTheme = createTheme;
 exports.createTheme$1 = createTheme;
-exports.darkColors = darkColors;
-exports.darkColors$1 = darkColors;
-exports.defaultTheme = defaultTheme;
-exports.defaultTheme$1 = defaultTheme;
-exports.lightColors = lightColors;
-exports.lightColors$1 = lightColors;
-exports.themeToCss = themeToCss;
-exports.themeToCss$1 = themeToCss;
+exports.darkColors = require_theme_to_root_css.darkColors;
+exports.defaultTheme = require_theme_to_root_css.defaultTheme;
+exports.lightColors = require_theme_to_root_css.lightColors;
+exports.themeToCss = require_theme_to_root_css.themeToCss;
+exports.themeToRootCss = require_theme_to_root_css.themeToRootCss;
 exports.useThemeMode = useThemeMode;
 exports.useThemeMode$1 = useThemeMode;

package/dist/theme/index.d.ts

@@ -2,5 +2,6 @@ export type { CamStackColorTokens, CamStackTheme, ThemeMode, DeepPartial, UseThe
 export { darkColors, lightColors, defaultTheme } from "./defaults";
 export { createTheme } from "./create-theme";
 export { themeToCss } from "./theme-to-css";
+export { themeToRootCss } from "./theme-to-root-css";
 export { ThemeProvider } from "./theme-provider";
 export { useThemeMode } from "./use-theme-mode";

package/dist/theme/index.js

@@ -1,3 +1,4 @@
+import { a as lightColors, i as defaultTheme, n as themeToCss, r as darkColors, t as themeToRootCss } from "../theme-to-root-css-Ca6MGqO9.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/theme/theme-provider.tsx
@@ -71,148 +72,6 @@ function useThemeMode() {
 	return context;
 }
 //#endregion
-//#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/create-theme.ts
 function deepMerge(target, source) {
 	const result = { ...target };
@@ -229,65 +88,4 @@ function createTheme(overrides) {
 	return deepMerge(structuredClone(defaultTheme), overrides);
 }
 //#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
-export { ThemeProvider, createTheme, darkColors, defaultTheme, lightColors, themeToCss, useThemeMode };
+export { ThemeProvider, createTheme, darkColors, defaultTheme, lightColors, themeToCss, themeToRootCss, useThemeMode };

package/dist/theme/theme-to-css.d.ts

@@ -1,2 +1,3 @@
 import type { CamStackTheme } from "./types";
+export declare function camelToKebab(str: string): string;
 export declare function themeToCss(theme: CamStackTheme): string;

package/dist/theme/theme-to-root-css.d.ts

@@ -0,0 +1,10 @@
+import type { CamStackTheme } from "./types";
+/**
+* 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.
+*/
+export declare function themeToRootCss(theme: CamStackTheme): string;

package/dist/theme/tokens.cjs

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_theme_to_root_css = require("../theme-to-root-css-CIqt8k0j.cjs");
+exports.darkColors = require_theme_to_root_css.darkColors;
+exports.defaultTheme = require_theme_to_root_css.defaultTheme;
+exports.lightColors = require_theme_to_root_css.lightColors;
+exports.themeToCss = require_theme_to_root_css.themeToCss;
+exports.themeToRootCss = require_theme_to_root_css.themeToRootCss;

package/dist/theme/tokens.d.ts

@@ -0,0 +1,9 @@
+/**
+* The React-free slice of the theme: the token values and their plain-CSS
+* form. A separate entry (`@camstack/ui-library/theme/tokens`) so a Node
+* process can read the tokens without loading React.
+*/
+export type { CamStackColorTokens, CamStackTheme } from "./types";
+export { darkColors, lightColors, defaultTheme } from "./defaults";
+export { themeToCss } from "./theme-to-css";
+export { themeToRootCss } from "./theme-to-root-css";

package/dist/theme/tokens.js

@@ -0,0 +1,2 @@
+import { a as lightColors, i as defaultTheme, n as themeToCss, r as darkColors, t as themeToRootCss } from "../theme-to-root-css-Ca6MGqO9.js";
+export { darkColors, defaultTheme, lightColors, themeToCss, themeToRootCss };