button primary green/gray color + disabled + selected states

[the-j0k3r]

• Browser: FF 77.0.1 (64-bit)
• Operating System: Windows 10 pro
• Link to page with the issue: ANy with green /gray buttons
• Screenshot:

Issue 1 green buttons color

The green buttons are now too bright way off the balance between green/red yellow
The OPEN state color is aberrantly off the right bg color.

State--green {
    background-color: #595;

this use to be set at same color as green buttons its now WAY OFF as well as being excessively bright.

Issue 2 disabled green button colors

The button doesnt look disabled AT ALL.

It use to be fine before moving to $color

Issue 3 - Some gray buttons selected is too bright

Ever since buttons were moved to generator these are now a unsightly #404040 this breaks some buttons right box shadow (which is makeshift border) like the all button in notifications.

Overall buttons are in a very unfortunate state since being moved to generator

TBH personally I will just do my own buttons style, so I can choose colors that suit my taste and screen quality.

[silverwind]

Thing with these greens is that the issue icons use the same color

They need to be bright for sufficient contrast there but on the other hand we're used to them being darker on the "open" labels.

[the-j0k3r]

When redid the green buttons I fixed all of this, they were all balanced and OK, now not even close.

Also I think you may need a better screen =) lol

[the-j0k3r]

Another broken button this time blue

https://help.github.com/en/github/administering-a-repository/managing-releases-in-a-repository

[the-j0k3r]

@silverwind this c7be5d9

so you are using $color and $background for same areas is causing some issues, I managed to get the button fixed but think the generator is overly complicating these things that should be straight forward and simple.

still hover todo.

[silverwind]

There's a lot such cases where it's not clear whether base-color or blue is needed. I think I will just drop the color option at some point, it's more trouble than it's worth having and we have more freedom in styling if we can assume blue base color.

[the-j0k3r]

You want to remove color customization and I think we need to add at least one more.

removing user customization options is not any kind of solution to me.

In your scenario any user wanting to customize would would have to spend time instead of just clicking something.

[LunarTwilight]

hope I'm not interrupting anything, but I've found that using grey works pretty well as a disabled button background color

[the-j0k3r]

@LunarTwilight I dislike such overly bright colors personally, if you read my report above, currently the grey buttons select is #404040 and I think its too bright already never you mind that named color grey,

Im working on a style for buttons only that you will be able to use whatever colors you like better within a restricted set of colors/shades/brightness. I will also include borders and other colors all user configurable.

[the-j0k3r]

@silverwind

I can track issue 2 to $color also.

FYI Im never going to fix this in this style until $color is fixed, Ive made my own button style for prsonal use for time being.

RIP

[the-j0k3r]

ISSUE 4

green colors no longer match in several sections #1154 (comment) for one

And then the verified colors and borders also dont match. This use to match and work fine.

the open button is

.State--green {
	background-color: #484;
}

the new issue button is

.btn-primary {
	background-color: #373;
	border-color: rgba(220, 220, 220, .15);
	box-shadow: none;
}

These USE to match before they were moved to generator and before $color Everything was green enough, matched and worked, now, yea mess.

[the-j0k3r]

There's a lot such cases where it's not clear whether base-color or blue is needed. I think I will just drop the color option at some point, it's more trouble than it's worth having and we have more freedom in styling if we can assume blue base color.

@silverwind feel free to drop background and color customization. I have an addon style nearly ready that will add it back.

It does more than that, and yea, You can customize nearly everything. within reason and even flip foreground colors when the bluecolor is changed to a very bright color like white.

[silverwind]

I plan to move everything to CSS vars so it'd be quite trivial to override those in additional styles.

Do we need to keep this issue open? I think green button issues are all resolved except maybe some minor color adjustments.

[the-j0k3r]

The gray buttons selected and others need to be less bright as reported, however lately the whole style looks completely alien gray/dark gray colors wise, its seems to be your preference, in that case close or do what you feel.

I plan to move everything to CSS vars so it'd be quite trivial to override those in additional styles.

this would be ideal, but the massive color palette is way too much to handle in any override style, especially if you want to customize colors. Ideally we want a much smaller range of colors.

But it would work for preset colors.

Either way css vars are much wanted for allowing customization externally without using any rules. So said style would be trivial

#1096 (comment) shows how many colors we actually have.

[silverwind]

Probably not going to do everything but shades of grey and base color are good candidates for variables.

[the-j0k3r]

Anything thats not covered by body bg color would also be nice :)

And all sorts of buttons would be nice to be variables, ill see where I can pitch in maybe try to extend the reach to a limited set that will allow a more comprehensive override with as little rules as possible.

[xt0rted]

If all of the colors were moved to variables we could set defaults for them and then use a secondary style like GitHub Dark Settings or something to let users set them to whatever they want, that way this style's config isn't crowded with them all.

/* ==UserStyle==
@name           GitHub Dark Settings
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
@preprocessor default
@advanced color ghd-bg-color "Background Color" #202020
==/UserStyle== */

@-moz-document domain("github.com") {
  body {
    /* Required for Stylus to load the style */
  }
}

[the-j0k3r]

If all of the colors were moved to variables we could set defaults for them and then use a secondary style like GitHub Dark Settings or something to let users set them to whatever they want, that way this style's config isn't crowded with them all.

Im working on something a great deal more advanced than this, Stay tuned to this channel

[silverwind]

@xt0rted Could not get your method to work, and even if it would, it probably has a race condition on which style applies last. Probably better to use uso and add !important:

/* ==UserStyle==
@name         Example UserCSS style
@namespace    github.com/openstyles/stylus
@version      1.0.0
@license      unlicense
@preprocessor uso
@var color ghd-bg-color "Background Color" #f1a
==/UserStyle== */
@-moz-document domain("github.com") {
  :root {
    --ghd-bg-color: /*[[ghd-bg-color]]*/ !important;
  }
}

[xt0rted]

@silverwind does the style name dictate ordering? In my testing I needed to prefix override styles with GitHub Dark to avoid !important and to get the right cascading.

[the-j0k3r]

IDk what you guys are trying to do here.

/* ==UserStyle==
@name         Example UserCSS style
@namespace    github.com/openstyles/stylus
@version      1.0.0
@license      unlicense
@preprocessor uso
@var color ghd-bg-color "Background Color" #f1a
@preprocessor stylus
==/UserStyle== */
@-moz-document @-moz-document domain("github.com") {

  /* hack to show style in popup no matter what */
  stylus-fix { content: 'true' }

  i = !important

  :root {
    --ghd-bg-color: ghd-bg-color;
    }
  }
}

[silverwind]

According to this installation order is used. Also there is this issue about it.

[the-j0k3r]

Why dont you guys have a look at an old POC version of what Im currently working on?

See #1113 (comment)

If youre creating an override style, then I guess my work is nullified by that, though I will publish it then elsewhere.

[silverwind]

I guess all preprocessors besides default should work because they give you control over !important. I have no interest in doing it using stylus, don't want to learn another styling language.

[the-j0k3r]

Theres no point more than one person working on overrides styles for this. But if you hack with important it will cause my style issues with overrides. We break all CSS cascades with misusing important

Also theres nothing to learn, use my example above #1154 (comment), it works you dont have to do anything else but add variables and colors in same format

[silverwind]

If I understand correctly, your example should be affected too by that loading order issue if it sets the same css var without important. You could also workaround by using a stronger selector, e.g. :root:root.

[xt0rted]

I'm not working on anything. I was only suggesting a way to offer color selection if GHD was updated with css variables without filling the settlings list with ones that most people wouldn't use. In fact, I haven't even been using this style lately so it doesn't really matter to me how this gets done.

[silverwind]

I'm also not intending to create any more override styles. I just want to faciliate customization from GHD's side.

[the-j0k3r]

CSS vars (not important) are the only help a override style needs

[the-j0k3r]

/* ==UserStyle==
@name         Example UserCSS style
@namespace    github.com/openstyles/stylus
@version      1.0.0
@license      unlicense
@preprocessor stylus

@var color ghdbgColor "Background Color" #f1a
@var color mainColor  "Main color"    #5e8acc

@preprocessor stylus
==/UserStyle== */
@-moz-document regexp("^https?://((education|gist|graphql|guides|docs|raw|resources|status|developer|support|vscode-auth)\\.)?github\\.com/((?!generated_pages/preview).)*$"), domain("githubusercontent.com"), domain("www.githubstatus.com"), domain("stylishthemes.github.io") {

  :root {
    --ghd-bg-color: ghdbgColor;
    --custom-thumb-color: mainColor;
    --webkit-scrollbar-thumb-hover: rgba(mainColor, .8);
    --base-color: mainColor;
  }
}

pay attention to scrollbars and selected tab color styles color as well

this works just fine for e.g as a POC you not only control base color but you control bg and so story goes

[the-j0k3r]