Integrate Remix's Bootstrap theme

[loredanacirstea]

See https://github.com/ethereum/remix-plugin#css-theme

[loredanacirstea]

Problem: the plugin is already using https://vuetifyjs.com/en/. I do not know how well this plays out with Bootstrap themes. If needed, a forked, Bootstrap-based version can be created.

@edisinovcic, thoughts?

[edisinovcic]

Vuetify -> remove vuetify and rewrite components from ground up with bootstrap Logic of the plugin can the same (reused), whole plugin UI has to be rewritten Only possible hack here is to implement a dark theme with vuetify but then with other themes it won’t work properly… and for other themes we would need to implement it… Fastest solution would be to create with bootstrap completely new plugin from ground up and take the logic from current implementation (new components etc.)

[loredanacirstea]

tl;dr: a light-dark general theme can be done within the current Vuetify framework.

Copying from my email answer:

I prefer to not change the frameworks for any of the projects, including the Yul+ plugin. I will want to reuse the same structure for a future Taylor plugin, therefore I have an incentive to maintain it. If I change the framework, it will be to match ChainLens & Pipeline, so I have react-native compatible components everywhere (but this does not concern us now).

Improving the theme/design is also in my interest, as this is the least strong suit I have. If it can be done so Remix’s users are happy, perfect.

If we see that it is too hard to mimic Remix’s theme, I will make a fork/branch for Vue & Bootstrap (not ideal).

I understand the beauty of having design consistency, but I assume most independent 3rd party plugin devs, such as myself, will want to use their own tools.

[edisinovcic]

tl;dr: a light-dark general theme can be done within the current Vuetify framework.

Copying from my email answer:

I prefer to not change the frameworks for any of the projects, including the Yul+ plugin. I will want to reuse the same structure for a future Taylor plugin, therefore I have an incentive to maintain it. If I change the framework, it will be to match ChainLens & Pipeline, so I have react-native compatible components everywhere (but this does not concern us now).

Improving the theme/design is also in my interest, as this is the least strong suit I have. If it can be done so Remix’s users are happy, perfect.

If we see that it is too hard to mimic Remix’s theme, I will make a fork/branch for Vue & Bootstrap (not ideal).

I understand the beauty of having design consistency, but I assume most independent 3rd party plugin devs, such as myself, will want to use their own tools.

Ok, so short term option would be to implement components for the dark theme and check if dark theme is activated, if it's not then show components as they are now. @yann there is no need to support other themes probably?

[igor-lid]

After some research, I would like to propose these changes. @loredanacirstea please review these changes and write if you agree with them. If you have any other suggestions please let us know.

• Update vuetify to the newest version so we can use the dark theme option from vuetify

• Install dependencies that newest version of vuetify demands

• Fix components, primarily props and classes if necessary (only if the newest vuetify version demands it).

• Change button colors to #007aa6 because bootstrap uses this color on light and dark themes. Use #c97539 for the orange deploy button.

• If there is a need for some other changes, I will post it here so we can discuss them and make a decision.

[loredanacirstea]

@igor-lid , sounds good. I agree.

[yann300]

currently it is possible to do stuff like: this.listen('theme', 'themeChanged', ({url, quality, name}) => { }) and {url, quality, name} = this.call('theme', 'currentTheme'), that way you are aware if the quality of the theme is dark or light, and the bootstrap url is also provided. I am wondering if some logic can be put in remix-plugin itself.. That way, together with the url, name and quality we could have a vuetify description of the theme that can directly be used by the app. like {url, quality, name, vuetifyDescription}.

any thoughts or ideas @grandSchtroumpf ?

[GrandSchtroumpf]

I don't know vueify, but it doesn't feel like the best solution to add one endpoint for each framework inside remix ide itself. For me the best solution would be to provide a theme with css variables (colors, typography, size density, common margins,...) and let the plugin build on top. Like that we could provide connector for major design system (bootstrap, material, ???), or the plugin developer could use these variables to theme the plugin with ease. This is the solution we use for VSCode engine for example. But this would require some time to build I guess.

[yann300]

indeed @GrandSchtroumpf , so perhaps something like {url, quality, name, styleDescription} styleDescription being a, as generic as possible, description of the styles declared in the theme? @igor-lid @loredanacirstea if the remix api returns such a property, would you be able to make use of it?

[GrandSchtroumpf]

We could return a JSON description with every css variable values if someone want to write some css-in-js. But the most standard way would be to create a stylesheet to set the variable in :root, so it's accessible accross shadow dom.

[yann300]

We need to make sure the app is actually using these variables right? The current bootstrap css is already containing :root, so it would be quite easy to provide along side with that another css describing only :root. ... I just checked and yul plugin already contain a css link reference to the remix theme with the :root inside so you can already make use of it. But it sounds like this is a poor subset of the whole theme..

fyi @igor-lid here is the root of the dark theme

:root {
    --blue: #007aa6;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #b84040;
    --orange: #c97539;
    --yellow: #ffc107;
    --green: #32ba89;
    --teal: #20c997;
    --cyan: #355f7d;
    --white: #fff;
    --gray: #868e96;
    --gray-dark: #343a40;
    --primary: #007aa6;
    --secondary: #595c76;
    --success: #32ba89;
    --info: #086CB5;
    --warning: #c97539;
    --danger: #b84040;
    --light: #2a2c3f;
    --dark: #222336;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

[igor-lid]

Sorry for not replying earlier. Thanks, @yann300 for providing variables.

Yes as Yann mentioned bootstrap css is available globally and we can use these variables in yul plugin.

Also, I agree that this is a poor subset of the whole theme.

The thing is that bootstrap in their styles uses some color values that are not provided in :root. For example .form-control uses this color #35384C.

We can take advantage of some variables defined in :rootbut others we need to define inside the plugin.

[yann300]

After some discussions in the remix-ide chat here's what we would probably do:

• [ ] update our bootstrap theme (remix ones) for using css variables (a first small set of css yet to be defined).
• [ ] remix-ide returns a JSON description of the css style.
• [ ] remix-plugin inject in the iframe (in :root) the css variable.
• [ ] yulp plugin should apply themes either through the JSON description or using :root directly.
• [ ] we incrementally define and add other variables that are required by yulp to function with remix themes.

please comment if anything is missing.