replace AppStyles.vue with theme.scss (#148)

okTurtles · Aug 29, 2024 · 39bc576 · 39bc576
1 parent 9c2c96f
commit 39bc576
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 45 deletions.
diff --git a/src/components/AppStyles.vue b/src/components/AppStyles.vue
diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro
@@ -1,7 +1,6 @@
 ---
 import BaseHead from '../components/BaseHead.astro';
 import Header from '../components/Header.vue';
-import AppStyles from '../components/AppStyles.vue';
 import Footer from '../components/Footer.vue';
 import PageWrapper from '../components/pageWrapper.vue';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
@@ -14,7 +13,6 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
 	</head>
 	<body>
 		<PageWrapper client:only="vue">
-			<AppStyles/>
 			<Header client:only="vue"  />
 			<main>
 				<slot />

diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
@@ -0,0 +1,42 @@
+:root {
+  --primary_0: #0288d1;
+  --primary_0_1: #02679e;
+  --primary_1: #b3dbf2;
+  --primary_2: #e5f3fA;
+  --success_0: #40854f;
+  --success_0_1: #2f633b;
+  --success_1: #bfd4c3;
+  --success_2: #e4f1e7;
+  --warning_0: #ff6f00;
+  --warning_0_1: #cc5900;
+  --warning_0_text: #73492a;
+  --warning_0_2: ;
+  --warning_1: #ffcea8;
+  --warning_2: #ffeee0;
+  --danger_0: #c62828;
+  --danger_0_1: #9c1f1f;
+  --danger_1: #ebb3b3;
+  --danger_2: #faebeb;
+  --text_0: #363636;
+  --text_1: #707070;
+  --text_2: #939393;
+  --general_0: #dbdbdb;
+  --general_1: #ededed;
+  --general_1_opacity_6: rgba(237,237,237,0.6);
+  --general_2: #f5f5f5;
+  --background_0: #ffffff;
+  --background_0_opacity_0: rgba(255,255,255,0);
+  --text-size: 16px;
+  --orange: #F89202;
+  --blue: #5DC9F1;
+  --green: #A1D10E;
+}
+
+/*
+NOTE: if the app supports 'dark-theme' in the future, we can do stuff like,
+
+:root[data-theme="dark"] {
+  --primary_0: ...;
+  --primary_0_1: ...;
+}
+*/
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -2,6 +2,7 @@
 
 @import "_reset";
 @import "_misc";
+@import "_theme";
 @import "_variables";
 @import "_typography"; // make sure this comes after _variables
 @import "_utilities";