@godxjp/ui 17.0.0 → 17.0.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.
- package/dist/props/vocabulary/interaction.prop.d.ts +1 -1
- package/dist/styles/base.css +1 -1
- package/dist/styles/text-layout.css +1 -1
- package/dist/tokens/components/card.css +1 -1
- package/dist/tokens/foundation.css +3 -3
- package/package.json +2 -2
- package/scripts/ui-audit.mjs +2 -2
- package/scripts/visual-audit-rules.mjs +2 -2
|
@@ -11,7 +11,7 @@ export type ShapeProp = "default" | "pill" | "sharp";
|
|
|
11
11
|
export type TextSizeProp = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
|
|
12
12
|
/** Text colour intent — maps to semantic foreground tokens (no raw palette). */
|
|
13
13
|
export type TextToneProp = "default" | "muted" | "primary" | "success" | "warning" | "destructive" | "info";
|
|
14
|
-
/** Font weight — the
|
|
14
|
+
/** Font weight — the reference-design canon is THREE weights only: `regular` (400 body), `medium` (500
|
|
15
15
|
* heading/label), `bold` (700 emphasis). 600/`semibold` is forbidden. */
|
|
16
16
|
export type FontWeightProp = "regular" | "medium" | "bold";
|
|
17
17
|
/** Heading level — drives both the `--heading-h*` size token and the semantic `<h1..h4>` element. */
|
package/dist/styles/base.css
CHANGED
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
|
|
219
219
|
/* Semantic heading scale — SEO + accessibility: real <h1>–<h6> elements carry
|
|
220
220
|
* the document outline (one <h1> per page, levels never skipped). Visual size
|
|
221
|
-
* follows the
|
|
221
|
+
* follows the reference-design scale; component titles override via their own class.
|
|
222
222
|
* Headings read --font-family-display (defaults to --font-family-sans → unchanged) for dual-font
|
|
223
223
|
* brands (display face on headings, body face on prose). */
|
|
224
224
|
:where(h1, h2, h3, h4, h5, h6) {
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
font-size: var(--font-size-2xl);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
/* Weight — the
|
|
36
|
+
/* Weight — the reference-design canon (400 body · 500 heading/label · 700 emphasis). No 600.
|
|
37
37
|
* Shared by text + heading; the two-attribute heading selectors outrank the base heading
|
|
38
38
|
* rule below, so `<Heading weight="bold">` renders a semantic, emphasised title. */
|
|
39
39
|
[data-slot="text"][data-weight="regular"],
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
--card-header-border-bottom: initial;
|
|
44
44
|
--card-radius: var(--radius);
|
|
45
45
|
/* Resting elevation — quiet by default (rule #44): cards are flat (1px border, no shadow) in the
|
|
46
|
-
*
|
|
46
|
+
* reference-design baseline. A service that wants lifted cards sets this to an elevation token once,
|
|
47
47
|
* e.g. --card-shadow: var(--shadow-sm), and every Card picks up the shadow with no markup change. */
|
|
48
48
|
--card-shadow: 0 0 0 0 transparent;
|
|
49
49
|
/* Brand glow layer — invisible no-op at rest (rule #44). Paired AFTER --card-shadow in the
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* Foundation tokens: color, typography, raw spacing, ratio, radius, shadow. */
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
|
-
/* Color system (HSL components) —
|
|
4
|
+
/* Color system (HSL components) — the reference design: warm hue-60 neutral spine,
|
|
5
5
|
* SmartHR blue primary, 和色/wa-iro semantics. */
|
|
6
6
|
--background: 60 33% 99%; /* #fdfdfb warm off-white */
|
|
7
7
|
--foreground: 48 8% 13%; /* #23221e SmartHR TEXT_BLACK */
|
|
@@ -220,7 +220,7 @@
|
|
|
220
220
|
|
|
221
221
|
--font-weight-normal: 400;
|
|
222
222
|
--font-weight-medium: 500;
|
|
223
|
-
/*
|
|
223
|
+
/* the reference design uses three weights only: 400 body · 500 heading/label · 700 emphasis. 600 is
|
|
224
224
|
* forbidden (ambiguous between 500 and 700) — the legacy "semibold" token collapses to medium
|
|
225
225
|
* so any remaining reference renders at 500. `bold` is the 700 emphasis weight. */
|
|
226
226
|
--font-weight-semibold: 500;
|
|
@@ -325,7 +325,7 @@
|
|
|
325
325
|
|
|
326
326
|
/* Motion — the primitive tier for animation, so enter/transition timing reads a token
|
|
327
327
|
* instead of a literal 0.5s / cubic-bezier(...) / translateY(10px) (cardinal rule #2).
|
|
328
|
-
*
|
|
328
|
+
* the reference design keeps motion LOW: short durations, a calm decelerate curve, a small reveal shift.
|
|
329
329
|
* Consumers honour prefers-reduced-motion at the call site. */
|
|
330
330
|
--duration-fast: 150ms;
|
|
331
331
|
--duration-base: 250ms;
|
package/package.json
CHANGED
package/scripts/ui-audit.mjs
CHANGED
|
@@ -281,9 +281,9 @@ const RULES = [
|
|
|
281
281
|
{
|
|
282
282
|
id: "no-em-dash-in-copy",
|
|
283
283
|
severity: "warn",
|
|
284
|
-
// Em-dash (U+2014) in JSX text —
|
|
284
|
+
// Em-dash (U+2014) in JSX text — the reference design uses the middot `·` for JP/EN pairs and calm copy.
|
|
285
285
|
test: /[A-Za-z0-9-ヿ一-鿿]\s*—\s*[A-Za-z0-9-ヿ一-鿿]/,
|
|
286
|
-
standard: "@godxjp/ui
|
|
286
|
+
standard: "@godxjp/ui reference-design typography (best-ux) · Unicode punctuation",
|
|
287
287
|
message:
|
|
288
288
|
"No em-dash (—) in product copy. Use a middot `·` for JP/EN label pairs, or restructure into two calm sentences. Keep copy factual and quiet.",
|
|
289
289
|
},
|
|
@@ -29,7 +29,7 @@ export const VISUAL_RULES = [
|
|
|
29
29
|
id: "oversaturated-accent",
|
|
30
30
|
severity: "warn",
|
|
31
31
|
category: "color",
|
|
32
|
-
standard: "@godxjp/ui
|
|
32
|
+
standard: "@godxjp/ui reference-design 渋み (OKLCH chroma ≤ 0.18)",
|
|
33
33
|
fix: "Desaturate brand/primary surfaces — keep OKLCH chroma ≤ 0.18. Read --primary tokens; never paint a full-width bar in raw vivid blue.",
|
|
34
34
|
},
|
|
35
35
|
{
|
|
@@ -75,7 +75,7 @@ export function oklchChroma({ r, g, b }) {
|
|
|
75
75
|
return Math.hypot(oa, ob);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
/**
|
|
78
|
+
/** reference-design restraint bound. A signal/brand surface above this chroma "screams". */
|
|
79
79
|
export const CHROMA_LIMIT = 0.18;
|
|
80
80
|
|
|
81
81
|
/** @returns {boolean} true when an accent surface exceeds the 渋み chroma limit. */
|