[Task]: Add MWI theme story

histoire-setup.ts

@@ -0,0 +1,2 @@
+import "./histoire.css";
+import "./src/style.css"

histoire.config.ts

@@ -2,9 +2,20 @@ import { defineConfig } from 'histoire'
 import { HstVue } from '@histoire/plugin-vue'
 
 const config = defineConfig({
-    plugins: [
-        HstVue(),
-    ],
+    plugins: [HstVue()],
+    setupFile: "./histoire-setup.ts",
+    tree: {
+        groups: [
+            {
+                id: "histoire-controls",
+                title: "Histoire Controls",
+            },
+            {
+                id: "design-system",
+                title: "Design System",
+            },
+        ],
+    },
 })
 
 export default config

histoire.css

@@ -0,0 +1,108 @@
+:root {
+    --color-primary: var(--color-space-600);
+    --color-primary-hover: var(--color-space-500);
+    --color-secondary: var(--color-burble-350);
+    --color-secondary-hover: var(--color-burble-300);
+    --color-progress: var(--color-burble-350);
+    --color-hitpoints: var(--color-jade-500);
+    --color-manapoints: var(--color-ocean-400);
+    --color-ability: #dd7b5c;
+    --color-ability-hover: #e49880;
+    --color-market-sell: #d95961;
+    --color-market-sell-hover: #e38289;
+    --color-market-buy: #2fc4a7;
+    --color-market-buy-hover: #59d0b9;
+    --color-success: var(--color-orange-550);
+    --color-success-hover: var(--color-orange-500);
+    --color-warning: #db3333;
+    --color-warning-hover: #eb3f3f;
+    --color-empty: #d0d0d0;
+    --color-empty-hover: #e2e2e2;
+    --color-disabled: #959595;
+    --color-divider: var(--color-midnight-400);
+    --color-text-dark-mode: var(--color-neutral-100);
+    --color-background: #131c37;
+    --color-background-game: var(--color-midnight-900);
+    --color-burble-200: #c7b5e3;
+    --color-burble-250: #baa2db;
+    --color-burble-300: #ac8fd4;
+    --color-burble-350: #a272e4;
+    --color-burble-400: #906ac6;
+    --color-carol-300: #dd7b5c;
+    --color-jade-300: #82dcca;
+    --color-jade-400: #59d0b9;
+    --color-jade-500: #2fc4a7;
+    --color-midnight-100: #454771;
+    --color-midnight-200: #3f4166;
+    --color-midnight-300: #393a5b;
+    --color-midnight-400: #323450;
+    --color-midnight-500: #2c2e45;
+    --color-midnight-550: #292a40;
+    --color-midnight-600: #26273a;
+    --color-midnight-700: #20212f;
+    --color-midnight-800: #191a24;
+    --color-midnight-900: #131419;
+    --color-midnight-100-opacity-50: rgba(69, 71, 113, 0.5019607843137255);
+    --color-midnight-200-opacity-50: rgba(63, 65, 102, 0.5019607843137255);
+    --color-midnight-300-opacity-50: rgba(57, 58, 91, 0.5019607843137255);
+    --color-midnight-400-opacity-50: rgba(50, 52, 80, 0.5019607843137255);
+    --color-midnight-500-opacity-50: rgba(44, 46, 69, 0.5019607843137255);
+    --color-midnight-600-opacity-50: rgba(38, 39, 58, 0.5019607843137255);
+    --color-midnight-700-opacity-50: rgba(32, 33, 47, 0.5019607843137255);
+    --color-midnight-800-opacity-50: rgba(25, 26, 36, 0.5019607843137255);
+    --color-midnight-900-opacity-50: rgba(19, 20, 25, 0.5019607843137255);
+    --color-midnight-100-opacity-25: rgba(69, 71, 113, 0.25098039215686274);
+    --color-midnight-200-opacity-25: rgba(63, 65, 102, 0.25098039215686274);
+    --color-midnight-300-opacity-25: rgba(57, 58, 91, 0.25098039215686274);
+    --color-midnight-400-opacity-25: rgba(50, 52, 80, 0.25098039215686274);
+    --color-midnight-500-opacity-25: rgba(44, 46, 69, 0.25098039215686274);
+    --color-midnight-600-opacity-25: rgba(38, 39, 58, 0.25098039215686274);
+    --color-midnight-700-opacity-25: rgba(32, 33, 47, 0.25098039215686274);
+    --color-midnight-800-opacity-25: rgba(25, 26, 36, 0.25098039215686274);
+    --color-midnight-900-opacity-25: rgba(19, 20, 25, 0.25098039215686274);
+    --color-neutral-50: #f3f3f3;
+    --color-neutral-100: #e7e7e7;
+    --color-neutral-200: #d0d0d0;
+    --color-ocean-200: #a5d1f3;
+    --color-ocean-300: #77baec;
+    --color-ocean-350: #61afe9;
+    --color-ocean-400: #4aa3e6;
+    --color-ocean-500: #1d8ce0;
+    --color-ocean-600: #1770b3;
+    --color-ocean-700: #115486;
+    --color-ocean-800: #0c385a;
+    --color-orange-400: #fbb54b;
+    --color-orange-500: #faa21e;
+    --color-orange-550: #ee9a1d;
+    --color-orange-600: #e1921b;
+    --color-orange-650: #c57a09;
+    --color-orange-700: #966112;
+    --color-scarlet-400: #d95c64;
+    --color-scarlet-500: #d0333d;
+    --color-scarlet-600: #a62931;
+    --color-scarlet-700: #7d1f25;
+    --color-scarlet-800: #531418;
+    --color-space-100: #dde2f8;
+    --color-space-200: #bbc5f1;
+    --color-space-250: #a9b6ed;
+    --color-space-300: #98a7e9;
+    --color-space-400: #768ae2;
+    --color-space-500: #546ddb;
+    --color-space-600: #4357af;
+    --color-space-650: #3c4e9d;
+    --color-space-700: #35458b;
+    --color-space-750: #2e3c79;
+    --color-space-800: #273366;
+    --color-space-850: #202a54;
+    --color-space-880: #1c2549;
+    --color-space-900: #192142;
+    --color-space-950: #121830;
+}
+
+body {
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+}
+
+code {
+    font-family: "Operator Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace !important;
+}