kwa.fr/kwa-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed user interface rendering with an embedded font and client-independent settings

Browse Source
This commit is contained in:
Sylvain Schneider
2026-05-22 11:01:43 +02:00
parent 7f4cfd0ea9
commit f736e6519b
4 changed files with 31 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
kwa-ui/index.html
View File

@@ -1,8 +1,9 @@
<!DOCTYPE html>
<html lang="">
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="color-scheme" content="light">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>

1
kwa-ui/package.json
View File

@@ -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",

79
kwa-ui/src/assets/base.css
View File

@@ -1,53 +1,20 @@
/* color palette from <https://github.com/vuejs/theme> */
: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;
}

6
kwa-ui/src/main.ts
View File

@@ -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,
},
},
})