@wtfalch/design 0.2.0 → 0.3.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.
@@ -0,0 +1,253 @@
1
+ /**
2
+ * The icon set, as data. The system's, shared by every product the way
3
+ * Button is; `Icon.tsx` keeps the reasons for the set and its weight.
4
+ *
5
+ * A glyph, with the viewBox it is drawn *at* rather than the one it shipped in.
6
+ *
7
+ * **This is the whole reason there is a `view` per icon.** Pepicons does not
8
+ * draw to a consistent optical size: measured against its own grid, `times`
9
+ * fills 40% of its box while `wifi-off` fills 90% and the circled alert glyphs
10
+ * fill 96%. Rendered at one `size` that is a 2.4x spread -- a close button half
11
+ * the size of the gear beside it, which reads as broken rather than as
12
+ * hand-drawn.
13
+ *
14
+ * So each `view` is the glyph's measured bounding box, re-centred and grown
15
+ * until the drawing fills 78% of it. Two deliberate exceptions:
16
+ *
17
+ * - `minimize` targets 55%. It is a bar, not a shape, and a bar stretched to
18
+ * 78% of the box stops reading as "minimise" and starts reading as a divider.
19
+ * - The scale is clamped to 0.85x-1.45x. Unclamped, `close` came out at 2x and
20
+ * its strokes went visibly heavier than every neighbour -- trading one
21
+ * inconsistency for another. Clamped, the set sits together at 14px.
22
+ *
23
+ * Numbers came from `getBBox()` on each glyph, not from eyeballing. If you add
24
+ * an icon, measure it the same way; a viewBox copied from the source file will
25
+ * be the wrong size and only slightly, which is the hardest kind to notice.
26
+ */
27
+ export const ICONS = {
28
+ chat: {
29
+ view: '-0.9 -0.9 21.79 21.79',
30
+ d: [
31
+ 'M1.5 12.102a2.5 2.5 0 0 0 2.5 2.5h.249c.307 1.238.741 1.898 1.455 1.898c.603 0 1.519-.62 2.94-1.898H16a2.5 2.5 0 0 0 2.5-2.5V6A2.5 2.5 0 0 0 16 3.5H4A2.5 2.5 0 0 0 1.5 6zm1 0V6A1.5 1.5 0 0 1 4 4.5h12A1.5 1.5 0 0 1 17.5 6v6.102a1.5 1.5 0 0 1-1.5 1.5H8.257l-.143.13C6.834 14.898 5.96 15.5 5.704 15.5c-.092 0-.35-.463-.567-1.5l-.083-.398H4a1.5 1.5 0 0 1-1.5-1.5',
32
+ ],
33
+ dots: [
34
+ [7, 9, 1],
35
+ [10, 9, 1],
36
+ [13, 9, 1],
37
+ ],
38
+ },
39
+ settings: {
40
+ view: '0.06 0.06 19.87 19.87',
41
+ d: [
42
+ 'M8.232 11.768A2.5 2.5 0 0 0 10 12.5c.672 0 1.302-.267 1.768-.732A2.5 2.5 0 0 0 12.5 10c0-.672-.267-1.302-.732-1.768A2.5 2.5 0 0 0 10 7.5c-.672 0-1.302.267-1.768.732A2.5 2.5 0 0 0 7.5 10c0 .672.267 1.302.732 1.768m2.829-.707c-.28.28-.657.439-1.061.439s-.78-.16-1.06-.44s-.44-.656-.44-1.06s.16-.78.44-1.06s.656-.44 1.06-.44s.78.16 1.06.44s.44.656.44 1.06s-.16.78-.44 1.06',
43
+ 'm14.216 3.773l-1.27.714a6.2 6.2 0 0 0-1.166-.48l-.47-1.414a.5.5 0 0 0-.474-.343H9.06a.5.5 0 0 0-.481.365l-.392 1.403a6.2 6.2 0 0 0-1.164.486L5.69 3.835a.5.5 0 0 0-.578.094L3.855 5.185a.5.5 0 0 0-.082.599l.714 1.27q-.3.556-.48 1.166l-1.414.47a.5.5 0 0 0-.343.474v1.777a.5.5 0 0 0 .365.481l1.403.392q.184.608.486 1.164l-.669 1.333a.5.5 0 0 0 .094.578l1.256 1.256a.5.5 0 0 0 .599.082l1.27-.714q.556.3 1.166.48l.47 1.414a.5.5 0 0 0 .474.343h1.777a.5.5 0 0 0 .481-.365l.392-1.403a6.2 6.2 0 0 0 1.164-.486l1.333.669a.5.5 0 0 0 .578-.093l1.256-1.257a.5.5 0 0 0 .082-.599l-.714-1.27q.3-.556.48-1.166l1.414-.47a.5.5 0 0 0 .343-.474V9.06a.5.5 0 0 0-.365-.481l-1.403-.392a6.2 6.2 0 0 0-.486-1.164l.669-1.333a.5.5 0 0 0-.093-.578l-1.257-1.256a.5.5 0 0 0-.599-.082m-1.024 1.724l1.184-.667l.733.733l-.627 1.25a.5.5 0 0 0 .019.482c.265.44.464.918.59 1.418a.5.5 0 0 0 .35.36l1.309.366v1.037l-1.327.44a.5.5 0 0 0-.328.354a5.2 5.2 0 0 1-.585 1.42a.5.5 0 0 0-.007.502l.667 1.184l-.733.733l-1.25-.627a.5.5 0 0 0-.482.019c-.44.265-.918.464-1.418.59a.5.5 0 0 0-.36.35l-.366 1.309H9.525l-.44-1.327a.5.5 0 0 0-.355-.328a5.2 5.2 0 0 1-1.42-.585a.5.5 0 0 0-.502-.007l-1.184.667l-.733-.733l.627-1.25a.5.5 0 0 0-.019-.482a5.2 5.2 0 0 1-.59-1.418a.5.5 0 0 0-.35-.36l-1.309-.366V9.525l1.327-.44a.5.5 0 0 0 .327-.355c.125-.5.323-.979.586-1.42a.5.5 0 0 0 .007-.502L4.83 5.624l.733-.733l1.25.627a.5.5 0 0 0 .482-.019c.44-.265.918-.464 1.418-.59a.5.5 0 0 0 .36-.35l.366-1.309h1.037l.44 1.327a.5.5 0 0 0 .354.327c.5.125.979.323 1.42.586a.5.5 0 0 0 .502.007',
44
+ ],
45
+ },
46
+ refresh: {
47
+ view: '-1.16 -1.07 21.93 21.93',
48
+ d: [
49
+ 'M5.254 14.596a.5.5 0 0 1 .707-.707A5.5 5.5 0 0 0 15.35 10a.5.5 0 0 1 .999.001a6.5 6.5 0 0 1-11.096 4.596',
50
+ 'M13.131 12.416a.5.5 0 0 1-.555-.832l3-2a.5.5 0 1 1 .555.832z',
51
+ 'M18.266 12.723a.5.5 0 1 1-.832.554l-2-3a.5.5 0 0 1 .832-.554zm-3.912-7.518a.5.5 0 0 1-.708.707a5.5 5.5 0 0 0-9.389 3.89a.5.5 0 0 1-1-.001a6.5 6.5 0 0 1 11.097-4.596',
52
+ 'M6.476 7.385a.5.5 0 0 1 .555.832l-3 2a.5.5 0 1 1-.555-.832z',
53
+ 'M1.341 7.078a.5.5 0 1 1 .832-.554l2 3a.5.5 0 0 1-.832.554z',
54
+ ],
55
+ },
56
+ minimize: { view: '0 0 20 20', d: ['M5 10.5a.5.5 0 0 1 0-1h10a.5.5 0 0 1 0 1z'] },
57
+ code: {
58
+ view: '-0.47 -0.48 20.94 20.94',
59
+ d: [
60
+ 'M1.962 9.666a.5.5 0 0 1 .706-.038l3.333 3a.5.5 0 1 1-.669.744l-3.333-3a.5.5 0 0 1-.037-.706',
61
+ 'M6.038 6.666a.5.5 0 0 1-.037.706l-3.333 3a.5.5 0 0 1-.67-.744l3.334-3a.5.5 0 0 1 .706.038m12 3a.5.5 0 0 1-.037.706l-3.333 3a.5.5 0 0 1-.67-.744l3.334-3a.5.5 0 0 1 .706.038',
62
+ 'M13.962 6.666a.5.5 0 0 1 .706-.038l3.333 3a.5.5 0 0 1-.669.744l-3.333-3a.5.5 0 0 1-.037-.706m-2.33-2.648a.5.5 0 0 1 .35.614l-3 11a.5.5 0 0 1-.964-.264l3-11a.5.5 0 0 1 .614-.35',
63
+ ],
64
+ },
65
+ wifi: {
66
+ view: '-0.26 -0.06 20.51 20.51',
67
+ d: [
68
+ 'M13.348 11.641a.5.5 0 0 1-.696.718a2 2 0 0 0-.136-.12a3 3 0 0 0-.753-.424A4.8 4.8 0 0 0 10 11.5c-1.022 0-1.951.285-2.516.739q-.073.06-.136.12a.5.5 0 0 1-.696-.718q.097-.094.206-.182c.754-.606 1.905-.959 3.142-.959c.765 0 1.5.134 2.132.385c.385.153.726.346 1.01.574q.109.089.206.182m2.508-2.601a.5.5 0 1 1-.712.7a5 5 0 0 0-.35-.32a5 5 0 0 0-.399-.298a6.6 6.6 0 0 0-1.449-.731a8 8 0 0 0-1.126-.319a9 9 0 0 0-1.205-.162a9.3 9.3 0 0 0-1.839.061a9 9 0 0 0-1.172.242a8 8 0 0 0-1.071.39a6.6 6.6 0 0 0-.928.519q-.21.143-.399.298q-.186.155-.35.32a.5.5 0 0 1-.712-.7q.198-.202.424-.39q.225-.186.474-.355a7 7 0 0 1 1.076-.602a8 8 0 0 1 1.215-.443a9 9 0 0 1 1.31-.27A10 10 0 0 1 10 6.89a10 10 0 0 1 1.357.09a10 10 0 0 1 1.31.27a9 9 0 0 1 1.215.443a7.6 7.6 0 0 1 1.076.602q.249.17.474.355q.226.188.424.39',
69
+ 'M17.873 6.555a.5.5 0 1 1-.746.667a7 7 0 0 0-.492-.496a8 8 0 0 0-.557-.46a9 9 0 0 0-1.29-.794a9.5 9.5 0 0 0-1.484-.594a10.6 10.6 0 0 0-1.617-.366A11.4 11.4 0 0 0 10 4.389a12 12 0 0 0-1.687.123a11 11 0 0 0-1.617.366a10 10 0 0 0-1.483.595a9 9 0 0 0-.673.374a8 8 0 0 0-.618.42q-.294.22-.557.46q-.263.239-.492.495a.5.5 0 1 1-.746-.667q.264-.294.564-.568t.632-.521q.332-.249.694-.471a10 10 0 0 1 1.545-.775a11 11 0 0 1 1.709-.53a12 12 0 0 1 1.808-.268a12.7 12.7 0 0 1 2.754.1a12 12 0 0 1 1.767.401a11 11 0 0 1 1.635.656q.387.194.749.416q.36.222.693.47q.333.249.632.522q.3.274.564.568M11.75 15.25a1.75 1.75 0 1 1-3.5 0a1.75 1.75 0 0 1 3.5 0',
70
+ ],
71
+ },
72
+ 'wifi-off': {
73
+ view: '-1.54 -1.54 23.08 23.08',
74
+ d: [
75
+ 'M13.348 11.641a.5.5 0 0 1-.696.718a2 2 0 0 0-.136-.12a3 3 0 0 0-.753-.424A4.8 4.8 0 0 0 10 11.5c-1.022 0-1.951.285-2.516.739q-.073.06-.136.12a.5.5 0 0 1-.696-.718q.097-.094.206-.182c.754-.606 1.905-.959 3.142-.959c.765 0 1.5.134 2.132.385c.385.153.726.346 1.01.574q.109.089.206.182m2.508-2.601a.5.5 0 1 1-.712.7a5 5 0 0 0-.35-.32a5 5 0 0 0-.399-.298a6.6 6.6 0 0 0-1.449-.731a8 8 0 0 0-1.126-.319a9 9 0 0 0-1.205-.162a9.3 9.3 0 0 0-1.839.061a9 9 0 0 0-1.172.242a8 8 0 0 0-1.071.39a6.6 6.6 0 0 0-.928.519q-.21.143-.399.298q-.186.155-.35.32a.5.5 0 0 1-.712-.7q.198-.202.424-.39q.225-.186.474-.355a7 7 0 0 1 1.076-.602a8 8 0 0 1 1.215-.443a9 9 0 0 1 1.31-.27A10 10 0 0 1 10 6.89a10 10 0 0 1 1.357.09a10 10 0 0 1 1.31.27a9 9 0 0 1 1.215.443a7.6 7.6 0 0 1 1.076.602q.249.17.474.355q.226.188.424.39',
76
+ 'M17.873 6.555a.5.5 0 1 1-.746.667a7 7 0 0 0-.492-.496a8 8 0 0 0-.557-.46a9 9 0 0 0-1.29-.794a9.5 9.5 0 0 0-1.484-.594a10.6 10.6 0 0 0-1.617-.366A11.4 11.4 0 0 0 10 4.389a12 12 0 0 0-1.687.123a11 11 0 0 0-1.617.366a10 10 0 0 0-1.483.595a9 9 0 0 0-.673.374a8 8 0 0 0-.618.42q-.294.22-.557.46q-.263.239-.492.495a.5.5 0 1 1-.746-.667q.264-.294.564-.568t.632-.521q.332-.249.694-.471a10 10 0 0 1 1.545-.775a11 11 0 0 1 1.709-.53a12 12 0 0 1 1.808-.268a12.7 12.7 0 0 1 2.754.1a12 12 0 0 1 1.767.401a11 11 0 0 1 1.635.656q.387.194.749.416q.36.222.693.47q.333.249.632.522q.3.274.564.568M11.75 15.25a1.75 1.75 0 1 1-3.5 0a1.75 1.75 0 0 1 3.5 0',
77
+ 'M1.15 1.878a.514.514 0 0 1 .728-.727l16.971 16.971a.514.514 0 0 1-.727.727z',
78
+ ],
79
+ },
80
+ check: {
81
+ view: '2.44 2.94 14.12 14.12',
82
+ d: [
83
+ 'm14.937 5.743l-5 9c-.324.583-1.198.097-.874-.486l5-9c.324-.583 1.198-.097.874.486',
84
+ 'm4.812 10.11l5 4c.52.416-.104 1.197-.624.78l-5-4c-.52-.416.104-1.197.624-.78',
85
+ ],
86
+ },
87
+ close: {
88
+ view: '3.1 3.1 13.79 13.79',
89
+ d: [
90
+ 'M6.854 13.854a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708.708z',
91
+ 'M6.146 6.854a.5.5 0 1 1 .708-.708l7 7a.5.5 0 0 1-.708.708z',
92
+ ],
93
+ },
94
+ info: {
95
+ view: '-2.29 -2.29 30.59 30.59',
96
+ d: [
97
+ 'M13.25 10.75a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 .75-.75',
98
+ 'M14.5 7.25a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0',
99
+ 'M13 24.5c6.351 0 11.5-5.149 11.5-11.5S19.351 1.5 13 1.5S1.5 6.649 1.5 13S6.649 24.5 13 24.5m0 1c6.904 0 12.5-5.596 12.5-12.5S19.904.5 13 .5S.5 6.096.5 13S6.096 25.5 13 25.5',
100
+ ],
101
+ },
102
+ warning: {
103
+ view: '-2.29 -2.29 30.59 30.59',
104
+ d: [
105
+ 'M13.25 5.25A.75.75 0 0 1 14 6v9a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75',
106
+ 'M14.5 19.25a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0',
107
+ 'M13 24.5c6.351 0 11.5-5.149 11.5-11.5S19.351 1.5 13 1.5S1.5 6.649 1.5 13S6.649 24.5 13 24.5m0 1c6.904 0 12.5-5.596 12.5-12.5S19.904.5 13 .5S.5 6.096.5 13S6.096 25.5 13 25.5',
108
+ ],
109
+ },
110
+ error: {
111
+ view: '0.38 0.38 19.23 19.23',
112
+ d: [
113
+ 'M10 3.5a6.5 6.5 0 1 0 0 13a6.5 6.5 0 0 0 0-13M2.5 10a7.5 7.5 0 1 1 15 0a7.5 7.5 0 0 1-15 0',
114
+ 'M15.304 4.697a.5.5 0 0 1 0 .707l-9.9 9.9a.5.5 0 1 1-.707-.707l9.9-9.9a.5.5 0 0 1 .707 0',
115
+ ],
116
+ },
117
+ expand: {
118
+ view: '2.95 2.95 14.1 14.1',
119
+ d: [
120
+ 'M11.354 9.354a.5.5 0 0 1-.708-.708l4-4a.5.5 0 0 1 .708.708zm-6 6a.5.5 0 0 1-.708-.708l4-4a.5.5 0 0 1 .708.708z',
121
+ 'M5 15.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1z',
122
+ 'M5.5 15a.5.5 0 0 1-1 0v-4a.5.5 0 0 1 1 0zm10-6a.5.5 0 0 1-1 0V5a.5.5 0 0 1 1 0z',
123
+ 'M11 5.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1z',
124
+ ],
125
+ },
126
+ download: {
127
+ view: '-0.26 0.25 20.52 20.52',
128
+ d: [
129
+ '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',
130
+ 'M10 10a.5.5 0 0 1 1 0v7.5a.5.5 0 0 1-1 0z',
131
+ 'M12.688 15.11a.5.5 0 0 1 .624.78l-2.5 2a.5.5 0 1 1-.624-.78z',
132
+ 'M7.688 15.89a.5.5 0 0 1 .624-.78l2.5 2a.5.5 0 1 1-.624.78z',
133
+ ],
134
+ },
135
+ image: {
136
+ view: '-0.9 -0.9 21.79 21.79',
137
+ d: [
138
+ 'M8 8a1 1 0 1 0 0-2a1 1 0 0 0 0 2m0 1a2 2 0 1 0 0-4a2 2 0 0 0 0 4',
139
+ 'M7.5 10.678L5.59 13.25H7.5l1.91 1H5.59a1 1 0 0 1-.802-1.596l1.909-2.572a1 1 0 0 1 1.606 0l.955 1.286l-.803.596z',
140
+ 'M14.257 13.25L11.25 9.778L8.243 13.25zm-2.251-4.127a1 1 0 0 0-1.512 0l-3.007 3.472a1 1 0 0 0 .756 1.655h6.014a1 1 0 0 0 .756-1.655z',
141
+ 'M17 2.5H3a.5.5 0 0 0-.5.5v14a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5m-14-1A1.5 1.5 0 0 0 1.5 3v14A1.5 1.5 0 0 0 3 18.5h14a1.5 1.5 0 0 0 1.5-1.5V3A1.5 1.5 0 0 0 17 1.5z',
142
+ ],
143
+ },
144
+ bolt: {
145
+ view: '-0.26 0.24 20.52 20.52',
146
+ d: [
147
+ 'M15 8.5h-3.813l2.273-5.303A.5.5 0 0 0 13 2.5H8a.5.5 0 0 0-.46.303l-3 7A.5.5 0 0 0 5 10.5h2.474l-2.938 7.314c-.2.497.417.918.807.55l5.024-4.743l4.958-4.241A.5.5 0 0 0 15 8.5m-4.571 1h3.217l-3.948 3.378l-3.385 3.195l2.365-5.887a.5.5 0 0 0-.464-.686H5.758l2.572-6h3.912L9.969 8.803a.5.5 0 0 0 .46.697',
148
+ ],
149
+ },
150
+ speaker: {
151
+ view: '-0.76 -1.26 20.51 20.51',
152
+ d: [
153
+ 'M9.672 2.123L5.399 5.84H2a.5.5 0 0 0-.5.5v5.2a.5.5 0 0 0 .5.5h3.295l4.375 3.835a.5.5 0 0 0 .83-.376v-13a.5.5 0 0 0-.828-.377M5.884 6.745L9.5 3.598v10.799L6.014 11.34a.5.5 0 0 0-.458-.3H2.5v-4.2h2.894a.49.49 0 0 0 .49-.096',
154
+ 'M13.326 11.88a.5.5 0 0 1-.652-.76q.06-.05.117-.11c.157-.162.295-.366.407-.602c.195-.409.302-.896.302-1.408c0-.817-.273-1.558-.709-2.01a2 2 0 0 0-.117-.11a.5.5 0 0 1 .652-.76q.096.083.185.176c.624.647.989 1.639.989 2.704c0 .66-.14 1.293-.399 1.838c-.157.33-.356.624-.59.866q-.09.093-.185.175',
155
+ 'M14.274 14.918a.5.5 0 0 1-.548-.836a6.3 6.3 0 0 0 1.359-1.208a6.1 6.1 0 0 0 .942-1.537A5.9 5.9 0 0 0 16.5 9a6 6 0 0 0-.267-1.773a6 6 0 0 0-.783-1.62a6.1 6.1 0 0 0-1.232-1.33a6 6 0 0 0-.492-.359a.5.5 0 0 1 .548-.836a7.3 7.3 0 0 1 2.002 1.961a7.1 7.1 0 0 1 .913 1.889A7 7 0 0 1 17.5 9a7 7 0 0 1-.311 2.068a7 7 0 0 1-1.338 2.45a7.2 7.2 0 0 1-1.577 1.4',
156
+ ],
157
+ },
158
+ mic: {
159
+ view: '0.39 -0.12 19.23 19.23',
160
+ d: [
161
+ 'M7.75 4.25a2.25 2.25 0 0 1 4.5 0v3.5a2.25 2.25 0 0 1-4.5 0z',
162
+ 'M10 17c-2.48 0-4-.217-4-1s1.52-1 4-1s4 .217 4 1s-1.52 1-4 1',
163
+ 'M9.5 12.5h1V16h-1z',
164
+ 'M14 7.5a.5.5 0 0 1 1 0v1.65c0 2.421-2.254 4.35-5 4.35s-5-1.929-5-4.35V7.5a.5.5 0 0 1 1 0v1.65c0 1.831 1.775 3.35 4 3.35s4-1.519 4-3.35z',
165
+ ],
166
+ },
167
+ back: {
168
+ view: '2.96 2.95 14.09 14.09',
169
+ d: [
170
+ 'M8.653 14.384a.5.5 0 0 1-.704-.064l-3.333-4a.5.5 0 0 1 .768-.64l3.333 4a.5.5 0 0 1-.064.704',
171
+ 'M8.653 5.616a.5.5 0 0 1 .064.704l-3.333 4a.5.5 0 0 1-.768-.64l3.333-4a.5.5 0 0 1 .704-.064',
172
+ 'M5 10a.5.5 0 0 1 .5-.5H15a.5.5 0 0 1 0 1H5.5A.5.5 0 0 1 5 10',
173
+ ],
174
+ },
175
+ spinner: {
176
+ view: '2.03 1.03 17.93 17.93',
177
+ d: [
178
+ 'M13.375 5.038a.5.5 0 0 1-.564.827A5 5 0 1 0 15 10a.5.5 0 0 1 1 0a6 6 0 1 1-2.626-4.962',
179
+ 'M12.769 11.585a.5.5 0 1 1-.539-.842l3.482-2.227a.5.5 0 1 1 .539.842z',
180
+ 'M17.947 12.114a.5.5 0 0 1-.913.407l-1.509-3.38a.5.5 0 1 1 .914-.408z',
181
+ ],
182
+ },
183
+ folder: {
184
+ view: '-0.26 -0.01 20.51 20.51',
185
+ d: [
186
+ 'M15.5 5.5h-5.281L9.51 4.26A2.5 2.5 0 0 0 7.34 3H4.5A2.5 2.5 0 0 0 2 5.5V15a2.5 2.5 0 0 0 2.5 2.5h11A2.5 2.5 0 0 0 18 15V8a2.5 2.5 0 0 0-2.5-2.5m-11 11A1.5 1.5 0 0 1 3 15V5.5A1.5 1.5 0 0 1 4.5 4h2.84a1.5 1.5 0 0 1 1.302.756l.852 1.492a.5.5 0 0 0 .435.252H15.5A1.5 1.5 0 0 1 17 8v7a1.5 1.5 0 0 1-1.5 1.5z',
187
+ ],
188
+ },
189
+ book: {
190
+ view: '-1.76 -1.76 23.53 23.53',
191
+ d: [
192
+ 'M10.08 4.304L2.244 3.019A1.5 1.5 0 0 0 .5 4.5v9.738a1.5 1.5 0 0 0 1.268 1.482l8.155 1.275a.5.5 0 0 0 .577-.494V4.797a.5.5 0 0 0-.42-.493m-8-.298L9.5 5.222v10.694L1.923 14.73a.5.5 0 0 1-.423-.493V4.5a.5.5 0 0 1 .58-.494',
193
+ 'M18 3a1.5 1.5 0 0 0-.243.02L9.92 4.303a.5.5 0 0 0-.419.493V16.5a.5.5 0 0 0 .577.494l8.155-1.275a1.5 1.5 0 0 0 1.268-1.482V4.5A1.5 1.5 0 0 0 18 3m.077 11.73L10.5 15.917V5.222l7.42-1.216a.5.5 0 0 1 .58.494v9.737a.5.5 0 0 1-.423.493',
194
+ ],
195
+ },
196
+ eye: {
197
+ view: '-0.9 -1.4 21.8 21.8',
198
+ d: [
199
+ 'M10 16c4.658 0 8.5-2.161 8.5-5S14.658 6 10 6s-8.5 2.161-8.5 5s3.842 5 8.5 5m0-9c4.179 0 7.5 1.868 7.5 4s-3.321 4-7.5 4s-7.5-1.868-7.5-4S5.821 7 10 7',
200
+ 'M9.5 3.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0zm4.01.402a.5.5 0 0 1 .98.196l-.5 2.5a.5.5 0 0 1-.98-.196zm-7.02 0a.5.5 0 0 0-.98.196l.5 2.5a.5.5 0 0 0 .98-.196zM2.429 5.243a.5.5 0 0 0-.858.514l1.5 2.5a.5.5 0 0 0 .858-.514zm15.142 0a.5.5 0 1 1 .858.514l-1.5 2.5a.5.5 0 1 1-.858-.514zM13 10.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0',
201
+ ],
202
+ },
203
+ /* The same eye with a line through it. Pepicons' `eye-off`, but drawn from
204
+ THIS file's `eye` plus the slash rather than copied whole: the set has
205
+ redrawn its lashes since the open eye was taken, and a pair that toggles
206
+ in one button must differ by the slash alone or the eye appears to jump.
207
+ For the same reason it shares `eye`'s `view` instead of a measured one --
208
+ the slash sits inside that box (0.8..18.5 on both axes), so nothing is
209
+ clipped, and the body of the eye does not move when the state does. */
210
+ 'eye-off': {
211
+ view: '-0.9 -1.4 21.8 21.8',
212
+ d: [
213
+ 'M10 16c4.658 0 8.5-2.161 8.5-5S14.658 6 10 6s-8.5 2.161-8.5 5s3.842 5 8.5 5m0-9c4.179 0 7.5 1.868 7.5 4s-3.321 4-7.5 4s-7.5-1.868-7.5-4S5.821 7 10 7',
214
+ 'M9.5 3.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0zm4.01.402a.5.5 0 0 1 .98.196l-.5 2.5a.5.5 0 0 1-.98-.196zm-7.02 0a.5.5 0 0 0-.98.196l.5 2.5a.5.5 0 0 0 .98-.196zM2.429 5.243a.5.5 0 0 0-.858.514l1.5 2.5a.5.5 0 0 0 .858-.514zm15.142 0a.5.5 0 1 1 .858.514l-1.5 2.5a.5.5 0 1 1-.858-.514zM13 10.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0',
215
+ 'M1.15 1.878a.514.514 0 0 1 .728-.727l16.971 16.971a.514.514 0 0 1-.727.727z',
216
+ ],
217
+ },
218
+ palette: {
219
+ view: '-2.13 -2.1 23.53 23.53',
220
+ d: [
221
+ 'M14.725 13.334c.97-3.623-1.336-7.377-5.135-8.395C5.323 3.795-.725 6.762.544 10.35c.383 1.084 1.134 1.341 2.682 1.363l.108.002c1.1.013 1.471.1 1.678.436c.214.348.216.756.054 1.788c-.067.422-.088.569-.113.794c-.145 1.3.067 2.274.89 3.16c2.584 2.784 7.788-.48 8.882-4.56M1.486 10.017c-.908-2.57 4.217-5.084 7.845-4.112c3.277.878 5.252 4.093 4.428 7.17c-.924 3.446-5.287 6.182-7.183 4.14c-.594-.64-.745-1.333-.63-2.37c.024-.205.044-.344.108-.75c.2-1.275.197-1.836-.19-2.467c-.465-.756-1.059-.894-2.517-.912l-.107-.002c-1.159-.016-1.562-.154-1.754-.697',
222
+ 'M4.75 9.5a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5m4 0a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5m2.5 3a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5M9.75 16a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5m3.62-12.395a1 1 0 0 1 1.371.443l4.093 8.4a.652.652 0 0 1-1.149.611l-4.708-8.07a1 1 0 0 1 .394-1.384',
223
+ 'M11.538 3.484c.486.915 1.305 1.171 2.097.75c.791-.42 1.038-1.243.551-2.158C13.63 1.028 12.438.078 11.648.497s-.668 1.939-.11 2.987m.882-.47a3.2 3.2 0 0 1-.32-1.137a2 2 0 0 1 .018-.496l.018.009c.05.024.205.096.403.254c.302.241.602.596.764.901c.229.43.164.646-.138.807c-.3.16-.516.092-.745-.337',
224
+ ],
225
+ },
226
+ stars: {
227
+ view: '-1.95 -1.76 23.53 23.53',
228
+ d: [
229
+ 'M9 .5a.5.5 0 0 1 .479.354l1.928 6.333l5.765 2.107a.5.5 0 0 1 .013.934l-5.727 2.275l-1.979 6.64a.5.5 0 0 1-.958 0l-1.979-6.64l-5.727-2.275a.5.5 0 0 1 .013-.934l5.765-2.107L8.522.854A.5.5 0 0 1 9 .5m0 2.216l-1.523 5a.5.5 0 0 1-.307.324L2.403 9.784l4.734 1.88a.5.5 0 0 1 .294.322l1.57 5.264l1.568-5.264a.5.5 0 0 1 .294-.322l4.734-1.88l-4.767-1.742a.5.5 0 0 1-.307-.324z',
230
+ 'M16.75 19.12c-.1 0-.19-.08-.2-.18c-.18-1.82-.32-2.4-1.99-2.56c-.1-.01-.18-.1-.18-.2s.08-.19.18-.2c1.71-.16 1.81-.6 1.99-2.42c0-.1.1-.18.2-.18s.19.08.2.18c.18 1.82.29 2.26 1.99 2.42c.1.01.18.1.18.2s-.08.19-.18.2c-1.68.16-1.81.74-1.99 2.57c0 .1-.09.18-.2.18z',
231
+ ],
232
+ },
233
+ wrench: {
234
+ view: '-0.17 -0.74 21.07 21.07',
235
+ d: [
236
+ 'M11.876 7.574a3 3 0 0 0-.384-.382c.295-1.338-.066-2.802-1.014-3.93c-1.182-1.41-3.03-2-4.668-1.523a.5.5 0 0 0-.243.801l1.741 2.076a.5.5 0 0 1-.061.704l-.581.488a.5.5 0 0 1-.705-.062L4.22 3.671a.5.5 0 0 0-.832.1c-.755 1.531-.494 3.453.689 4.862c.935 1.114 2.29 1.724 3.645 1.683q.138.251.324.471l5.302 6.32a2.5 2.5 0 1 0 3.83-3.214zm-7.033.416c-.735-.875-1.016-1.99-.82-2.997l1.172 1.396a1.5 1.5 0 0 0 2.113.185l.582-.488a1.5 1.5 0 0 0 .184-2.113L6.903 2.577c1.025-.02 2.075.452 2.81 1.327c.813.97 1.077 2.24.732 3.34a.5.5 0 0 0 .208.571a2 2 0 0 1 .457.401l5.303 6.32a1.5 1.5 0 1 1-2.299 1.928l-5.302-6.32a2 2 0 0 1-.323-.538a.5.5 0 0 0-.522-.31c-1.133.133-2.32-.348-3.124-1.306',
237
+ ],
238
+ },
239
+ file: {
240
+ view: '-1.54 -1.54 23.08 23.08',
241
+ d: [
242
+ 'M6.5 12a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1zm0 3a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1z',
243
+ 'M11.185 1H4.5A1.5 1.5 0 0 0 3 2.5v15A1.5 1.5 0 0 0 4.5 19h11a1.5 1.5 0 0 0 1.5-1.5V7.202a1.5 1.5 0 0 0-.395-1.014l-4.314-4.702A1.5 1.5 0 0 0 11.185 1M4 2.5a.5.5 0 0 1 .5-.5h6.685a.5.5 0 0 1 .369.162l4.314 4.702a.5.5 0 0 1 .132.338V17.5a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5z',
244
+ 'M11 7h5.5a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5v-6a.5.5 0 0 1 1 0z',
245
+ ],
246
+ },
247
+ cloud: {
248
+ view: '-0.26 -1.76 20.52 20.52',
249
+ d: [
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
+ ],
252
+ },
253
+ };
package/dist/index.d.ts CHANGED
@@ -17,8 +17,10 @@
17
17
  * that shipped. They are worth more than the code around them.
18
18
  */
19
19
  export { default as Brand } from './components/Brand';
20
- export { BRAND_NAMES } from './components/brandMarks';
21
- export type { BrandName } from './components/brandMarks';
20
+ /** Every product's mark by name, and the path itself for an icon cut from
21
+ * the same drawing. */
22
+ export { BRAND_MARKS, BRAND_NAMES } from './components/brandMarks';
23
+ export type { BrandName, FillMark, Mark, StrokeMark } from './components/brandMarks';
22
24
  export { default as Button } from './components/Button';
23
25
  export type { Props as ButtonProps } from './components/Button';
24
26
  export { default as Callout } from './components/Callout';
@@ -70,5 +72,13 @@ export type { IllustrationName } from './illustrations';
70
72
  export { useTrapFocus } from './hooks/useTrapFocus';
71
73
  export { DEFAULT_THEME, DERIVED_TOKENS, FIXED_TOKENS, THEMES, TOKEN_KEYS, applyTheme, defineTheme, isTheme, resolvedTokens, } from './themes';
72
74
  export type { Theme, ThemeTokens } from './themes';
75
+ /** A theme as the rule a consumer ships for first paint, generated so it
76
+ * cannot drift from the object; and a product's whole stylesheet the same way. */
77
+ export { productCss, productStylesheet, themeCss, themeId } from './themes/css';
73
78
  /** The measurement behind the contrast rule, for a theme that is yours. */
74
79
  export { luminance, ratio } from './contrast';
80
+ /** The products: the layer between the system and a theme. Each also ships
81
+ * as its own entry, `@wtfalch/design/<name>` and `<name>.css`, where `Brand`,
82
+ * `THEMES` and `applyTheme` are that product's. */
83
+ export { PRODUCTS, bindProduct, defineProduct, productTheme } from './products';
84
+ export type { Product } from './products';
package/dist/index.js CHANGED
@@ -17,7 +17,9 @@
17
17
  * that shipped. They are worth more than the code around them.
18
18
  */
19
19
  export { default as Brand } from './components/Brand';
20
- export { BRAND_NAMES } from './components/brandMarks';
20
+ /** Every product's mark by name, and the path itself for an icon cut from
21
+ * the same drawing. */
22
+ export { BRAND_MARKS, BRAND_NAMES } from './components/brandMarks';
21
23
  export { default as Button } from './components/Button';
22
24
  export { default as Callout } from './components/Callout';
23
25
  export { default as Card } from './components/Card';
@@ -62,5 +64,12 @@ export { ILLUSTRATIONS } from './illustrations';
62
64
  * without a trap, which is what this exists to stop happening again. */
63
65
  export { useTrapFocus } from './hooks/useTrapFocus';
64
66
  export { DEFAULT_THEME, DERIVED_TOKENS, FIXED_TOKENS, THEMES, TOKEN_KEYS, applyTheme, defineTheme, isTheme, resolvedTokens, } from './themes';
67
+ /** A theme as the rule a consumer ships for first paint, generated so it
68
+ * cannot drift from the object; and a product's whole stylesheet the same way. */
69
+ export { productCss, productStylesheet, themeCss, themeId } from './themes/css';
65
70
  /** The measurement behind the contrast rule, for a theme that is yours. */
66
71
  export { luminance, ratio } from './contrast';
72
+ /** The products: the layer between the system and a theme. Each also ships
73
+ * as its own entry, `@wtfalch/design/<name>` and `<name>.css`, where `Brand`,
74
+ * `THEMES` and `applyTheme` are that product's. */
75
+ export { PRODUCTS, bindProduct, defineProduct, productTheme } from './products';
@@ -0,0 +1,69 @@
1
+ import type { ComponentProps } from 'react';
2
+ import BrandDefault from '../components/Brand';
3
+ import type { BrandName } from '../components/brandMarks';
4
+ import { type Theme, type ThemeTokens } from '../themes';
5
+ /**
6
+ * A product: the layer between the system and a theme.
7
+ *
8
+ * Three layers, each falling back to the one under it. The system is the
9
+ * components, the base values in `tokens.css`, the shared icons and
10
+ * illustrations. The product is its mark and its identity -- the tokens that
11
+ * make it itself under every theme: font, shape, density -- plus the themes it
12
+ * offers and the one it wears until somebody picks. The theme is a palette and
13
+ * a colour scheme, and anything else it deliberately changes.
14
+ *
15
+ * The middle layer is what lets a theme be shared between products. A theme
16
+ * is a sparse map, and what it is sparse *over* decides what a silent token
17
+ * shows: over the base it shows tf, over the product it shows the product.
18
+ * Before this layer valet's two palettes each restated valet's font and
19
+ * corners, because there was nowhere else to put them.
20
+ *
21
+ * A site is one product, so each ships as one entry -- `@wtfalch/design/valet`
22
+ * and `valet.css` -- where `Brand`, `THEMES` and `applyTheme` are the
23
+ * product's. This module is the neutral view of all of them, which is what the
24
+ * gallery reads.
25
+ */
26
+ export interface Product {
27
+ /** The id: the mark's row in `brandMarks.ts` and the stem of the CSS entry. */
28
+ name: BrandName;
29
+ /** On `:root` in the product's stylesheet, and under every palette when one
30
+ * is applied. Empty for a product the base values already describe. */
31
+ identity: Partial<ThemeTokens>;
32
+ /** Keyed by the id `applyTheme` takes. */
33
+ themes: Record<string, Theme>;
34
+ /** Worn until somebody picks; written on `:root` when no `data-theme` is set. */
35
+ defaultTheme: string;
36
+ }
37
+ /** Every product, by the name of its mark. */
38
+ export declare const PRODUCTS: {
39
+ readonly tf: Product;
40
+ readonly valet: Product;
41
+ };
42
+ /** Declare a product, so a default that is not a theme or a key `applyTheme`
43
+ * would not use is an error where it is written. */
44
+ export declare function defineProduct(product: Product): Product;
45
+ /**
46
+ * A theme as the product wears it: the palette over the identity.
47
+ *
48
+ * An id the product does not offer resolves to the product's default rather
49
+ * than the package's, so a valet setting that remembers a theme valet has
50
+ * since dropped comes up as valet, not as tf.
51
+ */
52
+ export declare function productTheme(product: Product, theme?: string | Theme): Theme;
53
+ type BrandProps = ComponentProps<typeof BrandDefault>;
54
+ /**
55
+ * The package, as one product.
56
+ *
57
+ * `Brand` defaults to the product's mark and still takes a name. `applyTheme`
58
+ * resolves against the product's themes and writes the identity under the
59
+ * palette, so it holds even where the product's stylesheet is not the one
60
+ * loaded. The product entries are this, exported.
61
+ */
62
+ export declare function bindProduct(product: Product): {
63
+ product: Product;
64
+ Brand: (props: BrandProps) => import("react").JSX.Element;
65
+ THEMES: Record<string, Theme>;
66
+ DEFAULT_THEME: string;
67
+ applyTheme: (theme?: string | Theme, el?: HTMLElement) => void;
68
+ };
69
+ export {};
@@ -0,0 +1,54 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import BrandDefault from '../components/Brand';
3
+ import { applyTheme } from '../themes';
4
+ import { themeId } from '../themes/css';
5
+ import { tf } from './tf';
6
+ import { valet } from './valet';
7
+ /** Every product, by the name of its mark. */
8
+ export const PRODUCTS = { tf, valet };
9
+ /** Declare a product, so a default that is not a theme or a key `applyTheme`
10
+ * would not use is an error where it is written. */
11
+ export function defineProduct(product) {
12
+ if (!(product.defaultTheme in product.themes)) {
13
+ throw new Error(`product "${product.name}" defaults to "${product.defaultTheme}", which is not one of its themes`);
14
+ }
15
+ for (const [id, theme] of Object.entries(product.themes)) {
16
+ if (themeId(theme) !== id) {
17
+ throw new Error(`theme "${theme.name}" is keyed "${id}", but applyTheme calls it "${themeId(theme)}"`);
18
+ }
19
+ }
20
+ return product;
21
+ }
22
+ /**
23
+ * A theme as the product wears it: the palette over the identity.
24
+ *
25
+ * An id the product does not offer resolves to the product's default rather
26
+ * than the package's, so a valet setting that remembers a theme valet has
27
+ * since dropped comes up as valet, not as tf.
28
+ */
29
+ export function productTheme(product, theme = product.defaultTheme) {
30
+ const resolved = typeof theme === 'string'
31
+ ? (product.themes[theme] ?? product.themes[product.defaultTheme])
32
+ : theme;
33
+ return { ...resolved, tokens: { ...product.identity, ...resolved.tokens } };
34
+ }
35
+ /**
36
+ * The package, as one product.
37
+ *
38
+ * `Brand` defaults to the product's mark and still takes a name. `applyTheme`
39
+ * resolves against the product's themes and writes the identity under the
40
+ * palette, so it holds even where the product's stylesheet is not the one
41
+ * loaded. The product entries are this, exported.
42
+ */
43
+ export function bindProduct(product) {
44
+ function Brand(props) {
45
+ return _jsx(BrandDefault, { ...props, name: props.name ?? product.name });
46
+ }
47
+ return {
48
+ product,
49
+ Brand,
50
+ THEMES: product.themes,
51
+ DEFAULT_THEME: product.defaultTheme,
52
+ applyTheme: (theme = product.defaultTheme, el) => applyTheme(productTheme(product, theme), el),
53
+ };
54
+ }
@@ -0,0 +1,32 @@
1
+ import type { Theme } from '../themes';
2
+ import type { Product } from './index';
3
+ /**
4
+ * tf's themes: the three the package shipped with, and the ones the gallery
5
+ * was photographed in first.
6
+ *
7
+ * `system` is a theme, not a mode. A `prefers-color-scheme` block that
8
+ * overrides `:root` unconditionally means choosing a dark theme on a
9
+ * light-mode laptop gets silently repainted; that media query is scoped to
10
+ * this theme in `base.css`, so following the OS is a choice among the others
11
+ * rather than a rule above them.
12
+ */
13
+ export declare const system: Theme;
14
+ export declare const night: Theme;
15
+ export declare const paper: Theme;
16
+ /** Keyed by the name `applyTheme` takes, which is `name` lowercased. */
17
+ export declare const TF_THEMES: {
18
+ readonly system: Theme;
19
+ readonly night: Theme;
20
+ readonly paper: Theme;
21
+ };
22
+ /**
23
+ * tf, the product.
24
+ *
25
+ * Its identity is empty on purpose: `tokens.css` carries tf's font, shape and
26
+ * density as the base values, so there is nothing to lay over them. `system`
27
+ * is the default because following the OS is the choice a tool open all day
28
+ * should make for you -- and because it is a `prefers-color-scheme` rule
29
+ * rather than a palette, tf's stylesheet writes no default on `:root`; tf sets
30
+ * `data-theme` before the bundle loads, as it always has.
31
+ */
32
+ export declare const tf: Product;
@@ -0,0 +1,104 @@
1
+ /**
2
+ * tf's themes: the three the package shipped with, and the ones the gallery
3
+ * was photographed in first.
4
+ *
5
+ * `system` is a theme, not a mode. A `prefers-color-scheme` block that
6
+ * overrides `:root` unconditionally means choosing a dark theme on a
7
+ * light-mode laptop gets silently repainted; that media query is scoped to
8
+ * this theme in `base.css`, so following the OS is a choice among the others
9
+ * rather than a rule above them.
10
+ */
11
+ export const system = {
12
+ name: 'System',
13
+ note: 'Follows your OS between light and dark',
14
+ scheme: 'dark',
15
+ // Empty on purpose: this is the one theme that must *not* state a palette,
16
+ // because the `prefers-color-scheme` block is scoped to it and needs the
17
+ // base values to fall through. Its swatch is a special case.
18
+ tokens: {},
19
+ };
20
+ /**
21
+ * The dark palette, written out rather than inherited.
22
+ *
23
+ * `night` was `tokens: {}` once, "whatever the base is", and that was wrong
24
+ * twice over. It made the theme depend on a file it does not own, and it made
25
+ * its swatch in the picker preview *the theme currently applied*, because an
26
+ * empty map falls back to the live values.
27
+ */
28
+ const NIGHT = {
29
+ '--bg': '#0f1115',
30
+ '--panel': '#161a21',
31
+ '--panel-2': '#1c222b',
32
+ '--border': '#262d38',
33
+ '--text': '#e6e9ef',
34
+ '--muted': '#8b94a4',
35
+ '--accent': '#5b9dff',
36
+ '--accent-dim': '#2a4877',
37
+ /* No `--on-accent` here on purpose, so it inherits the base near-black.
38
+ Night used to set `#ffffff`, which is 2.72:1 on this accent -- the exact
39
+ pair `tokens.css` records as the reason the token exists at all. The base
40
+ was fixed and the theme carrying the old palette was never revisited, so
41
+ the primary button in the app's fixed dark theme failed the body-text
42
+ minimum by a wide margin for as long as the token had been "fixed".
43
+ `#06181a` on `#5b9dff` is 6.69:1. Found by the contrast scan, which is the
44
+ argument for shipping the measurement rather than the rule. */
45
+ '--app-bg': '#0f1115',
46
+ };
47
+ export const night = {
48
+ name: 'Night',
49
+ note: 'The dark palette, fixed — ignores the OS',
50
+ scheme: 'dark',
51
+ tokens: NIGHT,
52
+ };
53
+ export const paper = {
54
+ name: 'Paper',
55
+ note: 'Light, with shadows that suit it',
56
+ scheme: 'light',
57
+ tokens: {
58
+ '--bg': '#f6f7f9',
59
+ '--panel': '#ffffff',
60
+ '--panel-2': '#f0f2f5',
61
+ '--border': '#e4e8ec',
62
+ '--border-strong': '#8792a1',
63
+ '--text': '#191d23',
64
+ '--muted': '#5d6773',
65
+ '--accent': '#0e7872',
66
+ '--accent-dim': '#7fbdb8',
67
+ '--on-accent': '#ffffff',
68
+ // The base set is tuned for a dark panel. Unoverridden, `--good` was
69
+ // 1.74:1 on white -- a `running` pill nobody could read.
70
+ '--good': '#1c7a4a',
71
+ '--warn': '#8a6216',
72
+ '--bad': '#b3312c',
73
+ // `#2f7fe6` was 3.96:1 on this theme's white panel -- the "information is
74
+ // blue" colour was measured on the dark base when it was added and never
75
+ // on a light one. Found by contrast.test.ts on its first run. This is the
76
+ // lightest step on the same hue that clears 4.5:1 on the panel *and* the
77
+ // page, with room: 5.24 on white, 4.88 on the page.
78
+ '--info': '#216bc9',
79
+ // Black shadows are right on a dark UI and muddy on a light one. This is
80
+ // the whole reason elevation had to become a token.
81
+ '--shadow-1': '0 4px 14px rgba(16, 24, 40, 0.08)',
82
+ '--shadow-2': '0 8px 24px rgba(16, 24, 40, 0.10)',
83
+ '--shadow-3': '0 12px 32px rgba(16, 24, 40, 0.12)',
84
+ '--scrim': 'rgba(16, 24, 40, 0.32)',
85
+ },
86
+ };
87
+ /** Keyed by the name `applyTheme` takes, which is `name` lowercased. */
88
+ export const TF_THEMES = { system, night, paper };
89
+ /**
90
+ * tf, the product.
91
+ *
92
+ * Its identity is empty on purpose: `tokens.css` carries tf's font, shape and
93
+ * density as the base values, so there is nothing to lay over them. `system`
94
+ * is the default because following the OS is the choice a tool open all day
95
+ * should make for you -- and because it is a `prefers-color-scheme` rule
96
+ * rather than a palette, tf's stylesheet writes no default on `:root`; tf sets
97
+ * `data-theme` before the bundle loads, as it always has.
98
+ */
99
+ export const tf = {
100
+ name: 'tf',
101
+ identity: {},
102
+ themes: TF_THEMES,
103
+ defaultTheme: 'system',
104
+ };
@@ -0,0 +1,23 @@
1
+ import type { Theme, ThemeTokens } from '../themes';
2
+ import type { Product } from './index';
3
+ /**
4
+ * valet's identity: what it is under every theme.
5
+ *
6
+ * The fonts are named, not shipped. `--font` reads a `--font-sans` variable
7
+ * the app defines with whatever loads its fonts, and falls back to the family
8
+ * by name; the gallery loads both families from `gallery/public/fonts` so the
9
+ * specimens are photographed in them. Sharper corners than the package
10
+ * default, because a console is read in rows and columns and a large radius
11
+ * rounds the grid away.
12
+ */
13
+ export declare const VALET_IDENTITY: Partial<ThemeTokens>;
14
+ export declare const light: Theme;
15
+ export declare const night: Theme;
16
+ /** Keyed by the name `applyTheme` takes: `name` lowercased, spaces to hyphens. */
17
+ export declare const VALET_THEMES: {
18
+ readonly valet: Theme;
19
+ readonly 'valet-night': Theme;
20
+ };
21
+ /** valet, the product: its badge in `brandMarks.ts`, the identity above, the
22
+ * two palettes, and light until somebody picks. */
23
+ export declare const valet: Product;