Add theme section in histoire (#10)

components/histoire.setup.ts

@@ -2,7 +2,7 @@ import { defineSetupVue3 } from '@histoire/plugin-vue';
 import { createI18n } from 'vue-i18n';
 import { createMemoryHistory, createRouter } from 'vue-router';
 
-import './src/theme.css';
+import './src/theme/main.css';
 
 export const setupVue3 = defineSetupVue3(({ app }) => {
 	app.use(

components/package.json

@@ -15,7 +15,7 @@
 	"exports": {
 		".": "./dist/index.js",
 		"./package.json": "./package.json",
-		"./styles": "./src/theme.css"
+		"./styles": "./src/theme/main.css"
 	},
 	"main": "dist/index.js",
 	"files": [

components/src/theme/colors.story.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+const colorWeights = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+</script>
+
+<template>
+	<Story title="Theme / Colors" :layout="{ type: 'grid', width: '100%' }">
+		<Variant title="Purple (Primary)">
+			<div class="swatches">
+				<span
+					v-for="weight of colorWeights"
+					:key="weight"
+					:style="`--color: var(--purple-${weight})`"
+					class="swatch"
+					:class="{ highlight: weight === 400 }"
+					:title="`--purple-${weight}`"
+				/>
+			</div>
+		</Variant>
+
+		<Variant title="Pink (Secondary)">
+			<div class="swatches">
+				<span
+					v-for="weight of colorWeights"
+					:key="weight"
+					:style="`--color: var(--pink-${weight})`"
+					class="swatch"
+					:class="{ highlight: weight === 200 }"
+					:title="`--pink-${weight}`"
+				/>
+			</div>
+		</Variant>
+
+		<Variant title="Green">
+			<div class="swatches">
+				<span
+					v-for="weight of colorWeights"
+					:key="weight"
+					:style="`--color: var(--green-${weight})`"
+					class="swatch"
+					:class="{ highlight: weight === 300 }"
+					:title="`--green-${weight}`"
+				/>
+			</div>
+		</Variant>
+
+		<Variant title="Orange">
+			<div class="swatches">
+				<span
+					v-for="weight of colorWeights"
+					:key="weight"
+					:style="`--color: var(--orange-${weight})`"
+					class="swatch"
+					:class="{ highlight: weight === 500 }"
+					:title="`--orange-${weight}`"
+				/>
+			</div>
+		</Variant>
+
+		<Variant title="Red">
+			<div class="swatches">
+				<span
+					v-for="weight of colorWeights"
+					:key="weight"
+					:style="`--color: var(--red-${weight})`"
+					class="swatch"
+					:class="{ highlight: weight === 400 }"
+					:title="`--red-${weight}`"
+				/>
+			</div>
+		</Variant>
+	</Story>
+</template>
+
+<style scoped>
+.swatches {
+	display: flex;
+	gap: 10px;
+	padding: 10px;
+}
+
+.swatch {
+	border-radius: 8px;
+	flex-basis: 1;
+	height: 100px;
+	width: 100px;
+	background-color: var(--color);
+	position: relative;
+}
+
+.swatch.highlight::after {
+	content: '⭐️';
+	position: absolute;
+	bottom: 5px;
+	right: 5px;
+}
+</style>

components/src/theme/fonts.story.vue

@@ -0,0 +1,29 @@
+<template>
+	<Story title="Theme / Fonts" :layout="{ type: 'grid', width: '100%' }">
+		<Variant title="Display (Poppins)">
+			<p class="display" contenteditable>The quick brown fox jumps over the lazy dog</p>
+		</Variant>
+
+		<Variant title="Body (Inter)">
+			<p class="body" contenteditable>The quick brown fox jumps over the lazy dog</p>
+		</Variant>
+
+		<Variant title="Code (Fira Code)">
+			<p class="code" contenteditable>The quick brown fox jumps over the lazy dog</p>
+		</Variant>
+	</Story>
+</template>
+
+<style scoped>
+.display {
+	font-family: var(--family-display);
+}
+
+.body {
+	font-family: var(--family-body);
+}
+
+.code {
+	font-family: var(--family-code);
+}
+</style>

components/src/theme/main.css

@@ -0,0 +1,65 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@300;500;700&family=Poppins:wght@600&display=swap');
+
+:root {
+	--family-display: 'Poppins', sans-serif;
+	--family-body: 'Inter', sans-serif;
+	--family-code: 'Fira Code', monospace;
+
+	--primary: var(--purple-400);
+	--secondary: var(--pink-200);
+
+	--purple-50: #ede5ff;
+	--purple-100: #d0c0fd;
+	--purple-200: #af95fd;
+	--purple-300: #8968ff;
+	--purple-400: #6644ff;
+	--purple-500: #3419fd;
+	--purple-600: #1216f7;
+	--purple-700: #000cef;
+	--purple-800: #0004eb;
+	--purple-900: #0000dc;
+
+	--pink-50: #fee7f7;
+	--pink-100: #fcc2eb;
+	--pink-200: #ff99dd;
+	--pink-300: #ff6ecc;
+	--pink-400: #ff4cba;
+	--pink-500: #ff28a7;
+	--pink-600: #f527a1;
+	--pink-700: #dc2798;
+	--pink-800: #c52791;
+	--pink-900: #9a2685;
+
+	--green-50: #dff6f1;
+	--green-100: #afe9d9;
+	--green-200: #78dcc1;
+	--green-300: #2ecda8;
+	--green-400: #00c095;
+	--green-500: #00b284;
+	--green-600: #00a476;
+	--green-700: #009366;
+	--green-800: #008258;
+	--green-900: #00653c;
+
+	--orange-50: #fff4e3;
+	--orange-100: #ffe3ba;
+	--orange-200: #ffd18f;
+	--orange-300: #ffbe64;
+	--orange-400: #ffb048;
+	--orange-500: #ffa339;
+	--orange-600: #fa9736;
+	--orange-700: #f38832;
+	--orange-800: #ec7a2f;
+	--orange-900: #e0642b;
+
+	--red-50: #fce5e9;
+	--red-100: #f7bdc8;
+	--red-200: #f193a5;
+	--red-300: #ea6b82;
+	--red-400: #e35169;
+	--red-500: #dd3f53;
+	--red-600: #cd3a51;
+	--red-700: #b7344d;
+	--red-800: #a32f4a;
+	--red-900: #802442;
+}