@crewlethq/tokens 0.4.4 → 0.5.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 +359 -31
- package/dist/css/base.css +9 -3
- package/dist/css/breakpoint.css +2 -1
- package/dist/css/fonts.css +11 -11
- package/dist/css/legacy.css +11 -9
- package/dist/css/themes.css +267 -300
- package/dist/css/tokens.css +55 -65
- package/dist/index.d.ts +47 -59
- package/dist/index.js +50 -62
- package/dist/themes.d.ts +98 -126
- package/dist/themes.js +98 -126
- package/fonts/OFL.txt +15 -14
- package/fonts/README.md +22 -13
- package/fonts/SHA256SUMS +4 -4
- package/fonts/geist-latin-ext.woff2 +0 -0
- package/fonts/geist-latin.woff2 +0 -0
- package/fonts/geist-mono-latin-ext.woff2 +0 -0
- package/fonts/geist-mono-latin.woff2 +0 -0
- package/package.json +1 -1
- package/test/color.mjs +26 -12
- package/test/palette.d.mts +88 -3
- package/test/palette.mjs +464 -179
- package/test/palette.test.mjs +448 -9
- package/fonts/inter-latin-ext.woff2 +0 -0
- package/fonts/inter-latin.woff2 +0 -0
- package/fonts/jetbrains-mono-latin-ext.woff2 +0 -0
- package/fonts/jetbrains-mono-latin.woff2 +0 -0
package/dist/themes.js
CHANGED
|
@@ -12,82 +12,68 @@ export const themes = {
|
|
|
12
12
|
"light": {
|
|
13
13
|
"color": {
|
|
14
14
|
"surface": {
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"elevated": "#
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"pressed": "rgba(9, 9, 11, 0.07)",
|
|
24
|
-
"inset": "rgba(9, 9, 11, 0.05)",
|
|
25
|
-
"glass": "rgba(244, 244, 245, 0.90)",
|
|
15
|
+
"frame": "#ededea",
|
|
16
|
+
"background": "#f9f9f8",
|
|
17
|
+
"subtle": "#ffffff",
|
|
18
|
+
"elevated": "#f3f3f1",
|
|
19
|
+
"hover": "rgba(9, 9, 11, 0.044)",
|
|
20
|
+
"pressed": "rgba(9, 9, 11, 0.088)",
|
|
21
|
+
"inset": "rgba(9, 9, 11, 0.026)",
|
|
22
|
+
"glass": "rgba(255, 255, 255, 0.90)",
|
|
26
23
|
"scrim": "rgba(0, 0, 0, 0.6)",
|
|
27
|
-
"veil": "rgba(
|
|
24
|
+
"veil": "rgba(237, 237, 234, 0.65)",
|
|
28
25
|
"inverse": "#09090b"
|
|
29
26
|
},
|
|
30
27
|
"text": {
|
|
31
|
-
"primary": "#
|
|
32
|
-
"secondary": "#
|
|
33
|
-
"tertiary": "#
|
|
34
|
-
"muted": "#
|
|
35
|
-
"onBrand": "#ffffff",
|
|
28
|
+
"primary": "#17171a",
|
|
29
|
+
"secondary": "#46464e",
|
|
30
|
+
"tertiary": "#5f5e67",
|
|
31
|
+
"muted": "#8d8d94",
|
|
36
32
|
"onAccent": "#ffffff",
|
|
37
33
|
"inverse": "#fafafa"
|
|
38
34
|
},
|
|
39
35
|
"brand": {
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"accentInk": "#
|
|
44
|
-
"accentSoft": "rgba(
|
|
36
|
+
"accent": "#6b45f0",
|
|
37
|
+
"accentHover": "#633ae5",
|
|
38
|
+
"accentActive": "#5b2eda",
|
|
39
|
+
"accentInk": "#5a33de",
|
|
40
|
+
"accentSoft": "rgba(107, 69, 240, 0.108)",
|
|
41
|
+
"accentRgb": "107, 69, 240",
|
|
42
|
+
"accentSoftStrong": "rgba(107, 69, 240, 0.32)"
|
|
45
43
|
},
|
|
46
44
|
"border": {
|
|
47
|
-
"default": "#
|
|
48
|
-
"hover": "#
|
|
49
|
-
"strong": "#
|
|
50
|
-
"strongHover": "#
|
|
51
|
-
"control": "#
|
|
45
|
+
"default": "#e4e4e0",
|
|
46
|
+
"hover": "#d3d3ce",
|
|
47
|
+
"strong": "#d3d3ce",
|
|
48
|
+
"strongHover": "#c2c2bc",
|
|
49
|
+
"control": "#7a7a82"
|
|
52
50
|
},
|
|
53
|
-
"focus": "#
|
|
51
|
+
"focus": "#6b45f0",
|
|
54
52
|
"feedback": {
|
|
55
|
-
"success": "#
|
|
56
|
-
"successInk": "#
|
|
57
|
-
"warning": "#
|
|
58
|
-
"warningInk": "#
|
|
59
|
-
"danger": "#
|
|
60
|
-
"dangerHover": "#
|
|
61
|
-
"dangerInk": "#
|
|
62
|
-
"info": "#
|
|
63
|
-
"infoInk": "#
|
|
64
|
-
"successSoft": "rgba(
|
|
65
|
-
"successLine": "rgba(
|
|
66
|
-
"warningSoft": "rgba(
|
|
67
|
-
"warningLine": "rgba(
|
|
68
|
-
"dangerSoft": "rgba(
|
|
69
|
-
"dangerLine": "rgba(
|
|
70
|
-
"infoSoft": "rgba(
|
|
71
|
-
"infoLine": "rgba(
|
|
72
|
-
},
|
|
73
|
-
"phase": {
|
|
74
|
-
"onboarding": "#980099",
|
|
75
|
-
"onboardingInk": "#8e0090",
|
|
76
|
-
"execute": "#5b37da",
|
|
77
|
-
"executeInk": "#552dd1",
|
|
78
|
-
"review": "#078543",
|
|
79
|
-
"reviewInk": "#006121",
|
|
80
|
-
"onboardingSoft": "rgba(152, 0, 153, 0.12)",
|
|
81
|
-
"executeSoft": "rgba(91, 55, 218, 0.12)",
|
|
82
|
-
"reviewSoft": "rgba(7, 133, 67, 0.12)"
|
|
53
|
+
"success": "#009b74",
|
|
54
|
+
"successInk": "#106d46",
|
|
55
|
+
"warning": "#c57600",
|
|
56
|
+
"warningInk": "#8e5000",
|
|
57
|
+
"danger": "#c01d32",
|
|
58
|
+
"dangerHover": "#b5092a",
|
|
59
|
+
"dangerInk": "#b61426",
|
|
60
|
+
"info": "#3081de",
|
|
61
|
+
"infoInk": "#1a5eb3",
|
|
62
|
+
"successSoft": "rgba(0, 155, 116, 0.12)",
|
|
63
|
+
"successLine": "rgba(0, 155, 116, 0.3)",
|
|
64
|
+
"warningSoft": "rgba(197, 118, 0, 0.12)",
|
|
65
|
+
"warningLine": "rgba(197, 118, 0, 0.3)",
|
|
66
|
+
"dangerSoft": "rgba(192, 29, 50, 0.12)",
|
|
67
|
+
"dangerLine": "rgba(192, 29, 50, 0.3)",
|
|
68
|
+
"infoSoft": "rgba(48, 129, 222, 0.12)",
|
|
69
|
+
"infoLine": "rgba(48, 129, 222, 0.3)"
|
|
83
70
|
},
|
|
84
71
|
"data": {
|
|
85
|
-
"1": "#
|
|
86
|
-
"2": "#
|
|
87
|
-
"3": "#
|
|
88
|
-
"4": "#
|
|
89
|
-
"
|
|
90
|
-
"other": "#71717a"
|
|
72
|
+
"1": "#3879ce",
|
|
73
|
+
"2": "#e45f28",
|
|
74
|
+
"3": "#009b74",
|
|
75
|
+
"4": "#c57600",
|
|
76
|
+
"other": "#88888f"
|
|
91
77
|
},
|
|
92
78
|
"node": {
|
|
93
79
|
"purple": "#7150b3",
|
|
@@ -137,88 +123,74 @@ export const themes = {
|
|
|
137
123
|
"hairline": "none",
|
|
138
124
|
"focus": "0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus)",
|
|
139
125
|
"selection": "inset 0 0 0 2px var(--color-brand-accent)",
|
|
140
|
-
"glow": "0 4px 24px rgba(
|
|
126
|
+
"glow": "0 4px 24px rgba(var(--color-brand-accent-rgb), 0.22)"
|
|
141
127
|
}
|
|
142
128
|
},
|
|
143
129
|
"dark": {
|
|
144
130
|
"color": {
|
|
145
131
|
"surface": {
|
|
146
|
-
"
|
|
147
|
-
"
|
|
148
|
-
"
|
|
149
|
-
"elevated": "#
|
|
150
|
-
"
|
|
151
|
-
"
|
|
152
|
-
"
|
|
153
|
-
"
|
|
154
|
-
"pressed": "rgba(255, 255, 255, 0.08)",
|
|
155
|
-
"inset": "rgba(255, 255, 255, 0.05)",
|
|
156
|
-
"glass": "rgba(28, 30, 36, 0.90)",
|
|
132
|
+
"frame": "#09090b",
|
|
133
|
+
"background": "#101013",
|
|
134
|
+
"subtle": "#141418",
|
|
135
|
+
"elevated": "#1b1b20",
|
|
136
|
+
"hover": "rgba(255, 255, 255, 0.061)",
|
|
137
|
+
"pressed": "rgba(255, 255, 255, 0.094)",
|
|
138
|
+
"inset": "rgba(255, 255, 255, 0.028)",
|
|
139
|
+
"glass": "rgba(20, 20, 24, 0.90)",
|
|
157
140
|
"scrim": "rgba(0, 0, 0, 0.6)",
|
|
158
|
-
"veil": "rgba(
|
|
141
|
+
"veil": "rgba(9, 9, 11, 0.65)",
|
|
159
142
|
"inverse": "#ffffff"
|
|
160
143
|
},
|
|
161
144
|
"text": {
|
|
162
|
-
"primary": "#
|
|
163
|
-
"secondary": "#
|
|
164
|
-
"tertiary": "#
|
|
165
|
-
"muted": "#
|
|
166
|
-
"onBrand": "#000000",
|
|
145
|
+
"primary": "#ededf0",
|
|
146
|
+
"secondary": "#b4b4bc",
|
|
147
|
+
"tertiary": "#9797a1",
|
|
148
|
+
"muted": "#5f5f68",
|
|
167
149
|
"onAccent": "#ffffff",
|
|
168
150
|
"inverse": "#09090b"
|
|
169
151
|
},
|
|
170
152
|
"brand": {
|
|
171
|
-
"
|
|
172
|
-
"
|
|
173
|
-
"
|
|
174
|
-
"accentInk": "#
|
|
175
|
-
"accentSoft": "rgba(
|
|
153
|
+
"accent": "#7c56ff",
|
|
154
|
+
"accentHover": "#744bf4",
|
|
155
|
+
"accentActive": "#6c40e9",
|
|
156
|
+
"accentInk": "#b3a1ff",
|
|
157
|
+
"accentSoft": "rgba(124, 86, 255, 0.16)",
|
|
158
|
+
"accentRgb": "124, 86, 255",
|
|
159
|
+
"accentSoftStrong": "rgba(124, 86, 255, 0.32)"
|
|
176
160
|
},
|
|
177
161
|
"border": {
|
|
178
|
-
"default": "#
|
|
179
|
-
"hover": "#
|
|
180
|
-
"strong": "#
|
|
181
|
-
"strongHover": "#
|
|
182
|
-
"control": "#
|
|
162
|
+
"default": "#232329",
|
|
163
|
+
"hover": "#303038",
|
|
164
|
+
"strong": "#303038",
|
|
165
|
+
"strongHover": "#3e3e48",
|
|
166
|
+
"control": "#787983"
|
|
183
167
|
},
|
|
184
|
-
"focus": "#
|
|
168
|
+
"focus": "#7e5bff",
|
|
185
169
|
"feedback": {
|
|
186
|
-
"success": "#
|
|
187
|
-
"successInk": "#
|
|
188
|
-
"warning": "#
|
|
189
|
-
"warningInk": "#
|
|
190
|
-
"danger": "#
|
|
191
|
-
"dangerHover": "#
|
|
192
|
-
"dangerInk": "#
|
|
193
|
-
"info": "#
|
|
194
|
-
"infoInk": "#
|
|
195
|
-
"successSoft": "rgba(
|
|
196
|
-
"successLine": "rgba(
|
|
197
|
-
"warningSoft": "rgba(
|
|
198
|
-
"warningLine": "rgba(
|
|
199
|
-
"dangerSoft": "rgba(
|
|
200
|
-
"dangerLine": "rgba(
|
|
201
|
-
"infoSoft": "rgba(
|
|
202
|
-
"infoLine": "rgba(
|
|
203
|
-
},
|
|
204
|
-
"phase": {
|
|
205
|
-
"onboarding": "#f77ae9",
|
|
206
|
-
"onboardingInk": "#ff82f1",
|
|
207
|
-
"execute": "#ac6bff",
|
|
208
|
-
"executeInk": "#d697ff",
|
|
209
|
-
"review": "#00a24f",
|
|
210
|
-
"reviewInk": "#46c872",
|
|
211
|
-
"onboardingSoft": "rgba(247, 122, 233, 0.12)",
|
|
212
|
-
"executeSoft": "rgba(172, 107, 255, 0.12)",
|
|
213
|
-
"reviewSoft": "rgba(0, 162, 79, 0.12)"
|
|
170
|
+
"success": "#3ecf8f",
|
|
171
|
+
"successInk": "#72dead",
|
|
172
|
+
"warning": "#f4b221",
|
|
173
|
+
"warningInk": "#f6c86f",
|
|
174
|
+
"danger": "#e50055",
|
|
175
|
+
"dangerHover": "#d6004f",
|
|
176
|
+
"dangerInk": "#ff9a9a",
|
|
177
|
+
"info": "#4c9dff",
|
|
178
|
+
"infoInk": "#86beff",
|
|
179
|
+
"successSoft": "rgba(62, 207, 143, 0.12)",
|
|
180
|
+
"successLine": "rgba(62, 207, 143, 0.3)",
|
|
181
|
+
"warningSoft": "rgba(244, 178, 33, 0.12)",
|
|
182
|
+
"warningLine": "rgba(244, 178, 33, 0.3)",
|
|
183
|
+
"dangerSoft": "rgba(229, 0, 85, 0.12)",
|
|
184
|
+
"dangerLine": "rgba(229, 0, 85, 0.3)",
|
|
185
|
+
"infoSoft": "rgba(76, 157, 255, 0.12)",
|
|
186
|
+
"infoLine": "rgba(76, 157, 255, 0.3)"
|
|
214
187
|
},
|
|
215
188
|
"data": {
|
|
216
|
-
"1": "#
|
|
217
|
-
"2": "#
|
|
218
|
-
"3": "#
|
|
219
|
-
"4": "#
|
|
220
|
-
"
|
|
221
|
-
"other": "#71717a"
|
|
189
|
+
"1": "#458adc",
|
|
190
|
+
"2": "#e4631f",
|
|
191
|
+
"3": "#009c79",
|
|
192
|
+
"4": "#c98500",
|
|
193
|
+
"other": "#6e6e78"
|
|
222
194
|
},
|
|
223
195
|
"node": {
|
|
224
196
|
"purple": "#8e6ed4",
|
|
@@ -268,7 +240,7 @@ export const themes = {
|
|
|
268
240
|
"hairline": "inset 0 1px 0 rgba(255, 255, 255, 0.04)",
|
|
269
241
|
"focus": "0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus)",
|
|
270
242
|
"selection": "inset 0 0 0 2px var(--color-brand-accent)",
|
|
271
|
-
"glow": "0 4px 24px rgba(
|
|
243
|
+
"glow": "0 4px 24px rgba(var(--color-brand-accent-rgb), 0.3)"
|
|
272
244
|
}
|
|
273
245
|
}
|
|
274
246
|
};
|
package/fonts/OFL.txt
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font)
|
|
2
|
+
Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font.git)
|
|
3
|
+
|
|
4
|
+
These are the copyright notices of the faces in this directory, reproduced
|
|
5
|
+
exactly as their files state them: the Geist faces carry the first and the
|
|
6
|
+
Geist Mono faces the second. The faces are the `latin` and `latin-ext` subsets
|
|
7
|
+
that Google Fonts serves for the two families. Each keeps part of the upstream
|
|
8
|
+
variable font's glyphs, layout features and tables, and is therefore a
|
|
9
|
+
Modified Version under the definitions below. Neither family declares a
|
|
10
|
+
Reserved Font Name. fonts/README.md records where each file was downloaded
|
|
11
|
+
from, and SHA256SUMS its checksum.
|
|
12
|
+
|
|
13
|
+
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
|
14
|
+
This license is copied below, and is also available with a FAQ at:
|
|
15
|
+
https://openfontlicense.org
|
|
15
16
|
|
|
16
17
|
-----------------------------------------------------------
|
|
17
18
|
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
package/fonts/README.md
CHANGED
|
@@ -4,27 +4,36 @@ The type families behind `--font-family-sans`, `--font-family-display` (an alias
|
|
|
4
4
|
|
|
5
5
|
| Family | Version | Axes | Files | License | Upstream |
|
|
6
6
|
| ------ | ------- | ---- | ----- | ------- | -------- |
|
|
7
|
-
|
|
|
8
|
-
|
|
|
7
|
+
| Geist | 1.800 | `wght` 100 to 900 | `geist-latin.woff2`, `geist-latin-ext.woff2` | SIL Open Font License 1.1 | <https://github.com/vercel/geist-font> |
|
|
8
|
+
| Geist Mono | 1.701 | `wght` 100 to 900 | `geist-mono-latin.woff2`, `geist-mono-latin-ext.woff2` | SIL Open Font License 1.1 | <https://github.com/vercel/geist-font> |
|
|
9
9
|
|
|
10
|
-
The version and axes
|
|
10
|
+
The family is each file's name ID 1, the version its name ID 5 (`Version 1.800`), and the axes its `fvar` table. Geist Mono's unique identifier (name ID 3) still reads `1.700`; its version string and its `head` revision both read 1.701. Upright style only; a browser synthesises italics.
|
|
11
|
+
|
|
12
|
+
The package's `test/fonts.test.mjs` (in the repository, not the tarball) reads those values out of every file and fails when this table, the weight range the build declares, or the notices at the top of [`OFL.txt`](./OFL.txt) disagree with them.
|
|
11
13
|
|
|
12
14
|
## Provenance
|
|
13
15
|
|
|
14
|
-
The files are the `latin` and `latin-ext` subsets that Google Fonts serves, downloaded unchanged from these stylesheet responses (requested with a current Chrome user agent, which selects variable woff2 files):
|
|
16
|
+
The files are the `latin` and `latin-ext` subsets that Google Fonts serves (Geist v5 and Geist Mono v6 on its CDN), downloaded unchanged from these stylesheet responses (requested with a current Chrome user agent, which selects variable woff2 files):
|
|
15
17
|
|
|
16
18
|
| Stylesheet request | Subset | File | Downloaded from |
|
|
17
19
|
| ------------------ | ------ | ---- | --------------- |
|
|
18
|
-
| `https://fonts.googleapis.com/css2?family=
|
|
19
|
-
| same | latin-ext | `
|
|
20
|
-
| `https://fonts.googleapis.com/css2?family=
|
|
21
|
-
| same | latin-ext | `
|
|
20
|
+
| `https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap` | latin | `geist-latin.woff2` | `https://fonts.gstatic.com/s/geist/v5/gyByhwUxId8gMEwcGFU.woff2` |
|
|
21
|
+
| same | latin-ext | `geist-latin-ext.woff2` | `https://fonts.gstatic.com/s/geist/v5/gyByhwUxId8gMEwSGFWfOw.woff2` |
|
|
22
|
+
| `https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap` | latin | `geist-mono-latin.woff2` | `https://fonts.gstatic.com/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrcdmg.woff2` |
|
|
23
|
+
| same | latin-ext | `geist-mono-latin-ext.woff2` | `https://fonts.gstatic.com/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrkdmgPn.woff2` |
|
|
22
24
|
|
|
23
25
|
[`SHA256SUMS`](./SHA256SUMS) holds the checksum of every file. `shasum -a 256 -c SHA256SUMS` verifies them, and the package build fails when a file does not match its checksum or has none.
|
|
24
26
|
|
|
25
|
-
Google Fonts builds these subsets from the upstream variable fonts
|
|
27
|
+
Google Fonts builds these subsets from the upstream variable fonts. It keeps the whole `wght` axis and only the glyphs in each subset's unicode range (plus the few that a kept feature composes from), and it drops the `meta` table and the license description (name ID 13; the license URL, name ID 14, stays). Under the definitions in the OFL that makes them Modified Versions. That is permitted, because neither family declares a Reserved Font Name, and they remain under the OFL. The copyright notices are preserved in each file and in `OFL.txt`.
|
|
28
|
+
|
|
29
|
+
It also keeps only some of the layout features, and which ones matters to the kit:
|
|
30
|
+
|
|
31
|
+
- `geist-latin.woff2` keeps `ccmp`, `dnom`, `frac`, `liga`, `locl`, `numr`, `pnum` and `tnum`. So `font-variant-numeric: tabular-nums`, which the document baseline and every numeric component set, draws tabular figures, and `proportional-nums` and `diagonal-fractions` work too.
|
|
32
|
+
- `geist-mono-latin.woff2` keeps `ccmp`, `dnom`, `frac`, `locl` and `numr`. It has no `tnum` and needs none: the face is fixed-pitch (its `post` table says so), so every figure already has one width.
|
|
33
|
+
- Both `latin-ext` files keep only `locl`. The figures live in the `latin` files.
|
|
34
|
+
- Upstream's stylistic sets (`ss01` to `ss11`), `case`, `sups`, `subs`, `sinf`, `ordn`, `dlig` and `aalt` are in neither family's served subsets, so a `font-feature-settings` naming one of them does nothing.
|
|
26
35
|
|
|
27
|
-
The `latin` subset covers basic Latin, Latin-1 and common punctuation; `latin-ext` adds the extended Latin alphabets. Each `@font-face` rule carries the same `unicode-range` the stylesheet response declares, so a page that renders only basic Latin text downloads one file per family. Other scripts (Cyrillic, Greek, Vietnamese) are not included and render in the fallback system fonts of the family stack.
|
|
36
|
+
The `latin` subset covers basic Latin, Latin-1 and common punctuation; `latin-ext` adds the extended Latin alphabets. Each `@font-face` rule carries the same `unicode-range` the stylesheet response declares (the two families' responses declare identical ranges), so a page that renders only basic Latin text downloads one file per family. Other scripts (Cyrillic, Greek, Vietnamese) and Geist Mono's box-drawing characters (Google Fonts' `symbols2` subset) are not included and render in the fallback system fonts of the family stack.
|
|
28
37
|
|
|
29
38
|
## License
|
|
30
39
|
|
|
@@ -35,7 +44,7 @@ An application that bundles the fonts meets that condition by shipping `OFL.txt`
|
|
|
35
44
|
## Replacing a file
|
|
36
45
|
|
|
37
46
|
1. Request the stylesheet in the table above (with the family's full `wght` range) using a current Chrome user agent, and download the `latin` and `latin-ext` woff2 files it references. Keep the file names.
|
|
38
|
-
2. Read the version and the axes from each file (for example with `fonttools ttx -t name -t fvar -t STAT`).
|
|
47
|
+
2. Read the family, the version and the axes from each file (for example with `fonttools ttx -t name -t fvar -t STAT`), and its copyright notice (name ID 0).
|
|
39
48
|
3. Regenerate the checksums with `shasum -a 256 *.woff2 > SHA256SUMS` in this directory.
|
|
40
|
-
4. Update both tables above, the `weight` range for the family in `scripts/build.mjs`, the unicode ranges there if the stylesheet response changed them, and the
|
|
41
|
-
5. Run `npm run build` in this package. The build fails if a file referenced by `scripts/build.mjs` is missing or does not match `SHA256SUMS
|
|
49
|
+
4. Update both tables above, the `weight` range for the family in `scripts/build.mjs`, the unicode ranges there if the stylesheet response changed them, and the notices at the top of `OFL.txt` if a file's name ID 0 changed.
|
|
50
|
+
5. Run `npm run build` and then `npm test` in this package. The build fails if a file referenced by `scripts/build.mjs` is missing or does not match `SHA256SUMS`; the tests fail if a file's family, version, axes or copyright notice no longer matches what this README, the built `@font-face` rules and `OFL.txt` say about it.
|
package/fonts/SHA256SUMS
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
824f485b5d26e2f2da3c2b236132ece1bc8e4e43373452950bb0e40548b4313f geist-latin-ext.woff2
|
|
2
|
+
19f9c92546aa300c312235e3125af1b81394d8db9a4bc4a425cd5b641d2d54e1 geist-latin.woff2
|
|
3
|
+
1a189eb997c3e2ece68373e387afaec9e8617424186c4b1ab3cff7c54ba6223b geist-mono-latin-ext.woff2
|
|
4
|
+
684ad5b531f81d43c1e8c7038262d5db7cdc1f68006e04d6c7769efa8d33c8cc geist-mono-latin.woff2
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/package.json
CHANGED
package/test/color.mjs
CHANGED
|
@@ -81,11 +81,16 @@ export function parseDeclarations(body) {
|
|
|
81
81
|
* Merge every block that matches, in cascade order, into one token map.
|
|
82
82
|
* `sources` are `{ name, css }` in IMPORT order, because these files share
|
|
83
83
|
* the `:root` selector and the later import is what a browser paints.
|
|
84
|
+
*
|
|
85
|
+
* A source may carry `blocks`, its parseBlocks() already taken, in place of
|
|
86
|
+
* `css`, so a caller that reads several selectors out of one sheet parses it
|
|
87
|
+
* once. runPalette reads four states and three theme blocks, and parsing the
|
|
88
|
+
* two sheets once per read was most of what a measurement cost.
|
|
84
89
|
*/
|
|
85
90
|
export function cascade(sources, matches) {
|
|
86
91
|
const out = new Map();
|
|
87
92
|
for (const source of sources) {
|
|
88
|
-
for (const block of parseBlocks(source.css)) {
|
|
93
|
+
for (const block of source.blocks ?? parseBlocks(source.css)) {
|
|
89
94
|
if (!matches(block)) continue;
|
|
90
95
|
for (const [name, value] of block.declarations) out.set(name, value);
|
|
91
96
|
}
|
|
@@ -195,21 +200,30 @@ function fromLinear(v) {
|
|
|
195
200
|
return Math.min(255, Math.max(0, c * 255));
|
|
196
201
|
}
|
|
197
202
|
|
|
198
|
-
/**
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
203
|
+
/**
|
|
204
|
+
* OKLab to LINEAR sRGB, unclipped. A channel under 0 or over 1 says the
|
|
205
|
+
* colour is outside what a screen can show, which fromOklab hides by clipping
|
|
206
|
+
* each channel on its own, and clipping one channel turns the hue: a search
|
|
207
|
+
* that walks chroma has to know where the gamut ends rather than be handed a
|
|
208
|
+
* different colour from the one it asked for.
|
|
209
|
+
*/
|
|
210
|
+
export function oklabToLinear({ L, a, b }) {
|
|
211
|
+
const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
|
|
212
|
+
const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
|
|
213
|
+
const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
|
|
206
214
|
return {
|
|
207
|
-
r:
|
|
208
|
-
g:
|
|
209
|
-
b:
|
|
215
|
+
r: 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
|
|
216
|
+
g: -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
|
|
217
|
+
b: -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
|
|
210
218
|
};
|
|
211
219
|
}
|
|
212
220
|
|
|
221
|
+
/** OKLab to sRGB, clipped. Used to search for the nearest passing value. */
|
|
222
|
+
export function fromOklab(lab) {
|
|
223
|
+
const { r, g, b } = oklabToLinear(lab);
|
|
224
|
+
return { r: Math.round(fromLinear(r)), g: Math.round(fromLinear(g)), b: Math.round(fromLinear(b)) };
|
|
225
|
+
}
|
|
226
|
+
|
|
213
227
|
export const hex = ({ r, g, b }) =>
|
|
214
228
|
`#${[r, g, b].map((v) => Math.round(v).toString(16).padStart(2, '0')).join('')}`;
|
|
215
229
|
|
package/test/palette.d.mts
CHANGED
|
@@ -13,7 +13,11 @@
|
|
|
13
13
|
|
|
14
14
|
/** One measured rule, over one state of the cascade. */
|
|
15
15
|
export interface PaletteCheck {
|
|
16
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* Which set of values: one of the four `paletteStates` names ('base',
|
|
18
|
+
* 'dark', 'light (media query)', 'light (attribute)'), or 'the token files'
|
|
19
|
+
* for a structural rule, which reads the theme file rather than a state.
|
|
20
|
+
*/
|
|
17
21
|
state: string;
|
|
18
22
|
/** The rule being kept, as a sentence. */
|
|
19
23
|
rule: string;
|
|
@@ -43,7 +47,12 @@ export interface PaletteResult {
|
|
|
43
47
|
/** Measure the whole rule table over one built pair of stylesheets. */
|
|
44
48
|
export function runPalette(sources: PaletteSources): PaletteResult;
|
|
45
49
|
|
|
46
|
-
/**
|
|
50
|
+
/**
|
|
51
|
+
* The four sets of values a browser can end up with, keyed 'base' (tokens.css
|
|
52
|
+
* alone, the marketing palette), 'dark' (the theme layer's bare root, which a
|
|
53
|
+
* document that sets nothing gets), 'light (media query)' and 'light
|
|
54
|
+
* (attribute)', in that order.
|
|
55
|
+
*/
|
|
47
56
|
export function paletteStates(sources: PaletteSources): Record<string, Map<string, string>>;
|
|
48
57
|
|
|
49
58
|
/** One line per failing check, for an assertion message. */
|
|
@@ -67,11 +76,87 @@ export function simulate(colour: Rgb, kind: string): Rgb;
|
|
|
67
76
|
export function separation(a: Rgb, b: Rgb): number[];
|
|
68
77
|
export const VISIONS: readonly string[];
|
|
69
78
|
|
|
79
|
+
/**
|
|
80
|
+
* The four opaque rungs, by custom-property name, lowest first: the frame, the
|
|
81
|
+
* sheet (`--color-surface-background`), the card (`-subtle`) and raised
|
|
82
|
+
* (`-elevated`). Every ground a piece of text can end up on; a component suite
|
|
83
|
+
* measures on these rather than on a copy of them.
|
|
84
|
+
*/
|
|
85
|
+
export const OPAQUE_SURFACES: readonly string[];
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* The neutral text steps that carry a FACT, each as [custom property, the
|
|
89
|
+
* contrast floor it clears on every opaque rung].
|
|
90
|
+
*/
|
|
91
|
+
export const TEXT_STEPS: readonly (readonly [string, number])[];
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* The steps of the ladder, each as [rule, upper rung, lower rung, the dE the
|
|
95
|
+
* upper rung has to sit off the lower one].
|
|
96
|
+
*/
|
|
97
|
+
export const RUNG_STEPS: readonly (readonly [string, string, string, number])[];
|
|
98
|
+
|
|
99
|
+
/** The line that finds a card, as [border, card, sheet]: it clears HAIRLINE_DE against both. */
|
|
100
|
+
export const CARD_HAIRLINE: readonly [string, string, string];
|
|
101
|
+
export const HAIRLINE_DE: number;
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* The overlays that have to be seen, each as [rule, overlay, the overlay it is
|
|
105
|
+
* measured against or null for the bare rung], and the dE each clears.
|
|
106
|
+
*/
|
|
107
|
+
export const OVERLAY_STEPS: readonly (readonly [string, string, string | null])[];
|
|
108
|
+
export const OVERLAY_DE: number;
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* The translucent overlays composited onto each opaque rung: a hovered row, a
|
|
112
|
+
* pressed row and an inset well. A component suite measuring what a mark
|
|
113
|
+
* stands on includes these grounds as well as the bare rungs.
|
|
114
|
+
*/
|
|
115
|
+
export const OVERLAYS: readonly string[];
|
|
116
|
+
|
|
117
|
+
/** The ground the application rail stands on. */
|
|
118
|
+
export const RAIL_GROUND: string;
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* The row the reader is on in the rail, as [fill, hairline]: raised, with the
|
|
122
|
+
* plain border drawn round it. The fill lifts off the rail by
|
|
123
|
+
* RAIL_CURRENT_LIFT and the hairline clears HAIRLINE_DE on the fill.
|
|
124
|
+
*/
|
|
125
|
+
export const RAIL_CURRENT_ROW: readonly [string, string];
|
|
126
|
+
export const RAIL_CURRENT_LIFT: number;
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* The four chart series, by custom-property name, in the order a figure
|
|
130
|
+
* assigns them. Past the fourth a figure takes `--color-data-other`, which is
|
|
131
|
+
* not a series and is not in the list.
|
|
132
|
+
*/
|
|
133
|
+
export const DATA: readonly string[];
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* How far apart two neighbouring series sit, in OKLab dE: DATA_ADJACENT_DE
|
|
137
|
+
* under every vision, and DATA_ADJACENT_NORMAL_DE under normal vision.
|
|
138
|
+
*/
|
|
139
|
+
export const DATA_ADJACENT_DE: number;
|
|
140
|
+
export const DATA_ADJACENT_NORMAL_DE: number;
|
|
141
|
+
|
|
142
|
+
/**
|
|
143
|
+
* The filled actions' steps, each as [rule, the step, the fill it follows]:
|
|
144
|
+
* the primary action's hover and press, and the destructive action's hover.
|
|
145
|
+
* Each clears ACTION_DE against the one before it and raises the contrast of
|
|
146
|
+
* ACTION_LABEL on it.
|
|
147
|
+
*/
|
|
148
|
+
export const ACTION_STEPS: readonly (readonly [string, string, string])[];
|
|
149
|
+
export const ACTION_LABEL: string;
|
|
150
|
+
export const ACTION_DE: number;
|
|
151
|
+
|
|
70
152
|
/** The token name of the modal veil. */
|
|
71
153
|
export const VEIL: string;
|
|
72
154
|
|
|
155
|
+
/** The rung the veil is drawn in: each root's own frame. */
|
|
156
|
+
export const VEIL_GROUND: string;
|
|
157
|
+
|
|
73
158
|
/** The band the veiled page has to stay inside, as [floor, ceiling]. */
|
|
74
159
|
export const VEIL_BAND: readonly number[];
|
|
75
160
|
|
|
76
|
-
/** The alpha the veil draws its own root's
|
|
161
|
+
/** The alpha the veil draws its own root's frame at. */
|
|
77
162
|
export const VEIL_ALPHA: number;
|