@anyknown/ui 0.8.0 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +2 -2
  2. package/dist/brand.css +19 -10
  3. package/dist/components/input/Input.d.ts +3 -1
  4. package/dist/components/input/Input.js +3 -2
  5. package/dist/tokens.css +7 -3
  6. package/dist/tokens.stylex.js +3 -3
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -118,9 +118,9 @@ app 自己的樣式一律引用 tokens,不寫死色值。`playground/` 就是照
118
118
 
119
119
  ## 視覺方向:平面、neutral
120
120
 
121
- 白紙(#FFFFFF)、墨色文字、墨色 accent(#1D1D1F);標題與內文都是 Geist,時間軸/數據用 Geist Mono。織物設計語言與 ledger palette 封存在 `archive/fiber` branch。使用端需安裝字體:
121
+ 白紙(#FFFFFF)、墨色文字、墨色 accent(#1D1D1F);標題與內文都是 Geist,時間軸/數據用 Geist Mono,中文接 Noto Sans TC(沒裝時退到蘋方/微軟正黑)。織物設計語言與 ledger palette 封存在 `archive/fiber` branch。使用端需安裝字體:
122
122
 
123
123
  ```bash
124
- pnpm add @fontsource-variable/geist @fontsource-variable/geist-mono
124
+ pnpm add @fontsource-variable/geist @fontsource-variable/geist-mono @fontsource-variable/noto-sans-tc
125
125
  ```
126
126
 
package/dist/brand.css CHANGED
@@ -7,7 +7,7 @@
7
7
  * 每個 class 上面一行「//」註解是它的用途,design.md 的詞彙表從這裡掃出來。
8
8
  * 詞彙刻意小,不在這裡的 class 就是不准用;要新的排版需求先回來改這份,再改 DESIGN.md。 */
9
9
 
10
- @import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap");
10
+ @import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap");
11
11
  /* Tokens as plain CSS variables — for non-StyleX consumers
12
12
  * (desktop uses Tailwind v4 @theme; reference these vars there).
13
13
  * Source of truth: tokens.stylex.ts. Keep values in sync manually for now. */
@@ -52,9 +52,13 @@ html {
52
52
  --ak-shadow-popover: 0 8px 24px rgba(35, 33, 29, 0.1);
53
53
  --ak-shadow-raised: 0 1px 2px rgba(35, 33, 29, 0.08);
54
54
 
55
- --ak-font-display: "Geist Variable", system-ui, sans-serif;
56
- --ak-font-body: "Geist Variable", system-ui, sans-serif;
57
- --ak-font-mono: "Geist Mono Variable", ui-monospace, monospace;
55
+ --ak-font-display:
56
+ "Geist Variable", "Noto Sans TC Variable", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui,
57
+ sans-serif;
58
+ --ak-font-body:
59
+ "Geist Variable", "Noto Sans TC Variable", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui,
60
+ sans-serif;
61
+ --ak-font-mono: "Geist Mono Variable", "Noto Sans TC Variable", "Noto Sans TC", ui-monospace, monospace;
58
62
 
59
63
  --ak-radius-sm: 0.375rem;
60
64
  --ak-radius-md: 0.5rem;
@@ -176,9 +180,9 @@ html {
176
180
  --ak-layer5: #d9d9de;
177
181
  --ak-shadow-popover: 0 8px 24px rgba(35, 33, 29, 0.1);
178
182
  --ak-shadow-raised: 0 1px 2px rgba(35, 33, 29, 0.08);
179
- --ak-font-display: "Geist Variable", system-ui, sans-serif;
180
- --ak-font-body: "Geist Variable", system-ui, sans-serif;
181
- --ak-font-mono: "Geist Mono Variable", ui-monospace, monospace;
183
+ --ak-font-display:
184
+ --ak-font-body:
185
+ --ak-font-mono: "Geist Mono Variable", "Noto Sans TC Variable", "Noto Sans TC", ui-monospace, monospace;
182
186
  --ak-radius-sm: 0.375rem;
183
187
  --ak-radius-md: 0.5rem;
184
188
  --ak-radius-lg: 0.75rem;
@@ -228,9 +232,14 @@ html {
228
232
 
229
233
  :root {
230
234
  /* Google Fonts 的家族名沒有 Variable 後綴;兩個名字都列,fontsource 或 Google Fonts 都能接上 */
231
- --ak-font-display: "Geist Variable", "Geist", system-ui, sans-serif;
232
- --ak-font-body: "Geist Variable", "Geist", system-ui, sans-serif;
233
- --ak-font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
235
+ --ak-font-display:
236
+ "Geist Variable", "Geist", "Noto Sans TC Variable", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
237
+ system-ui, sans-serif;
238
+ --ak-font-body:
239
+ "Geist Variable", "Geist", "Noto Sans TC Variable", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
240
+ system-ui, sans-serif;
241
+ --ak-font-mono:
242
+ "Geist Mono Variable", "Geist Mono", "Noto Sans TC Variable", "Noto Sans TC", ui-monospace, monospace;
234
243
  }
235
244
 
236
245
  body {
package/dist/components/input/Input.d.ts CHANGED
@@ -44,7 +44,9 @@ export declare const controlStyles: Readonly<{
44
44
  export type InputProps = Omit<ComponentProps<"input">, "size"> & {
45
45
  size?: "sm" | "md";
46
46
  invalid?: boolean;
47
+ /** Keys, URLs, ids: anything read character by character. */
48
+ mono?: boolean;
47
49
  leadingIcon?: ReactNode;
48
50
  sx?: StyleArg;
49
51
  };
50
- export declare function Input({ size, invalid, leadingIcon, sx, ...props }: InputProps): import("react").JSX.Element;
52
+ export declare function Input({ size, invalid, mono, leadingIcon, sx, ...props }: InputProps): import("react").JSX.Element;
package/dist/components/input/Input.js CHANGED
@@ -41,6 +41,7 @@ export const controlStyles = stylex.create({
41
41
  sm: { minHeight: "1.75rem", paddingBlock: space.xxs, paddingInline: space.xs, fontSize: text.xs },
42
42
  });
43
43
  const styles = stylex.create({
44
+ mono: { fontFamily: font.mono },
44
45
  affix: { position: "relative", display: "block", width: "100%" },
45
46
  icon: {
46
47
  position: "absolute",
@@ -54,10 +55,10 @@ const styles = stylex.create({
54
55
  withIconMd: { paddingInlineStart: space.xl },
55
56
  withIconSm: { paddingInlineStart: space.lg },
56
57
  });
57
- export function Input({ size = "md", invalid, leadingIcon, sx, ...props }) {
58
+ export function Input({ size = "md", invalid, mono = false, leadingIcon, sx, ...props }) {
58
59
  const { invalid: fieldInvalid, ...field } = useFieldControl(props);
59
60
  const isInvalid = invalid ?? fieldInvalid;
60
- const input = (_jsx("input", { ...props, ...field, "aria-invalid": isInvalid || undefined, ...styled(props, controlStyles.base, controlStyles[size], isInvalid && controlStyles.invalid, Boolean(leadingIcon) && (size === "sm" ? styles.withIconSm : styles.withIconMd), sx) }));
61
+ const input = (_jsx("input", { ...props, ...field, "aria-invalid": isInvalid || undefined, ...styled(props, controlStyles.base, controlStyles[size], isInvalid && controlStyles.invalid, mono && styles.mono, Boolean(leadingIcon) && (size === "sm" ? styles.withIconSm : styles.withIconMd), sx) }));
61
62
  if (!leadingIcon)
62
63
  return input;
63
64
  return (_jsxs("span", { ...stylex.props(styles.affix), children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.icon), children: leadingIcon }), input] }));
package/dist/tokens.css CHANGED
@@ -42,9 +42,13 @@ html {
42
42
  --ak-shadow-popover: 0 8px 24px rgba(35, 33, 29, 0.1);
43
43
  --ak-shadow-raised: 0 1px 2px rgba(35, 33, 29, 0.08);
44
44
 
45
- --ak-font-display: "Geist Variable", system-ui, sans-serif;
46
- --ak-font-body: "Geist Variable", system-ui, sans-serif;
47
- --ak-font-mono: "Geist Mono Variable", ui-monospace, monospace;
45
+ --ak-font-display:
46
+ "Geist Variable", "Noto Sans TC Variable", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui,
47
+ sans-serif;
48
+ --ak-font-body:
49
+ "Geist Variable", "Noto Sans TC Variable", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui,
50
+ sans-serif;
51
+ --ak-font-mono: "Geist Mono Variable", "Noto Sans TC Variable", "Noto Sans TC", ui-monospace, monospace;
48
52
 
49
53
  --ak-radius-sm: 0.375rem;
50
54
  --ak-radius-md: 0.5rem;
package/dist/tokens.stylex.js CHANGED
@@ -51,9 +51,9 @@ export const shadow = stylex.defineVars({
51
51
  dock: "0 12px 40px rgba(0, 0, 0, 0.14)",
52
52
  });
53
53
  export const font = stylex.defineVars({
54
- display: "'Geist Variable', system-ui, sans-serif",
55
- body: "'Geist Variable', system-ui, sans-serif",
56
- mono: "'Geist Mono Variable', ui-monospace, monospace",
54
+ display: "'Geist Variable', 'Noto Sans TC Variable', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif",
55
+ body: "'Geist Variable', 'Noto Sans TC Variable', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif",
56
+ mono: "'Geist Mono Variable', 'Noto Sans TC Variable', 'Noto Sans TC', ui-monospace, monospace",
57
57
  });
58
58
  export const text = stylex.defineVars({
59
59
  xs: "0.75rem",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anyknown/ui",
3
- "version": "0.8.0",
3
+ "version": "0.8.2",
4
4
  "description": "AnyKnown design system — StyleX tokens, themes, and 38 components",
5
5
  "homepage": "https://ui.anyknown.com",
6
6
  "bugs": {