kohlerjoshua/FHGR_Frontend_Group_3_Project
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Centralize readable app theme colors

Browse Source
This commit is contained in:
André Rüegger 2026-06-01 08:16:07 +02:00
parent c136f01f2e
commit 3cf07d0e1b
6 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
blog-list.html
View File

@ -16,6 +16,7 @@
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Responsive Design --> <!-- Responsive Design -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/responsive.css">
<style> <style>
* { box-sizing: border-box; } * { box-sizing: border-box; }

1
blog-post.html
View File

@ -11,6 +11,7 @@
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Responsive Design --> <!-- Responsive Design -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/responsive.css">
<style> <style>
* { box-sizing: border-box; } * { box-sizing: border-box; }

54
css/style.css
View File

@ -1,3 +1,57 @@
/* App-wide theme tokens
Keep Open Props' sizing/spacing, but pin semantic colors to a readable
light theme so pages do not inherit low-contrast dark-mode surfaces. */
:root {
color-scheme: light;
--surface-1: #ffffff;
--surface-2: #f8fafc;
--surface-3: #eef2f7;
--surface-4: #cbd5e1;
--text-1: #17202a;
--text-2: #3d4b5c;
--muted-text: #64748b;
--app-border: #cbd5e1;
--app-focus: #3157d5;
}
body {
background: var(--gray-0);
color: var(--text-1);
}
input,
select,
textarea,
button {
color: var(--text-1);
}
input[type="file"] {
background: var(--surface-2);
color: var(--text-1);
}
input[type="file"]::file-selector-button {
border: 1px solid var(--app-border);
border-radius: 6px;
background: var(--surface-1);
color: var(--text-1);
padding: 0.35rem 0.7rem;
margin-right: 0.75rem;
cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
background: var(--surface-3);
}
input:focus,
select:focus,
textarea:focus {
outline: 2px solid var(--app-focus);
outline-offset: 2px;
}
/* Mobile-first approach */ /* Mobile-first approach */
.map-container { .map-container {
height: 100vh; height: 100vh;

1
journey-edit.html
View File

@ -16,6 +16,7 @@
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Responsive Design --> <!-- Responsive Design -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/responsive.css">
<style> <style>

1
login.html
View File

@ -16,6 +16,7 @@
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Responsive Design --> <!-- Responsive Design -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/responsive.css">
<style> <style>
* { box-sizing: border-box; } * { box-sizing: border-box; }

1
map-page.html
View File

@ -32,6 +32,7 @@
/> />
<!-- Responsive Design --> <!-- Responsive Design -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/responsive.css">
<style> <style>
/* Use Open Props design tokens */ /* Use Open Props design tokens */