search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.49k stars 255 forks source link

Simplify theming #5113

Open lastmjs opened 2 years ago

lastmjs commented 2 years ago

Hey,

I've really been enjoying these components and they're working relatively well (I've opened just a couple issues in the past few days). I am now trying to do some non-default theming and I am running into issues.

First, when I try to import and set theming like so:

// ...more imports above
import "@ui5/webcomponents/dist/Assets.js";
import "@ui5/webcomponents-fiori/dist/Assets.js";

import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';

setTheme('sap_fiori_3_dark');

// ...more code below

It just doesn't work. I have a simple lit-html element bundled with Snowpack. So, I tried the following as well in the head element of my index.html file:

  <script data-ui5-config type="application/json">
      {
          "theme": "sap_fiori_3_dark"
      }
  </script>

That worked, but spacing (like margins or padding) now seemed to be off. Something just seems off here. Perhaps the use of shadow DOM, importing assets through js, etc is just not working well.

I would love to see a better theming infrastructure. I have some ideas:

  1. Expose in the documentation the CSS variables that can be set for each web component (this would make it very simple for developers to create their own per-component theming)
  2. Allow modular importing of CSS/assets per component. The global js imports seem to be messing things up. We need a way to import just the CSS that we need for one component, and we need to know that it won't conflict with other components

I haven't tried to debug all of this too much as I was hoping it would just work, but since it doesn't just work I thought I'd share a few thoughts. Web components and the frameworks/libraries have come a long way since I started using them in 2016 but we still have some issues. Seems like CSS and theming might be the last frontier here.

I also noticed that the theming files have all rights reserved...does that mean I can't copy the file and just change the variables manually to what I want? That would be relatively simple for me to do and would give me the control and flexibility that I need, but unfortunately the licensing seems restrictive there.

lastmjs commented 2 years ago

Some clarification. I think the issues I am having with padding and margins getting messed up comes from importing both of the following:

import "@ui5/webcomponents/dist/Assets.js";
import "@ui5/webcomponents-fiori/dist/Assets.js";

The problem is that I am using both regular ui5 components and at least one fiori component, and I want to apply another theme to both. Importing both assets files causes issues with padding and margins, but if I leave one of the imports out the theming won't work correctly.

unazko commented 2 years ago

Hello @SAP/ui5-webcomponents-team,

Could you please take into consideration the upper feedback about the theming from @lastmjs and evaluate what could be done as an improvement.

Best Regards, Boyan Rakilovski