@godxjp/ui 33.5.0 → 33.6.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/agent/START-HERE.md +1 -1
- package/agent/components/Logo.json +1 -1
- package/agent/components.json +1 -1
- package/agent/index.json +2 -2
- package/agent/llms.txt +3 -3
- package/agent/tokens.json +4 -4
- package/dist/brand/godx-artwork.generated.js +4 -4
- package/dist/brand/godx-mark.d.ts +2 -2
- package/dist/contracts/measurement.json +1 -1
- package/dist/email/tokens.generated.d.ts +6 -6
- package/dist/email/tokens.generated.js +6 -6
- package/dist/styles/layers.json +1 -1
- package/dist/themes/godx-tokens.css +22 -18
- package/dist/themes/godx.d.ts +1 -1
- package/dist/themes/godx.js +4 -1
- package/docs/CUSTOMER-THEMING.md +6 -5
- package/docs/DESIGN-AUTHORITY.md +6 -1
- package/package.json +2 -2
- package/scripts/brand-accent.generated.mjs +5 -30
- package/scripts/visual-audit-rules.mjs +6 -2
package/agent/START-HERE.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
You are about to write code against a design system you did not author. This file is the whole
|
|
4
4
|
contract. Read it before you write JSX.
|
|
5
5
|
|
|
6
|
-
**This catalog describes `@godxjp/ui` 33.
|
|
6
|
+
**This catalog describes `@godxjp/ui` 33.6.0.** If the project you are editing has a different
|
|
7
7
|
version in its `package.json`, read the pinned catalog for THAT version instead
|
|
8
8
|
(`…/v<their-version>/agent/…`). A catalog newer than the installed package describes props that do
|
|
9
9
|
not exist yet; older, and it hides props that do. Neither failure announces itself.
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"DO use `<Logo mark=\"godx-lockup\" productSuffix=\"ID\" />` for a product surface branded \"GoDX | ID\" — the divider, the gaps, the `size` scale and the light/dark master are the package's. DON'T inline the kit's flattened \"GoDX | ID\" SVG in the app: it is a second master in its own coordinate system, with global `id=\"title\"`/`id=\"desc\"` that collide across instances, a hardcoded `#0B0F3B` ink with no dark variant, and a hardcoded `#C5C8D6` rule (gh#649).",
|
|
71
71
|
"DON'T typeset the suffix yourself as `<Logo mark=\"godx-lockup\" /><Text>ID</Text>` — that has no divider and the spacing is not the lockup's token.",
|
|
72
72
|
"DON'T re-tint via `className=\"bg-*\"` — the fill reads the `--primary` role token; retune it through a service theme (`--primary`, `--logo-radius`, `--logo-size-*`), not utilities.",
|
|
73
|
-
"GoDX LOOK = THE PRESET (v32): the package defaults are neutral (ink `--primary`, no product mark). A GoDX surface gets the
|
|
73
|
+
"GoDX LOOK = THE PRESET (v32): the package defaults are neutral (ink `--primary`, no product mark). A GoDX surface gets the emerald-teal identity (#008066, gh#1345), the fonts and the GoDX mark in AuthIdentity from `import \"@godxjp/ui/themes/godx.css\"` (after the base stylesheet) plus `import { godxPreset } from \"@godxjp/ui/themes/godx\"` and `<AppProvider preset={godxPreset}>`. `mark=\"godx\"` / `\"godx-lockup\"` still render the GoDX artwork wherever you place them explicitly.",
|
|
74
74
|
"DO use `mark=\"godx\"` for the canonical GoDX identity mark on hosted-identity screens — it is ALREADY in the package as real inline vector artwork. DON'T pass a hand-drawn brand SVG as `glyph`, and don't ship a brand asset in the app, to reproduce it.",
|
|
75
75
|
"DO make the brand a link with `asChild`, not with a wrapper: `<Logo asChild mark=\"godx\" wordmark=\"GoDX\"><Link href=\"/\" /></Logo>`. Writing `<a className=\"flex\"><Logo …/></a>` instead is the exact shape ui-audit rejects (no-utility-layout), and dropping the `flex` misaligns the mark."
|
|
76
76
|
],
|
package/agent/components.json
CHANGED
|
@@ -3146,7 +3146,7 @@
|
|
|
3146
3146
|
"DO use `<Logo mark=\"godx-lockup\" productSuffix=\"ID\" />` for a product surface branded \"GoDX | ID\" — the divider, the gaps, the `size` scale and the light/dark master are the package's. DON'T inline the kit's flattened \"GoDX | ID\" SVG in the app: it is a second master in its own coordinate system, with global `id=\"title\"`/`id=\"desc\"` that collide across instances, a hardcoded `#0B0F3B` ink with no dark variant, and a hardcoded `#C5C8D6` rule (gh#649).",
|
|
3147
3147
|
"DON'T typeset the suffix yourself as `<Logo mark=\"godx-lockup\" /><Text>ID</Text>` — that has no divider and the spacing is not the lockup's token.",
|
|
3148
3148
|
"DON'T re-tint via `className=\"bg-*\"` — the fill reads the `--primary` role token; retune it through a service theme (`--primary`, `--logo-radius`, `--logo-size-*`), not utilities.",
|
|
3149
|
-
"GoDX LOOK = THE PRESET (v32): the package defaults are neutral (ink `--primary`, no product mark). A GoDX surface gets the
|
|
3149
|
+
"GoDX LOOK = THE PRESET (v32): the package defaults are neutral (ink `--primary`, no product mark). A GoDX surface gets the emerald-teal identity (#008066, gh#1345), the fonts and the GoDX mark in AuthIdentity from `import \"@godxjp/ui/themes/godx.css\"` (after the base stylesheet) plus `import { godxPreset } from \"@godxjp/ui/themes/godx\"` and `<AppProvider preset={godxPreset}>`. `mark=\"godx\"` / `\"godx-lockup\"` still render the GoDX artwork wherever you place them explicitly.",
|
|
3150
3150
|
"DO use `mark=\"godx\"` for the canonical GoDX identity mark on hosted-identity screens — it is ALREADY in the package as real inline vector artwork. DON'T pass a hand-drawn brand SVG as `glyph`, and don't ship a brand asset in the app, to reproduce it.",
|
|
3151
3151
|
"DO make the brand a link with `asChild`, not with a wrapper: `<Logo asChild mark=\"godx\" wordmark=\"GoDX\"><Link href=\"/\" /></Logo>`. Writing `<a className=\"flex\"><Logo …/></a>` instead is the exact shape ui-audit rejects (no-utility-layout), and dropping the `flex` misaligns the mark."
|
|
3152
3152
|
],
|
package/agent/index.json
CHANGED
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
|
|
55
55
|
"read": {
|
|
56
56
|
"live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
|
|
57
|
-
"pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v33.
|
|
57
|
+
"pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v33.6.0/agent/index.json"
|
|
58
58
|
},
|
|
59
59
|
"source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
|
|
60
60
|
"start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
|
|
69
69
|
"semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
|
|
70
70
|
},
|
|
71
|
-
"version": "33.
|
|
71
|
+
"version": "33.6.0"
|
|
72
72
|
}
|
package/agent/llms.txt
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# @godxjp/ui
|
|
2
2
|
|
|
3
3
|
> A Japanese-enterprise React design system: 166 components, 2232 design tokens,
|
|
4
|
-
> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.
|
|
4
|
+
> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.6.0.
|
|
5
5
|
|
|
6
6
|
If your client can run a process, do not read these files — run the MCP server instead
|
|
7
|
-
(`npx @godxjp/ui-mcp@33.
|
|
7
|
+
(`npx @godxjp/ui-mcp@33.6.0`). It is searchable and version-locked. These files exist for agents
|
|
8
8
|
that can only fetch URLs.
|
|
9
9
|
|
|
10
10
|
## Start
|
|
@@ -27,7 +27,7 @@ that can only fetch URLs.
|
|
|
27
27
|
## Pinning
|
|
28
28
|
|
|
29
29
|
Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
|
|
30
|
-
the tag: `.../godx-jp/godxjp-ui/v33.
|
|
30
|
+
the tag: `.../godx-jp/godxjp-ui/v33.6.0/agent/...`. A catalog that does not match the installed
|
|
31
31
|
package describes props that are absent, or hides props that are present, and says nothing either way.
|
|
32
32
|
|
|
33
33
|
Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.
|
package/agent/tokens.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
[
|
|
2
2
|
{
|
|
3
|
-
"description": "Color system (HSL components) — the reference design: warm hue-60 neutral spine, a NEUTRAL INK primary (v32, gh#1220), 和色/wa-iro semantics. The neutral spine still carries SmartHR's values and says so per line. The GoDX
|
|
3
|
+
"description": "Color system (HSL components) — the reference design: warm hue-60 neutral spine, a NEUTRAL INK primary (v32, gh#1220), 和色/wa-iro semantics. The neutral spine still carries SmartHR's values and says so per line. The GoDX identity colour is a preset now, not a default: `@godxjp/ui/themes/godx.css` (emerald-teal #008066 since gh#1345). #fdfdfb warm off-white",
|
|
4
4
|
"name": "--background",
|
|
5
5
|
"tier": "foundation",
|
|
6
6
|
"value": "60 33% 99%"
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
"value": "30 7% 53%"
|
|
139
139
|
},
|
|
140
140
|
{
|
|
141
|
-
"description": "STATUS FILLS AND THE INK THAT RIDES ON THEM. The FILLS are the palette and they do not move: 若竹, 山吹, 群青, 朱 are named colours, every solid success/attention surface in every consumer is one of them, and a chip that changes hue on upgrade is a different design. What moved is the INK, and only where it failed to be readable (gh#643). Measured from these very tokens (src/tokens/__tests__/status-fill-contrast.test.ts, and confirmed in Chromium by `check:frame-axe` on /isolate/foundation-colors at 320/375/1440): role fill WAS near-white ink dark ink (48 8% 13%) success #68be8d 2.19:1 ✗ 7.08:1 ✓ attention #eb6101 3.32:1 ✗ 4.68:1 ✓ warning #f8b500 1.74:1 ✗ 8.91:1 ✓ (already dark — the precedent) primary #18181b 17.45:1 ✓ (the GoDX preset
|
|
141
|
+
"description": "STATUS FILLS AND THE INK THAT RIDES ON THEM. The FILLS are the palette and they do not move: 若竹, 山吹, 群青, 朱 are named colours, every solid success/attention surface in every consumer is one of them, and a chip that changes hue on upgrade is a different design. What moved is the INK, and only where it failed to be readable (gh#643). Measured from these very tokens (src/tokens/__tests__/status-fill-contrast.test.ts, and confirmed in Chromium by `check:frame-axe` on /isolate/foundation-colors at 320/375/1440): role fill WAS near-white ink dark ink (48 8% 13%) success #68be8d 2.19:1 ✗ 7.08:1 ✓ attention #eb6101 3.32:1 ✗ 4.68:1 ✓ warning #f8b500 1.74:1 ✗ 8.91:1 ✓ (already dark — the precedent) primary #18181b 17.45:1 ✓ (the GoDX preset #008066: 4.86:1) destructive … 6.10:1 ✓ info #4c6cb3 5.00:1 ✓ Two of the eight light-theme fills carried an ink their own lightness cannot support, and the package already knew the answer twice over: --warning-foreground has always been this same near-black on the equally pale 山吹, and the DARK theme flips --success-foreground / --attention-foreground to 48 9% 9% for exactly this reason. The light block was the outlier. REJECTED — darkening 若竹 and 朱 so the near-white ink clears 4.5:1. A fill needs luminance ≤ 0.183 for that; 若竹 sits at 0.422, so \"keep the white text\" means a different green, not a darker one. That is the palette change this deliberately is not. 若竹 #68be8d",
|
|
142
142
|
"name": "--success",
|
|
143
143
|
"tier": "foundation",
|
|
144
144
|
"value": "146 40% 58%"
|
|
@@ -8382,7 +8382,7 @@
|
|
|
8382
8382
|
"value": "initial"
|
|
8383
8383
|
},
|
|
8384
8384
|
{
|
|
8385
|
-
"description": "Identity-fill INK — the ink `mark=\"glyph\"` sets its (caller-supplied) TEXT in when it sits on the --brand identity fill. This is deliberately NOT --brand-foreground. --brand-foreground is the identity artwork's KNOCKOUT colour, not an ink: it tracks --background in both themes (light 60 33% 99% = --background; dark 48 9% 9% = --background) because `<Logo mark=\"godx\">` punches its inner bar as an evenodd HOLE and the email mark has to paint that hole as a solid fill to match. Negative space only has to clear WCAG 2.2 SC 1.4.11 (3:1, non-text) — and at 3.67:1 on the emerald it does. The boxed glyph is a different thing: it renders real TEXT, so SC 1.4.3 applies at 4.5:1 (14px bold is NOT \"large text\" — that needs 18.66px bold / 24px). THIS INK USED TO BE THEME-INVARIANT, AND THE VIOLET IDENTITY ENDED THAT. While --brand was 翠 emerald the fill was light in BOTH themes, so one near-black ink cleared AA on both. Brand identity v2.3 makes the fill #7A00FF in light and #DCBCFF in dark — dark and light respectively — so a single ink cannot serve both: measured, near-black on the light-theme violet is 2.77:1, a real AA failure, while the same ink on the dark-theme violet is 10.72:1. So the ink now FLIPS with the theme, and each side is measured: light ink 60 33% 99% (#fdfdfb) on #
|
|
8385
|
+
"description": "Identity-fill INK — the ink `mark=\"glyph\"` sets its (caller-supplied) TEXT in when it sits on the --brand identity fill. This is deliberately NOT --brand-foreground. --brand-foreground is the identity artwork's KNOCKOUT colour, not an ink: it tracks --background in both themes (light 60 33% 99% = --background; dark 48 9% 9% = --background) because `<Logo mark=\"godx\">` punches its inner bar as an evenodd HOLE and the email mark has to paint that hole as a solid fill to match. Negative space only has to clear WCAG 2.2 SC 1.4.11 (3:1, non-text) — and at 3.67:1 on the emerald it does. The boxed glyph is a different thing: it renders real TEXT, so SC 1.4.3 applies at 4.5:1 (14px bold is NOT \"large text\" — that needs 18.66px bold / 24px). THIS INK USED TO BE THEME-INVARIANT, AND THE VIOLET IDENTITY ENDED THAT. While --brand was 翠 emerald the fill was light in BOTH themes, so one near-black ink cleared AA on both. Brand identity v2.3 makes the fill #7A00FF in light and #DCBCFF in dark — dark and light respectively — so a single ink cannot serve both: measured, near-black on the light-theme violet is 2.77:1, a real AA failure, while the same ink on the dark-theme violet is 10.72:1. The GoDX emerald-teal of gh#1345 keeps the same polarity (#008066 light, #5CD6BE dark). So the ink now FLIPS with the theme, and each side is measured on the GoDX preset: light ink 60 33% 99% (#fdfdfb) on #008066 = 4.86:1 dark ink 48 9% 9% (#191815) on #5CD6BE = 9.99:1 The dark override lives HERE and not in foundation.css on purpose: `:root` and `.dark` have equal specificity, and tokens/base.css imports this file AFTER foundation.css — so a `.dark` rule there would lose to the `:root` rule here. Same file, later block, no ambiguity. A service that re-themes --brand to a fill of the opposite lightness overrides --logo-success-foreground (the public knob) to re-invert the ink. NOT a role-mirror knob: its default is a real value, not a role token, so there is no role to freeze at :root and the `initial` + call-site rule (docs/TOKENS.md) does not apply to it.",
|
|
8386
8386
|
"name": "--logo-identity-foreground",
|
|
8387
8387
|
"tier": "component",
|
|
8388
8388
|
"value": "60 33% 99%"
|
|
@@ -8580,7 +8580,7 @@
|
|
|
8580
8580
|
"value": "initial"
|
|
8581
8581
|
},
|
|
8582
8582
|
{
|
|
8583
|
-
"description": "The other half of the ink flip above — see --logo-identity-foreground. The dark fill is the LIGHT
|
|
8583
|
+
"description": "The other half of the ink flip above — see --logo-identity-foreground. The dark fill is the LIGHT green #5CD6BE in the GoDX preset, so the glyph goes back to the near-black spine (9.99:1).",
|
|
8584
8584
|
"name": "--logo-identity-foreground",
|
|
8585
8585
|
"tier": "component",
|
|
8586
8586
|
"value": "48 9% 9%"
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
const GODX_ARTWORK_ID_TOKEN = "__GXID__";
|
|
2
2
|
const GODX_LOCKUP_LIGHT = Object.freeze({
|
|
3
3
|
viewBox: "30 30 871.285714 182.000000",
|
|
4
|
-
markup: '<defs>\n <radialGradient id="__GXID__-gx-lockup-l-iconBodyGradient" gradientUnits="userSpaceOnUse" cx="58" cy="39" r="183">\n <stop offset="0" stop-color="#
|
|
4
|
+
markup: '<defs>\n <radialGradient id="__GXID__-gx-lockup-l-iconBodyGradient" gradientUnits="userSpaceOnUse" cx="58" cy="39" r="183">\n <stop offset="0" stop-color="#008066"/><stop offset="0.46" stop-color="#00513F"/><stop offset="1" stop-color="#03241D"/>\n </radialGradient>\n <linearGradient id="__GXID__-gx-lockup-l-arrowTopGradient" gradientUnits="userSpaceOnUse" x1="138" y1="100" x2="245" y2="148">\n <stop offset="0" stop-color="#008066"/><stop offset="1" stop-color="#00A383"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-lockup-l-arrowFoldGradient" gradientUnits="userSpaceOnUse" x1="230" y1="125" x2="165" y2="214">\n <stop offset="0" stop-color="#006E57"/><stop offset="0.40" stop-color="#00A383"/><stop offset="1" stop-color="#5CE6C4"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-lockup-l-xMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n <stop offset="0" stop-color="#03241D"/><stop offset="0.28" stop-color="#024034"/><stop offset="0.62" stop-color="#00A383"/><stop offset="1" stop-color="#008066"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-lockup-l-xUpperGradient" gradientUnits="userSpaceOnUse" x1="747" y1="52" x2="795" y2="119">\n <stop offset="0" stop-color="#03241D"/><stop offset="0.70" stop-color="#023328"/><stop offset="1" stop-color="#008066"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-lockup-l-xLowerGradient" gradientUnits="userSpaceOnUse" x1="810" y1="125" x2="863" y2="188">\n <stop offset="0" stop-color="#008066"/><stop offset="0.55" stop-color="#023328"/><stop offset="1" stop-color="#03241D"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-lockup-l-reverseIconGradient" gradientUnits="userSpaceOnUse" x1="52" y1="40" x2="182" y2="211">\n <stop offset="0" stop-color="#008066"/><stop offset="0.6" stop-color="#2FBF9C"/><stop offset="1" stop-color="#B8EBDD"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-lockup-l-reverseXMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n <stop offset="0" stop-color="#D9F5EE"/><stop offset="0.46" stop-color="#4FD1AE"/><stop offset="1" stop-color="#008066"/>\n </linearGradient>\n <clipPath id="__GXID__-gx-lockup-l-arrowClip"><path d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/></clipPath>\n</defs>\n\n<g id="__GXID__-gx-lockup-l-godx-logo" transform="translate(5 7)">\n<path id="__GXID__-gx-lockup-l-icon-body" fill="url(#__GXID__-gx-lockup-l-iconBodyGradient)" fill-rule="evenodd" d="M118 23 H183 C186 23 187 24 189 26 L222 64 Q226 69 220 69 H122 C96 69 75 91 75 117 C75 142 97 161 122 161 H151 Q157 161 153 166 L120 203 Q118 205 115 205 C90 205 69 194 50 174 C32 155 25 138 25 117 C25 92 36 75 56 54 C77 32 95 23 118 23 Z"/>\n<path id="__GXID__-gx-lockup-l-icon-arrow" fill="url(#__GXID__-gx-lockup-l-arrowTopGradient)" fill-rule="evenodd" d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/>\n<path id="__GXID__-gx-lockup-l-arrow-fold" clip-path="url(#__GXID__-gx-lockup-l-arrowClip)" fill="url(#__GXID__-gx-lockup-l-arrowFoldGradient)" d="M177.5,157 C205,133 238,109 267,120 L285,230 L110,230 Z"/>\n<path id="__GXID__-gx-lockup-l-letter-g" fill="#0B0F3B" fill-rule="evenodd" d="M428 76 L399 98 C391 86 378 79 365 79 C342 79 325 98 325 121 C325 144 343 163 365 163 C382 163 395 153 402 137 H362 V107 H442 V121 C442 165 409 198 365 198 C322 198 287 164 287 121 C287 78 322 44 365 44 C390 44 413 57 428 76 Z"/>\n<path id="__GXID__-gx-lockup-l-letter-o" fill="#0B0F3B" fill-rule="evenodd" d="M566 142.5 C566 173.704 539.585 199 507 199 C474.415 199 448 173.704 448 142.5 C448 111.296 474.415 86 507 86 C539.585 86 566 111.296 566 142.5 Z M533.5 142.5 C533.5 156.583 521.636 168 507 168 C492.364 168 480.5 156.583 480.5 142.5 C480.5 128.417 492.364 117 507 117 C521.636 117 533.5 128.417 533.5 142.5 Z"/>\n<path id="__GXID__-gx-lockup-l-letter-d" fill="#0B0F3B" fill-rule="evenodd" d="M574 44 H650 C698 44 732 75 732 121 C732 162 698 198 650 198 H574 Z M616.5 78 H649 C673 78 690 96 690 121 C690 146 673 164 649 164 H616.5 Z"/>\n<path id="__GXID__-gx-lockup-l-x-upper" fill="url(#__GXID__-gx-lockup-l-xUpperGradient)" fill-rule="evenodd" d="M715 44 H762 Q764 44 765 46 L801 86 L774 117 L713 47 Q711 44 715 44 Z"/>\n<path id="__GXID__-gx-lockup-l-x-diagonal" fill="url(#__GXID__-gx-lockup-l-xMainGradient)" fill-rule="evenodd" d="M844 42 H895 Q897 42 895 44 L761 196 Q759 198 757 198 H711 Q708 198 710 196 L841 44 Q843 42 844 42 Z"/>\n<path id="__GXID__-gx-lockup-l-x-lower" fill="url(#__GXID__-gx-lockup-l-xLowerGradient)" fill-rule="evenodd" d="M831 121 L895 196 Q898 199 894 199 H847 Q844 199 842 197 L805 153 Q803 151 805 149 Z"/>\n</g>'
|
|
5
5
|
});
|
|
6
6
|
const GODX_LOCKUP_DARK = Object.freeze({
|
|
7
7
|
viewBox: "30 30 871.285714 182.000000",
|
|
8
|
-
markup: '<defs>\n <radialGradient id="__GXID__-gx-lockup-d-iconBodyGradient" gradientUnits="userSpaceOnUse" cx="58" cy="39" r="183">\n <stop offset="0" stop-color="#
|
|
8
|
+
markup: '<defs>\n <radialGradient id="__GXID__-gx-lockup-d-iconBodyGradient" gradientUnits="userSpaceOnUse" cx="58" cy="39" r="183">\n <stop offset="0" stop-color="#008066"/><stop offset="0.46" stop-color="#00513F"/><stop offset="1" stop-color="#03241D"/>\n </radialGradient>\n <linearGradient id="__GXID__-gx-lockup-d-arrowTopGradient" gradientUnits="userSpaceOnUse" x1="138" y1="100" x2="245" y2="148">\n <stop offset="0" stop-color="#008066"/><stop offset="1" stop-color="#00A383"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-lockup-d-arrowFoldGradient" gradientUnits="userSpaceOnUse" x1="230" y1="125" x2="165" y2="214">\n <stop offset="0" stop-color="#006E57"/><stop offset="0.40" stop-color="#00A383"/><stop offset="1" stop-color="#5CE6C4"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-lockup-d-xMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n <stop offset="0" stop-color="#03241D"/><stop offset="0.28" stop-color="#024034"/><stop offset="0.62" stop-color="#00A383"/><stop offset="1" stop-color="#008066"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-lockup-d-xUpperGradient" gradientUnits="userSpaceOnUse" x1="747" y1="52" x2="795" y2="119">\n <stop offset="0" stop-color="#03241D"/><stop offset="0.70" stop-color="#023328"/><stop offset="1" stop-color="#008066"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-lockup-d-xLowerGradient" gradientUnits="userSpaceOnUse" x1="810" y1="125" x2="863" y2="188">\n <stop offset="0" stop-color="#008066"/><stop offset="0.55" stop-color="#023328"/><stop offset="1" stop-color="#03241D"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-lockup-d-reverseIconGradient" gradientUnits="userSpaceOnUse" x1="52" y1="40" x2="182" y2="211">\n <stop offset="0" stop-color="#008066"/><stop offset="0.6" stop-color="#2FBF9C"/><stop offset="1" stop-color="#B8EBDD"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-lockup-d-reverseXMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n <stop offset="0" stop-color="#D9F5EE"/><stop offset="0.46" stop-color="#4FD1AE"/><stop offset="1" stop-color="#008066"/>\n </linearGradient>\n <clipPath id="__GXID__-gx-lockup-d-arrowClip"><path d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/></clipPath>\n</defs>\n\n<g id="__GXID__-gx-lockup-d-godx-logo" transform="translate(5 7)">\n<path id="__GXID__-gx-lockup-d-icon-body" fill="url(#__GXID__-gx-lockup-d-reverseIconGradient)" fill-rule="evenodd" d="M118 23 H183 C186 23 187 24 189 26 L222 64 Q226 69 220 69 H122 C96 69 75 91 75 117 C75 142 97 161 122 161 H151 Q157 161 153 166 L120 203 Q118 205 115 205 C90 205 69 194 50 174 C32 155 25 138 25 117 C25 92 36 75 56 54 C77 32 95 23 118 23 Z"/>\n<path id="__GXID__-gx-lockup-d-icon-arrow" fill="url(#__GXID__-gx-lockup-d-arrowTopGradient)" fill-rule="evenodd" d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/>\n<path id="__GXID__-gx-lockup-d-arrow-fold" clip-path="url(#__GXID__-gx-lockup-d-arrowClip)" fill="url(#__GXID__-gx-lockup-d-arrowFoldGradient)" d="M177.5,157 C205,133 238,109 267,120 L285,230 L110,230 Z"/>\n<path id="__GXID__-gx-lockup-d-letter-g" fill="#FFFFFF" fill-rule="evenodd" d="M428 76 L399 98 C391 86 378 79 365 79 C342 79 325 98 325 121 C325 144 343 163 365 163 C382 163 395 153 402 137 H362 V107 H442 V121 C442 165 409 198 365 198 C322 198 287 164 287 121 C287 78 322 44 365 44 C390 44 413 57 428 76 Z"/>\n<path id="__GXID__-gx-lockup-d-letter-o" fill="#FFFFFF" fill-rule="evenodd" d="M566 142.5 C566 173.704 539.585 199 507 199 C474.415 199 448 173.704 448 142.5 C448 111.296 474.415 86 507 86 C539.585 86 566 111.296 566 142.5 Z M533.5 142.5 C533.5 156.583 521.636 168 507 168 C492.364 168 480.5 156.583 480.5 142.5 C480.5 128.417 492.364 117 507 117 C521.636 117 533.5 128.417 533.5 142.5 Z"/>\n<path id="__GXID__-gx-lockup-d-letter-d" fill="#FFFFFF" fill-rule="evenodd" d="M574 44 H650 C698 44 732 75 732 121 C732 162 698 198 650 198 H574 Z M616.5 78 H649 C673 78 690 96 690 121 C690 146 673 164 649 164 H616.5 Z"/>\n<path id="__GXID__-gx-lockup-d-x-upper" fill="#FFFFFF" fill-rule="evenodd" d="M715 44 H762 Q764 44 765 46 L801 86 L774 117 L713 47 Q711 44 715 44 Z"/>\n<path id="__GXID__-gx-lockup-d-x-diagonal" fill="url(#__GXID__-gx-lockup-d-reverseXMainGradient)" fill-rule="evenodd" d="M844 42 H895 Q897 42 895 44 L761 196 Q759 198 757 198 H711 Q708 198 710 196 L841 44 Q843 42 844 42 Z"/>\n<path id="__GXID__-gx-lockup-d-x-lower" fill="#FFFFFF" fill-rule="evenodd" d="M831 121 L895 196 Q898 199 894 199 H847 Q844 199 842 197 L805 153 Q803 151 805 149 Z"/>\n</g>'
|
|
9
9
|
});
|
|
10
10
|
const GODX_MARK_LIGHT = Object.freeze({
|
|
11
11
|
viewBox: "30 30 241.000000 182.000000",
|
|
12
|
-
markup: '<defs>\n <radialGradient id="__GXID__-gx-mark-l-iconBodyGradient" gradientUnits="userSpaceOnUse" cx="58" cy="39" r="183">\n <stop offset="0" stop-color="#
|
|
12
|
+
markup: '<defs>\n <radialGradient id="__GXID__-gx-mark-l-iconBodyGradient" gradientUnits="userSpaceOnUse" cx="58" cy="39" r="183">\n <stop offset="0" stop-color="#008066"/><stop offset="0.46" stop-color="#00513F"/><stop offset="1" stop-color="#03241D"/>\n </radialGradient>\n <linearGradient id="__GXID__-gx-mark-l-arrowTopGradient" gradientUnits="userSpaceOnUse" x1="138" y1="100" x2="245" y2="148">\n <stop offset="0" stop-color="#008066"/><stop offset="1" stop-color="#00A383"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-mark-l-arrowFoldGradient" gradientUnits="userSpaceOnUse" x1="230" y1="125" x2="165" y2="214">\n <stop offset="0" stop-color="#006E57"/><stop offset="0.40" stop-color="#00A383"/><stop offset="1" stop-color="#5CE6C4"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-mark-l-xMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n <stop offset="0" stop-color="#03241D"/><stop offset="0.28" stop-color="#024034"/><stop offset="0.62" stop-color="#00A383"/><stop offset="1" stop-color="#008066"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-mark-l-xUpperGradient" gradientUnits="userSpaceOnUse" x1="747" y1="52" x2="795" y2="119">\n <stop offset="0" stop-color="#03241D"/><stop offset="0.70" stop-color="#023328"/><stop offset="1" stop-color="#008066"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-mark-l-xLowerGradient" gradientUnits="userSpaceOnUse" x1="810" y1="125" x2="863" y2="188">\n <stop offset="0" stop-color="#008066"/><stop offset="0.55" stop-color="#023328"/><stop offset="1" stop-color="#03241D"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-mark-l-reverseIconGradient" gradientUnits="userSpaceOnUse" x1="52" y1="40" x2="182" y2="211">\n <stop offset="0" stop-color="#008066"/><stop offset="0.6" stop-color="#2FBF9C"/><stop offset="1" stop-color="#B8EBDD"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-mark-l-reverseXMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n <stop offset="0" stop-color="#D9F5EE"/><stop offset="0.46" stop-color="#4FD1AE"/><stop offset="1" stop-color="#008066"/>\n </linearGradient>\n <clipPath id="__GXID__-gx-mark-l-arrowClip"><path d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/></clipPath>\n</defs>\n\n<g id="__GXID__-gx-mark-l-godx-icon" transform="translate(5 7)">\n<path id="__GXID__-gx-mark-l-icon-body" fill="url(#__GXID__-gx-mark-l-iconBodyGradient)" fill-rule="evenodd" d="M118 23 H183 C186 23 187 24 189 26 L222 64 Q226 69 220 69 H122 C96 69 75 91 75 117 C75 142 97 161 122 161 H151 Q157 161 153 166 L120 203 Q118 205 115 205 C90 205 69 194 50 174 C32 155 25 138 25 117 C25 92 36 75 56 54 C77 32 95 23 118 23 Z"/>\n<path id="__GXID__-gx-mark-l-icon-arrow" fill="url(#__GXID__-gx-mark-l-arrowTopGradient)" fill-rule="evenodd" d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/>\n<path id="__GXID__-gx-mark-l-arrow-fold" clip-path="url(#__GXID__-gx-mark-l-arrowClip)" fill="url(#__GXID__-gx-mark-l-arrowFoldGradient)" d="M177.5,157 C205,133 238,109 267,120 L285,230 L110,230 Z"/>\n</g>'
|
|
13
13
|
});
|
|
14
14
|
const GODX_MARK_DARK = Object.freeze({
|
|
15
15
|
viewBox: "30 30 241.000000 182.000000",
|
|
16
|
-
markup: '<defs>\n <radialGradient id="__GXID__-gx-mark-d-iconBodyGradient" gradientUnits="userSpaceOnUse" cx="58" cy="39" r="183">\n <stop offset="0" stop-color="#
|
|
16
|
+
markup: '<defs>\n <radialGradient id="__GXID__-gx-mark-d-iconBodyGradient" gradientUnits="userSpaceOnUse" cx="58" cy="39" r="183">\n <stop offset="0" stop-color="#008066"/><stop offset="0.46" stop-color="#00513F"/><stop offset="1" stop-color="#03241D"/>\n </radialGradient>\n <linearGradient id="__GXID__-gx-mark-d-arrowTopGradient" gradientUnits="userSpaceOnUse" x1="138" y1="100" x2="245" y2="148">\n <stop offset="0" stop-color="#008066"/><stop offset="1" stop-color="#00A383"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-mark-d-arrowFoldGradient" gradientUnits="userSpaceOnUse" x1="230" y1="125" x2="165" y2="214">\n <stop offset="0" stop-color="#006E57"/><stop offset="0.40" stop-color="#00A383"/><stop offset="1" stop-color="#5CE6C4"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-mark-d-xMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n <stop offset="0" stop-color="#03241D"/><stop offset="0.28" stop-color="#024034"/><stop offset="0.62" stop-color="#00A383"/><stop offset="1" stop-color="#008066"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-mark-d-xUpperGradient" gradientUnits="userSpaceOnUse" x1="747" y1="52" x2="795" y2="119">\n <stop offset="0" stop-color="#03241D"/><stop offset="0.70" stop-color="#023328"/><stop offset="1" stop-color="#008066"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-mark-d-xLowerGradient" gradientUnits="userSpaceOnUse" x1="810" y1="125" x2="863" y2="188">\n <stop offset="0" stop-color="#008066"/><stop offset="0.55" stop-color="#023328"/><stop offset="1" stop-color="#03241D"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-mark-d-reverseIconGradient" gradientUnits="userSpaceOnUse" x1="52" y1="40" x2="182" y2="211">\n <stop offset="0" stop-color="#008066"/><stop offset="0.6" stop-color="#2FBF9C"/><stop offset="1" stop-color="#B8EBDD"/>\n </linearGradient>\n <linearGradient id="__GXID__-gx-mark-d-reverseXMainGradient" gradientUnits="userSpaceOnUse" x1="861" y1="48" x2="739" y2="202">\n <stop offset="0" stop-color="#D9F5EE"/><stop offset="0.46" stop-color="#4FD1AE"/><stop offset="1" stop-color="#008066"/>\n </linearGradient>\n <clipPath id="__GXID__-gx-mark-d-arrowClip"><path d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/></clipPath>\n</defs>\n\n<g id="__GXID__-gx-mark-d-godx-icon" transform="translate(5 7)">\n<path id="__GXID__-gx-mark-d-icon-body" fill="url(#__GXID__-gx-mark-d-reverseIconGradient)" fill-rule="evenodd" d="M118 23 H183 C186 23 187 24 189 26 L222 64 Q226 69 220 69 H122 C96 69 75 91 75 117 C75 142 97 161 122 161 H151 Q157 161 153 166 L120 203 Q118 205 115 205 C90 205 69 194 50 174 C32 155 25 138 25 117 C25 92 36 75 56 54 C77 32 95 23 118 23 Z"/>\n<path id="__GXID__-gx-mark-d-icon-arrow" fill="url(#__GXID__-gx-mark-d-arrowTopGradient)" fill-rule="evenodd" d="M131 97 H244 Q247 97 249 100 L264 117 Q268 122 264 127 L194 201 Q190 205 185 205 H139 Q133 205 137 201 L176 160 Q179 157 176 154 L129 104 Q123 97 131 97 Z"/>\n<path id="__GXID__-gx-mark-d-arrow-fold" clip-path="url(#__GXID__-gx-mark-d-arrowClip)" fill="url(#__GXID__-gx-mark-d-arrowFoldGradient)" d="M177.5,157 C205,133 238,109 267,120 L285,230 L110,230 Z"/>\n</g>'
|
|
17
17
|
});
|
|
18
18
|
export {
|
|
19
19
|
GODX_ARTWORK_ID_TOKEN,
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
* and its `--check` guard compare against, so the email mark cannot drift from the package's own
|
|
17
17
|
* flat artwork — the drift that was caught once already.
|
|
18
18
|
*
|
|
19
|
-
* MONOCHROME. The kit also ships a gradient cut (#7A00FF → #3700A6 → #0B0F3B
|
|
20
|
-
* not used: this mark is painted by a token (`--logo-godx-color` on the web, a colour argument in
|
|
19
|
+
* MONOCHROME. The kit also ships a gradient cut (#7A00FF → #3700A6 → #0B0F3B; the web master's
|
|
20
|
+
* stops are emerald-teal since gh#1345). It is deliberately not used: this mark is painted by a token (`--logo-godx-color` on the web, a colour argument in
|
|
21
21
|
* email) so it re-tints per theme and knocks out on dark surfaces. A baked gradient can do neither,
|
|
22
22
|
* and email clients are worse at gradients than they are at paths.
|
|
23
23
|
*/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
|
|
3
|
-
"version": "33.
|
|
3
|
+
"version": "33.6.0",
|
|
4
4
|
"targetSize": {
|
|
5
5
|
"standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
|
|
6
6
|
"min": 24,
|
|
@@ -155,7 +155,7 @@ export declare const EMAIL_COLOR_SOURCE_GODX: {
|
|
|
155
155
|
};
|
|
156
156
|
readonly primary: {
|
|
157
157
|
readonly cssVar: "--primary";
|
|
158
|
-
readonly hsl: "
|
|
158
|
+
readonly hsl: "168 100% 25%";
|
|
159
159
|
};
|
|
160
160
|
readonly primaryForeground: {
|
|
161
161
|
readonly cssVar: "--primary-foreground";
|
|
@@ -163,11 +163,11 @@ export declare const EMAIL_COLOR_SOURCE_GODX: {
|
|
|
163
163
|
};
|
|
164
164
|
readonly focus: {
|
|
165
165
|
readonly cssVar: "--primary";
|
|
166
|
-
readonly hsl: "
|
|
166
|
+
readonly hsl: "168 100% 25%";
|
|
167
167
|
};
|
|
168
168
|
readonly brand: {
|
|
169
169
|
readonly cssVar: "--brand";
|
|
170
|
-
readonly hsl: "
|
|
170
|
+
readonly hsl: "168 100% 25%";
|
|
171
171
|
};
|
|
172
172
|
readonly brandForeground: {
|
|
173
173
|
readonly cssVar: "--brand-foreground";
|
|
@@ -214,7 +214,7 @@ export declare const EMAIL_COLOR_SOURCE_GODX_DARK: {
|
|
|
214
214
|
};
|
|
215
215
|
readonly primary: {
|
|
216
216
|
readonly cssVar: "--primary";
|
|
217
|
-
readonly hsl: "
|
|
217
|
+
readonly hsl: "168 60% 60%";
|
|
218
218
|
};
|
|
219
219
|
readonly primaryForeground: {
|
|
220
220
|
readonly cssVar: "--primary-foreground";
|
|
@@ -222,11 +222,11 @@ export declare const EMAIL_COLOR_SOURCE_GODX_DARK: {
|
|
|
222
222
|
};
|
|
223
223
|
readonly focus: {
|
|
224
224
|
readonly cssVar: "--primary";
|
|
225
|
-
readonly hsl: "
|
|
225
|
+
readonly hsl: "168 60% 60%";
|
|
226
226
|
};
|
|
227
227
|
readonly brand: {
|
|
228
228
|
readonly cssVar: "--brand";
|
|
229
|
-
readonly hsl: "
|
|
229
|
+
readonly hsl: "168 60% 60%";
|
|
230
230
|
};
|
|
231
231
|
readonly brandForeground: {
|
|
232
232
|
readonly cssVar: "--brand-foreground";
|
|
@@ -145,7 +145,7 @@ const EMAIL_COLOR_SOURCE_GODX = {
|
|
|
145
145
|
},
|
|
146
146
|
"primary": {
|
|
147
147
|
"cssVar": "--primary",
|
|
148
|
-
"hsl": "
|
|
148
|
+
"hsl": "168 100% 25%"
|
|
149
149
|
},
|
|
150
150
|
"primaryForeground": {
|
|
151
151
|
"cssVar": "--primary-foreground",
|
|
@@ -153,11 +153,11 @@ const EMAIL_COLOR_SOURCE_GODX = {
|
|
|
153
153
|
},
|
|
154
154
|
"focus": {
|
|
155
155
|
"cssVar": "--primary",
|
|
156
|
-
"hsl": "
|
|
156
|
+
"hsl": "168 100% 25%"
|
|
157
157
|
},
|
|
158
158
|
"brand": {
|
|
159
159
|
"cssVar": "--brand",
|
|
160
|
-
"hsl": "
|
|
160
|
+
"hsl": "168 100% 25%"
|
|
161
161
|
},
|
|
162
162
|
"brandForeground": {
|
|
163
163
|
"cssVar": "--brand-foreground",
|
|
@@ -203,7 +203,7 @@ const EMAIL_COLOR_SOURCE_GODX_DARK = {
|
|
|
203
203
|
},
|
|
204
204
|
"primary": {
|
|
205
205
|
"cssVar": "--primary",
|
|
206
|
-
"hsl": "
|
|
206
|
+
"hsl": "168 60% 60%"
|
|
207
207
|
},
|
|
208
208
|
"primaryForeground": {
|
|
209
209
|
"cssVar": "--primary-foreground",
|
|
@@ -211,11 +211,11 @@ const EMAIL_COLOR_SOURCE_GODX_DARK = {
|
|
|
211
211
|
},
|
|
212
212
|
"focus": {
|
|
213
213
|
"cssVar": "--primary",
|
|
214
|
-
"hsl": "
|
|
214
|
+
"hsl": "168 60% 60%"
|
|
215
215
|
},
|
|
216
216
|
"brand": {
|
|
217
217
|
"cssVar": "--brand",
|
|
218
|
-
"hsl": "
|
|
218
|
+
"hsl": "168 60% 60%"
|
|
219
219
|
},
|
|
220
220
|
"brandForeground": {
|
|
221
221
|
"cssVar": "--brand-foreground",
|
package/dist/styles/layers.json
CHANGED
|
@@ -1,41 +1,45 @@
|
|
|
1
1
|
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
|
-
--primary:
|
|
4
|
+
--primary: 168 100% 25%;
|
|
5
5
|
--primary-foreground: 60 33% 99%;
|
|
6
6
|
|
|
7
|
-
--brand:
|
|
7
|
+
--brand: 168 100% 25%;
|
|
8
8
|
--brand-foreground: 60 33% 99%;
|
|
9
|
+
|
|
10
|
+
--shadow-color: 18 43 38;
|
|
9
11
|
}
|
|
10
12
|
|
|
11
13
|
.dark,
|
|
12
14
|
:root[data-theme="dark"] {
|
|
13
15
|
|
|
14
|
-
--primary:
|
|
16
|
+
--primary: 168 60% 60%;
|
|
15
17
|
--primary-foreground: 48 9% 9%;
|
|
16
|
-
--brand:
|
|
18
|
+
--brand: 168 60% 60%;
|
|
17
19
|
--brand-foreground: 48 9% 9%;
|
|
20
|
+
|
|
21
|
+
--shadow-color: 6 14 13;
|
|
18
22
|
}
|
|
19
23
|
|
|
20
24
|
@supports not (color: hsl(from red h s l)) {
|
|
21
25
|
:root {
|
|
22
|
-
--primary-hover:
|
|
23
|
-
--primary-active:
|
|
24
|
-
--primary-border:
|
|
25
|
-
--control-outline:
|
|
26
|
-
--text-link:
|
|
27
|
-
--text-brand:
|
|
28
|
-
--text-primary:
|
|
26
|
+
--primary-hover: 168 100% 16.6%;
|
|
27
|
+
--primary-active: 168 100% 9.5%;
|
|
28
|
+
--primary-border: 168 68% 41%;
|
|
29
|
+
--control-outline: 168 100% 19.7%;
|
|
30
|
+
--text-link: 168 100% 16.6%;
|
|
31
|
+
--text-brand: 168 100% 16.6%;
|
|
32
|
+
--text-primary: 168 100% 9.5%;
|
|
29
33
|
}
|
|
30
34
|
|
|
31
35
|
.dark,
|
|
32
36
|
:root[data-theme="dark"] {
|
|
33
|
-
--primary-hover:
|
|
34
|
-
--primary-active:
|
|
35
|
-
--primary-border:
|
|
36
|
-
--control-outline:
|
|
37
|
-
--text-link:
|
|
38
|
-
--text-brand:
|
|
39
|
-
--text-primary:
|
|
37
|
+
--primary-hover: 168 60% 65.8%;
|
|
38
|
+
--primary-active: 168 60% 71.6%;
|
|
39
|
+
--primary-border: 168 28% 16.2%;
|
|
40
|
+
--control-outline: 168 59.4% 34.9%;
|
|
41
|
+
--text-link: 168 60% 60%;
|
|
42
|
+
--text-brand: 168 60% 60%;
|
|
43
|
+
--text-primary: 168 60% 65.8%;
|
|
40
44
|
}
|
|
41
45
|
}
|
package/dist/themes/godx.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import type { AppPreset } from "../app/preset.js";
|
|
|
2
2
|
/**
|
|
3
3
|
* The GoDX PRESET (v32, gh#1220): the product defaults GoDX surfaces shipped with in 31.x, now
|
|
4
4
|
* opt-in so the package's own defaults stay neutral. Pair it with the stylesheet that restores the
|
|
5
|
-
*
|
|
5
|
+
* GoDX identity colour (emerald-teal #008066 since 33.6.0, gh#1345):
|
|
6
6
|
*
|
|
7
7
|
* import "@godxjp/ui/themes/godx.css";
|
|
8
8
|
* import { godxPreset } from "@godxjp/ui/themes/godx";
|
package/dist/themes/godx.js
CHANGED
|
@@ -3,7 +3,10 @@ import { Logo } from "../components/general/logo.js";
|
|
|
3
3
|
const godxPreset = Object.freeze({
|
|
4
4
|
name: "godx",
|
|
5
5
|
defaultLocale: "vi",
|
|
6
|
-
|
|
6
|
+
// `tone: "primary"` (gh#1345): the mark, its wordmark and the primary button are ONE colour —
|
|
7
|
+
// the brand green the stylesheet sets on `--primary` and `--brand` alike. "success" would name
|
|
8
|
+
// the 若竹 status role, which this mark is not.
|
|
9
|
+
brandMark: createElement(Logo, { mark: "godx", tone: "primary" }),
|
|
7
10
|
emailBrandLabel: "GoDX"
|
|
8
11
|
});
|
|
9
12
|
export {
|
package/docs/CUSTOMER-THEMING.md
CHANGED
|
@@ -75,12 +75,13 @@ choose the colour rather than at the point a user cannot read a link.
|
|
|
75
75
|
**The two things it does that hand-authoring keeps getting wrong:**
|
|
76
76
|
|
|
77
77
|
- **A dark seed.** Nothing in CSS lifts a light seed onto the dark spine, so a brand file that sets
|
|
78
|
-
`--primary` only in `:root` keeps the GoDX
|
|
78
|
+
`--primary` only in `:root` keeps the package's (or the GoDX preset's) dark seed in dark mode and
|
|
79
|
+
nothing says so. The generator
|
|
79
80
|
holds your hue and saturation and moves lightness until the dark seed reads against the dark
|
|
80
81
|
canvas the way the light seed reads against the light one.
|
|
81
82
|
- **Email.** `src/email/tokens.generated.ts` bakes literal hex at build time, because Gmail strips
|
|
82
83
|
`<style>` and Outlook ignores custom properties. Those literals are _this package's_ seed, so a
|
|
83
|
-
re-themed product still sends
|
|
84
|
+
re-themed product still sends mail in the package's colours — the one surface no amount of CSS reaches. The
|
|
84
85
|
emitted `acme.email.ts` is the override that corrects it.
|
|
85
86
|
|
|
86
87
|
**What it deliberately leaves out**, because writing them would be a regression:
|
|
@@ -415,7 +416,7 @@ Measured, for the two shapes where a naive rule fails:
|
|
|
415
416
|
| customer hex | label chosen | ratio | what "always white" would have given |
|
|
416
417
|
| ------------ | ------------ | ------- | ------------------------------------ |
|
|
417
418
|
| `#0071bd` | `#ffffff` | 5.13:1 | 5.13:1 |
|
|
418
|
-
| `#
|
|
419
|
+
| `#008066` | `#ffffff` | 4.91:1 | 4.91:1 |
|
|
419
420
|
| `#FFD400` | `#000000` | 14.67:1 | **1.29:1** |
|
|
420
421
|
| `#0A1F44` | `#ffffff` | 16.25:1 | 16.25:1 |
|
|
421
422
|
| `#E30613` | `#ffffff` | 4.88:1 | 4.88:1 |
|
|
@@ -475,8 +476,8 @@ tenantTheme("#FFD400").vars["--text-brand"]; // "49.88 100% 24.4%" — 4.56:1, n
|
|
|
475
476
|
tenantTheme("#7C3AED").vars["--text-brand"]; // "262.12 83.26% 49.44%" — the ramp step, untouched
|
|
476
477
|
```
|
|
477
478
|
|
|
478
|
-
**A seed whose ramp step already clears is emitted unchanged**, so the
|
|
479
|
-
|
|
479
|
+
**A seed whose ramp step already clears is emitted unchanged**, so the GoDX preset's emerald-teal
|
|
480
|
+
`#008066` gets exactly the derived.css ramp step, and so do the middle seeds. `tenant-theme.test.ts` sweeps
|
|
480
481
|
the whole sRGB cube: the worst case is 4.5:1 on either surface, for all three roles.
|
|
481
482
|
|
|
482
483
|
**`surface` is the darkest surface the ink lands on, not the page canvas.** It defaults to the
|
package/docs/DESIGN-AUTHORITY.md
CHANGED
|
@@ -18,7 +18,7 @@ It changes no code by itself. It is the tie-breaker a reviewer points at.
|
|
|
18
18
|
| Behaviour primitives | **Radix** | already the implementation — 193 references |
|
|
19
19
|
| Component composition shape | **shadcn** | already the structural convention — 23 references |
|
|
20
20
|
| Component taxonomy / grouping | **Ant Design** groups | already the catalog shape: `data-entry`, `data-display`, `layout`, `feedback`, `navigation`, `general` — a naming precedent, nothing is installed |
|
|
21
|
-
| Colour foundation | **SmartHR**, brand roles aside | the NEUTRAL spine is SmartHR's — `--foreground` = TEXT_BLACK, `--border` = BORDER. `--primary` was SmartHR MAIN `#0071bd` until identity v2.3 took the brand roles back:
|
|
21
|
+
| Colour foundation | **SmartHR**, brand roles aside | the NEUTRAL spine is SmartHR's — `--foreground` = TEXT_BLACK, `--border` = BORDER. `--primary` was SmartHR MAIN `#0071bd` until identity v2.3 took the brand roles back: GoDX preset — `#008066` (gh#1345) |
|
|
22
22
|
| **Derived colour — the interaction states hanging off each seed** | **Measured contrast (WCAG 2.2 / JIS X 8341-3)** | Authored in `src/tokens/derived.css`; no algorithm derives them. Four contrast suites read that file and hold every value to a threshold, and a fifth holds it to the seed's HUE (gh#648) — see below |
|
|
23
23
|
| **Japanese UI convention — density, JP typography, form patterns** | **SmartHR** | **NEW — this decision.** Extends SmartHR from "where the colours came from" to the authority for how a JP business screen behaves |
|
|
24
24
|
| **Japanese accessibility / public-sector convention** | **デジタル庁 Design System** (Digital Agency) | **NEW — this decision.** The reference when a JP customer asks which standard a screen meets (JIS X 8341-3) |
|
|
@@ -666,6 +666,11 @@ the kit's `action.primary.hover` and then reflects the pressed step, because the
|
|
|
666
666
|
| dark `--primary-hover` | kit #E8DAFF | #ecdaff · 13.51:1 |
|
|
667
667
|
| dark `--primary-active` | #fbf7ff · 1.056:1 from white | #cd9fff · 8.41:1 (sign flipped) |
|
|
668
668
|
|
|
669
|
+
The formula was fitted on that violet and still reproduces it (`derived-seed-sweep.test.ts`). Since
|
|
670
|
+
gh#1345 the GoDX preset's seed is emerald-teal `168 100% 25%` / `168 60% 60%`, and the same formula
|
|
671
|
+
gives light hover #005544 · 8.72:1 and pressed #003027 · 14.17:1, dark hover #73dcc7 · 10.82:1 and
|
|
672
|
+
pressed #8be2d1 · 11.74:1 — no reflection, because the dark seed sits at 60% L.
|
|
673
|
+
|
|
669
674
|
**The ratio is blind to hue, and that cost a release (gh#648).** Identity v2.3 moved the seed 63
|
|
670
675
|
degrees and this tier stayed on the blue it was derived from: 24.0.0 and 24.1.0 shipped a primary
|
|
671
676
|
button that was violet at rest and navy on hover, with all four contrast suites green throughout,
|
package/package.json
CHANGED
|
@@ -7,34 +7,9 @@
|
|
|
7
7
|
* that the consumer did not choose and cannot change without abandoning the GoDX brand (gh#823).
|
|
8
8
|
* `scripts/visual-audit-rules.mjs` exempts exactly these from the 渋み chroma bound.
|
|
9
9
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
10
|
+
* ONLY ACCENTS OVER THE BOUND (OKLCH chroma > 0.18), and LIGHT SCHEME ONLY: an accent
|
|
11
|
+
* inside the bound never reaches an exemption, so listing it would widen the carve-out for nothing.
|
|
12
|
+
* Empty since gh#1345 — the GoDX emerald-teal #008066 measures chroma 0.103 (the violet it replaced,
|
|
13
|
+
* #7A00FF, measured 0.293), and the neutral ink is grey.
|
|
13
14
|
*/
|
|
14
|
-
export const SHIPPED_BRAND_ACCENTS = [
|
|
15
|
-
{
|
|
16
|
-
"cssVars": [
|
|
17
|
-
"--primary",
|
|
18
|
-
"--brand"
|
|
19
|
-
],
|
|
20
|
-
"hsl": "240 6% 10%",
|
|
21
|
-
"rgb": {
|
|
22
|
-
"r": 24,
|
|
23
|
-
"g": 24,
|
|
24
|
-
"b": 27
|
|
25
|
-
}
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
"cssVars": [
|
|
29
|
-
"--primary",
|
|
30
|
-
"--brand"
|
|
31
|
-
],
|
|
32
|
-
"hsl": "268.7 100% 50%",
|
|
33
|
-
"rgb": {
|
|
34
|
-
"r": 122,
|
|
35
|
-
"g": 0,
|
|
36
|
-
"b": 255
|
|
37
|
-
},
|
|
38
|
-
"source": "src/themes/godx-tokens.css"
|
|
39
|
-
}
|
|
40
|
-
];
|
|
15
|
+
export const SHIPPED_BRAND_ACCENTS = [];
|
|
@@ -106,6 +106,10 @@ export const CHROMA_LIMIT = 0.18;
|
|
|
106
106
|
/**
|
|
107
107
|
* Per-channel sRGB tolerance for "this IS the accent we ship" (gh#823).
|
|
108
108
|
*
|
|
109
|
+
* The measurements below were taken on the violet #7A00FF the GoDX preset shipped until gh#1345.
|
|
110
|
+
* Its emerald-teal successor sits inside the bound, so the exemption list is empty today; the
|
|
111
|
+
* tolerance is kept for the next accent that would need it.
|
|
112
|
+
*
|
|
109
113
|
* The audit reads a computed `rgb()` off a live page, so the match has to survive whatever rounding
|
|
110
114
|
* the engine applied on the way there. Measured in Chromium (playwright 1.61), all four routes to
|
|
111
115
|
* the token — `#7A00FF`, `hsl(268.7 100% 50%)`, the legacy comma form, and `hsl(var(--primary))` —
|
|
@@ -142,8 +146,8 @@ export function isShippedBrandAccent({ r, g, b }) {
|
|
|
142
146
|
|
|
143
147
|
/**
|
|
144
148
|
* @returns {boolean} true when an accent surface exceeds the 渋み chroma limit.
|
|
145
|
-
*
|
|
146
|
-
* any consumer made, so reporting it warns every page about a colour nobody can act on, and the
|
|
149
|
+
* A shipped brand accent over the bound is exempt (the violet was, chroma 0.293, until gh#1345) —
|
|
150
|
+
* it is not a choice any consumer made, so reporting it warns every page about a colour nobody can act on, and the
|
|
147
151
|
* first reader to hit it silences the rule along with every real finding it would have caught.
|
|
148
152
|
*/
|
|
149
153
|
export function isOversaturated(rgb, limit = CHROMA_LIMIT) {
|