Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button color #109

Open
coloredlambda opened this issue Jan 20, 2018 · 3 comments
Open

Button color #109

coloredlambda opened this issue Jan 20, 2018 · 3 comments

Comments

@coloredlambda
Copy link
Contributor

I tried changing the button color, but it won't change to any other color apart from blue

@gabrielbull
Copy link
Owner

Only blue is supported so far. PR is welcome. Thanks.

@coloredlambda
Copy link
Contributor Author

coloredlambda commented Jan 20, 2018

Okay :)

@gabrielbull gabrielbull added this to the Beta 0.4.0 milestone Jan 31, 2018
@AndrewKralovec
Copy link

AndrewKralovec commented Feb 23, 2019

I can take this one.
Originally i was going to implement our color logic from the windows button. However, apple is very particle about their colors schemes (also evident in all our Windows components). So instead I'm thinking we create a map of the of the avilable colors options found here , Colors.

@gabrielbull , are we basing the masOS colors off a source, or what we view from the applications themselves?

For example, the current blue style defines colors for the borders that I cant seem to find defined anywhere online. I took at stab at making the color pink, based on how the colors we defined on the blue class, but I'm not sure how to verify the color scheme for the top,bottom, etc, styles.

  blue: {
    backgroundImage: '-webkit-linear-gradient(top, #6cb3fa 0%, #087eff 100%)',
    borderTopColor: '#4ca2f9',
    borderBottomColor: '#015cff',
    borderLeftColor: '#267ffc',
    borderRightColor: '#267ffc',
    color: 'rgba(255, 255, 255, .9)',

    ':active': {
      backgroundImage: '-webkit-linear-gradient(top, #4c98fe 0%, #0564e3 100%)',
      borderTopColor: '#247fff',
      borderBottomColor: '#003ddb',
      borderLeftColor: '#125eed',
      borderRightColor: '#125eed',
      color: 'rgba(255, 255, 255, .9  )'
    }
  },
  pink: {
    backgroundImage: '-webkit-linear-gradient(top, #FF365D 0%, #fc0030 100%)',
    borderTopColor: '#ff4a53',
    borderBottomColor: '#ff0031',
    borderLeftColor: '#ff2852',
    borderRightColor: '#ff2852',
    color: 'rgba(255, 255, 255, .9)',
    ':active': {
      backgroundImage: '-webkit-linear-gradient(top, #ff2d55 0%, #ff0030 100%)',
      borderTopColor: '#ff4053',
      borderBottomColor: '#ce0026',
      borderLeftColor: '#ed1141',
      borderRightColor: '#ed1141',
      color: 'rgba(255, 255, 255, .9)',
    },
    ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants