openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

chore: complete colour-redesign follow-up — PWA theme sync, glass tokens, print normalisation (v0.20.16)

Browse Source 
- index.html: theme-color #2563EB → #4F46E5 (Indigo-600)
- oikos-install-prompt.js: CSS fallback #2554C7 → #4338CA; #fff → var(--color-text-on-accent)
- tokens.css: add --glass-inset-{soft,base,medium,elevated,strong} tokens
- glass.css: replace 9 inset rgba() literals with --glass-inset-* token refs
- tasks.css: replace 1 inset rgba() literal with --glass-inset-base
- layout.css: normalise @media print shorthand hex to six-digit notation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ulas Kalayci
2026-04-19 22:22:30 +02:00
parent 1113959768
commit e89f4259bc
8 changed files with 49 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/components/oikos-install-prompt.js
+2 -2
View File
@@ -174,8 +174,8 @@ class OikosInstallPrompt extends HTMLElement {
.btn-install {
flex-shrink: 0;
padding: var(--space-2, 8px) var(--space-4, 16px);
background: var(--color-btn-primary, #2554C7);
color: #fff;
background: var(--color-btn-primary, #4338CA);
color: var(--color-text-on-accent, #fff);
border: none;
border-radius: var(--radius-sm, 8px);
font-family: var(--font-sans, system-ui);
public/index.html
+1 -1
View File
@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=5" />
<!-- PWA / Theme -->
<meta name="theme-color" content="#2563EB" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#4F46E5" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#222220" media="(prefers-color-scheme: dark)" />
<meta name="mobile-web-app-capable" content="yes" />
public/styles/glass.css
+9 -9
View File
@@ -122,13 +122,13 @@
border-radius: var(--radius-glass-button);
box-shadow:
var(--shadow-sm),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
var(--glass-inset-medium);
}
.btn--primary:hover {
box-shadow:
var(--shadow-md),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
var(--glass-inset-soft);
}
.btn--secondary {
@@ -150,14 +150,14 @@
.fab {
box-shadow:
var(--shadow-lg),
inset 0 1px 0 rgba(255, 255, 255, 0.28),
var(--glass-inset-elevated),
inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.fab:hover {
box-shadow:
var(--shadow-lg),
inset 0 1px 0 rgba(255, 255, 255, 0.32),
var(--glass-inset-strong),
inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}
@@ -252,7 +252,7 @@ textarea.form-input {
border-radius: var(--radius-glass-card);
box-shadow:
var(--glass-shadow-md),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
var(--glass-inset-soft);
}
/* ================================================================
@@ -273,7 +273,7 @@ textarea.form-input {
* Immer aktiv (kein backdrop-filter nötig)
* ================================================================ */
.nav-badge {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
box-shadow: var(--glass-inset-base);
}
/* ================================================================
@@ -458,9 +458,9 @@ html.navigating .app-content *::after {
* 23. FAB — Attention Pulse
* ================================================================ */
@keyframes fab-ring-pulse {
0% { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.28), 0 0 0 0 color-mix(in srgb, var(--module-accent, var(--color-btn-primary)) 50%, transparent); }
60% { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.28), 0 0 0 10px transparent; }
100% { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.28), 0 0 0 0 transparent; }
0% { box-shadow: var(--shadow-lg), var(--glass-inset-elevated), 0 0 0 0 color-mix(in srgb, var(--module-accent, var(--color-btn-primary)) 50%, transparent); }
60% { box-shadow: var(--shadow-lg), var(--glass-inset-elevated), 0 0 0 10px transparent; }
100% { box-shadow: var(--shadow-lg), var(--glass-inset-elevated), 0 0 0 0 transparent; }
}
.fab {
public/styles/layout.css
+3 -3
View File
@@ -1736,13 +1736,13 @@
}
body {
background: #fff;
color: #000;
background: #ffffff;
color: #000000;
}
.card {
box-shadow: none;
border: 1px solid #ddd;
border: 1px solid #cccccc;
break-inside: avoid;
}
public/styles/tasks.css
+1 -1
View File
@@ -133,7 +133,7 @@
backdrop-filter: var(--blur-xs);
-webkit-backdrop-filter: var(--blur-xs);
border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
box-shadow: var(--glass-inset-base);
}
}
public/styles/tokens.css
+7
View File
@@ -308,6 +308,13 @@
--glass-highlight: rgba(255, 255, 255, 0.70);
--glass-highlight-subtle: rgba(255, 255, 255, 0.35);
/* d2) Inset-Specular: Oberrand-Sheen für Glass-Elemente (volle inset-Kurzform) */
--glass-inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.18);
--glass-inset-base: inset 0 1px 0 rgba(255, 255, 255, 0.20);
--glass-inset-medium: inset 0 1px 0 rgba(255, 255, 255, 0.22);
--glass-inset-elevated: inset 0 1px 0 rgba(255, 255, 255, 0.28);
--glass-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.32);
/* e) Glass-Schatten */
--glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.55);
--glass-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(255, 255, 255, 0.50);