From a9a64ff70c1d8afe0a35f830e0532fe05132131c Mon Sep 17 00:00:00 2001 From: aspizu Date: Fri, 4 Oct 2024 01:28:58 +0530 Subject: [PATCH 1/9] Create brand colors props. (Closes #471) --- build/props.js | 6 ++++++ package.json | 4 +++- src/props.brand.css | 28 ++++++++++++++++++++++++++++ src/props.brand.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 src/props.brand.css create mode 100644 src/props.brand.js diff --git a/build/props.js b/build/props.js index 676f587f..dd5da21b 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 Brand from '../src/props.brand.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.css', props: Brand}, + {selector, prefix} +) + // gen index.css const entry = fs.createWriteStream(`../src/${pfx}index.css`) entry.write(`@import 'props.media.css'; diff --git a/package.json b/package.json index a3c072b5..71886420 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": "./src/props.brand.js", "./style": "./open-props.min.css", "./postcss/style": "./src/index.css", "./normalize": "./normalize.min.css", @@ -310,7 +311,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": "postcss src/props.brand.css -o brand.min.css" }, "devDependencies": { "ava": "^3.15.0", diff --git a/src/props.brand.css b/src/props.brand.css new file mode 100644 index 00000000..aef6b3c4 --- /dev/null +++ b/src/props.brand.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.js b/src/props.brand.js new file mode 100644 index 00000000..367ca49d --- /dev/null +++ b/src/props.brand.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', +} From cd5a318caaf66f28329bfe1ab5795d0254895170 Mon Sep 17 00:00:00 2001 From: aspizu Date: Fri, 4 Oct 2024 01:29:48 +0530 Subject: [PATCH 2/9] Update package-lock.json --- package-lock.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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", From 9bfef9602ffdb15a111edaf9a0037ef04f5e9307 Mon Sep 17 00:00:00 2001 From: aspizu Date: Fri, 4 Oct 2024 01:58:00 +0530 Subject: [PATCH 3/9] Export .css file for brand props --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 71886420..8b09564e 100644 --- a/package.json +++ b/package.json @@ -117,6 +117,7 @@ "./yellow": "./yellow.min.css", "./yellow-hsl": "./yellow-hsl.min.css", "./zindex": "./zindex.min.css", + "./brand": "./brand.min.css", "./shadow/style": "./open-props.shadow.min.css", "./shadow/normalize": "./normalize.shadow.min.css", "./shadow/animations": "./animations.shadow.min.css", From 5b1673ba4513ce2424008ba32c419de647f5614b Mon Sep 17 00:00:00 2001 From: aspizu Date: Fri, 4 Oct 2024 02:34:15 +0530 Subject: [PATCH 4/9] Add showcase, code and demo for brand colors props to docsite. --- docsite/index.css | 1 + docsite/index.html | 30 ++++++++++++++++++++++++++++++ docsite/js/brand-color.js | 8 ++++++++ 3 files changed, 39 insertions(+) create mode 100644 docsite/js/brand-color.js diff --git a/docsite/index.css b/docsite/index.css index e41747b4..2df55223 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.css"; @import "./syntax-highlight.css"; @import "./color-copy.css"; diff --git a/docsite/index.html b/docsite/index.html index cc0578fe..7f97f8f0 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -526,6 +526,11 @@

File Sizes

zindex.css
+ +
???kB
+
+ brand.css demo +
@@ -1679,6 +1684,31 @@

Jungle

+
+

Brand Colors

+
+

Various brand colors.

+
+ + + + Not part of the main bundle. Must be individually imported. +
+
+
+
+
+
NPM Imported Usage Sample
+ 
@import "open-props/brand";
+
+.facebook-logo {
+  fill: var(--brand-facebook);
+}
+
+
+
+
Color Theming 101 diff --git a/docsite/js/brand-color.js b/docsite/js/brand-color.js new file mode 100644 index 00000000..79dbd096 --- /dev/null +++ b/docsite/js/brand-color.js @@ -0,0 +1,8 @@ +import brandProps from '../../src/props.brand.js' + +const brandColors = document.querySelector('#brand-colors') + +for (const [brand, color] of Object.entries(brandProps)) { + const brandTitlecase = brand.replace(/-/g, ' ').replace('brand ', '') + brandColors.innerHTML += `

    ${brandTitlecase}

` +} From 4d91c5d0301fb5c380b7324234105a59e93ac86d Mon Sep 17 00:00:00 2001 From: aspizu Date: Fri, 4 Oct 2024 02:39:39 +0530 Subject: [PATCH 5/9] Update brotli bundled size for brand colors props. --- docsite/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docsite/index.html b/docsite/index.html index 7f97f8f0..412fd1fc 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -527,7 +527,7 @@

File Sizes

zindex.css -
???kB
+
0.30kB
brand.css demo
From 461c6cd1caba7ffe66e07b81ad522d113a89ad75 Mon Sep 17 00:00:00 2001 From: aspizu Date: Fri, 4 Oct 2024 02:43:52 +0530 Subject: [PATCH 6/9] Change internal name for `brand` to `brand-colors`. --- build/props.js | 4 ++-- docsite/index.html | 4 ++-- docsite/index.js | 3 ++- docsite/js/{brand-color.js => brand-colors.js} | 2 +- package.json | 4 ++-- src/{props.brand.css => props.brand-colors.css} | 0 src/{props.brand.js => props.brand-colors.js} | 0 7 files changed, 9 insertions(+), 8 deletions(-) rename docsite/js/{brand-color.js => brand-colors.js} (88%) rename src/{props.brand.css => props.brand-colors.css} (100%) rename src/{props.brand.js => props.brand-colors.js} (100%) diff --git a/build/props.js b/build/props.js index dd5da21b..193fab35 100644 --- a/build/props.js +++ b/build/props.js @@ -17,7 +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 Brand from '../src/props.brand.js' +import BrandColors from '../src/props.brand-colors.js' import {buildPropsStylesheet} from './to-stylesheet.js' import {toTokens} from './to-tokens.js' @@ -150,7 +150,7 @@ buildPropsStylesheet({ ) buildPropsStylesheet( - {filename: pfx + 'props.brand.css', props: Brand}, + {filename: pfx + 'props.brand-colors.css', props: BrandColors}, {selector, prefix} ) diff --git a/docsite/index.html b/docsite/index.html index 412fd1fc..ccd2e83f 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -529,7 +529,7 @@

File Sizes

0.30kB
- brand.css demo + brand-colors.css demo
@@ -1700,7 +1700,7 @@

Brand Colors

NPM Imported Usage Sample
- 
@import "open-props/brand";
+          
@import "open-props/brand-colors";
 
 .facebook-logo {
   fill: var(--brand-facebook);
diff --git a/docsite/index.js b/docsite/index.js
index 45845e71..da5629f0 100644
--- a/docsite/index.js
+++ b/docsite/index.js
@@ -7,4 +7,5 @@ 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'
+import '/js/brand-colors.js'
diff --git a/docsite/js/brand-color.js b/docsite/js/brand-colors.js
similarity index 88%
rename from docsite/js/brand-color.js
rename to docsite/js/brand-colors.js
index 79dbd096..4119e4ff 100644
--- a/docsite/js/brand-color.js
+++ b/docsite/js/brand-colors.js
@@ -1,4 +1,4 @@
-import brandProps from '../../src/props.brand.js'
+import brandProps from '../../src/props.brand-colors.js'
 
 const brandColors = document.querySelector('#brand-colors')
 
diff --git a/package.json b/package.json
index 8b09564e..193ba688 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +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": "./src/props.brand.js",
+    "./src/brand-colors": "./src/props.brand-colors.js",
     "./style": "./open-props.min.css",
     "./postcss/style": "./src/index.css",
     "./normalize": "./normalize.min.css",
@@ -174,7 +174,7 @@
     "./tokens": "./open-props.tokens.json",
     "./design-tokens": "./open-props.tokens.json",
     "./style-dictionary-tokens": "./open-props.style-dictionary-tokens.json",
-    "./postcss/brand": "./src/extra/brand.css",
+    "./postcss/brand-colors": "./src/extra/brand-colors.css",
     "./postcss/theme": "./src/extra/theme.css",
     "./postcss/theme-dark": "./src/extra/theme-dark.css",
     "./postcss/theme-light": "./src/extra/theme-light.css",
diff --git a/src/props.brand.css b/src/props.brand-colors.css
similarity index 100%
rename from src/props.brand.css
rename to src/props.brand-colors.css
diff --git a/src/props.brand.js b/src/props.brand-colors.js
similarity index 100%
rename from src/props.brand.js
rename to src/props.brand-colors.js

From fcc4ae4575c1a9a846a8b56a7ef2fabd9b1a4c99 Mon Sep 17 00:00:00 2001
From: aspizu 
Date: Fri, 4 Oct 2024 02:46:08 +0530
Subject: [PATCH 7/9] Change internal name for `brand` to `brand-colors` in
 `package.json`.

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 193ba688..b64d97e1 100644
--- a/package.json
+++ b/package.json
@@ -117,7 +117,7 @@
     "./yellow": "./yellow.min.css",
     "./yellow-hsl": "./yellow-hsl.min.css",
     "./zindex": "./zindex.min.css",
-    "./brand": "./brand.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",
@@ -313,7 +313,7 @@
     "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",
-    "lib:brand": "postcss src/props.brand.css -o brand.min.css"
+    "lib:brand-colors": "postcss src/props.brand-colors.css -o brand-colors.min.css"
   },
   "devDependencies": {
     "ava": "^3.15.0",

From 542af206162875151cb4d6abbcd1b7b8ee5a48d6 Mon Sep 17 00:00:00 2001
From: aspizu 
Date: Fri, 4 Oct 2024 04:41:58 +0530
Subject: [PATCH 8/9] Inline previously client-side generated HTML for brand
 colors in docsite.

---
 docsite/index.css          |  2 +-
 docsite/index.html         |  5 ++++-
 docsite/index.js           |  1 -
 docsite/js/brand-colors.js | 17 +++++++++--------
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/docsite/index.css b/docsite/index.css
index 2df55223..49770819 100644
--- a/docsite/index.css
+++ b/docsite/index.css
@@ -5,7 +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.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 ccd2e83f..20445e01 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -1707,7 +1707,10 @@ 
NPM Imported Usage Sample

 }
-
+
+ +

    facebook

    youtube

    twitter

    whatsapp

    instagram yellow

    instagram red

    instagram magenta

    instagram blue

    snapchat

    google blue

    google red

    google yellow

    google green

    tiktok razzmatazz

    tiktok splash

    microsoft red

    microsoft green

    microsoft blue

    microsoft yellow

    pinterest

    spotify

    discord

    telegram

    reddit

    amazon

    twitch

+
Color Theming 101 diff --git a/docsite/index.js b/docsite/index.js index da5629f0..86c94a5e 100644 --- a/docsite/index.js +++ b/docsite/index.js @@ -8,4 +8,3 @@ import '/js/scrollspy.js' import '/js/select.js' import '/js/color-copy.js' -import '/js/brand-colors.js' diff --git a/docsite/js/brand-colors.js b/docsite/js/brand-colors.js index 4119e4ff..9ac8c7a1 100644 --- a/docsite/js/brand-colors.js +++ b/docsite/js/brand-colors.js @@ -1,8 +1,9 @@ -import brandProps from '../../src/props.brand-colors.js' - -const brandColors = document.querySelector('#brand-colors') - -for (const [brand, color] of Object.entries(brandProps)) { - const brandTitlecase = brand.replace(/-/g, ' ').replace('brand ', '') - brandColors.innerHTML += `

    ${brandTitlecase}

` -} +console.log( + Object.keys(import('../../src/props.brand-colors.js')) + .map((brand) => [brand.replace(/-/g, ' ').replace('brand ', ''), brand]) + .map( + ([brandTitlecase, brand]) => + `

    ${brandTitlecase}

` + ) + .join('') +) From 2f6645930f7d90c20ddf6dacc356351f15b63266 Mon Sep 17 00:00:00 2001 From: aspizu Date: Fri, 4 Oct 2024 04:44:28 +0530 Subject: [PATCH 9/9] Uh... --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b64d97e1..c40f08e6 100644 --- a/package.json +++ b/package.json @@ -174,7 +174,7 @@ "./tokens": "./open-props.tokens.json", "./design-tokens": "./open-props.tokens.json", "./style-dictionary-tokens": "./open-props.style-dictionary-tokens.json", - "./postcss/brand-colors": "./src/extra/brand-colors.css", + "./postcss/brand": "./src/extra/brand.css", "./postcss/theme": "./src/extra/theme.css", "./postcss/theme-dark": "./src/extra/theme-dark.css", "./postcss/theme-light": "./src/extra/theme-light.css",