Create a Semantic UI theme

[amaury1093]

Proposal: Create a SUI theme to be used by all components

Motivation

Problem 1: I see a lot of components using their own colors in their own .css file. Some examples include $networkTestColor, $backgroundFrom as well as the orange DappRequest bar in the shell. This cases should appear quite rarely, and components should use global theme colors to keep the same color palette across all the app.

Problem 2: the $linkColor 4183c4 blue is very similar to the default SUI blue 2185d0 (<Button color="blue" />). It would make sense for both to use the same blue.

Solution

Create a SUI theme. We would replace

// index.js
- import 'semantic-ui-css/semantic.css';
+ import './parity.css';

where parity.css is just a themed version of semantic.css, and all SUI components will use the CSS styles of this theme.

If a component or a dapp needs a global variable, the component/dapp's style.less file would import @import '@parity/ui/some/path/site.variables, a file which would be similar to this one.

Downsides

SUI uses less, we would need to switch this repo completely to less.

For dapps, if they want to use components directly, they wouldn't need to use less, as this repo would export compiled css. However, if they wish to access to global variables, they would need to use less.