Rework the stylesheets for the wc-gocam-viz and wc-genes-panel components to allow external styling via CSS custom properties (aka CSS variables) and CSS parts.
Split the legend out into a new standalone component (wc-gocam-legend) and move assets accordingly.
Make the default style more of a "blank canvas"
Add an separate example page (src/styled.html) with style rules that make it visually similar to the default style of previous versions
Remove a few hardcoded element IDs and replaced with JSX refs where necessary
Example
See src/styled.html to see what style rules were used for the screenshot on the right.
Notes
Many elements have the same set of CSS properties (padding, text color. background, border width and color) controlled by CSS variables. Two new Sass mixins (standard-var-styles and standard-var-declarations) are introduced here to reduce the repetition of defining those variables.
With regard to prefixed class names, these changes actually simplify all the class names. Since all components use the shadow DOM now, page-level style rules will not affect the components and vice versa ("Simpler CSS selectors are a best practice inside Shadow DOM"). Similarly all CSS custom properties are scoped to the custom elements. Meaning this will have no effect:
Fixes #17, fixes #18
Summary
wc-gocam-vizandwc-genes-panelcomponents to allow external styling via CSS custom properties (aka CSS variables) and CSS parts.wc-gocam-legend) and move assets accordingly.src/styled.html) with style rules that make it visually similar to the default style of previous versionsExample
See
src/styled.htmlto see what style rules were used for the screenshot on the right.Notes
standard-var-stylesandstandard-var-declarations) are introduced here to reduce the repetition of defining those variables.But this will:
cc: @kltm