@aloudata/aloudata-design 3.0.0-beta.15 → 3.0.0-beta.16

package/dist/index.d.ts

@@ -38,6 +38,8 @@ export { default as ConfigProvider } from './ConfigProvider.js';
 export { EUserType } from './ConfigProvider/getUserList.js';
 export type { IUserGroup } from './ConfigProvider/getUserList.js';
 export type { SizeType } from './ConfigProvider/sizeContext.js';
+export { createTheme, defaultTheme, initAldTheme, themeToCssVars, } from './theme.js';
+export type { AldThemeConfig, AldThemeCssVars, AldThemeToken, ResolvedAldTheme, } from './theme.js';
 export { default as DataPreviewTable } from './DataPreviewTable.js';
 export type { ITableProps as DataPreviewTableProps, DataPreviewTableRef, PreviewColumn, TValue as DataPreviewTableValue, } from './DataPreviewTable/interface.js';
 export { default as DatePicker } from './DatePicker.js';

package/dist/index.js

@@ -28,6 +28,10 @@ import AldCustomConfigProvider from "./ConfigProvider/index.js";
 import Select_default from "./Select/index.js";
 import InputNumber from "./InputNumber/index.js";
 import ColorPicker from "./ColorPicker/index.js";
+import { defaultTheme } from "./theme/defaultTheme.js";
+import { createTheme } from "./theme/createTheme.js";
+import { themeToCssVars } from "./theme/themeToCssVars.js";
+import { initAldTheme } from "./theme/initAldTheme.js";
 import CustomSpin from "./Spin/index.js";
 import Result from "./Result/index.js";
 import DataPreviewTable_default from "./DataPreviewTable/index.js";
@@ -71,4 +75,4 @@ import notification from "./notification/index.js";
 import AMenu from "./AMenu/index.js";
 import Tour from "./Tour/index.js";
 import datePickerLocaleZhCN from "rc-picker/es/locale/zh_CN";
-export { AMenu, AProgress, Select_default as AldSelect, Alert, AldApp as App, Avatar, Badge, Breadcrumb, Button_default as Button, Card, Carousel, Checkbox, Col, Collapse, ColorPicker, AldCustomConfigProvider as ConfigProvider, DataPreviewTable_default as DataPreviewTable, DatePicker, DisplayLogicTree, Divider, Drawer, Dropdown, ELogicType, EMemberPicker, ENodeType, EUserType, Empty, Form, HighlightText, IconButton, Input, InputNumber, InputSearch, Layout, List, LogicTree, MemberSelector as MemberPicker, Menu, Modal, OverflowCount, Pagination, Popconfirm, Popover, Progress_default as Progress, Radio, RenameInput, Result, Row, ScrollArea_default as ScrollArea, Select_default as Select, Skeleton, Slider, Space, CustomSpin as Spin, StatusLight, Steps, Switch, Table_default as Table, Tabs, Tag, TextLink, Tooltip, Tour, Tree, Typography, Upload, User, Watermark, addLogicNode, addRecordNode, changeRecordData, datePickerLocaleZhCN, getInitialLogicNode, localeValues as localeEnUS, localeValues$1 as localeZhCN, logicTreeIterator, message, notification, removeNode };
+export { AMenu, AProgress, Select_default as AldSelect, Alert, AldApp as App, Avatar, Badge, Breadcrumb, Button_default as Button, Card, Carousel, Checkbox, Col, Collapse, ColorPicker, AldCustomConfigProvider as ConfigProvider, DataPreviewTable_default as DataPreviewTable, DatePicker, DisplayLogicTree, Divider, Drawer, Dropdown, ELogicType, EMemberPicker, ENodeType, EUserType, Empty, Form, HighlightText, IconButton, Input, InputNumber, InputSearch, Layout, List, LogicTree, MemberSelector as MemberPicker, Menu, Modal, OverflowCount, Pagination, Popconfirm, Popover, Progress_default as Progress, Radio, RenameInput, Result, Row, ScrollArea_default as ScrollArea, Select_default as Select, Skeleton, Slider, Space, CustomSpin as Spin, StatusLight, Steps, Switch, Table_default as Table, Tabs, Tag, TextLink, Tooltip, Tour, Tree, Typography, Upload, User, Watermark, addLogicNode, addRecordNode, changeRecordData, createTheme, datePickerLocaleZhCN, defaultTheme, getInitialLogicNode, initAldTheme, localeValues as localeEnUS, localeValues$1 as localeZhCN, logicTreeIterator, message, notification, removeNode, themeToCssVars };

package/dist/theme/createTheme.d.ts

@@ -0,0 +1,2 @@
+import { AldThemeConfig, ResolvedAldTheme } from './types.js';
+export declare function createTheme(config?: AldThemeConfig): ResolvedAldTheme;

package/dist/theme/createTheme.js

@@ -0,0 +1,46 @@
+import { defaultTheme } from "./defaultTheme.js";
+//#region src/theme/createTheme.ts
+var colorTokenKeys = [
+	"colorPrimary",
+	"colorSuccess",
+	"colorWarning",
+	"colorError",
+	"colorInfo",
+	"colorTextBase",
+	"colorBgBase",
+	"colorBorderBase"
+];
+function normalizeThemeId(id) {
+	if (!id) return defaultTheme.id;
+	return /^[A-Za-z0-9_-]+$/.test(id) ? id : "tenant-theme";
+}
+function isHexColor(value) {
+	return typeof value === "string" && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(value);
+}
+function isSafeRadius(value) {
+	if (typeof value === "number") return Number.isFinite(value) && value >= 0;
+	return typeof value === "string" && /^\d+(\.\d+)?(px|rem|em|%)$/.test(value.trim());
+}
+function sanitizeToken(token) {
+	const next = {};
+	for (const key of colorTokenKeys) {
+		const value = token?.[key];
+		if (isHexColor(value)) next[key] = value;
+	}
+	const borderRadius = token?.borderRadius;
+	if (isSafeRadius(borderRadius)) next.borderRadius = borderRadius;
+	return next;
+}
+function createTheme(config = {}) {
+	return {
+		id: normalizeThemeId(config.id),
+		token: {
+			...defaultTheme.token,
+			...sanitizeToken(config.token)
+		}
+	};
+}
+//#endregion
+export { createTheme };
+
+//# sourceMappingURL=createTheme.js.map

package/dist/theme/createTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTheme.js","names":[],"sources":["../../src/theme/createTheme.ts"],"sourcesContent":["import { defaultTheme } from './defaultTheme';\nimport type { AldThemeConfig, AldThemeToken, ResolvedAldTheme } from './types';\n\nconst colorTokenKeys: Array<\n  keyof Pick<\n    AldThemeToken,\n    | 'colorPrimary'\n    | 'colorSuccess'\n    | 'colorWarning'\n    | 'colorError'\n    | 'colorInfo'\n    | 'colorTextBase'\n    | 'colorBgBase'\n    | 'colorBorderBase'\n  >\n> = [\n  'colorPrimary',\n  'colorSuccess',\n  'colorWarning',\n  'colorError',\n  'colorInfo',\n  'colorTextBase',\n  'colorBgBase',\n  'colorBorderBase',\n];\n\nfunction normalizeThemeId(id?: string) {\n  if (!id) return defaultTheme.id;\n  return /^[A-Za-z0-9_-]+$/.test(id) ? id : 'tenant-theme';\n}\n\nfunction isHexColor(value: unknown): value is string {\n  return (\n    typeof value === 'string' && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(value)\n  );\n}\n\nfunction isSafeRadius(value: unknown): value is number | string {\n  if (typeof value === 'number') return Number.isFinite(value) && value >= 0;\n  return (\n    typeof value === 'string' && /^\\d+(\\.\\d+)?(px|rem|em|%)$/.test(value.trim())\n  );\n}\n\nfunction sanitizeToken(token: AldThemeConfig['token']): AldThemeToken {\n  const next: AldThemeToken = {};\n\n  for (const key of colorTokenKeys) {\n    const value = token?.[key];\n    if (isHexColor(value)) {\n      next[key] = value;\n    }\n  }\n\n  const borderRadius = token?.borderRadius;\n  if (isSafeRadius(borderRadius)) {\n    next.borderRadius = borderRadius;\n  }\n\n  return next;\n}\n\nexport function createTheme(config: AldThemeConfig = {}): ResolvedAldTheme {\n  return {\n    id: normalizeThemeId(config.id),\n    token: {\n      ...defaultTheme.token,\n      ...sanitizeToken(config.token),\n    },\n  };\n}\n"],"mappings":";;AAGA,IAAM,iBAYF;CACF;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,iBAAiB,IAAa;AACrC,KAAI,CAAC,GAAI,QAAO,aAAa;AAC7B,QAAO,mBAAmB,KAAK,GAAG,GAAG,KAAK;;AAG5C,SAAS,WAAW,OAAiC;AACnD,QACE,OAAO,UAAU,YAAY,gCAAgC,KAAK,MAAM;;AAI5E,SAAS,aAAa,OAA0C;AAC9D,KAAI,OAAO,UAAU,SAAU,QAAO,OAAO,SAAS,MAAM,IAAI,SAAS;AACzE,QACE,OAAO,UAAU,YAAY,6BAA6B,KAAK,MAAM,MAAM,CAAC;;AAIhF,SAAS,cAAc,OAA+C;CACpE,MAAM,OAAsB,EAAE;AAE9B,MAAK,MAAM,OAAO,gBAAgB;EAChC,MAAM,QAAQ,QAAQ;AACtB,MAAI,WAAW,MAAM,CACnB,MAAK,OAAO;;CAIhB,MAAM,eAAe,OAAO;AAC5B,KAAI,aAAa,aAAa,CAC5B,MAAK,eAAe;AAGtB,QAAO;;AAGT,SAAgB,YAAY,SAAyB,EAAE,EAAoB;AACzE,QAAO;EACL,IAAI,iBAAiB,OAAO,GAAG;EAC/B,OAAO;GACL,GAAG,aAAa;GAChB,GAAG,cAAc,OAAO,MAAM;GAC/B;EACF"}

package/dist/theme/defaultTheme.d.ts

@@ -0,0 +1,2 @@
+import { ResolvedAldTheme } from './types.js';
+export declare const defaultTheme: ResolvedAldTheme;

package/dist/theme/defaultTheme.js

@@ -0,0 +1,19 @@
+//#region src/theme/defaultTheme.ts
+var defaultTheme = {
+	id: "default",
+	token: {
+		colorPrimary: "#3062D4",
+		colorSuccess: "#1D7C4D",
+		colorWarning: "#F59638",
+		colorError: "#CF3F3F",
+		colorInfo: "#3062D4",
+		colorTextBase: "#272E35",
+		colorBgBase: "#FFFFFF",
+		colorBorderBase: "#EAEDF0",
+		borderRadius: 6
+	}
+};
+//#endregion
+export { defaultTheme };
+
+//# sourceMappingURL=defaultTheme.js.map

package/dist/theme/defaultTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultTheme.js","names":[],"sources":["../../src/theme/defaultTheme.ts"],"sourcesContent":["import type { ResolvedAldTheme } from './types';\n\nexport const defaultTheme: ResolvedAldTheme = {\n  id: 'default',\n  token: {\n    colorPrimary: '#3062D4',\n    colorSuccess: '#1D7C4D',\n    colorWarning: '#F59638',\n    colorError: '#CF3F3F',\n    colorInfo: '#3062D4',\n    colorTextBase: '#272E35',\n    colorBgBase: '#FFFFFF',\n    colorBorderBase: '#EAEDF0',\n    borderRadius: 6,\n  },\n};\n"],"mappings":";AAEA,IAAa,eAAiC;CAC5C,IAAI;CACJ,OAAO;EACL,cAAc;EACd,cAAc;EACd,cAAc;EACd,YAAY;EACZ,WAAW;EACX,eAAe;EACf,aAAa;EACb,iBAAiB;EACjB,cAAc;EACf;CACF"}

package/dist/theme/index.d.ts

@@ -0,0 +1,5 @@
+export { createTheme } from './createTheme.js';
+export { defaultTheme } from './defaultTheme.js';
+export { initAldTheme } from './initAldTheme.js';
+export { themeToCssVars } from './themeToCssVars.js';
+export type { AldThemeConfig, AldThemeCssVars, AldThemeToken, ResolvedAldTheme, } from './types.js';

package/dist/theme/index.js

@@ -0,0 +1,4 @@
+import "./defaultTheme.js";
+import "./createTheme.js";
+import "./themeToCssVars.js";
+import "./initAldTheme.js";

package/dist/theme/initAldTheme.d.ts

@@ -0,0 +1,2 @@
+import { AldThemeConfig, ResolvedAldTheme } from './types.js';
+export declare function initAldTheme(config: AldThemeConfig | ResolvedAldTheme): void;

package/dist/theme/initAldTheme.js

@@ -0,0 +1,26 @@
+import { createTheme } from "./createTheme.js";
+import { themeDataAttribute, themeStyleElementId } from "./tokenMap.js";
+import { themeToCssVars } from "./themeToCssVars.js";
+//#region src/theme/initAldTheme.ts
+function escapeCssString(value) {
+	return value.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
+}
+function createThemeCss(theme) {
+	const vars = themeToCssVars(theme);
+	const body = Object.entries(vars).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+	return `:root[${themeDataAttribute}="${escapeCssString(theme.id)}"] {\n${body}\n}\n`;
+}
+function initAldTheme(config) {
+	if (typeof document === "undefined") return;
+	const theme = createTheme(config);
+	const style = document.createElement("style");
+	style.id = themeStyleElementId;
+	style.textContent = createThemeCss(theme);
+	document.getElementById(themeStyleElementId)?.remove();
+	document.head.appendChild(style);
+	document.documentElement.setAttribute(themeDataAttribute, theme.id);
+}
+//#endregion
+export { initAldTheme };
+
+//# sourceMappingURL=initAldTheme.js.map

package/dist/theme/initAldTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"initAldTheme.js","names":[],"sources":["../../src/theme/initAldTheme.ts"],"sourcesContent":["import { createTheme } from './createTheme';\nimport { themeDataAttribute, themeStyleElementId } from './tokenMap';\nimport { themeToCssVars } from './themeToCssVars';\nimport type { AldThemeConfig, ResolvedAldTheme } from './types';\n\nfunction escapeCssString(value: string) {\n  return value.replace(/\\\\/g, '\\\\\\\\').replace(/\"/g, '\\\\\"');\n}\n\nfunction createThemeCss(theme: ResolvedAldTheme) {\n  const vars = themeToCssVars(theme);\n  const body = Object.entries(vars)\n    .map(([name, value]) => `  ${name}: ${value};`)\n    .join('\\n');\n\n  return `:root[${themeDataAttribute}=\"${escapeCssString(\n    theme.id,\n  )}\"] {\\n${body}\\n}\\n`;\n}\n\nexport function initAldTheme(config: AldThemeConfig | ResolvedAldTheme): void {\n  if (typeof document === 'undefined') return;\n\n  const theme = createTheme(config);\n  const style = document.createElement('style');\n\n  style.id = themeStyleElementId;\n  style.textContent = createThemeCss(theme);\n\n  document.getElementById(themeStyleElementId)?.remove();\n  document.head.appendChild(style);\n  document.documentElement.setAttribute(themeDataAttribute, theme.id);\n}\n"],"mappings":";;;;AAKA,SAAS,gBAAgB,OAAe;AACtC,QAAO,MAAM,QAAQ,OAAO,OAAO,CAAC,QAAQ,MAAM,OAAM;;AAG1D,SAAS,eAAe,OAAyB;CAC/C,MAAM,OAAO,eAAe,MAAM;CAClC,MAAM,OAAO,OAAO,QAAQ,KAAK,CAC9B,KAAK,CAAC,MAAM,WAAW,KAAK,KAAK,IAAI,MAAM,GAAG,CAC9C,KAAK,KAAK;AAEb,QAAO,SAAS,mBAAmB,IAAI,gBACrC,MAAM,GACP,CAAC,QAAQ,KAAK;;AAGjB,SAAgB,aAAa,QAAiD;AAC5E,KAAI,OAAO,aAAa,YAAa;CAErC,MAAM,QAAQ,YAAY,OAAO;CACjC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAE7C,OAAM,KAAK;AACX,OAAM,cAAc,eAAe,MAAM;AAEzC,UAAS,eAAe,oBAAoB,EAAE,QAAQ;AACtD,UAAS,KAAK,YAAY,MAAM;AAChC,UAAS,gBAAgB,aAAa,oBAAoB,MAAM,GAAG"}

package/dist/theme/themeToCssVars.d.ts

@@ -0,0 +1,2 @@
+import { AldThemeCssVars, ResolvedAldTheme } from './types.js';
+export declare function themeToCssVars(theme: ResolvedAldTheme): AldThemeCssVars;

package/dist/theme/themeToCssVars.js

@@ -0,0 +1,144 @@
+import { assignVars, radiusVarNames } from "./tokenMap.js";
+//#region src/theme/themeToCssVars.ts
+var tonalStops = {
+	950: .68,
+	900: .52,
+	800: .36,
+	700: .18,
+	600: 0,
+	500: .2,
+	400: .38,
+	300: .56,
+	200: .72,
+	100: .84,
+	50: .92,
+	25: .96,
+	0: .98
+};
+function clampChannel(value) {
+	return Math.max(0, Math.min(255, Math.round(value)));
+}
+function parseHexColor(color) {
+	const match = color.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+	if (!match) return null;
+	const hex = match[1].length === 3 ? match[1].split("").map((char) => char + char).join("") : match[1];
+	return [
+		Number.parseInt(hex.slice(0, 2), 16),
+		Number.parseInt(hex.slice(2, 4), 16),
+		Number.parseInt(hex.slice(4, 6), 16)
+	];
+}
+function rgbToHex(rgb) {
+	return `#${rgb.map((channel) => clampChannel(channel).toString(16).padStart(2, "0")).join("")}`;
+}
+function normalizeColor(color) {
+	const rgb = parseHexColor(color);
+	return rgb ? rgbToHex(rgb) : color.trim();
+}
+function mix(from, to, amount) {
+	return [
+		from[0] + (to[0] - from[0]) * amount,
+		from[1] + (to[1] - from[1]) * amount,
+		from[2] + (to[2] - from[2]) * amount
+	];
+}
+function createPaletteVars(prefix, baseColor, globalPrefix, globalZeroName) {
+	const baseRgb = parseHexColor(baseColor);
+	const base = normalizeColor(baseColor);
+	if (!baseRgb) return { [`--semantic-${prefix}-600`]: base };
+	const vars = {};
+	for (const [stop, amount] of Object.entries(tonalStops)) {
+		const target = Number(stop) > 600 ? [
+			0,
+			0,
+			0
+		] : [
+			255,
+			255,
+			255
+		];
+		const value = stop === "600" ? base : rgbToHex(mix(baseRgb, target, amount));
+		vars[`--semantic-${prefix}-${stop}`] = value;
+		if (globalPrefix) vars[`--${globalPrefix}-${stop}`] = value;
+	}
+	if (globalZeroName && vars[`--semantic-${prefix}-0`]) vars[globalZeroName] = vars[`--semantic-${prefix}-0`];
+	return vars;
+}
+function radiusToCssValue(value) {
+	return typeof value === "number" ? `${value}px` : value;
+}
+function themeToCssVars(theme) {
+	const { token } = theme;
+	const vars = {};
+	assignVars(vars, createPaletteVars("brand", token.colorPrimary, "global-blue", "--global-blue-blue-0"));
+	assignVars(vars, createPaletteVars("informative", token.colorInfo));
+	assignVars(vars, createPaletteVars("positive", token.colorSuccess, "global-green", "--global-green-green-0"));
+	assignVars(vars, createPaletteVars("warning", token.colorWarning, "global-orange", "--global-orange-orange-0"));
+	assignVars(vars, createPaletteVars("negative", token.colorError, "global-red"));
+	const textBase = normalizeColor(token.colorTextBase);
+	const bgBase = normalizeColor(token.colorBgBase);
+	const borderBase = normalizeColor(token.colorBorderBase);
+	const radius = radiusToCssValue(token.borderRadius);
+	assignVars(vars, {
+		"--content-primary": textBase,
+		"--alias-colors-text-strong": textBase,
+		"--alias-colors-text-default": textBase,
+		"--background-default": bgBase,
+		"--background-neutral-surface": bgBase,
+		"--border-default": borderBase,
+		"--border-default-alpha": borderBase,
+		"--action-primary-normal": "var(--semantic-brand-600)",
+		"--action-primary-hover": "var(--semantic-brand-800)",
+		"--action-primary-active": "var(--semantic-brand-900)",
+		"--action-primary-selected": "var(--semantic-brand-800)",
+		"--action-primary-subtle-normal": "var(--semantic-brand-50)",
+		"--action-primary-subtle-hover": "var(--semantic-brand-100)",
+		"--action-primary-subtle-active": "var(--semantic-brand-300)",
+		"--action-primary-subtle-selected": "var(--semantic-brand-100)",
+		"--content-brand-primary": "var(--semantic-brand-900)",
+		"--content-brand-secondary": "var(--semantic-brand-600)",
+		"--alias-colors-text-selected": "var(--semantic-brand-900)",
+		"--alias-colors-text-brand": "var(--semantic-brand-600)",
+		"--alias-colors-text-danger": "var(--semantic-negative-600)",
+		"--alias-colors-text-warning": "var(--semantic-warning-600)",
+		"--alias-colors-text-success": "var(--semantic-positive-600)",
+		"--alias-colors-text-information": "var(--semantic-informative-600)",
+		"--alias-colors-icon-selected": "var(--semantic-brand-600)",
+		"--alias-colors-icon-brand": "var(--semantic-brand-600)",
+		"--alias-colors-icon-danger": "var(--semantic-negative-600)",
+		"--alias-colors-icon-warning": "var(--semantic-warning-600)",
+		"--alias-colors-icon-success": "var(--semantic-positive-600)",
+		"--alias-colors-icon-information": "var(--semantic-informative-600)",
+		"--border-brand-strong": "var(--semantic-brand-600)",
+		"--border-brand-subtle": "var(--semantic-brand-300)",
+		"--alias-colors-border-selected": "var(--semantic-brand-600)",
+		"--alias-colors-border-brand": "var(--semantic-brand-600)",
+		"--alias-colors-border-danger": "var(--semantic-negative-600)",
+		"--alias-colors-border-warning": "var(--semantic-warning-600)",
+		"--alias-colors-border-success": "var(--semantic-positive-600)",
+		"--alias-colors-border-information": "var(--semantic-informative-600)",
+		"--alias-colors-bg-selected-default": "var(--semantic-brand-100)",
+		"--alias-colors-bg-selected-hover": "var(--semantic-brand-100)",
+		"--alias-colors-bg-selected-press": "var(--semantic-brand-300)",
+		"--alias-colors-bg-selected-strong-default": "var(--semantic-brand-600)",
+		"--alias-colors-bg-selected-strong-hover": "var(--semantic-brand-600)",
+		"--alias-colors-bg-selected-strong-press": "var(--semantic-brand-900)",
+		"--background-brand-strong": "var(--semantic-brand-600)",
+		"--background-brand-muted": "var(--semantic-brand-200)",
+		"--background-brand-subtle": "var(--semantic-brand-25)",
+		"--semantic-informative-informative-0": "var(--semantic-informative-0)",
+		"--interaction-default-normal": "var(--semantic-brand-600)",
+		"--interaction-default-hover": "var(--semantic-brand-800)",
+		"--interaction-default-active": "var(--semantic-brand-900)",
+		"--interaction-border-normal": "var(--semantic-brand-400)",
+		"--interaction-border-hover": "var(--semantic-brand-500)",
+		"--interaction-border-active": "var(--semantic-brand-700)",
+		"--interaction-border-selected": "var(--semantic-brand-600)"
+	});
+	for (const varName of radiusVarNames) vars[varName] = radius;
+	return vars;
+}
+//#endregion
+export { themeToCssVars };
+
+//# sourceMappingURL=themeToCssVars.js.map

package/dist/theme/themeToCssVars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeToCssVars.js","names":[],"sources":["../../src/theme/themeToCssVars.ts"],"sourcesContent":["import { assignVars, radiusVarNames } from './tokenMap';\nimport type { AldThemeCssVars, ResolvedAldTheme } from './types';\n\ntype Rgb = [number, number, number];\n\nconst tonalStops = {\n  950: 0.68,\n  900: 0.52,\n  800: 0.36,\n  700: 0.18,\n  600: 0,\n  500: 0.2,\n  400: 0.38,\n  300: 0.56,\n  200: 0.72,\n  100: 0.84,\n  50: 0.92,\n  25: 0.96,\n  0: 0.98,\n} as const;\n\nfunction clampChannel(value: number) {\n  return Math.max(0, Math.min(255, Math.round(value)));\n}\n\nfunction parseHexColor(color: string): Rgb | null {\n  const normalized = color.trim();\n  const match = normalized.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);\n  if (!match) return null;\n  const hex =\n    match[1].length === 3\n      ? match[1]\n          .split('')\n          .map((char) => char + char)\n          .join('')\n      : match[1];\n  return [\n    Number.parseInt(hex.slice(0, 2), 16),\n    Number.parseInt(hex.slice(2, 4), 16),\n    Number.parseInt(hex.slice(4, 6), 16),\n  ];\n}\n\nfunction rgbToHex(rgb: Rgb) {\n  return `#${rgb\n    .map((channel) => clampChannel(channel).toString(16).padStart(2, '0'))\n    .join('')}`;\n}\n\nfunction normalizeColor(color: string) {\n  const rgb = parseHexColor(color);\n  return rgb ? rgbToHex(rgb) : color.trim();\n}\n\nfunction mix(from: Rgb, to: Rgb, amount: number): Rgb {\n  return [\n    from[0] + (to[0] - from[0]) * amount,\n    from[1] + (to[1] - from[1]) * amount,\n    from[2] + (to[2] - from[2]) * amount,\n  ];\n}\n\nfunction createPaletteVars(\n  prefix: string,\n  baseColor: string,\n  globalPrefix?: string,\n  globalZeroName?: `--${string}`,\n): AldThemeCssVars {\n  const baseRgb = parseHexColor(baseColor);\n  const base = normalizeColor(baseColor);\n\n  if (!baseRgb) {\n    return {\n      [`--semantic-${prefix}-600`]: base,\n    };\n  }\n\n  const vars: AldThemeCssVars = {};\n  for (const [stop, amount] of Object.entries(tonalStops)) {\n    const target: Rgb = Number(stop) > 600 ? [0, 0, 0] : [255, 255, 255];\n    const value =\n      stop === '600' ? base : rgbToHex(mix(baseRgb, target, amount));\n    vars[`--semantic-${prefix}-${stop}`] = value;\n    if (globalPrefix) {\n      vars[`--${globalPrefix}-${stop}`] = value;\n    }\n  }\n  if (globalZeroName && vars[`--semantic-${prefix}-0`]) {\n    vars[globalZeroName] = vars[`--semantic-${prefix}-0`];\n  }\n  return vars;\n}\n\nfunction radiusToCssValue(value: number | string) {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\nexport function themeToCssVars(theme: ResolvedAldTheme): AldThemeCssVars {\n  const { token } = theme;\n  const vars: AldThemeCssVars = {};\n\n  assignVars(\n    vars,\n    createPaletteVars(\n      'brand',\n      token.colorPrimary,\n      'global-blue',\n      '--global-blue-blue-0',\n    ),\n  );\n  assignVars(vars, createPaletteVars('informative', token.colorInfo));\n  assignVars(\n    vars,\n    createPaletteVars(\n      'positive',\n      token.colorSuccess,\n      'global-green',\n      '--global-green-green-0',\n    ),\n  );\n  assignVars(\n    vars,\n    createPaletteVars(\n      'warning',\n      token.colorWarning,\n      'global-orange',\n      '--global-orange-orange-0',\n    ),\n  );\n  assignVars(\n    vars,\n    createPaletteVars('negative', token.colorError, 'global-red'),\n  );\n\n  const textBase = normalizeColor(token.colorTextBase);\n  const bgBase = normalizeColor(token.colorBgBase);\n  const borderBase = normalizeColor(token.colorBorderBase);\n  const radius = radiusToCssValue(token.borderRadius);\n\n  assignVars(vars, {\n    '--content-primary': textBase,\n    '--alias-colors-text-strong': textBase,\n    '--alias-colors-text-default': textBase,\n    '--background-default': bgBase,\n    '--background-neutral-surface': bgBase,\n    '--border-default': borderBase,\n    '--border-default-alpha': borderBase,\n    '--action-primary-normal': 'var(--semantic-brand-600)',\n    '--action-primary-hover': 'var(--semantic-brand-800)',\n    '--action-primary-active': 'var(--semantic-brand-900)',\n    '--action-primary-selected': 'var(--semantic-brand-800)',\n    '--action-primary-subtle-normal': 'var(--semantic-brand-50)',\n    '--action-primary-subtle-hover': 'var(--semantic-brand-100)',\n    '--action-primary-subtle-active': 'var(--semantic-brand-300)',\n    '--action-primary-subtle-selected': 'var(--semantic-brand-100)',\n    '--content-brand-primary': 'var(--semantic-brand-900)',\n    '--content-brand-secondary': 'var(--semantic-brand-600)',\n    '--alias-colors-text-selected': 'var(--semantic-brand-900)',\n    '--alias-colors-text-brand': 'var(--semantic-brand-600)',\n    '--alias-colors-text-danger': 'var(--semantic-negative-600)',\n    '--alias-colors-text-warning': 'var(--semantic-warning-600)',\n    '--alias-colors-text-success': 'var(--semantic-positive-600)',\n    '--alias-colors-text-information': 'var(--semantic-informative-600)',\n    '--alias-colors-icon-selected': 'var(--semantic-brand-600)',\n    '--alias-colors-icon-brand': 'var(--semantic-brand-600)',\n    '--alias-colors-icon-danger': 'var(--semantic-negative-600)',\n    '--alias-colors-icon-warning': 'var(--semantic-warning-600)',\n    '--alias-colors-icon-success': 'var(--semantic-positive-600)',\n    '--alias-colors-icon-information': 'var(--semantic-informative-600)',\n    '--border-brand-strong': 'var(--semantic-brand-600)',\n    '--border-brand-subtle': 'var(--semantic-brand-300)',\n    '--alias-colors-border-selected': 'var(--semantic-brand-600)',\n    '--alias-colors-border-brand': 'var(--semantic-brand-600)',\n    '--alias-colors-border-danger': 'var(--semantic-negative-600)',\n    '--alias-colors-border-warning': 'var(--semantic-warning-600)',\n    '--alias-colors-border-success': 'var(--semantic-positive-600)',\n    '--alias-colors-border-information': 'var(--semantic-informative-600)',\n    '--alias-colors-bg-selected-default': 'var(--semantic-brand-100)',\n    '--alias-colors-bg-selected-hover': 'var(--semantic-brand-100)',\n    '--alias-colors-bg-selected-press': 'var(--semantic-brand-300)',\n    '--alias-colors-bg-selected-strong-default': 'var(--semantic-brand-600)',\n    '--alias-colors-bg-selected-strong-hover': 'var(--semantic-brand-600)',\n    '--alias-colors-bg-selected-strong-press': 'var(--semantic-brand-900)',\n    '--background-brand-strong': 'var(--semantic-brand-600)',\n    '--background-brand-muted': 'var(--semantic-brand-200)',\n    '--background-brand-subtle': 'var(--semantic-brand-25)',\n    '--semantic-informative-informative-0': 'var(--semantic-informative-0)',\n    '--interaction-default-normal': 'var(--semantic-brand-600)',\n    '--interaction-default-hover': 'var(--semantic-brand-800)',\n    '--interaction-default-active': 'var(--semantic-brand-900)',\n    '--interaction-border-normal': 'var(--semantic-brand-400)',\n    '--interaction-border-hover': 'var(--semantic-brand-500)',\n    '--interaction-border-active': 'var(--semantic-brand-700)',\n    '--interaction-border-selected': 'var(--semantic-brand-600)',\n  });\n\n  for (const varName of radiusVarNames) {\n    vars[varName] = radius;\n  }\n\n  return vars;\n}\n"],"mappings":"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"}

package/dist/theme/tokenMap.d.ts

@@ -0,0 +1,5 @@
+import { AldThemeCssVars } from './types.js';
+export declare const themeStyleElementId = "ald-theme-runtime";
+export declare const themeDataAttribute = "data-ald-theme";
+export declare const radiusVarNames: readonly ["--alias-radius-75", "--alias-radius-100"];
+export declare function assignVars(target: AldThemeCssVars, vars: AldThemeCssVars): AldThemeCssVars;

package/dist/theme/tokenMap.js

@@ -0,0 +1,12 @@
+//#region src/theme/tokenMap.ts
+var themeStyleElementId = "ald-theme-runtime";
+var themeDataAttribute = "data-ald-theme";
+var radiusVarNames = ["--alias-radius-75", "--alias-radius-100"];
+function assignVars(target, vars) {
+	Object.assign(target, vars);
+	return target;
+}
+//#endregion
+export { assignVars, radiusVarNames, themeDataAttribute, themeStyleElementId };
+
+//# sourceMappingURL=tokenMap.js.map

package/dist/theme/tokenMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenMap.js","names":[],"sources":["../../src/theme/tokenMap.ts"],"sourcesContent":["import type { AldThemeCssVars } from './types';\n\nexport const themeStyleElementId = 'ald-theme-runtime';\nexport const themeDataAttribute = 'data-ald-theme';\n\nexport const radiusVarNames = [\n  '--alias-radius-75',\n  '--alias-radius-100',\n] as const;\n\nexport function assignVars(\n  target: AldThemeCssVars,\n  vars: AldThemeCssVars,\n): AldThemeCssVars {\n  Object.assign(target, vars);\n  return target;\n}\n"],"mappings":";AAEA,IAAa,sBAAsB;AACnC,IAAa,qBAAqB;AAElC,IAAa,iBAAiB,CAC5B,qBACA,qBACD;AAED,SAAgB,WACd,QACA,MACiB;AACjB,QAAO,OAAO,QAAQ,KAAK;AAC3B,QAAO"}

package/dist/theme/types.d.ts

@@ -0,0 +1,20 @@
+export interface AldThemeToken {
+    colorPrimary?: string;
+    colorSuccess?: string;
+    colorWarning?: string;
+    colorError?: string;
+    colorInfo?: string;
+    colorTextBase?: string;
+    colorBgBase?: string;
+    colorBorderBase?: string;
+    borderRadius?: number | string;
+}
+export interface AldThemeConfig {
+    id?: string;
+    token?: AldThemeToken;
+}
+export interface ResolvedAldTheme {
+    id: string;
+    token: Required<AldThemeToken>;
+}
+export type AldThemeCssVars = Record<`--${string}`, string>;

package/dist/theme/types.js

@@ -0,0 +1,2 @@
+// type-only module stub
+export {};

package/dist/theme.d.ts

@@ -0,0 +1,2 @@
+export * from './theme/index.js';
+export { default } from './theme/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "3.0.0-beta.15",
+  "version": "3.0.0-beta.16",
   "description": "",
   "license": "MIT",
   "sideEffects": [