Top panel column labels disappear when implementing custom viewer theme

[cryptoderes]

Feature Request

Description of Problem:

Code Sandbox: https://codesandbox.io/p/sandbox/perspective-custom-theme-bug-6y24tl

I want to create custom CSS themes for perspective viewer that are accessible from the drop down menu. In particular, when applying a custom CSS theme to the viewer, I want the top panel column labels ("Group By", "Split By", "Order By", "Where") to render so I can implement a usable custom theme.

The custom theme in the example was created as a CSS file that is loaded into the viewer via viewer.resetThemes, and can be selected from the dropdown menu by choosing the option "Style1". When the custom theme is applied, the label tags of these items exist in the HTML body, however the labels no longer have the "::before" pseudo class. The text does not show up in the viewer.

Potential Solutions:

I would like to create custom themes wherein I modify the exposed CSS variables (to toggle fields such as icon color, chart series colors, and fonts) and offer them in the dropdown alongside native Perspective themes.

[brianblakely]

+1 custom themes

[texodus]

Your code sandbox correctly defines and registers a new Theme, but this theme is empty - in this case, you are missing the --column-drop-label--display: inline-block; rule which causes the labels to not display, but this is just coincidentally something you noticed - in actuality you are missing dozens of small rules in this example. Custom theme support in Perspective currently does not support true inheritance, so in order to define a new theme you must define everything theme variable, not just what you want to "customize".

Perhaps confusingly, the themes.css file allows partial inheritance when it is in scope, by leaking the icon and intl definitions globally when they are imported, so in your example you are seeing icons & labels text, when you would see nothing had you only imported your custom theme.

I have added documentation for custom themes to the guide in #2910 (and changed the default behavior for --column-drop-label--display).