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

feat: rebrand accent color to Violet #6c3aed

Browse Source 
Replace Amber brand color with Violet (#6c3aed) across the entire app.

- tokens.css: accent palette → Violet (light #6c3aed, dark #a78bfa)
- Logo, favicon, PWA icons, Apple touch icon regenerated
- GitHub Pages (index.html, install.html): accent + inline SVG updated
- generate-icons.js: gradient updated for future icon generation
- Semantic colors (warning, notes, meals) intentionally unchanged
This commit is contained in:
Ulas Kalayci
2026-05-06 16:06:43 +02:00
parent 3603a946c4
commit 9883abda79
11 changed files with 75 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/index.html
+11 -11
View File
@@ -28,10 +28,10 @@
--text-1: #181620;
--text-2: #5E5C6B;
--text-3: #8F8D9A;
--accent: #92400E;
--accent-hover: #78350F;
--accent-soft: #FEF3C7;
--accent-glow: rgba(146, 64, 14, 0.12);
--accent: #6c3aed;
--accent-hover: #5b2fd4;
--accent-soft: #ede9fe;
--accent-glow: rgba(108, 58, 237, 0.12);
--code-bg: #1C1B22;
--code-text: #E2E1EC;
--radius: 16px;
@@ -48,10 +48,10 @@
--text-1: #F5F4F1;
--text-2: #AEADB0;
--text-3: #8E8D89;
--accent: #FBBF24;
--accent-hover: #F59E0B;
--accent-soft: #2C1E00;
--accent-glow: rgba(251, 191, 36, 0.15);
--accent: #a78bfa;
--accent-hover: #9066f5;
--accent-soft: #1e1040;
--accent-glow: rgba(167, 139, 250, 0.15);
--code-bg: #141413;
--code-text: #E2E1DC;
--shadow-card: 0 1px 3px rgba(0,0,0,0.25);
@@ -63,8 +63,8 @@
:root:not([data-theme="light"]) {
--bg: #1A1A18; --bg-alt: #141413; --surface: #222220; --border: #2A2A28;
--text-1: #F5F4F1; --text-2: #AEADB0; --text-3: #8E8D89;
--accent: #FBBF24; --accent-hover: #F59E0B; --accent-soft: #2C1E00;
--accent-glow: rgba(251, 191, 36, 0.15);
--accent: #a78bfa; --accent-hover: #9066f5; --accent-soft: #1e1040;
--accent-glow: rgba(167, 139, 250, 0.15);
--code-bg: #141413; --code-text: #E2E1DC;
--shadow-card: 0 1px 3px rgba(0,0,0,0.25); --shadow-lg: 0 8px 24px rgba(0,0,0,0.45);
--shadow-hero: 0 20px 60px rgba(0,0,0,0.55);
@@ -331,7 +331,7 @@
<nav>
<div class="wrap">
<a href="#" class="nav-logo">
<svg viewBox="0 0 160 160" fill="none"><defs><linearGradient id="g" x1="0" y1="0" x2="160" y2="160" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#B45309"></stop><stop offset="100%" stop-color="#92400E"></stop></linearGradient></defs><rect width="160" height="160" rx="36" fill="url(#g)"></rect><path d="M80 36L36 72V120C36 122.2 37.8 124 40 124H68V96H92V124H120C122.2 124 124 122.2 124 120V72L80 36Z" fill="white"></path><rect x="100" y="46" width="12" height="22" rx="2" fill="white"></rect></svg>
<svg viewBox="0 0 160 160" fill="none"><defs><linearGradient id="g" x1="0" y1="0" x2="160" y2="160" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#8b5cf6"></stop><stop offset="100%" stop-color="#6c3aed"></stop></linearGradient></defs><rect width="160" height="160" rx="36" fill="url(#g)"></rect><path d="M80 36L36 72V120C36 122.2 37.8 124 40 124H68V96H92V124H120C122.2 124 124 122.2 124 120V72L80 36Z" fill="white"></path><rect x="100" y="46" width="12" height="22" rx="2" fill="white"></rect></svg>
Oikos
</a>
<div class="nav-right">
docs/install.html
+11 -11
View File
@@ -28,10 +28,10 @@
--text-1: #181620;
--text-2: #5E5C6B;
--text-3: #8F8D9A;
--accent: #92400E;
--accent-hover: #78350F;
--accent-soft: #FEF3C7;
--accent-glow: rgba(146, 64, 14, 0.12);
--accent: #6c3aed;
--accent-hover: #5b2fd4;
--accent-soft: #ede9fe;
--accent-glow: rgba(108, 58, 237, 0.12);
--success: #15803D;
--success-bg: #F0FDF4;
--warning: #B45309;
@@ -51,10 +51,10 @@
--text-1: #F5F4F1;
--text-2: #AEADB0;
--text-3: #8E8D89;
--accent: #FBBF24;
--accent-hover: #F59E0B;
--accent-soft: #2C1E00;
--accent-glow: rgba(251, 191, 36, 0.15);
--accent: #a78bfa;
--accent-hover: #9066f5;
--accent-soft: #1e1040;
--accent-glow: rgba(167, 139, 250, 0.15);
--code-bg: #141413;
--code-text: #E2E1DC;
--shadow-card: 0 1px 3px rgba(0,0,0,0.25);
@@ -65,8 +65,8 @@
:root:not([data-theme="light"]) {
--bg: #1A1A18; --bg-alt: #141413; --surface: #222220; --border: #2A2A28;
--text-1: #F5F4F1; --text-2: #AEADB0; --text-3: #8E8D89;
--accent: #FBBF24; --accent-hover: #F59E0B; --accent-soft: #2C1E00;
--accent-glow: rgba(251, 191, 36, 0.15);
--accent: #a78bfa; --accent-hover: #9066f5; --accent-soft: #1e1040;
--accent-glow: rgba(167, 139, 250, 0.15);
--code-bg: #141413; --code-text: #E2E1DC;
--shadow-card: 0 1px 3px rgba(0,0,0,0.25); --shadow-lg: 0 8px 24px rgba(0,0,0,0.45);
}
@@ -464,7 +464,7 @@
<div class="container-wide">
<a href="index.html" class="nav-logo" aria-label="Oikos Home">
<svg viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs><linearGradient id="navbg" x1="0" y1="0" x2="160" y2="160" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#B45309"/><stop offset="100%" stop-color="#92400E"/></linearGradient></defs>
<defs><linearGradient id="navbg" x1="0" y1="0" x2="160" y2="160" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#8b5cf6"/><stop offset="100%" stop-color="#6c3aed"/></linearGradient></defs>
<rect width="160" height="160" rx="36" fill="url(#navbg)"/>
<path d="M80 36L36 72V120C36 122.2 37.8 124 40 124H68V96H92V124H120C122.2 124 124 122.2 124 120V72L80 36Z" fill="white"/>
<rect x="100" y="46" width="12" height="22" rx="2" fill="white"/>
docs/logo.svg
+2 -2
View File
@@ -1,8 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" fill="none">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="160" y2="160" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#B45309"/>
<stop offset="100%" stop-color="#92400E"/>
<stop offset="0%" stop-color="#8b5cf6"/>
<stop offset="100%" stop-color="#6c3aed"/>
</linearGradient>
</defs>
<rect width="160" height="160" rx="36" fill="url(#bg)"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 610 B

After

Width:  |  Height:  |  Size: 610 B

public/icons/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

public/icons/favicon-32.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 791 B

After

Width:  |  Height:  |  Size: 799 B

public/icons/icon-192.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

public/icons/icon-512.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

public/icons/icon-maskable-192.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

public/icons/icon-maskable-512.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

public/styles/tokens.css
+47 -47
View File
@@ -105,32 +105,32 @@
/* --------------------------------------------------------
* 2. Farben - Akzent (konfigurierbar)
* Amber-800 — warm, zeitlos, raffiniert. Satt genug für tägliche Nutzung,
* harmoniert mit den warmen Neutrals und --module-meals.
* Violet — lebendig, modern, unverwechselbar.
* Harmoniert mit --module-calendar und dem Abend-Gradienten.
* -------------------------------------------------------- */
--_color-accent: #92400E;
--color-accent: var(--_color-accent); /* Amber-800 — 7.20:1 auf weiß */
--_color-accent-hover: #78350F;
--color-accent-hover: var(--_color-accent-hover); /* Amber-900 */
--_color-accent-active: #451A03;
--color-accent-active: var(--_color-accent-active); /* Amber-950 */
--color-accent-deep: #451A03; /* Tiefer Akzent für Gradienten, Wetter-Widget */
--_color-accent: #6c3aed;
--color-accent: var(--_color-accent); /* Violet — 5.63:1 auf weiß */
--_color-accent-hover: #5b2fd4;
--color-accent-hover: var(--_color-accent-hover); /* Violet darker */
--_color-accent-active: #4a26bb;
--color-accent-active: var(--_color-accent-active); /* Violet-800 */
--color-accent-deep: #3d1f9e; /* Tiefer Akzent für Gradienten, Wetter-Widget */
/* Greeting-Gradienten: Tageszeit-Varianten */
--greeting-morning-from: #C2410C; /* Orange-700 — Morgensonne */
--greeting-morning-to: #D97706; /* Amber-600 */
--greeting-evening-from: #6D28D9; /* Violet-700 */
--greeting-evening-to: #8250DF; /* = --module-calendar */
--_color-accent-secondary: #B45309;
--color-accent-secondary: var(--_color-accent-secondary); /* Amber-700 — Sekundärer Akzent für Logo-Gradient */
--_color-accent-light: #FFFBEB;
--color-accent-light: var(--_color-accent-light); /* Amber-50 */
--_color-accent-subtle: #FEF3C7;
--color-accent-subtle: var(--_color-accent-subtle); /* Amber-100 */
--_color-btn-primary: #78350F;
--color-btn-primary: var(--_color-btn-primary); /* Amber-900 — WCAG AAA auf weiß */
--_color-btn-primary-hover: #451A03;
--color-btn-primary-hover: var(--_color-btn-primary-hover); /* Amber-950 */
--_color-accent-secondary: #8b5cf6;
--color-accent-secondary: var(--_color-accent-secondary); /* Violet-500 — Sekundärer Akzent für Logo-Gradient */
--_color-accent-light: #f5f3ff;
--color-accent-light: var(--_color-accent-light); /* Violet-50 */
--_color-accent-subtle: #ede9fe;
--color-accent-subtle: var(--_color-accent-subtle); /* Violet-100 */
--_color-btn-primary: #5b2fd4;
--color-btn-primary: var(--_color-btn-primary); /* Violet — WCAG AAA auf weiß */
--_color-btn-primary-hover: #4a26bb;
--color-btn-primary-hover: var(--_color-btn-primary-hover); /* Violet-800 */
/* --------------------------------------------------------
* 3. Farben - Semantisch
@@ -171,8 +171,8 @@
* Einsatz in Modul-Headern, Icons, aktiven States.
* Domain-Farben von Severity entkoppelt — siehe §2.5 des Redesign-Vorschlags.
* -------------------------------------------------------- */
--_module-dashboard: #92400E;
--module-dashboard: var(--_module-dashboard); /* Amber-800 - Übersicht (= --color-accent, bewusster Share) */
--_module-dashboard: #6c3aed;
--module-dashboard: var(--_module-dashboard); /* Violet — Übersicht (= --color-accent, bewusster Share) */
--_module-tasks: #15803D;
--module-tasks: var(--_module-tasks); /* Grün - Erledigung (= --color-success, bewusster Share) */
--_module-calendar: #8250DF;
@@ -209,9 +209,9 @@
--meal-lunch: #2DA44E;
--_meal-lunch-light: #DAFBE1;
--meal-lunch-light: var(--_meal-lunch-light);
--_meal-dinner: #92400E;
--meal-dinner: var(--_meal-dinner); /* Amber-800 - Abendwärme (= --color-accent) */
--_meal-dinner-light: #FFFBEB;
--_meal-dinner: #6c3aed;
--meal-dinner: var(--_meal-dinner); /* Violet — Abend (= --color-accent) */
--_meal-dinner-light: #f5f3ff;
--meal-dinner-light: var(--_meal-dinner-light);
--meal-snack: #C2410C; /* = --module-meals — Snack ist Sub-Domain */
--_meal-snack-light: #FFECE3;
@@ -522,14 +522,14 @@
--_sidebar-shadow-light: rgba(255, 255, 255, 0.04);
--_sidebar-shadow-dark: rgba(0, 0, 0, 0.4);
--_color-accent: #FBBF24;
--_color-accent-hover: #F59E0B;
--_color-accent-active: #D97706;
--_color-accent-light: #2C1E00;
--_color-accent-subtle: #1F1500;
--_color-btn-primary: #F59E0B;
--_color-btn-primary-hover: #D97706;
--_color-accent-secondary: #FDE68A;
--_color-accent: #a78bfa;
--_color-accent-hover: #9066f5;
--_color-accent-active: #7c3aed;
--_color-accent-light: #1e1040;
--_color-accent-subtle: #160b30;
--_color-btn-primary: #9066f5;
--_color-btn-primary-hover: #7c3aed;
--_color-accent-secondary: #c4b5fd;
--_color-success: #4ADE80;
--_color-warning: #F59E0B;
@@ -545,7 +545,7 @@
--_toast-warning-text: #291400; /* 13.1:1 auf #F59E0B */
--_toast-danger-text: #330808; /* 15.1:1 auf #FCA5A5 */
--_module-dashboard: #FBBF24;
--_module-dashboard: #a78bfa;
--_module-tasks: #4ADE80;
--_module-calendar: #A78BFA;
--_module-meals: #FB923C;
@@ -560,8 +560,8 @@
--_meal-breakfast: #F59E0B;
--_meal-breakfast-light: #332400;
--_meal-lunch-light: #1A3325;
--_meal-dinner: #FBBF24;
--_meal-dinner-light: #2C1E00;
--_meal-dinner: #a78bfa;
--_meal-dinner-light: #1e1040;
--_meal-snack-light: #3D2010;
--_color-priority-none-bg: rgba(142, 141, 137, 0.12);
@@ -624,15 +624,15 @@
--_sidebar-shadow-light: rgba(255, 255, 255, 0.04);
--_sidebar-shadow-dark: rgba(0, 0, 0, 0.4);
/* Akzent - Dark Mode (Amber hellt auf für Kontrast auf dunklen Flächen) */
--_color-accent: #FBBF24; /* Amber-400 — 8.1:1 auf #222220 */
--_color-accent-hover: #F59E0B; /* Amber-500 */
--_color-accent-active: #D97706; /* Amber-600 */
--_color-accent-light: #2C1E00;
--_color-accent-subtle: #1F1500;
--_color-btn-primary: #F59E0B; /* Amber-500 — 5.9:1 auf Dark-Surface */
--_color-btn-primary-hover: #D97706;
--_color-accent-secondary: #FDE68A; /* Amber-200 */
/* Akzent - Dark Mode (Violet hellt auf für Kontrast auf dunklen Flächen) */
--_color-accent: #a78bfa; /* Violet-400 — 6.05:1 auf #222220 */
--_color-accent-hover: #9066f5; /* Violet-500 */
--_color-accent-active: #7c3aed; /* Violet-600 */
--_color-accent-light: #1e1040;
--_color-accent-subtle: #160b30;
--_color-btn-primary: #9066f5; /* Violet-500 — guter Kontrast auf Dark-Surface */
--_color-btn-primary-hover: #7c3aed;
--_color-accent-secondary: #c4b5fd; /* Violet-300 */
/* Semantische Farben */
--_color-success: #4ADE80;
@@ -650,7 +650,7 @@
--_toast-danger-text: #330808; /* 15.1:1 auf #FCA5A5 */
/* Modul-Akzente (Entflechtung Meals/Shopping spiegelt Light-Mode) */
--_module-dashboard: #FBBF24; /* Amber-400 */
--_module-dashboard: #a78bfa; /* Violet-400 */
--_module-tasks: #4ADE80;
--_module-calendar: #A78BFA;
--_module-meals: #FB923C; /* Orange-400 */
@@ -666,8 +666,8 @@
--_meal-breakfast: #F59E0B;
--_meal-breakfast-light: #332400;
--_meal-lunch-light: #1A3325;
--_meal-dinner: #FBBF24; /* Amber-400 */
--_meal-dinner-light: #2C1E00;
--_meal-dinner: #a78bfa; /* Violet-400 */
--_meal-dinner-light: #1e1040;
--_meal-snack-light: #3D2010;
/* Priority-Badge Hintergründe */
scripts/generate-icons.js
+4 -4
View File
@@ -23,8 +23,8 @@ function createLogoSvg(size) {
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 160 160" fill="none">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="160" y2="160" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#0A84FF"/>
<stop offset="100%" stop-color="#006AE0"/>
<stop offset="0%" stop-color="#8b5cf6"/>
<stop offset="100%" stop-color="#6c3aed"/>
</linearGradient>
</defs>
<rect width="160" height="160" rx="36" fill="url(#bg)"/>
@@ -38,8 +38,8 @@ function createMaskableLogoSvg(size) {
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 160 160" fill="none">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="160" y2="160" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#0A84FF"/>
<stop offset="100%" stop-color="#006AE0"/>
<stop offset="0%" stop-color="#8b5cf6"/>
<stop offset="100%" stop-color="#6c3aed"/>
</linearGradient>
</defs>
<rect width="160" height="160" fill="url(#bg)"/>