Add README.md
This commit is contained in:
83
README.md
Normal file
83
README.md
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
# 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.
|
||||||
Reference in New Issue
Block a user