diff --git a/kwa-ui/index.html b/kwa-ui/index.html
index 9e5fc8f..f9c2c57 100644
--- a/kwa-ui/index.html
+++ b/kwa-ui/index.html
@@ -1,8 +1,9 @@
-
+
+
Vite App
diff --git a/kwa-ui/package.json b/kwa-ui/package.json
index d3eac2c..eb66a61 100644
--- a/kwa-ui/package.json
+++ b/kwa-ui/package.json
@@ -11,6 +11,7 @@
"type-check": "vue-tsc --build"
},
"dependencies": {
+ "@fontsource/source-sans-3": "^5.2.9",
"@primeuix/themes": "^2.0.3",
"pinia": "^3.0.4",
"primeicons": "^7.0.0",
diff --git a/kwa-ui/src/assets/base.css b/kwa-ui/src/assets/base.css
index 90dc246..c0af3b2 100644
--- a/kwa-ui/src/assets/base.css
+++ b/kwa-ui/src/assets/base.css
@@ -1,53 +1,20 @@
-/* color palette from */
:root {
- --vt-c-white: #ffffff;
- --vt-c-white-soft: #f8f8f8;
- --vt-c-white-mute: #f2f2f2;
-
- --vt-c-black: #181818;
- --vt-c-black-soft: #222222;
- --vt-c-black-mute: #282828;
-
- --vt-c-indigo: #2c3e50;
-
- --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
- --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
- --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
- --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
- --vt-c-text-light-1: var(--vt-c-indigo);
- --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
- --vt-c-text-dark-1: var(--vt-c-white);
- --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+ color-scheme: light;
+ color: #12213a;
+ background-color: #eef3fa;
+ font-family: 'Source Sans 3', sans-serif;
+ font-size: 15px;
+ line-height: 1.6;
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
-/* semantic color variables for this project */
-:root {
- --color-background: var(--vt-c-white);
- --color-background-soft: var(--vt-c-white-soft);
- --color-background-mute: var(--vt-c-white-mute);
-
- --color-border: var(--vt-c-divider-light-2);
- --color-border-hover: var(--vt-c-divider-light-1);
-
- --color-heading: var(--vt-c-text-light-1);
- --color-text: var(--vt-c-text-light-1);
-
- --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --color-background: var(--vt-c-black);
- --color-background-soft: var(--vt-c-black-soft);
- --color-background-mute: var(--vt-c-black-mute);
-
- --color-border: var(--vt-c-divider-dark-2);
- --color-border-hover: var(--vt-c-divider-dark-1);
-
- --color-heading: var(--vt-c-text-dark-1);
- --color-text: var(--vt-c-text-dark-2);
- }
+html {
+ min-height: 100%;
+ background-color: #eef3fa;
+ -webkit-text-size-adjust: 100%;
}
*,
@@ -60,13 +27,13 @@
body {
min-height: 100vh;
- color: var(--color-text);
- background: var(--color-background);
- transition: color 0.5s, background-color 0.5s;
- line-height: 1.6;
- font-family: 'Segoe UI Variable', 'Segoe UI', Aptos, sans-serif;
- font-size: 15px;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ color: inherit;
+ background: inherit;
+}
+
+button,
+input,
+select,
+textarea {
+ font: inherit;
}
\ No newline at end of file
diff --git a/kwa-ui/src/main.ts b/kwa-ui/src/main.ts
index 31ed027..ae0dd07 100644
--- a/kwa-ui/src/main.ts
+++ b/kwa-ui/src/main.ts
@@ -1,3 +1,7 @@
+import '@fontsource/source-sans-3/latin-400.css'
+import '@fontsource/source-sans-3/latin-500.css'
+import '@fontsource/source-sans-3/latin-600.css'
+import '@fontsource/source-sans-3/latin-700.css'
import './assets/main.css'
import { createApp } from 'vue'
@@ -18,7 +22,7 @@ app.use(PrimeVue, {
theme: {
preset: Aura,
options: {
- darkModeSelector: 'system',
+ darkModeSelector: false,
},
},
})