UI5 / UI5/cli

Include fonts in themes (standalone build for `theme-library`)

Open
#848 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
511
Forks
83
Avg merge
1d 5h
Merged PRs (30d)
55

Description

Hi!

First of all, I am not sure if this is a bug or a feature request.

Is your feature request related to a problem? Please describe.

I found that when creating a custom theme (using type theme-library) it builds all the CSS files but the theme is not really usable as the font files are not contained in the build result.

CheckBox tick marks and Select arrows are not properly displayed in the theme:
image

The reason is that the fonts (especially the SAP-icons) are not loaded.

Further analysis

I made a MWE. It just contains a theme-library project with framework SAPUI5 1.104.2 and 5 dependent libraries (sap.m, sap.ui.core, sap.ui.layout, sap.ui.unified, themelib_sap_horizon).

When running the app with parameter sap-ui-theme=custom_horizon@/theme:

  • it properly loads CSS files from /theme/UI5/sap/ui/core/themes/custom_horizon/library.css?version=1.104.0&sap-ui-dist-version=1.104.2 and similar URLs
  • it tries to load the fonts from /theme/UI5/sap/ui/core/themes/sap_horizon/fonts/72-Bold.woff2, /theme/UI5/sap/ui/core/themes/sap_horizon/fonts/SAP-icons.woff2 and others, but fails with error 404

I checked the dist folder and found that it only contains css, but no font files.
For testing I copied the requested font files to the corresponding folders and re-built and re-deployed the theme. It worked without any 404s.

Describe the solution you'd like

It would be nice to have the possibility to create a self-contained theme, like the self-contained mode works for apps.

Additional information

The theme is deployed to a CF HTML5 repository (but it would be the same when deploying to another custom server).


Thanks a lot!

Lennart

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the reported theme-library build with SAPUI5 1.104.2, the listed dependent libraries, and the custom_horizon theme. Inspect the dist output alongside the generated CSS and requested font URLs; done means the standalone theme build contains the required font files and the deployed theme no longer returns 404 errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
build-system, tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.