feat(ui): add SAP Horizon theme from official theming-base-content

Map SAP Horizon palette to semantic tokens using values from
SAP/theming-base-content sap_horizon css_variables.css.

diff --git a/ui/web/README.md b/ui/web/README.md
index ca3fb0dba78a4ffded2199b796c3487aa98ce403..30fb374b33ffbd8a759ff7f399a66c3946ea7889 100644 (file)
--- a/ui/web/README.md
+++ b/ui/web/README.md
@@ -142,6 +142,7 @@ Set `theme` in `config.json` to a filename (without `.css`) from `src/assets/the
 | ------------------- | ----- | ---------------------------------------------------------------- |
 | `tokyo-night-storm` | Dark  | [Tokyo Night](https://github.com/enkia/tokyo-night-vscode-theme) |
 | `catppuccin-latte`  | Light | [Catppuccin](https://github.com/catppuccin/catppuccin)           |
+| `sap-horizon`       | Light | [SAP Horizon](https://github.com/SAP/theming-base-content)       |
 
 Default: `tokyo-night-storm`. To add a theme, create a CSS file defining the same semantic tokens.
 

diff --git a/ui/web/src/assets/themes/sap-horizon.css b/ui/web/src/assets/themes/sap-horizon.css
new file mode 100644 (file)
index 0000000..fd0c824
--- /dev/null
+++ b/ui/web/src/assets/themes/sap-horizon.css
@@ -0,0 +1,80 @@
+/* SAP Horizon */
+
+:root {
+  /* Palette */
+  --sap-bg: #f5f6f7;
+  --sap-bg-base: #fff;
+  --sap-bg-shell: #eff1f2;
+  --sap-hover: #eaecee;
+  --sap-active: #dee2e5;
+  --sap-text: #131e29;
+  --sap-label: #556b82;
+  --sap-placeholder: #758ca4;
+  --sap-brand: #0070f2;
+  --sap-highlight: #0064d9;
+  --sap-border: #d9d9d9;
+  --sap-button-bg: #fff;
+  --sap-button-border: #bcc3ca;
+  --sap-button-text: #0064d9;
+  --sap-button-emphasized-bg: #0070f2;
+
+  /* Semantic */
+  --color-bg: var(--sap-bg);
+  --color-bg-surface: var(--sap-bg-base);
+  --color-bg-input: var(--sap-bg-base);
+  --color-bg-hover: var(--sap-hover);
+  --color-bg-active: var(--sap-active);
+  --color-bg-header: var(--sap-bg-shell);
+  --color-bg-caption: var(--sap-bg-shell);
+  --color-bg-button: var(--sap-button-emphasized-bg);
+  --color-bg-button-hover: var(--sap-highlight);
+  --color-text: var(--sap-text);
+  --color-text-strong: var(--sap-text);
+  --color-text-muted: var(--sap-label);
+  --color-text-on-button: #fff;
+  --color-primary: var(--sap-highlight);
+  --color-border: var(--sap-border);
+  --color-border-row: var(--sap-border);
+  --color-accent: var(--sap-brand);
+  --color-shadow-inset: rgba(34, 53, 72, 0.15);
+}
+
+body {
+  color: var(--color-text);
+  background-color: var(--color-bg);
+}
+
+button,
+.button {
+  color: var(--color-text-on-button);
+  background-color: var(--color-bg-button);
+  border: 1px solid var(--color-border);
+  cursor: pointer;
+}
+
+button:hover,
+.button:hover {
+  background-color: var(--color-bg-button-hover);
+}
+
+input,
+select,
+textarea {
+  color: var(--color-text);
+  background-color: var(--color-bg-input);
+  border: 1px solid var(--color-border-row);
+}
+
+input::placeholder {
+  color: var(--color-text-muted);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: 1px solid var(--color-primary);
+}
+
+a {
+  color: var(--color-primary);
+}