Adding gitcoin theme (gitcoinco#33)

* adding gitcoin theme

* fixing build

.storybook/GitcoinTheme.ts

@@ -0,0 +1,9 @@
+import { create } from "@storybook/theming";
+
+export default create({
+  base: "dark",
+  brandTitle: "Gitcoin UI Kit",
+  brandUrl: "https://gitcoin.co",
+  brandImage: "https://ipfs.io/ipfs/QmXuheKdZJwvCrZKF1Py5ez6H3jV9XNtDLTXbPuQknUgzr",
+  brandTarget: "_self",
+});

.storybook/Manager.ts

@@ -0,0 +1,7 @@
+import { addons } from "@storybook/manager-api";
+
+import GitcoinTheme from "./GitcoinTheme";
+
+addons.setConfig({
+  theme: GitcoinTheme,
+});

.storybook/preview.ts

@@ -15,6 +15,11 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    options: {
+      storySort: {
+        order: ["Welcome", "Features", "Components", "Primitives", "Shadcn", "Styles", "*"],
+      },
+    },
   },
   loaders: [mswLoader],
   msw: {

package.json

@@ -37,10 +37,12 @@
     "@storybook/addon-themes": "8.3.5",
     "@storybook/blocks": "8.3.5",
     "@storybook/builder-vite": "8.3.5",
+    "@storybook/manager-api": "^8.4.3",
     "@storybook/react": "8.3.5",
     "@storybook/react-vite": "8.3.5",
     "@storybook/test": "8.3.5",
     "@storybook/test-runner": "^0.19.1",
+    "@storybook/theming": "^8.4.3",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",

src/tokens/colors.mdx

@@ -2,7 +2,7 @@ import { Meta, ColorPalette, ColorItem, Title } from "@storybook/blocks";
 
 import { colors } from "./colors";
 
-<Meta title="Examples/Tokens/Colors" />
+<Meta title="Styles/Tokens/Colors" />
 
 <Title>Color Palette</Title>
 

src/tokens/icons.mdx

@@ -2,7 +2,7 @@ import { Meta, Title, IconGallery, IconItem } from "@storybook/blocks";
 
 import { icons, Icon } from "@/primitives/Icon";
 
-<Meta title="Examples/Tokens/Icons" />
+<Meta title="Styles/Tokens/Icons" />
 
 <Title>Icons</Title>
 These are the icons being used in our design system. They are available as React components.

src/typography.mdx

@@ -1,6 +1,6 @@
 import { Meta, Typeset } from "@storybook/blocks";
 
-<Meta title="Examples/Typography" />
+<Meta title="Styles/Typography" />
 
 MONO
 

src/welcome/welcome.mdx

@@ -0,0 +1,9 @@
+import { Meta, Canvas, Story, Description, Controls, Stories } from "@storybook/blocks";
+
+<Meta title="Welcome/Intro" />
+
+# Welcome to the Gitcoin UI Kit.
+
+Gitcoin's UI kit provides a consistent set of styled React components which can be used to build applications with the Allo Protocol and Gitcoin Stack.
+
+This UI kit is maintained by Gitcoin Labs Engineering, and all are welcome to contribute.