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

1
kwa-ui/package.json
View File

@@ -11,6 +11,7 @@
"type-check": "vue-tsc --build" "type-check": "vue-tsc --build"
}, },
"dependencies": { "dependencies": {
"@fontsource/source-sans-3": "^5.2.9",
"@primeuix/themes": "^2.0.3", "@primeuix/themes": "^2.0.3",
"pinia": "^3.0.4", "pinia": "^3.0.4",
"primeicons": "^7.0.0", "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 { :root {
--vt-c-white: #ffffff; color-scheme: light;
--vt-c-white-soft: #f8f8f8; color: #12213a;
--vt-c-white-mute: #f2f2f2; background-color: #eef3fa;
font-family: 'Source Sans 3', sans-serif;
--vt-c-black: #181818; font-size: 15px;
--vt-c-black-soft: #222222; line-height: 1.6;
--vt-c-black-mute: #282828; font-synthesis: none;
text-rendering: optimizeLegibility;
--vt-c-indigo: #2c3e50; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--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);
} }
/* semantic color variables for this project */ html {
:root { min-height: 100%;
--color-background: var(--vt-c-white); background-color: #eef3fa;
--color-background-soft: var(--vt-c-white-soft); -webkit-text-size-adjust: 100%;
--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);
}
} }
*, *,
@@ -60,13 +27,13 @@
body { body {
min-height: 100vh; min-height: 100vh;
color: var(--color-text); color: inherit;
background: var(--color-background); background: inherit;
transition: color 0.5s, background-color 0.5s; }
line-height: 1.6;
font-family: 'Segoe UI Variable', 'Segoe UI', Aptos, sans-serif; button,
font-size: 15px; input,
text-rendering: optimizeLegibility; select,
-webkit-font-smoothing: antialiased; textarea {
-moz-osx-font-smoothing: grayscale; 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 './assets/main.css'
import { createApp } from 'vue' import { createApp } from 'vue'
@@ -18,7 +22,7 @@ app.use(PrimeVue, {
theme: { theme: {
preset: Aura, preset: Aura,
options: { options: {
darkModeSelector: 'system', darkModeSelector: false,
}, },
}, },
}) })