@helical-design/substrate 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -0
- package/bin/create-helical.mjs +59 -0
- package/package.json +40 -0
- package/src/build-all.mjs +59 -0
- package/src/build.mjs +31 -0
- package/src/content.mjs +6 -0
- package/src/db/client.mjs +45 -0
- package/src/db/schema.mjs +15 -0
- package/src/db/vector.mjs +10 -0
- package/src/harness.mjs +449 -0
- package/src/index.mjs +19 -0
- package/src/pages.mjs +14 -0
- package/src/palette.mjs +39 -0
- package/src/registry.mjs +29 -0
- package/src/render.mjs +43 -0
- package/src/scaffold.mjs +200 -0
- package/src/scale.mjs +268 -0
- package/src/store.mjs +38 -0
- package/src/tokens.mjs +79 -0
- package/templates/db/_shared/drizzle.config.mjs +9 -0
- package/templates/db/neon/client.mjs +7 -0
- package/templates/db/neon/env.example +6 -0
- package/templates/db/supabase/client.mjs +7 -0
- package/templates/db/supabase/config.toml +11 -0
- package/templates/db/supabase/env.example +8 -0
- package/templates/db/supabase/migrations/0001_init.sql +12 -0
- package/templates/profiles/_base/README.md +22 -0
- package/templates/profiles/_base/assets/base.css +50 -0
- package/templates/profiles/_base/content/about.md +4 -0
- package/templates/profiles/_base/content/site.json +1 -0
- package/templates/profiles/_base/pages.json +4 -0
- package/templates/profiles/_base/templates/layout.html +1 -0
- package/templates/profiles/_base/templates/pages/about.html +2 -0
- package/templates/profiles/_base/templates/pages/home.html +3 -0
- package/templates/profiles/_base/tokens/accent.dark.json +7 -0
- package/templates/profiles/_base/tokens/accent.light.json +7 -0
- package/templates/profiles/_base/tokens/base.json +18 -0
- package/templates/profiles/_base/tokens/breakpoints.json +38 -0
- package/templates/profiles/_base/tokens/palette.dark.json +96 -0
- package/templates/profiles/_base/tokens/palette.light.json +96 -0
- package/templates/profiles/_base/tokens/scale.compact.json +68 -0
- package/templates/profiles/_base/tokens/scale.json +114 -0
- package/templates/profiles/_base/tokens/scale.spacious.json +68 -0
- package/templates/profiles/_base/tokens/semantic.json +14 -0
- package/templates/profiles/app/.keep +0 -0
- package/templates/profiles/marketing/.keep +0 -0
- package/tokens/accent.dark.json +7 -0
- package/tokens/accent.light.json +7 -0
- package/tokens/base.json +18 -0
- package/tokens/breakpoints.json +38 -0
- package/tokens/palette.dark.json +96 -0
- package/tokens/palette.light.json +96 -0
- package/tokens/scale.compact.json +68 -0
- package/tokens/scale.json +114 -0
- package/tokens/scale.spacious.json +68 -0
- package/tokens/semantic.json +14 -0
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# {{name}}
|
|
2
|
+
|
|
3
|
+
Scaffolded with `create-helical` on the `@helical/substrate` engine.
|
|
4
|
+
|
|
5
|
+
## Layout
|
|
6
|
+
|
|
7
|
+
- `tokens/` — DTCG design tokens (re-skin the studio default here).
|
|
8
|
+
- `content/` — your content store (`site.json`, markdown, etc.).
|
|
9
|
+
- `templates/` — `layout.html` plus per-page templates under `templates/pages/`.
|
|
10
|
+
- `pages.json` — the page manifest the build consumes.
|
|
11
|
+
- `helical.config.mjs` — profile + pinned substrate version.
|
|
12
|
+
|
|
13
|
+
## Build
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
npm install
|
|
17
|
+
node -e "import('@helical/substrate').then(m => m.buildTokens('.'))"
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
The inherited harness (`runHarness`) holds every surface to the same gates:
|
|
21
|
+
no hardcoded hex, no inline copy outside `{{ }}`, valid internal links, and
|
|
22
|
+
WCAG AA contrast.
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/* base.css — applies design tokens to base elements. Every design value is a token; no magic numbers. */
|
|
2
|
+
* { box-sizing: border-box; }
|
|
3
|
+
|
|
4
|
+
body {
|
|
5
|
+
margin: 0;
|
|
6
|
+
padding: var(--space-7);
|
|
7
|
+
max-width: var(--measure-default);
|
|
8
|
+
margin-inline: auto;
|
|
9
|
+
background: var(--color-bg);
|
|
10
|
+
color: var(--color-text);
|
|
11
|
+
font-family: var(--font-body);
|
|
12
|
+
line-height: var(--leading-body);
|
|
13
|
+
transition: background var(--motion-fast), color var(--motion-fast);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
h1, h2, h3 {
|
|
17
|
+
font-family: var(--font-display);
|
|
18
|
+
font-weight: var(--weight-semibold);
|
|
19
|
+
line-height: var(--leading-tight);
|
|
20
|
+
margin: var(--space-6) 0 var(--space-4);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Size-coupled tracking: each heading takes its own optical letter-spacing. */
|
|
24
|
+
h1 { font-size: var(--size-h1); letter-spacing: var(--tracking-h1); }
|
|
25
|
+
h2 { font-size: var(--size-h2); letter-spacing: var(--tracking-h2); }
|
|
26
|
+
h3 { font-size: var(--size-h3); letter-spacing: var(--tracking-h3); }
|
|
27
|
+
|
|
28
|
+
p {
|
|
29
|
+
margin: var(--space-4) 0;
|
|
30
|
+
color: var(--color-text-secondary);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
a {
|
|
34
|
+
color: var(--color-accent);
|
|
35
|
+
text-decoration: none;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
a:hover { text-decoration: underline; }
|
|
39
|
+
|
|
40
|
+
/* a11y: honor a user's reduced-motion preference. The !important here targets
|
|
41
|
+
animation/transition only — never text-spacing props — so it does not conflict
|
|
42
|
+
with WCAG 1.4.12 (user text-spacing overrides must still win). */
|
|
43
|
+
@media (prefers-reduced-motion: reduce) {
|
|
44
|
+
*, *::before, *::after {
|
|
45
|
+
animation-duration: 0.01ms !important;
|
|
46
|
+
animation-iteration-count: 1 !important;
|
|
47
|
+
transition-duration: 0.01ms !important;
|
|
48
|
+
scroll-behavior: auto !important;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "name": "New Helical Project", "tagline": "Built on the Helical substrate." }
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>{{ site.name }}</title><link rel="stylesheet" href="/tokens.css"><link rel="stylesheet" href="/assets/base.css"></head><body>%%BODY%%</body></html>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
{
|
|
2
|
+
"font": {
|
|
3
|
+
"display": { "$value": "Fraunces, Georgia, serif", "$type": "fontFamily" },
|
|
4
|
+
"body": { "$value": "Inter, system-ui, sans-serif", "$type": "fontFamily" },
|
|
5
|
+
"mono": { "$value": "'JetBrains Mono', ui-monospace, monospace", "$type": "fontFamily" }
|
|
6
|
+
},
|
|
7
|
+
"weight": {
|
|
8
|
+
"regular": { "$value": "400", "$type": "fontWeight" },
|
|
9
|
+
"medium": { "$value": "500", "$type": "fontWeight" },
|
|
10
|
+
"semibold": { "$value": "600", "$type": "fontWeight" }
|
|
11
|
+
},
|
|
12
|
+
"measure": {
|
|
13
|
+
"default": { "$value": "72ch", "$type": "dimension" }
|
|
14
|
+
},
|
|
15
|
+
"motion": {
|
|
16
|
+
"fast": { "$value": "300ms", "$type": "duration" }
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
{
|
|
2
|
+
"bp": {
|
|
3
|
+
"sm": {
|
|
4
|
+
"$value": "480px",
|
|
5
|
+
"$type": "dimension"
|
|
6
|
+
},
|
|
7
|
+
"md": {
|
|
8
|
+
"$value": "768px",
|
|
9
|
+
"$type": "dimension"
|
|
10
|
+
},
|
|
11
|
+
"lg": {
|
|
12
|
+
"$value": "1024px",
|
|
13
|
+
"$type": "dimension"
|
|
14
|
+
},
|
|
15
|
+
"xl": {
|
|
16
|
+
"$value": "1280px",
|
|
17
|
+
"$type": "dimension"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
"container": {
|
|
21
|
+
"sm": {
|
|
22
|
+
"$value": "480px",
|
|
23
|
+
"$type": "dimension"
|
|
24
|
+
},
|
|
25
|
+
"md": {
|
|
26
|
+
"$value": "720px",
|
|
27
|
+
"$type": "dimension"
|
|
28
|
+
},
|
|
29
|
+
"lg": {
|
|
30
|
+
"$value": "960px",
|
|
31
|
+
"$type": "dimension"
|
|
32
|
+
},
|
|
33
|
+
"xl": {
|
|
34
|
+
"$value": "1200px",
|
|
35
|
+
"$type": "dimension"
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
{
|
|
2
|
+
"palette": {
|
|
3
|
+
"bg": {
|
|
4
|
+
"$value": "#17161b",
|
|
5
|
+
"$type": "color"
|
|
6
|
+
},
|
|
7
|
+
"neutral": {
|
|
8
|
+
"1": {
|
|
9
|
+
"$value": "#232129",
|
|
10
|
+
"$type": "color"
|
|
11
|
+
},
|
|
12
|
+
"2": {
|
|
13
|
+
"$value": "#312e3a",
|
|
14
|
+
"$type": "color"
|
|
15
|
+
},
|
|
16
|
+
"3": {
|
|
17
|
+
"$value": "#474455",
|
|
18
|
+
"$type": "color"
|
|
19
|
+
},
|
|
20
|
+
"4": {
|
|
21
|
+
"$value": "#656078",
|
|
22
|
+
"$type": "color"
|
|
23
|
+
},
|
|
24
|
+
"5": {
|
|
25
|
+
"$value": "#827b9b",
|
|
26
|
+
"$type": "color"
|
|
27
|
+
},
|
|
28
|
+
"6": {
|
|
29
|
+
"$value": "#a49eb9",
|
|
30
|
+
"$type": "color"
|
|
31
|
+
},
|
|
32
|
+
"7": {
|
|
33
|
+
"$value": "#ccc8d8",
|
|
34
|
+
"$type": "color"
|
|
35
|
+
},
|
|
36
|
+
"8": {
|
|
37
|
+
"$value": "#f2f1f5",
|
|
38
|
+
"$type": "color"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
"accent": {
|
|
42
|
+
"1": {
|
|
43
|
+
"$value": "#0e373c",
|
|
44
|
+
"$type": "color"
|
|
45
|
+
},
|
|
46
|
+
"2": {
|
|
47
|
+
"$value": "#185d64",
|
|
48
|
+
"$type": "color"
|
|
49
|
+
},
|
|
50
|
+
"3": {
|
|
51
|
+
"$value": "#1d727b",
|
|
52
|
+
"$type": "color"
|
|
53
|
+
},
|
|
54
|
+
"4": {
|
|
55
|
+
"$value": "#238c96",
|
|
56
|
+
"$type": "color"
|
|
57
|
+
},
|
|
58
|
+
"5": {
|
|
59
|
+
"$value": "#2db1bf",
|
|
60
|
+
"$type": "color"
|
|
61
|
+
},
|
|
62
|
+
"6": {
|
|
63
|
+
"$value": "#34cede",
|
|
64
|
+
"$type": "color"
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"success": {
|
|
68
|
+
"1": {
|
|
69
|
+
"$value": "#217053",
|
|
70
|
+
"$type": "color"
|
|
71
|
+
},
|
|
72
|
+
"2": {
|
|
73
|
+
"$value": "#2a8f6b",
|
|
74
|
+
"$type": "color"
|
|
75
|
+
},
|
|
76
|
+
"3": {
|
|
77
|
+
"$value": "#35b588",
|
|
78
|
+
"$type": "color"
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
"danger": {
|
|
82
|
+
"1": {
|
|
83
|
+
"$value": "#aa3e4c",
|
|
84
|
+
"$type": "color"
|
|
85
|
+
},
|
|
86
|
+
"2": {
|
|
87
|
+
"$value": "#d94f62",
|
|
88
|
+
"$type": "color"
|
|
89
|
+
},
|
|
90
|
+
"3": {
|
|
91
|
+
"$value": "#ff7588",
|
|
92
|
+
"$type": "color"
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
{
|
|
2
|
+
"palette": {
|
|
3
|
+
"bg": {
|
|
4
|
+
"$value": "#f5f5f8",
|
|
5
|
+
"$type": "color"
|
|
6
|
+
},
|
|
7
|
+
"neutral": {
|
|
8
|
+
"1": {
|
|
9
|
+
"$value": "#e9e8ee",
|
|
10
|
+
"$type": "color"
|
|
11
|
+
},
|
|
12
|
+
"2": {
|
|
13
|
+
"$value": "#d5d3df",
|
|
14
|
+
"$type": "color"
|
|
15
|
+
},
|
|
16
|
+
"3": {
|
|
17
|
+
"$value": "#b6b2c7",
|
|
18
|
+
"$type": "color"
|
|
19
|
+
},
|
|
20
|
+
"4": {
|
|
21
|
+
"$value": "#918aab",
|
|
22
|
+
"$type": "color"
|
|
23
|
+
},
|
|
24
|
+
"5": {
|
|
25
|
+
"$value": "#736d89",
|
|
26
|
+
"$type": "color"
|
|
27
|
+
},
|
|
28
|
+
"6": {
|
|
29
|
+
"$value": "#555165",
|
|
30
|
+
"$type": "color"
|
|
31
|
+
},
|
|
32
|
+
"7": {
|
|
33
|
+
"$value": "#373542",
|
|
34
|
+
"$type": "color"
|
|
35
|
+
},
|
|
36
|
+
"8": {
|
|
37
|
+
"$value": "#1b1920",
|
|
38
|
+
"$type": "color"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
"accent": {
|
|
42
|
+
"1": {
|
|
43
|
+
"$value": "#6fe2ed",
|
|
44
|
+
"$type": "color"
|
|
45
|
+
},
|
|
46
|
+
"2": {
|
|
47
|
+
"$value": "#2cb0bd",
|
|
48
|
+
"$type": "color"
|
|
49
|
+
},
|
|
50
|
+
"3": {
|
|
51
|
+
"$value": "#2697a2",
|
|
52
|
+
"$type": "color"
|
|
53
|
+
},
|
|
54
|
+
"4": {
|
|
55
|
+
"$value": "#1f7c85",
|
|
56
|
+
"$type": "color"
|
|
57
|
+
},
|
|
58
|
+
"5": {
|
|
59
|
+
"$value": "#175c63",
|
|
60
|
+
"$type": "color"
|
|
61
|
+
},
|
|
62
|
+
"6": {
|
|
63
|
+
"$value": "#12474c",
|
|
64
|
+
"$type": "color"
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"success": {
|
|
68
|
+
"1": {
|
|
69
|
+
"$value": "#2fa078",
|
|
70
|
+
"$type": "color"
|
|
71
|
+
},
|
|
72
|
+
"2": {
|
|
73
|
+
"$value": "#257f5f",
|
|
74
|
+
"$type": "color"
|
|
75
|
+
},
|
|
76
|
+
"3": {
|
|
77
|
+
"$value": "#1c5e47",
|
|
78
|
+
"$type": "color"
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
"danger": {
|
|
82
|
+
"1": {
|
|
83
|
+
"$value": "#f3586d",
|
|
84
|
+
"$type": "color"
|
|
85
|
+
},
|
|
86
|
+
"2": {
|
|
87
|
+
"$value": "#c14657",
|
|
88
|
+
"$type": "color"
|
|
89
|
+
},
|
|
90
|
+
"3": {
|
|
91
|
+
"$value": "#903441",
|
|
92
|
+
"$type": "color"
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
{
|
|
2
|
+
"space": {
|
|
3
|
+
"1": {
|
|
4
|
+
"$value": "0.25rem",
|
|
5
|
+
"$type": "dimension"
|
|
6
|
+
},
|
|
7
|
+
"2": {
|
|
8
|
+
"$value": "0.5rem",
|
|
9
|
+
"$type": "dimension"
|
|
10
|
+
},
|
|
11
|
+
"3": {
|
|
12
|
+
"$value": "0.75rem",
|
|
13
|
+
"$type": "dimension"
|
|
14
|
+
},
|
|
15
|
+
"4": {
|
|
16
|
+
"$value": "1rem",
|
|
17
|
+
"$type": "dimension"
|
|
18
|
+
},
|
|
19
|
+
"5": {
|
|
20
|
+
"$value": "1.25rem",
|
|
21
|
+
"$type": "dimension"
|
|
22
|
+
},
|
|
23
|
+
"6": {
|
|
24
|
+
"$value": "1.5rem",
|
|
25
|
+
"$type": "dimension"
|
|
26
|
+
},
|
|
27
|
+
"7": {
|
|
28
|
+
"$value": "2rem",
|
|
29
|
+
"$type": "dimension"
|
|
30
|
+
},
|
|
31
|
+
"8": {
|
|
32
|
+
"$value": "clamp(3rem, calc(2.4rem + 2vw), 4rem)",
|
|
33
|
+
"$type": "dimension"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"size": {
|
|
37
|
+
"caption": {
|
|
38
|
+
"$value": "0.75rem",
|
|
39
|
+
"$type": "dimension"
|
|
40
|
+
},
|
|
41
|
+
"small": {
|
|
42
|
+
"$value": "0.8125rem",
|
|
43
|
+
"$type": "dimension"
|
|
44
|
+
},
|
|
45
|
+
"body": {
|
|
46
|
+
"$value": "0.875rem",
|
|
47
|
+
"$type": "dimension"
|
|
48
|
+
},
|
|
49
|
+
"h3": {
|
|
50
|
+
"$value": "clamp(1.0625rem, calc(0.9125rem + 0.5vw), 1.3125rem)",
|
|
51
|
+
"$type": "dimension"
|
|
52
|
+
},
|
|
53
|
+
"h2": {
|
|
54
|
+
"$value": "clamp(1.5625rem, calc(1.3rem + 0.875vw), 2rem)",
|
|
55
|
+
"$type": "dimension"
|
|
56
|
+
},
|
|
57
|
+
"h1": {
|
|
58
|
+
"$value": "clamp(2.3125rem, calc(1.9375rem + 1.25vw), 2.9375rem)",
|
|
59
|
+
"$type": "dimension"
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
"leading": {
|
|
63
|
+
"body": {
|
|
64
|
+
"$value": "1.5",
|
|
65
|
+
"$type": "number"
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
{
|
|
2
|
+
"space": {
|
|
3
|
+
"1": {
|
|
4
|
+
"$value": "0.25rem",
|
|
5
|
+
"$type": "dimension"
|
|
6
|
+
},
|
|
7
|
+
"2": {
|
|
8
|
+
"$value": "0.5rem",
|
|
9
|
+
"$type": "dimension"
|
|
10
|
+
},
|
|
11
|
+
"3": {
|
|
12
|
+
"$value": "0.75rem",
|
|
13
|
+
"$type": "dimension"
|
|
14
|
+
},
|
|
15
|
+
"4": {
|
|
16
|
+
"$value": "1rem",
|
|
17
|
+
"$type": "dimension"
|
|
18
|
+
},
|
|
19
|
+
"5": {
|
|
20
|
+
"$value": "clamp(1.25rem, calc(1.1rem + 0.5vw), 1.5rem)",
|
|
21
|
+
"$type": "dimension"
|
|
22
|
+
},
|
|
23
|
+
"6": {
|
|
24
|
+
"$value": "clamp(1.5rem, calc(1.2rem + 1vw), 2rem)",
|
|
25
|
+
"$type": "dimension"
|
|
26
|
+
},
|
|
27
|
+
"7": {
|
|
28
|
+
"$value": "clamp(2rem, calc(1.4rem + 2vw), 3rem)",
|
|
29
|
+
"$type": "dimension"
|
|
30
|
+
},
|
|
31
|
+
"8": {
|
|
32
|
+
"$value": "clamp(3rem, calc(2.4rem + 2vw), 4rem)",
|
|
33
|
+
"$type": "dimension"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"size": {
|
|
37
|
+
"caption": {
|
|
38
|
+
"$value": "0.75rem",
|
|
39
|
+
"$type": "dimension"
|
|
40
|
+
},
|
|
41
|
+
"small": {
|
|
42
|
+
"$value": "0.8125rem",
|
|
43
|
+
"$type": "dimension"
|
|
44
|
+
},
|
|
45
|
+
"body": {
|
|
46
|
+
"$value": "1rem",
|
|
47
|
+
"$type": "dimension"
|
|
48
|
+
},
|
|
49
|
+
"h3": {
|
|
50
|
+
"$value": "clamp(1.25rem, calc(1.1rem + 0.5vw), 1.5rem)",
|
|
51
|
+
"$type": "dimension"
|
|
52
|
+
},
|
|
53
|
+
"h2": {
|
|
54
|
+
"$value": "clamp(1.8125rem, calc(1.55rem + 0.875vw), 2.25rem)",
|
|
55
|
+
"$type": "dimension"
|
|
56
|
+
},
|
|
57
|
+
"h1": {
|
|
58
|
+
"$value": "clamp(2.75rem, calc(2.375rem + 1.25vw), 3.375rem)",
|
|
59
|
+
"$type": "dimension"
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
"radius": {
|
|
63
|
+
"none": {
|
|
64
|
+
"$value": "0px",
|
|
65
|
+
"$type": "dimension"
|
|
66
|
+
},
|
|
67
|
+
"sm": {
|
|
68
|
+
"$value": "4px",
|
|
69
|
+
"$type": "dimension"
|
|
70
|
+
},
|
|
71
|
+
"md": {
|
|
72
|
+
"$value": "8px",
|
|
73
|
+
"$type": "dimension"
|
|
74
|
+
},
|
|
75
|
+
"lg": {
|
|
76
|
+
"$value": "16px",
|
|
77
|
+
"$type": "dimension"
|
|
78
|
+
},
|
|
79
|
+
"pill": {
|
|
80
|
+
"$value": "999px",
|
|
81
|
+
"$type": "dimension"
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
"leading": {
|
|
85
|
+
"body": {
|
|
86
|
+
"$value": "1.6",
|
|
87
|
+
"$type": "number"
|
|
88
|
+
},
|
|
89
|
+
"tight": {
|
|
90
|
+
"$value": "1.2",
|
|
91
|
+
"$type": "number"
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
"tracking": {
|
|
95
|
+
"h1": {
|
|
96
|
+
"$value": "-0.01em",
|
|
97
|
+
"$type": "dimension"
|
|
98
|
+
},
|
|
99
|
+
"h2": {
|
|
100
|
+
"$value": "-0.01em",
|
|
101
|
+
"$type": "dimension"
|
|
102
|
+
},
|
|
103
|
+
"h3": {
|
|
104
|
+
"$value": "-0.01em",
|
|
105
|
+
"$type": "dimension"
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
"target": {
|
|
109
|
+
"min": {
|
|
110
|
+
"$value": "24px",
|
|
111
|
+
"$type": "dimension"
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
{
|
|
2
|
+
"space": {
|
|
3
|
+
"1": {
|
|
4
|
+
"$value": "0.25rem",
|
|
5
|
+
"$type": "dimension"
|
|
6
|
+
},
|
|
7
|
+
"2": {
|
|
8
|
+
"$value": "0.5rem",
|
|
9
|
+
"$type": "dimension"
|
|
10
|
+
},
|
|
11
|
+
"3": {
|
|
12
|
+
"$value": "0.75rem",
|
|
13
|
+
"$type": "dimension"
|
|
14
|
+
},
|
|
15
|
+
"4": {
|
|
16
|
+
"$value": "1rem",
|
|
17
|
+
"$type": "dimension"
|
|
18
|
+
},
|
|
19
|
+
"5": {
|
|
20
|
+
"$value": "clamp(1.25rem, calc(1.1rem + 0.5vw), 1.5rem)",
|
|
21
|
+
"$type": "dimension"
|
|
22
|
+
},
|
|
23
|
+
"6": {
|
|
24
|
+
"$value": "clamp(1.5rem, calc(1.2rem + 1vw), 2rem)",
|
|
25
|
+
"$type": "dimension"
|
|
26
|
+
},
|
|
27
|
+
"7": {
|
|
28
|
+
"$value": "3rem",
|
|
29
|
+
"$type": "dimension"
|
|
30
|
+
},
|
|
31
|
+
"8": {
|
|
32
|
+
"$value": "clamp(4rem, calc(3.4rem + 2vw), 5rem)",
|
|
33
|
+
"$type": "dimension"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"size": {
|
|
37
|
+
"caption": {
|
|
38
|
+
"$value": "0.75rem",
|
|
39
|
+
"$type": "dimension"
|
|
40
|
+
},
|
|
41
|
+
"small": {
|
|
42
|
+
"$value": "0.8125rem",
|
|
43
|
+
"$type": "dimension"
|
|
44
|
+
},
|
|
45
|
+
"body": {
|
|
46
|
+
"$value": "clamp(1rem, calc(0.925rem + 0.25vw), 1.125rem)",
|
|
47
|
+
"$type": "dimension"
|
|
48
|
+
},
|
|
49
|
+
"h3": {
|
|
50
|
+
"$value": "clamp(1.4375rem, calc(1.2875rem + 0.5vw), 1.6875rem)",
|
|
51
|
+
"$type": "dimension"
|
|
52
|
+
},
|
|
53
|
+
"h2": {
|
|
54
|
+
"$value": "clamp(2.125rem, calc(1.8625rem + 0.875vw), 2.5625rem)",
|
|
55
|
+
"$type": "dimension"
|
|
56
|
+
},
|
|
57
|
+
"h1": {
|
|
58
|
+
"$value": "clamp(3.1875rem, calc(2.8125rem + 1.25vw), 3.8125rem)",
|
|
59
|
+
"$type": "dimension"
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
"leading": {
|
|
63
|
+
"body": {
|
|
64
|
+
"$value": "1.7",
|
|
65
|
+
"$type": "number"
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"color": {
|
|
3
|
+
"bg": { "$value": "{palette.bg}", "$type": "color" },
|
|
4
|
+
"surface": { "$value": "{palette.neutral.1}", "$type": "color" },
|
|
5
|
+
"surface-2": { "$value": "{palette.neutral.2}", "$type": "color" },
|
|
6
|
+
"border": { "$value": "{palette.neutral.2}", "$type": "color" },
|
|
7
|
+
"border-strong": { "$value": "{palette.neutral.3}", "$type": "color" },
|
|
8
|
+
"text-dim": { "$value": "{palette.neutral.4}", "$type": "color" },
|
|
9
|
+
"text-secondary": { "$value": "{palette.neutral.6}", "$type": "color" },
|
|
10
|
+
"text": { "$value": "{palette.neutral.8}", "$type": "color" },
|
|
11
|
+
"success": { "$value": "{palette.success.3}", "$type": "color" },
|
|
12
|
+
"danger": { "$value": "{palette.danger.3}", "$type": "color" }
|
|
13
|
+
}
|
|
14
|
+
}
|
|
File without changes
|
|
File without changes
|
package/tokens/base.json
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
{
|
|
2
|
+
"font": {
|
|
3
|
+
"display": { "$value": "Fraunces, Georgia, serif", "$type": "fontFamily" },
|
|
4
|
+
"body": { "$value": "Inter, system-ui, sans-serif", "$type": "fontFamily" },
|
|
5
|
+
"mono": { "$value": "'JetBrains Mono', ui-monospace, monospace", "$type": "fontFamily" }
|
|
6
|
+
},
|
|
7
|
+
"weight": {
|
|
8
|
+
"regular": { "$value": "400", "$type": "fontWeight" },
|
|
9
|
+
"medium": { "$value": "500", "$type": "fontWeight" },
|
|
10
|
+
"semibold": { "$value": "600", "$type": "fontWeight" }
|
|
11
|
+
},
|
|
12
|
+
"measure": {
|
|
13
|
+
"default": { "$value": "720px", "$type": "dimension" }
|
|
14
|
+
},
|
|
15
|
+
"motion": {
|
|
16
|
+
"fast": { "$value": "300ms", "$type": "duration" }
|
|
17
|
+
}
|
|
18
|
+
}
|