feat: favicons dark mode transparent

.changeset/social-loops-repeat.md

@@ -0,0 +1,6 @@
+---
+'@solid-design-system/docs': patch
+---
+
+- Update favicon to support dark mode.
+

packages/docs/.storybook/assets/favicon/manifest.json

@@ -2,106 +2,9 @@
   "name": "App",
   "icons": [
     {
-      "src": "./android-icon-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./apple-icon-57x57.png",
-      "sizes": "57x57",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./apple-icon-60x60.png",
-      "sizes": "60x60",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./apple-icon-72x72.png",
-      "sizes": "72x72",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./apple-icon-114x114.png",
-      "sizes": "114x114",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./apple-icon-120x120.png",
-      "sizes": "120x120",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./apple-icon-144x144.png",
-      "sizes": "144x144",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./apple-icon-152x152.png",
-      "sizes": "152x152",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./apple-icon-180x180.png",
-      "sizes": "180x180",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./ms-icon-70x70.png",
-      "sizes": "70x70",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./ms-icon-144x144.png",
-      "sizes": "144x144",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./ms-icon-150x150.png",
-      "sizes": "150x150",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./ms-icon-310x310.png",
-      "sizes": "310x310",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./favicon-16x16.png",
-      "sizes": "16x16",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./favicon-32x32.png",
-      "sizes": "32x32",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./favicon-96x96.png",
-      "sizes": "96x96",
-      "type": "image/png",
-      "density": "4.0"
-    },
-    {
-      "src": "./favicon-256x256.png",
-      "sizes": "256x256",
-      "type": "image/png",
-      "density": "4.0"
+      "src": "./favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
     }
   ]
 }

packages/docs/.storybook/manager-head.html

@@ -1,20 +1,8 @@
-<link rel="shortcut icon" href="./favicon/favicon.ico" />
-<link rel="apple-touch-icon" sizes="57x57" href="./favicon/apple-icon-57x57.png" />
-<link rel="apple-touch-icon" sizes="60x60" href="./favicon/apple-icon-60x60.png" />
-<link rel="apple-touch-icon" sizes="72x72" href="./favicon/apple-icon-72x72.png" />
-<link rel="apple-touch-icon" sizes="76x76" href="./favicon/apple-icon-76x76.png" />
-<link rel="apple-touch-icon" sizes="114x114" href="./favicon/apple-icon-114x114.png" />
-<link rel="apple-touch-icon" sizes="120x120" href="./favicon/apple-icon-120x120.png" />
-<link rel="apple-touch-icon" sizes="144x144" href="./favicon/apple-icon-144x144.png" />
-<link rel="apple-touch-icon" sizes="152x152" href="./favicon/apple-icon-152x152.png" />
-<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-icon-180x180.png" />
-<link rel="icon" type="image/png" sizes="192x192" href="./favicon/android-icon-192x192.png" />
-<link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png" />
-<link rel="icon" type="image/png" sizes="96x96" href="./favicon/favicon-96x96.png" />
-<link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png" />
+<link rel="icon" href="./favicon/favicon-dark.svg" type="image/svg+xml" media="(prefers-color-scheme: dark)" />
+<link rel="icon" href="./favicon/favicon.svg" type="image/svg+xml" />
+<link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32.png" />
 <link rel="manifest" href="./favicon/manifest.json" />
 <meta name="msapplication-TileColor" content="#ffffff" />
-<meta name="msapplication-TileImage" content="./favicon/ms-icon-144x144.png" />
 <meta name="theme-color" content="#ffffff" />
 <meta
   name="description"