Update admin color palette and font #3192

mfrecchiami · 2019-04-24T15:25:38Z

With the aim of defining a solid brand image for Solidus, we updated the color palette and the backend font with Inter, a 100% Open Source font family; then we'll replace the product images with the Solidus design, then all the icons (now there's font-awesome ) will be replaced with a custom icon font.

After this first phase, we'll deal with more structural improvements related to the elements such as forms, main navigation etc.

Our goal must be to make the Solidus product attractive also to the decision makers and to do so it is necessary to invest in the visual as well as marketing part.
Furthermore, a cured (as well as performed) product also gives the idea of solidity.

Some screenshots here:

dhonig · 2019-04-24T16:52:04Z

Great work! Again I'd like to suggest that we drop the spree_frontend altogether and start working on starter kits in react/vue.js etc.

benjaminwil · 2019-04-24T17:57:07Z

then all the icons (now there's font-awesome ) will be replaced with a custom icon font

I agree that this will more attractive to decision makers, and I am happy so much care is going into the backend.

I hope we will still keep font-awesome or some other stock icon library easily available for developers. It is great to have ready-made icons available for extensions and custom backend views that Solidus does not provide out of the box.

elia

Great work! 🚀
I added a couple of minor things to be fixed, after that seems ready for a merge 👍👍👍

backend/app/assets/stylesheets/spree/backend/globals/_fonts.scss

backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss

backend/app/assets/stylesheets/spree/backend/components/_messages.scss

backend/app/assets/stylesheets/spree/backend/globals/_variables_override.scss

mfrecchiami · 2019-05-03T14:04:21Z

Hi @benjaminwil thank you for your feedback!
Actually we thought a lot about the font icon issue: maybe the best solution is to create custom icons only for the main navigation and replace Font Awesome with another open source font that has the same look and feel of the custom navigation icons.
We're looking for the best solution, both for the brand and for the devs ;)

jacobherrington

This looks great imo! 👍 Thanks @mfrecchiami!

ericsaupe

Looks awesome, great improvements! Obviously more improvements can be made as an iteration on this but this is a great start.

mfrecchiami · 2019-05-07T12:49:38Z

@jacobherrington and @ericsaupe thank you! 🙏

kennyadsl · 2019-05-09T14:40:50Z

backend/app/assets/stylesheets/spree/backend/globals/_variables.scss

-$color-4: #6788A2 !default; // Dark Blue
-$color-5: #C60F13 !default; // Red
-$color-6: #FF9300 !default; // Yellow
-$color-7: #F4F4F4 !default; // Light Gray


I've just one concern about removing variables. If extensions or stores are using them they'll end up having an error while compiling stylesheets. What about moving them into a _deprecated-variables.scss file instead?

I'm not sure if there's a way to actually deprecate them with scss. I've made some test with this code:

@if variable-exists(color-1) { @warn '$color-1 will be removed, please use $color-primary;'; $color-1: $color-primary; }

and it works, but it only prints a deprecation message if you re-define $color-1, not if you just use it. It also has to be declared after the $color-1 definition, which is basically useless for both extensions and stores since they will eventually declare/override variables after solidus files are loaded.

@tvdeyen do you have any idea around this?

Great point @kennyadsl

We already have a way to deprecate variables https://github.com/solidusio/solidus/blob/master/backend/app/assets/stylesheets/spree/backend/globals/_deprecation.scss

You use it like this

solidus/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss

Line 42 in 475d9db

@include solidus-deprecated-variable("color-success", "brand-success");

Hi guys! I've just pushed a commit to resolve this issue; as you can seen the old numbered color variables has been re-added in a their own scss partial, and I used the existing sass mixin, suggest by @tvdeyen (I just duplicate it and renamed the old one because it refers to Bootstrap variables, and its warning message, also).
Thank you @kennyadsl for your feedback!

The message that I wrote refers to a future 3.0 version of Solidus, so we can keep the deprecated variables on 2.8 and 2.9vs. What do you think about that?

Awesome 🍰

tvdeyen

💯 🎉 This is awesome work. It really looks nice and great work implementing the change.

There are still some places where we could make use of Sass variables. Especially the button styles.

backend/app/assets/stylesheets/spree/backend/components/_navigation.scss

backend/app/assets/stylesheets/spree/backend/shared/_layout.scss

backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss

backend/app/assets/stylesheets/spree/backend/components/_navigation.scss

backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss

backend/app/assets/stylesheets/spree/backend/shared/_forms.scss

backend/app/assets/stylesheets/spree/backend/shared/_typography.scss

backend/app/assets/stylesheets/spree/backend/globals/_fonts.scss

backend/app/views/spree/admin/shared/_head.html.erb

tvdeyen · 2019-05-09T15:35:24Z

We probably want to update the date picker styles as well?

tvdeyen · 2019-05-09T15:39:53Z

There are still some places that use the old button classes and therefore get the secondary button style. Product -> Images for instance.

BTW: I really like the secondary button style, as it looks like a button (a mayor downside of the flat UI trend). But it looks a bit misplaced next to the primary buttons that are still flat. Any plans to make them non-flat buttons as well? I would appreciate that.

tvdeyen · 2019-05-10T08:02:28Z

I hope we will still keep font-awesome or some other stock icon library easily available for developers. It is great to have ready-made icons available for extensions and custom backend views that Solidus does not provide out of the box.

I agree with Benjamin here. Lots of stores and extensions use the provided icons. We can't just replace them without breaking them.

Actually we thought a lot about the font icon issue: maybe the best solution is to create custom icons only for the main navigation and replace Font Awesome with another open source font that has the same look and feel of the custom navigation icons.
We're looking for the best solution, both for the brand and for the devs ;)

I understand the thought from a brand standpoint, but we are an open source framework that is used because of its extensibility and ease of customisation. That includes icons IMO. Custom drawn icons is a maintenance burden for us. I advice us to use open source icons whenever possible.

FontAwesome 5 is a great resource for free icons that has lots of modern integration options.

Please keep that in mind.

Thanks for all the great work on the new admin. I really appreciate the work that has been done here.

tvdeyen

Thanks for addressing 🍰

I have some questions about the font files. As we do not "made" them we should move them into the vendor/assets/fonts folder and require them with an absolute path.

This is really looking great and we should be able to merge this soon :)

backend/app/assets/stylesheets/spree/backend/shared/_fonts.scss

backend/app/assets/stylesheets/spree/backend/shared/_typography.scss

tvdeyen

🚀 💯

Update of color variables with the aim of making the product more recognizable. Application of the new colors to the navigation sidebar and tabs navigation.

Update logo with mark, space adjustment. Set the link click on the entire surface of the logo. Apply this changes on frontend, also.

Check and find right variables partial that is using to ovveride the Bootstrap default variables. This is necessary to update colors of buttons and minor components, later.

Apply the same new UI to some minor components like breadcrumbs and pagination. Set the same font weight of sidebar navigation items, to the bottom login navigation.

For now we are able to update the secondary action like Cancel.

While the new gray style did applied to the generic .button class, in common cases (and where the .btn-primary is applied on a secondary action) is better using the .btn-default class, suggested by Bootstrap.

In the previous commit it was introduced a new class to apply to the secondary actions that not has the generic .button class, but have the .btn-primary class (also if they are secondary actions, e.g.: Cancel).

Add a 4px blue line on the top of header, because in the second phase we want to have a minimal darken header without breadcrumbs inside it. Then, some top margin was added to main navigation.

Avoid legend titles and total amounts with green color: first reason is because of legibility, then is better use green color only for success messages or status.

The background and background-color conflicted when are used on .fa class

Add a border to popover arrow, change background color and add border-radius

Always folllowing the aim of create a product image for Solidus, the Open Sans font has been replaced by Inter, a open source font which stands out for its readability and likeness to the SF Apple font (not an open source font, actually) that is in use on Solidus website

Apply to input-border variable its own color (a darken gray vs previous border color); adjust the color of error messages, also to the validation state form. Adjust flash states messages colors. The next step for the flash messages is to insert a related icon (e.g.: check icon for success messages etc.).

After these changes is now the time for update the Backend Style Guide, with brand new colors.

While we are changing the colors palette, we've decided to give conventional names to the main colors variables that were: color-1, color-2, color-3 and so on. Now we can recognize the colors easily. The style guide has also been updated.

A text-transform has been added to style the Store Location Name, but changhe this name to uppercase, fails the Circle test.

All the HEX colors and font weight style has been replaced with their variable names. Furthermore an oversight about the new font has been fixed.

I had to add a rule to the production.rb file for allow the correct interpretation of the font formats.

Previously numbered color variables has been re-added in a their own scss partial, so we can show a deprecation warning message that suggests to change e.g.: `$color-1` to `$color-white`. The name of the existing mixin has been changed also, because its warning message was about Bootstrap variables.

The btn-primary style has been applied on the primary actions visible at the top of some secrtions.

The previous implementation for the rspec custom matcher `appear_before` was often flaky. The new one, relying on the standard Capybara matcher `#has_text?` is supposed to be more reliable, also when JS is involved.

In the relative previous commit, the old numbered color variables has been re-added for print a custom warning message; actually the message was printed every time and in any case, and it was not so helpful. Now, the warning msg is printed only if a variable is declared in `_variable_override.scss`.

jacquesporveau · 2019-05-31T14:42:02Z

Great job!

mtomov · 2019-06-30T23:12:13Z

Indeed, thank you for that!

mfrecchiami changed the title ~~Create the Solidus brand image: first phase~~ Update admin color palette and font Apr 24, 2019

elia requested changes May 3, 2019

View reviewed changes

jacobherrington approved these changes May 6, 2019

View reviewed changes

ericsaupe approved these changes May 6, 2019

View reviewed changes

elia approved these changes May 7, 2019

View reviewed changes

mfrecchiami force-pushed the mfrecchiami/color-palette-update branch from 5592e2f to 3cd2ef5 Compare May 8, 2019 14:59

kennyadsl reviewed May 9, 2019

View reviewed changes

tvdeyen reviewed May 9, 2019

View reviewed changes

mfrecchiami force-pushed the mfrecchiami/color-palette-update branch from 2a0b54f to e8832d0 Compare May 10, 2019 15:48

kennyadsl added the WIP label May 10, 2019

mfrecchiami force-pushed the mfrecchiami/color-palette-update branch from e8832d0 to 9e9ba78 Compare May 10, 2019 16:11

tvdeyen reviewed May 10, 2019

View reviewed changes

backend/app/assets/stylesheets/spree/backend/shared/_fonts.scss Outdated Show resolved Hide resolved

backend/app/assets/stylesheets/spree/backend/shared/_typography.scss Show resolved Hide resolved

mfrecchiami force-pushed the mfrecchiami/color-palette-update branch 2 times, most recently from 559f373 to dedb48b Compare May 22, 2019 09:51

tvdeyen approved these changes May 22, 2019

View reviewed changes

mfrecchiami force-pushed the mfrecchiami/color-palette-update branch from 18ed32c to 0e82fe5 Compare May 30, 2019 13:00

mfrecchiami added 7 commits May 31, 2019 15:10

Update color variables

c34a7da

Update of color variables with the aim of making the product more recognizable. Application of the new colors to the navigation sidebar and tabs navigation.

Update Solidus logo with mark

992b370

Update logo with mark, space adjustment. Set the link click on the entire surface of the logo. Apply this changes on frontend, also.

Update partial that ovverides Bootstrap variables

d6ec9ff

Check and find right variables partial that is using to ovveride the Bootstrap default variables. This is necessary to update colors of buttons and minor components, later.

Colors fixes on breadcrumbs and pagination

bdde1e9

Apply the same new UI to some minor components like breadcrumbs and pagination. Set the same font weight of sidebar navigation items, to the bottom login navigation.

Add a new style to the secondary actions

bcbea6b

For now we are able to update the secondary action like Cancel.

Add a dedicated style to the secondary actions

c39338d

While the new gray style did applied to the generic .button class, in common cases (and where the .btn-primary is applied on a secondary action) is better using the .btn-default class, suggested by Bootstrap.

Apply the correct class to the secondary buttons

3fae2fa

In the previous commit it was introduced a new class to apply to the secondary actions that not has the generic .button class, but have the .btn-primary class (also if they are secondary actions, e.g.: Cancel).

mfrecchiami and others added 17 commits May 31, 2019 15:10

Add a blue line on the top of header and minor fix

2274855

Add a 4px blue line on the top of header, because in the second phase we want to have a minimal darken header without breadcrumbs inside it. Then, some top margin was added to main navigation.

Replace green color on legend titles and amounts

c7464ff

Avoid legend titles and total amounts with green color: first reason is because of legibility, then is better use green color only for success messages or status.

Adjust css background rule to button

c25c2b3

The background and background-color conflicted when are used on .fa class

Adjust navigation popover style

a8b5941

Add a border to popover arrow, change background color and add border-radius

Update Solidus Backend Style Guide

7a60ff5

After these changes is now the time for update the Backend Style Guide, with brand new colors.

Update main colors variables name

9552ccc

While we are changing the colors palette, we've decided to give conventional names to the main colors variables that were: color-1, color-2, color-3 and so on. Now we can recognize the colors easily. The style guide has also been updated.

Fix indentation on a scss partial

f33c03e

Remove text-transform from Store Location Name

2263bf3

A text-transform has been added to style the Store Location Name, but changhe this name to uppercase, fails the Circle test.

Add missed new lines at the end of some files

c42c603

Replace HEX color - font weight with variables

9b2b1c4

All the HEX colors and font weight style has been replaced with their variable names. Furthermore an oversight about the new font has been fixed.

Move fonts folder to vendor assets path

0ad5cd0

I had to add a rule to the production.rb file for allow the correct interpretation of the font formats.

Minor update on btn primary and secondary styles

304a96f

The btn-primary style has been applied on the primary actions visible at the top of some secrtions.

Change appear_before matcher to avoid flakes

41d400b

The previous implementation for the rspec custom matcher `appear_before` was often flaky. The new one, relying on the standard Capybara matcher `#has_text?` is supposed to be more reliable, also when JS is involved.

mfrecchiami force-pushed the mfrecchiami/color-palette-update branch from c1ee6b6 to c5fb960 Compare May 31, 2019 13:11

kennyadsl merged commit 1611335 into solidusio:master May 31, 2019

kennyadsl deleted the mfrecchiami/color-palette-update branch May 31, 2019 14:04

kennyadsl added Important Change changelog:solidus_backend Changes to the solidus_backend gem and removed WIP labels May 31, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update admin color palette and font #3192

Update admin color palette and font #3192

mfrecchiami commented Apr 24, 2019 •

edited

Loading

dhonig commented Apr 24, 2019

benjaminwil commented Apr 24, 2019

elia left a comment

mfrecchiami commented May 3, 2019

jacobherrington left a comment

ericsaupe left a comment

mfrecchiami commented May 7, 2019

kennyadsl May 9, 2019 •

edited

Loading

tvdeyen May 9, 2019

mfrecchiami May 22, 2019

tvdeyen May 22, 2019

tvdeyen left a comment

tvdeyen commented May 9, 2019

tvdeyen commented May 9, 2019

tvdeyen commented May 10, 2019

tvdeyen left a comment

tvdeyen left a comment

jacquesporveau commented May 31, 2019

mtomov commented Jun 30, 2019

Update admin color palette and font #3192

Update admin color palette and font #3192

Conversation

mfrecchiami commented Apr 24, 2019 • edited Loading

dhonig commented Apr 24, 2019

benjaminwil commented Apr 24, 2019

elia left a comment

Choose a reason for hiding this comment

mfrecchiami commented May 3, 2019

jacobherrington left a comment

Choose a reason for hiding this comment

ericsaupe left a comment

Choose a reason for hiding this comment

mfrecchiami commented May 7, 2019

kennyadsl May 9, 2019 • edited Loading

Choose a reason for hiding this comment

tvdeyen May 9, 2019

Choose a reason for hiding this comment

mfrecchiami May 22, 2019

Choose a reason for hiding this comment

tvdeyen May 22, 2019

Choose a reason for hiding this comment

tvdeyen left a comment

Choose a reason for hiding this comment

tvdeyen commented May 9, 2019

tvdeyen commented May 9, 2019

tvdeyen commented May 10, 2019

tvdeyen left a comment

Choose a reason for hiding this comment

tvdeyen left a comment

Choose a reason for hiding this comment

jacquesporveau commented May 31, 2019

mtomov commented Jun 30, 2019

mfrecchiami commented Apr 24, 2019 •

edited

Loading

kennyadsl May 9, 2019 •

edited

Loading