@wtfalch/design 0.4.0 → 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.
|
@@ -22,13 +22,13 @@
|
|
|
22
22
|
* **Inlined rather than installed.** The npm package ships the whole set, and a
|
|
23
23
|
* font or a bundle has to load before anything draws -- in an app that opens
|
|
24
24
|
* offline, on a machine that has just downloaded it, that is a flash of missing
|
|
25
|
-
* chrome on the one screen that has to inspire confidence.
|
|
26
|
-
* nothing and cannot fail to arrive.
|
|
25
|
+
* chrome on the one screen that has to inspire confidence. Forty-two glyphs
|
|
26
|
+
* cost nothing and cannot fail to arrive.
|
|
27
27
|
*
|
|
28
28
|
* `currentColor` throughout, so an icon takes the colour of the thing it sits
|
|
29
29
|
* in and never needs a variant.
|
|
30
30
|
*
|
|
31
|
-
* Source names, if you need to add
|
|
31
|
+
* Source names, if you need to add another from https://pepicons.com:
|
|
32
32
|
* chat text-bubble
|
|
33
33
|
* settings gear
|
|
34
34
|
* refresh arrows-spin
|
|
@@ -49,7 +49,20 @@
|
|
|
49
49
|
* mic microphone
|
|
50
50
|
* back arrow-left
|
|
51
51
|
* spinner arrow-spin
|
|
52
|
-
|
|
52
|
+
* file file
|
|
53
|
+
* mail letter
|
|
54
|
+
* mail-open letter-open
|
|
55
|
+
* pen pen
|
|
56
|
+
* send paper-plane
|
|
57
|
+
* trash trash
|
|
58
|
+
* paperclip paperclip
|
|
59
|
+
* star star
|
|
60
|
+
* star-filled star-filled
|
|
61
|
+
* search loop (Pepicons' name for a magnifier)
|
|
62
|
+
* more dots-x
|
|
63
|
+
* menu menu
|
|
64
|
+
* reply arrow-up-left
|
|
65
|
+
* forward arrow-up-right
|
|
53
66
|
*/
|
|
54
67
|
import type { IconName } from './iconNames.js';
|
|
55
68
|
export type { IconName };
|
|
@@ -14,5 +14,5 @@
|
|
|
14
14
|
* derived from this, so the type, the glyph table and the gallery cannot
|
|
15
15
|
* disagree.
|
|
16
16
|
*/
|
|
17
|
-
export declare const ICON_NAMES: readonly ["chat", "settings", "refresh", "minimize", "code", "wifi", "wifi-off", "check", "close", "info", "warning", "error", "expand", "download", "image", "bolt", "speaker", "mic", "back", "spinner", "folder", "book", "eye", "eye-off", "palette", "stars", "wrench", "cloud", "file"];
|
|
17
|
+
export declare const ICON_NAMES: readonly ["chat", "settings", "refresh", "minimize", "code", "wifi", "wifi-off", "check", "close", "info", "warning", "error", "expand", "download", "image", "bolt", "speaker", "mic", "back", "spinner", "folder", "book", "eye", "eye-off", "palette", "stars", "wrench", "cloud", "file", "mail", "mail-open", "pen", "send", "trash", "paperclip", "star", "star-filled", "search", "more", "menu", "reply", "forward"];
|
|
18
18
|
export type IconName = (typeof ICON_NAMES)[number];
|
|
@@ -57,4 +57,29 @@ export const ICON_NAMES = [
|
|
|
57
57
|
// is the wrong noun: you are handing over one file, not opening a place
|
|
58
58
|
// that holds several.
|
|
59
59
|
'file',
|
|
60
|
+
// A mail client's vocabulary, added for `@wtfalch/email`'s mailbox. The set
|
|
61
|
+
// had no noun for a message, a folder to file one in, or any of the four
|
|
62
|
+
// things you do to one, so the mailbox was drawing Inbox with `chat`, Sent
|
|
63
|
+
// with `download` and Deleted Items with `close` -- three right shapes for
|
|
64
|
+
// three wrong words. Measured the same way as the rest; see the `Glyph`
|
|
65
|
+
// docstring in `Icon.tsx`.
|
|
66
|
+
'mail',
|
|
67
|
+
'mail-open',
|
|
68
|
+
'pen',
|
|
69
|
+
'send',
|
|
70
|
+
'trash',
|
|
71
|
+
'paperclip',
|
|
72
|
+
// `star` is a rating or a flagged message; `stars` above it is the
|
|
73
|
+
// sparkles, and means generated. One letter apart and unrelated, which is
|
|
74
|
+
// worth the comment: reach for the wrong one and it still compiles.
|
|
75
|
+
'star',
|
|
76
|
+
'star-filled',
|
|
77
|
+
'search',
|
|
78
|
+
'more',
|
|
79
|
+
'menu',
|
|
80
|
+
// Diagonal arrows, which is what every minimal set draws reply and forward
|
|
81
|
+
// as. Pepicons has no curved corner arrow, and a horizontal `arrow-left`
|
|
82
|
+
// reads as going back rather than answering.
|
|
83
|
+
'reply',
|
|
84
|
+
'forward',
|
|
60
85
|
];
|
package/dist/components/icons.js
CHANGED
|
@@ -250,4 +250,101 @@ export const ICONS = {
|
|
|
250
250
|
'M11 3h-1a4 4 0 0 0-3.874 3H6a4 4 0 1 0 0 8h8a4 4 0 0 0 .899-7.899A4 4 0 0 0 11 3M6.901 7l.193-.75A3 3 0 0 1 10 4h1c1.405 0 2.614.975 2.924 2.325l.14.61l.61.141A3.001 3.001 0 0 1 14 13H6a3 3 0 1 1 0-6z',
|
|
251
251
|
],
|
|
252
252
|
},
|
|
253
|
+
/* The mail set. Every one of these is a Pepicons Pencil glyph measured the
|
|
254
|
+
way the paragraph above describes: bounding box from `getBBox()`,
|
|
255
|
+
re-centred, grown to 78% fill, magnification clamped to 0.85x-1.45x of
|
|
256
|
+
its own 20-unit grid. `reply` and `forward` sit on the upper clamp, as
|
|
257
|
+
`close` does -- small drawings that would otherwise come out at twice
|
|
258
|
+
the ink weight of their neighbours. */
|
|
259
|
+
mail: {
|
|
260
|
+
view: '0.38 0.38 19.23 19.23',
|
|
261
|
+
d: [
|
|
262
|
+
'M17 4H3a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5v-11A.5.5 0 0 0 17 4M3.5 15V5h13v10z',
|
|
263
|
+
'm17.324 4.88l-7.045 6a.5.5 0 0 1-.65-.001l-6.956-6A.5.5 0 0 1 3 4h14a.5.5 0 0 1 .324.88M15.642 5H4.345l5.612 4.841z',
|
|
264
|
+
],
|
|
265
|
+
},
|
|
266
|
+
'mail-open': {
|
|
267
|
+
view: '-0.26 -0.26 20.51 20.51',
|
|
268
|
+
d: [
|
|
269
|
+
'M2.5 8a.5.5 0 0 1 .5.5V17h14V8.5a.5.5 0 0 1 1 0v9a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5',
|
|
270
|
+
'M3 5.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v4.67a.5.5 0 0 1-.223.416l-6.5 4.33a.5.5 0 0 1-.554 0l-6.5-4.33A.5.5 0 0 1 3 10.17zM4 6v3.902l6 3.997l6-3.997V6z',
|
|
271
|
+
'M9.723 2.084a.5.5 0 0 1 .554 0l4.5 3l-.554.832L10 3.101L5.777 5.916l-.554-.832zm7.131 5.062l1 1l-.708.708l-1-1zm-13 .708l-1 1l-.708-.708l1-1zM6.75 8A.25.25 0 0 1 7 7.75h6a.25.25 0 1 1 0 .5H7A.25.25 0 0 1 6.75 8m.5 2a.25.25 0 0 1 .25-.25h5a.25.25 0 1 1 0 .5h-5a.25.25 0 0 1-.25-.25',
|
|
272
|
+
],
|
|
273
|
+
},
|
|
274
|
+
pen: {
|
|
275
|
+
view: '1.02 -0.92 20.09 20.09',
|
|
276
|
+
d: [
|
|
277
|
+
'M3.944 11.79a.5.5 0 0 1 .141-.277L14.163 1.435a.5.5 0 0 1 .707 0l3.89 3.89a.5.5 0 0 1 0 .706L8.68 16.11a.5.5 0 0 1-.277.14l-4.595.706a.5.5 0 0 1-.57-.57zm.964.314l-.577 3.76l3.759-.578l9.609-9.608l-3.183-3.182z',
|
|
278
|
+
'm15.472 8.173l-3.537-3.53l.707-.708l3.536 3.53z',
|
|
279
|
+
],
|
|
280
|
+
},
|
|
281
|
+
send: {
|
|
282
|
+
view: '-2.09 -1.79 21.9 21.9',
|
|
283
|
+
d: [
|
|
284
|
+
'M.874 7.454L8.697 9.5l2.803 7.868a.5.5 0 0 0 .95-.026l4.746-16.085a.5.5 0 0 0-.655-.61L.826 6.502a.5.5 0 0 0 .048.952m1.783-.567l13.296-4.954l-4.027 13.652l-2.376-6.67a.5.5 0 0 0-.344-.315z',
|
|
285
|
+
'm16 1.293l.707.707L9 9.707L8.293 9z',
|
|
286
|
+
],
|
|
287
|
+
},
|
|
288
|
+
trash: {
|
|
289
|
+
view: '0.74 1.01 18.52 18.52',
|
|
290
|
+
d: [
|
|
291
|
+
'M8.5 14.999a.5.5 0 1 1-1 0v-6a.5.5 0 0 1 1 0zm2 0a.5.5 0 1 1-1 0v-6a.5.5 0 0 1 1 0zm2 0a.5.5 0 1 1-1 0v-6a.5.5 0 0 1 1 0zm-1-10.5h-3a1.501 1.501 0 0 1 3-.001',
|
|
292
|
+
'M4.5 4.999a.5.5 0 1 1 0-1h11a.5.5 0 0 1 0 1z',
|
|
293
|
+
'M14.5 5.5h-9A.5.5 0 0 0 5 6v11a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5M6 16.5v-10h8v10z',
|
|
294
|
+
],
|
|
295
|
+
},
|
|
296
|
+
paperclip: {
|
|
297
|
+
view: '-0.99 -0.41 21.47 21.47',
|
|
298
|
+
d: [
|
|
299
|
+
'M9.455 3.188a4 4 0 0 1 5.79 5.521l-5.349 5.608a2.25 2.25 0 0 1-3.258-3.106l4.485-4.706a.5.5 0 1 1 .724.69L7.362 11.9a1.25 1.25 0 0 0 1.81 1.726l5.349-5.608a3 3 0 1 0-4.342-4.141L5.348 8.944a.5.5 0 1 1-.724-.69z',
|
|
300
|
+
'M4.463 16.391c-.439-.419-.824-1.056-1.145-1.758c-.71-1.552-.17-3.383 1.097-4.712L8.8 5.325a.5.5 0 0 0-.724-.69L3.692 9.231c-1.455 1.526-2.214 3.783-1.284 5.818c.342.747.791 1.518 1.365 2.066c.566.54 1.342.947 2.094 1.251c2.095.849 4.337-.039 5.791-1.593l5.692-6.081a.5.5 0 1 0-.73-.684l-5.692 6.082c-1.267 1.354-3.089 1.996-4.686 1.35c-.704-.286-1.346-.636-1.779-1.049',
|
|
301
|
+
],
|
|
302
|
+
},
|
|
303
|
+
star: {
|
|
304
|
+
view: '-0.25 -0.51 20.51 20.51',
|
|
305
|
+
d: [
|
|
306
|
+
'M10 2a.5.5 0 0 1 .435.253l2.425 4.274l4.745 1.023a.5.5 0 0 1 .27.82l-3.253 3.667l.51 4.911a.5.5 0 0 1-.703.507L10 15.448l-4.429 2.007a.5.5 0 0 1-.704-.507l.51-4.91l-3.25-3.668a.5.5 0 0 1 .269-.82L7.14 6.527l2.425-4.274A.5.5 0 0 1 10 2m0 1.513L7.9 7.215a.5.5 0 0 1-.33.242l-4.128.89l2.83 3.191a.5.5 0 0 1 .123.384l-.443 4.263l3.842-1.74a.5.5 0 0 1 .412 0l3.842 1.74l-.443-4.263a.5.5 0 0 1 .123-.384l2.83-3.191l-4.128-.89a.5.5 0 0 1-.33-.242z',
|
|
307
|
+
],
|
|
308
|
+
},
|
|
309
|
+
'star-filled': {
|
|
310
|
+
view: '-1.03 -1.3 22.07 22.07',
|
|
311
|
+
d: [
|
|
312
|
+
'm10 15.97l-4.295 1.915a1 1 0 0 1-1.402-1.018l.494-4.677L1.65 8.698a1 1 0 0 1 .535-1.647l4.6-.976L9.134 2a1 1 0 0 1 1.732 0l2.35 4.074l4.6.976a1 1 0 0 1 .535 1.647l-3.148 3.494l.494 4.676a1 1 0 0 1-1.402 1.018z',
|
|
313
|
+
],
|
|
314
|
+
},
|
|
315
|
+
search: {
|
|
316
|
+
view: '1.62 1.66 15.87 15.87',
|
|
317
|
+
d: [
|
|
318
|
+
'M4.828 4.828A5 5 0 1 0 11.9 11.9a5 5 0 0 0-7.07-7.07m6.364 6.364a4 4 0 1 1-5.656-5.657a4 4 0 0 1 5.656 5.657',
|
|
319
|
+
'M11.192 12.627a1 1 0 0 1 1.415-1.414l2.828 2.829a1 1 0 1 1-1.414 1.414z',
|
|
320
|
+
],
|
|
321
|
+
},
|
|
322
|
+
more: {
|
|
323
|
+
view: '2.24 2.24 16.03 16.03',
|
|
324
|
+
d: [
|
|
325
|
+
'M14 10.25a1.25 1.25 0 1 1 2.5 0a1.25 1.25 0 0 1-2.5 0m-5 0a1.25 1.25 0 1 1 2.5 0a1.25 1.25 0 0 1-2.5 0m-5 0a1.249 1.249 0 1 1 2.5 0a1.25 1.25 0 1 1-2.5 0',
|
|
326
|
+
],
|
|
327
|
+
},
|
|
328
|
+
menu: {
|
|
329
|
+
view: '-0.26 0.24 20.51 20.51',
|
|
330
|
+
d: [
|
|
331
|
+
'M2 8.5a.5.5 0 0 1 .5-.5h11.308a.5.5 0 0 1 0 1H2.5a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m0 8a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m0 4a.5.5 0 0 1 .5-.5h11.308a.5.5 0 0 1 0 1H2.5a.5.5 0 0 1-.5-.5',
|
|
332
|
+
],
|
|
333
|
+
},
|
|
334
|
+
reply: {
|
|
335
|
+
view: '2.87 2.87 13.79 13.79',
|
|
336
|
+
d: [
|
|
337
|
+
'M5.948 12.145a.5.5 0 0 1-.453-.543l.471-5.186a.5.5 0 0 1 .996.09l-.471 5.186a.5.5 0 0 1-.543.453',
|
|
338
|
+
'M12.148 5.945a.5.5 0 0 1-.453.543L6.51 6.96a.5.5 0 0 1-.09-.996l5.185-.472a.5.5 0 0 1 .543.453',
|
|
339
|
+
'M6.647 6.643a.5.5 0 0 1 .707 0l6.535 6.536a.5.5 0 1 1-.707.707L6.646 7.351a.5.5 0 0 1 0-.708',
|
|
340
|
+
],
|
|
341
|
+
},
|
|
342
|
+
forward: {
|
|
343
|
+
view: '3.34 2.87 13.79 13.79',
|
|
344
|
+
d: [
|
|
345
|
+
'M7.852 5.952a.5.5 0 0 1 .543-.453l5.186.472a.5.5 0 0 1-.09.996l-5.186-.472a.5.5 0 0 1-.453-.543',
|
|
346
|
+
'M14.052 12.152a.5.5 0 0 1-.543-.453l-.472-5.185a.5.5 0 0 1 .996-.09l.472 5.185a.5.5 0 0 1-.453.543',
|
|
347
|
+
'M13.354 6.65a.5.5 0 0 1 0 .708l-6.536 6.535a.5.5 0 0 1-.707-.707l6.535-6.536a.5.5 0 0 1 .707 0',
|
|
348
|
+
],
|
|
349
|
+
},
|
|
253
350
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wtfalch/design",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "wtfalch's design system: themeable components on a fixed token vocabulary.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design-system",
|
|
@@ -24,9 +24,7 @@
|
|
|
24
24
|
},
|
|
25
25
|
"license": "MIT",
|
|
26
26
|
"type": "module",
|
|
27
|
-
"files": [
|
|
28
|
-
"dist"
|
|
29
|
-
],
|
|
27
|
+
"files": ["dist"],
|
|
30
28
|
"publishConfig": {
|
|
31
29
|
"access": "public"
|
|
32
30
|
},
|
|
@@ -52,12 +50,16 @@
|
|
|
52
50
|
"./tokens.css": "./dist/tokens.css",
|
|
53
51
|
"./styles.css": "./dist/styles/index.css"
|
|
54
52
|
},
|
|
55
|
-
"sideEffects": [
|
|
56
|
-
"*.css"
|
|
57
|
-
],
|
|
53
|
+
"sideEffects": ["*.css"],
|
|
58
54
|
"engines": {
|
|
59
55
|
"node": ">=22.0.0"
|
|
60
56
|
},
|
|
57
|
+
"scripts": {
|
|
58
|
+
"build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/fix-extensions.mjs && node scripts/copy-css.mjs && node scripts/build-products.mjs",
|
|
59
|
+
"prepack": "pnpm build",
|
|
60
|
+
"typecheck": "tsc --noEmit",
|
|
61
|
+
"test": "vitest run"
|
|
62
|
+
},
|
|
61
63
|
"peerDependencies": {
|
|
62
64
|
"react": "^19.0.0",
|
|
63
65
|
"react-dom": "^19.0.0"
|
|
@@ -75,10 +77,5 @@
|
|
|
75
77
|
"react-dom": "^19",
|
|
76
78
|
"typescript": "^5.9.0",
|
|
77
79
|
"vitest": "^4.1.6"
|
|
78
|
-
},
|
|
79
|
-
"scripts": {
|
|
80
|
-
"build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/fix-extensions.mjs && node scripts/copy-css.mjs && node scripts/build-products.mjs",
|
|
81
|
-
"typecheck": "tsc --noEmit",
|
|
82
|
-
"test": "vitest run"
|
|
83
80
|
}
|
|
84
|
-
}
|
|
81
|
+
}
|