Use CSS to define styling

[amolenaar]

This PR is a continuation of #320.

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Documentation content changes

What is the current behavior?

Styling can be defined, but as a Python dict in the config folder.

Issue Number: #284

What is the new behavior?

Styling can be defined in CSS syntax. This PR handles the processing of a CSS file and allows the CSS style to be applicable for elements.

I want to limit the scope to the * CSS selector.

Out of scope: CSS selectors.

Does this PR introduce a breaking change?

• Yes
• No

Other information

[amolenaar]

CSS is read:

The style sheet is added to the model, so if you open example/all-elements.gaphor, you should see the model as above, with alternate color and font.

[amolenaar]

Now in the Console, you can change the stylesheet like this:

Gaphor Interactive Python Console
3.8.2 (default, Apr 27 2020, 15:53:34) 
[GCC 9.3.0]
Type "help" for more information.
>>> from gaphor import UML
>>> ef = service("element_factory")
>>> s = ef.lselect(UML.StyleSheet)[0]
>>> s.styleSheet = "* {background-color: rgba(255, 143, 65, 0.2); }"
>>> s._style
{'background-color': (1.0, 0.5607843137254902, 0.2549019607843137, 0.2)}
>>> s.styleSheet = "* {background-color: rgba(255, 143, 200, 0.2); }"
>>> 

[danyeaw]

Excellent! 🎉