Add ability to customize store UI (theming support)

[MrNaif2018]

Also tracked in bitcart/bitcart#166

We need to add ability to customize theme colors of the store (for custom brands). Probably the best solution is to use css variables.

I have implemented basic theming support in 3730413 and 1d02318

There are few things left to make it fully customizeable:

• Make all custom bulma libraries (bulma-steps, bulma-switch, etc) use same theme settings
  Currently for example switch color is still green even when success color of the theme was changed to another color, see:
  https://github.com/Wikiki/bulma-switch/blob/master/src/sass/index.sass#L1
  First of all to make it all work, we need to remove stylus and use sass everywhere, see Migrate all stylus styles to sass #316
  After that we need to ensure that sass customizations get applied to component scoped styling.
  If not all components styling can be moved to main.sass file
  https://github.com/bitcartcc/bitcart-store/blob/1d023187d32fa08bf4043badc2137e6b4a18979b/components/Switch.vue#L25
  Also probably we should import not from css, but from source sass files to be able to customize some variables
  If it still doesn't work, we might need to expose more colors to customization or change switch-background variable to use some color like $primary instead of $grey-light
• Add more colors and variables for customization if needed:
  https://github.com/bitcartcc/bitcart-store/blob/1d023187d32fa08bf4043badc2137e6b4a18979b/bulma-css-vars.config.js#L4-L17
  Also maybe there could be a better way to not hardcode hsl values of colors
• Add ability to load custom theme css. Sample file:

:root {
  --brand-color: #162d50;
  --primary: var(--brand-color) !important;
  --success: var(--brand-color) !important;
  --link: var(--brand-color) !important;
}

The css should be loaded dynamically via head function inside default layout.
Css file url itself is a variable got from store object.
Merchants API needs to be customized to add new store theming settings, see bitcart/bitcart#244

• And if all of the above is implemented, we could try to allow using bulmaswatch for easily selecting themes. This means that some existing styles might need to be customized to allow this

Note that all themes being applied should happen at the runtime, so at sass compilation step we should provide all needed css variables for modification later

[MrNaif2018]

@beatrizsmerino Assigning you there (even though it is not required) :D
EDIT: please comment on the issue for me to be able to assign you if you need it

[beatrizsmerino]

thanks !! :)
I'm reading the requirements and making a fork of the project

[beatrizsmerino]

I'm having problems for run the project npm run dev

[MrNaif2018]

Yeah sorry for that, it needs to be fixed. There is an open issue for that, but I was waiting if someone would take it up (:
#318
See #316 (comment) this guide on how to set up merchants api
Also we use yarn, it is recommended to not mix package managers' lock files

[MrNaif2018]

Hi @beatrizsmerino! Do you have any questions so far? Were you able to run the app without the connection error?

[beatrizsmerino]

Hi @beatrizsmerino! Do you have any questions so far? Were you able to run the app without the connection error?

sorry, I have not yet been able to run the project.

[MrNaif2018]

Let me know if you have any issues.
I have documented how to run admin panel here:
https://github.com/bitcartcc/bitcart-admin/blob/master/CONTRIBUTING.md#merchants-api
For store, replace BITCART_ADMIN_API_URL with BITCART_STORE_API_URL

[MrNaif2018]

Hi @beatrizsmerino! Have you been able to look at this? Do you need some help?