# SAP Quartz Theme for VS Code

Color themes that bring the SAP GUI Quartz look & feel into Visual Studio Code — including full ABAP and CDS syntax highlighting.

Both themes are derived from SAP's official [`@sap-theming/theming-base-content`](https://github.com/SAP/theming-base-content) package, using the exact color values from `sap_fiori_3` (Quartz Light) and `sap_fiori_3_dark` (Quartz Dark).

## Themes

| | SAP Quartz Light | SAP Quartz Dark |
|---|---|---|
| Source | `sap_fiori_3` | `sap_fiori_3_dark` |
| Shell | `#354a5f` | `#354a5f` |
| Editor background | `#ffffff` | `#29313a` |
| Text | `#232629` | `#fafafa` |
| Keywords | `#0a6ed1` | `#91c8f6` |
| Strings | `#107e3e` | `#abe2ab` |
| Types / Classes | `#c0399f` | `#e269c9` |
| Methods | `#286eb4` | `#6bd3ff` |
| Constants | `#d08014` | `#ffc847` |
| Comments | `#6a6d70` | `#d3d7d9` |

## Installation

Download the latest `.vsix` from [Releases](../../releases), then:

```bash
code --install-extension sap-quartz-theme-1.0.0.vsix
```

Or inside VS Code: **Extensions** (Ctrl+Shift+X) → `⋯` menu → **Install from VSIX…** → select the file.

Activate with **Ctrl+K Ctrl+T** and pick **SAP Quartz Light** or **SAP Quartz Dark**.

## Color Mapping

Every UI color maps to an official SAP theming parameter:

| VS Code element | SAP parameter |
|---|---|
| Title bar / Activity bar | `sapShellColor` |
| Side bar | `sapShell_Background` |
| Editor background | `sapBaseColor` |
| Tab accent | `sapBrandColor` |
| Status bar | `sapPageFooter_Background` |
| Input fields | `sapField_Background` / `sapField_BorderColor` |
| Lists & selections | `sapList_*` |
| Errors | `sapNegativeColor` |
| Warnings | `sapCriticalColor` |
| Success / strings | `sapPositiveColor` |
| Info / links | `sapInformativeColor` |

Syntax token colors use the `sapAccentColor1`–`sapAccentColor10` palette from the same theme, mapped as follows:

| Token | Light | Dark | SAP parameter |
|---|---|---|---|
| Keywords (DATA, SELECT, IF…) | `#0a6ed1` bold | `#91c8f6` bold | `sapBrandColor` |
| Types (zcl_*, dfkkop, abap_bool) | `#c0399f` | `#e269c9` | `sapAccentColor4` |
| Methods / functions | `#286eb4` | `#6bd3ff` | `sapAccentColor6` |
| Strings | `#107e3e` | `#abe2ab` | `sapPositiveColor` |
| Constants / numbers | `#d08014` | `#ffc847` | `sapAccentColor1` |
| Storage (DATA, TYPES, CLASS) | `#925ace` | `#b995e0` | `sapAccentColor9` |
| Annotations (@, decorators) | `#925ace` | `#b995e0` | `sapAccentColor9` |
| HTML/XML tags | `#d04343` | `#e7a1a1` | `sapAccentColor2` |
| Regex | `#0f828f` | `#7fc6c6` | `sapAccentColor7` |
| Namespaces | `#6367de` | `#8ca7d5` | `sapAccentColor5` |
| Comments | `#6a6d70` italic | `#d3d7d9` italic | `sapContent_LabelColor` |

## How It Was Built

1. Installed `@sap-theming/theming-base-content` from npm
2. Parsed `variables.json` from `content/Base/baseLib/sap_fiori_3/` and `sap_fiori_3_dark/`
3. Mapped SAP design tokens (`sapBrandColor`, `sapShellColor`, `sapAccentColor*`, etc.) to VS Code's `workbench.colorCustomizations` and `tokenColors`
4. Packaged as a standard VS Code color theme extension

## Recommended Companion Extensions

- [SAP CDS Language Support](https://marketplace.visualstudio.com/items?itemName=SAPSE.vscode-cds) — CDS syntax highlighting

## License

Theme colors are extracted from [SAP theming-base-content](https://github.com/SAP/theming-base-content) which is licensed under Apache-2.0.

This extension is provided as-is for personal and internal use.