Improve the configurability of separator in the UI

Development
,
#1

Hello all,

This proposal follows Loading... created by @lucaa.

image

In the screenshot above, you can see a set of pink lines.
They are currently all styled by the @xwiki-border-color less variable (turned pink for easier spotting).

Lines 2

This line will be removed by XWIKI-21106, as it was not introduced intentionally .

Lines 1/3

Introduce a new @xwiki-separator-color with a default value to @xwiki-border-color.
That way it would be possible to change the color of the separators from the advanced section of the theme configuration without changing the other separators.

Introduce a separator class to add on hr element that are used as separators on the UI. And only color those with @xwiki-separator-color

Impacts (separators colored in green for easier spotting)

Panels

image

Document title

image

Preview separator

image

Note: Impacted by Loading...

History diff

image

Conflict diff

image

In summary, do you agree to the following points:

  • allow to use two different colors for horizontal separators and UI elements separators
  • introduce a @xwiki-separator-color with a default value to @xwiki-border-color
  • introduce a separator class for hr elements used as UI horizontal separators (and only color those with @xwiki-separator-color)

Thanks

PS: Corresponding draft PR XWIKI-21111: Unify the horizontal lines separators in the skin, style and colors and make them available in the color theme by manuelleduc · Pull Request #2605 · xwiki/xwiki-platform · GitHub

Division between panels & main content | Issues & New looks
#2

Hello all,

@mleduc & all:

what do you think it should happen to horizontal lines added in the content of a page by users?

Should they follow the color of the separator or should they be colored differently? btw, what color are they today, @text-color ?

#3

So we don’t plan to use different colors (for borders and separators), but we want to allow the users to use different colors? Do we have some concrete examples where using different colors makes sense, or otherwise put, what are the cases where using the same color (for borders and separators) doesn’t look good?

@lucaa in Loading... you say:

there should be a dedicated color theme variable for these separators

Could you explain why a separator should be colored differently than the border, or in which cases it needs to be colored differently?

Thanks,
Marius

1 Like
#4

For now, hr elements are colored with @xwiki-separator-color only if they have the separator class.
Meaning that hr element in the content color are not impacted and won’t change color.

They are colored with the @hr-border less variable (with a @gray-lighter default value).

#5

I put my thoughts in the ticket description here Loading... .

My main need was that the separators are not hardcoded, and the hr between title and content was hardcoded. Then, the question was what color to set that line, given the background on which it will be displayed (in order to be able to ensure contrast). The background of that separator in the content of the page is @xwiki-page-content-bg . For Loading... , I proposed that the colors for the foreground items from the panels would be the same colors as for the content (color theme authors being responsible of ensuring the contrast between panel background and content foreground items). This means that the panels separators would be in the same situation of contrast with their background as the title-content separator is, hence the proposal to use the same separator color.

This logic of foreground / background does not apply the same for the borders, which are usually “between” background colors (sometimes, but not always).

Then, a case where you may want to have different border from separators is when you may want to use an accent color for the line between title & content and for the panels (separator), but you don’t want that color for the docextrapanes area (border). The same logic of border color may apply to the frame around the page content, but the plan is to drop that border completely (Loading...). Honestly, I would have dropped the docextrapanes border as well, for coherency with XWIKI-21106, but then we need to think of a different decoration for the tabs (which may exist).

Now, the difficulty is to decide what’s a border and what’s a separator, and this indeed may be a tough one. Hence my question about whether an hr added in the content of the document is a separator or not. It’s probably less of a separator than the line between page title and content.

For example, the changes view in history is actually using tabs (!) for Raw and Rendered but they’re not decorated as tabs (for some reason) so indeed, that one may not be a separator but a border.
For the Version conflict I don’t really understand why there’s a line, isn’t that a modal and “version conflict” is the title of the modal? Why doesn’t it use standard decoration for modal title vs modal content?

I know I’m only raising more questions than what I am solving, but hopefully I managed to express my thinking here.

#6

We may want to align that with @text-color, in order to ensure contrast for all items that appear on @xwiki-page-content-bg …

#7

There is the case when we want the separators to disappear, especially title/content one and panels. If we do the same for borders of docextrapanes, then docextrapanes are less usable. But, if the separators become addressable, we can use the same color variable for borders & separators and then we’d just make them disappear with custom CSS.

#8

Thanks, I understand now. Indeed:

  • the border color needs to have enough contrast between the inside and outside background color of the box
  • the separator color only needs to have enough contrast with the inside background color of the box

I view the HR as a separator, so I’d use the same color as the separator by default.

Thanks,
Marius