react-desktop icon indicating copy to clipboard operation
react-desktop copied to clipboard

Button color

Open coloredlambda opened this issue 7 years ago • 3 comments

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

coloredlambda avatar Jan 20 '18 13:01 coloredlambda

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

gabrielbull avatar Jan 20 '18 15:01 gabrielbull

Okay :)

coloredlambda avatar Jan 20 '18 18:01 coloredlambda

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)',
    },
    ...

AndrewKralovec avatar Feb 23 '19 14:02 AndrewKralovec