From 2c55d86719e6320ee3db30575691b89712da34c1 Mon Sep 17 00:00:00 2001 From: Tiger Oakes Date: Wed, 17 Jun 2020 23:37:52 -0700 Subject: [PATCH] BREAKING CHANGE: Replace "badge" with "monochrome" (#833) --- ECHIDNA | 3 + images/monochrome-icon-gradient.svg | 18 ++++ images/monochrome-icon-plain.svg | 12 +++ images/monochrome-icon-tinted.svg | 5 ++ index.html | 127 +++++++++++++++++++++++----- 5 files changed, 145 insertions(+), 20 deletions(-) create mode 100644 images/monochrome-icon-gradient.svg create mode 100644 images/monochrome-icon-plain.svg create mode 100644 images/monochrome-icon-tinted.svg diff --git a/ECHIDNA b/ECHIDNA index 636de354..4dd2ea04 100644 --- a/ECHIDNA +++ b/ECHIDNA @@ -8,3 +8,6 @@ images/icon-mask-windows.svg images/icon-plain.svg images/icon-safe-zone.svg images/safe-zone.svg +images/monochrome-icon-gray.svg +images/monochrome-icon-plain.svg +images/monochrome-icon-tinted.svg diff --git a/images/monochrome-icon-gradient.svg b/images/monochrome-icon-gradient.svg new file mode 100644 index 00000000..8dc10950 --- /dev/null +++ b/images/monochrome-icon-gradient.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/images/monochrome-icon-plain.svg b/images/monochrome-icon-plain.svg new file mode 100644 index 00000000..73cab816 --- /dev/null +++ b/images/monochrome-icon-plain.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/images/monochrome-icon-tinted.svg b/images/monochrome-icon-tinted.svg new file mode 100644 index 00000000..f5ca240c --- /dev/null +++ b/images/monochrome-icon-tinted.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/index.html b/index.html index d1ccdba8..10d72adf 100644 --- a/index.html +++ b/index.html @@ -2164,27 +2164,30 @@

purpose.

- For example, an icon with purpose "badge" could be used as a - badge or pinned icon that is visually distinct, in color or form, - from an application's launch icon. The user agent uses the value of - the {{ManifestImageResource/purpose}} member as a hint to determine - where and how a {{ManifestImageResource}} is displayed. Unless - declared otherwise by the developer, a user agent can use an icon for - any purpose. + For example, an icon with purpose "monochrome" could be used + as a badge or pinned icon with a solid fill, visually distinct from + an application's full color launch icon. The user agent uses the + value of the {{ManifestImageResource/purpose}} member as a hint to determine where and + how an {{ManifestImageResource/purpose}} is displayed. Unless declared otherwise + by the developer, a user agent can use an icon for any + purpose.

The icon purposes are as follows:

- badge: + monochrome:
- A user agent can present this icon where space constraints and/or - color requirements differ from those of the application icon. + A user agent can present this icon where a + monochrome icon with a + solid fill is needed. The color information in the icon is + discarded and only the alpha data is used. The icon can then be + used by the user agent like a mask over any solid fill.
- maskable: + maskable:
The image is designed with icon masks and @@ -2203,9 +2206,10 @@

If an icon contains multiple purposes, it could be used for any of those purposes. If none of the stated purposes are recognized, the icon is totally ignored. For example, if an icon has purpose - "badge fizzbuzz", then it could be used as a badge, but - if an icon has just the purpose "fizzbuzz", then it will - be ignored. + "monochrome fizzbuzz", then it could be used as a + monochrome icon, as "monochrome" is a valid purpose. + However, if an icon just has the purpose "fizzbuzz", + then it will be ignored.

The steps for processing the `purpose` member of an image @@ -2245,20 +2249,20 @@

In the following example, the web application is listing two icons - to be used as a badge, one of which is specifically designed for - the Android platform. + to be used as a monochrome icon, one of which is specifically + designed for the Android platform. 

             {
               "name": "News",
               "icons": [{
                 "platform": "play",
-                "purpose": "badge",
+                "purpose": "monochrome",
                 "sizes": "16x16",
                 "src": "icons/badges/android.png",
                 "type": "image/png"
               }, {
-                "purpose": "badge",
+                "purpose": "monochrome",
                 "src": "icons/badges/safari.svg",
                 "type": "image/svg"
               }]
@@ -2319,8 +2323,8 @@ 

         

         

           If the icon contains transparent pixels, the user agent MUST
-          composite the icon onto a solid color (eg. white) of the user agent's
-          choice.
+          composite the icon onto a solid fill (e.g., white) of the user
+          agent's choice.
         

         

           It is suggested that designers avoid using transparent pixels in
@@ -2401,6 +2405,89 @@
+
+

+ Monochrome icons and solid fills +

+

+

+ Some platforms enforce that icons be displayed with a + solid fill such as a single color, where only the + transparency of the icon can be declared in a [=manifest=]. As web + applications need to work across multiple platforms, it is possible + to indicate that an icon can have an user-agent-specified color + applied by adding the monochrome purpose. This allows the + platform to ensure that the icon looks well integrated with the + platform, and even apply different colors and padding in different + places throughout the platform. +

+

+ When processing a monochrome icon, the user agent MUST NOT + independently display the red component, green component, or blue + component of a pixel. The user agent SHOULD display each pixel with + its original alpha value, but with a red, green, and blue value of + the user agent's choosing. It is RECOMMENDED that the user agent use + the same color value for all pixels. +

+

+ Designers of monochrome icons could set all pixels to black + and only use transparency to create a silhouette of their icon. +

+

+ The user agent MAY enlarge the icon by adding additional padding. +

+

+ The user agent MAY add a background of any color behind transparent + pixels, and SHOULD ensure that the background has sufficient + contrast with the icon. +

+
+

+ Example usage of monochrome icons +

+

+ Usage examples +

+
+
+ + +
+ + Image + + + The base image with no color. + +
+
+
+ + +
+ + Gradient fill + + + The image filled in with a gradient. + +
+
+
+ + +
+ + Solid color fill with padding + + + Filled in with the theme color from the manifest. + +
+
+
+
+

processing image resources