@omnific/atelier 0.1.0 → 0.2.0

package/README.md

@@ -4,11 +4,20 @@ A refined React component library for Omnific.
 
 ```tsx
 import { Button } from '@omnific/atelier';
+import { createSystem, defaultConfig, useTheme } from '@omnific/atelier/system';
 import '@omnific/atelier/styles.css';
 
-<Button variant='primary'>Continue</Button>;
+const system = createSystem('app', defaultConfig);
+
+function App() {
+  useTheme(system); // injects CSS variables onto :root
+  return <Button variant='primary'>Continue</Button>;
+}
 ```
 
+Token values come from `createSystem` and are injected at runtime by `useTheme`.
+Component layout/theme CSS still ships via `@omnific/atelier/styles.css`.
+
 ## Storybook
 
 Curated component examples live under `packages/atelier/__stories__` and

package/dist/box/Box.d.ts

@@ -0,0 +1,7 @@
+import { BoxProps } from "./types.js";
+//#region box/Box.d.ts
+/**
+ * 通用样式容器，通过 token 直接写入 CSS 属性应用 padding / 背景 / 圆角 / 边框色 / 阴影。
+ */
+export declare const Box: (props: BoxProps) => import("react").JSX.Element;
+//#endregion

package/dist/box/Box.js

@@ -0,0 +1,28 @@
+import { boxPrefixCls } from "./constants.js";
+import { styleFromTokens } from "../system/css-vars.js";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region box/Box.tsx
+/**
+* 通用样式容器，通过 token 直接写入 CSS 属性应用 padding / 背景 / 圆角 / 边框色 / 阴影。
+*/
+const Box = (props) => {
+	const { bg, border = false, borderColor, children, className, p, px, py, ref, rounded, shadow, style, ...rest } = props;
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: clsx(boxPrefixCls, border && `${boxPrefixCls}-border`, className),
+		ref,
+		style: styleFromTokens([
+			["padding", p],
+			["paddingInline", px],
+			["paddingBlock", py],
+			["background", bg],
+			["borderColor", borderColor],
+			["borderRadius", rounded],
+			["boxShadow", shadow]
+		], style),
+		children
+	});
+};
+//#endregion
+export { Box };

package/dist/box/constants.js

@@ -0,0 +1,8 @@
+import { getPrefixCls } from "../utils/getPrefixCls.js";
+//#region box/constants.ts
+/**
+* Box 组件的 CSS 类名前缀。
+*/
+const boxPrefixCls = getPrefixCls("box");
+//#endregion
+export { boxPrefixCls };

package/dist/box/index.d.ts

@@ -0,0 +1,3 @@
+import { BoxProps } from "./types.js";
+import { Box } from "./Box.js";
+export { Box, type BoxProps };

package/dist/box/index.js

@@ -0,0 +1,2 @@
+import { Box } from "./Box.js";
+export { Box };

package/dist/box/types.d.ts

@@ -0,0 +1,48 @@
+import { ColorToken, RadiiToken, ShadowToken, SpacingToken } from "../system/defaults/index.js";
+import "../system/index.js";
+import { ComponentPropsWithRef } from "react";
+//#region box/types.d.ts
+/**
+ * Box 自有样式属性。
+ */
+export type BoxOwnProps = {
+  /**
+   * 内边距，对应 `padding`。
+   */
+  p?: SpacingToken;
+  /**
+   * 水平内边距，对应 `padding-inline`。
+   */
+  px?: SpacingToken;
+  /**
+   * 垂直内边距，对应 `padding-block`。
+   */
+  py?: SpacingToken;
+  /**
+   * 背景色语义 token。
+   */
+  bg?: ColorToken;
+  /**
+   * 圆角预设。
+   */
+  rounded?: RadiiToken;
+  /**
+   * 是否显示默认 1px solid 边框。
+   */
+  border?: boolean;
+  /**
+   * 边框颜色语义 token。
+   */
+  borderColor?: ColorToken;
+  /**
+   * 阴影预设。
+   */
+  shadow?: ShadowToken;
+};
+/**
+ * 通用样式容器属性。
+ *
+ * 使用 `interface` 扩展原生 div props，便于 Storybook Docgen 推断 Controls。
+ */
+export interface BoxProps extends ComponentPropsWithRef<'div'>, BoxOwnProps {}
+//#endregion

package/dist/button/Button.js

@@ -1,7 +1,7 @@
 import { buttonPrefixCls } from "./constants.js";
 import LoadingIcon from "./LoadingIcon.js";
-import { hasValue, isNil } from "@omnific/utils";
 import { clsx } from "clsx";
+import { hasValue, isNil } from "@omnific/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region button/Button.tsx
 /**

package/dist/button/LoadingIcon.js

@@ -2,8 +2,8 @@ import { buttonPrefixCls } from "./constants.js";
 import "../transition/types.js";
 import { useTransitionStatus } from "../transition/useTransitionStatus.js";
 import { clsx } from "clsx";
-import { LoadingIcon } from "@omnific/icons";
 import { jsx } from "react/jsx-runtime";
+import { LoadingIcon } from "@omnific/icons";
 //#region button/LoadingIcon.tsx
 /**
 * 渲染按钮内部的加载图标。

package/dist/main.d.ts

@@ -1,7 +1,10 @@
+import { BoxProps } from "./box/types.js";
+import { Box } from "./box/Box.js";
+import "./box/index.js";
 import { ButtonProps } from "./button/types.js";
 import { Button } from "./button/Button.js";
 import "./button/index.js";
 import { ENTERED, ENTERING, EXITED, EXITING, TransitionOptions, UNMOUNTED } from "./transition/types.js";
 import { useTransitionStatus } from "./transition/useTransitionStatus.js";
 import "./transition/index.js";
-export { Button, type ButtonProps, ENTERED, ENTERING, EXITED, EXITING, type TransitionOptions, UNMOUNTED, useTransitionStatus };
+export { Box, type BoxProps, Button, type ButtonProps, ENTERED, ENTERING, EXITED, EXITING, type TransitionOptions, UNMOUNTED, useTransitionStatus };

package/dist/main.js

@@ -1,4 +1,5 @@
+import { Box } from "./box/Box.js";
 import { ENTERED, ENTERING, EXITED, EXITING, UNMOUNTED } from "./transition/types.js";
 import { useTransitionStatus } from "./transition/useTransitionStatus.js";
 import { Button } from "./button/Button.js";
-export { Button, ENTERED, ENTERING, EXITED, EXITING, UNMOUNTED, useTransitionStatus };
+export { Box, Button, ENTERED, ENTERING, EXITED, EXITING, UNMOUNTED, useTransitionStatus };

package/dist/styles.css

@@ -1,38 +1,17 @@
-:root {
-  --color-text: rgb(0 0 0 / 88%);
-  --color-bg: #ffffff;
-  --color-border: #d9d9d9;
-  --color-primary: #1677ff;
-  --color-primary-hover: #4096ff;
-  --color-primary-active: #0958d9;
-  --color-primary-fg: #ffffff;
-  --color-danger: #ff4d4f;
-  --color-danger-hover: #ff7875;
-  --color-danger-active: #d9363e;
-  --color-danger-fg: #ffffff;
-  --color-disabled-text: rgb(0 0 0 / 25%);
-  --color-disabled-bg: rgb(239 239 239);
-  --focus-ring: rgb(21 112 239 / 25%);
-  --font-sans:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-size-md: 14px;
-  --font-size-lg: 16px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --control-height-sm: 24px;
-  --control-height-md: 32px;
-  --control-height-lg: 40px;
-  --shadow-control: 0 2px 0 rgb(0 0 0 / 2%);
-  --shadow-primary: 0 2px 0 rgb(5 145 255 / 10%);
+.atelier-box {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.atelier-box-border {
+  border: 1px solid var(--color-border);
 }
 
 .atelier-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: var(--btn-size, var(--control-height-md));
+  height: var(--control-height-md);
   padding: 0 15px;
   line-height: 1.5715;
   white-space: nowrap;
@@ -41,16 +20,22 @@
   margin-right: 8px;
 }
 .atelier-button-size-small {
-  --btn-size: var(--control-height-sm);
+  height: var(--control-height-sm);
   padding: 0 7px;
 }
 .atelier-button-size-large {
-  --btn-size: var(--control-height-lg);
+  height: var(--control-height-lg);
 }
 .atelier-button-shape-circle, .atelier-button-icon-only {
-  width: var(--btn-size, var(--control-height-md));
+  width: var(--control-height-md);
   padding: 0;
 }
+.atelier-button-size-small.atelier-button-shape-circle, .atelier-button-size-small.atelier-button-icon-only {
+  width: var(--control-height-sm);
+}
+.atelier-button-size-large.atelier-button-shape-circle, .atelier-button-size-large.atelier-button-icon-only {
+  width: var(--control-height-lg);
+}
 .atelier-button-block {
   display: flex;
   width: 100%;
@@ -66,37 +51,33 @@
   font: inherit;
   font-family: var(--font-sans);
   font-weight: 400;
-  color: var(--btn-color, var(--color-text));
+  color: var(--color-fg);
   user-select: none;
   cursor: pointer;
-  background: var(--btn-background, var(--color-bg));
-  border: 1px solid var(--btn-border, var(--color-border));
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  box-shadow: var(--btn-shadow, var(--shadow-control));
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
   transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 .atelier-button:not(.atelier-button-loading):hover:not(:disabled) {
-  color: var(--btn-hover-color, var(--color-primary-hover));
-  background: var(--btn-hover, var(--color-bg));
-  border-color: var(--btn-hover-border, var(--color-primary-hover));
+  color: var(--color-blue-hover);
+  background: var(--color-bg);
+  border-color: var(--color-blue-hover);
 }
 .atelier-button:not(.atelier-button-loading):active:not(:disabled) {
-  color: var(--btn-active-color, var(--color-primary-active));
-  background: var(--btn-active, var(--color-bg));
-  border-color: var(--btn-active-border, var(--color-primary-active));
+  color: var(--color-blue-active);
+  background: var(--color-bg);
+  border-color: var(--color-blue-active);
 }
 .atelier-button:focus-visible {
-  outline: 3px solid var(--focus-ring);
+  outline: 3px solid var(--focus-ring-default);
   outline-offset: 2px;
 }
-.atelier-button:disabled, .atelier-button-loading {
-  box-shadow: none;
-}
 .atelier-button:disabled {
-  color: var(--color-disabled-text);
+  color: var(--color-fg-disabled);
   cursor: not-allowed;
-  background: var(--color-disabled-bg);
+  background: var(--color-bg-disabled);
   border-color: var(--color-border);
 }
 .atelier-button-loading {
@@ -117,7 +98,13 @@
   border-radius: var(--radius-lg);
 }
 .atelier-button-shape-round {
-  border-radius: var(--btn-size, var(--control-height-md));
+  border-radius: var(--control-height-md);
+}
+.atelier-button-size-small.atelier-button-shape-round {
+  border-radius: var(--control-height-sm);
+}
+.atelier-button-size-large.atelier-button-shape-round {
+  border-radius: var(--control-height-lg);
 }
 .atelier-button-shape-circle, .atelier-button-icon-only, .atelier-button-loading-icon {
   border-radius: 50%;
@@ -126,43 +113,52 @@
   display: inline-block;
 }
 .atelier-button-primary {
-  --btn-color: var(--color-primary-fg);
-  --btn-background: var(--color-primary);
-  --btn-border: transparent;
-  --btn-hover: var(--color-primary-hover);
-  --btn-active: var(--color-primary-active);
-  --btn-hover-color: var(--color-primary-fg);
-  --btn-active-color: var(--color-primary-fg);
-  --btn-hover-border: transparent;
-  --btn-active-border: transparent;
-  --btn-shadow: var(--shadow-primary);
+  color: var(--color-blue-contrast);
+  background: var(--color-blue-solid);
+  border-color: transparent;
+}
+.atelier-button-primary:not(.atelier-button-loading):hover:not(:disabled) {
+  color: var(--color-blue-contrast);
+  background: var(--color-blue-hover);
+  border-color: transparent;
+}
+.atelier-button-primary:not(.atelier-button-loading):active:not(:disabled) {
+  color: var(--color-blue-contrast);
+  background: var(--color-blue-active);
+  border-color: transparent;
 }
 .atelier-button-dashed {
   border-style: dashed;
 }
 .atelier-button-outline {
-  --btn-color: var(--color-primary);
-  --btn-background: transparent;
-  --btn-border: var(--color-primary);
-  --btn-hover: transparent;
-  --btn-active: transparent;
-  --btn-hover-color: var(--color-primary-hover);
-  --btn-active-color: var(--color-primary-active);
-  --btn-hover-border: var(--color-primary-hover);
-  --btn-active-border: var(--color-primary-active);
-  --btn-shadow: none;
+  color: var(--color-blue-solid);
+  background: transparent;
+  border-color: var(--color-blue-solid);
+}
+.atelier-button-outline:not(.atelier-button-loading):hover:not(:disabled) {
+  color: var(--color-blue-hover);
+  background: transparent;
+  border-color: var(--color-blue-hover);
+}
+.atelier-button-outline:not(.atelier-button-loading):active:not(:disabled) {
+  color: var(--color-blue-active);
+  background: transparent;
+  border-color: var(--color-blue-active);
 }
 .atelier-button-danger {
-  --btn-color: var(--color-danger-fg);
-  --btn-background: var(--color-danger);
-  --btn-border: transparent;
-  --btn-hover: var(--color-danger-hover);
-  --btn-active: var(--color-danger-active);
-  --btn-hover-color: var(--color-danger-fg);
-  --btn-active-color: var(--color-danger-fg);
-  --btn-hover-border: transparent;
-  --btn-active-border: transparent;
-  --btn-shadow: var(--shadow-primary);
+  color: var(--color-red-contrast);
+  background: var(--color-red-solid);
+  border-color: transparent;
+}
+.atelier-button-danger:not(.atelier-button-loading):hover:not(:disabled) {
+  color: var(--color-red-contrast);
+  background: var(--color-red-hover);
+  border-color: transparent;
+}
+.atelier-button-danger:not(.atelier-button-loading):active:not(:disabled) {
+  color: var(--color-red-contrast);
+  background: var(--color-red-active);
+  border-color: transparent;
 }
 .atelier-button-loading-icon > svg {
   animation: atelier-button-spin 0.7s linear infinite;

package/dist/system/create-system.d.ts

@@ -0,0 +1,9 @@
+import { SystemContext, ThemeTokens } from "./types.js";
+//#region system/create-system.d.ts
+/**
+ * 合并 tokens 并返回精简版 SystemContext。
+ *
+ * 第一个参数可以是主题名称，也可以直接传入 ThemeTokens；省略主题名称时使用 `default`。
+ */
+export declare function createSystem(nameOrTokenSet: string | ThemeTokens, ...tokenSets: ThemeTokens[]): SystemContext;
+//#endregion

package/dist/system/create-system.js

@@ -0,0 +1,21 @@
+import { mergeTokens } from "./merge-tokens.js";
+import { isString } from "@omnific/utils";
+//#region system/create-system.ts
+const DEFAULT_SYSTEM_NAME = "default";
+/**
+* 合并 tokens 并返回精简版 SystemContext。
+*
+* 第一个参数可以是主题名称，也可以直接传入 ThemeTokens；省略主题名称时使用 `default`。
+*/
+function createSystem(nameOrTokenSet, ...tokenSets) {
+	const name = isString(nameOrTokenSet) ? nameOrTokenSet : DEFAULT_SYSTEM_NAME;
+	const mergedTokenSets = isString(nameOrTokenSet) ? tokenSets : [nameOrTokenSet, ...tokenSets];
+	const { tokens, cssVars } = mergeTokens(...mergedTokenSets);
+	return {
+		name,
+		_config: tokens,
+		cssVars
+	};
+}
+//#endregion
+export { createSystem };

package/dist/system/css-vars.d.ts

@@ -0,0 +1,52 @@
+import { SystemContext, ThemeTokens } from "./types.js";
+import { CSSProperties } from "react";
+//#region system/css-vars.d.ts
+/**
+ * CSS 属性 → ThemeTokens 分类。
+ */
+declare const STYLE_TOKEN: {
+  readonly padding: "spacing";
+  readonly paddingInline: "spacing";
+  readonly paddingBlock: "spacing";
+  readonly background: "colors";
+  readonly borderColor: "colors";
+  readonly borderRadius: "radii";
+  readonly boxShadow: "shadows";
+};
+/**
+ * 将 token 分类与键转为扁平 CSS 变量名。
+ *
+ * @example
+ * toCssVarName('colors', 'bg.muted') // '--color-bg-muted'
+ * toCssVarName('focusRings', 'default') // '--focus-ring-default'
+ */
+export declare const toCssVarName: (category: keyof ThemeTokens, key: string) => string;
+type StyleProperty = keyof typeof STYLE_TOKEN;
+/**
+ * `styleFromTokens` 单条：`[CSS 属性, token 键]`。
+ */
+export type TokenStyleEntry = readonly [StyleProperty, string | number | null | undefined];
+/**
+ * 将 token 取值写成可合并进 React `style` 的 CSS 属性对象；空值跳过。
+ * ThemeTokens 分类由 `STYLE_TOKEN` 按 CSS 属性映射。
+ * 传入的 `style` 后合并，可覆盖同名属性。
+ *
+ * @example
+ * styleFromTokens(
+ *   [
+ *     ['padding', 4],
+ *     ['background', 'bg.muted'],
+ *   ],
+ *   { color: 'red' },
+ * )
+ * // { padding: 'var(--space-4)', background: 'var(--color-bg-muted)', color: 'red' }
+ */
+export declare const styleFromTokens: (entries: readonly TokenStyleEntry[], style?: CSSProperties) => CSSProperties;
+/**
+ * 将 `system.cssVars` 写入文档级 `<style>`（挂在 `document.head` 下）。
+ *
+ * 以 `system.name` 为 key 复用节点。返回卸载函数。
+ * 目标节点设置 `data-atelier-theme={system.name}`。
+ */
+export declare const applyCssVars: (system: SystemContext, target: HTMLElement) => (() => void);
+//#endregion

package/dist/system/css-vars.js

@@ -0,0 +1,112 @@
+import { hasValue, isNil } from "@omnific/utils";
+//#region system/css-vars.ts
+/**
+* Token 分类 → CSS 变量名前缀。
+*/
+const CATEGORY_PREFIX = {
+	colors: "color",
+	spacing: "space",
+	radii: "radius",
+	shadows: "shadow",
+	fonts: "font",
+	fontSizes: "font-size",
+	controlHeights: "control-height",
+	focusRings: "focus-ring"
+};
+/**
+* CSS 属性 → ThemeTokens 分类。
+*/
+const STYLE_TOKEN = {
+	padding: "spacing",
+	paddingInline: "spacing",
+	paddingBlock: "spacing",
+	background: "colors",
+	borderColor: "colors",
+	borderRadius: "radii",
+	boxShadow: "shadows"
+};
+/**
+* 主题作用域属性；值为 `system.name`（含挂在 `documentElement` 上时）。
+*/
+const THEME_ATTR = "data-atelier-theme";
+/**
+* `system.name` → 样式节点与引用次数。
+*/
+const stylesByName = /* @__PURE__ */ new Map();
+/**
+* 将 token 分类与键转为扁平 CSS 变量名。
+*
+* @example
+* toCssVarName('colors', 'bg.muted') // '--color-bg-muted'
+* toCssVarName('focusRings', 'default') // '--focus-ring-default'
+*/
+const toCssVarName = (category, key) => {
+	const suffix = key.replaceAll(".", "-");
+	return `--${CATEGORY_PREFIX[category]}-${suffix}`;
+};
+/**
+* 将 token 取值写成可合并进 React `style` 的 CSS 属性对象；空值跳过。
+* ThemeTokens 分类由 `STYLE_TOKEN` 按 CSS 属性映射。
+* 传入的 `style` 后合并，可覆盖同名属性。
+*
+* @example
+* styleFromTokens(
+*   [
+*     ['padding', 4],
+*     ['background', 'bg.muted'],
+*   ],
+*   { color: 'red' },
+* )
+* // { padding: 'var(--space-4)', background: 'var(--color-bg-muted)', color: 'red' }
+*/
+const styleFromTokens = (entries, style) => {
+	const tokenStyle = {};
+	for (const [property, token] of entries) {
+		if (isNil(token)) continue;
+		tokenStyle[property] = `var(${toCssVarName(STYLE_TOKEN[property], String(token))})`;
+	}
+	return isNil(style) ? tokenStyle : {
+		...tokenStyle,
+		...style
+	};
+};
+const toCssText = (system) => {
+	const lines = [];
+	for (const [name, value] of Object.entries(system.cssVars)) lines.push(`  ${name}: ${value};`);
+	return `${`[${THEME_ATTR}="${CSS.escape(system.name)}"]`} {\n${lines.join("\n")}\n}`;
+};
+/**
+* 将 `system.cssVars` 写入文档级 `<style>`（挂在 `document.head` 下）。
+*
+* 以 `system.name` 为 key 复用节点。返回卸载函数。
+* 目标节点设置 `data-atelier-theme={system.name}`。
+*/
+const applyCssVars = (system, target) => {
+	const { document: doc } = globalThis;
+	if (isNil(doc) || isNil(doc.head)) return () => {};
+	const { name } = system;
+	target.setAttribute(THEME_ATTR, name);
+	let entry = stylesByName.get(name);
+	if (hasValue(entry) && entry.style.isConnected) entry.count += 1;
+	else {
+		const style = doc.createElement("style");
+		style.dataset.atelierCssVars = "";
+		style.dataset.atelierSystem = name;
+		style.textContent = toCssText(system);
+		doc.head.append(style);
+		entry = {
+			style,
+			count: 1
+		};
+		stylesByName.set(name, entry);
+	}
+	return () => {
+		target.removeAttribute(THEME_ATTR);
+		entry.count -= 1;
+		if (entry.count > 0) return;
+		entry.style.remove();
+		stylesByName.delete(name);
+	};
+};
+//#endregion
+export { applyCssVars, styleFromTokens, toCssVarName };

package/dist/system/default-system.d.ts

@@ -0,0 +1,7 @@
+import { SystemContext } from "./types.js";
+//#region system/default-system.d.ts
+/**
+ * 基于 `defaultConfig` 的共享默认 system（单例，可直接 `useTheme` / `applyCssVars`）。
+ */
+export declare const defaultSystem: SystemContext;
+//#endregion

package/dist/system/default-system.js

@@ -0,0 +1,9 @@
+import { createSystem } from "./create-system.js";
+import { defaultConfig } from "./defaults/index.js";
+//#region system/default-system.ts
+/**
+* 基于 `defaultConfig` 的共享默认 system（单例，可直接 `useTheme` / `applyCssVars`）。
+*/
+const defaultSystem = createSystem(defaultConfig);
+//#endregion
+export { defaultSystem };