xTr1m/RolemasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add semantic frontend design tokens

Browse Source
This commit is contained in:
Frank Tovar
2026-03-21 13:07:57 +01:00
parent 62322bb620
commit 26591424d0
2 changed files with 76 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/RolemasterDb.App/wwwroot/app.css
View File

@@ -1,23 +1,61 @@
:root {
--paper: #f7f1e4;
--paper-strong: #fff9ee;
--ink: #261a14;
--ink-soft: #5a4c41;
--accent: #8f5a2f;
--accent-strong: #b8793b;
--panel: rgba(255, 250, 240, 0.82);
--line: rgba(111, 87, 59, 0.18);
--shadow: 0 18px 40px rgba(41, 22, 11, 0.12);
--bg-canvas: #f4ecda;
--bg-canvas-strong: #eadbc0;
--bg-elevated: #fff9ee;
--bg-overlay: rgba(38, 26, 20, 0.44);
--surface-1: rgba(255, 250, 240, 0.82);
--surface-2: rgba(255, 255, 255, 0.72);
--surface-3: rgba(255, 252, 244, 0.75);
--surface-tooling: rgba(247, 239, 225, 0.65);
--text-primary: #261a14;
--text-secondary: #5a4c41;
--text-tertiary: #7b6243;
--text-on-accent: #fff8ef;
--border-subtle: rgba(111, 87, 59, 0.12);
--border-default: rgba(111, 87, 59, 0.18);
--border-strong: rgba(111, 87, 59, 0.28);
--focus-ring: rgba(184, 121, 59, 0.35);
--focus-border: rgba(184, 121, 59, 0.45);
--shadow-1: 0 18px 40px rgba(41, 22, 11, 0.12);
--shadow-2: 0 28px 60px rgba(41, 22, 11, 0.24);
--accent-1: #f7ead8;
--accent-2: #e7c89e;
--accent-3: #c38a4d;
--accent-4: #b8793b;
--accent-5: #8f5a2f;
--success-1: #e8f1e3;
--success-2: #bad0ab;
--success-3: #668a53;
--warning-1: #fff2df;
--warning-2: #f0bf7f;
--warning-3: #b8793b;
--danger-1: #f7e2de;
--danger-2: #d9897d;
--danger-3: #8d2b1e;
--info-1: #e5eef4;
--info-2: #9fb8c8;
--info-3: #4f7086;
--font-body: "Domine", Georgia, serif;
--font-heading: "Source Sans 3", "Segoe UI", sans-serif;
/* Temporary compatibility aliases while existing page styles are migrated. */
--paper: var(--bg-canvas);
--paper-strong: var(--bg-elevated);
--ink: var(--text-primary);
--ink-soft: var(--text-secondary);
--accent: var(--accent-5);
--accent-strong: var(--accent-4);
--panel: var(--surface-1);
--line: var(--border-default);
--shadow: var(--shadow-1);
}
html, body {
min-height: 100%;
background:
radial-gradient(circle at top, rgba(240, 223, 185, 0.55), transparent 28%),
linear-gradient(180deg, #eadbc0 0%, #f4ecda 38%, #e2d3b7 100%);
color: var(--ink);
linear-gradient(180deg, var(--bg-canvas-strong) 0%, var(--bg-canvas) 38%, #e2d3b7 100%);
color: var(--text-primary);
font-family: var(--font-body);
font-weight: 400;
}
@@ -67,7 +105,7 @@ b {
}
a, .btn-link {
color: var(--accent);
color: var(--accent-5);
}
a:hover {
@@ -88,10 +126,10 @@ textarea {
}
.panel {
border: 1px solid var(--line);
border: 1px solid var(--border-default);
border-radius: 24px;
background: var(--panel);
box-shadow: var(--shadow);
background: var(--surface-1);
box-shadow: var(--shadow-1);
}
.panel {
@@ -105,7 +143,7 @@ textarea {
.panel-copy,
.muted {
color: var(--ink-soft);
color: var(--text-secondary);
}
.lookup-form {
@@ -152,8 +190,8 @@ textarea {
}
.input-shell:focus {
outline: 2px solid rgba(184, 121, 59, 0.35);
border-color: rgba(184, 121, 59, 0.45);
outline: 2px solid var(--focus-ring);
border-color: var(--focus-border);
}
.action-row {
@@ -167,8 +205,8 @@ textarea {
border: none;
border-radius: 999px;
padding: 0.8rem 1.15rem;
background: linear-gradient(135deg, var(--accent-strong), var(--accent));
color: #fff8ef;
background: linear-gradient(135deg, var(--accent-4), var(--accent-5));
color: var(--text-on-accent);
letter-spacing: 0.04em;
box-shadow: 0 10px 18px rgba(143, 90, 47, 0.2);
}