CSS refactor

[pierrotsmnrd]

Work in progress - do not merge Ready for review

This PR uses a better approach for CSS styling in Panel.

The method we used so far showed its limitations : too much CSS code inside the python code, preventing CSS code completion, linting breaking indentation, hard to maintain.

The new method relies on design modifiers.

• A modifier allows to register a CSS file or raw CSS code, for a given panel widget. eg :

# modifies the `stylesheets` property of *all* buttons, to add one css file
pn.theme.fast.Fast.modifiers[pn.widgets.Button] = {
"stylesheets":["css/button.css"]
}

• One key thing then is to use css class (using css_classes=['my_class_name', ]). Imagine we have 2 kinds of buttons, A and B, we want to style in a different way. We can add them css class my_button_A and my_button_B, do the following :

pn.theme.fast.Fast.modifiers[pn.widgets.Button] = {
"stylesheets":["css/button_A.css", "css/button_B.css"]
}

and each css file should contain rules starting with :

:host(.my_button_A) { 
  /* Rules for button type A*/
}

and similarly for button B

This PR applies to method to Ragna UI.
Currently WIP, the auth page and part of the main view are handled.

Caveat : not all CSS can be removed from python code.

• some CSS rules need to be built from python variables ( see central_view.py:L307)
• some widgets seem immune to modifiers, depending on how they're built. For instance, all the widgets from the ChatInterface like ChatMessage, and "source info" buttons, cannot be styled with modifiers. I think it's a bug in Panel and I need to dig to identify the root cause. Eventually every widget should be modifiable using modifiers.

[pmeier]

some CSS rules need to be built from python variables ( see central_view.py:L307)

For these, could you use the functionality I introduced #257?

some widgets seem immune to modifiers, depending on how they're built. For instance, all the widgets from the ChatInterface like ChatMessage, and "source info" buttons, cannot be styled with modifiers. I think it's a bug in Panel and I need to dig to identify the root cause. Eventually every widget should be modifiable using modifiers.

I believe this was fixed in holoviz/panel#6304. Should we wait for this to be released before we merge this PR?

[pierrotsmnrd]

For these, could you use the functionality I introduced #257?

Yes that's what I'm doing, see here

I believe this was fixed in holoviz/panel#6304. Should we wait for this to be released before we merge this PR?

I confirm this fixes the issue. Yes, we will have to wait for it to be released before merging.

[pmeier]

Thanks @pierrotsmnrd, this is awesome! This resolves most of my gripes that I had with the way we styled the UI. I left a bunch of comments below. Two higher-level comments:

1. I see the styles.py file still has massive CSS stylesheets. Can they be moved to CSS files as well?

2. Since we now only rarely need to use ui.stylesheets (basically only if the style is only known at runtime), should we simplify the helper function? I'm thinking of it only accepting one class selector at a time. That would turn

   stylesheets=ui.stylesheets(("class-selector", {...}))

   into

   stylesheets=[ui.stylesheet("class-selector", {...})]

   Not a massive improvement, but I think this is easier to read. If you want to go for this in this PR, here is the new definition:

   def stylesheet(
       selectors: Union[str, Iterable[str]], declarations: dict[str, str]
   ) -> str:
       return "\n".join(
           [
               f"{selectors if isinstance(selectors, str) else ', '.join(selectors)} {{",
               *[f"    {property}: {value};" for property, value in declarations.items()],
               "}",
           ]
       )

   I can also send a follow-up PR if you prefer that.

[pierrotsmnrd]

I see the styles.py file still has massive CSS stylesheets. Can they be moved to CSS files as well?

The goal is to get rid of all the CSS currently in python files and move that in proper CSS files. So yes, they'll be moved.

Since we now only rarely need to use ui.stylesheets (basically only if the style is only known at runtime), should we simplify the helper function? I'm thinking of it only accepting one class selector at a time.

Totally ok with the concept, but I suggest to name it ui.css, it's shorter but conveys the same meaning.

[pmeier]

I didn't review everything yet, but I already found a few differences in the UI styling:

Create chat

main

PR

Message feed

main

The divider is black on the PR while it is a lighter gray on main.

PR

The messages on the PR are missing the border / background color.

[pierrotsmnrd]

There was indeed a problem with the separator in the configuration modal.
I don't reproduce your screenshot of the chat feed though. I guess it's a matter of emptying cache. Can you try that ?

[pmeier]

@pierrotsmnrd panel==1.4.0 (tracked in #379) also introduced new ways of styling the chat messages: https://blog.holoviz.org/posts/panel_release_1.4/#other-enhancements Can this be adopted here to simplify stuff?

[pmeier]

"Source info" button looks different from the copy button. This has nothing to do with panel==1.4 as it is visible in #312 (review) as well.

[pierrotsmnrd]

This is what I see. Can you make sure you empty cache before refresh ?

[pmeier]

I'm seeing the issue on Firefox and Chromium both with cleared caches.

[pmeier]

Thanks a ton Pierre! This looks awesome!