# UI Theme Designer Design Tokens > TRIGGER: questions about the SAP Design System and SAP Fiori design tokens — which themes exist, what value a theme parameter (e.g. sapButton_Background, sapHighlightColor) has in a given theme, how parameters inherit/extend across the theme chain, which parameters a specific UI component (UI5 control, UI5 Web Component, Fundamental Styles component) consumes. SKIP: how-to questions about UI theme designer as a product (creating, publishing, transporting themes — use ui-theme-designer-help). - Skill: `williamcorrea23/ui-theme-designer-design-tokens` (Agent Skill, multi-file: 4 files) - Install (CLI): `npx skillmds@latest add williamcorrea23/ui-theme-designer-design-tokens` - Raw SKILL.md: https://api.skillmd.com/api/skills/williamcorrea23/ui-theme-designer-design-tokens/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: williamcorrea23 (https://skillmd.com/u/williamcorrea23) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/williamcorrea23/ui-theme-designer-design-tokens --- # Design Tokens _With `$THIS` being the folder that contains this SKILL.md:_ ## Prerequisite `$THIS/node_modules/` exists and is not older than 7 days; if not: `cd $THIS && npm ci` ## Context Design Tokens are defined in LESS files of the theming-base-content, and consumed in LESS and CSS files of different frameworks (= UI technologies). In `$THIS/node_modules/` you find the following: - **UI5:** (with `$LIBRARY` being e.g. `sap.ui.core`, and `$THEME` being e.g. `sap_horizon`) - `$THIS/node_modules/@openui5/$LIBRARY/src/${LIBRARY/./\//}/**/themes/base` contains the `baseTheme` of the different libraries - `$THIS/node_modules/@openui5/themelib_$THEME/src/${LIBRARY/./\//}/themes/` contains the `$THEME` of the different libraries - **UI5 Web Components:** (with `$THEME` being e.g. `sap_horizon`, and `$COMPONENT` being e.g. `Button`) - `$THIS/node_modules/@ui5/*/src/themes/$COMPONENT.css` contains theme-independent component skeleton CSS, using parameters from theming-base-content as CSS custom properties, as well as CSS custom properties defined in `base/` (see below) - `$THIS/node_modules/@ui5/*/src/themes/base/$COMPONENT-parameters.css` contains CSS custom property definitions for components; never report those UI5 Web Components-specific internal CSS custom properties. - `$THIS/node_modules/@ui5/*/src/themes/$THEME/$COMPONENT-parameters.css` contains theme-dependent values for the custom property definitions from `base/` (see above) - **Fundamental Styles:** - `$THIS/node_modules/fundamental-styles/dist/*.css` contains theme-independent component skeleton CSS, using parameters from theming-base-content as CSS custom properties, as well as CSS custom properties defined in `theming/` (see below) - `$THIS/node_modules/fundamental-styles/dist/theming/$THEME.css` contains theme-dependent values for the custom property definitions used in `dist/*.css` (see above); never report those Fundamental Styles-specific internal CSS custom properties - `$THIS/node_modules/@fundamental-styles/common-css/dist/*.css` theme-independent helper CSS, using parameters from theming-base-content as CSS custom properties - **Base:** (with `$LIBRARY` being e.g. `baseLib`, and `$THEME` being e.g. `sap_horizon`) - `$THIS/node_modules/@sap-theming/theming-base-content/content` is a theme repository as described in https://raw.githubusercontent.com/SAP-docs/btp-ui-theme-designer/main/docs/cf/About-Themes/overview-of-sap-theming-content-91ebfe2.md, containing `Base/`; used by all frameworks - `$THIS/node_modules/@sap-theming/theming-base-content/content/Base/.theming` contains metadata about the `Base` framework - `$THIS/node_modules/@sap-theming/theming-base-content/content/Base/$LIBRARY/.theming` contains metadata about libraries - `$THIS/node_modules/@sap-theming/theming-base-content/content/Base/$LIBRARY/$THEME/.theming` contains metadata about themes - Metadata includes - `sEntity`: "Framework", "Library" or "Theme" - `sType` (for themes): "STANDARD" (= single theme) or "SET" (= no CSS, just references to different themes of `sType=STANDARD`) - `aFiles`: LESS source files - `aBuildFiles`: CSS files built from `aFiles` - `*sBase{Library,Theme,File}Id`: ID of the most important library/theme/file - `oExtends`: the `$FRAMEWORK[.$LIBRARY[.$THEME[.$FILE]]]` "object path" of the parent entity - `sSourcePathPattern`: pattern to resolve object paths to file paths - (optional) `bIgnore=true`: entity is ignored from theming ## Procedure 1. Determine the SAP theme the users question targets, present the available theme IDs from `$THIS/node_modules/@sap-theming/theming-base-content/content/Base/baseLib` as select options if unclear, default to `sap_horizon` 2. Determine the framework the user's question targets. Present the frameworks from "Context" as select options if unclear, applying these defaults: 1. **framework stated:** use that 2. **component stated, no framework:** 1. search _UI5 Web Components_ for a CSS file for the component; if found use _UI5 Web Components_ as primary source 2. additionally search _Base_ for parameters matching `sap$COMPONENT_*`: report any such parameters not already referenced in _UI5 Web Components_ as supplementary, labelled "defined in theming-base-content, not yet referenced in UI5 Web Components CSS" 3. **no component, no framework:** use _Base_ 3. Read the `.theming` file of the framework the users question targets, determine `sBaseLibraryId` and `sSourcePathPattern` 4. Read the `.theming` file of the theme of the `sBaseLibrary` of the framework the users question targets, based on `sSourcePathPattern` of the frameworks `.theming` file 5. While there is an `oExtends`: 1. Read the `.theming` file of the theme referenced by `oExtends`; if you haven't encountered the framework (the first section of the Object Path) before, read the framework `.theming` first to determine its `sSourcePathPattern` 2. Merge the `.theming` JSON with what you already have from the theme `.theming` files: if a key already exists, leave it untouched; add key+value if the key does not yet exist 6. Read the `${sBaseFileId}.less` file (`sBaseFileId` comes from the merged `.theming` files) of the theme of the `sBaseLibrary` of the framework the users question targets 7. For each LESS `@import` statement, recursively: 1. Read the referenced LESS file 2. Replace the `@import` statement with the read content 8. In the merged LESS file, map the lines `// [ ]` that precede parameter definitions to that parameter: 1. If a parameter is defined multiple times, merge those annotations 2. If an annotation already exists: append the value to the existing annotation values 3. If an annotation has values for which it also has "anti-values" (the same value but starting with a `!`, e.g. "Protected" and "!Protected"), remove both values from the values list 4. If an annotation values list is empty, remove the annotation 9. If the user targets "UI5 Web Components", for each relevant component look up the three CSS sources: 1. the theme-independent skeleton at `webcomponents/packages/*/src/themes/.css`, merged with 2. the always-used base parameters at `webcomponents/packages/*/src/themes/base/-parameters.css`, then with 3. the theme-specific delta at `webcomponents/packages/*/src/themes//-parameters.css` 10. If the user targets "Fundamental Styles", scan `fundamental-styles/packages/*/src/**/*.scss` for the relevant component; theme-specific values come from the CSS custom properties in `theming-base-content/content/Base/baseLib//css_variables.css` 11. Answer the users question based on the information collected