nirs4all-ui 0.1.5 → 0.1.7
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 +36 -12
- package/assets/brands/README.md +11 -0
- package/assets/brands/nirs4all/horizontal.svg +12 -0
- package/assets/brands/nirs4all/icon.svg +8 -0
- package/assets/brands/nirs4all/stacked.svg +12 -0
- package/assets/brands/nirs4all-core/horizontal.svg +12 -0
- package/assets/brands/nirs4all-core/icon.svg +8 -0
- package/assets/brands/nirs4all-core/stacked.svg +12 -0
- package/assets/brands/nirs4all-providers/horizontal.svg +12 -0
- package/assets/brands/nirs4all-providers/icon.svg +8 -0
- package/assets/brands/nirs4all-providers/stacked.svg +12 -0
- package/assets/brands/nirs4all-ui/horizontal.svg +12 -0
- package/assets/brands/nirs4all-ui/icon.svg +8 -0
- package/assets/brands/nirs4all-ui/stacked.svg +12 -0
- package/assets/motion/nirs-spectra.svg +27 -0
- package/assets/styles/nirs4all-default.css +137 -0
- package/dist/brand/index.d.ts +125 -0
- package/dist/brand/index.d.ts.map +1 -0
- package/dist/brand/index.js +197 -0
- package/dist/brand/index.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/styles/index.d.ts +58 -0
- package/dist/styles/index.d.ts.map +1 -0
- package/dist/styles/index.js +79 -0
- package/dist/styles/index.js.map +1 -0
- package/package.json +14 -3
package/README.md
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
# nirs4all-ui
|
|
2
2
|
|
|
3
|
-
Shared React UI components
|
|
4
|
-
nirs4all Studio
|
|
3
|
+
Shared React UI components, visual assets, default styles, brand generators,
|
|
4
|
+
and pure TypeScript view-model helpers used by nirs4all Studio, the standalone
|
|
5
|
+
web/WASM client, and custom NIRS4ALL app hosts.
|
|
5
6
|
|
|
6
7
|
This package intentionally keeps components presentational and keeps the
|
|
7
8
|
framework-free helpers free of hooks, API clients, filesystem access, browser
|
|
8
9
|
globals, or backend/runtime execution. Hosts own app state, routing, data
|
|
9
10
|
fetching, and icons; this package owns shared display contracts and reusable
|
|
10
|
-
UI surfaces.
|
|
11
|
+
UI surfaces. It also ships the reusable graphical system for the ecosystem:
|
|
12
|
+
brand manifests, generated SVG marks, default CSS tokens, and the shared NIR
|
|
13
|
+
spectra motion asset.
|
|
11
14
|
|
|
12
15
|
## Domains
|
|
13
16
|
|
|
@@ -17,11 +20,14 @@ UI surfaces.
|
|
|
17
20
|
| `runtime` | `nirs4all-ui/runtime` | Runtime/result status display tokens, busy-state predicates, progress projection, engine metadata summaries, diagnostics, and native-result affordances. |
|
|
18
21
|
| `dataset` | `nirs4all-ui/dataset` | Dataset preview contracts, counts, split summaries, spectral ranges, task labels, badges, and stats. |
|
|
19
22
|
| `components` | `nirs4all-ui/components` | Stateless React components that render shared runtime, diagnostic, and metric affordances. |
|
|
23
|
+
| `brand` | `nirs4all-ui/brand` | Ecosystem brand definitions, stable asset paths, palettes, and deterministic SVG generators. |
|
|
24
|
+
| `styles` | `nirs4all-ui/styles` | Default theme tokens, CSS/motion asset manifests, and CSS variable helpers. |
|
|
25
|
+
| `assets` | `nirs4all-ui/assets/*` | Package logo kit, ecosystem brand SVGs, default CSS, and animated NIR spectra asset. |
|
|
20
26
|
|
|
21
27
|
The root export also exposes namespace barrels:
|
|
22
28
|
|
|
23
29
|
```ts
|
|
24
|
-
import { dataset, runtime, score } from "nirs4all-ui";
|
|
30
|
+
import { brand, dataset, runtime, score, styles } from "nirs4all-ui";
|
|
25
31
|
```
|
|
26
32
|
|
|
27
33
|
Prefer domain imports when a consumer only needs one area:
|
|
@@ -30,9 +36,25 @@ Prefer domain imports when a consumer only needs one area:
|
|
|
30
36
|
import { canonicalMetricKey, formatMetricValue } from "nirs4all-ui/score";
|
|
31
37
|
import { buildDatasetPreview } from "nirs4all-ui/dataset";
|
|
32
38
|
import { buildRuntimeResultStatusView } from "nirs4all-ui/runtime";
|
|
39
|
+
import { generateNirs4allBrandSvg } from "nirs4all-ui/brand";
|
|
40
|
+
import { getNirs4allStyleAsset } from "nirs4all-ui/styles";
|
|
33
41
|
import { MetricValueBadge, RuntimeEngineBadge } from "nirs4all-ui/components";
|
|
34
42
|
```
|
|
35
43
|
|
|
44
|
+
Static assets are published through the existing `nirs4all-ui/assets/*` export:
|
|
45
|
+
|
|
46
|
+
```css
|
|
47
|
+
@import "nirs4all-ui/assets/styles/nirs4all-default.css";
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
const css = getNirs4allStyleAsset("default-theme");
|
|
52
|
+
const animatedIcon = generateNirs4allBrandSvg("nirs4all-ui", {
|
|
53
|
+
variant: "icon",
|
|
54
|
+
animated: true,
|
|
55
|
+
});
|
|
56
|
+
```
|
|
57
|
+
|
|
36
58
|
## Development
|
|
37
59
|
|
|
38
60
|
```bash
|
|
@@ -53,12 +75,13 @@ npm run site:build
|
|
|
53
75
|
```
|
|
54
76
|
|
|
55
77
|
`site/src/App.tsx` renders reusable React components separately from the
|
|
56
|
-
runtime and
|
|
57
|
-
Pages publication files (`logo.svg`, `favicon.ico`,
|
|
58
|
-
`robots.txt`, `sitemap.xml`, and `site.webmanifest`). The site
|
|
59
|
-
copies the package brand kit to namespaced GitHub Pages URLs under
|
|
60
|
-
`assets/brand/nirs4all-ui
|
|
61
|
-
|
|
78
|
+
runtime, score, brand, style, and asset inventories. `site/public/`
|
|
79
|
+
intentionally carries the Pages publication files (`logo.svg`, `favicon.ico`,
|
|
80
|
+
`favicon.svg`, `robots.txt`, `sitemap.xml`, and `site.webmanifest`). The site
|
|
81
|
+
build also copies the package brand kit to namespaced GitHub Pages URLs under
|
|
82
|
+
`assets/brand/nirs4all-ui/` and publishes the reusable visual system under
|
|
83
|
+
`assets/brands/`, `assets/styles/`, and `assets/motion/`.
|
|
84
|
+
The npm package keeps the same files available through the
|
|
62
85
|
`nirs4all-ui/assets/*` export. The default Pages base is `/nirs4all-ui/` for
|
|
63
86
|
the GitHub project-page path; set
|
|
64
87
|
`NIRS4ALL_UI_BASE=/` and add a `CNAME` only when switching to a dedicated
|
|
@@ -66,5 +89,6 @@ subdomain such as `ui.nirs4all.org`.
|
|
|
66
89
|
|
|
67
90
|
`site/src/App.test.tsx` is the focused hardening check for the showcase: it
|
|
68
91
|
verifies that every public React component export appears in the page and that
|
|
69
|
-
the mirrored brand/logo, crawler metadata, manifest,
|
|
70
|
-
sync with the packaged
|
|
92
|
+
the mirrored brand/logo, crawler metadata, manifest, default styles, motion
|
|
93
|
+
asset, reusable brand kit, and canonical URLs stay in sync with the packaged
|
|
94
|
+
asset set.
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
# NIRS4ALL reusable brand assets
|
|
2
|
+
|
|
3
|
+
Generated SVG brand kit for the NIRS4ALL ecosystem.
|
|
4
|
+
|
|
5
|
+
Run `npm run brand:generate` after editing `scripts/generate-brand-assets.mjs` or the mirrored definitions in `src/brand/index.ts`.
|
|
6
|
+
|
|
7
|
+
Current brands:
|
|
8
|
+
- `nirs4all`: Ecosystem umbrella
|
|
9
|
+
- `nirs4all-core`: Portable aggregate runtime
|
|
10
|
+
- `nirs4all-ui`: Reusable visual system
|
|
11
|
+
- `nirs4all-providers`: Soft-import provider bridge
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 132" role="img" aria-labelledby="nirs4all-horizontal-title">
|
|
2
|
+
<title id="nirs4all-horizontal-title">NIRS4ALL</title>
|
|
3
|
+
<rect width="520" height="132" rx="22" fill="#ffffff"/>
|
|
4
|
+
<g transform="translate(24 18)">
|
|
5
|
+
<rect width="96" height="96" rx="20" fill="#0d9488" opacity=".12"/>
|
|
6
|
+
<path d="M14 58C25 28 37 28 49 54s24 26 40-15" fill="none" stroke="#0d9488" stroke-width="8" stroke-linecap="round"/>
|
|
7
|
+
<path d="M14 72C29 58 39 59 53 72s25 14 37-2" fill="none" stroke="#06b6d4" stroke-width="5" stroke-linecap="round"/>
|
|
8
|
+
<circle cx="78" cy="28" r="8" fill="#10b981"/>
|
|
9
|
+
</g>
|
|
10
|
+
<text x="146" y="61" fill="#0f172a" font-family="Inter, Arial, sans-serif" font-size="34" font-weight="800">NIRS4ALL</text>
|
|
11
|
+
<text x="146" y="92" fill="#475569" font-family="Inter, Arial, sans-serif" font-size="16" font-weight="600">Ecosystem umbrella</text>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-labelledby="nirs4all-icon-title">
|
|
2
|
+
<title id="nirs4all-icon-title">NIRS4ALL</title>
|
|
3
|
+
<rect width="128" height="128" rx="24" fill="#ffffff"/>
|
|
4
|
+
<path d="M20 78C31 45 44 44 58 70s26 25 50-20" fill="none" stroke="#0d9488" stroke-width="9" stroke-linecap="round"/>
|
|
5
|
+
<path d="M20 90C36 74 48 74 64 89s29 17 44-4" fill="none" stroke="#06b6d4" stroke-width="5" stroke-linecap="round" opacity=".82"/>
|
|
6
|
+
<circle cx="98" cy="39" r="10" fill="#10b981"/>
|
|
7
|
+
<text x="64" y="112" fill="#0f172a" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="800" text-anchor="middle">n4a</text>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 236" role="img" aria-labelledby="nirs4all-stacked-title">
|
|
2
|
+
<title id="nirs4all-stacked-title">NIRS4ALL</title>
|
|
3
|
+
<rect width="280" height="236" rx="24" fill="#ffffff"/>
|
|
4
|
+
<g transform="translate(80 26)">
|
|
5
|
+
<rect width="120" height="120" rx="28" fill="#0d9488" opacity=".12"/>
|
|
6
|
+
<path d="M18 73C32 36 47 35 64 68s32 33 56-18" fill="none" stroke="#0d9488" stroke-width="10" stroke-linecap="round"/>
|
|
7
|
+
<path d="M18 91C37 72 51 74 68 91s35 18 52-3" fill="none" stroke="#06b6d4" stroke-width="6" stroke-linecap="round"/>
|
|
8
|
+
<circle cx="96" cy="38" r="10" fill="#10b981"/>
|
|
9
|
+
</g>
|
|
10
|
+
<text x="140" y="178" fill="#0f172a" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="800" text-anchor="middle">NIRS4ALL</text>
|
|
11
|
+
<text x="140" y="205" fill="#475569" font-family="Inter, Arial, sans-serif" font-size="14" font-weight="600" text-anchor="middle">Ecosystem umbrella</text>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 132" role="img" aria-labelledby="nirs4all-core-horizontal-title">
|
|
2
|
+
<title id="nirs4all-core-horizontal-title">nirs4all-core</title>
|
|
3
|
+
<rect width="520" height="132" rx="22" fill="#ffffff"/>
|
|
4
|
+
<g transform="translate(24 18)">
|
|
5
|
+
<rect width="96" height="96" rx="20" fill="#0d9488" opacity=".12"/>
|
|
6
|
+
<path d="M14 58C25 28 37 28 49 54s24 26 40-15" fill="none" stroke="#0d9488" stroke-width="8" stroke-linecap="round"/>
|
|
7
|
+
<path d="M14 72C29 58 39 59 53 72s25 14 37-2" fill="none" stroke="#0891b2" stroke-width="5" stroke-linecap="round"/>
|
|
8
|
+
<circle cx="78" cy="28" r="8" fill="#4f46e5"/>
|
|
9
|
+
</g>
|
|
10
|
+
<text x="146" y="61" fill="#10233a" font-family="Inter, Arial, sans-serif" font-size="34" font-weight="800">nirs4all-core</text>
|
|
11
|
+
<text x="146" y="92" fill="#475569" font-family="Inter, Arial, sans-serif" font-size="16" font-weight="600">Portable aggregate runtime</text>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-labelledby="nirs4all-core-icon-title">
|
|
2
|
+
<title id="nirs4all-core-icon-title">nirs4all-core</title>
|
|
3
|
+
<rect width="128" height="128" rx="24" fill="#ffffff"/>
|
|
4
|
+
<path d="M20 78C31 45 44 44 58 70s26 25 50-20" fill="none" stroke="#0d9488" stroke-width="9" stroke-linecap="round"/>
|
|
5
|
+
<path d="M20 90C36 74 48 74 64 89s29 17 44-4" fill="none" stroke="#0891b2" stroke-width="5" stroke-linecap="round" opacity=".82"/>
|
|
6
|
+
<circle cx="98" cy="39" r="10" fill="#4f46e5"/>
|
|
7
|
+
<text x="64" y="112" fill="#10233a" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="800" text-anchor="middle">core</text>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 236" role="img" aria-labelledby="nirs4all-core-stacked-title">
|
|
2
|
+
<title id="nirs4all-core-stacked-title">nirs4all-core</title>
|
|
3
|
+
<rect width="280" height="236" rx="24" fill="#ffffff"/>
|
|
4
|
+
<g transform="translate(80 26)">
|
|
5
|
+
<rect width="120" height="120" rx="28" fill="#0d9488" opacity=".12"/>
|
|
6
|
+
<path d="M18 73C32 36 47 35 64 68s32 33 56-18" fill="none" stroke="#0d9488" stroke-width="10" stroke-linecap="round"/>
|
|
7
|
+
<path d="M18 91C37 72 51 74 68 91s35 18 52-3" fill="none" stroke="#0891b2" stroke-width="6" stroke-linecap="round"/>
|
|
8
|
+
<circle cx="96" cy="38" r="10" fill="#4f46e5"/>
|
|
9
|
+
</g>
|
|
10
|
+
<text x="140" y="178" fill="#10233a" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="800" text-anchor="middle">nirs4all-core</text>
|
|
11
|
+
<text x="140" y="205" fill="#475569" font-family="Inter, Arial, sans-serif" font-size="14" font-weight="600" text-anchor="middle">Portable aggregate runtime</text>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 132" role="img" aria-labelledby="nirs4all-providers-horizontal-title">
|
|
2
|
+
<title id="nirs4all-providers-horizontal-title">nirs4all-providers</title>
|
|
3
|
+
<rect width="520" height="132" rx="22" fill="#ffffff"/>
|
|
4
|
+
<g transform="translate(24 18)">
|
|
5
|
+
<rect width="96" height="96" rx="20" fill="#7c3aed" opacity=".12"/>
|
|
6
|
+
<path d="M14 58C25 28 37 28 49 54s24 26 40-15" fill="none" stroke="#7c3aed" stroke-width="8" stroke-linecap="round"/>
|
|
7
|
+
<path d="M14 72C29 58 39 59 53 72s25 14 37-2" fill="none" stroke="#0d9488" stroke-width="5" stroke-linecap="round"/>
|
|
8
|
+
<circle cx="78" cy="28" r="8" fill="#f59e0b"/>
|
|
9
|
+
</g>
|
|
10
|
+
<text x="146" y="61" fill="#2e1065" font-family="Inter, Arial, sans-serif" font-size="34" font-weight="800">nirs4all-providers</text>
|
|
11
|
+
<text x="146" y="92" fill="#475569" font-family="Inter, Arial, sans-serif" font-size="16" font-weight="600">Soft-import provider bridge</text>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-labelledby="nirs4all-providers-icon-title">
|
|
2
|
+
<title id="nirs4all-providers-icon-title">nirs4all-providers</title>
|
|
3
|
+
<rect width="128" height="128" rx="24" fill="#ffffff"/>
|
|
4
|
+
<path d="M20 78C31 45 44 44 58 70s26 25 50-20" fill="none" stroke="#7c3aed" stroke-width="9" stroke-linecap="round"/>
|
|
5
|
+
<path d="M20 90C36 74 48 74 64 89s29 17 44-4" fill="none" stroke="#0d9488" stroke-width="5" stroke-linecap="round" opacity=".82"/>
|
|
6
|
+
<circle cx="98" cy="39" r="10" fill="#f59e0b"/>
|
|
7
|
+
<text x="64" y="112" fill="#2e1065" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="800" text-anchor="middle">providers</text>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 236" role="img" aria-labelledby="nirs4all-providers-stacked-title">
|
|
2
|
+
<title id="nirs4all-providers-stacked-title">nirs4all-providers</title>
|
|
3
|
+
<rect width="280" height="236" rx="24" fill="#ffffff"/>
|
|
4
|
+
<g transform="translate(80 26)">
|
|
5
|
+
<rect width="120" height="120" rx="28" fill="#7c3aed" opacity=".12"/>
|
|
6
|
+
<path d="M18 73C32 36 47 35 64 68s32 33 56-18" fill="none" stroke="#7c3aed" stroke-width="10" stroke-linecap="round"/>
|
|
7
|
+
<path d="M18 91C37 72 51 74 68 91s35 18 52-3" fill="none" stroke="#0d9488" stroke-width="6" stroke-linecap="round"/>
|
|
8
|
+
<circle cx="96" cy="38" r="10" fill="#f59e0b"/>
|
|
9
|
+
</g>
|
|
10
|
+
<text x="140" y="178" fill="#2e1065" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="800" text-anchor="middle">nirs4all-providers</text>
|
|
11
|
+
<text x="140" y="205" fill="#475569" font-family="Inter, Arial, sans-serif" font-size="14" font-weight="600" text-anchor="middle">Soft-import provider bridge</text>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 132" role="img" aria-labelledby="nirs4all-ui-horizontal-title">
|
|
2
|
+
<title id="nirs4all-ui-horizontal-title">nirs4all-ui</title>
|
|
3
|
+
<rect width="520" height="132" rx="22" fill="#ffffff"/>
|
|
4
|
+
<g transform="translate(24 18)">
|
|
5
|
+
<rect width="96" height="96" rx="20" fill="#2563eb" opacity=".12"/>
|
|
6
|
+
<path d="M14 58C25 28 37 28 49 54s24 26 40-15" fill="none" stroke="#2563eb" stroke-width="8" stroke-linecap="round"/>
|
|
7
|
+
<path d="M14 72C29 58 39 59 53 72s25 14 37-2" fill="none" stroke="#06b6d4" stroke-width="5" stroke-linecap="round"/>
|
|
8
|
+
<circle cx="78" cy="28" r="8" fill="#e9362d"/>
|
|
9
|
+
</g>
|
|
10
|
+
<text x="146" y="61" fill="#172554" font-family="Inter, Arial, sans-serif" font-size="34" font-weight="800">nirs4all-ui</text>
|
|
11
|
+
<text x="146" y="92" fill="#475569" font-family="Inter, Arial, sans-serif" font-size="16" font-weight="600">Reusable visual system</text>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-labelledby="nirs4all-ui-icon-title">
|
|
2
|
+
<title id="nirs4all-ui-icon-title">nirs4all-ui</title>
|
|
3
|
+
<rect width="128" height="128" rx="24" fill="#ffffff"/>
|
|
4
|
+
<path d="M20 78C31 45 44 44 58 70s26 25 50-20" fill="none" stroke="#2563eb" stroke-width="9" stroke-linecap="round"/>
|
|
5
|
+
<path d="M20 90C36 74 48 74 64 89s29 17 44-4" fill="none" stroke="#06b6d4" stroke-width="5" stroke-linecap="round" opacity=".82"/>
|
|
6
|
+
<circle cx="98" cy="39" r="10" fill="#e9362d"/>
|
|
7
|
+
<text x="64" y="112" fill="#172554" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="800" text-anchor="middle">ui</text>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 236" role="img" aria-labelledby="nirs4all-ui-stacked-title">
|
|
2
|
+
<title id="nirs4all-ui-stacked-title">nirs4all-ui</title>
|
|
3
|
+
<rect width="280" height="236" rx="24" fill="#ffffff"/>
|
|
4
|
+
<g transform="translate(80 26)">
|
|
5
|
+
<rect width="120" height="120" rx="28" fill="#2563eb" opacity=".12"/>
|
|
6
|
+
<path d="M18 73C32 36 47 35 64 68s32 33 56-18" fill="none" stroke="#2563eb" stroke-width="10" stroke-linecap="round"/>
|
|
7
|
+
<path d="M18 91C37 72 51 74 68 91s35 18 52-3" fill="none" stroke="#06b6d4" stroke-width="6" stroke-linecap="round"/>
|
|
8
|
+
<circle cx="96" cy="38" r="10" fill="#e9362d"/>
|
|
9
|
+
</g>
|
|
10
|
+
<text x="140" y="178" fill="#172554" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="800" text-anchor="middle">nirs4all-ui</text>
|
|
11
|
+
<text x="140" y="205" fill="#475569" font-family="Inter, Arial, sans-serif" font-size="14" font-weight="600" text-anchor="middle">Reusable visual system</text>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 180" role="img" aria-labelledby="n4-motion-title">
|
|
2
|
+
<title id="n4-motion-title">Animated NIRS spectra motif</title>
|
|
3
|
+
<defs>
|
|
4
|
+
<linearGradient id="n4-motion-gradient" x1="0" x2="1" y1="0" y2="0">
|
|
5
|
+
<stop offset="0" stop-color="#0f766e"/>
|
|
6
|
+
<stop offset=".45" stop-color="#06b6d4"/>
|
|
7
|
+
<stop offset="1" stop-color="#10b981"/>
|
|
8
|
+
</linearGradient>
|
|
9
|
+
<filter id="n4-motion-glow" x="-20%" y="-40%" width="140%" height="180%">
|
|
10
|
+
<feGaussianBlur stdDeviation="4" result="blur"/>
|
|
11
|
+
<feMerge>
|
|
12
|
+
<feMergeNode in="blur"/>
|
|
13
|
+
<feMergeNode in="SourceGraphic"/>
|
|
14
|
+
</feMerge>
|
|
15
|
+
</filter>
|
|
16
|
+
</defs>
|
|
17
|
+
<rect width="720" height="180" rx="18" fill="#faf7f0"/>
|
|
18
|
+
<path d="M36 98C72 48 102 48 138 98s66 50 102 0 66-50 102 0 66 50 102 0 66-50 102 0 66 50 138-16" fill="none" stroke="url(#n4-motion-gradient)" stroke-width="8" stroke-linecap="round" filter="url(#n4-motion-glow)">
|
|
19
|
+
<animate attributeName="stroke-dasharray" values="16 24;32 12;16 24" dur="10s" repeatCount="indefinite"/>
|
|
20
|
+
</path>
|
|
21
|
+
<path d="M36 124C84 104 126 104 174 124s90 20 138 0 90-20 138 0 96 24 234-28" fill="none" stroke="#4f46e5" stroke-width="4" stroke-linecap="round" opacity=".62">
|
|
22
|
+
<animate attributeName="opacity" values=".38;.78;.38" dur="8s" repeatCount="indefinite"/>
|
|
23
|
+
</path>
|
|
24
|
+
<circle cx="602" cy="82" r="7" fill="#10b981">
|
|
25
|
+
<animate attributeName="cx" values="602;646;602" dur="7s" repeatCount="indefinite"/>
|
|
26
|
+
</circle>
|
|
27
|
+
</svg>
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
color-scheme: light;
|
|
3
|
+
--n4-color-primary: #0d9488;
|
|
4
|
+
--n4-color-primary-hover: #0f766e;
|
|
5
|
+
--n4-color-cyan: #06b6d4;
|
|
6
|
+
--n4-color-indigo: #4f46e5;
|
|
7
|
+
--n4-color-success: #10b981;
|
|
8
|
+
--n4-color-warning: #d97706;
|
|
9
|
+
--n4-color-danger: #e11d48;
|
|
10
|
+
--n4-color-bg: #faf7f0;
|
|
11
|
+
--n4-color-bg-alt: #f5f7fa;
|
|
12
|
+
--n4-color-surface: #ffffff;
|
|
13
|
+
--n4-color-border: #e2e8f0;
|
|
14
|
+
--n4-color-text: #0f172a;
|
|
15
|
+
--n4-color-muted: #475569;
|
|
16
|
+
--n4-radius: 8px;
|
|
17
|
+
--n4-radius-sm: 6px;
|
|
18
|
+
--n4-shadow: 0 4px 16px -4px rgba(17, 24, 39, .08), 0 2px 4px -2px rgba(17, 24, 39, .04);
|
|
19
|
+
--n4-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
20
|
+
--n4-font-display: "IBM Plex Sans", Inter, -apple-system, system-ui, sans-serif;
|
|
21
|
+
--n4-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
|
|
22
|
+
--n4-grid-size: 52px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
:root[data-theme="dark"],
|
|
26
|
+
.n4-theme-dark {
|
|
27
|
+
color-scheme: dark;
|
|
28
|
+
--n4-color-primary: #2dd4bf;
|
|
29
|
+
--n4-color-primary-hover: #5eead4;
|
|
30
|
+
--n4-color-cyan: #22d3ee;
|
|
31
|
+
--n4-color-indigo: #818cf8;
|
|
32
|
+
--n4-color-bg: #0b1220;
|
|
33
|
+
--n4-color-bg-alt: #0d1a2c;
|
|
34
|
+
--n4-color-surface: #10233a;
|
|
35
|
+
--n4-color-border: rgba(255, 255, 255, .12);
|
|
36
|
+
--n4-color-text: rgba(255, 255, 255, .92);
|
|
37
|
+
--n4-color-muted: rgba(255, 255, 255, .66);
|
|
38
|
+
--n4-shadow: 0 4px 16px -4px rgba(0, 0, 0, .5);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.n4-app {
|
|
42
|
+
background-color: var(--n4-color-bg);
|
|
43
|
+
color: var(--n4-color-text);
|
|
44
|
+
font-family: var(--n4-font-sans);
|
|
45
|
+
letter-spacing: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.n4-spectral-canvas {
|
|
49
|
+
background-color: var(--n4-color-bg);
|
|
50
|
+
background-image:
|
|
51
|
+
radial-gradient(ellipse 90% 45% at 50% -8%, rgba(13, 148, 136, .07), transparent 70%),
|
|
52
|
+
linear-gradient(rgba(20, 50, 48, .035) 1px, transparent 1px),
|
|
53
|
+
linear-gradient(90deg, rgba(20, 50, 48, .035) 1px, transparent 1px);
|
|
54
|
+
background-size: 100% 100%, var(--n4-grid-size) var(--n4-grid-size), var(--n4-grid-size) var(--n4-grid-size);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.n4-surface {
|
|
58
|
+
background: var(--n4-color-surface);
|
|
59
|
+
border: 1px solid var(--n4-color-border);
|
|
60
|
+
border-radius: var(--n4-radius);
|
|
61
|
+
box-shadow: var(--n4-shadow);
|
|
62
|
+
color: var(--n4-color-text);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.n4-button {
|
|
66
|
+
align-items: center;
|
|
67
|
+
background: var(--n4-color-primary);
|
|
68
|
+
border: 1px solid transparent;
|
|
69
|
+
border-radius: var(--n4-radius-sm);
|
|
70
|
+
color: #ffffff;
|
|
71
|
+
display: inline-flex;
|
|
72
|
+
font: 750 .9rem/1 var(--n4-font-sans);
|
|
73
|
+
gap: .5rem;
|
|
74
|
+
justify-content: center;
|
|
75
|
+
min-height: 38px;
|
|
76
|
+
padding: .65rem .85rem;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.n4-button:focus-visible,
|
|
80
|
+
.n4-button:hover {
|
|
81
|
+
background: var(--n4-color-primary-hover);
|
|
82
|
+
outline: 2px solid color-mix(in srgb, var(--n4-color-primary) 35%, transparent);
|
|
83
|
+
outline-offset: 2px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.n4-badge {
|
|
87
|
+
align-items: center;
|
|
88
|
+
border: 1px solid var(--n4-color-border);
|
|
89
|
+
border-radius: 999px;
|
|
90
|
+
color: var(--n4-color-muted);
|
|
91
|
+
display: inline-flex;
|
|
92
|
+
font: 800 .75rem/1 var(--n4-font-sans);
|
|
93
|
+
min-height: 28px;
|
|
94
|
+
padding: .45rem .6rem;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.n4-badge[data-tone="success"] {
|
|
98
|
+
background: color-mix(in srgb, var(--n4-color-success) 14%, transparent);
|
|
99
|
+
border-color: color-mix(in srgb, var(--n4-color-success) 32%, transparent);
|
|
100
|
+
color: #087443;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.n4-badge[data-tone="warning"] {
|
|
104
|
+
background: color-mix(in srgb, var(--n4-color-warning) 14%, transparent);
|
|
105
|
+
border-color: color-mix(in srgb, var(--n4-color-warning) 32%, transparent);
|
|
106
|
+
color: #9a4f00;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.n4-badge[data-tone="danger"] {
|
|
110
|
+
background: color-mix(in srgb, var(--n4-color-danger) 12%, transparent);
|
|
111
|
+
border-color: color-mix(in srgb, var(--n4-color-danger) 30%, transparent);
|
|
112
|
+
color: #b42318;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.n4-panel-grid {
|
|
116
|
+
display: grid;
|
|
117
|
+
gap: 1rem;
|
|
118
|
+
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.n4-spectrum-strip {
|
|
122
|
+
background: linear-gradient(90deg, var(--n4-color-primary-hover), var(--n4-color-primary), var(--n4-color-cyan), var(--n4-color-primary));
|
|
123
|
+
background-size: 200% 100%;
|
|
124
|
+
border-radius: 999px;
|
|
125
|
+
height: 3px;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
129
|
+
.n4-spectrum-strip {
|
|
130
|
+
animation: n4-spectrum-strip 14s linear infinite;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
@keyframes n4-spectrum-strip {
|
|
135
|
+
from { background-position: 0 0; }
|
|
136
|
+
to { background-position: 200% 0; }
|
|
137
|
+
}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared NIRS4ALL brand definitions and deterministic SVG generators.
|
|
3
|
+
*
|
|
4
|
+
* This module is pure TypeScript: no DOM, no React, no filesystem access.
|
|
5
|
+
* Hosts can use the asset paths for packaged files or generate inline SVG
|
|
6
|
+
* strings when they need app-local marks.
|
|
7
|
+
*/
|
|
8
|
+
export type Nirs4allBrandId = "nirs4all" | "nirs4all-core" | "nirs4all-ui" | "nirs4all-providers";
|
|
9
|
+
export type Nirs4allBrandVariant = "icon" | "horizontal" | "stacked";
|
|
10
|
+
export interface Nirs4allBrandPalette {
|
|
11
|
+
primary: string;
|
|
12
|
+
secondary: string;
|
|
13
|
+
accent: string;
|
|
14
|
+
dark: string;
|
|
15
|
+
surface: string;
|
|
16
|
+
}
|
|
17
|
+
export interface Nirs4allBrandAssets {
|
|
18
|
+
icon: string;
|
|
19
|
+
horizontal: string;
|
|
20
|
+
stacked: string;
|
|
21
|
+
}
|
|
22
|
+
export interface Nirs4allBrandDefinition {
|
|
23
|
+
id: Nirs4allBrandId;
|
|
24
|
+
name: string;
|
|
25
|
+
shortName: string;
|
|
26
|
+
packageName: string;
|
|
27
|
+
role: string;
|
|
28
|
+
description: string;
|
|
29
|
+
palette: Nirs4allBrandPalette;
|
|
30
|
+
assets: Nirs4allBrandAssets;
|
|
31
|
+
tags: readonly string[];
|
|
32
|
+
}
|
|
33
|
+
export interface GenerateNirs4allBrandSvgOptions {
|
|
34
|
+
variant?: Nirs4allBrandVariant;
|
|
35
|
+
title?: string;
|
|
36
|
+
dark?: boolean;
|
|
37
|
+
animated?: boolean;
|
|
38
|
+
}
|
|
39
|
+
export declare const NIRS4ALL_BRANDS: readonly [{
|
|
40
|
+
readonly id: "nirs4all";
|
|
41
|
+
readonly name: "NIRS4ALL";
|
|
42
|
+
readonly shortName: "n4a";
|
|
43
|
+
readonly packageName: "nirs4all";
|
|
44
|
+
readonly role: "Ecosystem umbrella";
|
|
45
|
+
readonly description: "Shared identity for NIRS4ALL applications, docs, releases, and custom hosts.";
|
|
46
|
+
readonly palette: {
|
|
47
|
+
readonly primary: "#0d9488";
|
|
48
|
+
readonly secondary: "#06b6d4";
|
|
49
|
+
readonly accent: "#10b981";
|
|
50
|
+
readonly dark: "#0f172a";
|
|
51
|
+
readonly surface: "#ffffff";
|
|
52
|
+
};
|
|
53
|
+
readonly assets: {
|
|
54
|
+
readonly icon: "assets/brands/nirs4all/icon.svg";
|
|
55
|
+
readonly horizontal: "assets/brands/nirs4all/horizontal.svg";
|
|
56
|
+
readonly stacked: "assets/brands/nirs4all/stacked.svg";
|
|
57
|
+
};
|
|
58
|
+
readonly tags: readonly ["ecosystem", "docs", "custom-host"];
|
|
59
|
+
}, {
|
|
60
|
+
readonly id: "nirs4all-core";
|
|
61
|
+
readonly name: "nirs4all-core";
|
|
62
|
+
readonly shortName: "core";
|
|
63
|
+
readonly packageName: "nirs4all";
|
|
64
|
+
readonly role: "Portable aggregate runtime";
|
|
65
|
+
readonly description: "Low-level aggregate used by native, Python, R, WASM, Rust, MATLAB, and custom hosts.";
|
|
66
|
+
readonly palette: {
|
|
67
|
+
readonly primary: "#0d9488";
|
|
68
|
+
readonly secondary: "#0891b2";
|
|
69
|
+
readonly accent: "#4f46e5";
|
|
70
|
+
readonly dark: "#10233a";
|
|
71
|
+
readonly surface: "#ffffff";
|
|
72
|
+
};
|
|
73
|
+
readonly assets: {
|
|
74
|
+
readonly icon: "assets/brands/nirs4all-core/icon.svg";
|
|
75
|
+
readonly horizontal: "assets/brands/nirs4all-core/horizontal.svg";
|
|
76
|
+
readonly stacked: "assets/brands/nirs4all-core/stacked.svg";
|
|
77
|
+
};
|
|
78
|
+
readonly tags: readonly ["core", "runtime", "bindings"];
|
|
79
|
+
}, {
|
|
80
|
+
readonly id: "nirs4all-ui";
|
|
81
|
+
readonly name: "nirs4all-ui";
|
|
82
|
+
readonly shortName: "ui";
|
|
83
|
+
readonly packageName: "nirs4all-ui";
|
|
84
|
+
readonly role: "Reusable visual system";
|
|
85
|
+
readonly description: "Shared React components, visual tokens, brand assets, and app-host UI contracts.";
|
|
86
|
+
readonly palette: {
|
|
87
|
+
readonly primary: "#2563eb";
|
|
88
|
+
readonly secondary: "#06b6d4";
|
|
89
|
+
readonly accent: "#e9362d";
|
|
90
|
+
readonly dark: "#172554";
|
|
91
|
+
readonly surface: "#ffffff";
|
|
92
|
+
};
|
|
93
|
+
readonly assets: {
|
|
94
|
+
readonly icon: "assets/brands/nirs4all-ui/icon.svg";
|
|
95
|
+
readonly horizontal: "assets/brands/nirs4all-ui/horizontal.svg";
|
|
96
|
+
readonly stacked: "assets/brands/nirs4all-ui/stacked.svg";
|
|
97
|
+
};
|
|
98
|
+
readonly tags: readonly ["ui", "studio", "web"];
|
|
99
|
+
}, {
|
|
100
|
+
readonly id: "nirs4all-providers";
|
|
101
|
+
readonly name: "nirs4all-providers";
|
|
102
|
+
readonly shortName: "providers";
|
|
103
|
+
readonly packageName: "nirs4all-providers";
|
|
104
|
+
readonly role: "Soft-import provider bridge";
|
|
105
|
+
readonly description: "Optional provider clients for datasets, repositories, archives, and publication surfaces.";
|
|
106
|
+
readonly palette: {
|
|
107
|
+
readonly primary: "#7c3aed";
|
|
108
|
+
readonly secondary: "#0d9488";
|
|
109
|
+
readonly accent: "#f59e0b";
|
|
110
|
+
readonly dark: "#2e1065";
|
|
111
|
+
readonly surface: "#ffffff";
|
|
112
|
+
};
|
|
113
|
+
readonly assets: {
|
|
114
|
+
readonly icon: "assets/brands/nirs4all-providers/icon.svg";
|
|
115
|
+
readonly horizontal: "assets/brands/nirs4all-providers/horizontal.svg";
|
|
116
|
+
readonly stacked: "assets/brands/nirs4all-providers/stacked.svg";
|
|
117
|
+
};
|
|
118
|
+
readonly tags: readonly ["providers", "datasets", "repository"];
|
|
119
|
+
}];
|
|
120
|
+
export declare function isNirs4allBrandId(value: string): value is Nirs4allBrandId;
|
|
121
|
+
export declare function getNirs4allBrandDefinition(id: Nirs4allBrandId): Nirs4allBrandDefinition;
|
|
122
|
+
export declare function listNirs4allBrands(): readonly Nirs4allBrandDefinition[];
|
|
123
|
+
export declare function getNirs4allBrandAssetPath(brand: Nirs4allBrandId | Nirs4allBrandDefinition, variant: Nirs4allBrandVariant): string;
|
|
124
|
+
export declare function generateNirs4allBrandSvg(brand: Nirs4allBrandId | Nirs4allBrandDefinition, options?: GenerateNirs4allBrandSvgOptions): string;
|
|
125
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/brand/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,eAAe,GACf,aAAa,GACb,oBAAoB,CAAC;AAEzB,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,YAAY,GAAG,SAAS,CAAC;AAErE,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,eAAe,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,MAAM,EAAE,mBAAmB,CAAC;IAC5B,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,+BAA+B;IAC9C,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAUD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+E2B,CAAC;AAIxD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,eAAe,CAEzE;AAED,wBAAgB,0BAA0B,CAAC,EAAE,EAAE,eAAe,GAAG,uBAAuB,CAMvF;AAED,wBAAgB,kBAAkB,IAAI,SAAS,uBAAuB,EAAE,CAEvE;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,eAAe,GAAG,uBAAuB,EAChD,OAAO,EAAE,oBAAoB,GAC5B,MAAM,CAER;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,eAAe,GAAG,uBAAuB,EAChD,OAAO,GAAE,+BAAoC,GAC5C,MAAM,CAWR"}
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared NIRS4ALL brand definitions and deterministic SVG generators.
|
|
3
|
+
*
|
|
4
|
+
* This module is pure TypeScript: no DOM, no React, no filesystem access.
|
|
5
|
+
* Hosts can use the asset paths for packaged files or generate inline SVG
|
|
6
|
+
* strings when they need app-local marks.
|
|
7
|
+
*/
|
|
8
|
+
const SHARED_TEAL_PALETTE = {
|
|
9
|
+
primary: "#0d9488",
|
|
10
|
+
secondary: "#06b6d4",
|
|
11
|
+
accent: "#10b981",
|
|
12
|
+
dark: "#0f172a",
|
|
13
|
+
surface: "#ffffff",
|
|
14
|
+
};
|
|
15
|
+
export const NIRS4ALL_BRANDS = [
|
|
16
|
+
{
|
|
17
|
+
id: "nirs4all",
|
|
18
|
+
name: "NIRS4ALL",
|
|
19
|
+
shortName: "n4a",
|
|
20
|
+
packageName: "nirs4all",
|
|
21
|
+
role: "Ecosystem umbrella",
|
|
22
|
+
description: "Shared identity for NIRS4ALL applications, docs, releases, and custom hosts.",
|
|
23
|
+
palette: SHARED_TEAL_PALETTE,
|
|
24
|
+
assets: {
|
|
25
|
+
icon: "assets/brands/nirs4all/icon.svg",
|
|
26
|
+
horizontal: "assets/brands/nirs4all/horizontal.svg",
|
|
27
|
+
stacked: "assets/brands/nirs4all/stacked.svg",
|
|
28
|
+
},
|
|
29
|
+
tags: ["ecosystem", "docs", "custom-host"],
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
id: "nirs4all-core",
|
|
33
|
+
name: "nirs4all-core",
|
|
34
|
+
shortName: "core",
|
|
35
|
+
packageName: "nirs4all",
|
|
36
|
+
role: "Portable aggregate runtime",
|
|
37
|
+
description: "Low-level aggregate used by native, Python, R, WASM, Rust, MATLAB, and custom hosts.",
|
|
38
|
+
palette: {
|
|
39
|
+
primary: "#0d9488",
|
|
40
|
+
secondary: "#0891b2",
|
|
41
|
+
accent: "#4f46e5",
|
|
42
|
+
dark: "#10233a",
|
|
43
|
+
surface: "#ffffff",
|
|
44
|
+
},
|
|
45
|
+
assets: {
|
|
46
|
+
icon: "assets/brands/nirs4all-core/icon.svg",
|
|
47
|
+
horizontal: "assets/brands/nirs4all-core/horizontal.svg",
|
|
48
|
+
stacked: "assets/brands/nirs4all-core/stacked.svg",
|
|
49
|
+
},
|
|
50
|
+
tags: ["core", "runtime", "bindings"],
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
id: "nirs4all-ui",
|
|
54
|
+
name: "nirs4all-ui",
|
|
55
|
+
shortName: "ui",
|
|
56
|
+
packageName: "nirs4all-ui",
|
|
57
|
+
role: "Reusable visual system",
|
|
58
|
+
description: "Shared React components, visual tokens, brand assets, and app-host UI contracts.",
|
|
59
|
+
palette: {
|
|
60
|
+
primary: "#2563eb",
|
|
61
|
+
secondary: "#06b6d4",
|
|
62
|
+
accent: "#e9362d",
|
|
63
|
+
dark: "#172554",
|
|
64
|
+
surface: "#ffffff",
|
|
65
|
+
},
|
|
66
|
+
assets: {
|
|
67
|
+
icon: "assets/brands/nirs4all-ui/icon.svg",
|
|
68
|
+
horizontal: "assets/brands/nirs4all-ui/horizontal.svg",
|
|
69
|
+
stacked: "assets/brands/nirs4all-ui/stacked.svg",
|
|
70
|
+
},
|
|
71
|
+
tags: ["ui", "studio", "web"],
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
id: "nirs4all-providers",
|
|
75
|
+
name: "nirs4all-providers",
|
|
76
|
+
shortName: "providers",
|
|
77
|
+
packageName: "nirs4all-providers",
|
|
78
|
+
role: "Soft-import provider bridge",
|
|
79
|
+
description: "Optional provider clients for datasets, repositories, archives, and publication surfaces.",
|
|
80
|
+
palette: {
|
|
81
|
+
primary: "#7c3aed",
|
|
82
|
+
secondary: "#0d9488",
|
|
83
|
+
accent: "#f59e0b",
|
|
84
|
+
dark: "#2e1065",
|
|
85
|
+
surface: "#ffffff",
|
|
86
|
+
},
|
|
87
|
+
assets: {
|
|
88
|
+
icon: "assets/brands/nirs4all-providers/icon.svg",
|
|
89
|
+
horizontal: "assets/brands/nirs4all-providers/horizontal.svg",
|
|
90
|
+
stacked: "assets/brands/nirs4all-providers/stacked.svg",
|
|
91
|
+
},
|
|
92
|
+
tags: ["providers", "datasets", "repository"],
|
|
93
|
+
},
|
|
94
|
+
];
|
|
95
|
+
const BRAND_ID_SET = new Set(NIRS4ALL_BRANDS.map((brand) => brand.id));
|
|
96
|
+
export function isNirs4allBrandId(value) {
|
|
97
|
+
return BRAND_ID_SET.has(value);
|
|
98
|
+
}
|
|
99
|
+
export function getNirs4allBrandDefinition(id) {
|
|
100
|
+
const brand = NIRS4ALL_BRANDS.find((candidate) => candidate.id === id);
|
|
101
|
+
if (!brand) {
|
|
102
|
+
throw new Error(`Unknown NIRS4ALL brand: ${id}`);
|
|
103
|
+
}
|
|
104
|
+
return brand;
|
|
105
|
+
}
|
|
106
|
+
export function listNirs4allBrands() {
|
|
107
|
+
return NIRS4ALL_BRANDS;
|
|
108
|
+
}
|
|
109
|
+
export function getNirs4allBrandAssetPath(brand, variant) {
|
|
110
|
+
return resolveBrand(brand).assets[variant];
|
|
111
|
+
}
|
|
112
|
+
export function generateNirs4allBrandSvg(brand, options = {}) {
|
|
113
|
+
const resolved = resolveBrand(brand);
|
|
114
|
+
const variant = options.variant ?? "horizontal";
|
|
115
|
+
if (variant === "icon") {
|
|
116
|
+
return buildIconSvg(resolved, options);
|
|
117
|
+
}
|
|
118
|
+
if (variant === "stacked") {
|
|
119
|
+
return buildStackedSvg(resolved, options);
|
|
120
|
+
}
|
|
121
|
+
return buildHorizontalSvg(resolved, options);
|
|
122
|
+
}
|
|
123
|
+
function resolveBrand(brand) {
|
|
124
|
+
return typeof brand === "string" ? getNirs4allBrandDefinition(brand) : brand;
|
|
125
|
+
}
|
|
126
|
+
function buildIconSvg(brand, options) {
|
|
127
|
+
const title = escapeXml(options.title ?? brand.name);
|
|
128
|
+
const titleId = `${brand.id}-icon-title`;
|
|
129
|
+
const textColor = options.dark ? "#ffffff" : brand.palette.dark;
|
|
130
|
+
const surface = options.dark ? brand.palette.dark : brand.palette.surface;
|
|
131
|
+
const waveId = `${brand.id}-icon-wave`;
|
|
132
|
+
const waveDash = options.animated ? ' stroke-dasharray="42 38"' : "";
|
|
133
|
+
const animation = options.animated ? waveAnimation() : "";
|
|
134
|
+
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-labelledby="${titleId}">
|
|
135
|
+
<title id="${titleId}">${title}</title>
|
|
136
|
+
<rect width="128" height="128" rx="24" fill="${surface}"/>
|
|
137
|
+
<path d="M20 78C31 45 44 44 58 70s26 25 50-20" fill="none" stroke="${brand.palette.primary}" stroke-width="9" stroke-linecap="round"/>
|
|
138
|
+
<path id="${waveId}" d="M20 90C36 74 48 74 64 89s29 17 44-4" fill="none" stroke="${brand.palette.secondary}" stroke-width="5" stroke-linecap="round" opacity=".82"${waveDash}>${animation}</path>
|
|
139
|
+
<circle cx="98" cy="39" r="10" fill="${brand.palette.accent}"/>
|
|
140
|
+
<text x="64" y="112" fill="${textColor}" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="800" text-anchor="middle">${escapeXml(brand.shortName)}</text>
|
|
141
|
+
</svg>`;
|
|
142
|
+
}
|
|
143
|
+
function buildHorizontalSvg(brand, options) {
|
|
144
|
+
const title = escapeXml(options.title ?? brand.name);
|
|
145
|
+
const titleId = `${brand.id}-horizontal-title`;
|
|
146
|
+
const textColor = options.dark ? "#ffffff" : brand.palette.dark;
|
|
147
|
+
const mutedColor = options.dark ? "#cbd5e1" : "#475569";
|
|
148
|
+
const surface = options.dark ? brand.palette.dark : brand.palette.surface;
|
|
149
|
+
const waveId = `${brand.id}-horizontal-wave`;
|
|
150
|
+
const waveDash = options.animated ? ' stroke-dasharray="42 38"' : "";
|
|
151
|
+
const animation = options.animated ? waveAnimation() : "";
|
|
152
|
+
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 132" role="img" aria-labelledby="${titleId}">
|
|
153
|
+
<title id="${titleId}">${title}</title>
|
|
154
|
+
<rect width="520" height="132" rx="22" fill="${surface}"/>
|
|
155
|
+
<g transform="translate(24 18)">
|
|
156
|
+
<rect width="96" height="96" rx="20" fill="${brand.palette.primary}" opacity=".12"/>
|
|
157
|
+
<path d="M14 58C25 28 37 28 49 54s24 26 40-15" fill="none" stroke="${brand.palette.primary}" stroke-width="8" stroke-linecap="round"/>
|
|
158
|
+
<path id="${waveId}" d="M14 72C29 58 39 59 53 72s25 14 37-2" fill="none" stroke="${brand.palette.secondary}" stroke-width="5" stroke-linecap="round"${waveDash}>${animation}</path>
|
|
159
|
+
<circle cx="78" cy="28" r="8" fill="${brand.palette.accent}"/>
|
|
160
|
+
</g>
|
|
161
|
+
<text x="146" y="61" fill="${textColor}" font-family="Inter, Arial, sans-serif" font-size="34" font-weight="800">${escapeXml(brand.name)}</text>
|
|
162
|
+
<text x="146" y="92" fill="${mutedColor}" font-family="Inter, Arial, sans-serif" font-size="16" font-weight="600">${escapeXml(brand.role)}</text>
|
|
163
|
+
</svg>`;
|
|
164
|
+
}
|
|
165
|
+
function buildStackedSvg(brand, options) {
|
|
166
|
+
const title = escapeXml(options.title ?? brand.name);
|
|
167
|
+
const titleId = `${brand.id}-stacked-title`;
|
|
168
|
+
const textColor = options.dark ? "#ffffff" : brand.palette.dark;
|
|
169
|
+
const mutedColor = options.dark ? "#cbd5e1" : "#475569";
|
|
170
|
+
const surface = options.dark ? brand.palette.dark : brand.palette.surface;
|
|
171
|
+
const waveId = `${brand.id}-stacked-wave`;
|
|
172
|
+
const waveDash = options.animated ? ' stroke-dasharray="54 42"' : "";
|
|
173
|
+
const animation = options.animated ? waveAnimation() : "";
|
|
174
|
+
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 236" role="img" aria-labelledby="${titleId}">
|
|
175
|
+
<title id="${titleId}">${title}</title>
|
|
176
|
+
<rect width="280" height="236" rx="24" fill="${surface}"/>
|
|
177
|
+
<g transform="translate(80 26)">
|
|
178
|
+
<rect width="120" height="120" rx="28" fill="${brand.palette.primary}" opacity=".12"/>
|
|
179
|
+
<path d="M18 73C32 36 47 35 64 68s32 33 56-18" fill="none" stroke="${brand.palette.primary}" stroke-width="10" stroke-linecap="round"/>
|
|
180
|
+
<path id="${waveId}" d="M18 91C37 72 51 74 68 91s35 18 52-3" fill="none" stroke="${brand.palette.secondary}" stroke-width="6" stroke-linecap="round"${waveDash}>${animation}</path>
|
|
181
|
+
<circle cx="96" cy="38" r="10" fill="${brand.palette.accent}"/>
|
|
182
|
+
</g>
|
|
183
|
+
<text x="140" y="178" fill="${textColor}" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="800" text-anchor="middle">${escapeXml(brand.name)}</text>
|
|
184
|
+
<text x="140" y="205" fill="${mutedColor}" font-family="Inter, Arial, sans-serif" font-size="14" font-weight="600" text-anchor="middle">${escapeXml(brand.role)}</text>
|
|
185
|
+
</svg>`;
|
|
186
|
+
}
|
|
187
|
+
function waveAnimation() {
|
|
188
|
+
return `<animate attributeName="stroke-dashoffset" values="0;-80" dur="9s" repeatCount="indefinite"/>`;
|
|
189
|
+
}
|
|
190
|
+
function escapeXml(value) {
|
|
191
|
+
return value
|
|
192
|
+
.replaceAll("&", "&")
|
|
193
|
+
.replaceAll("<", "<")
|
|
194
|
+
.replaceAll(">", ">")
|
|
195
|
+
.replaceAll('"', """);
|
|
196
|
+
}
|
|
197
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/brand/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -9,4 +9,6 @@ export * as score from "./score/index.js";
|
|
|
9
9
|
export * as runtime from "./runtime/index.js";
|
|
10
10
|
export * as dataset from "./dataset/index.js";
|
|
11
11
|
export * as components from "./components/index.js";
|
|
12
|
+
export * as brand from "./brand/index.js";
|
|
13
|
+
export * as styles from "./styles/index.js";
|
|
12
14
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAC;AAC1C,OAAO,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,UAAU,MAAM,uBAAuB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAC;AAC1C,OAAO,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,UAAU,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAC;AAC1C,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -9,4 +9,6 @@ export * as score from "./score/index.js";
|
|
|
9
9
|
export * as runtime from "./runtime/index.js";
|
|
10
10
|
export * as dataset from "./dataset/index.js";
|
|
11
11
|
export * as components from "./components/index.js";
|
|
12
|
+
export * as brand from "./brand/index.js";
|
|
13
|
+
export * as styles from "./styles/index.js";
|
|
12
14
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAC;AAC1C,OAAO,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,UAAU,MAAM,uBAAuB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAC;AAC1C,OAAO,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,UAAU,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAC;AAC1C,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared visual style manifests for NIRS4ALL hosts.
|
|
3
|
+
*
|
|
4
|
+
* Static CSS and motion files are shipped under `assets/`; this module exposes
|
|
5
|
+
* typed paths and token names without importing CSS at runtime.
|
|
6
|
+
*/
|
|
7
|
+
export type Nirs4allStyleAssetId = "default-theme" | "spectra-motion";
|
|
8
|
+
export type Nirs4allStyleAssetKind = "css" | "svg-motion";
|
|
9
|
+
export interface Nirs4allStyleAsset {
|
|
10
|
+
id: Nirs4allStyleAssetId;
|
|
11
|
+
kind: Nirs4allStyleAssetKind;
|
|
12
|
+
path: string;
|
|
13
|
+
packageExport: string;
|
|
14
|
+
description: string;
|
|
15
|
+
}
|
|
16
|
+
export declare const NIRS4ALL_STYLE_ASSETS: readonly [{
|
|
17
|
+
readonly id: "default-theme";
|
|
18
|
+
readonly kind: "css";
|
|
19
|
+
readonly path: "assets/styles/nirs4all-default.css";
|
|
20
|
+
readonly packageExport: "nirs4all-ui/assets/styles/nirs4all-default.css";
|
|
21
|
+
readonly description: "Default NIRS4ALL design tokens, surface classes, badges, grids, and runtime affordances.";
|
|
22
|
+
}, {
|
|
23
|
+
readonly id: "spectra-motion";
|
|
24
|
+
readonly kind: "svg-motion";
|
|
25
|
+
readonly path: "assets/motion/nirs-spectra.svg";
|
|
26
|
+
readonly packageExport: "nirs4all-ui/assets/motion/nirs-spectra.svg";
|
|
27
|
+
readonly description: "Reusable animated NIR spectra motif for docs, splash surfaces, and app empty states.";
|
|
28
|
+
}];
|
|
29
|
+
export declare const NIRS4ALL_CSS_TOKENS: readonly ["n4-color-primary", "n4-color-primary-hover", "n4-color-cyan", "n4-color-indigo", "n4-color-success", "n4-color-warning", "n4-color-danger", "n4-color-bg", "n4-color-bg-alt", "n4-color-surface", "n4-color-border", "n4-color-text", "n4-color-muted", "n4-radius", "n4-radius-sm", "n4-shadow", "n4-font-sans", "n4-font-display", "n4-font-mono"];
|
|
30
|
+
export type Nirs4allCssToken = (typeof NIRS4ALL_CSS_TOKENS)[number];
|
|
31
|
+
export declare const NIRS4ALL_DEFAULT_THEME: {
|
|
32
|
+
readonly colors: {
|
|
33
|
+
readonly primary: "#0d9488";
|
|
34
|
+
readonly primaryHover: "#0f766e";
|
|
35
|
+
readonly cyan: "#06b6d4";
|
|
36
|
+
readonly indigo: "#4f46e5";
|
|
37
|
+
readonly success: "#10b981";
|
|
38
|
+
readonly warning: "#d97706";
|
|
39
|
+
readonly danger: "#e11d48";
|
|
40
|
+
readonly background: "#faf7f0";
|
|
41
|
+
readonly surface: "#ffffff";
|
|
42
|
+
readonly border: "#e2e8f0";
|
|
43
|
+
readonly text: "#0f172a";
|
|
44
|
+
readonly muted: "#475569";
|
|
45
|
+
};
|
|
46
|
+
readonly radius: {
|
|
47
|
+
readonly default: "8px";
|
|
48
|
+
readonly small: "6px";
|
|
49
|
+
};
|
|
50
|
+
readonly fonts: {
|
|
51
|
+
readonly sans: "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, system-ui, sans-serif";
|
|
52
|
+
readonly display: "IBM Plex Sans, Inter, -apple-system, system-ui, sans-serif";
|
|
53
|
+
readonly mono: "JetBrains Mono, Fira Code, Cascadia Code, Consolas, monospace";
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
export declare function getNirs4allStyleAsset(id: Nirs4allStyleAssetId): Nirs4allStyleAsset;
|
|
57
|
+
export declare function getNirs4allCssVariable(token: Nirs4allCssToken): string;
|
|
58
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAAG,gBAAgB,CAAC;AAEtE,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,YAAY,CAAC;AAE1D,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,oBAAoB,CAAC;IACzB,IAAI,EAAE,sBAAsB,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;EAegB,CAAC;AAEnD,eAAO,MAAM,mBAAmB,iWAoBtB,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;CAwBzB,CAAC;AAEX,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,oBAAoB,GAAG,kBAAkB,CAMlF;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAEtE"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared visual style manifests for NIRS4ALL hosts.
|
|
3
|
+
*
|
|
4
|
+
* Static CSS and motion files are shipped under `assets/`; this module exposes
|
|
5
|
+
* typed paths and token names without importing CSS at runtime.
|
|
6
|
+
*/
|
|
7
|
+
export const NIRS4ALL_STYLE_ASSETS = [
|
|
8
|
+
{
|
|
9
|
+
id: "default-theme",
|
|
10
|
+
kind: "css",
|
|
11
|
+
path: "assets/styles/nirs4all-default.css",
|
|
12
|
+
packageExport: "nirs4all-ui/assets/styles/nirs4all-default.css",
|
|
13
|
+
description: "Default NIRS4ALL design tokens, surface classes, badges, grids, and runtime affordances.",
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
id: "spectra-motion",
|
|
17
|
+
kind: "svg-motion",
|
|
18
|
+
path: "assets/motion/nirs-spectra.svg",
|
|
19
|
+
packageExport: "nirs4all-ui/assets/motion/nirs-spectra.svg",
|
|
20
|
+
description: "Reusable animated NIR spectra motif for docs, splash surfaces, and app empty states.",
|
|
21
|
+
},
|
|
22
|
+
];
|
|
23
|
+
export const NIRS4ALL_CSS_TOKENS = [
|
|
24
|
+
"n4-color-primary",
|
|
25
|
+
"n4-color-primary-hover",
|
|
26
|
+
"n4-color-cyan",
|
|
27
|
+
"n4-color-indigo",
|
|
28
|
+
"n4-color-success",
|
|
29
|
+
"n4-color-warning",
|
|
30
|
+
"n4-color-danger",
|
|
31
|
+
"n4-color-bg",
|
|
32
|
+
"n4-color-bg-alt",
|
|
33
|
+
"n4-color-surface",
|
|
34
|
+
"n4-color-border",
|
|
35
|
+
"n4-color-text",
|
|
36
|
+
"n4-color-muted",
|
|
37
|
+
"n4-radius",
|
|
38
|
+
"n4-radius-sm",
|
|
39
|
+
"n4-shadow",
|
|
40
|
+
"n4-font-sans",
|
|
41
|
+
"n4-font-display",
|
|
42
|
+
"n4-font-mono",
|
|
43
|
+
];
|
|
44
|
+
export const NIRS4ALL_DEFAULT_THEME = {
|
|
45
|
+
colors: {
|
|
46
|
+
primary: "#0d9488",
|
|
47
|
+
primaryHover: "#0f766e",
|
|
48
|
+
cyan: "#06b6d4",
|
|
49
|
+
indigo: "#4f46e5",
|
|
50
|
+
success: "#10b981",
|
|
51
|
+
warning: "#d97706",
|
|
52
|
+
danger: "#e11d48",
|
|
53
|
+
background: "#faf7f0",
|
|
54
|
+
surface: "#ffffff",
|
|
55
|
+
border: "#e2e8f0",
|
|
56
|
+
text: "#0f172a",
|
|
57
|
+
muted: "#475569",
|
|
58
|
+
},
|
|
59
|
+
radius: {
|
|
60
|
+
default: "8px",
|
|
61
|
+
small: "6px",
|
|
62
|
+
},
|
|
63
|
+
fonts: {
|
|
64
|
+
sans: "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, system-ui, sans-serif",
|
|
65
|
+
display: "IBM Plex Sans, Inter, -apple-system, system-ui, sans-serif",
|
|
66
|
+
mono: "JetBrains Mono, Fira Code, Cascadia Code, Consolas, monospace",
|
|
67
|
+
},
|
|
68
|
+
};
|
|
69
|
+
export function getNirs4allStyleAsset(id) {
|
|
70
|
+
const asset = NIRS4ALL_STYLE_ASSETS.find((candidate) => candidate.id === id);
|
|
71
|
+
if (!asset) {
|
|
72
|
+
throw new Error(`Unknown NIRS4ALL style asset: ${id}`);
|
|
73
|
+
}
|
|
74
|
+
return asset;
|
|
75
|
+
}
|
|
76
|
+
export function getNirs4allCssVariable(token) {
|
|
77
|
+
return `var(--${token})`;
|
|
78
|
+
}
|
|
79
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAcH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC;QACE,EAAE,EAAE,eAAe;QACnB,IAAI,EAAE,KAAK;QACX,IAAI,EAAE,oCAAoC;QAC1C,aAAa,EAAE,gDAAgD;QAC/D,WAAW,EAAE,0FAA0F;KACxG;IACD;QACE,EAAE,EAAE,gBAAgB;QACpB,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,gCAAgC;QACtC,aAAa,EAAE,4CAA4C;QAC3D,WAAW,EAAE,sFAAsF;KACpG;CAC+C,CAAC;AAEnD,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,kBAAkB;IAClB,wBAAwB;IACxB,eAAe;IACf,iBAAiB;IACjB,kBAAkB;IAClB,kBAAkB;IAClB,iBAAiB;IACjB,aAAa;IACb,iBAAiB;IACjB,kBAAkB;IAClB,iBAAiB;IACjB,eAAe;IACf,gBAAgB;IAChB,WAAW;IACX,cAAc;IACd,WAAW;IACX,cAAc;IACd,iBAAiB;IACjB,cAAc;CACN,CAAC;AAIX,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,MAAM,EAAE;QACN,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,SAAS;QACvB,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,SAAS;QACrB,OAAO,EAAE,SAAS;QAClB,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;KACjB;IACD,MAAM,EAAE;QACN,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,KAAK;KACb;IACD,KAAK,EAAE;QACL,IAAI,EAAE,2EAA2E;QACjF,OAAO,EAAE,4DAA4D;QACrE,IAAI,EAAE,+DAA+D;KACtE;CACO,CAAC;AAEX,MAAM,UAAU,qBAAqB,CAAC,EAAwB;IAC5D,MAAM,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7E,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,iCAAiC,EAAE,EAAE,CAAC,CAAC;IACzD,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,KAAuB;IAC5D,OAAO,SAAS,KAAK,GAAG,CAAC;AAC3B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nirs4all-ui",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "Shared React UI components and pure view-model helpers for nirs4all apps.",
|
|
3
|
+
"version": "0.1.7",
|
|
4
|
+
"description": "Shared React UI components, visual assets, and pure view-model helpers for nirs4all apps.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "(CECILL-2.1 OR AGPL-3.0-or-later)",
|
|
7
7
|
"homepage": "https://gbeurier.github.io/nirs4all-ui/",
|
|
@@ -10,7 +10,9 @@
|
|
|
10
10
|
"url": "git+https://github.com/GBeurier/nirs4all-ui.git"
|
|
11
11
|
},
|
|
12
12
|
"private": false,
|
|
13
|
-
"sideEffects":
|
|
13
|
+
"sideEffects": [
|
|
14
|
+
"**/*.css"
|
|
15
|
+
],
|
|
14
16
|
"files": [
|
|
15
17
|
"assets",
|
|
16
18
|
"dist",
|
|
@@ -43,9 +45,18 @@
|
|
|
43
45
|
"types": "./dist/components/index.d.ts",
|
|
44
46
|
"import": "./dist/components/index.js"
|
|
45
47
|
},
|
|
48
|
+
"./brand": {
|
|
49
|
+
"types": "./dist/brand/index.d.ts",
|
|
50
|
+
"import": "./dist/brand/index.js"
|
|
51
|
+
},
|
|
52
|
+
"./styles": {
|
|
53
|
+
"types": "./dist/styles/index.d.ts",
|
|
54
|
+
"import": "./dist/styles/index.js"
|
|
55
|
+
},
|
|
46
56
|
"./assets/*": "./assets/*"
|
|
47
57
|
},
|
|
48
58
|
"scripts": {
|
|
59
|
+
"brand:generate": "node scripts/generate-brand-assets.mjs",
|
|
49
60
|
"build": "tsc -p tsconfig.build.json",
|
|
50
61
|
"ci": "npm run prepublishOnly && npm run pack:smoke && npm run smoke:react-consumers",
|
|
51
62
|
"pack:smoke": "npm pack --dry-run",
|