feat(themes): Terrakotta replaces High Contrast; equal header buttons on phones
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m20s
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m20s
chore(release): v0.12.0 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed
1 parent
3b9b1a5f8e
commit
acd18abe8a
10 files changed
+109
-87
No files matched your search
@@ -864,11 +864,14 @@ export const App: React.FC = () => {
|
||||
triggerHaptic(10);
|
||||
setShowCommandPalette(true);
|
||||
}}
|
||||
className="w-11 h-11 rounded-full flex items-center justify-center text-muted hover:text-main bg-panel border border-border transition-transform active:scale-95 cursor-pointer"
|
||||
className="w-11 h-11 rounded-full flex items-center justify-center text-muted hover:text-main transition-transform active:scale-95 cursor-pointer"
|
||||
title="Globale Suche"
|
||||
aria-label="Globale Suche öffnen"
|
||||
>
|
||||
<Search className="w-4 h-4" />
|
||||
{/* Same visible size as the avatar next to it; the 44px button stays the touch target */}
|
||||
<span className="w-9 h-9 rounded-full flex items-center justify-center bg-panel border border-border">
|
||||
<Search className="w-4 h-4" />
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@@ -884,7 +887,7 @@ export const App: React.FC = () => {
|
||||
}`}
|
||||
title="Profil & Einstellungen"
|
||||
>
|
||||
<UserAvatar user={user} size="sm" className="shadow-sm" />
|
||||
<UserAvatar user={user} size="md" className="shadow-sm" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
@import './themes/theme-dark.css';
|
||||
@import './themes/theme-light.css';
|
||||
@import './themes/theme-high-contrast.css';
|
||||
@import './themes/theme-terracotta.css';
|
||||
@import './themes/theme-soft.css';
|
||||
@import './themes/theme-polarized.css';
|
||||
@import './themes/theme-suri.css';
|
||||
@@ -426,7 +426,7 @@ body {
|
||||
--code-variable: #9cdcfe;
|
||||
}
|
||||
|
||||
:root:not(.dark),
|
||||
:root:not(.dark):not([data-theme="terracotta"]),
|
||||
:root[data-theme="light"] {
|
||||
--code-keyword: #0000ff;
|
||||
--code-string: #a31515;
|
||||
|
||||
+13
-10
@@ -47,15 +47,15 @@ export const AVAILABLE_THEMES: ThemeOption[] = [
|
||||
isRounded: false,
|
||||
},
|
||||
{
|
||||
id: 'high-contrast',
|
||||
name: 'High Contrast (Scharf)',
|
||||
subtitle: 'Tiefschwarz (#000) & weiße Konturen',
|
||||
file: 'src/themes/theme-high-contrast.css',
|
||||
previewBg: '#000000',
|
||||
previewPanel: '#09090b',
|
||||
previewAccent: '#38bdf8',
|
||||
previewText: '#ffffff',
|
||||
isRounded: false,
|
||||
id: 'terracotta',
|
||||
name: 'Terrakotta (Warmes Papier)',
|
||||
subtitle: 'Cremepapier, Tinte & gebrannte Terrakotta (12px)',
|
||||
file: 'src/themes/theme-terracotta.css',
|
||||
previewBg: '#efe6d8',
|
||||
previewPanel: '#fbf6ee',
|
||||
previewAccent: '#c2410c',
|
||||
previewText: '#2b2118',
|
||||
isRounded: true,
|
||||
},
|
||||
{
|
||||
id: 'soft',
|
||||
@@ -152,7 +152,10 @@ function applyToDocument(themeId: ThemeId, customCss: string | null): void {
|
||||
const root = document.documentElement;
|
||||
const attr = customCss !== null ? themeAttribute(customCss) : themeId;
|
||||
root.setAttribute('data-theme', attr);
|
||||
const light = customCss !== null ? isLightColor(readCssVar(customCss, 'bg-app')) : themeId === 'light';
|
||||
const light =
|
||||
customCss !== null
|
||||
? isLightColor(readCssVar(customCss, 'bg-app'))
|
||||
: isLightColor(AVAILABLE_THEMES.find((t) => t.id === themeId)?.previewBg);
|
||||
root.classList.toggle('dark', !light);
|
||||
syncThemeColorMeta();
|
||||
}
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
/* ==========================================================================
|
||||
MINDSIFT THEME: HIGH CONTRAST (Maximaler Kontrast & Schärfe)
|
||||
Alle Farben, Kontraste und Rundungen zentral in einer einzigen Datei.
|
||||
========================================================================== */
|
||||
|
||||
:root[data-theme="high-contrast"] {
|
||||
/* --- 1. AKZENTFARBE --- */
|
||||
--accent-primary: #38bdf8;
|
||||
--accent-hover: #7dd3fc;
|
||||
--accent-dim: rgba(56, 189, 248, 0.22);
|
||||
--accent-border: #38bdf8;
|
||||
--text-on-accent: #000000;
|
||||
|
||||
/* --- 2. OBERFLÄCHEN & HINTERGRÜNDE --- */
|
||||
--bg-app: #000000;
|
||||
--bg-panel: #09090b;
|
||||
--bg-panel-elevated: #18181b;
|
||||
--bg-panel-hover: #27272a;
|
||||
--bg-input: #000000;
|
||||
--bg-overlay: rgba(0, 0, 0, 0.88);
|
||||
--bg-code: #000000;
|
||||
|
||||
/* --- 3. TEXT & KONTRASTE --- */
|
||||
--text-main: #ffffff;
|
||||
--text-muted: #e4e4e7;
|
||||
--text-faint: #a1a1aa;
|
||||
|
||||
/* --- 4. RAHMEN, LINIEN & SCHATTEN --- */
|
||||
--border-color: rgba(255, 255, 255, 0.38);
|
||||
--border-subtle: rgba(255, 255, 255, 0.20);
|
||||
--border-strong: #ffffff;
|
||||
--shadow-panel: 0 0 0 1px #ffffff;
|
||||
--scrollbar-thumb: rgba(255, 255, 255, 0.45);
|
||||
--scrollbar-thumb-hover: #ffffff;
|
||||
|
||||
/* --- 5. STATUS- & SIGNALFARBEN --- */
|
||||
--color-success: #4ade80;
|
||||
--bg-success: rgba(74, 222, 128, 0.20);
|
||||
--border-success: #4ade80;
|
||||
|
||||
--color-danger: #f87171;
|
||||
--bg-danger: rgba(248, 113, 113, 0.20);
|
||||
--border-danger: #f87171;
|
||||
|
||||
--color-warning: #fbbf24;
|
||||
--bg-warning: rgba(251, 191, 36, 0.20);
|
||||
--border-warning: #fbbf24;
|
||||
|
||||
/* --- 6. RUNDUNGEN (Geometrie: Komplett scharfkantig) --- */
|
||||
--radius-card: 0px;
|
||||
--radius-btn: 0px;
|
||||
--radius-input: 0px;
|
||||
--radius-checkbox: 0px;
|
||||
--radius-pill: 0px;
|
||||
|
||||
/* --- 7. CODE-SYNTAX-HIGHLIGHTING (VS Code Dark+) --- */
|
||||
--code-keyword: #569cd6;
|
||||
--code-string: #ce9178;
|
||||
--code-number: #b5cea8;
|
||||
--code-comment: #6a9955;
|
||||
--code-property: #9cdcfe;
|
||||
--code-function: #dcdcaa;
|
||||
--code-type: #4ec9b0;
|
||||
--code-punctuation: #ffffff;
|
||||
--code-variable: #9cdcfe;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/* ==========================================================================
|
||||
MINDSIFT THEME: TERRAKOTTA (Warmes Papier & Tinte)
|
||||
Cremefarbenes Notizpapier, sandfarbene Seitenleiste, tintendunkle Schrift,
|
||||
gebrannter Terrakotta-Akzent mit Salbeigrün und weiche Ecken.
|
||||
========================================================================== */
|
||||
|
||||
:root[data-theme="terracotta"] {
|
||||
/* --- 1. AKZENTFARBE (Gebrannte Terrakotta) --- */
|
||||
--accent-primary: #c2410c;
|
||||
--accent-hover: #9a3412;
|
||||
--accent-dim: rgba(194, 65, 12, 0.10);
|
||||
--accent-border: rgba(194, 65, 12, 0.34);
|
||||
--text-on-accent: #fffaf3;
|
||||
|
||||
/* --- 2. OBERFLÄCHEN & HINTERGRÜNDE (Papier, Sand, Leinen) --- */
|
||||
--bg-app: #efe6d8;
|
||||
--bg-panel: #fbf6ee;
|
||||
--bg-panel-elevated: #eadfcd;
|
||||
--bg-panel-hover: #e0d2bb;
|
||||
--bg-input: #fffbf5;
|
||||
--bg-overlay: rgba(46, 33, 22, 0.45);
|
||||
--bg-code: #f1e8da;
|
||||
--bg-editor: #fdf9f2;
|
||||
--bg-sidebar: #f2eadc;
|
||||
|
||||
/* --- 3. TEXT & KONTRASTE (Tinte) --- */
|
||||
--text-main: #2b2118;
|
||||
--text-muted: #5c4b3c;
|
||||
--text-faint: #8a7764;
|
||||
|
||||
/* --- 4. RAHMEN, LINIEN & SCHATTEN --- */
|
||||
--border-color: rgba(92, 64, 40, 0.18);
|
||||
--border-subtle: rgba(92, 64, 40, 0.09);
|
||||
--border-strong: rgba(92, 64, 40, 0.32);
|
||||
--shadow-panel: 0 10px 28px rgba(74, 50, 28, 0.10);
|
||||
--scrollbar-thumb: rgba(92, 64, 40, 0.22);
|
||||
--scrollbar-thumb-hover: rgba(92, 64, 40, 0.38);
|
||||
|
||||
/* --- 5. STATUS- & SIGNALFARBEN (Salbei, Ziegel, Ocker) --- */
|
||||
--color-success: #4d7c4f;
|
||||
--bg-success: rgba(77, 124, 79, 0.12);
|
||||
--border-success: rgba(77, 124, 79, 0.36);
|
||||
|
||||
--color-danger: #b42318;
|
||||
--bg-danger: rgba(180, 35, 24, 0.09);
|
||||
--border-danger: rgba(180, 35, 24, 0.34);
|
||||
|
||||
--color-warning: #a16207;
|
||||
--bg-warning: rgba(161, 98, 7, 0.11);
|
||||
--border-warning: rgba(161, 98, 7, 0.34);
|
||||
|
||||
/* --- 6. RUNDUNGEN (Weich wie Papierkarten) --- */
|
||||
--radius-card: 12px;
|
||||
--radius-btn: 8px;
|
||||
--radius-input: 8px;
|
||||
--radius-checkbox: 4px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* --- 7. CODE-SYNTAX-HIGHLIGHTING (warme Erdtöne, gut lesbar auf Papier) --- */
|
||||
--code-keyword: #9a3412;
|
||||
--code-string: #4d7c4f;
|
||||
--code-number: #b45309;
|
||||
--code-comment: #8a7764;
|
||||
--code-property: #7c2d12;
|
||||
--code-function: #6b4f9e;
|
||||
--code-type: #0f766e;
|
||||
--code-punctuation: #5c4b3c;
|
||||
--code-variable: #7c2d12;
|
||||
}
|
||||
Reference in new issue
Block a user