From 213fb531e256cef0a776fb4341388e7c7b7b884f Mon Sep 17 00:00:00 2001 From: Gaetan <72258504+gaetan-hexadog@users.noreply.github.com> Date: Mon, 19 Jun 2023 10:32:37 +0200 Subject: [PATCH 1/2] first commit --- README.md | 44 +++ package.json | 27 ++ tailwind-social-colors.js | 740 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 811 insertions(+) create mode 100644 package.json create mode 100644 tailwind-social-colors.js diff --git a/README.md b/README.md index 73dcaac..349450f 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,46 @@ # tailwind-css-social-colors Social color palette for TailwindCSS + +Standard social color = Swatch 500 + +_Shades generated via https://www.tints.dev/_ + +## Installation +Install the NPM package: + +```sh +# Install using npm +npm install --save-dev @hexadog/tailwind-social-colors + +# Install using yarn +yarn add -D @hexadog/tailwind-social-colors + +# Install using pnpm +pnpm install -D @hexadog/tailwind-social-colors +``` + +## Usage +Edit your Tailwind config to extend your theme colors. + +```js +// tailwind.config.js +const socialColors = require('@hexadog/tailwind-social-colors'); + +module.exports = { + theme: { + extend: { + colors: { ...socialColors }, + } + } +} +``` + +Start using your social colors! +```html +
+ + + + +
+``` \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..49a125a --- /dev/null +++ b/package.json @@ -0,0 +1,27 @@ +{ + "name": "@hexadog/tailwind-social-colors", + "version": "0.1.0", + "license": "MIT", + "author": "Gaetan ", + "filename": "tailwind-social-colors.js", + "description": "Social color palette for TailwindCSS ", + "keywords": [ + "tailwind", + "tailwindcss", + "color", + "colors", + "palette", + "social" + ], + "files": [ + "tailwind-social-colors.js" + ], + "main": "tailwind-social-colors.js", + "repository": { + "type": "git", + "url": "https://github.com/hexadog/tailwind-social-colors.git" + }, + "bugs": { + "url": "https://github.com/hexadog/tailwind-social-colors/issues" + } +} \ No newline at end of file diff --git a/tailwind-social-colors.js b/tailwind-social-colors.js new file mode 100644 index 0000000..1b6a278 --- /dev/null +++ b/tailwind-social-colors.js @@ -0,0 +1,740 @@ +"use strict"; +// Standard social color = Swatch 500 +// Shades generated via https://www.tints.dev/ + +const socialColors = { + "angi": { + 50: "#FFF1F0", + 100: "#FFDEDB", + 200: "#FFC2BD", + 300: "#FFA299", + 400: "#FF8175", + 500: "#FF6153", + 600: "#FF230F", + 700: "#CC1100", + 800: "#8A0B00", + 900: "#420600" + }, + "amazon": { + 50: "#FFF5E5", + 100: "#FFEBCC", + 200: "#FFD699", + 300: "#FFC266", + 400: "#FFAD33", + 500: "#FF9900", + 600: "#CC7A00", + 700: "#995C00", + 800: "#663D00", + 900: "#331F00" + }, + "android": { + 50: "#F6F9EB", + 100: "#EDF4D7", + 200: "#DBE8B0", + 300: "#C9DD88", + 400: "#B7D161", + 500: "#A4C639", + 600: "#849E2E", + 700: "#637722", + 800: "#424F17", + 900: "#21280B" + }, + "alexa": { + 50: "#E0F9FF", + 100: "#C2F4FF", + 200: "#85E9FF", + 300: "#47DDFF", + 400: "#0AD2FF", + 500: "#00A7CE", + 600: "#0085A3", + 700: "#00647A", + 800: "#004352", + 900: "#002129" + }, + "apple": { + 50: "#F7F8F8", + 100: "#EEF0F1", + 200: "#DADFE1", + 300: "#C9D0D4", + 400: "#B8C1C6", + 500: "#A6B1B7", + 600: "#809098", + 700: "#5D6C74", + 800: "#3E474C", + 900: "#202527" + }, + "behance": { + 50: "#E5E6EB", + 100: "#CCCED6", + 200: "#969AAC", + 300: "#656B80", + 400: "#3D404D", + 500: "#131418", + 600: "#101114", + 700: "#0B0C0E", + 800: "#070709", + 900: "#050506" + }, + "blogger": { + 50: "#FFF3E5", + 100: "#FFE6CC", + 200: "#FFCB94", + 300: "#FFB361", + 400: "#FF9729", + 500: "#F57D00", + 600: "#C26400", + 700: "#944C00", + 800: "#613200", + 900: "#331A00" + }, + "clarity": { + 50: "#EFF8FB", + 100: "#DEF2F7", + 200: "#C1E6F0", + 300: "#A0D9E8", + 400: "#80CBE0", + 500: "#61BED9", + 600: "#30A8C9", + 700: "#257F98", + 800: "#195667", + 900: "#0C2931" + }, + "deviantart": { + 50: "#E1FEEB", + 100: "#C3FED7", + 200: "#88FCAE", + 300: "#51FB89", + 400: "#15F961", + 500: "#05CC47", + 600: "#04A439", + 700: "#037C2C", + 800: "#02501C", + 900: "#01280E" + }, + "dribbble": { + 50: "#FDEDF3", + 100: "#FBDAE7", + 200: "#F6B6CF", + 300: "#F291B7", + 400: "#EE72A1", + 500: "#EA4C89", + 600: "#E01A66", + 700: "#A4134B", + 800: "#6E0D32", + 900: "#370619" + }, + "delicious": { + 50: "#EEF7FC", + 100: "#E1F0F9", + 200: "#C3E2F4", + 300: "#A5D3EE", + 400: "#86C5E9", + 500: "#67B6E3", + 600: "#309BD9", + 700: "#1F76A8", + 800: "#154E70", + 900: "#0A2738" + }, + "digg": { + 50: "#EDF1F7", + 100: "#D8E1EE", + 200: "#B1C3DD", + 300: "#8EA7CD", + 400: "#6789BC", + 500: "#486CA3", + 600: "#3A5783", + 700: "#2C4263", + 800: "#1C2A40", + 900: "#0E1520" + }, + "discord": { + 50: "#ECEEFE", + 100: "#DEE0FC", + 200: "#BDC2FA", + 300: "#9CA3F7", + 400: "#7A85F5", + 500: "#5865F2", + 600: "#1C2DED", + 700: "#0E1DB9", + 800: "#0A137B", + 900: "#050A3E" + }, + "disqus": { + 50: "#EBF6FF", + 100: "#D6EDFF", + 200: "#ADDCFF", + 300: "#85CAFF", + 400: "#5CB8FF", + 500: "#35A8FF", + 600: "#008BF5", + 700: "#0068B8", + 800: "#00457A", + 900: "#00233D" + }, + "dropbox": { + 50: "#E0F1FF", + 100: "#C7E6FF", + 200: "#8FCDFF", + 300: "#57B3FF", + 400: "#1F9AFF", + 500: "#007EE5", + 600: "#0065B8", + 700: "#004C8A", + 800: "#00325C", + 900: "#00192E" + }, + "facebook": { + 50: "#E7F1FE", + 100: "#CFE2FC", + 200: "#A3C9FA", + 300: "#73ACF7", + 400: "#4893F5", + 500: "#1877F2", + 600: "#0B5ECB", + 700: "#084696", + 800: "#062F65", + 900: "#031630" + }, + "flickr": { + 50: "#FFE5F3", + 100: "#FFCCE6", + 200: "#FF99CE", + 300: "#FF66B5", + 400: "#FF339C", + 500: "#FF0084", + 600: "#CC0069", + 700: "#99004F", + 800: "#660035", + 900: "#33001A" + }, + "foursquare": { + 50: "#FEEBF0", + 100: "#FEDCE5", + 200: "#FDB5C8", + 300: "#FB92AE", + 400: "#FA6B91", + 500: "#F94877", + 600: "#F70848", + 700: "#BC0637", + 800: "#7B0424", + 900: "#400213" + }, + "github": { + 50: "#E9E7E7", + 100: "#D3CFCF", + 200: "#A59C9C", + 300: "#786E6E", + 400: "#484242", + 500: "#171515", + 600: "#131111", + 700: "#0D0C0C", + 800: "#080707", + 900: "#050505" + }, + "google": { + 50: "#FBEBE9", + 100: "#F8DCD8", + 200: "#F2B8B1", + 300: "#EB9589", + 400: "#E47162", + 500: "#DD4B39", + 600: "#C03321", + 700: "#902719", + 800: "#601A10", + 900: "#300D08" + }, + "hackernews": { + 50: "#FFF0E5", + 100: "#FFE0CC", + 200: "#FFC299", + 300: "#FFA366", + 400: "#FF8533", + 500: "#FF6600", + 600: "#CC5200", + 700: "#993D00", + 800: "#662900", + 900: "#331400" + }, + "houzz": { + 50: "#ECFCE3", + 100: "#D8F9C8", + 200: "#B2F391", + 300: "#8EED5E", + 400: "#67E727", + 500: "#4DBC15", + 600: "#3E9711", + 700: "#2F730D", + 800: "#1E4908", + 900: "#0F2504" + }, + "hyves": { + 50: "#FEF6EB", + 100: "#FEEDD7", + 200: "#FDDBB0", + 300: "#FBC988", + 400: "#FAB861", + 500: "#F9A539", + 600: "#EE8A07", + 700: "#B26705", + 800: "#774504", + 900: "#3B2202" + }, + "instagram": { + 50: "#FAEAF7", + 100: "#F5D1ED", + 200: "#ECA7DD", + 300: "#E279CB", + 400: "#D84BB9", + 500: "#C32AA3", + 600: "#9B2181", + 700: "#761962", + 800: "#501142", + 900: "#26081F" + }, + "line": { + 50: "#E0FFE0", + 100: "#C2FFC2", + 200: "#80FF80", + 300: "#42FF42", + 400: "#05FF05", + 500: "#00C300", + 600: "#009E00", + 700: "#007500", + 800: "#004D00", + 900: "#002900" + }, + "linkedin": { + 50: "#E2F0FE", + 100: "#C5E0FC", + 200: "#8BC2F9", + 300: "#50A3F6", + 400: "#1685F3", + 500: "#0A66C2", + 600: "#08529B", + 700: "#063D74", + 800: "#04294E", + 900: "#021427" + }, + "mastodon": { + 50: "#F0F0FF", + 100: "#E0E0FF", + 200: "#C2C2FF", + 300: "#A3A3FF", + 400: "#8585FF", + 500: "#6364FF", + 600: "#1F1FFF", + 700: "#0000D6", + 800: "#00008F", + 900: "#000047" + }, + "medium": { + 50: "#E1FFF4", + 100: "#BDFEE6", + 200: "#81FED0", + 300: "#3FFDB7", + 400: "#03F79E", + 500: "#02B875", + 600: "#02925D", + 700: "#016F47", + 800: "#014C30", + 900: "#002317" + }, + "messegner": { + 50: "#E5F3FF", + 100: "#CCE6FF", + 200: "#99CEFF", + 300: "#66B5FF", + 400: "#339CFF", + 500: "#0084FF", + 600: "#0069CC", + 700: "#004F99", + 800: "#003566", + 900: "#001A33" + }, + "paypal": { + 50: "#E0EEFA", + 100: "#C1DCF5", + 200: "#7FB7EB", + 300: "#4194E2", + 400: "#1D6EB9", + 500: "#13487B", + 600: "#0F3961", + 700: "#0C2C4B", + 800: "#081D31", + 900: "#04101A" + }, + "periscope": { + 50: "#ECF6F9", + 100: "#D8ECF3", + 200: "#B1D9E7", + 300: "#8EC9DC", + 400: "#67B6D0", + 500: "#40A4C4", + 600: "#3184A0", + 700: "#256479", + 800: "#18404E", + 900: "#0C2027" + }, + "pinterest": { + 50: "#FEE2E5", + 100: "#FDC4CB", + 200: "#FA8592", + 300: "#F74A5E", + 400: "#F50F2A", + 500: "#BD081C", + 600: "#980617", + 700: "#710511", + 800: "#49030B", + 900: "#270206" + }, + "pocket": { + 50: "#FDECEF", + 100: "#FCDADE", + 200: "#F8B4BD", + 300: "#F58F9C", + 400: "#F16477", + 500: "#EE4056", + 600: "#DC142E", + 700: "#A90F23", + 800: "#700A18", + 900: "#38050C" + }, + "producthunt": { + 50: "#FBEDE9", + 100: "#F7DBD4", + 200: "#F0BBAD", + 300: "#E99881", + 400: "#E2785A", + 500: "#DA552F", + 600: "#B64120", + 700: "#863018", + 800: "#5B2010", + 900: "#2B0F08" + }, + "quora": { + 50: "#FFE2DB", + 100: "#FFCABD", + 200: "#FF9175", + 300: "#FF5C33", + 400: "#F03000", + 500: "#AA2200", + 600: "#8A1C00", + 700: "#661400", + 800: "#420D00", + 900: "#240700" + }, + "reddit": { + 50: "#FFECE5", + 100: "#FFDACC", + 200: "#FFB499", + 300: "#FF8F66", + 400: "#FF6933", + 500: "#FF4500", + 600: "#CC3600", + 700: "#992900", + 800: "#661B00", + 900: "#330E00" + }, + "salesforce": { + 50: "#E9F5FC", + 100: "#D2EBF9", + 200: "#A6D7F2", + 300: "#79C4EC", + 400: "#4DB0E5", + 500: "#219CDF", + 600: "#1A7DB2", + 700: "#135E86", + 800: "#0D3E59", + 900: "#061F2D" + }, + "skype": { + 50: "#E5F8FF", + 100: "#C7F0FF", + 200: "#94E2FF", + 300: "#5CD3FF", + 400: "#29C6FF", + 500: "#00AFF0", + 600: "#008EC2", + 700: "#00698F", + 800: "#004761", + 900: "#00222E" + }, + "slack": { + 50: "#F6DFF6", + 100: "#ECBFED", + 200: "#DA7FDB", + 300: "#C63CC8", + 400: "#8A278B", + 500: "#4A154B", + 600: "#3B113C", + 700: "#2B0C2C", + 800: "#200920", + 900: "#100410" + }, + "slideshare": { + 50: "#E0F4FF", + 100: "#BDE8FF", + 200: "#7AD1FF", + 300: "#38B9FF", + 400: "#009FF5", + 500: "#0077B5", + 600: "#005D8F", + 700: "#00466B", + 800: "#002E47", + 900: "#001724" + }, + "snapchat": { + 50: "#FFFFE5", + 100: "#FFFECC", + 200: "#FFFD99", + 300: "#FFFC66", + 400: "#FFFC33", + 500: "#FFFC00", + 600: "#CCC900", + 700: "#999600", + 800: "#666400", + 900: "#333200" + }, + "soundcloud": { + 50: "#FFEEE5", + 100: "#FFDDCC", + 200: "#FFBB99", + 300: "#FF9966", + 400: "#FF7733", + 500: "#FF5500", + 600: "#CC4400", + 700: "#993300", + 800: "#662200", + 900: "#331100" + }, + "spotify": { + 50: "#E9FCEF", + 100: "#D2F9E0", + 200: "#A1F2BD", + 300: "#74EC9E", + 400: "#43E57C", + 500: "#1ED760", + 600: "#18AA4B", + 700: "#128239", + 800: "#0C5525", + 900: "#062D14" + }, + "steam": { + 50: "#E4E6EC", + 100: "#C9CED9", + 200: "#939DB4", + 300: "#626F8D", + 400: "#3D4557", + 500: "#171A21", + 600: "#13151B", + 700: "#0F1115", + 800: "#08090C", + 900: "#040506" + }, + "stumbleupon": { + 50: "#FDEBE8", + 100: "#FBDCD5", + 200: "#F6B4A7", + 300: "#F2917D", + 400: "#ED694F", + 500: "#E94826", + 600: "#C23114", + 700: "#94250F", + 800: "#61180A", + 900: "#330D05" + }, + "swarn": { + 50: "#FFF6EB", + 100: "#FFEDD6", + 200: "#FFDCAD", + 300: "#FFCA85", + 400: "#FFB85C", + 500: "#FFA633", + 600: "#F58B00", + 700: "#B86800", + 800: "#7A4500", + 900: "#3D2300" + }, + "telegram": { + 50: "#E0F5FF", + 100: "#C2EBFF", + 200: "#85D6FF", + 300: "#47C2FF", + 400: "#0AADFF", + 500: "#0088CC", + 600: "#006DA3", + 700: "#00527A", + 800: "#003652", + 900: "#001B29" + }, + "tiktok": { + 50: "#E6E6E6", + 100: "#CCCCCC", + 200: "#999999", + 300: "#666666", + 400: "#333333", + 500: "#010101", + 600: "#000000", + 700: "#000000", + 800: "#000000", + 900: "#000000" + }, + "tumblr": { + 50: "#E8ECF2", + 100: "#D2DAE5", + 200: "#A1B2C9", + 300: "#738DAF", + 400: "#506A8C", + 500: "#35465D", + 600: "#2B394B", + 700: "#1F2A37", + 800: "#141B24", + 900: "#0B0F13" + }, + "twitch": { + 50: "#F3EBFF", + 100: "#EADBFF", + 200: "#D1B3FF", + 300: "#BC8FFF", + 400: "#A66BFF", + 500: "#9146FF", + 600: "#6905FF", + 700: "#4E00C2", + 800: "#330080", + 900: "#1B0042" + }, + "twitter": { + 50: "#E7F5FE", + 100: "#D4EDFC", + 200: "#A3D9FA", + 300: "#78C6F7", + 400: "#48B2F4", + 500: "#1DA1F2", + 600: "#0C81CB", + 700: "#09639A", + 800: "#064165", + 900: "#032235" + }, + "vimeo": { + 50: "#E8F8FD", + 100: "#D0F0FB", + 200: "#A2E1F6", + 300: "#78D4F3", + 400: "#49C5EE", + 500: "#1AB7EA", + 600: "#1294C0", + 700: "#0D7091", + 800: "#09485D", + 900: "#04242F" + }, + "vine": { + 50: "#E0FFF8", + 100: "#BDFFF0", + 200: "#7AFFE0", + 300: "#38FFD1", + 400: "#00F5BC", + 500: "#00B489", + 600: "#008F6D", + 700: "#006B52", + 800: "#004737", + 900: "#00241B" + }, + "vk": { + 50: "#EEF2F7", + 100: "#D9E2ED", + 200: "#B6C8DD", + 300: "#90ABCB", + 400: "#6D91BB", + 500: "#4C75A3", + 600: "#3E5F84", + 700: "#2D4661", + 800: "#1F2F42", + 900: "#0F161F" + }, + "whatsapp": { + 50: "#E9FBF0", + 100: "#D4F7E1", + 200: "#A4EFBF", + 300: "#78E7A1", + 400: "#4DE083", + 500: "#25D366", + 600: "#1EA951", + 700: "#167E3C", + 800: "#0E5227", + 900: "#082B15" + }, + "wechat": { + 50: "#E2FEEA", + 100: "#C5FCD5", + 200: "#85F9A8", + 300: "#4BF67E", + 400: "#0CF351", + 500: "#09B83E", + 600: "#079231", + 700: "#057025", + 800: "#044918", + 900: "#02270D" + }, + "weibo": { + 50: "#FCE9EA", + 100: "#F9D2D4", + 200: "#F2A6AA", + 300: "#EC797F", + 400: "#E54D54", + 500: "#DF2029", + 600: "#B21A21", + 700: "#861319", + 800: "#590D11", + 900: "#2D0608" + }, + "wordpress": { + 50: "#E6F3FA", + 100: "#C8E6F3", + 200: "#96CEE9", + 300: "#5FB5DD", + 400: "#2D9ED2", + 500: "#21759B", + 600: "#1B5F7E", + 700: "#14455D", + 800: "#0D2F3F", + 900: "#06161D" + }, + "yahoo": { + 50: "#EEE1FF", + 100: "#DDC2FF", + 200: "#BF8AFE", + 300: "#9D4DFE", + 400: "#7B10FE", + 500: "#6001D2", + 600: "#4C01A8", + 700: "#39017F", + 800: "#270056", + 900: "#120029" + }, + "yelp": { + 50: "#FBE9E9", + 100: "#F8D3D3", + 200: "#F0A3A3", + 300: "#E87777", + 400: "#E14C4C", + 500: "#D32323", + 600: "#AB1C1C", + 700: "#7F1515", + 800: "#530E0E", + 900: "#2C0707" + }, + "youtube": { + 50: "#FFE5E5", + 100: "#FFCCCC", + 200: "#FF9999", + 300: "#FF6666", + 400: "#FF3333", + 500: "#FF0000", + 600: "#CC0000", + 700: "#990000", + 800: "#660000", + 900: "#330000" + } +} + +module.exports = socialColors \ No newline at end of file From 358705764dc1b23408afc38dd0b509c7896774d3 Mon Sep 17 00:00:00 2001 From: Gaetan <72258504+gaetan-hexadog@users.noreply.github.com> Date: Mon, 19 Jun 2023 10:36:39 +0200 Subject: [PATCH 2/2] fix: add scripts to package.json --- package.json | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 49a125a..c3ae90a 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,11 @@ "name": "@hexadog/tailwind-social-colors", "version": "0.1.0", "license": "MIT", - "author": "Gaetan ", + "author": { + "name": "Gaetan B.", + "email": "gaetan@hexadog.com", + "url": "https://www.hexadog.com/" + }, "filename": "tailwind-social-colors.js", "description": "Social color palette for TailwindCSS ", "keywords": [ @@ -23,5 +27,12 @@ }, "bugs": { "url": "https://github.com/hexadog/tailwind-social-colors/issues" + }, + "homepage": "https://github.com/hexadog/tailwind-social-colors#readme", + "scripts": { + "upload": "npm publish --access public", + "patch": "npm version patch", + "minor": "npm version minor", + "major": "npm version major" } } \ No newline at end of file