From 917d952c616f4a8468df9cdec1a9474f6b528eb8 Mon Sep 17 00:00:00 2001 From: aspizu <108279865+aspizu@users.noreply.github.com> Date: Wed, 9 Oct 2024 01:51:15 +0530 Subject: [PATCH] Add social media brand colors pack (Closes #471) (#520) * Create brand colors props. (Closes #471) * Update package-lock.json * Export .css file for brand props * Add showcase, code and demo for brand colors props to docsite. * Update brotli bundled size for brand colors props. * Change internal name for `brand` to `brand-colors`. * Change internal name for `brand` to `brand-colors` in `package.json`. * Inline previously client-side generated HTML for brand colors in docsite. * Uh... --- build/props.js | 6 ++++++ docsite/index.css | 1 + docsite/index.html | 33 ++++++++++++++++++++++++++++ docsite/index.js | 2 +- docsite/js/brand-colors.js | 9 ++++++++ package-lock.json | 4 ++-- package.json | 5 ++++- src/props.brand-colors.css | 28 ++++++++++++++++++++++++ src/props.brand-colors.js | 44 ++++++++++++++++++++++++++++++++++++++ 9 files changed, 128 insertions(+), 4 deletions(-) create mode 100644 docsite/js/brand-colors.js create mode 100644 src/props.brand-colors.css create mode 100644 src/props.brand-colors.js diff --git a/build/props.js b/build/props.js index 676f587f..193fab35 100644 --- a/build/props.js +++ b/build/props.js @@ -17,6 +17,7 @@ import SVG from '../src/props.svg.js' import Zindex from '../src/props.zindex.js' import MaskEdges from '../src/props.masks.edges.js' import MaskCornerCuts from '../src/props.masks.corner-cuts.js' +import BrandColors from '../src/props.brand-colors.js' import {buildPropsStylesheet} from './to-stylesheet.js' import {toTokens} from './to-tokens.js' @@ -148,6 +149,11 @@ buildPropsStylesheet({ {selector, prefix} ) +buildPropsStylesheet( + {filename: pfx + 'props.brand-colors.css', props: BrandColors}, + {selector, prefix} +) + // gen index.css const entry = fs.createWriteStream(`../src/${pfx}index.css`) entry.write(`@import 'props.media.css'; diff --git a/docsite/index.css b/docsite/index.css index e41747b4..49770819 100644 --- a/docsite/index.css +++ b/docsite/index.css @@ -5,6 +5,7 @@ @import "../src/props.gray-hsl.css"; @import "../src/props.masks.edges.css"; @import "../src/props.masks.corner-cuts.css"; +@import "../src/props.brand-colors.css"; @import "./syntax-highlight.css"; @import "./color-copy.css"; diff --git a/docsite/index.html b/docsite/index.html index cc0578fe..20445e01 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -526,6 +526,11 @@

File Sizes

zindex.css
+ +
0.30kB
+
+ brand-colors.css demo +
@@ -1679,6 +1684,34 @@

Jungle

+
+

Brand Colors

+
+

Various brand colors.

+
+ + + + Not part of the main bundle. Must be individually imported. +
+
+
+
+
+
NPM Imported Usage Sample
+ 
@import "open-props/brand-colors";
+
+.facebook-logo {
+  fill: var(--brand-facebook);
+}
+
+
+
+ + +
+
Color Theming 101 diff --git a/docsite/index.js b/docsite/index.js index 45845e71..86c94a5e 100644 --- a/docsite/index.js +++ b/docsite/index.js @@ -7,4 +7,4 @@ import '/js/slider.js' import '/js/scrollspy.js' import '/js/select.js' -import '/js/color-copy.js' \ No newline at end of file +import '/js/color-copy.js' diff --git a/docsite/js/brand-colors.js b/docsite/js/brand-colors.js new file mode 100644 index 00000000..9ac8c7a1 --- /dev/null +++ b/docsite/js/brand-colors.js @@ -0,0 +1,9 @@ +console.log( + Object.keys(import('../../src/props.brand-colors.js')) + .map((brand) => [brand.replace(/-/g, ' ').replace('brand ', ''), brand]) + .map( + ([brandTitlecase, brand]) => + `` + ) + .join('') +) diff --git a/package-lock.json b/package-lock.json index e37b76de..8e376c0e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "open-props", - "version": "1.7.2", + "version": "1.7.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "open-props", - "version": "1.7.2", + "version": "1.7.6", "license": "MIT", "devDependencies": { "ava": "^3.15.0", diff --git a/package.json b/package.json index a3c072b5..c40f08e6 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "./src/zindex": "./src/props.zindex.js", "./src/masks.edges": "./src/props.masks.edges.js", "./src/masks.corner-cuts": "./src/props.masks.corner-cuts.js", + "./src/brand-colors": "./src/props.brand-colors.js", "./style": "./open-props.min.css", "./postcss/style": "./src/index.css", "./normalize": "./normalize.min.css", @@ -116,6 +117,7 @@ "./yellow": "./yellow.min.css", "./yellow-hsl": "./yellow-hsl.min.css", "./zindex": "./zindex.min.css", + "./brand-colors": "./brand-colors.min.css", "./shadow/style": "./open-props.shadow.min.css", "./shadow/normalize": "./normalize.shadow.min.css", "./shadow/animations": "./animations.shadow.min.css", @@ -310,7 +312,8 @@ "shadow:colors:camo": "postcss src/shadow.props.camo.css -o camo.shadow.min.css", "shadow:colors:camo-hsl": "postcss src/shadow.props.camo-hsl.css -o camo-hsl.shadow.min.css", "shadow:colors:jungle": "postcss src/shadow.props.jungle.css -o jungle.shadow.min.css", - "shadow:colors:jungle-hsl": "postcss src/shadow.props.jungle-hsl.css -o jungle-hsl.shadow.min.css" + "shadow:colors:jungle-hsl": "postcss src/shadow.props.jungle-hsl.css -o jungle-hsl.shadow.min.css", + "lib:brand-colors": "postcss src/props.brand-colors.css -o brand-colors.min.css" }, "devDependencies": { "ava": "^3.15.0", diff --git a/src/props.brand-colors.css b/src/props.brand-colors.css new file mode 100644 index 00000000..aef6b3c4 --- /dev/null +++ b/src/props.brand-colors.css @@ -0,0 +1,28 @@ +:where(html) { + --brand-facebook: #0866FF; + --brand-youtube: #FF0000; + --brand-twitter: #469CF0; + --brand-whatsapp: #25D366; + --brand-instagram-yellow: #F8D648; + --brand-instagram-red: #E93365; + --brand-instagram-magenta: #D32DBF; + --brand-instagram-blue: #611EF5; + --brand-snapchat: #FFFC00; + --brand-google-blue: #4285F4; + --brand-google-red: #DB4437; + --brand-google-yellow: #F4B400; + --brand-google-green: #0F9D58; + --brand-tiktok-razzmatazz: #FE2C55; + --brand-tiktok-splash: #25F4EE; + --brand-microsoft-red: #F25022; + --brand-microsoft-green: #7FBA00; + --brand-microsoft-blue: #00A4EF; + --brand-microsoft-yellow: #FFB900; + --brand-pinterest: #E60023; + --brand-spotify: #1ED760; + --brand-discord: #5865F2; + --brand-telegram: #2AABEE; + --brand-reddit: #FF4500; + --brand-amazon: #232F3E; + --brand-twitch: #9146FF; +} diff --git a/src/props.brand-colors.js b/src/props.brand-colors.js new file mode 100644 index 00000000..367ca49d --- /dev/null +++ b/src/props.brand-colors.js @@ -0,0 +1,44 @@ +export default { + // source: https://about.meta.com/brand/resources/facebook/logo/ + '--brand-facebook': '#0866FF', + // source: https://www.youtube.com/intl/ALL_in/howyoutubeworks/resources/brand-resources/#logos-icons-and-colors + '--brand-youtube': '#FF0000', + // source: https://about.twitter.com/content/dam/about-twitter/en/brand-toolkit/downloads/twitter-external-brand-guidelines-01272021.pdf + '--brand-twitter': '#469CF0', + // source: https://about.meta.com/brand/resources/whatsapp/whatsapp-brand/ + '--brand-whatsapp': '#25D366', + // source: https://about.meta.com/brand/resources/instagram/instagram-brand/ + '--brand-instagram-yellow': '#F8D648', + '--brand-instagram-red': '#E93365', + '--brand-instagram-magenta': '#D32DBF', + '--brand-instagram-blue': '#611EF5', + // source: https://snap.com/en-US/brand-guidelines + '--brand-snapchat': '#FFFC00', + // source: https://usbrandcolors.com/google-colors/ + '--brand-google-blue': '#4285F4', + '--brand-google-red': '#DB4437', + '--brand-google-yellow': '#F4B400', + '--brand-google-green': '#0F9D58', + // source: https://tiktokbrandbook.com/d/HhXfjVK1Poj9/brand-guidelines#/basics/color/core-palette + '--brand-tiktok-razzmatazz': '#FE2C55', + '--brand-tiktok-splash': '#25F4EE', + // source: https://cdn-dynmedia-1.microsoft.com/is/content/microsoftcorp/microsoft/mscle/documents/presentations/CELA_ThirdPartyLogoGuidelines_June2021.pdf + '--brand-microsoft-red': '#F25022', + '--brand-microsoft-green': '#7FBA00', + '--brand-microsoft-blue': '#00A4EF', + '--brand-microsoft-yellow': '#FFB900', + // source: https://usbrandcolors.com/pinterest-colors/ + '--brand-pinterest': '#E60023', + // source: https://developer.spotify.com/documentation/design#using-our-colors + '--brand-spotify': '#1ED760', + // source: https://discord.com/branding + '--brand-discord': '#5865F2', + // source: https://telegram.org/tour/screenshots + '--brand-telegram': '#2AABEE', + // source: https://reddit.lingoapp.com/s/Color-R7y72J/?v=22 + '--brand-reddit': '#FF4500', + // source: none + '--brand-amazon': '#232F3E', + // source: https://brand.twitch.com/ + '--brand-twitch': '#9146FF', +}