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

Add social media brand colors pack #471

Open
argyleink opened this issue Feb 22, 2024 · 6 comments
Open

Add social media brand colors pack #471

argyleink opened this issue Feb 22, 2024 · 6 comments
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@argyleink
Copy link
Owner

argyleink commented Feb 22, 2024

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

@argyleink argyleink added enhancement New feature or request good first issue Good for newcomers labels Feb 22, 2024
@DhruvrajsinhRathod
Copy link

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

@argyleink
Copy link
Owner Author

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
Copy link

Perfect! Thanks a lot. Working on it :)

@Brian-Pob
Copy link
Contributor

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

Might be useful for this feature!

@toastal
Copy link

toastal commented Jun 7, 2024

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
Copy link
Owner Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

4 participants