Setup theme variables file for component use (#9)

directus · Jun 20, 2023 · 8d3331a · 8d3331a
1 parent a8b5d7a
commit 8d3331a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/components/histoire.setup.ts b/components/histoire.setup.ts
@@ -2,6 +2,8 @@ import { defineSetupVue3 } from '@histoire/plugin-vue';
 import { createI18n } from 'vue-i18n';
 import { createMemoryHistory, createRouter } from 'vue-router';
 
+import './src/theme.css';
+
 export const setupVue3 = defineSetupVue3(({ app }) => {
 	app.use(
 		createRouter({

diff --git a/components/package.json b/components/package.json
@@ -14,7 +14,8 @@
 	"type": "module",
 	"exports": {
 		".": "./dist/index.js",
-		"./package.json": "./package.json"
+		"./package.json": "./package.json",
+		"./styles": "./src/theme.css"
 	},
 	"main": "dist/index.js",
 	"files": [

diff --git a/components/src/theme.css b/components/src/theme.css
@@ -0,0 +1,13 @@
+@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-100: #f0eeff;
+	--primary-500: #6644ff;
+
+	--secondary-100: #ffeef9;
+	--secondary-500: #ff99dd;
+}