@wtfalch/design 0.1.0 → 0.3.0

package/dist/components/icons.js

@@ -0,0 +1,253 @@
+/**
+ * The icon set, as data. The system's, shared by every product the way
+ * Button is; `Icon.tsx` keeps the reasons for the set and its weight.
+ *
+ * A glyph, with the viewBox it is drawn *at* rather than the one it shipped in.
+ *
+ * **This is the whole reason there is a `view` per icon.** Pepicons does not
+ * draw to a consistent optical size: measured against its own grid, `times`
+ * fills 40% of its box while `wifi-off` fills 90% and the circled alert glyphs
+ * fill 96%. Rendered at one `size` that is a 2.4x spread -- a close button half
+ * the size of the gear beside it, which reads as broken rather than as
+ * hand-drawn.
+ *
+ * So each `view` is the glyph's measured bounding box, re-centred and grown
+ * until the drawing fills 78% of it. Two deliberate exceptions:
+ *
+ * - `minimize` targets 55%. It is a bar, not a shape, and a bar stretched to
+ *   78% of the box stops reading as "minimise" and starts reading as a divider.
+ * - The scale is clamped to 0.85x-1.45x. Unclamped, `close` came out at 2x and
+ *   its strokes went visibly heavier than every neighbour -- trading one
+ *   inconsistency for another. Clamped, the set sits together at 14px.
+ *
+ * Numbers came from `getBBox()` on each glyph, not from eyeballing. If you add
+ * an icon, measure it the same way; a viewBox copied from the source file will
+ * be the wrong size and only slightly, which is the hardest kind to notice.
+ */
+export const ICONS = {
+    chat: {
+        view: '-0.9 -0.9 21.79 21.79',
+        d: [
+            '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',
+        ],
+        dots: [
+            [7, 9, 1],
+            [10, 9, 1],
+            [13, 9, 1],
+        ],
+    },
+    settings: {
+        view: '0.06 0.06 19.87 19.87',
+        d: [
+            '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',
+            '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',
+        ],
+    },
+    refresh: {
+        view: '-1.16 -1.07 21.93 21.93',
+        d: [
+            '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',
+            'M13.131 12.416a.5.5 0 0 1-.555-.832l3-2a.5.5 0 1 1 .555.832z',
+            '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',
+            'M6.476 7.385a.5.5 0 0 1 .555.832l-3 2a.5.5 0 1 1-.555-.832z',
+            'M1.341 7.078a.5.5 0 1 1 .832-.554l2 3a.5.5 0 0 1-.832.554z',
+        ],
+    },
+    minimize: { view: '0 0 20 20', d: ['M5 10.5a.5.5 0 0 1 0-1h10a.5.5 0 0 1 0 1z'] },
+    code: {
+        view: '-0.47 -0.48 20.94 20.94',
+        d: [
+            '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',
+            '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',
+            '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',
+        ],
+    },
+    wifi: {
+        view: '-0.26 -0.06 20.51 20.51',
+        d: [
+            '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',
+            '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',
+        ],
+    },
+    'wifi-off': {
+        view: '-1.54 -1.54 23.08 23.08',
+        d: [
+            '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',
+            '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',
+            'M1.15 1.878a.514.514 0 0 1 .728-.727l16.971 16.971a.514.514 0 0 1-.727.727z',
+        ],
+    },
+    check: {
+        view: '2.44 2.94 14.12 14.12',
+        d: [
+            'm14.937 5.743l-5 9c-.324.583-1.198.097-.874-.486l5-9c.324-.583 1.198-.097.874.486',
+            'm4.812 10.11l5 4c.52.416-.104 1.197-.624.78l-5-4c-.52-.416.104-1.197.624-.78',
+        ],
+    },
+    close: {
+        view: '3.1 3.1 13.79 13.79',
+        d: [
+            'M6.854 13.854a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708.708z',
+            'M6.146 6.854a.5.5 0 1 1 .708-.708l7 7a.5.5 0 0 1-.708.708z',
+        ],
+    },
+    info: {
+        view: '-2.29 -2.29 30.59 30.59',
+        d: [
+            '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',
+            'M14.5 7.25a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0',
+            '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',
+        ],
+    },
+    warning: {
+        view: '-2.29 -2.29 30.59 30.59',
+        d: [
+            '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',
+            'M14.5 19.25a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0',
+            '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',
+        ],
+    },
+    error: {
+        view: '0.38 0.38 19.23 19.23',
+        d: [
+            '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',
+            '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',
+        ],
+    },
+    expand: {
+        view: '2.95 2.95 14.1 14.1',
+        d: [
+            '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',
+            'M5 15.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1z',
+            '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',
+            'M11 5.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1z',
+        ],
+    },
+    download: {
+        view: '-0.26 0.25 20.52 20.52',
+        d: [
+            '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',
+            'M10 10a.5.5 0 0 1 1 0v7.5a.5.5 0 0 1-1 0z',
+            'M12.688 15.11a.5.5 0 0 1 .624.78l-2.5 2a.5.5 0 1 1-.624-.78z',
+            'M7.688 15.89a.5.5 0 0 1 .624-.78l2.5 2a.5.5 0 1 1-.624.78z',
+        ],
+    },
+    image: {
+        view: '-0.9 -0.9 21.79 21.79',
+        d: [
+            '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',
+            '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',
+            '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',
+            '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',
+        ],
+    },
+    bolt: {
+        view: '-0.26 0.24 20.52 20.52',
+        d: [
+            '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',
+        ],
+    },
+    speaker: {
+        view: '-0.76 -1.26 20.51 20.51',
+        d: [
+            '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',
+            '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',
+            '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',
+        ],
+    },
+    mic: {
+        view: '0.39 -0.12 19.23 19.23',
+        d: [
+            'M7.75 4.25a2.25 2.25 0 0 1 4.5 0v3.5a2.25 2.25 0 0 1-4.5 0z',
+            'M10 17c-2.48 0-4-.217-4-1s1.52-1 4-1s4 .217 4 1s-1.52 1-4 1',
+            'M9.5 12.5h1V16h-1z',
+            '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',
+        ],
+    },
+    back: {
+        view: '2.96 2.95 14.09 14.09',
+        d: [
+            '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',
+            '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',
+            'M5 10a.5.5 0 0 1 .5-.5H15a.5.5 0 0 1 0 1H5.5A.5.5 0 0 1 5 10',
+        ],
+    },
+    spinner: {
+        view: '2.03 1.03 17.93 17.93',
+        d: [
+            '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',
+            'M12.769 11.585a.5.5 0 1 1-.539-.842l3.482-2.227a.5.5 0 1 1 .539.842z',
+            'M17.947 12.114a.5.5 0 0 1-.913.407l-1.509-3.38a.5.5 0 1 1 .914-.408z',
+        ],
+    },
+    folder: {
+        view: '-0.26 -0.01 20.51 20.51',
+        d: [
+            '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',
+        ],
+    },
+    book: {
+        view: '-1.76 -1.76 23.53 23.53',
+        d: [
+            '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',
+            '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',
+        ],
+    },
+    eye: {
+        view: '-0.9 -1.4 21.8 21.8',
+        d: [
+            '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',
+            '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',
+        ],
+    },
+    /* The same eye with a line through it. Pepicons' `eye-off`, but drawn from
+       THIS file's `eye` plus the slash rather than copied whole: the set has
+       redrawn its lashes since the open eye was taken, and a pair that toggles
+       in one button must differ by the slash alone or the eye appears to jump.
+       For the same reason it shares `eye`'s `view` instead of a measured one --
+       the slash sits inside that box (0.8..18.5 on both axes), so nothing is
+       clipped, and the body of the eye does not move when the state does. */
+    'eye-off': {
+        view: '-0.9 -1.4 21.8 21.8',
+        d: [
+            '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',
+            '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',
+            'M1.15 1.878a.514.514 0 0 1 .728-.727l16.971 16.971a.514.514 0 0 1-.727.727z',
+        ],
+    },
+    palette: {
+        view: '-2.13 -2.1 23.53 23.53',
+        d: [
+            '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',
+            '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',
+            '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',
+        ],
+    },
+    stars: {
+        view: '-1.95 -1.76 23.53 23.53',
+        d: [
+            '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',
+            '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',
+        ],
+    },
+    wrench: {
+        view: '-0.17 -0.74 21.07 21.07',
+        d: [
+            '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',
+        ],
+    },
+    file: {
+        view: '-1.54 -1.54 23.08 23.08',
+        d: [
+            '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',
+            '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',
+            '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',
+        ],
+    },
+    cloud: {
+        view: '-0.26 -1.76 20.52 20.52',
+        d: [
+            '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',
+        ],
+    },
+};

package/dist/components/tourMarker.d.ts

@@ -11,7 +11,18 @@
  * These are also not React at all: three reads and writes of one string. They
  * were only in the component file because that is where the tour was written.
  */
-export declare function tourSeen(): boolean;
+/** Remembered per browser: a reload in the middle should not start it again,
+ *  and neither should opening the app tomorrow.
+ *
+ *  Re-running onboarding clears it -- see `forgetTour`. There is still no way
+ *  to replay the tour on its own without doing that, which is worth a row in
+ *  Settings and is said here rather than left implied. */
+/** Where a product records that the tour was seen. Every product that installs
+ *  the package gets its own key by passing one; the default is the package's,
+ *  so two products on one origin do not share a memory. tf passes
+ *  `tf-tour-seen`, the key its users already hold. */
+export declare const DEFAULT_TOUR_KEY = "design-tour-seen";
+export declare function tourSeen(key?: string): boolean;
 /**
  * Forget it, so the next completed onboarding shows it again.
  *
@@ -25,5 +36,5 @@ export declare function tourSeen(): boolean;
  * this a fact about one browser, which is what it is. If you are being asked
  * these questions again, you have not seen the walk that comes after them.
  */
-export declare function forgetTour(): void;
-export declare function markTourSeen(): void;
+export declare function forgetTour(key?: string): void;
+export declare function markTourSeen(key?: string): void;

package/dist/components/tourMarker.js

@@ -17,10 +17,14 @@
  *  Re-running onboarding clears it -- see `forgetTour`. There is still no way
  *  to replay the tour on its own without doing that, which is worth a row in
  *  Settings and is said here rather than left implied. */
-const SEEN = 'tf-tour-seen';
-export function tourSeen() {
+/** Where a product records that the tour was seen. Every product that installs
+ *  the package gets its own key by passing one; the default is the package's,
+ *  so two products on one origin do not share a memory. tf passes
+ *  `tf-tour-seen`, the key its users already hold. */
+export const DEFAULT_TOUR_KEY = 'design-tour-seen';
+export function tourSeen(key = DEFAULT_TOUR_KEY) {
     try {
-        return localStorage.getItem(SEEN) === '1';
+        return localStorage.getItem(key) === '1';
     }
     catch {
         // A browser refusing storage is not a reason to refuse the tour.
@@ -40,17 +44,17 @@ export function tourSeen() {
  * this a fact about one browser, which is what it is. If you are being asked
  * these questions again, you have not seen the walk that comes after them.
  */
-export function forgetTour() {
+export function forgetTour(key = DEFAULT_TOUR_KEY) {
     try {
-        localStorage.removeItem(SEEN);
+        localStorage.removeItem(key);
     }
     catch {
         /* nothing to do about it, and nothing that needs doing */
     }
 }
-export function markTourSeen() {
+export function markTourSeen(key = DEFAULT_TOUR_KEY) {
     try {
-        localStorage.setItem(SEEN, '1');
+        localStorage.setItem(key, '1');
     }
     catch {
         /* nothing to do about it, and nothing that needs doing */

package/dist/index.d.ts

@@ -17,6 +17,10 @@
  * that shipped. They are worth more than the code around them.
  */
 export { default as Brand } from './components/Brand';
+/** Every product's mark by name, and the path itself for an icon cut from
+ *  the same drawing. */
+export { BRAND_MARKS, BRAND_NAMES } from './components/brandMarks';
+export type { BrandName, FillMark, Mark, StrokeMark } from './components/brandMarks';
 export { default as Button } from './components/Button';
 export type { Props as ButtonProps } from './components/Button';
 export { default as Callout } from './components/Callout';
@@ -56,7 +60,7 @@ export type { TourStop } from './components/Tour';
 /** The tour's memory. `forgetTour` is what onboarding calls so a config reset
  *  replays the tour rather than leaving it suppressed by a browser that has
  *  seen it. */
-export { forgetTour, markTourSeen, tourSeen } from './components/tourMarker';
+export { DEFAULT_TOUR_KEY, forgetTour, markTourSeen, tourSeen } from './components/tourMarker';
 /** The art. Its own module because it is ~200 KB of inlined SVG — referenced
  *  only by `Illustration`, so a bundler that drops the component drops the art
  *  with it. */
@@ -68,5 +72,13 @@ export type { IllustrationName } from './illustrations';
 export { useTrapFocus } from './hooks/useTrapFocus';
 export { DEFAULT_THEME, DERIVED_TOKENS, FIXED_TOKENS, THEMES, TOKEN_KEYS, applyTheme, defineTheme, isTheme, resolvedTokens, } from './themes';
 export type { Theme, ThemeTokens } from './themes';
+/** A theme as the rule a consumer ships for first paint, generated so it
+ *  cannot drift from the object; and a product's whole stylesheet the same way. */
+export { productCss, productStylesheet, themeCss, themeId } from './themes/css';
 /** The measurement behind the contrast rule, for a theme that is yours. */
 export { luminance, ratio } from './contrast';
+/** The products: the layer between the system and a theme. Each also ships
+ *  as its own entry, `@wtfalch/design/<name>` and `<name>.css`, where `Brand`,
+ *  `THEMES` and `applyTheme` are that product's. */
+export { PRODUCTS, bindProduct, defineProduct, productTheme } from './products';
+export type { Product } from './products';

package/dist/index.js

@@ -17,6 +17,9 @@
  * that shipped. They are worth more than the code around them.
  */
 export { default as Brand } from './components/Brand';
+/** Every product's mark by name, and the path itself for an icon cut from
+ *  the same drawing. */
+export { BRAND_MARKS, BRAND_NAMES } from './components/brandMarks';
 export { default as Button } from './components/Button';
 export { default as Callout } from './components/Callout';
 export { default as Card } from './components/Card';
@@ -51,7 +54,7 @@ export { default as Tour } from './components/Tour';
 /** The tour's memory. `forgetTour` is what onboarding calls so a config reset
  *  replays the tour rather than leaving it suppressed by a browser that has
  *  seen it. */
-export { forgetTour, markTourSeen, tourSeen } from './components/tourMarker';
+export { DEFAULT_TOUR_KEY, forgetTour, markTourSeen, tourSeen } from './components/tourMarker';
 /** The art. Its own module because it is ~200 KB of inlined SVG — referenced
  *  only by `Illustration`, so a bundler that drops the component drops the art
  *  with it. */
@@ -61,5 +64,12 @@ export { ILLUSTRATIONS } from './illustrations';
  *  without a trap, which is what this exists to stop happening again. */
 export { useTrapFocus } from './hooks/useTrapFocus';
 export { DEFAULT_THEME, DERIVED_TOKENS, FIXED_TOKENS, THEMES, TOKEN_KEYS, applyTheme, defineTheme, isTheme, resolvedTokens, } from './themes';
+/** A theme as the rule a consumer ships for first paint, generated so it
+ *  cannot drift from the object; and a product's whole stylesheet the same way. */
+export { productCss, productStylesheet, themeCss, themeId } from './themes/css';
 /** The measurement behind the contrast rule, for a theme that is yours. */
 export { luminance, ratio } from './contrast';
+/** The products: the layer between the system and a theme. Each also ships
+ *  as its own entry, `@wtfalch/design/<name>` and `<name>.css`, where `Brand`,
+ *  `THEMES` and `applyTheme` are that product's. */
+export { PRODUCTS, bindProduct, defineProduct, productTheme } from './products';

package/dist/products/index.d.ts

@@ -0,0 +1,69 @@
+import type { ComponentProps } from 'react';
+import BrandDefault from '../components/Brand';
+import type { BrandName } from '../components/brandMarks';
+import { type Theme, type ThemeTokens } from '../themes';
+/**
+ * A product: the layer between the system and a theme.
+ *
+ * Three layers, each falling back to the one under it. The system is the
+ * components, the base values in `tokens.css`, the shared icons and
+ * illustrations. The product is its mark and its identity -- the tokens that
+ * make it itself under every theme: font, shape, density -- plus the themes it
+ * offers and the one it wears until somebody picks. The theme is a palette and
+ * a colour scheme, and anything else it deliberately changes.
+ *
+ * The middle layer is what lets a theme be shared between products. A theme
+ * is a sparse map, and what it is sparse *over* decides what a silent token
+ * shows: over the base it shows tf, over the product it shows the product.
+ * Before this layer valet's two palettes each restated valet's font and
+ * corners, because there was nowhere else to put them.
+ *
+ * A site is one product, so each ships as one entry -- `@wtfalch/design/valet`
+ * and `valet.css` -- where `Brand`, `THEMES` and `applyTheme` are the
+ * product's. This module is the neutral view of all of them, which is what the
+ * gallery reads.
+ */
+export interface Product {
+    /** The id: the mark's row in `brandMarks.ts` and the stem of the CSS entry. */
+    name: BrandName;
+    /** On `:root` in the product's stylesheet, and under every palette when one
+     *  is applied. Empty for a product the base values already describe. */
+    identity: Partial<ThemeTokens>;
+    /** Keyed by the id `applyTheme` takes. */
+    themes: Record<string, Theme>;
+    /** Worn until somebody picks; written on `:root` when no `data-theme` is set. */
+    defaultTheme: string;
+}
+/** Every product, by the name of its mark. */
+export declare const PRODUCTS: {
+    readonly tf: Product;
+    readonly valet: Product;
+};
+/** Declare a product, so a default that is not a theme or a key `applyTheme`
+ *  would not use is an error where it is written. */
+export declare function defineProduct(product: Product): Product;
+/**
+ * A theme as the product wears it: the palette over the identity.
+ *
+ * An id the product does not offer resolves to the product's default rather
+ * than the package's, so a valet setting that remembers a theme valet has
+ * since dropped comes up as valet, not as tf.
+ */
+export declare function productTheme(product: Product, theme?: string | Theme): Theme;
+type BrandProps = ComponentProps<typeof BrandDefault>;
+/**
+ * The package, as one product.
+ *
+ * `Brand` defaults to the product's mark and still takes a name. `applyTheme`
+ * resolves against the product's themes and writes the identity under the
+ * palette, so it holds even where the product's stylesheet is not the one
+ * loaded. The product entries are this, exported.
+ */
+export declare function bindProduct(product: Product): {
+    product: Product;
+    Brand: (props: BrandProps) => import("react").JSX.Element;
+    THEMES: Record<string, Theme>;
+    DEFAULT_THEME: string;
+    applyTheme: (theme?: string | Theme, el?: HTMLElement) => void;
+};
+export {};

package/dist/products/index.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BrandDefault from '../components/Brand';
+import { applyTheme } from '../themes';
+import { themeId } from '../themes/css';
+import { tf } from './tf';
+import { valet } from './valet';
+/** Every product, by the name of its mark. */
+export const PRODUCTS = { tf, valet };
+/** Declare a product, so a default that is not a theme or a key `applyTheme`
+ *  would not use is an error where it is written. */
+export function defineProduct(product) {
+    if (!(product.defaultTheme in product.themes)) {
+        throw new Error(`product "${product.name}" defaults to "${product.defaultTheme}", which is not one of its themes`);
+    }
+    for (const [id, theme] of Object.entries(product.themes)) {
+        if (themeId(theme) !== id) {
+            throw new Error(`theme "${theme.name}" is keyed "${id}", but applyTheme calls it "${themeId(theme)}"`);
+        }
+    }
+    return product;
+}
+/**
+ * A theme as the product wears it: the palette over the identity.
+ *
+ * An id the product does not offer resolves to the product's default rather
+ * than the package's, so a valet setting that remembers a theme valet has
+ * since dropped comes up as valet, not as tf.
+ */
+export function productTheme(product, theme = product.defaultTheme) {
+    const resolved = typeof theme === 'string'
+        ? (product.themes[theme] ?? product.themes[product.defaultTheme])
+        : theme;
+    return { ...resolved, tokens: { ...product.identity, ...resolved.tokens } };
+}
+/**
+ * The package, as one product.
+ *
+ * `Brand` defaults to the product's mark and still takes a name. `applyTheme`
+ * resolves against the product's themes and writes the identity under the
+ * palette, so it holds even where the product's stylesheet is not the one
+ * loaded. The product entries are this, exported.
+ */
+export function bindProduct(product) {
+    function Brand(props) {
+        return _jsx(BrandDefault, { ...props, name: props.name ?? product.name });
+    }
+    return {
+        product,
+        Brand,
+        THEMES: product.themes,
+        DEFAULT_THEME: product.defaultTheme,
+        applyTheme: (theme = product.defaultTheme, el) => applyTheme(productTheme(product, theme), el),
+    };
+}

package/dist/products/tf.d.ts

@@ -0,0 +1,32 @@
+import type { Theme } from '../themes';
+import type { Product } from './index';
+/**
+ * tf's themes: the three the package shipped with, and the ones the gallery
+ * was photographed in first.
+ *
+ * `system` is a theme, not a mode. A `prefers-color-scheme` block that
+ * overrides `:root` unconditionally means choosing a dark theme on a
+ * light-mode laptop gets silently repainted; that media query is scoped to
+ * this theme in `base.css`, so following the OS is a choice among the others
+ * rather than a rule above them.
+ */
+export declare const system: Theme;
+export declare const night: Theme;
+export declare const paper: Theme;
+/** Keyed by the name `applyTheme` takes, which is `name` lowercased. */
+export declare const TF_THEMES: {
+    readonly system: Theme;
+    readonly night: Theme;
+    readonly paper: Theme;
+};
+/**
+ * tf, the product.
+ *
+ * Its identity is empty on purpose: `tokens.css` carries tf's font, shape and
+ * density as the base values, so there is nothing to lay over them. `system`
+ * is the default because following the OS is the choice a tool open all day
+ * should make for you -- and because it is a `prefers-color-scheme` rule
+ * rather than a palette, tf's stylesheet writes no default on `:root`; tf sets
+ * `data-theme` before the bundle loads, as it always has.
+ */
+export declare const tf: Product;