Polkadot color system

[behzad888]

I think button primary color in the Polkadot theme isn't clear and I think that button on bellow is disabled. so, I have a suggestion as material colors based on #430

[jacogr]

cc @Tbaut cc @yjkimjunior

I think we could def. lighten up quite bit, the disabled is a bit hard to read. We just need to make sure it fits in with the sidebar background and highlights. (And at the same time not look like the Substrate theme)

@behzad888 Do you have a list of your suggested colours vs the current?

[behzad888]

This is my suggestion!

/* apps/SideBar.css */
.apps--SideBar {
  background: #364150;
  ...   

/* ui-app/app.css */
#root {
  color: #364150;
  ...

/* ui-app/_colors-polkadot.css */
$green: #29B4B6;
$orange: #f36a5a;
$red: #e7505a;
$pewter-blue: #4B77BE;
$dark-sky-blue: #578EBE;
$silver-chalice: #acb7ca;
$cadet-grey: #708096;
$light-slate-gray: #b4bcc8;

/* ui-app/components.css */
.ui--output {
  background: #f5f8fd
  ...

/* ui-app/components.css */
.ui--output.error {
  background-color: #fef7f8;
  border-color: #f0868e;
  ...

/* ui-app/components.css */
.ui--InputFile {
  ...
  &.error {
    background-color: #fef7f8;
    border-color: #f0868e;
  }

/* app-transfer/index.css */
.error {
  background-color: #fef7f8;
  border-color: #e7505a;
  color: #e7505a;
}

/* app-transfer/index.css */
.warning {
  background-color: #faeaa9;
  border-color: #f3cc31;
}

/* ui-app/app.css */
h1 {
  color: #666;
  ...

/* ui-app/app.css */
.ui.action.input:not([class*="left action"])>input:focus {
    border-right-color: #3598dc!important;
}

/* ui-app/semantic.css */
.ui.button:disabled, .ui.buttons .disabled.button, .ui.disabled.active.button, .ui.disabled.button, .ui.disabled.button:hover{
  opacity: 0.4!important;
}

[behzad888]

You can see the result of most elements. I think this has a soul :)

[pmespresso]

Hmm, I like it and I agree this has more of a soul, but the blue looks suspiciously similar to Substrate theme. Since the Polkadot pink #d75ea1 is our base color could we maybe try out some other balance? I'm personally drawn to the triadic scheme: https://www.sessions.edu/color-calculator/

[pmespresso]

That being said, I feel like the #d75ea1 should be the primary action color for this theme.

current

proposed

[behzad888]

@yjkimjunior If we dont use other balance, we will have this accessibility:

Color		Large Text	Small Text
#d75ea1	White Text	min 87% opacity	NOT LEGIBLE
#d75ea1	Black Text	min 54% opacity	min 74% opacity
#96bdc6	White Text	NOT LEGIBLE	NOT LEGIBLE
#96bdc6	Black Text	min 46% opacity	min 61% opacity
#4B77BE	White Text	min 69% opacity	NOT LEGIBLE
#4B77BE	Black Text	min 61% opacity	min 95% opacity
#578EBE	White Text	min 86% opacity	NOT LEGIBLE
#578EBE	Black Text	min 54% opacity	min 75% opacity

so, the blue color with #578EBE nearest to base color!

I agree with a threshold of the base color but when I work with the current UI I think these buttons are disabled.

[jacogr]

@yjkimjunior I think you summarized my concerns - I love the popping blue, but it basically fits better with the Substrate theme. The current theme can be optimised around the base colors (no doubt about that), but this one stays a bit far and looks out of place in the screenshots as a whole.

Can certainly swap the primary action, but it doesn't solve the base issue - which in itself actually sounds simple - we have one button color which "feels" disabled. (Have run into this myself). So just that one adjustment to something that still fits and doesn't not "look" disabled, is solvable.

[pmespresso]

[jacogr]

The blues and pinks above are fine, it is the gray where the issue is. (It is the same shade as the sidebar and text, hence "feeling" disabled.)

[Tbaut]

If that can help to get ideas, I like to use that tool https://coolors.co/4e4e4e-d75ea1-ffffff-4b77be-96bdc6 Lock the colours you want for sure then press the space bar to get new suggestions. Pick an alternative shade for hover.

[polkadot-js-bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue if you think you have a related problem or query.