docs(ui): add brandImage and favicon to storybook theme (#1836)

cylewaitforit · web-flow · commit ae1c62deb99f · 2026-03-02T15:20:17.000Z
diff --git a/.storybook/.public/favicon.svg b/.storybook/.public/favicon.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="favicon.svg"
+   xml:space="preserve"
+   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2" /><sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.7832031"
+     inkscape:cx="256"
+     inkscape:cy="256"
+     inkscape:window-width="1920"
+     inkscape:window-height="1131"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" /><rect
+     width="512"
+     height="512"
+     rx="64"
+     fill="#0a0a0a"
+     id="rect1" /><text
+     x="320"
+     y="370"
+     font-family="'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+     font-size="420"
+     font-weight="500"
+     text-anchor="middle"
+     fill="#fafafa"
+     id="text2"><tspan
+       id="tspan2">/</tspan></text><g
+     fill="none"
+     fill-rule="evenodd"
+     id="g2"
+     transform="matrix(1.8708504,0,0,1.8708504,111.01335,309.96451)"><path
+       fill="#ff4785"
+       fill-rule="nonzero"
+       d="m 3.1945652,29.552358 -0.9934,-26.4720004 c -0.032962,-0.8743166 0.6373688,-1.6153813 1.5106,-1.67 L 26.228565,0.00315756 c 0.444276,-0.02783207 0.880289,0.12926818 1.204713,0.43407157 0.324425,0.30480338 0.508287,0.73018117 0.508287,1.17532847 V 30.458558 c 0,0.440184 -0.180038,0.861216 -0.498204,1.165407 -0.318166,0.304192 -0.746853,0.465101 -1.186596,0.445393 l -21.5229998,-0.9666 c -0.8382738,-0.03761 -1.5075776,-0.711872 -1.539,-1.5504 z"
+       id="path1" /><path
+       fill="#ffffff"
+       d="m 24.458165,0.11395756 -3.099,0.1936 -0.151,3.63440004 c -0.0038,0.093005 0.04644,0.1798422 0.128928,0.2229687 0.08249,0.043126 0.182451,0.034804 0.256672,-0.021369 l 1.412,-1.0708 1.1924,0.9394 c 0.07355,0.058061 0.174131,0.068096 0.2577,0.02571 0.08357,-0.042386 0.134895,-0.1294678 0.1315,-0.2231103 l -0.1292,-3.70100004 z m -2.4118,12.17120044 c -0.5672,0.4406 -4.793,0.7414 -4.793,0.114 0.0894,-2.3938 -0.9824,-2.4988004 -1.5778,-2.4988004 -0.5656,0 -1.518,0.1710004 -1.518,1.4534004 0,1.3068 1.392,2.0446 3.026,2.9106 2.3214,1.23 5.1308,2.7188 5.1308,6.4652 0,3.5906 -2.9176,5.5742 -6.6388,5.5742 -3.8402,0 -7.1961998,-1.5538 -6.8171998,-6.9404 0.1488,-0.6326 5.0311998,-0.4822 5.0311998,0 -0.0596,2.2228 0.4464,2.8766 1.7266,2.8766 0.9824,0 1.4288,-0.5416 1.4288,-1.4534 0,-1.38 -1.4504,-2.1946 -3.119,-3.1314 -2.2594,-1.2686 -4.9187998,-2.7616 -4.9187998,-6.1872 0,-3.4196004 2.3519998,-5.6994004 6.5493998,-5.6994004 4.1976,0 6.4898,2.2448 6.4898,6.5168004 z"
+       id="path2" /></g></svg>
diff --git a/.storybook/.public/npmx-storybook.svg b/.storybook/.public/npmx-storybook.svg
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="380"
+   height="65"
+   version="1.1"
+   viewBox="0 0 380 65"
+   id="svg6"
+   sodipodi:docname="npmx-storybook.svg"
+   xml:space="preserve"
+   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
+   inkscape:export-filename="npmx-storybook.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs6"><path
+       d="M 1.2,36.9 0,3.9 C 0,2.8 0.8,1.9 1.9,1.8 L 29.9,0 a 2,2 0 0 1 2.2,1.9 2,2 0 0 1 0,0.1 v 36 a 2,2 0 0 1 -2,2 2,2 0 0 1 -0.1,0 L 3.2,38.8 a 2,2 0 0 1 -2,-2 z"
+       id="a" /></defs><sodipodi:namedview
+     id="namedview6"
+     pagecolor="#000000"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:export-bgcolor="#00000000"
+     inkscape:zoom="1.9584718"
+     inkscape:cx="178.96607"
+     inkscape:cy="85.525868"
+     inkscape:window-width="1280"
+     inkscape:window-height="731"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g7" /><g
+     id="g7"
+     transform="matrix(0.23310459,0,0,0.23310459,10.099099,12.117692)"><g
+       transform="translate(0,14.602)"
+       id="g6"
+       style="display:inline"><path
+         d="m 176.66,17.97 h 14.954 l 0.3884,18.449 q 4.0783,-10.293 12.817,-15.536 8.9334,-5.2435 20.003,-5.2435 17.09,0 26.412,11.07 9.3218,10.875 9.3218,27.965 v 66.223 h -16.313 v -61.562 q 0,-29.325 -22.916,-29.325 -12.429,0 -20.391,7.7681 -7.9623,7.7681 -7.9623,21.557 v 61.562 h -16.313 z"
+         fill="#ffffff"
+         id="path2"
+         style="display:inline" /><path
+         d="m 386.95,17.97 h 14.954 l 0.38842,15.148 q 2.7188,-8.3507 7.9624,-12.817 5.2435,-4.6609 12.429,-4.6609 15.925,0 19.42,20.197 2.5246,-9.516 8.3507,-14.759 5.8261,-5.4377 13.788,-5.4377 12.429,0 18.061,8.7392 5.6319,8.545 5.6319,28.159 v 68.36 h -16.313 v -66.029 q 0,-13.4 -2.9131,-19.032 -2.913,-5.8261 -9.1276,-5.8261 -6.4087,0 -10.293,6.4087 -3.6899,6.2145 -3.6899,18.838 v 65.641 h -16.313 v -66.029 q 0,-13.206 -2.913,-19.032 -2.7188,-5.8261 -9.1276,-5.8261 -6.4088,0 -10.293,6.4087 -3.6899,6.2145 -3.6899,18.838 v 65.641 h -16.313 z"
+         fill="#ffffff"
+         id="path3"
+         style="display:inline" /><path
+         d="m 279.21,17.97 h 15.148 l 0.19415,16.507 q 4.6609,-9.1276 12.817,-13.983 8.3508,-4.8551 18.838,-4.8551 14.759,0 24.664,7.3797 9.9044,7.1855 14.759,19.42 4.8546,12.2345 4.8551,26.994 0,14.759 -4.8551,26.994 -4.8551,12.235 -14.759,19.615 -9.9044,7.1855 -24.664,7.1855 -10.099,0 -18.449,-4.2725 -8.1565,-4.2725 -12.235,-11.652 v 42.725 h -16.313 z m 45.444,89.722 q 13.4,0 20.974,-10.099 7.7682,-10.099 7.7682,-28.159 0,-18.061 -7.7682,-28.159 -7.5739,-10.099 -20.974,-10.099 -13.594,0 -21.362,9.9044 -7.7682,9.7102 -7.7682,28.354 0,18.644 7.5739,28.548 7.7682,9.7102 21.557,9.7102 z"
+         fill="#ffffff"
+         id="path4"
+         style="display:inline" /><path
+         d="M 543.04,68.074 507.112,17.97 h 19.032 L 553.138,56.811 579.55,17.97 h 19.42 l -35.733,50.493 37.481,52.435 h -19.032 l -28.548,-41.56 -28.548,41.56 h -19.42 z"
+         fill="#ffffff"
+         id="path5"
+         style="display:inline" /><path
+         d="m 103.12,-9.2307 -3.6211,10.246 -46.309,131 -3.6211,10.246 h 15.537 l 3.6211,-10.246 11.717,-33.148 38.211,-108.1 z"
+         fill="#51c8fc"
+         id="path6"
+         style="display:inline" /><path
+         d="m 696.61406,-9.2307 -3.62111,10.246 -46.309,131 -3.6211,10.246 h 15.537 l 3.6211,-10.246 11.717,-33.148 38.21102,-108.1 z"
+         fill="#51c8fc"
+         id="path7"
+         style="display:inline;fill:#ffffff;fill-opacity:1" /></g><g
+       fill="none"
+       fill-rule="evenodd"
+       id="g2"
+       transform="translate(-2.07078,106.96451)"
+       inkscape:label="g2"><path
+         fill="#ff4785"
+         fill-rule="nonzero"
+         d="m 3.1945652,29.552358 -0.9934,-26.4720004 c -0.032962,-0.8743166 0.6373688,-1.6153813 1.5106,-1.67 L 26.228565,0.00315756 c 0.444276,-0.02783207 0.880289,0.12926818 1.204713,0.43407157 0.324425,0.30480338 0.508287,0.73018117 0.508287,1.17532847 V 30.458558 c 0,0.440184 -0.180038,0.861216 -0.498204,1.165407 -0.318166,0.304192 -0.746853,0.465101 -1.186596,0.445393 l -21.5229998,-0.9666 c -0.8382738,-0.03761 -1.5075776,-0.711872 -1.539,-1.5504 z"
+         id="path1-3" /><path
+         fill="#ffffff"
+         d="m 24.458165,0.11395756 -3.099,0.1936 -0.151,3.63440004 c -0.0038,0.093005 0.04644,0.1798422 0.128928,0.2229687 0.08249,0.043126 0.182451,0.034804 0.256672,-0.021369 l 1.412,-1.0708 1.1924,0.9394 c 0.07355,0.058061 0.174131,0.068096 0.2577,0.02571 0.08357,-0.042386 0.134895,-0.1294678 0.1315,-0.2231103 l -0.1292,-3.70100004 z m -2.4118,12.17120044 c -0.5672,0.4406 -4.793,0.7414 -4.793,0.114 0.0894,-2.3938 -0.9824,-2.4988004 -1.5778,-2.4988004 -0.5656,0 -1.518,0.1710004 -1.518,1.4534004 0,1.3068 1.392,2.0446 3.026,2.9106 2.3214,1.23 5.1308,2.7188 5.1308,6.4652 0,3.5906 -2.9176,5.5742 -6.6388,5.5742 -3.8402,0 -7.1961998,-1.5538 -6.8171998,-6.9404 0.1488,-0.6326 5.0311998,-0.4822 5.0311998,0 -0.0596,2.2228 0.4464,2.8766 1.7266,2.8766 0.9824,0 1.4288,-0.5416 1.4288,-1.4534 0,-1.38 -1.4504,-2.1946 -3.119,-3.1314 -2.2594,-1.2686 -4.9187998,-2.7616 -4.9187998,-6.1872 0,-3.4196004 2.3519998,-5.6994004 6.5493998,-5.6994004 4.1976,0 6.4898,2.2448 6.4898,6.5168004 z"
+         id="path2-6" /></g></g><g
+     inkscape:groupmode="layer"
+     id="layer1"
+     inkscape:label="Storybook"><title
+       id="title1">Storybook</title><g
+       fill="none"
+       fill-rule="evenodd"
+       id="g2-7"
+       transform="matrix(1.2280702,0,0,1.2280702,202.1018,11.829822)"><path
+         d="m -4.7,25.7 c -1.7,0 -3.4,-0.3 -5,-0.7 -1.5,-0.5 -2.8,-1.1 -3.9,-2 l 1.6,-3.5 c 2.2,1.5 4.6,2.3 7.3,2.3 1.5,0 2.5,-0.2 3.3,-0.7 0.7,-0.5 1.1,-1 1.1,-1.9 0,-0.7 -0.3,-1.3 -1,-1.7 -0.7,-0.4 -2,-0.8 -3.7,-1.2 -2,-0.4 -3.6,-0.9 -4.8,-1.5 -1.1,-0.5 -2,-1.2 -2.6,-2 -0.5,-1 -0.8,-2 -0.8,-3.2 0,-1.4 0.4,-2.6 1.2,-3.6 0.7,-1.1 1.8,-2 3.2,-2.6 1.3,-0.6 2.9,-0.9 4.7,-0.9 1.6,0 3.1,0.3 4.6,0.7 C 2,3.7 3.2,4.3 4,5.2 L 2.4,8.7 c -2,-1.5 -4.2,-2.3 -6.5,-2.3 -1.3,0 -2.3,0.2 -3,0.8 -0.8,0.5 -1.2,1.1 -1.2,2 0,0.5 0.2,1 0.5,1.3 0.2,0.3 0.7,0.6 1.4,0.9 l 2.9,0.8 c 2.9,0.6 5,1.4 6.2,2.4 a 5,5 0 0 1 2,4.2 6,6 0 0 1 -2.5,5 c -1.7,1.2 -4,1.9 -7,1.9 z m 21,-3.6 1.4,-0.1 -0.2,3.5 -1.9,0.1 c -2.4,0 -4.1,-0.5 -5.2,-1.5 -1.1,-1 -1.6,-2.7 -1.6,-4.8 v -6 h -3 V 9.7 h 3 V 5 h 4.8 v 4.6 h 4 v 3.6 h -4 v 6 c 0,1.8 0.9,2.8 2.6,2.8 z m 11.1,3.5 c -1.6,0 -3,-0.3 -4.3,-1 a 7,7 0 0 1 -3,-2.8 c -0.6,-1.3 -1,-2.7 -1,-4.4 0,-1.6 0.4,-3 1,-4.3 a 7,7 0 0 1 3,-2.8 c 1.2,-0.7 2.7,-1 4.3,-1 1.7,0 3.2,0.3 4.4,1 a 7,7 0 0 1 3,2.8 c 0.6,1.2 1,2.7 1,4.3 0,1.7 -0.4,3.1 -1,4.4 a 7,7 0 0 1 -3,2.8 c -1.2,0.7 -2.7,1 -4.4,1 z m 0,-3.6 C 29.8,22 31,20.4 31,17.4 31,15.9 30.7,14.8 30,14 a 3.2,3.2 0 0 0 -2.6,-1 c -2.3,0 -3.5,1.4 -3.5,4.4 0,3 1.2,4.6 3.5,4.6 z m 21.7,-8.8 -2.7,0.3 c -1.3,0.2 -2.3,0.5 -2.8,1.2 -0.6,0.6 -0.9,1.4 -0.9,2.5 v 8.2 H 38 V 9.7 h 4.6 v 2.6 c 0.8,-1.8 2.5,-2.8 5,-3 h 1.3 l 0.3,4 z m 14,-3.5 h 4.8 L 58.4,31 h -4.9 l 3,-6.6 -6.4,-14.8 h 5 l 4,10 4,-10 z m 16,-0.4 c 1.4,0 2.6,0.3 3.6,1 1,0.6 1.9,1.6 2.5,2.8 0.6,1.2 0.9,2.7 0.9,4.3 0,1.6 -0.3,3 -1,4.3 a 6.9,6.9 0 0 1 -2.4,2.9 c -1,0.7 -2.2,1 -3.6,1 -1,0 -2,-0.2 -3,-0.7 -0.8,-0.4 -1.5,-1 -2,-1.9 v 2.4 H 69.4 V 2.8 h 4.8 v 9 c 0.5,-0.8 1.2,-1.4 2,-1.9 0.9,-0.4 1.8,-0.6 3,-0.6 z M 77.7,22 c 1.1,0 2,-0.4 2.6,-1.2 0.6,-0.8 1,-2 1,-3.4 0,-1.5 -0.4,-2.5 -1,-3.3 -0.6,-0.8 -1.5,-1.1 -2.6,-1.1 -1.1,0 -2,0.3 -2.6,1.1 -0.6,0.8 -1,2 -1,3.3 0,1.5 0.4,2.6 1,3.4 0.6,0.8 1.5,1.2 2.6,1.2 z m 18.9,3.6 c -1.7,0 -3.2,-0.3 -4.4,-1 a 7,7 0 0 1 -3,-2.8 c -0.6,-1.3 -1,-2.7 -1,-4.4 0,-1.6 0.4,-3 1,-4.3 a 7,7 0 0 1 3,-2.8 c 1.2,-0.7 2.7,-1 4.4,-1 1.6,0 3,0.3 4.3,1 a 7,7 0 0 1 3,2.8 c 0.6,1.2 1,2.7 1,4.3 0,1.7 -0.4,3.1 -1,4.4 a 7,7 0 0 1 -3,2.8 c -1.2,0.7 -2.7,1 -4.3,1 z m 0,-3.6 c 2.3,0 3.5,-1.6 3.5,-4.6 0,-1.5 -0.3,-2.6 -1,-3.4 a 3.2,3.2 0 0 0 -2.5,-1 c -2.4,0 -3.6,1.4 -3.6,4.4 0,3 1.2,4.6 3.6,4.6 z m 18,3.6 c -1.7,0 -3.2,-0.3 -4.4,-1 a 7,7 0 0 1 -3,-2.8 c -0.6,-1.3 -1,-2.7 -1,-4.4 0,-1.6 0.4,-3 1,-4.3 a 7,7 0 0 1 3,-2.8 c 1.2,-0.7 2.7,-1 4.4,-1 1.6,0 3,0.3 4.4,1 a 7,7 0 0 1 2.9,2.8 c 0.6,1.2 1,2.7 1,4.3 0,1.7 -0.4,3.1 -1,4.4 a 7,7 0 0 1 -3,2.8 c -1.2,0.7 -2.7,1 -4.3,1 z m 0,-3.6 c 2.3,0 3.5,-1.6 3.5,-4.6 0,-1.5 -0.3,-2.6 -1,-3.4 a 3.2,3.2 0 0 0 -2.5,-1 c -2.4,0 -3.6,1.4 -3.6,4.4 0,3 1.2,4.6 3.6,4.6 z m 27.4,3.4 h -6 l -6,-7 v 7 h -4.8 V 2.8 h 4.9 v 13.6 l 5.8,-6.7 h 5.7 l -6.6,7.5 z"
+         fill="currentColor"
+         id="path1"
+         style="fill:#fffff0;fill-opacity:1" /><mask
+         id="b"
+         fill="#ffffff"><use
+           xlink:href="#a"
+           id="use1" /></mask></g></g></svg>
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -4,6 +4,7 @@ const config = {
   stories: ['../app/**/*.stories.@(js|ts)'],
   addons: ['@storybook/addon-a11y', '@storybook/addon-docs', '@storybook/addon-themes'],
   framework: '@storybook-vue/nuxt',
+  staticDirs: ['./.public'],
   features: {
     backgrounds: false,
   },
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
@@ -0,0 +1,11 @@
+import { addons } from 'storybook/manager-api'
+import { create } from 'storybook/theming'
+
+const npmxTheme = create({
+  brandTitle: 'npmx Storybook',
+  brandImage: '/npmx-storybook.svg',
+})
+
+addons.setConfig({
+  theme: npmxTheme,
+})
