Add social media brand colors pack

[argyleink]

: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]

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

[argyleink]

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]

Perfect! Thanks a lot. Working on it :)

[Brian-Pob]

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

Might be useful for this feature!