From c6e5c6ebe012fad0e421cb30690192178f24b7c1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 31 Oct 2026 10:38:22 +0000
Subject: [PATCH] The accent is the family's red

--accent, --accent-strong, --accent-soft, --emphasized and --focus take the
red of the abap2UI5 logo in both themes, as on every abap2UI5 site
(CONVENTION.md in abap2UI5/abap2UI5.github.io); the canvas's selection and
drop marks (preview.html) follow. The surface stays Horizon, and so does
the UI5 app in the preview, which is the reader's.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014YZFmFjqqPw2HLYh1MvmaA
---
 preview.html | 14 +++++++-------
 styles.css   | 18 ++++++++++--------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/preview.html b/preview.html
index 96ee704..e620721 100644
--- a/preview.html
+++ b/preview.html
@@ -7,18 +7,18 @@
   <style>
     html, body { height: 100%; margin: 0; }
     #content { height: 100%; }
-    .dsg-hover { outline: 1px dashed #0064d9 !important; outline-offset: -1px; }
-    .dsg-sel { outline: 2px solid #0064d9 !important; outline-offset: -2px; }
+    .dsg-hover { outline: 1px dashed #d03c4a !important; outline-offset: -1px; }
+    .dsg-sel { outline: 2px solid #d03c4a !important; outline-offset: -2px; }
     .dsg-empty { min-height: 2.75rem !important; min-width: 5rem; box-sizing: border-box; outline: 1px dashed #8396a8; outline-offset: -1px;
       background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(131, 150, 168, 0.08) 6px 12px) !important; }
-    .dsg-also { outline: 2px solid #0064d9 !important; outline-offset: -2px; background-color: rgba(0, 100, 217, 0.05) !important; }
-    .dsg-drop { outline: 2px dashed #0064d9 !important; outline-offset: -2px; background-color: rgba(0, 100, 217, 0.06) !important; }
-    .dsg-drop-before { box-shadow: 0 -3px 0 0 #0064d9 !important; }
-    .dsg-drop-after { box-shadow: 0 3px 0 0 #0064d9 !important; }
+    .dsg-also { outline: 2px solid #d03c4a !important; outline-offset: -2px; background-color: rgba(208, 60, 74, 0.05) !important; }
+    .dsg-drop { outline: 2px dashed #d03c4a !important; outline-offset: -2px; background-color: rgba(208, 60, 74, 0.06) !important; }
+    .dsg-drop-before { box-shadow: 0 -3px 0 0 #d03c4a !important; }
+    .dsg-drop-after { box-shadow: 0 3px 0 0 #d03c4a !important; }
     #dsg-error { display: none; position: fixed; inset: auto 12px 12px 12px; padding: 10px 12px; background: #fff4f4; color: #8f1d1d;
       border: 1px solid #e4a3a3; border-radius: 6px; font: 13px/1.4 system-ui, sans-serif; white-space: pre-wrap; z-index: 99999; }
     #dsg-tools { position: fixed; z-index: 99998; display: none; align-items: center; gap: 1px; padding: 2px; border-radius: 7px;
-      background: #0064d9; color: #fff; font: 12px/1 system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
+      background: #d03c4a; color: #fff; font: 12px/1 system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
     #dsg-tools span { padding: 0 6px 0 5px; font-weight: 600; white-space: nowrap; }
     #dsg-tools button { border: 0; background: transparent; color: #fff; width: 24px; height: 22px; border-radius: 5px; cursor: pointer; font: 13px/1 system-ui, sans-serif; }
     #dsg-tools button:hover { background: rgba(255,255,255,.2); }
diff --git a/styles.css b/styles.css
index e41b4da..0af6b69 100644
--- a/styles.css
+++ b/styles.css
@@ -8,11 +8,13 @@
   --field: #556b82;
   --text: #1d2d3e;
   --muted: #556b82;
-  --accent: #0064d9;
-  --accent-strong: #0040b0;
-  --accent-soft: #ebf8ff;
-  --emphasized: #0070f2;
-  --focus: #0032a5;
+  /* The accent is the red of the abap2UI5 logo, as on every abap2UI5 site
+     (CONVENTION.md in abap2UI5/abap2UI5.github.io); the surface stays Horizon. */
+  --accent: #d03c4a;
+  --accent-strong: #b02e3b;
+  --accent-soft: #fdecee;
+  --emphasized: #d03c4a;
+  --focus: #b02e3b;
   --appbar: #ffffff;
   --appbar-text: #1d2d3e;
   --warn: #e76500;
@@ -33,7 +35,7 @@
   :root:not([data-theme="light"]) {
     /* Horizon Evening */
     --bg: #12171c; --panel: #1d232a; --panel-2: #12171c; --line: #2f3a45; --line-strong: #4e5b68; --field: #8396a8; --text: #eaecee; --muted: #a9b4be;
-    --accent: #4db1ff; --accent-strong: #8cccff; --accent-soft: #1c3b5a; --emphasized: #0070f2; --focus: #8cccff; --appbar: #1d232a; --appbar-text: #eaecee;
+    --accent: #f0606d; --accent-strong: #ff7a86; --accent-soft: #3a1d22; --emphasized: #f0606d; --focus: #ff7a86; --appbar: #1d232a; --appbar-text: #eaecee;
     --code-bg: #171d23; --code-hi: #3a3218; --kw: #c99bff; --str: #7fd49b; --cmt: #8396a8; --ok: #6ed482; --error: #ff8888; --warn: #ffab1d; --code-hi-line: #ffab1d;
     color-scheme: dark;
   }
@@ -42,7 +44,7 @@
 :root[data-theme="dark"] {
   /* Horizon Evening */
   --bg: #12171c; --panel: #1d232a; --panel-2: #12171c; --line: #2f3a45; --line-strong: #4e5b68; --field: #8396a8; --text: #eaecee; --muted: #a9b4be;
-  --accent: #4db1ff; --accent-strong: #8cccff; --accent-soft: #1c3b5a; --emphasized: #0070f2; --focus: #8cccff; --appbar: #1d232a; --appbar-text: #eaecee;
+  --accent: #f0606d; --accent-strong: #ff7a86; --accent-soft: #3a1d22; --emphasized: #f0606d; --focus: #ff7a86; --appbar: #1d232a; --appbar-text: #eaecee;
   --code-bg: #171d23; --code-hi: #3a3218; --kw: #c99bff; --str: #7fd49b; --cmt: #8396a8; --ok: #6ed482; --error: #ff8888; --warn: #ffab1d; --code-hi-line: #ffab1d;
   color-scheme: dark;
 }
@@ -65,7 +67,7 @@ button {
 button:hover { border-color: var(--accent); color: var(--accent); }
 button:disabled { opacity: .45; cursor: default; color: inherit; border-color: var(--line-strong); }
 button.primary { background: var(--emphasized); border-color: var(--emphasized); color: #fff; font-weight: 700; }
-button.primary:hover { background: #0064d9; color: #fff; }
+button.primary:hover { background: var(--accent-strong); color: #fff; }
 button.icon { width: 30px; padding: 5px 0; line-height: 1; }
 button.danger:hover { border-color: var(--error); color: var(--error); }
 button.link { border: none; background: none; padding: 0 2px; color: var(--accent); }