feat(ui5-slider, ui5-range-slider): SAP Horizon theme implementation

[ndeshev]

No description provided.

[elenastoyanovaa]

• Slider icon is strange, but as far as I remember it will be changed?
• The dots in the sample overwrap the slider
  
• Tickmarks color differs from the one in ui5. what is more, the rule: color: var(--_ui5_slider_tickmark_color); for .ui5-slider-tickmarks is never applied. The color comes from the gradient on top
• In ui5 the border radius is 8px, here it is 12px
• Width and height of handle is different from ui5 (32x24 as in ui5 is 26x26 in cozy)
• the color of the progress .ui5-slider-progress differs from the one in ui5

[elenastoyanovaa]

top: -0.063rem; :( hacky..

[ndeshev]

Why? :) In UI5 the positioning is similar and also achieved with negative values.

[elenastoyanovaa]

because in ui5 all of the negative values are 1, 2px which result in 0.0625rem or 0.125rem. Yours result in something like 1,008 px which would eventually lead to different positioning on different devices/browsers. Please try to use something which results to a rounded value.

[ndeshev]

I will adjust the rems from 0.063 to 0.0625. However, no browser will interpret 1.008px different from 1px :)

[elenastoyanovaa]

:(

[elenastoyanovaa]

Changing to compact breaks the handles layout

[ndeshev]

• Slider icon is strange, but as far as I remember it will be changed?
• The dots in the sample overwrap the slider
  
• Tickmarks color differs from the one in ui5. what is more, the rule: color: var(--_ui5_slider_tickmark_color); for .ui5-slider-tickmarks is never applied. The color comes from the gradient on top
• In ui5 the border radius is 8px, here it is 12px
• Width and height of handle is different from ui5 (32x24 as in ui5 is 26x26 in cozy)
• the color of the progress .ui5-slider-progress differs from the one in ui5

• Yes, icons should be updated to the new ones
• I fixed the examples, the 2 sliders had no space between them and overlapped so that the start point of the second appear like end point of the first and the opposite.
• Tickmarks color are according to the specifications for Fiori 3 - #89919A which corresponds to the --sapField_BorderColor param. No delta specs are provided for Horizon so they should remain the same for now.
• Fixed the unused color variable of the tickmarks.
• Which border-radius? The handes' one is 8px. The tooltips ware with 12, I changed it to 8 to match the UI5 one as they were discussed with VDs. Also added a box-shadow, which is also not in the specifications, but approved by the designers.
• For now I will not update the cozy handle metrics (dimensions), as we've discussed to leave it as they are at that stage of the theming.
• I will upload a patch to fix the broken handles in compact density.
• Updated the styles of the progress bar and it's container.

[niyap]

1. The start point of ui5-slider component, background color is not correct.
2. While moving the whole progress bar of ui5-range-slider, the handles should have "active" styling, not as hovered.
3. Handles in compact mode look really small and ugly.
4. In compact mode the offset between the focus outline and the handles is too big.

[elenastoyanovaa]

I noticed that many of the values are without parameters and this is strange especially for colors. Do we also use hardcoded colors in UI5? If we used parameters, maybe some of the things would come out of the box and there would be no need to overwrite them in eachc theme. If no parameters are available, ignore my comment.