argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.
https://open-props.style
MIT License
4.51k stars 184 forks source link

Add social media brand colors pack #471

Open argyleink opened 4 months ago

argyleink commented 4 months ago
:where(html) {
  --facebook: #1877f2;
  --facebook-old: #3b5998;
  --twitter: #1da1f2;
  --youtube: #ff0000;
  --instagram: #c32aa3;
  --instagram-blue: #4c5fd7;
  --instagram-purple: #7232bd;
  --instagram-orange: #f46f30;
  --instagram-yellow: #ffdc7d;
  --google-blue: #4285f4;
  --google-red: #ea4335;
  --google-yellow: #fbbc05;
  --google-green: #34a853;
  --pinterest: #bd081c;
  --snapchat: #fffc00;
  --whatsapp: #25d366;
  --whatsapp-teal: #075e54;
  --whatsapp-teal2: #128c7e;
  --tiktok-black: #010101;
  --tiktok-blue: #69c9d0;
  --tiktok-pink: #ee1d52;
  --tiktok-white: #fff;
  --mastodon: #563acc;
  --apple: #a6b1b7;
  --amazon: #ff9900;
  --alexa: #00a7ce;
  --microsoft-red: #f35022;
  --microsoft-green: #80bb03;
  --microsoft-blue: #03a5f0;
  --microsoft-yellow: #ffb903;
  --periscope: #40a4c4;
  --foursquare-pink: #f94877;
  --foursquare-navy: #073282;
  --foursquare-blue: #2d5be3;
  --yelp: #d32323;
  --swarm: #ffa633;
  --medium: #02b875;
  --skype: #00aff0;
  --skype-dark-blue: #0078d7;
  --android: #a4c639;
  --stumbleupon: #e94826;
  --flickr-pink: #f40083;
  --flickr-blue: #006add;
  --yahoo: #430297;
  --twitch: #9146ff;
  --soundcloud: #ff5500;
  --spotify: #1ed760;
  --spotify-dark-green: #1db954;
  --dribbble: #ea4c89;
  --slack-purple: #4a154b;
  --slack-blue: #36c5f0;
  --slack-green: #2eb67d;
  --slack-red: #e01e5a;
  --slack-yellow: #ecb22e;
  --reddit: #ff5700;
  --deviantart: #05cc47;
  --pocket: #ee4056;
  --quora: #2b6dad;
  --slideshare-orange: #e68523;
  --slideshare-blue: #00a0dc;
  --fivehundredpx: #0099e5;
  --vk: #4a76a8;
  --listly-orange: #df6d46;
  --listly-blue: #52b1b3;
  --vine: #00b489;
  --steam: #171a21;
  --discord: #5865f2;
  --telegram: #0088cc;
}

this was generated by Gemini.. needs reviewed and pruned (like deviantart, vine, etc.. we dont need those right?). Also what's missing? Bluesky?

DhruvrajsinhRathod commented 4 months ago

Can you please specify a bit more, how and what to do this? Thank you :)

argyleink commented 4 months ago

Work outline:

  1. put props into a js file in the /src folder as props.social.js, like this
  2. add a build step to package.json, like this
  3. run the build step to generate a CSS file in the src directory
  4. add an entry to the package.json exports for the file, like this
  5. update the tests to the new props total, like this
  6. make a PR

Additional pre/post work items:

  1. need to make sure the file offers the most common networks, but not too many
  2. need to document the new props on the docsite somewhere and somehow
  3. should have a neat codepen demo or something that uses the import and colorizes a bunch of icons
  4. maybe we should split out each social network into its own file but also offer a single import for all of them? that would let one file grow large, for use with like jit-props, but also offer individual imports of just the networks you need (so no need for build tools to produce small output)

I may have forgotten something in there, but I'll help you through it if you like. The docsite work is nice to have at the same time as the new props, but some may consider it to be too much work.

DhruvrajsinhRathod commented 4 months ago

Perfect! Thanks a lot. Working on it :)

Brian-Pob commented 3 months ago

Just found this website: https://brandcolors.net/

Might be useful for this feature!

toastal commented 3 weeks ago

I think this should be entirely optional if added. Personally I don’t like supporting these largely proprietary service in general, but I think this starts to open flood gates about who/what gets added to this list & what services aren’t cool/popular/political/whatever enough to make the arbitrary list. …We already get whiffs of this with the comment:

needs reviewed and pruned (like deviantart, vine, etc.. we dont need those right?). Also what's missing? Bluesky?

DeviantArt is still running. “FlorbleFooBar, my favorite social media service, isn’t added to the list plz merge.”

I don’t know that maintaining this list would be a fun or worthwhile endeavor & would largely be a distraction that I think would be better suited as a side library rather than added to the base.

argyleink commented 2 weeks ago

I think this should be entirely optional if added.

def would be.

Personally I don’t like supporting these largely proprietary service in general, but I think this starts to open flood gates about who/what gets added to this list & what services aren’t cool/popular/political/whatever enough to make the arbitrary list ... I don’t know that maintaining this list would be a fun or worthwhile endeavor & would largely be a distraction that I think would be better suited as a side library rather than added to the base.

agree, it's a brand chase and a scope creep magnet. but also, would be convenient so authors don't have to chase. it's also a potential for lots of rot, which is related to the brand chase of trying to stay relevant.