@godxjp/ui 16.7.2 → 16.9.0
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.
- package/README.md +39 -3
- package/dist/styles/base.css +262 -0
- package/dist/styles/fonts.css +37 -0
- package/dist/styles/index.css +14 -236
- package/dist/theme/famgia.service.css +43 -0
- package/dist/tokens/foundation.css +21 -9
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -120,9 +120,10 @@ separate `@godxjp/ui/data-grid` (`DataGrid`) subpath has been merged in and remo
|
|
|
120
120
|
|
|
121
121
|
## Consumer setup — theme is self-contained
|
|
122
122
|
|
|
123
|
-
The framework ships colors,
|
|
124
|
-
|
|
125
|
-
sources** — no `:root` overrides, no
|
|
123
|
+
The framework ships colors, the type scale, the wa-iro palette, and (opt-in)
|
|
124
|
+
bundled fonts (Noto Sans JP + Montserrat via `@fontsource`). A consumer's entire
|
|
125
|
+
styling surface is **one import + content sources** — no `:root` overrides, no
|
|
126
|
+
font `<link>`:
|
|
126
127
|
|
|
127
128
|
```css
|
|
128
129
|
/* resources/css/app.css */
|
|
@@ -131,6 +132,41 @@ sources** — no `:root` overrides, no font `<link>`:
|
|
|
131
132
|
@source '../views';
|
|
132
133
|
```
|
|
133
134
|
|
|
135
|
+
### Slim build — ship only the CSS you use
|
|
136
|
+
|
|
137
|
+
`@godxjp/ui/styles` is the zero-config all-in-one (every component's CSS +
|
|
138
|
+
bundled fonts). To ship only what you render, import the foundation plus the
|
|
139
|
+
per-layer files you need (mirrors the JS subpaths — the CSS tree-shakes too):
|
|
140
|
+
|
|
141
|
+
```css
|
|
142
|
+
@import "@godxjp/ui/styles/base"; /* required: tokens + tailwind + base layer */
|
|
143
|
+
@import "@godxjp/ui/styles/control"; /* Button, Input, Select, Textarea, toggles */
|
|
144
|
+
@import "@godxjp/ui/styles/form-layout"; /* FormField */
|
|
145
|
+
@import "@godxjp/ui/styles/dialog-layout"; /* Dialog */
|
|
146
|
+
/* …only the layers you use. Layer files need `base` first (they use @layer/@apply). */
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
Skip `@godxjp/ui/styles/fonts` when you manage fonts yourself (next/font, etc.)
|
|
150
|
+
and set the font tokens instead (see below). A marketing site using ~10
|
|
151
|
+
components typically drops component CSS from ~142K → ~26K gzip.
|
|
152
|
+
|
|
153
|
+
### Fonts — token-driven, per-language, no library hardcoding
|
|
154
|
+
|
|
155
|
+
The base ships NO hardcoded brand face. Supply your own faces and set tokens —
|
|
156
|
+
one face everywhere, or per-language (no `[lang]` selectors to write):
|
|
157
|
+
|
|
158
|
+
```css
|
|
159
|
+
:root {
|
|
160
|
+
--font-sans-base: var(--my-latin), system-ui, sans-serif; /* default face */
|
|
161
|
+
--font-sans-ja: "Noto Sans JP", var(--font-sans-base); /* lang="ja" */
|
|
162
|
+
--font-sans-vi: "Montserrat", var(--font-sans-base); /* lang="vi" */
|
|
163
|
+
/* also: --font-sans-ko, --font-sans-zh-hans, --font-sans-zh-hant */
|
|
164
|
+
}
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
`styles/base.css` wires each `[lang]` to its slot (falling back to
|
|
168
|
+
`--font-sans-base`); `styles/fonts` fills these slots for the bundled faces.
|
|
169
|
+
|
|
134
170
|
```tsx
|
|
135
171
|
import { AppProvider } from "@godxjp/ui/app"; // locale, tz, date/time format
|
|
136
172
|
import { PageContainer } from "@godxjp/ui/layout"; // every page wraps in this
|
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
/* ─────────────────────────────────────────────────────────────────────────
|
|
2
|
+
* FOUNDATION — Tailwind entry, design tokens, density, theme mapping, base
|
|
3
|
+
* element styles. This is the minimum every consumer needs.
|
|
4
|
+
*
|
|
5
|
+
* Tree-shakeable CSS setup: import this ONCE, then add ONLY the component
|
|
6
|
+
* layout layers you actually render:
|
|
7
|
+
*
|
|
8
|
+
* @import "@godxjp/ui/styles/base"; // this file (required)
|
|
9
|
+
* @import "@godxjp/ui/styles/control"; // buttons, inputs, toggles
|
|
10
|
+
* @import "@godxjp/ui/styles/form-layout";
|
|
11
|
+
* @import "@godxjp/ui/styles/dialog-layout";
|
|
12
|
+
* @import "@godxjp/ui/styles/card-layout";
|
|
13
|
+
* // ...only the ones you use
|
|
14
|
+
*
|
|
15
|
+
* The layout files declare `@layer components` and use `@apply`, so base.css
|
|
16
|
+
* (which pulls in Tailwind) MUST be imported before them, in the same
|
|
17
|
+
* stylesheet. Bundled fonts are opt-in — add `@godxjp/ui/styles/fonts` if you
|
|
18
|
+
* want them, or skip it and supply your own via the --font-family-* tokens.
|
|
19
|
+
*
|
|
20
|
+
* Prefer the all-in-one `@godxjp/ui/styles` entry if you'd rather ship every
|
|
21
|
+
* component's CSS + the bundled fonts and not think about it.
|
|
22
|
+
* ───────────────────────────────────────────────────────────────────────── */
|
|
23
|
+
@import "tailwindcss";
|
|
24
|
+
|
|
25
|
+
/* Per-language font wiring — token-only, NO hardcoded faces. Each locale reads
|
|
26
|
+
* an OPTIONAL per-lang slot token (empty by default) and falls back to the
|
|
27
|
+
* base sans. Consumers switch a locale's face by setting its slot, e.g.
|
|
28
|
+
* :root { --font-sans-ja: "Noto Sans JP", var(--font-sans-base); }
|
|
29
|
+
* without writing any [lang] selectors. The opt-in bundle styles/fonts fills
|
|
30
|
+
* these slots for its Noto Sans JP + Montserrat faces. `--font-sans-base` is a
|
|
31
|
+
* separate token (not --font-family-sans) so the fallback can't self-reference. */
|
|
32
|
+
[lang="ja"] {
|
|
33
|
+
--font-family-sans: var(--font-sans-ja, var(--font-sans-base));
|
|
34
|
+
}
|
|
35
|
+
[lang="ko"] {
|
|
36
|
+
--font-family-sans: var(--font-sans-ko, var(--font-sans-base));
|
|
37
|
+
}
|
|
38
|
+
[lang="vi"] {
|
|
39
|
+
--font-family-sans: var(--font-sans-vi, var(--font-sans-base));
|
|
40
|
+
}
|
|
41
|
+
[lang="zh"],
|
|
42
|
+
[lang="zh-Hans"],
|
|
43
|
+
[lang="zh-CN"] {
|
|
44
|
+
--font-family-sans: var(--font-sans-zh-hans, var(--font-sans-base));
|
|
45
|
+
}
|
|
46
|
+
[lang="zh-Hant"],
|
|
47
|
+
[lang="zh-TW"] {
|
|
48
|
+
--font-family-sans: var(--font-sans-zh-hant, var(--font-sans-base));
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Guarantee the full set of semantic color utilities ships in the compiled CSS
|
|
52
|
+
* even when the library itself only references a few — consumers (and the token
|
|
53
|
+
* docs) must be able to use bg/text/border for EVERY semantic role. Without this
|
|
54
|
+
* Tailwind's JIT drops unused roles (success/info/attention) → transparent. */
|
|
55
|
+
@source inline(
|
|
56
|
+
"{bg,text,border,ring}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}"
|
|
57
|
+
);
|
|
58
|
+
@source inline(
|
|
59
|
+
"{bg,text}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}-foreground"
|
|
60
|
+
);
|
|
61
|
+
/* Extended text hierarchy + interaction-ramp utilities (library may not reference them directly). */
|
|
62
|
+
@source inline("{text,bg,border}-{foreground-tertiary,foreground-disabled,link,brand}");
|
|
63
|
+
@source inline("bg-{primary,secondary,destructive}-{hover,active}");
|
|
64
|
+
/* Force the extended radius steps so Tailwind emits --radius-xs/-xl/-2xl to :root (consumers read
|
|
65
|
+
* `var(--radius-2xl)` directly; without a generated utility Tailwind drops the unused var). */
|
|
66
|
+
@source inline("rounded-{xs,xl,2xl}");
|
|
67
|
+
@source inline("text-2xs");
|
|
68
|
+
@source inline("text-{3xl,4xl,5xl}");
|
|
69
|
+
@source inline("text-{primary,success,warning,info,error}-strong");
|
|
70
|
+
/* `.js` matters: the published package ships only compiled JS under dist (no
|
|
71
|
+
* .tsx sources), and this file is copied verbatim into dist/styles — without
|
|
72
|
+
* it Tailwind finds no component classes in consumers (unstyled popovers and
|
|
73
|
+
* selects, and Radix scroll-lock freezes the page because pointer-events-auto
|
|
74
|
+
* is never emitted). In-repo the glob scans src; published, it scans dist. */
|
|
75
|
+
@source "../**/*.{tsx,ts,js}";
|
|
76
|
+
@import "../tokens/base.css";
|
|
77
|
+
@import "./density.css";
|
|
78
|
+
|
|
79
|
+
/* `inline` (NOT a bare @theme): Tailwind inlines each expression — e.g. `hsl(var(--primary))` —
|
|
80
|
+
* directly into every utility (`bg-primary` becomes `background-color: hsl(var(--primary))`) instead
|
|
81
|
+
* of emitting `var(--color-primary)` computed once at :root. This is THE enabler for scoped /
|
|
82
|
+
* multi-tenant theming: a `[data-tenant]{ --primary: … }` override now re-resolves at the element,
|
|
83
|
+
* so colors and radius propagate into a subtree (a plain @theme froze them at :root, so scoped
|
|
84
|
+
* overrides never reached the color utilities). Components read raw tokens like `hsl(var(--primary))`
|
|
85
|
+
* directly in their own CSS, so they re-theme the same way. */
|
|
86
|
+
@theme inline {
|
|
87
|
+
--color-background: hsl(var(--background));
|
|
88
|
+
--color-foreground: hsl(var(--foreground));
|
|
89
|
+
--color-card: hsl(var(--card));
|
|
90
|
+
--color-card-foreground: hsl(var(--card-foreground));
|
|
91
|
+
--color-popover: hsl(var(--popover));
|
|
92
|
+
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
93
|
+
--color-primary: hsl(var(--primary));
|
|
94
|
+
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
95
|
+
--color-secondary: hsl(var(--secondary));
|
|
96
|
+
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
97
|
+
--color-muted: hsl(var(--muted));
|
|
98
|
+
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
99
|
+
--color-accent: hsl(var(--accent));
|
|
100
|
+
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
101
|
+
--color-destructive: hsl(var(--destructive));
|
|
102
|
+
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
103
|
+
--color-border: hsl(var(--border));
|
|
104
|
+
--color-input: hsl(var(--input));
|
|
105
|
+
--color-ring: hsl(var(--ring));
|
|
106
|
+
--color-success: hsl(var(--success));
|
|
107
|
+
--color-success-foreground: hsl(var(--success-foreground));
|
|
108
|
+
--color-warning: hsl(var(--warning));
|
|
109
|
+
--color-warning-foreground: hsl(var(--warning-foreground));
|
|
110
|
+
--color-info: hsl(var(--info));
|
|
111
|
+
--color-info-foreground: hsl(var(--info-foreground));
|
|
112
|
+
--color-attention: hsl(var(--attention));
|
|
113
|
+
--color-attention-foreground: hsl(var(--attention-foreground));
|
|
114
|
+
/* AA-strong status TEXT colours (text-{success,warning,info,error}-strong) — darker than the
|
|
115
|
+
* fills so small coloured labels clear WCAG AA on white; flip light on the dark theme. */
|
|
116
|
+
--color-primary-strong: hsl(var(--text-primary));
|
|
117
|
+
--color-success-strong: hsl(var(--text-success));
|
|
118
|
+
--color-warning-strong: hsl(var(--text-warning));
|
|
119
|
+
--color-info-strong: hsl(var(--text-info));
|
|
120
|
+
--color-error-strong: hsl(var(--text-error));
|
|
121
|
+
--color-chart-1: var(--chart-1);
|
|
122
|
+
--color-chart-2: var(--chart-2);
|
|
123
|
+
--color-chart-3: var(--chart-3);
|
|
124
|
+
--color-chart-4: var(--chart-4);
|
|
125
|
+
--color-chart-5: var(--chart-5);
|
|
126
|
+
--color-chart-6: var(--chart-6);
|
|
127
|
+
/* Golden-ratio radius scale — every step derives from --radius × (--radius-ratio = φ)ⁿ, so
|
|
128
|
+
* overriding --radius alone rescales the whole scale proportionally (≈ 1.4/2.3/3.7/6/9.7/15.7px). */
|
|
129
|
+
--radius-xs: calc(
|
|
130
|
+
var(--radius) / var(--radius-ratio) / var(--radius-ratio) / var(--radius-ratio)
|
|
131
|
+
);
|
|
132
|
+
--radius-sm: calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio));
|
|
133
|
+
--radius-md: calc(var(--radius) / var(--radius-ratio));
|
|
134
|
+
--radius-lg: var(--radius);
|
|
135
|
+
--radius-xl: calc(var(--radius) * var(--radius-ratio));
|
|
136
|
+
--radius-2xl: calc(var(--radius) * var(--radius-ratio) * var(--radius-ratio));
|
|
137
|
+
/* Extended text-hierarchy roles (tertiary / disabled / link / brand) → text-* / bg-* utilities. */
|
|
138
|
+
--color-foreground-tertiary: hsl(var(--text-tertiary));
|
|
139
|
+
--color-foreground-disabled: hsl(var(--text-disabled));
|
|
140
|
+
--color-link: hsl(var(--text-link));
|
|
141
|
+
--color-brand: hsl(var(--text-brand));
|
|
142
|
+
/* Interaction ramp (hover / active) → bg-primary-hover etc. */
|
|
143
|
+
--color-primary-hover: hsl(var(--primary-hover));
|
|
144
|
+
--color-primary-active: hsl(var(--primary-active));
|
|
145
|
+
--color-secondary-hover: hsl(var(--secondary-hover));
|
|
146
|
+
--color-secondary-active: hsl(var(--secondary-active));
|
|
147
|
+
--color-destructive-hover: hsl(var(--destructive-hover));
|
|
148
|
+
--color-destructive-active: hsl(var(--destructive-active));
|
|
149
|
+
/* Wire Tailwind's font-sans/mono (and preflight) to the design-system fonts. */
|
|
150
|
+
--font-sans: var(--font-family-sans);
|
|
151
|
+
--font-mono: var(--font-family-mono);
|
|
152
|
+
/* 和色 (wa-iro) accents → bg-wa / text-wa utilities (charts, tags, decoration). */
|
|
153
|
+
--color-wa-ai: var(--wa-ai);
|
|
154
|
+
--color-wa-gunjo: var(--wa-gunjo);
|
|
155
|
+
--color-wa-ruri: var(--wa-ruri);
|
|
156
|
+
--color-wa-kon: var(--wa-kon);
|
|
157
|
+
--color-wa-wakatake: var(--wa-wakatake);
|
|
158
|
+
--color-wa-moegi: var(--wa-moegi);
|
|
159
|
+
--color-wa-yamabuki: var(--wa-yamabuki);
|
|
160
|
+
--color-wa-shu: var(--wa-shu);
|
|
161
|
+
--color-wa-akane: var(--wa-akane);
|
|
162
|
+
--color-wa-enji: var(--wa-enji);
|
|
163
|
+
--color-wa-sakura: var(--wa-sakura);
|
|
164
|
+
--color-wa-sumi: var(--wa-sumi);
|
|
165
|
+
--color-wa-nezu: var(--wa-nezu);
|
|
166
|
+
/* Wire Tailwind text-* utilities to runtime typography tokens (fontSize toolbar). */
|
|
167
|
+
--text-2xs: var(--font-size-2xs);
|
|
168
|
+
--text-xs: var(--font-size-xs);
|
|
169
|
+
--text-sm: var(--font-size-sm);
|
|
170
|
+
--text-base: var(--font-size-base);
|
|
171
|
+
--text-lg: var(--font-size-lg);
|
|
172
|
+
--text-xl: var(--font-size-xl);
|
|
173
|
+
--text-2xl: var(--font-size-2xl);
|
|
174
|
+
/* Opt-in DISPLAY ramp (marketing/hero) — wired to the display tokens, unused by the admin scale. */
|
|
175
|
+
--text-3xl: var(--font-size-3xl);
|
|
176
|
+
--text-4xl: var(--font-size-4xl);
|
|
177
|
+
--text-5xl: var(--font-size-5xl);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
@layer base {
|
|
181
|
+
* {
|
|
182
|
+
border-color: hsl(var(--border));
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
/* Visually-hidden, absolutely-positioned helpers must never affect layout or scroll height.
|
|
186
|
+
*
|
|
187
|
+
* Radix renders a hidden native form-fallback (BubbleSelect/BubbleInput) for Select, Checkbox,
|
|
188
|
+
* Switch and RadioGroup; it is `position:absolute` with NO top/left, so when the control has no
|
|
189
|
+
* positioned ancestor its static box resolves far down the page and inflates
|
|
190
|
+
* `document.scrollHeight` → phantom empty scroll space (gh#105). The same is true of the
|
|
191
|
+
* `.sr-only` clamp (Tailwind / our own status + file-input nodes). These fallbacks are always
|
|
192
|
+
* `aria-hidden` + `tabindex=-1`. Pinning every such node to the top-left of its containing block
|
|
193
|
+
* makes it impossible for it to extend the scroll height, regardless of consumer markup — no DOM
|
|
194
|
+
* wrapper or per-component positioning required. Inside the AppShell the `.app-main { contain:
|
|
195
|
+
* paint }` boundary (gh#104) already contains these; this rule protects every other call site too. */
|
|
196
|
+
:where(select, input)[aria-hidden="true"][tabindex="-1"],
|
|
197
|
+
.sr-only {
|
|
198
|
+
top: 0;
|
|
199
|
+
inset-inline-start: 0;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
body {
|
|
203
|
+
background-color: hsl(var(--background));
|
|
204
|
+
color: hsl(var(--foreground));
|
|
205
|
+
/* Body reads --font-family-body (defaults to --font-family-sans → unchanged); a service that
|
|
206
|
+
* wants a dual-font brand (display + body face) overrides --font-family-body alone. */
|
|
207
|
+
font-family: var(--font-family-body);
|
|
208
|
+
font-size: var(--font-size-base);
|
|
209
|
+
line-height: var(--line-height-body);
|
|
210
|
+
font-feature-settings:
|
|
211
|
+
"cv02",
|
|
212
|
+
"cv03",
|
|
213
|
+
"cv04",
|
|
214
|
+
"cv11",
|
|
215
|
+
"rlig" 1,
|
|
216
|
+
"calt" 1;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/* Semantic heading scale — SEO + accessibility: real <h1>–<h6> elements carry
|
|
220
|
+
* the document outline (one <h1> per page, levels never skipped). Visual size
|
|
221
|
+
* follows the dxs-kintai scale; component titles override via their own class.
|
|
222
|
+
* Headings read --font-family-display (defaults to --font-family-sans → unchanged) for dual-font
|
|
223
|
+
* brands (display face on headings, body face on prose). */
|
|
224
|
+
:where(h1, h2, h3, h4, h5, h6) {
|
|
225
|
+
font-family: var(--font-family-display);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
h1 {
|
|
229
|
+
font-size: var(--heading-h1);
|
|
230
|
+
font-weight: var(--font-weight-medium);
|
|
231
|
+
line-height: var(--line-height-tight);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
h2 {
|
|
235
|
+
font-size: var(--heading-h2);
|
|
236
|
+
font-weight: var(--font-weight-medium);
|
|
237
|
+
line-height: var(--line-height-tight);
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
h3 {
|
|
241
|
+
font-size: var(--heading-h3);
|
|
242
|
+
font-weight: var(--font-weight-medium);
|
|
243
|
+
line-height: var(--line-height-tight);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
h4 {
|
|
247
|
+
font-size: var(--heading-h4);
|
|
248
|
+
font-weight: var(--font-weight-medium);
|
|
249
|
+
line-height: var(--line-height-tight);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
h5,
|
|
253
|
+
h6 {
|
|
254
|
+
font-size: var(--font-size-xs);
|
|
255
|
+
font-weight: var(--font-weight-medium);
|
|
256
|
+
line-height: var(--line-height-tight);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
code {
|
|
260
|
+
font-family: var(--font-family-mono);
|
|
261
|
+
}
|
|
262
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/* ─────────────────────────────────────────────────────────────────────────
|
|
2
|
+
* BUNDLED FONTS — opt-in.
|
|
3
|
+
*
|
|
4
|
+
* Self-contained so consumers need no font config. The browser only downloads
|
|
5
|
+
* the subset files matching the rendered text:
|
|
6
|
+
* · Noto Sans JP — the DEFAULT face (Japanese + Latin), used for all locales
|
|
7
|
+
* except `vi`.
|
|
8
|
+
* · Montserrat — swapped in for the Vietnamese locale (`<html lang="vi">`),
|
|
9
|
+
* incl. its `vietnamese` subset for full diacritics.
|
|
10
|
+
* See --font-family-sans + :lang(vi) in base.css.
|
|
11
|
+
*
|
|
12
|
+
* The all-in-one `@godxjp/ui/styles` entry pulls this in automatically. If you
|
|
13
|
+
* manage fonts yourself (e.g. next/font), DON'T import this — import
|
|
14
|
+
* `@godxjp/ui/styles/base` + the layout layers you use and supply your own
|
|
15
|
+
* faces via the --font-family-* tokens.
|
|
16
|
+
* ───────────────────────────────────────────────────────────────────────── */
|
|
17
|
+
@import "@fontsource/noto-sans-jp/400.css";
|
|
18
|
+
@import "@fontsource/noto-sans-jp/500.css";
|
|
19
|
+
@import "@fontsource/noto-sans-jp/700.css";
|
|
20
|
+
@import "@fontsource/montserrat/400.css";
|
|
21
|
+
@import "@fontsource/montserrat/500.css";
|
|
22
|
+
@import "@fontsource/montserrat/700.css";
|
|
23
|
+
|
|
24
|
+
/* Fill the font-token slots (see tokens/foundation.css + styles/base.css) with
|
|
25
|
+
* the bundled faces, so the all-in-one `@godxjp/ui/styles` entry stays
|
|
26
|
+
* zero-config: Noto Sans JP is the default face (Japanese + clean Latin), and
|
|
27
|
+
* the Vietnamese locale leads with Montserrat (Noto Sans JP tail keeps CJK
|
|
28
|
+
* glyphs, which Montserrat lacks). Consumers on the per-layer setup who supply
|
|
29
|
+
* their own faces simply DON'T import this file and set the slots themselves. */
|
|
30
|
+
:root {
|
|
31
|
+
--font-sans-base:
|
|
32
|
+
"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
|
|
33
|
+
system-ui, "Hiragino Sans", sans-serif;
|
|
34
|
+
--font-sans-vi:
|
|
35
|
+
"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
|
|
36
|
+
system-ui, "Noto Sans JP", sans-serif;
|
|
37
|
+
}
|
package/dist/styles/index.css
CHANGED
|
@@ -1,56 +1,19 @@
|
|
|
1
|
+
/* ─────────────────────────────────────────────────────────────────────────
|
|
2
|
+
* ALL-IN-ONE stylesheet — fonts + foundation + EVERY component layout layer.
|
|
3
|
+
* Zero-config: `@import "@godxjp/ui/styles";` and everything is styled.
|
|
4
|
+
*
|
|
5
|
+
* For a smaller build that ships only what you render, DON'T use this. Instead:
|
|
6
|
+
* @import "@godxjp/ui/styles/base"; // required foundation
|
|
7
|
+
* @import "@godxjp/ui/styles/control"; // + only the layout layers you use
|
|
8
|
+
* @import "@godxjp/ui/styles/dialog-layout";
|
|
9
|
+
* ...
|
|
10
|
+
* and add `@godxjp/ui/styles/fonts` only if you want the bundled faces.
|
|
11
|
+
* See src/styles/base.css for the full list and rules.
|
|
12
|
+
* ───────────────────────────────────────────────────────────────────────── */
|
|
1
13
|
@import "sonner/dist/styles.css";
|
|
2
14
|
@import "react-day-picker/style.css";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
* · Noto Sans JP — the DEFAULT face (Japanese + Latin), used for all locales except `vi`.
|
|
6
|
-
* · Montserrat — swapped in for the Vietnamese locale (`<html lang="vi">`), incl. its
|
|
7
|
-
* `vietnamese` subset for full diacritics. See --font-family-sans + :lang(vi). */
|
|
8
|
-
@import "@fontsource/noto-sans-jp/400.css";
|
|
9
|
-
@import "@fontsource/noto-sans-jp/500.css";
|
|
10
|
-
@import "@fontsource/noto-sans-jp/700.css";
|
|
11
|
-
@import "@fontsource/montserrat/400.css";
|
|
12
|
-
@import "@fontsource/montserrat/500.css";
|
|
13
|
-
@import "@fontsource/montserrat/700.css";
|
|
14
|
-
@import "tailwindcss";
|
|
15
|
-
|
|
16
|
-
/* Vietnamese locale → Montserrat (set by AppProvider via <html lang="vi">). Overrides the
|
|
17
|
-
* --font-family-sans token so every body/heading rule that reads it switches automatically. */
|
|
18
|
-
:root:lang(vi),
|
|
19
|
-
[lang="vi"] {
|
|
20
|
-
/* Montserrat for Latin/Vietnamese; Noto Sans JP kept as the tail so any 日本語 in a vi-locale
|
|
21
|
-
* screen still has the bundled JP face (Montserrat has no CJK glyphs). */
|
|
22
|
-
--font-family-sans:
|
|
23
|
-
"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
|
|
24
|
-
system-ui, "Noto Sans JP", sans-serif;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
/* Guarantee the full set of semantic color utilities ships in the compiled CSS
|
|
28
|
-
* even when the library itself only references a few — consumers (and the token
|
|
29
|
-
* docs) must be able to use bg/text/border for EVERY semantic role. Without this
|
|
30
|
-
* Tailwind's JIT drops unused roles (success/info/attention) → transparent. */
|
|
31
|
-
@source inline(
|
|
32
|
-
"{bg,text,border,ring}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}"
|
|
33
|
-
);
|
|
34
|
-
@source inline(
|
|
35
|
-
"{bg,text}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}-foreground"
|
|
36
|
-
);
|
|
37
|
-
/* Extended text hierarchy + interaction-ramp utilities (library may not reference them directly). */
|
|
38
|
-
@source inline("{text,bg,border}-{foreground-tertiary,foreground-disabled,link,brand}");
|
|
39
|
-
@source inline("bg-{primary,secondary,destructive}-{hover,active}");
|
|
40
|
-
/* Force the extended radius steps so Tailwind emits --radius-xs/-xl/-2xl to :root (consumers read
|
|
41
|
-
* `var(--radius-2xl)` directly; without a generated utility Tailwind drops the unused var). */
|
|
42
|
-
@source inline("rounded-{xs,xl,2xl}");
|
|
43
|
-
@source inline("text-2xs");
|
|
44
|
-
@source inline("text-{3xl,4xl,5xl}");
|
|
45
|
-
@source inline("text-{primary,success,warning,info,error}-strong");
|
|
46
|
-
/* `.js` matters: the published package ships only compiled JS under dist (no
|
|
47
|
-
* .tsx sources), and this file is copied verbatim into dist/styles — without
|
|
48
|
-
* it Tailwind finds no component classes in consumers (unstyled popovers and
|
|
49
|
-
* selects, and Radix scroll-lock freezes the page because pointer-events-auto
|
|
50
|
-
* is never emitted). In-repo the glob scans src; published, it scans dist. */
|
|
51
|
-
@source "../**/*.{tsx,ts,js}";
|
|
52
|
-
@import "../tokens/base.css";
|
|
53
|
-
@import "./density.css";
|
|
15
|
+
@import "./fonts.css";
|
|
16
|
+
@import "./base.css";
|
|
54
17
|
@import "./shell-layout.css";
|
|
55
18
|
@import "./layout.css";
|
|
56
19
|
@import "./control.css";
|
|
@@ -65,188 +28,3 @@
|
|
|
65
28
|
@import "./form-layout.css";
|
|
66
29
|
@import "./navigation-layout.css";
|
|
67
30
|
@import "./chart-layout.css";
|
|
68
|
-
|
|
69
|
-
/* `inline` (NOT a bare @theme): Tailwind inlines each expression — e.g. `hsl(var(--primary))` —
|
|
70
|
-
* directly into every utility (`bg-primary` becomes `background-color: hsl(var(--primary))`) instead
|
|
71
|
-
* of emitting `var(--color-primary)` computed once at :root. This is THE enabler for scoped /
|
|
72
|
-
* multi-tenant theming: a `[data-tenant]{ --primary: … }` override now re-resolves at the element,
|
|
73
|
-
* so colors and radius propagate into a subtree (a plain @theme froze them at :root, so scoped
|
|
74
|
-
* overrides never reached the color utilities). Components read raw tokens like `hsl(var(--primary))`
|
|
75
|
-
* directly in their own CSS, so they re-theme the same way. */
|
|
76
|
-
@theme inline {
|
|
77
|
-
--color-background: hsl(var(--background));
|
|
78
|
-
--color-foreground: hsl(var(--foreground));
|
|
79
|
-
--color-card: hsl(var(--card));
|
|
80
|
-
--color-card-foreground: hsl(var(--card-foreground));
|
|
81
|
-
--color-popover: hsl(var(--popover));
|
|
82
|
-
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
83
|
-
--color-primary: hsl(var(--primary));
|
|
84
|
-
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
85
|
-
--color-secondary: hsl(var(--secondary));
|
|
86
|
-
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
87
|
-
--color-muted: hsl(var(--muted));
|
|
88
|
-
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
89
|
-
--color-accent: hsl(var(--accent));
|
|
90
|
-
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
91
|
-
--color-destructive: hsl(var(--destructive));
|
|
92
|
-
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
93
|
-
--color-border: hsl(var(--border));
|
|
94
|
-
--color-input: hsl(var(--input));
|
|
95
|
-
--color-ring: hsl(var(--ring));
|
|
96
|
-
--color-success: hsl(var(--success));
|
|
97
|
-
--color-success-foreground: hsl(var(--success-foreground));
|
|
98
|
-
--color-warning: hsl(var(--warning));
|
|
99
|
-
--color-warning-foreground: hsl(var(--warning-foreground));
|
|
100
|
-
--color-info: hsl(var(--info));
|
|
101
|
-
--color-info-foreground: hsl(var(--info-foreground));
|
|
102
|
-
--color-attention: hsl(var(--attention));
|
|
103
|
-
--color-attention-foreground: hsl(var(--attention-foreground));
|
|
104
|
-
/* AA-strong status TEXT colours (text-{success,warning,info,error}-strong) — darker than the
|
|
105
|
-
* fills so small coloured labels clear WCAG AA on white; flip light on the dark theme. */
|
|
106
|
-
--color-primary-strong: hsl(var(--text-primary));
|
|
107
|
-
--color-success-strong: hsl(var(--text-success));
|
|
108
|
-
--color-warning-strong: hsl(var(--text-warning));
|
|
109
|
-
--color-info-strong: hsl(var(--text-info));
|
|
110
|
-
--color-error-strong: hsl(var(--text-error));
|
|
111
|
-
--color-chart-1: var(--chart-1);
|
|
112
|
-
--color-chart-2: var(--chart-2);
|
|
113
|
-
--color-chart-3: var(--chart-3);
|
|
114
|
-
--color-chart-4: var(--chart-4);
|
|
115
|
-
--color-chart-5: var(--chart-5);
|
|
116
|
-
--color-chart-6: var(--chart-6);
|
|
117
|
-
/* Golden-ratio radius scale — every step derives from --radius × (--radius-ratio = φ)ⁿ, so
|
|
118
|
-
* overriding --radius alone rescales the whole scale proportionally (≈ 1.4/2.3/3.7/6/9.7/15.7px). */
|
|
119
|
-
--radius-xs: calc(
|
|
120
|
-
var(--radius) / var(--radius-ratio) / var(--radius-ratio) / var(--radius-ratio)
|
|
121
|
-
);
|
|
122
|
-
--radius-sm: calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio));
|
|
123
|
-
--radius-md: calc(var(--radius) / var(--radius-ratio));
|
|
124
|
-
--radius-lg: var(--radius);
|
|
125
|
-
--radius-xl: calc(var(--radius) * var(--radius-ratio));
|
|
126
|
-
--radius-2xl: calc(var(--radius) * var(--radius-ratio) * var(--radius-ratio));
|
|
127
|
-
/* Extended text-hierarchy roles (tertiary / disabled / link / brand) → text-* / bg-* utilities. */
|
|
128
|
-
--color-foreground-tertiary: hsl(var(--text-tertiary));
|
|
129
|
-
--color-foreground-disabled: hsl(var(--text-disabled));
|
|
130
|
-
--color-link: hsl(var(--text-link));
|
|
131
|
-
--color-brand: hsl(var(--text-brand));
|
|
132
|
-
/* Interaction ramp (hover / active) → bg-primary-hover etc. */
|
|
133
|
-
--color-primary-hover: hsl(var(--primary-hover));
|
|
134
|
-
--color-primary-active: hsl(var(--primary-active));
|
|
135
|
-
--color-secondary-hover: hsl(var(--secondary-hover));
|
|
136
|
-
--color-secondary-active: hsl(var(--secondary-active));
|
|
137
|
-
--color-destructive-hover: hsl(var(--destructive-hover));
|
|
138
|
-
--color-destructive-active: hsl(var(--destructive-active));
|
|
139
|
-
/* Wire Tailwind's font-sans/mono (and preflight) to the design-system fonts. */
|
|
140
|
-
--font-sans: var(--font-family-sans);
|
|
141
|
-
--font-mono: var(--font-family-mono);
|
|
142
|
-
/* 和色 (wa-iro) accents → bg-wa / text-wa utilities (charts, tags, decoration). */
|
|
143
|
-
--color-wa-ai: var(--wa-ai);
|
|
144
|
-
--color-wa-gunjo: var(--wa-gunjo);
|
|
145
|
-
--color-wa-ruri: var(--wa-ruri);
|
|
146
|
-
--color-wa-kon: var(--wa-kon);
|
|
147
|
-
--color-wa-wakatake: var(--wa-wakatake);
|
|
148
|
-
--color-wa-moegi: var(--wa-moegi);
|
|
149
|
-
--color-wa-yamabuki: var(--wa-yamabuki);
|
|
150
|
-
--color-wa-shu: var(--wa-shu);
|
|
151
|
-
--color-wa-akane: var(--wa-akane);
|
|
152
|
-
--color-wa-enji: var(--wa-enji);
|
|
153
|
-
--color-wa-sakura: var(--wa-sakura);
|
|
154
|
-
--color-wa-sumi: var(--wa-sumi);
|
|
155
|
-
--color-wa-nezu: var(--wa-nezu);
|
|
156
|
-
/* Wire Tailwind text-* utilities to runtime typography tokens (fontSize toolbar). */
|
|
157
|
-
--text-2xs: var(--font-size-2xs);
|
|
158
|
-
--text-xs: var(--font-size-xs);
|
|
159
|
-
--text-sm: var(--font-size-sm);
|
|
160
|
-
--text-base: var(--font-size-base);
|
|
161
|
-
--text-lg: var(--font-size-lg);
|
|
162
|
-
--text-xl: var(--font-size-xl);
|
|
163
|
-
--text-2xl: var(--font-size-2xl);
|
|
164
|
-
/* Opt-in DISPLAY ramp (marketing/hero) — wired to the display tokens, unused by the admin scale. */
|
|
165
|
-
--text-3xl: var(--font-size-3xl);
|
|
166
|
-
--text-4xl: var(--font-size-4xl);
|
|
167
|
-
--text-5xl: var(--font-size-5xl);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
@layer base {
|
|
171
|
-
* {
|
|
172
|
-
border-color: hsl(var(--border));
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
/* Visually-hidden, absolutely-positioned helpers must never affect layout or scroll height.
|
|
176
|
-
*
|
|
177
|
-
* Radix renders a hidden native form-fallback (BubbleSelect/BubbleInput) for Select, Checkbox,
|
|
178
|
-
* Switch and RadioGroup; it is `position:absolute` with NO top/left, so when the control has no
|
|
179
|
-
* positioned ancestor its static box resolves far down the page and inflates
|
|
180
|
-
* `document.scrollHeight` → phantom empty scroll space (gh#105). The same is true of the
|
|
181
|
-
* `.sr-only` clamp (Tailwind / our own status + file-input nodes). These fallbacks are always
|
|
182
|
-
* `aria-hidden` + `tabindex=-1`. Pinning every such node to the top-left of its containing block
|
|
183
|
-
* makes it impossible for it to extend the scroll height, regardless of consumer markup — no DOM
|
|
184
|
-
* wrapper or per-component positioning required. Inside the AppShell the `.app-main { contain:
|
|
185
|
-
* paint }` boundary (gh#104) already contains these; this rule protects every other call site too. */
|
|
186
|
-
:where(select, input)[aria-hidden="true"][tabindex="-1"],
|
|
187
|
-
.sr-only {
|
|
188
|
-
top: 0;
|
|
189
|
-
inset-inline-start: 0;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
body {
|
|
193
|
-
background-color: hsl(var(--background));
|
|
194
|
-
color: hsl(var(--foreground));
|
|
195
|
-
/* Body reads --font-family-body (defaults to --font-family-sans → unchanged); a service that
|
|
196
|
-
* wants a dual-font brand (display + body face) overrides --font-family-body alone. */
|
|
197
|
-
font-family: var(--font-family-body);
|
|
198
|
-
font-size: var(--font-size-base);
|
|
199
|
-
line-height: var(--line-height-body);
|
|
200
|
-
font-feature-settings:
|
|
201
|
-
"cv02",
|
|
202
|
-
"cv03",
|
|
203
|
-
"cv04",
|
|
204
|
-
"cv11",
|
|
205
|
-
"rlig" 1,
|
|
206
|
-
"calt" 1;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
/* Semantic heading scale — SEO + accessibility: real <h1>–<h6> elements carry
|
|
210
|
-
* the document outline (one <h1> per page, levels never skipped). Visual size
|
|
211
|
-
* follows the dxs-kintai scale; component titles override via their own class.
|
|
212
|
-
* Headings read --font-family-display (defaults to --font-family-sans → unchanged) for dual-font
|
|
213
|
-
* brands (display face on headings, body face on prose). */
|
|
214
|
-
:where(h1, h2, h3, h4, h5, h6) {
|
|
215
|
-
font-family: var(--font-family-display);
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
h1 {
|
|
219
|
-
font-size: var(--heading-h1);
|
|
220
|
-
font-weight: var(--font-weight-medium);
|
|
221
|
-
line-height: var(--line-height-tight);
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
h2 {
|
|
225
|
-
font-size: var(--heading-h2);
|
|
226
|
-
font-weight: var(--font-weight-medium);
|
|
227
|
-
line-height: var(--line-height-tight);
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
h3 {
|
|
231
|
-
font-size: var(--heading-h3);
|
|
232
|
-
font-weight: var(--font-weight-medium);
|
|
233
|
-
line-height: var(--line-height-tight);
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
h4 {
|
|
237
|
-
font-size: var(--heading-h4);
|
|
238
|
-
font-weight: var(--font-weight-medium);
|
|
239
|
-
line-height: var(--line-height-tight);
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
h5,
|
|
243
|
-
h6 {
|
|
244
|
-
font-size: var(--font-size-xs);
|
|
245
|
-
font-weight: var(--font-weight-medium);
|
|
246
|
-
line-height: var(--line-height-tight);
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
code {
|
|
250
|
-
font-family: var(--font-family-mono);
|
|
251
|
-
}
|
|
252
|
-
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/* ───────────────────────────────────────────────────────────────
|
|
2
|
+
* Famgia service theme — ファムジア株式会社
|
|
3
|
+
* Re-themes @godxjp/ui via SEMANTIC TOKENS only (no component CSS).
|
|
4
|
+
* Brand: electric blue #2563EB (primary) + violet #7C3AED (accent gradient).
|
|
5
|
+
* Import this instead of "@godxjp/ui/styles".
|
|
6
|
+
* ─────────────────────────────────────────────────────────────── */
|
|
7
|
+
|
|
8
|
+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");
|
|
9
|
+
@import "@godxjp/ui/styles";
|
|
10
|
+
|
|
11
|
+
/* ── Light (default) ── */
|
|
12
|
+
:root {
|
|
13
|
+
/* Brand primary ramp — electric blue */
|
|
14
|
+
--primary: 221 83% 53%; /* #2563EB */
|
|
15
|
+
--primary-foreground: 0 0% 100%;
|
|
16
|
+
--primary-hover: 224 71% 48%; /* #1D4ED8 */
|
|
17
|
+
--primary-active: 226 71% 40%; /* #1E40AF */
|
|
18
|
+
--ring: 221 83% 53%;
|
|
19
|
+
|
|
20
|
+
/* Brand-colored text (AA on tint/white) */
|
|
21
|
+
--text-link: 224 76% 45%;
|
|
22
|
+
--text-brand: 221 83% 53%;
|
|
23
|
+
--text-primary: 224 76% 42%;
|
|
24
|
+
|
|
25
|
+
/* Signature brand gradient: blue → violet */
|
|
26
|
+
--gradient-brand: linear-gradient(135deg, hsl(221 83% 53%), hsl(262 83% 58%));
|
|
27
|
+
|
|
28
|
+
/* Typography — Inter (Latin/VI) + Noto Sans JP (kana/kanji) */
|
|
29
|
+
--font-family-sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
|
|
30
|
+
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* ── Dark ── lifted blue for contrast */
|
|
34
|
+
.dark {
|
|
35
|
+
--primary: 221 90% 66%;
|
|
36
|
+
--primary-foreground: 222 47% 11%;
|
|
37
|
+
--primary-hover: 221 90% 72%;
|
|
38
|
+
--primary-active: 221 90% 60%;
|
|
39
|
+
--ring: 221 90% 66%;
|
|
40
|
+
--text-link: 221 90% 72%;
|
|
41
|
+
--text-brand: 221 90% 70%;
|
|
42
|
+
--text-primary: 221 90% 68%;
|
|
43
|
+
}
|
|
@@ -145,15 +145,27 @@
|
|
|
145
145
|
--gradient-hero: none;
|
|
146
146
|
--gradient-glow: none;
|
|
147
147
|
|
|
148
|
-
/* Sans stack —
|
|
149
|
-
*
|
|
150
|
-
*
|
|
151
|
-
*
|
|
152
|
-
*
|
|
153
|
-
*
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
148
|
+
/* Sans stack — FONT-AGNOSTIC by default. The library ships NO hardcoded brand
|
|
149
|
+
* face here: `--font-sans-base` is a pure system stack so godx renders cleanly
|
|
150
|
+
* with zero font setup. Consumers supply their own faces (next/font, @fontsource,
|
|
151
|
+
* self-host) and set the tokens — never edit the library.
|
|
152
|
+
*
|
|
153
|
+
* Two ways to theme fonts, both token-only (no [lang] selectors to write):
|
|
154
|
+
* 1. One face everywhere → override `--font-sans-base`.
|
|
155
|
+
* 2. Per-language faces → set the per-lang SLOT tokens; styles/base.css wires
|
|
156
|
+
* each `[lang]` to read its slot with `--font-sans-base` as the fallback:
|
|
157
|
+
* --font-sans-ja (lang="ja")
|
|
158
|
+
* --font-sans-ko (lang="ko")
|
|
159
|
+
* --font-sans-vi (lang="vi")
|
|
160
|
+
* --font-sans-zh-hans (lang="zh" | "zh-Hans" | "zh-CN")
|
|
161
|
+
* --font-sans-zh-hant (lang="zh-Hant" | "zh-TW")
|
|
162
|
+
* e.g. `--font-sans-ja: "Noto Sans JP", var(--font-sans-base);`
|
|
163
|
+
* The opt-in bundle `@godxjp/ui/styles/fonts` fills these slots for its bundled
|
|
164
|
+
* Noto Sans JP + Montserrat faces, so the all-in-one entry is zero-config. */
|
|
165
|
+
--font-sans-base:
|
|
166
|
+
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui,
|
|
167
|
+
sans-serif;
|
|
168
|
+
--font-family-sans: var(--font-sans-base);
|
|
157
169
|
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
158
170
|
/* Dual-font split (opt-in) — many brand designs pair a DISPLAY face for headings with a separate
|
|
159
171
|
* BODY face (e.g. Source Sans 3 display + Inter body). Both default to --font-family-sans, so a
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@godxjp/ui",
|
|
3
|
-
"version": "16.
|
|
3
|
+
"version": "16.9.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"packageManager": "pnpm@10.29.1",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
"import": "./dist/index.js"
|
|
26
26
|
},
|
|
27
27
|
"./styles": "./dist/styles/index.css",
|
|
28
|
+
"./styles/*": "./dist/styles/*.css",
|
|
28
29
|
"./tokens": "./dist/tokens/base.css",
|
|
29
30
|
"./admin": {
|
|
30
31
|
"types": "./dist/components/admin/index.d.ts",
|
|
@@ -275,7 +276,7 @@
|
|
|
275
276
|
"test:coverage": "vitest run --coverage",
|
|
276
277
|
"check:example-imports": "node scripts/check-example-imports.mjs",
|
|
277
278
|
"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",
|
|
278
|
-
"verify:release": "pnpm
|
|
279
|
+
"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",
|
|
279
280
|
"check:mcp-sync": "node scripts/check-mcp-sync.mjs",
|
|
280
281
|
"check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
|
|
281
282
|
"check:mcp-prop-sync": "node scripts/check-mcp-prop-sync.mjs",
|