@godxjp/ui 16.7.2 → 16.8.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/dist/styles/base.css +249 -0
- package/dist/styles/fonts.css +22 -0
- package/dist/styles/index.css +14 -236
- package/dist/theme/famgia.service.css +43 -0
- package/package.json +2 -1
|
@@ -0,0 +1,249 @@
|
|
|
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
|
+
/* Vietnamese locale → Montserrat (set by AppProvider via <html lang="vi">). Overrides the
|
|
26
|
+
* --font-family-sans token so every body/heading rule that reads it switches automatically.
|
|
27
|
+
* Only takes visible effect when the Montserrat face is loaded (@godxjp/ui/styles/fonts, or
|
|
28
|
+
* your own); consumers managing their own fonts override this token directly. */
|
|
29
|
+
:root:lang(vi),
|
|
30
|
+
[lang="vi"] {
|
|
31
|
+
/* Montserrat for Latin/Vietnamese; Noto Sans JP kept as the tail so any 日本語 in a vi-locale
|
|
32
|
+
* screen still has the bundled JP face (Montserrat has no CJK glyphs). */
|
|
33
|
+
--font-family-sans:
|
|
34
|
+
"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
|
|
35
|
+
system-ui, "Noto Sans JP", sans-serif;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Guarantee the full set of semantic color utilities ships in the compiled CSS
|
|
39
|
+
* even when the library itself only references a few — consumers (and the token
|
|
40
|
+
* docs) must be able to use bg/text/border for EVERY semantic role. Without this
|
|
41
|
+
* Tailwind's JIT drops unused roles (success/info/attention) → transparent. */
|
|
42
|
+
@source inline(
|
|
43
|
+
"{bg,text,border,ring}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}"
|
|
44
|
+
);
|
|
45
|
+
@source inline(
|
|
46
|
+
"{bg,text}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}-foreground"
|
|
47
|
+
);
|
|
48
|
+
/* Extended text hierarchy + interaction-ramp utilities (library may not reference them directly). */
|
|
49
|
+
@source inline("{text,bg,border}-{foreground-tertiary,foreground-disabled,link,brand}");
|
|
50
|
+
@source inline("bg-{primary,secondary,destructive}-{hover,active}");
|
|
51
|
+
/* Force the extended radius steps so Tailwind emits --radius-xs/-xl/-2xl to :root (consumers read
|
|
52
|
+
* `var(--radius-2xl)` directly; without a generated utility Tailwind drops the unused var). */
|
|
53
|
+
@source inline("rounded-{xs,xl,2xl}");
|
|
54
|
+
@source inline("text-2xs");
|
|
55
|
+
@source inline("text-{3xl,4xl,5xl}");
|
|
56
|
+
@source inline("text-{primary,success,warning,info,error}-strong");
|
|
57
|
+
/* `.js` matters: the published package ships only compiled JS under dist (no
|
|
58
|
+
* .tsx sources), and this file is copied verbatim into dist/styles — without
|
|
59
|
+
* it Tailwind finds no component classes in consumers (unstyled popovers and
|
|
60
|
+
* selects, and Radix scroll-lock freezes the page because pointer-events-auto
|
|
61
|
+
* is never emitted). In-repo the glob scans src; published, it scans dist. */
|
|
62
|
+
@source "../**/*.{tsx,ts,js}";
|
|
63
|
+
@import "../tokens/base.css";
|
|
64
|
+
@import "./density.css";
|
|
65
|
+
|
|
66
|
+
/* `inline` (NOT a bare @theme): Tailwind inlines each expression — e.g. `hsl(var(--primary))` —
|
|
67
|
+
* directly into every utility (`bg-primary` becomes `background-color: hsl(var(--primary))`) instead
|
|
68
|
+
* of emitting `var(--color-primary)` computed once at :root. This is THE enabler for scoped /
|
|
69
|
+
* multi-tenant theming: a `[data-tenant]{ --primary: … }` override now re-resolves at the element,
|
|
70
|
+
* so colors and radius propagate into a subtree (a plain @theme froze them at :root, so scoped
|
|
71
|
+
* overrides never reached the color utilities). Components read raw tokens like `hsl(var(--primary))`
|
|
72
|
+
* directly in their own CSS, so they re-theme the same way. */
|
|
73
|
+
@theme inline {
|
|
74
|
+
--color-background: hsl(var(--background));
|
|
75
|
+
--color-foreground: hsl(var(--foreground));
|
|
76
|
+
--color-card: hsl(var(--card));
|
|
77
|
+
--color-card-foreground: hsl(var(--card-foreground));
|
|
78
|
+
--color-popover: hsl(var(--popover));
|
|
79
|
+
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
80
|
+
--color-primary: hsl(var(--primary));
|
|
81
|
+
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
82
|
+
--color-secondary: hsl(var(--secondary));
|
|
83
|
+
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
84
|
+
--color-muted: hsl(var(--muted));
|
|
85
|
+
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
86
|
+
--color-accent: hsl(var(--accent));
|
|
87
|
+
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
88
|
+
--color-destructive: hsl(var(--destructive));
|
|
89
|
+
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
90
|
+
--color-border: hsl(var(--border));
|
|
91
|
+
--color-input: hsl(var(--input));
|
|
92
|
+
--color-ring: hsl(var(--ring));
|
|
93
|
+
--color-success: hsl(var(--success));
|
|
94
|
+
--color-success-foreground: hsl(var(--success-foreground));
|
|
95
|
+
--color-warning: hsl(var(--warning));
|
|
96
|
+
--color-warning-foreground: hsl(var(--warning-foreground));
|
|
97
|
+
--color-info: hsl(var(--info));
|
|
98
|
+
--color-info-foreground: hsl(var(--info-foreground));
|
|
99
|
+
--color-attention: hsl(var(--attention));
|
|
100
|
+
--color-attention-foreground: hsl(var(--attention-foreground));
|
|
101
|
+
/* AA-strong status TEXT colours (text-{success,warning,info,error}-strong) — darker than the
|
|
102
|
+
* fills so small coloured labels clear WCAG AA on white; flip light on the dark theme. */
|
|
103
|
+
--color-primary-strong: hsl(var(--text-primary));
|
|
104
|
+
--color-success-strong: hsl(var(--text-success));
|
|
105
|
+
--color-warning-strong: hsl(var(--text-warning));
|
|
106
|
+
--color-info-strong: hsl(var(--text-info));
|
|
107
|
+
--color-error-strong: hsl(var(--text-error));
|
|
108
|
+
--color-chart-1: var(--chart-1);
|
|
109
|
+
--color-chart-2: var(--chart-2);
|
|
110
|
+
--color-chart-3: var(--chart-3);
|
|
111
|
+
--color-chart-4: var(--chart-4);
|
|
112
|
+
--color-chart-5: var(--chart-5);
|
|
113
|
+
--color-chart-6: var(--chart-6);
|
|
114
|
+
/* Golden-ratio radius scale — every step derives from --radius × (--radius-ratio = φ)ⁿ, so
|
|
115
|
+
* overriding --radius alone rescales the whole scale proportionally (≈ 1.4/2.3/3.7/6/9.7/15.7px). */
|
|
116
|
+
--radius-xs: calc(
|
|
117
|
+
var(--radius) / var(--radius-ratio) / var(--radius-ratio) / var(--radius-ratio)
|
|
118
|
+
);
|
|
119
|
+
--radius-sm: calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio));
|
|
120
|
+
--radius-md: calc(var(--radius) / var(--radius-ratio));
|
|
121
|
+
--radius-lg: var(--radius);
|
|
122
|
+
--radius-xl: calc(var(--radius) * var(--radius-ratio));
|
|
123
|
+
--radius-2xl: calc(var(--radius) * var(--radius-ratio) * var(--radius-ratio));
|
|
124
|
+
/* Extended text-hierarchy roles (tertiary / disabled / link / brand) → text-* / bg-* utilities. */
|
|
125
|
+
--color-foreground-tertiary: hsl(var(--text-tertiary));
|
|
126
|
+
--color-foreground-disabled: hsl(var(--text-disabled));
|
|
127
|
+
--color-link: hsl(var(--text-link));
|
|
128
|
+
--color-brand: hsl(var(--text-brand));
|
|
129
|
+
/* Interaction ramp (hover / active) → bg-primary-hover etc. */
|
|
130
|
+
--color-primary-hover: hsl(var(--primary-hover));
|
|
131
|
+
--color-primary-active: hsl(var(--primary-active));
|
|
132
|
+
--color-secondary-hover: hsl(var(--secondary-hover));
|
|
133
|
+
--color-secondary-active: hsl(var(--secondary-active));
|
|
134
|
+
--color-destructive-hover: hsl(var(--destructive-hover));
|
|
135
|
+
--color-destructive-active: hsl(var(--destructive-active));
|
|
136
|
+
/* Wire Tailwind's font-sans/mono (and preflight) to the design-system fonts. */
|
|
137
|
+
--font-sans: var(--font-family-sans);
|
|
138
|
+
--font-mono: var(--font-family-mono);
|
|
139
|
+
/* 和色 (wa-iro) accents → bg-wa / text-wa utilities (charts, tags, decoration). */
|
|
140
|
+
--color-wa-ai: var(--wa-ai);
|
|
141
|
+
--color-wa-gunjo: var(--wa-gunjo);
|
|
142
|
+
--color-wa-ruri: var(--wa-ruri);
|
|
143
|
+
--color-wa-kon: var(--wa-kon);
|
|
144
|
+
--color-wa-wakatake: var(--wa-wakatake);
|
|
145
|
+
--color-wa-moegi: var(--wa-moegi);
|
|
146
|
+
--color-wa-yamabuki: var(--wa-yamabuki);
|
|
147
|
+
--color-wa-shu: var(--wa-shu);
|
|
148
|
+
--color-wa-akane: var(--wa-akane);
|
|
149
|
+
--color-wa-enji: var(--wa-enji);
|
|
150
|
+
--color-wa-sakura: var(--wa-sakura);
|
|
151
|
+
--color-wa-sumi: var(--wa-sumi);
|
|
152
|
+
--color-wa-nezu: var(--wa-nezu);
|
|
153
|
+
/* Wire Tailwind text-* utilities to runtime typography tokens (fontSize toolbar). */
|
|
154
|
+
--text-2xs: var(--font-size-2xs);
|
|
155
|
+
--text-xs: var(--font-size-xs);
|
|
156
|
+
--text-sm: var(--font-size-sm);
|
|
157
|
+
--text-base: var(--font-size-base);
|
|
158
|
+
--text-lg: var(--font-size-lg);
|
|
159
|
+
--text-xl: var(--font-size-xl);
|
|
160
|
+
--text-2xl: var(--font-size-2xl);
|
|
161
|
+
/* Opt-in DISPLAY ramp (marketing/hero) — wired to the display tokens, unused by the admin scale. */
|
|
162
|
+
--text-3xl: var(--font-size-3xl);
|
|
163
|
+
--text-4xl: var(--font-size-4xl);
|
|
164
|
+
--text-5xl: var(--font-size-5xl);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
@layer base {
|
|
168
|
+
* {
|
|
169
|
+
border-color: hsl(var(--border));
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* Visually-hidden, absolutely-positioned helpers must never affect layout or scroll height.
|
|
173
|
+
*
|
|
174
|
+
* Radix renders a hidden native form-fallback (BubbleSelect/BubbleInput) for Select, Checkbox,
|
|
175
|
+
* Switch and RadioGroup; it is `position:absolute` with NO top/left, so when the control has no
|
|
176
|
+
* positioned ancestor its static box resolves far down the page and inflates
|
|
177
|
+
* `document.scrollHeight` → phantom empty scroll space (gh#105). The same is true of the
|
|
178
|
+
* `.sr-only` clamp (Tailwind / our own status + file-input nodes). These fallbacks are always
|
|
179
|
+
* `aria-hidden` + `tabindex=-1`. Pinning every such node to the top-left of its containing block
|
|
180
|
+
* makes it impossible for it to extend the scroll height, regardless of consumer markup — no DOM
|
|
181
|
+
* wrapper or per-component positioning required. Inside the AppShell the `.app-main { contain:
|
|
182
|
+
* paint }` boundary (gh#104) already contains these; this rule protects every other call site too. */
|
|
183
|
+
:where(select, input)[aria-hidden="true"][tabindex="-1"],
|
|
184
|
+
.sr-only {
|
|
185
|
+
top: 0;
|
|
186
|
+
inset-inline-start: 0;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
body {
|
|
190
|
+
background-color: hsl(var(--background));
|
|
191
|
+
color: hsl(var(--foreground));
|
|
192
|
+
/* Body reads --font-family-body (defaults to --font-family-sans → unchanged); a service that
|
|
193
|
+
* wants a dual-font brand (display + body face) overrides --font-family-body alone. */
|
|
194
|
+
font-family: var(--font-family-body);
|
|
195
|
+
font-size: var(--font-size-base);
|
|
196
|
+
line-height: var(--line-height-body);
|
|
197
|
+
font-feature-settings:
|
|
198
|
+
"cv02",
|
|
199
|
+
"cv03",
|
|
200
|
+
"cv04",
|
|
201
|
+
"cv11",
|
|
202
|
+
"rlig" 1,
|
|
203
|
+
"calt" 1;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* Semantic heading scale — SEO + accessibility: real <h1>–<h6> elements carry
|
|
207
|
+
* the document outline (one <h1> per page, levels never skipped). Visual size
|
|
208
|
+
* follows the dxs-kintai scale; component titles override via their own class.
|
|
209
|
+
* Headings read --font-family-display (defaults to --font-family-sans → unchanged) for dual-font
|
|
210
|
+
* brands (display face on headings, body face on prose). */
|
|
211
|
+
:where(h1, h2, h3, h4, h5, h6) {
|
|
212
|
+
font-family: var(--font-family-display);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
h1 {
|
|
216
|
+
font-size: var(--heading-h1);
|
|
217
|
+
font-weight: var(--font-weight-medium);
|
|
218
|
+
line-height: var(--line-height-tight);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
h2 {
|
|
222
|
+
font-size: var(--heading-h2);
|
|
223
|
+
font-weight: var(--font-weight-medium);
|
|
224
|
+
line-height: var(--line-height-tight);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
h3 {
|
|
228
|
+
font-size: var(--heading-h3);
|
|
229
|
+
font-weight: var(--font-weight-medium);
|
|
230
|
+
line-height: var(--line-height-tight);
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
h4 {
|
|
234
|
+
font-size: var(--heading-h4);
|
|
235
|
+
font-weight: var(--font-weight-medium);
|
|
236
|
+
line-height: var(--line-height-tight);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
h5,
|
|
240
|
+
h6 {
|
|
241
|
+
font-size: var(--font-size-xs);
|
|
242
|
+
font-weight: var(--font-weight-medium);
|
|
243
|
+
line-height: var(--line-height-tight);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
code {
|
|
247
|
+
font-family: var(--font-family-mono);
|
|
248
|
+
}
|
|
249
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
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";
|
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
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@godxjp/ui",
|
|
3
|
-
"version": "16.
|
|
3
|
+
"version": "16.8.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",
|