npm - @godxjp/ui - Versions diffs - 16.8.0 → 16.9.1 - Mend

@godxjp/ui 16.8.0 → 16.9.1

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 (6) hide show

package/README.md +39 -3
package/dist/styles/base.css +23 -10
package/dist/styles/fonts.css +15 -0
package/dist/tokens/foundation.css +21 -9
package/package.json +2 -2
package/dist/theme/famgia.service.css +0 -43

package/README.md CHANGED Viewed

@@ -120,9 +120,10 @@ separate `@godxjp/ui/data-grid` (`DataGrid`) subpath has been merged in and remo
 ## Consumer setup — theme is self-contained
-The framework ships colors, fonts (M PLUS 2 via `@fontsource`), the type scale, and
-the wa-iro palette. A consumer's entire styling surface is **one import + content
-sources** — no `:root` overrides, no font `<link>`:
+The framework ships colors, the type scale, the wa-iro palette, and (opt-in)
+bundled fonts (Noto Sans JP + Montserrat via `@fontsource`). A consumer's entire
+styling surface is **one import + content sources** — no `:root` overrides, no
+font `<link>`:
 ```css
 /* resources/css/app.css */
@@ -131,6 +132,41 @@ sources** — no `:root` overrides, no font `<link>`:
 @source '../views';
 ```
+### Slim build — ship only the CSS you use
+`@godxjp/ui/styles` is the zero-config all-in-one (every component's CSS +
+bundled fonts). To ship only what you render, import the foundation plus the
+per-layer files you need (mirrors the JS subpaths — the CSS tree-shakes too):
+```css
+@import "@godxjp/ui/styles/base";          /* required: tokens + tailwind + base layer */
+@import "@godxjp/ui/styles/control";       /* Button, Input, Select, Textarea, toggles */
+@import "@godxjp/ui/styles/form-layout";   /* FormField */
+@import "@godxjp/ui/styles/dialog-layout"; /* Dialog */
+/* …only the layers you use. Layer files need `base` first (they use @layer/@apply). */
+```
+Skip `@godxjp/ui/styles/fonts` when you manage fonts yourself (next/font, etc.)
+and set the font tokens instead (see below). A marketing site using ~10
+components typically drops component CSS from ~142K → ~26K gzip.
+### Fonts — token-driven, per-language, no library hardcoding
+The base ships NO hardcoded brand face. Supply your own faces and set tokens —
+one face everywhere, or per-language (no `[lang]` selectors to write):
+```css
+:root {
+  --font-sans-base: var(--my-latin), system-ui, sans-serif; /* default face */
+  --font-sans-ja: "Noto Sans JP", var(--font-sans-base);    /* lang="ja" */
+  --font-sans-vi: "Montserrat", var(--font-sans-base);      /* lang="vi" */
+  /* also: --font-sans-ko, --font-sans-zh-hans, --font-sans-zh-hant */
+}
+```
+`styles/base.css` wires each `[lang]` to its slot (falling back to
+`--font-sans-base`); `styles/fonts` fills these slots for the bundled faces.
 ```tsx
 import { AppProvider } from "@godxjp/ui/app"; // locale, tz, date/time format
 import { PageContainer } from "@godxjp/ui/layout"; // every page wraps in this

package/dist/styles/base.css CHANGED Viewed

@@ -22,17 +22,30 @@
  * ───────────────────────────────────────────────────────────────────────── */
 @import "tailwindcss";
-/* Vietnamese locale → Montserrat (set by AppProvider via <html lang="vi">). Overrides the
- * --font-family-sans token so every body/heading rule that reads it switches automatically.
- * Only takes visible effect when the Montserrat face is loaded (@godxjp/ui/styles/fonts, or
- * your own); consumers managing their own fonts override this token directly. */
-:root:lang(vi),
+/* Per-language font wiring — token-only, NO hardcoded faces. Each locale reads
+ * an OPTIONAL per-lang slot token (empty by default) and falls back to the
+ * base sans. Consumers switch a locale's face by setting its slot, e.g.
+ *   :root { --font-sans-ja: "Noto Sans JP", var(--font-sans-base); }
+ * without writing any [lang] selectors. The opt-in bundle styles/fonts fills
+ * these slots for its Noto Sans JP + Montserrat faces. `--font-sans-base` is a
+ * separate token (not --font-family-sans) so the fallback can't self-reference. */
+[lang="ja"] {
+  --font-family-sans: var(--font-sans-ja, var(--font-sans-base));
+}
+[lang="ko"] {
+  --font-family-sans: var(--font-sans-ko, var(--font-sans-base));
+}
 [lang="vi"] {
-  /* Montserrat for Latin/Vietnamese; Noto Sans JP kept as the tail so any 日本語 in a vi-locale
-   * screen still has the bundled JP face (Montserrat has no CJK glyphs). */
-  --font-family-sans:
-    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-    system-ui, "Noto Sans JP", sans-serif;
+  --font-family-sans: var(--font-sans-vi, var(--font-sans-base));
+}
+[lang="zh"],
+[lang="zh-Hans"],
+[lang="zh-CN"] {
+  --font-family-sans: var(--font-sans-zh-hans, var(--font-sans-base));
+}
+[lang="zh-Hant"],
+[lang="zh-TW"] {
+  --font-family-sans: var(--font-sans-zh-hant, var(--font-sans-base));
 }
 /* Guarantee the full set of semantic color utilities ships in the compiled CSS

package/dist/styles/fonts.css CHANGED Viewed

@@ -20,3 +20,18 @@
 @import "@fontsource/montserrat/400.css";
 @import "@fontsource/montserrat/500.css";
 @import "@fontsource/montserrat/700.css";
+/* Fill the font-token slots (see tokens/foundation.css + styles/base.css) with
+ * the bundled faces, so the all-in-one `@godxjp/ui/styles` entry stays
+ * zero-config: Noto Sans JP is the default face (Japanese + clean Latin), and
+ * the Vietnamese locale leads with Montserrat (Noto Sans JP tail keeps CJK
+ * glyphs, which Montserrat lacks). Consumers on the per-layer setup who supply
+ * their own faces simply DON'T import this file and set the slots themselves. */
+:root {
+  --font-sans-base:
+    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    system-ui, "Hiragino Sans", sans-serif;
+  --font-sans-vi:
+    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    system-ui, "Noto Sans JP", sans-serif;
+}

package/dist/tokens/foundation.css CHANGED Viewed

@@ -145,15 +145,27 @@
   --gradient-hero: none;
   --gradient-glow: none;
-  /* Sans stack — script-aware per the international convention for mixed
-   * Latin/CJK UI: native Latin system fonts FIRST (clean, familiar English &
-   * DEFAULT face is the bundled "Noto Sans JP" (Japanese + clean Latin), with system sans as
-   * the network/loading fallback. The Vietnamese locale swaps this token to Montserrat via
-   * `:root:lang(vi)` in styles/index.css (set by AppProvider's <html lang>). Browsers resolve
-   * fonts per-glyph, so 日本語 and Latin both render in Noto Sans JP when it's loaded. */
-  --font-family-sans:
-    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-    system-ui, "Hiragino Sans", sans-serif;
+  /* Sans stack — FONT-AGNOSTIC by default. The library ships NO hardcoded brand
+   * face here: `--font-sans-base` is a pure system stack so godx renders cleanly
+   * with zero font setup. Consumers supply their own faces (next/font, @fontsource,
+   * self-host) and set the tokens — never edit the library.
+   *
+   * Two ways to theme fonts, both token-only (no [lang] selectors to write):
+   *   1. One face everywhere → override `--font-sans-base`.
+   *   2. Per-language faces → set the per-lang SLOT tokens; styles/base.css wires
+   *      each `[lang]` to read its slot with `--font-sans-base` as the fallback:
+   *        --font-sans-ja       (lang="ja")
+   *        --font-sans-ko       (lang="ko")
+   *        --font-sans-vi       (lang="vi")
+   *        --font-sans-zh-hans  (lang="zh" | "zh-Hans" | "zh-CN")
+   *        --font-sans-zh-hant  (lang="zh-Hant" | "zh-TW")
+   *      e.g. `--font-sans-ja: "Noto Sans JP", var(--font-sans-base);`
+   * The opt-in bundle `@godxjp/ui/styles/fonts` fills these slots for its bundled
+   * Noto Sans JP + Montserrat faces, so the all-in-one entry is zero-config. */
+  --font-sans-base:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui,
+    sans-serif;
+  --font-family-sans: var(--font-sans-base);
   --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   /* Dual-font split (opt-in) — many brand designs pair a DISPLAY face for headings with a separate
    * BODY face (e.g. Source Sans 3 display + Inter body). Both default to --font-family-sans, so a

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "16.8.0",
+  "version": "16.9.1",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,
@@ -276,7 +276,7 @@
     "test:coverage": "vitest run --coverage",
     "check:example-imports": "node scripts/check-example-imports.mjs",
     "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:audit-sync && pnpm test",
-    "verify:release": "pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm test",
+    "verify:release": "pnpm build && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm test",
     "check:mcp-sync": "node scripts/check-mcp-sync.mjs",
     "check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
     "check:mcp-prop-sync": "node scripts/check-mcp-prop-sync.mjs",

package/dist/theme/famgia.service.css DELETED Viewed

@@ -1,43 +0,0 @@
-/* ───────────────────────────────────────────────────────────────
- * Famgia service theme — ファムジア株式会社
- * Re-themes @godxjp/ui via SEMANTIC TOKENS only (no component CSS).
- * Brand: electric blue #2563EB (primary) + violet #7C3AED (accent gradient).
- * Import this instead of "@godxjp/ui/styles".
- * ─────────────────────────────────────────────────────────────── */
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");
-@import "@godxjp/ui/styles";
-/* ── Light (default) ── */
-:root {
-  /* Brand primary ramp — electric blue */
-  --primary:          221 83% 53%;  /* #2563EB */
-  --primary-foreground: 0 0% 100%;
-  --primary-hover:    224 71% 48%;  /* #1D4ED8 */
-  --primary-active:   226 71% 40%;  /* #1E40AF */
-  --ring:             221 83% 53%;
-  /* Brand-colored text (AA on tint/white) */
-  --text-link:    224 76% 45%;
-  --text-brand:   221 83% 53%;
-  --text-primary: 224 76% 42%;
-  /* Signature brand gradient: blue → violet */
-  --gradient-brand: linear-gradient(135deg, hsl(221 83% 53%), hsl(262 83% 58%));
-  /* Typography — Inter (Latin/VI) + Noto Sans JP (kana/kanji) */
-  --font-family-sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-}
-/* ── Dark ── lifted blue for contrast */
-.dark {
-  --primary:        221 90% 66%;
-  --primary-foreground: 222 47% 11%;
-  --primary-hover:  221 90% 72%;
-  --primary-active: 221 90% 60%;
-  --ring:           221 90% 66%;
-  --text-link:      221 90% 72%;
-  --text-brand:     221 90% 70%;
-  --text-primary:   221 90% 68%;
-}