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...

Author: aspizu

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';

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";

docsite/index.html

@@ -526,6 +526,11 @@ <h4>File Sizes</h4>
               <div class="file">
                 <a href="https://github.com/argyleink/open-props/blob/main/src/props.zindex.css">zindex.css</a>
               </div>
+
+              <div class="size"><strong>0.30</strong>kB</div>
+              <div class="file">
+                <a href="https://github.com/argyleink/open-props/blob/main/src/props.brand-colors.css">brand-colors.css</a> <a href="https://codepen.io/aspizu/pen/LYwNeyz"><small class="green-badge">demo</small></a>
+              </div>
             </dd>
           </div>
 
@@ -1679,6 +1684,34 @@ <h4>Jungle</h4>
         </ul>
       </article>
 
+      <header>
+        <h2>Brand Colors</h2>
+        <div class="block-wrap">
+          <p>Various brand colors.</p>
+          <blockquote class="icon-quote jagged">
+            <svg viewBox="0 0 24 24" stroke="currentColor" fill="none">
+              <path
+                d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+            </svg>
+            <span>Not part of the main bundle. Must be individually imported.</span>
+          </blockquote>
+        </div>
+      </header>
+      <div class="block-wrap">
+        <div>
+          <h5>NPM Imported Usage Sample</h5>
+          <pre class="language-css"><code>@import "open-props/brand-colors";
+
+.facebook-logo {
+  fill: var(--brand-facebook);
+}</code></pre>
+        </div>
+      </div>
+      <article class="just-stretch">
+        <!-- bun run docsite/js/brand-colors.js -->
+        <ul class="open-colors count-em color-swatch-list"><h4>  facebook</h4><li><button class="color-swatch" style="background-color: var(--brand-facebook)" aria-label="  facebook"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  youtube</h4><li><button class="color-swatch" style="background-color: var(--brand-youtube)" aria-label="  youtube"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  twitter</h4><li><button class="color-swatch" style="background-color: var(--brand-twitter)" aria-label="  twitter"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  whatsapp</h4><li><button class="color-swatch" style="background-color: var(--brand-whatsapp)" aria-label="  whatsapp"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  instagram yellow</h4><li><button class="color-swatch" style="background-color: var(--brand-instagram-yellow)" aria-label="  instagram yellow"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  instagram red</h4><li><button class="color-swatch" style="background-color: var(--brand-instagram-red)" aria-label="  instagram red"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  instagram magenta</h4><li><button class="color-swatch" style="background-color: var(--brand-instagram-magenta)" aria-label="  instagram magenta"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  instagram blue</h4><li><button class="color-swatch" style="background-color: var(--brand-instagram-blue)" aria-label="  instagram blue"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  snapchat</h4><li><button class="color-swatch" style="background-color: var(--brand-snapchat)" aria-label="  snapchat"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  google blue</h4><li><button class="color-swatch" style="background-color: var(--brand-google-blue)" aria-label="  google blue"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  google red</h4><li><button class="color-swatch" style="background-color: var(--brand-google-red)" aria-label="  google red"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  google yellow</h4><li><button class="color-swatch" style="background-color: var(--brand-google-yellow)" aria-label="  google yellow"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  google green</h4><li><button class="color-swatch" style="background-color: var(--brand-google-green)" aria-label="  google green"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  tiktok razzmatazz</h4><li><button class="color-swatch" style="background-color: var(--brand-tiktok-razzmatazz)" aria-label="  tiktok razzmatazz"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  tiktok splash</h4><li><button class="color-swatch" style="background-color: var(--brand-tiktok-splash)" aria-label="  tiktok splash"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  microsoft red</h4><li><button class="color-swatch" style="background-color: var(--brand-microsoft-red)" aria-label="  microsoft red"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  microsoft green</h4><li><button class="color-swatch" style="background-color: var(--brand-microsoft-green)" aria-label="  microsoft green"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  microsoft blue</h4><li><button class="color-swatch" style="background-color: var(--brand-microsoft-blue)" aria-label="  microsoft blue"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  microsoft yellow</h4><li><button class="color-swatch" style="background-color: var(--brand-microsoft-yellow)" aria-label="  microsoft yellow"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  pinterest</h4><li><button class="color-swatch" style="background-color: var(--brand-pinterest)" aria-label="  pinterest"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  spotify</h4><li><button class="color-swatch" style="background-color: var(--brand-spotify)" aria-label="  spotify"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  discord</h4><li><button class="color-swatch" style="background-color: var(--brand-discord)" aria-label="  discord"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  telegram</h4><li><button class="color-swatch" style="background-color: var(--brand-telegram)" aria-label="  telegram"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  reddit</h4><li><button class="color-swatch" style="background-color: var(--brand-reddit)" aria-label="  reddit"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  amazon</h4><li><button class="color-swatch" style="background-color: var(--brand-amazon)" aria-label="  amazon"></button></li></ul><ul class="open-colors count-em color-swatch-list"><h4>  twitch</h4><li><button class="color-swatch" style="background-color: var(--brand-twitch)" aria-label="  twitch"></button></li></ul>
+      </article>
+
       <details>
         <summary>Color Theming 101</summary>
 

docsite/index.js

@@ -7,4 +7,4 @@ import '/js/slider.js'
 import '/js/scrollspy.js'
 import '/js/select.js'
 
-import '/js/color-copy.js'
+import '/js/color-copy.js'

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]) =>
+        `<ul class="open-colors count-em color-swatch-list"><h4>${brandTitlecase}</h4><li><button class="color-swatch" style="background-color: var(${brand})" aria-label="${brandTitlecase}"></button></li></ul>`
+    )
+    .join('')
+)

package-lock.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",

package.json

@@ -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;
+}

src/props.brand-colors.css

@@ -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',
+}