@omnific/atelier 0.1.0 → 0.2.0

package/dist/system/defaults/index.d.ts

@@ -0,0 +1,422 @@
+import { TokenCategoryKeys } from "../types.js";
+import { colors } from "./colors.js";
+import { controlHeights } from "./control-heights.js";
+import { focusRings } from "./focus-rings.js";
+import { fontSizes } from "./font-sizes.js";
+import { fonts } from "./fonts.js";
+import { radii } from "./radii.js";
+import { shadows } from "./shadows.js";
+import { spacing } from "./spacing.js";
+//#region system/defaults/index.d.ts
+/**
+ * 库默认 tokens：结构 scale + 语义色（含 `colors`）。
+ *
+ * 构建与默认用法：`createSystem(defaultConfig)`、`createSystem('default', defaultConfig)`，或直接使用 `defaultSystem`。
+ * 业务覆盖：`createSystem('app', defaultConfig, customTokens)`。
+ */
+export declare const defaultConfig: {
+  readonly spacing: {
+    readonly 0: {
+      readonly value: "0";
+    };
+    readonly 0.5: {
+      readonly value: "2px";
+    };
+    readonly 1: {
+      readonly value: "4px";
+    };
+    readonly 1.5: {
+      readonly value: "6px";
+    };
+    readonly 2: {
+      readonly value: "8px";
+    };
+    readonly 2.5: {
+      readonly value: "10px";
+    };
+    readonly 3: {
+      readonly value: "12px";
+    };
+    readonly 3.5: {
+      readonly value: "14px";
+    };
+    readonly 4: {
+      readonly value: "16px";
+    };
+    readonly 4.5: {
+      readonly value: "18px";
+    };
+    readonly 5: {
+      readonly value: "20px";
+    };
+    readonly 6: {
+      readonly value: "24px";
+    };
+    readonly 7: {
+      readonly value: "28px";
+    };
+    readonly 8: {
+      readonly value: "32px";
+    };
+    readonly 9: {
+      readonly value: "36px";
+    };
+    readonly 10: {
+      readonly value: "40px";
+    };
+    readonly 11: {
+      readonly value: "44px";
+    };
+    readonly 12: {
+      readonly value: "48px";
+    };
+    readonly 14: {
+      readonly value: "56px";
+    };
+    readonly 16: {
+      readonly value: "64px";
+    };
+    readonly 20: {
+      readonly value: "80px";
+    };
+    readonly 24: {
+      readonly value: "96px";
+    };
+    readonly 28: {
+      readonly value: "112px";
+    };
+    readonly 32: {
+      readonly value: "128px";
+    };
+    readonly 36: {
+      readonly value: "144px";
+    };
+    readonly 40: {
+      readonly value: "160px";
+    };
+    readonly 44: {
+      readonly value: "176px";
+    };
+    readonly 48: {
+      readonly value: "192px";
+    };
+    readonly 52: {
+      readonly value: "208px";
+    };
+    readonly 56: {
+      readonly value: "224px";
+    };
+    readonly 60: {
+      readonly value: "240px";
+    };
+    readonly 64: {
+      readonly value: "256px";
+    };
+    readonly 72: {
+      readonly value: "288px";
+    };
+    readonly 80: {
+      readonly value: "320px";
+    };
+    readonly 96: {
+      readonly value: "384px";
+    };
+  };
+  readonly radii: {
+    readonly none: {
+      readonly value: "0";
+    };
+    readonly '2xs': {
+      readonly value: "1px";
+    };
+    readonly xs: {
+      readonly value: "2px";
+    };
+    readonly sm: {
+      readonly value: "4px";
+    };
+    readonly md: {
+      readonly value: "6px";
+    };
+    readonly lg: {
+      readonly value: "8px";
+    };
+    readonly xl: {
+      readonly value: "12px";
+    };
+    readonly '2xl': {
+      readonly value: "16px";
+    };
+    readonly '3xl': {
+      readonly value: "24px";
+    };
+    readonly '4xl': {
+      readonly value: "32px";
+    };
+    readonly full: {
+      readonly value: "9999px";
+    };
+  };
+  readonly shadows: {
+    readonly xs: {
+      readonly value: "0px 1px 2px rgb(24 24 27 / 0.1), 0px 0px 1px rgb(24 24 27 / 0.2)";
+    };
+    readonly sm: {
+      readonly value: "0px 2px 4px rgb(24 24 27 / 0.1), 0px 0px 1px rgb(24 24 27 / 0.3)";
+    };
+    readonly md: {
+      readonly value: "0px 4px 8px rgb(24 24 27 / 0.1), 0px 0px 1px rgb(24 24 27 / 0.3)";
+    };
+    readonly lg: {
+      readonly value: "0px 8px 16px rgb(24 24 27 / 0.1), 0px 0px 1px rgb(24 24 27 / 0.3)";
+    };
+    readonly xl: {
+      readonly value: "0px 16px 24px rgb(24 24 27 / 0.1), 0px 0px 1px rgb(24 24 27 / 0.3)";
+    };
+    readonly '2xl': {
+      readonly value: "0px 24px 40px rgb(24 24 27 / 0.16), 0px 0px 1px rgb(24 24 27 / 0.3)";
+    };
+    readonly inner: {
+      readonly value: "inset 0 2px 4px 0 rgb(9 9 11 / 0.05)";
+    };
+    readonly inset: {
+      readonly value: "inset 0 0 0 1px rgb(9 9 11 / 0.05)";
+    };
+  };
+  readonly fonts: {
+    readonly sans: {
+      readonly value: "-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'";
+    };
+  };
+  readonly fontSizes: {
+    readonly md: {
+      readonly value: "14px";
+    };
+    readonly lg: {
+      readonly value: "16px";
+    };
+  };
+  readonly controlHeights: {
+    readonly sm: {
+      readonly value: "24px";
+    };
+    readonly md: {
+      readonly value: "32px";
+    };
+    readonly lg: {
+      readonly value: "40px";
+    };
+  };
+  readonly focusRings: {
+    readonly default: {
+      readonly value: "rgb(21 112 239 / 25%)";
+    };
+  };
+  readonly colors: {
+    readonly bg: {
+      readonly value: "#ffffff";
+    };
+    readonly 'bg.subtle': {
+      readonly value: "#fafafa";
+    };
+    readonly 'bg.muted': {
+      readonly value: "#f4f4f5";
+    };
+    readonly 'bg.emphasized': {
+      readonly value: "#e4e4e7";
+    };
+    readonly 'bg.inverted': {
+      readonly value: "#09090b";
+    };
+    readonly 'bg.panel': {
+      readonly value: "#ffffff";
+    };
+    readonly 'bg.disabled': {
+      readonly value: "rgb(239 239 239)";
+    };
+    readonly 'bg.error': {
+      readonly value: "#fef2f2";
+    };
+    readonly 'bg.warning': {
+      readonly value: "#fff7ed";
+    };
+    readonly 'bg.success': {
+      readonly value: "#f0fdf4";
+    };
+    readonly 'bg.info': {
+      readonly value: "#e6f4ff";
+    };
+    readonly fg: {
+      readonly value: "rgb(0 0 0 / 88%)";
+    };
+    readonly 'fg.muted': {
+      readonly value: "rgb(0 0 0 / 45%)";
+    };
+    readonly 'fg.subtle': {
+      readonly value: "rgb(0 0 0 / 25%)";
+    };
+    readonly 'fg.inverted': {
+      readonly value: "#ffffff";
+    };
+    readonly 'fg.disabled': {
+      readonly value: "rgb(0 0 0 / 25%)";
+    };
+    readonly 'fg.error': {
+      readonly value: "#ff4d4f";
+    };
+    readonly 'fg.warning': {
+      readonly value: "#faad14";
+    };
+    readonly 'fg.success': {
+      readonly value: "#52c41a";
+    };
+    readonly 'fg.info': {
+      readonly value: "#1677ff";
+    };
+    readonly border: {
+      readonly value: "#d9d9d9";
+    };
+    readonly 'border.muted': {
+      readonly value: "#f0f0f0";
+    };
+    readonly 'border.subtle': {
+      readonly value: "#fafafa";
+    };
+    readonly 'border.emphasized': {
+      readonly value: "#d9d9d9";
+    };
+    readonly 'border.inverted': {
+      readonly value: "#434343";
+    };
+    readonly 'border.error': {
+      readonly value: "#ff4d4f";
+    };
+    readonly 'border.warning': {
+      readonly value: "#faad14";
+    };
+    readonly 'border.success': {
+      readonly value: "#52c41a";
+    };
+    readonly 'border.info': {
+      readonly value: "#1677ff";
+    };
+    readonly 'gray.contrast': {
+      readonly value: "#ffffff";
+    };
+    readonly 'gray.fg': {
+      readonly value: "rgb(0 0 0 / 88%)";
+    };
+    readonly 'gray.subtle': {
+      readonly value: "#fafafa";
+    };
+    readonly 'gray.muted': {
+      readonly value: "#f5f5f5";
+    };
+    readonly 'gray.emphasized': {
+      readonly value: "#d9d9d9";
+    };
+    readonly 'gray.solid': {
+      readonly value: "#1f1f1f";
+    };
+    readonly 'gray.focus-ring': {
+      readonly value: "rgb(0 0 0 / 15%)";
+    };
+    readonly 'gray.border': {
+      readonly value: "#d9d9d9";
+    };
+    readonly 'blue.contrast': {
+      readonly value: "#ffffff";
+    };
+    readonly 'blue.fg': {
+      readonly value: "#1677ff";
+    };
+    readonly 'blue.subtle': {
+      readonly value: "#e6f4ff";
+    };
+    readonly 'blue.muted': {
+      readonly value: "#bae0ff";
+    };
+    readonly 'blue.emphasized': {
+      readonly value: "#69b1ff";
+    };
+    readonly 'blue.solid': {
+      readonly value: "#1677ff";
+    };
+    readonly 'blue.hover': {
+      readonly value: "#4096ff";
+    };
+    readonly 'blue.active': {
+      readonly value: "#0958d9";
+    };
+    readonly 'blue.focus-ring': {
+      readonly value: "rgb(21 112 239 / 25%)";
+    };
+    readonly 'blue.border': {
+      readonly value: "#1677ff";
+    };
+    readonly 'red.contrast': {
+      readonly value: "#ffffff";
+    };
+    readonly 'red.fg': {
+      readonly value: "#ff4d4f";
+    };
+    readonly 'red.subtle': {
+      readonly value: "#fff1f0";
+    };
+    readonly 'red.muted': {
+      readonly value: "#ffccc7";
+    };
+    readonly 'red.emphasized': {
+      readonly value: "#ffa39e";
+    };
+    readonly 'red.solid': {
+      readonly value: "#ff4d4f";
+    };
+    readonly 'red.hover': {
+      readonly value: "#ff7875";
+    };
+    readonly 'red.active': {
+      readonly value: "#d9363e";
+    };
+    readonly 'red.focus-ring': {
+      readonly value: "rgb(255 77 79 / 25%)";
+    };
+    readonly 'red.border': {
+      readonly value: "#ff4d4f";
+    };
+  };
+};
+/**
+ * 默认 `colors` 取值联合，供组件 props 引用。
+ */
+export type ColorToken = TokenCategoryKeys<typeof colors>;
+/**
+ * 默认 `spacing` 取值联合，供组件 props 引用。
+ */
+export type SpacingToken = TokenCategoryKeys<typeof spacing>;
+/**
+ * 默认 `radii` 取值联合，供组件 props 引用。
+ */
+export type RadiiToken = TokenCategoryKeys<typeof radii>;
+/**
+ * 默认 `shadows` 取值联合，供组件 props 引用。
+ */
+export type ShadowToken = TokenCategoryKeys<typeof shadows>;
+/**
+ * 默认 `fonts` 取值联合，供组件 props 引用。
+ */
+export type FontToken = TokenCategoryKeys<typeof fonts>;
+/**
+ * 默认 `fontSizes` 取值联合，供组件 props 引用。
+ */
+export type FontSizeToken = TokenCategoryKeys<typeof fontSizes>;
+/**
+ * 默认 `controlHeights` 取值联合，供组件 props 引用。
+ */
+export type ControlHeightToken = TokenCategoryKeys<typeof controlHeights>;
+/**
+ * 默认 `focusRings` 取值联合，供组件 props 引用。
+ */
+export type FocusRingToken = TokenCategoryKeys<typeof focusRings>;
+//#endregion
+export { colors, controlHeights, focusRings, fontSizes, fonts, radii, shadows, spacing };

package/dist/system/defaults/index.js

@@ -0,0 +1,28 @@
+import { colors } from "./colors.js";
+import { controlHeights } from "./control-heights.js";
+import { focusRings } from "./focus-rings.js";
+import { fontSizes } from "./font-sizes.js";
+import { fonts } from "./fonts.js";
+import { radii } from "./radii.js";
+import { shadows } from "./shadows.js";
+import { spacing } from "./spacing.js";
+import { defineTokens } from "../define-tokens.js";
+//#region system/defaults/index.ts
+/**
+* 库默认 tokens：结构 scale + 语义色（含 `colors`）。
+*
+* 构建与默认用法：`createSystem(defaultConfig)`、`createSystem('default', defaultConfig)`，或直接使用 `defaultSystem`。
+* 业务覆盖：`createSystem('app', defaultConfig, customTokens)`。
+*/
+const defaultConfig = defineTokens({
+	spacing,
+	radii,
+	shadows,
+	fonts,
+	fontSizes,
+	controlHeights,
+	focusRings,
+	colors
+});
+//#endregion
+export { colors, controlHeights, defaultConfig, focusRings, fontSizes, fonts, radii, shadows, spacing };

package/dist/system/defaults/radii.d.ts

@@ -0,0 +1,40 @@
+//#region system/defaults/radii.d.ts
+/**
+ * 默认圆角 scale（对齐 Chakra，值为 px）。
+ */
+export declare const radii: {
+  readonly none: {
+    readonly value: "0";
+  };
+  readonly '2xs': {
+    readonly value: "1px";
+  };
+  readonly xs: {
+    readonly value: "2px";
+  };
+  readonly sm: {
+    readonly value: "4px";
+  };
+  readonly md: {
+    readonly value: "6px";
+  };
+  readonly lg: {
+    readonly value: "8px";
+  };
+  readonly xl: {
+    readonly value: "12px";
+  };
+  readonly '2xl': {
+    readonly value: "16px";
+  };
+  readonly '3xl': {
+    readonly value: "24px";
+  };
+  readonly '4xl': {
+    readonly value: "32px";
+  };
+  readonly full: {
+    readonly value: "9999px";
+  };
+};
+//#endregion

package/dist/system/defaults/radii.js

@@ -0,0 +1,19 @@
+//#region system/defaults/radii.ts
+/**
+* 默认圆角 scale（对齐 Chakra，值为 px）。
+*/
+const radii = {
+	none: { value: "0" },
+	"2xs": { value: "1px" },
+	xs: { value: "2px" },
+	sm: { value: "4px" },
+	md: { value: "6px" },
+	lg: { value: "8px" },
+	xl: { value: "12px" },
+	"2xl": { value: "16px" },
+	"3xl": { value: "24px" },
+	"4xl": { value: "32px" },
+	full: { value: "9999px" }
+};
+//#endregion
+export { radii };

package/dist/system/defaults/shadows.d.ts

@@ -0,0 +1,31 @@
+//#region system/defaults/shadows.d.ts
+/**
+ * 默认阴影档位。
+ */
+export declare const shadows: {
+  readonly xs: {
+    readonly value: "0px 1px 2px rgb(24 24 27 / 0.1), 0px 0px 1px rgb(24 24 27 / 0.2)";
+  };
+  readonly sm: {
+    readonly value: "0px 2px 4px rgb(24 24 27 / 0.1), 0px 0px 1px rgb(24 24 27 / 0.3)";
+  };
+  readonly md: {
+    readonly value: "0px 4px 8px rgb(24 24 27 / 0.1), 0px 0px 1px rgb(24 24 27 / 0.3)";
+  };
+  readonly lg: {
+    readonly value: "0px 8px 16px rgb(24 24 27 / 0.1), 0px 0px 1px rgb(24 24 27 / 0.3)";
+  };
+  readonly xl: {
+    readonly value: "0px 16px 24px rgb(24 24 27 / 0.1), 0px 0px 1px rgb(24 24 27 / 0.3)";
+  };
+  readonly '2xl': {
+    readonly value: "0px 24px 40px rgb(24 24 27 / 0.16), 0px 0px 1px rgb(24 24 27 / 0.3)";
+  };
+  readonly inner: {
+    readonly value: "inset 0 2px 4px 0 rgb(9 9 11 / 0.05)";
+  };
+  readonly inset: {
+    readonly value: "inset 0 0 0 1px rgb(9 9 11 / 0.05)";
+  };
+};
+//#endregion

package/dist/system/defaults/shadows.js

@@ -0,0 +1,16 @@
+//#region system/defaults/shadows.ts
+/**
+* 默认阴影档位。
+*/
+const shadows = {
+	xs: { value: "0px 1px 2px rgb(24 24 27 / 0.1), 0px 0px 1px rgb(24 24 27 / 0.2)" },
+	sm: { value: "0px 2px 4px rgb(24 24 27 / 0.1), 0px 0px 1px rgb(24 24 27 / 0.3)" },
+	md: { value: "0px 4px 8px rgb(24 24 27 / 0.1), 0px 0px 1px rgb(24 24 27 / 0.3)" },
+	lg: { value: "0px 8px 16px rgb(24 24 27 / 0.1), 0px 0px 1px rgb(24 24 27 / 0.3)" },
+	xl: { value: "0px 16px 24px rgb(24 24 27 / 0.1), 0px 0px 1px rgb(24 24 27 / 0.3)" },
+	"2xl": { value: "0px 24px 40px rgb(24 24 27 / 0.16), 0px 0px 1px rgb(24 24 27 / 0.3)" },
+	inner: { value: "inset 0 2px 4px 0 rgb(9 9 11 / 0.05)" },
+	inset: { value: "inset 0 0 0 1px rgb(9 9 11 / 0.05)" }
+};
+//#endregion
+export { shadows };

package/dist/system/defaults/spacing.d.ts

@@ -0,0 +1,112 @@
+//#region system/defaults/spacing.d.ts
+/**
+ * 默认间距 scale（对齐 Chakra，值为 px）。
+ */
+export declare const spacing: {
+  readonly 0: {
+    readonly value: "0";
+  };
+  readonly 0.5: {
+    readonly value: "2px";
+  };
+  readonly 1: {
+    readonly value: "4px";
+  };
+  readonly 1.5: {
+    readonly value: "6px";
+  };
+  readonly 2: {
+    readonly value: "8px";
+  };
+  readonly 2.5: {
+    readonly value: "10px";
+  };
+  readonly 3: {
+    readonly value: "12px";
+  };
+  readonly 3.5: {
+    readonly value: "14px";
+  };
+  readonly 4: {
+    readonly value: "16px";
+  };
+  readonly 4.5: {
+    readonly value: "18px";
+  };
+  readonly 5: {
+    readonly value: "20px";
+  };
+  readonly 6: {
+    readonly value: "24px";
+  };
+  readonly 7: {
+    readonly value: "28px";
+  };
+  readonly 8: {
+    readonly value: "32px";
+  };
+  readonly 9: {
+    readonly value: "36px";
+  };
+  readonly 10: {
+    readonly value: "40px";
+  };
+  readonly 11: {
+    readonly value: "44px";
+  };
+  readonly 12: {
+    readonly value: "48px";
+  };
+  readonly 14: {
+    readonly value: "56px";
+  };
+  readonly 16: {
+    readonly value: "64px";
+  };
+  readonly 20: {
+    readonly value: "80px";
+  };
+  readonly 24: {
+    readonly value: "96px";
+  };
+  readonly 28: {
+    readonly value: "112px";
+  };
+  readonly 32: {
+    readonly value: "128px";
+  };
+  readonly 36: {
+    readonly value: "144px";
+  };
+  readonly 40: {
+    readonly value: "160px";
+  };
+  readonly 44: {
+    readonly value: "176px";
+  };
+  readonly 48: {
+    readonly value: "192px";
+  };
+  readonly 52: {
+    readonly value: "208px";
+  };
+  readonly 56: {
+    readonly value: "224px";
+  };
+  readonly 60: {
+    readonly value: "240px";
+  };
+  readonly 64: {
+    readonly value: "256px";
+  };
+  readonly 72: {
+    readonly value: "288px";
+  };
+  readonly 80: {
+    readonly value: "320px";
+  };
+  readonly 96: {
+    readonly value: "384px";
+  };
+};
+//#endregion