Closed behzad888 closed 5 years ago
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?
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;
}
You can see the result of most elements. I think this has a soul :)
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/
That being said, I feel like the #d75ea1
should be the primary action color for this theme.
@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.
@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.
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.)
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.
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.
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