Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to reuse a CSS variable from WC in my app? #410

Closed
Psidium opened this issue May 20, 2019 · 4 comments
Closed

How to reuse a CSS variable from WC in my app? #410

Psidium opened this issue May 20, 2019 · 4 comments
Assignees
@pskelin

Comments

@Psidium
Copy link
Member

Psidium commented May 20, 2019

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

In my mocks, the UI designer asked for a specific border around a table.

ui5-table only have borders on the top and bottom.

I'd like to reuse the ui5-table's border-bottom CSS property for my instance of ui5-table, but how can I get the exact color used while respecting the theming?.

Describe the solution you'd like

I would like to create a class like this (in my app):

.exchange-table {
    border: 1px solid var(--ui5-panel-bottom-border-color); /* any variable from WC */
    border-radius: .1em;
}

Describe alternatives you've considered

I could fetch the color after the table has rendered via getComputedProperties and set the color via javascript, but this is troublesome and can be prone to errors.

Additional context

I'd like to follow the UI5 WebComponents classes and variables so we can maybe support custom themes in the future.
@akshaykmr080
Copy link

I am facing a similar problem too

@pskelin
Copy link
Contributor

pskelin commented May 23, 2019

Yeah, we didn't consider this usage so far and have to address it. The reason the CSS variables for the default theme are not included in the <head> is that the styles of the web components come with the default values as fallbacks.

However, this is a valid use case so we have to consider the options:

  1. add the parameters always as default
  2. provide an API to add them only when apps require them

option 1. might be too much in case no one is using them
option 2. would require an API call

Until we flesh this out, you can use a workaround that implements option 2. (warning: these APIs might change and are really internal). At least that way you can start using the parameters in your code and give any feedback.

import fiori3ThemeProperties from "@ui5/webcomponents/dist/themes/sap_fiori_3/parameters-bundle.css.js";
import { injectThemeProperties } from "@ui5/webcomponents-base/src/theming/StyleInjection.js";
import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
// inject default CSS custom parameters in head
Bootstrap.boot().then(_ => {
  injectThemeProperties(fiori3ThemeProperties);
});

Here is a working example in codesandbox:
https://codesandbox.io/s/ui5webcomponents-llzkj

Any feedback before we implement this is welcome.

@MarcusNotheis MarcusNotheis mentioned this issue Jun 22, 2019
Closed
@vladitasev
Copy link
Contributor

@pskelin Consider theme designer when defining the solution

@pskelin
Copy link
Contributor

pskelin commented Dec 4, 2019 •
edited
Loading

With the latest release (1.0.0-rc.5), the CSS variables are always included as a style tag in the head so feel free to use them in your apps.

Please use with caution, as it is still not clearly documented which ones are considered public. It should be safe to reference all variables starting with --sap, the ones starting with --sapUi will be deleted soon, and the component variables should be considered private unless explicitly documented.

@pskelin pskelin closed this as completed Dec 4, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@pskelin pskelin

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Psidium @pskelin @vladitasev @akshaykmr080