From 6169d718d2e433accb9be977ef7b25071f249055 Mon Sep 17 00:00:00 2001 From: Tiger Oakes Date: Fri, 6 Dec 2019 14:01:41 -0800 Subject: [PATCH 01/15] BREAKING CHANGE: Replace "badge" with "monochrome" --- images/monochrome-icon-gray.svg | 12 ++++ images/monochrome-icon-plain.svg | 12 ++++ images/monochrome-icon-tinted.svg | 5 ++ index.html | 113 +++++++++++++++++++++++++----- 4 files changed, 126 insertions(+), 16 deletions(-) create mode 100644 images/monochrome-icon-gray.svg create mode 100644 images/monochrome-icon-plain.svg create mode 100644 images/monochrome-icon-tinted.svg diff --git a/images/monochrome-icon-gray.svg b/images/monochrome-icon-gray.svg new file mode 100644 index 000000000..843b920ca --- /dev/null +++ b/images/monochrome-icon-gray.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/images/monochrome-icon-plain.svg b/images/monochrome-icon-plain.svg new file mode 100644 index 000000000..73cab8160 --- /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 000000000..f5ca240c6 --- /dev/null +++ b/images/monochrome-icon-tinted.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/index.html b/index.html index 2f656c32b..62ac7ea6c 100644 --- a/index.html +++ b/index.html @@ -2203,26 +2203,29 @@

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 purpose member as a hint to determine where and how an - ImageResource 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 single solid color, visually + distinct from an application's full color launch icon. The user + agent uses the value of the purpose member as a hint to + determine where and how an ImageResource 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 an icon with a + solid color is needed. The + color information in the icon is discarded and only the alpha data + is used.
- maskable: + maskable:
The image is designed with icon masks and @@ -2241,9 +2244,9 @@

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, but if an icon has just the purpose + "fizzbuzz", then it will be ignored.

The steps for processing the `purpose` member of an image @@ -2283,7 +2286,7 @@

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

@@ -2291,12 +2294,12 @@ 

               "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"
               }]
@@ -2439,6 +2442,84 @@
+
+

+ Solid color icons +

+

+ Some platforms enforce that icons be displayed with a single color + or gradient, where only the transparency of the icon can be + controlled. As web applications should work across multiple + platforms, it it possible to indicate that an icon can have a + 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 use + the red component, green component, or blue component of a pixel. If + it has alpha equal to zero, the user agent SHOULD NOT display it. + If it the alpha component is greater than zero, the user agent SHOULD + display it with any tint. +

+

+ If no monochrome icon is defined when an icon with a solid icon must + be presented, the user agent MAY show a fallback icon. +

+

+ Designers of monochrome icons are recommended to set all + pixels to black and 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. +

+
+

+ Example usage of solid color icons +

+

+ Usage examples +

+
+
+ + +
+ Image +
+
+ The base image with no color. +
+
+
+ + +
+ Gray tint +
+
+ The image tinted dark gray. +
+
+
+ + +
+ Tinted with padding +
+
+ Tinted with the theme color from the manifest. +
+
+
+
+

sizes member From 1c6db8b73a29def0f2ccc2515fc3403c26d75ec7 Mon Sep 17 00:00:00 2001 From: Tiger Oakes Date: Wed, 11 Dec 2019 10:24:31 -0800 Subject: [PATCH 02/15] Tweak verbs based on feedback --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 62ac7ea6c..dfdc555bc 100644 --- a/index.html +++ b/index.html @@ -2449,8 +2449,8 @@

Some platforms enforce that icons be displayed with a single color or gradient, where only the transparency of the icon can be - controlled. As web applications should work across multiple - platforms, it it possible to indicate that an icon can have a + controlled. As web applications need to across multiple + platforms, it is possible to indicate that an icon can have a 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 @@ -2464,8 +2464,8 @@

display it with any tint.

- If no monochrome icon is defined when an icon with a solid icon must - be presented, the user agent MAY show a fallback icon. + If no monochrome icon is defined when an icon with a solid color is + expected to be presented, the user agent MAY show a fallback icon.

Designers of monochrome icons are recommended to set all From 955bb40a9e698cc28593c6ce57e53601ed210b7e Mon Sep 17 00:00:00 2001 From: Tiger Oakes Date: Thu, 12 Dec 2019 11:03:15 -0800 Subject: [PATCH 03/15] Add images to ECHIDNA --- ECHIDNA | 3 +++ index.html | 8 ++++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/ECHIDNA b/ECHIDNA index 636de3546..4dd2ea049 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/index.html b/index.html index dfdc555bc..478c271fb 100644 --- a/index.html +++ b/index.html @@ -2220,7 +2220,7 @@

A user agent can present this icon where an icon with a - solid color is needed. The + solid color is needed. The color information in the icon is discarded and only the alpha data is used.
@@ -2442,13 +2442,13 @@

-
+

Solid color icons

- Some platforms enforce that icons be displayed with a single color - or gradient, where only the transparency of the icon can be + Some platforms enforce that icons be displayed with a solid + color, where only the transparency of the icon can be controlled. As web applications need to across multiple platforms, it is possible to indicate that an icon can have a user-agent-specified color applied by adding the monochrome From 78e713c7961109cc85ad8c7dafb1b3be707dec3a Mon Sep 17 00:00:00 2001 From: Tiger Oakes Date: Mon, 23 Dec 2019 00:36:42 -0800 Subject: [PATCH 04/15] Change monochrome to single_color --- index.html | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 478c271fb..61a74010e 100644 --- a/index.html +++ b/index.html @@ -2203,7 +2203,7 @@

purpose.

- For example, an icon with purpose "monochrome" could be used + For example, an icon with purpose "single_color" could be used as a badge or pinned icon with a single solid color, visually distinct from an application's full color launch icon. The user agent uses the value of the purpose member as a hint to @@ -2216,7 +2216,7 @@

- monochrome: + single_color:
A user agent can present this icon where an icon with a @@ -2244,8 +2244,8 @@

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 - "monochrome fizzbuzz", then it could be used as a - monochrome icon, but if an icon has just the purpose + "single_color fizzbuzz", then it could be used as a + single color icon, but if an icon has just the purpose "fizzbuzz", then it will be ignored.

@@ -2286,7 +2286,7 @@

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

@@ -2294,12 +2294,12 @@ 

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

           color, where only the transparency of the icon can be
           controlled. As web applications need to across multiple
           platforms, it is possible to indicate that an icon can have a
-          user-agent-specified color applied by adding the monochrome
+          user-agent-specified color applied by adding the single_color
           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 use
+          When processing a single_color icon, the user agent MUST NOT use
           the red component, green component, or blue component of a pixel. If
           it has alpha equal to zero, the user agent SHOULD NOT display it.
           If it the alpha component is greater than zero, the user agent SHOULD
           display it with any tint.
         

         

-          If no monochrome icon is defined when an icon with a solid color is
+          If no single color icon is defined when an icon with a solid color is
           expected to be presented, the user agent MAY show a fallback icon.
         

         

-          Designers of monochrome icons are recommended to set all
+          Designers of single_color icons are recommended to set all
           pixels to black and use transparency to create a silhouette of their
           icon.
         


From 31592848e9b7ed0cb0407039fd5dddefa034b0f1 Mon Sep 17 00:00:00 2001
From: Tiger Oakes 
Date: Mon, 23 Dec 2019 10:58:43 -0800
Subject: [PATCH 05/15] _ -> -

---
 index.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 61a74010e..bb064c167 100644
--- a/index.html
+++ b/index.html
@@ -2203,7 +2203,7 @@ 

           purpose.
         

         

-          For example, an icon with purpose "single_color" could be used
+          For example, an icon with purpose "single-color" could be used
           as a badge or pinned icon with a single solid color, visually
           distinct from an application's full color launch icon. The user
           agent uses the value of the purpose member as a hint to
@@ -2216,7 +2216,7 @@ 

         

         

           

-            single_color:
+            single-color:
           

           

             A user agent can present this icon where an icon with a
@@ -2244,7 +2244,7 @@ 

           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
-          "single_color fizzbuzz", then it could be used as a
+          "single-color fizzbuzz", then it could be used as a
           single color icon, but if an icon has just the purpose
           "fizzbuzz", then it will be ignored.
         

@@ -2294,12 +2294,12 @@ 

               "name": "News",
               "icons": [{
                 "platform": "play",
-                "purpose": "single_color",
+                "purpose": "single-color",
                 "sizes": "16x16",
                 "src": "icons/badges/android.png",
                 "type": "image/png"
               }, {
-                "purpose": "single_color",
+                "purpose": "single-color",
                 "src": "icons/badges/safari.svg",
                 "type": "image/svg"
               }]
@@ -2451,13 +2451,13 @@ 

           color, where only the transparency of the icon can be
           controlled. As web applications need to across multiple
           platforms, it is possible to indicate that an icon can have a
-          user-agent-specified color applied by adding the single_color
+          user-agent-specified color applied by adding the single-color
           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 single_color icon, the user agent MUST NOT use
+          When processing a single-color icon, the user agent MUST NOT use
           the red component, green component, or blue component of a pixel. If
           it has alpha equal to zero, the user agent SHOULD NOT display it.
           If it the alpha component is greater than zero, the user agent SHOULD
@@ -2468,7 +2468,7 @@ 

           expected to be presented, the user agent MAY show a fallback icon.
         

         

-          Designers of single_color icons are recommended to set all
+          Designers of single-color icons are recommended to set all
           pixels to black and use transparency to create a silhouette of their
           icon.
         


From 67a26959a1802aef6ba0f1bbbdab2d6be3a0e19e Mon Sep 17 00:00:00 2001
From: Tiger Oakes 
Date: Sun, 19 Jan 2020 22:06:16 -0800
Subject: [PATCH 06/15] Clarify that semi-transparency is preserved

---
 index.html | 79 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 41 insertions(+), 38 deletions(-)

diff --git a/index.html b/index.html
index bb064c167..74fc1d278 100644
--- a/index.html
+++ b/index.html
@@ -2220,7 +2220,7 @@ 

           
           

             A user agent can present this icon where an icon with a
-            solid color is needed. The
+            single color is needed. The
             color information in the icon is discarded and only the alpha data
             is used.
           

@@ -2360,7 +2360,7 @@ 

         

         

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

         

@@ -2444,10 +2444,10 @@

- Solid color icons + Single color icons

- Some platforms enforce that icons be displayed with a solid + Some platforms enforce that icons be displayed with a single color, where only the transparency of the icon can be controlled. As web applications need to across multiple platforms, it is possible to indicate that an icon can have a @@ -2457,15 +2457,12 @@

padding in different places throughout the platform.

- When processing a single-color icon, the user agent MUST NOT use - the red component, green component, or blue component of a pixel. If - it has alpha equal to zero, the user agent SHOULD NOT display it. - If it the alpha component is greater than zero, the user agent SHOULD - display it with any tint. -

-

- If no single color icon is defined when an icon with a solid color is - expected to be presented, the user agent MAY show a fallback icon. + When processing a single-color icon, the user agent MUST NOT + use 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 single-color icons are recommended to set all @@ -2481,42 +2478,48 @@

- Example usage of solid color icons + Example usage of single color icons

Usage examples

-
+
A black icon over a checkerboard background -
- Image -
-
- The base image with no color. -
-
-
+
+ + Image + + + The base image with no color. + +
+ +
A dark gray icon over a checkerboard background -
- Gray tint -
-
- The image tinted dark gray. -
-
-
+
+ + Gray tint + + + The image tinted dark gray. + +
+ +
A dark yellow icon over a light gray background -
- Tinted with padding -
-
- Tinted with the theme color from the manifest. -
-
+
+ + Tinted with padding + + + Tinted with the theme color from the manifest. + +
+

From 2a2e8b90a3328d0def2c3de3835171f9714afc95 Mon Sep 17 00:00:00 2001 From: Tiger Oakes Date: Mon, 25 May 2020 14:49:41 -0700 Subject: [PATCH 07/15] Indicate that icon is used like a mask --- index.html | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 74fc1d278..d4213c622 100644 --- a/index.html +++ b/index.html @@ -2220,9 +2220,9 @@

A user agent can present this icon where an icon with a - single color is needed. The - color information in the icon is discarded and only the alpha data - is used. + single color is needed. The color information in the icon is + discarded and only the alpha data is used. The icon can then be + used user agent like a mask over any colored background.
maskable: @@ -2465,9 +2465,8 @@

value for all pixels.

- Designers of single-color icons are recommended to set all - pixels to black and use transparency to create a silhouette of their - icon. + Designers of single-color 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. From 6880802dc1a31c8b42929adbc2bc0e949a67e3b2 Mon Sep 17 00:00:00 2001 From: Tiger Oakes Date: Mon, 25 May 2020 16:55:32 -0700 Subject: [PATCH 08/15] Clarify invalid purposes --- index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index d4213c622..c465b8661 100644 --- a/index.html +++ b/index.html @@ -2245,8 +2245,9 @@

those purposes. If none of the stated purposes are recognized, the icon is totally ignored. For example, if an icon has purpose "single-color fizzbuzz", then it could be used as a - single color icon, but if an icon has just the purpose - "fizzbuzz", then it will be ignored. + single color icon as "single-color" 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 From a9f02c30f48491a3b45b3cb6828daf2f56dafad9 Mon Sep 17 00:00:00 2001 From: Tiger Oakes Date: Mon, 25 May 2020 17:07:46 -0700 Subject: [PATCH 09/15] Add flexibility for gradients --- index.html | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index c465b8661..a2c1e843c 100644 --- a/index.html +++ b/index.html @@ -2449,13 +2449,14 @@

Some platforms enforce that icons be displayed with a single - color, where only the transparency of the icon can be - controlled. As web applications need to across multiple - platforms, it is possible to indicate that an icon can have a - user-agent-specified color applied by adding the single-color - 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. + color or other user agent controlled fill, where only the + transparency of the icon can be controlled by the application. As web + applications need to across multiple platforms, it is possible to + indicate that an icon can have an user-agent-specified color applied + by adding the single-color 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 single-color icon, the user agent MUST NOT From f3ab19aac67f2c6b3304f81fb6f379dc54a4ac23 Mon Sep 17 00:00:00 2001 From: Tiger Oakes Date: Wed, 3 Jun 2020 16:31:08 -0700 Subject: [PATCH 10/15] Switch back to monochrome, add gradient example --- ...-gray.svg => monochrome-icon-gradient.svg} | 8 ++- index.html | 61 ++++++++++--------- 2 files changed, 38 insertions(+), 31 deletions(-) rename images/{monochrome-icon-gray.svg => monochrome-icon-gradient.svg} (87%) diff --git a/images/monochrome-icon-gray.svg b/images/monochrome-icon-gradient.svg similarity index 87% rename from images/monochrome-icon-gray.svg rename to images/monochrome-icon-gradient.svg index 843b920ca..8dc10950f 100644 --- a/images/monochrome-icon-gray.svg +++ b/images/monochrome-icon-gradient.svg @@ -7,6 +7,12 @@ + + + + + + - + diff --git a/index.html b/index.html index a2c1e843c..c142823a2 100644 --- a/index.html +++ b/index.html @@ -2203,24 +2203,25 @@

purpose.

- For example, an icon with purpose "single-color" could be used - as a badge or pinned icon with a single solid color, visually - distinct from an application's full color launch icon. The user - agent uses the value of the purpose member as a hint to - determine where and how an ImageResource 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 purpose member as a hint to determine where and + how an ImageResource is displayed. Unless declared otherwise + by the developer, a user agent can use an icon for any + purpose.

The icon purposes are as follows:

- single-color: + monochrome:
- A user agent can present this icon where an icon with a - single color is needed. The color information in the icon is + 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 user agent like a mask over any colored background.
@@ -2244,8 +2245,8 @@

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 - "single-color fizzbuzz", then it could be used as a - single color icon as "single-color" is a valid purpose. + "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.

@@ -2287,20 +2288,20 @@

In the following example, the web application is listing two icons - to be used as a single color icon, 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": "single-color",
+                "purpose": "monochrome",
                 "sizes": "16x16",
                 "src": "icons/badges/android.png",
                 "type": "image/png"
               }, {
-                "purpose": "single-color",
+                "purpose": "monochrome",
                 "src": "icons/badges/safari.svg",
                 "type": "image/svg"
               }]
@@ -2361,7 +2362,7 @@ 

         

         

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

         

@@ -2445,21 +2446,21 @@

- Single color icons + Monochrome icons and solid fills

- Some platforms enforce that icons be displayed with a single - color or other user agent controlled fill, where only the + 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 controlled by the application. As web applications need to across multiple platforms, it is possible to indicate that an icon can have an user-agent-specified color applied - by adding the single-color purpose. This allows the platform + 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 single-color icon, the user agent MUST NOT + When processing a monochrome icon, the user agent MUST NOT use 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 @@ -2467,7 +2468,7 @@

value for all pixels.

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

@@ -2479,7 +2480,7 @@

- Example usage of single color icons + Example usage of monochrome icons

Usage examples @@ -2498,14 +2499,14 @@

- - + +
- Gray tint + Gradient fill - The image tinted dark gray. + The image filled in with a gradient.
@@ -2514,10 +2515,10 @@

"A dark yellow icon over a light gray background">
- Tinted with padding + Solid color fill with padding - Tinted with the theme color from the manifest. + Filled in with the theme color from the manifest.
From d57628d9c413752356c2b4c7b411324649b0f672 Mon Sep 17 00:00:00 2001 From: Tiger Oakes Date: Fri, 5 Jun 2020 09:17:42 -0700 Subject: [PATCH 11/15] Tweak writing style --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index c142823a2..2c15f09f1 100644 --- a/index.html +++ b/index.html @@ -2223,7 +2223,7 @@

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 user agent like a mask over any colored background. + used by the user agent like a mask over any solid fill.

maskable: @@ -2246,7 +2246,7 @@

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

@@ -2453,7 +2453,7 @@

solid fill such as a single color, where only the transparency of the icon can be controlled by the application. As web applications need to across multiple platforms, it is possible to - indicate that an icon can have an user-agent-specified color applied + 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 From e89b93bddd95bcddd4070b0728278994d492629f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcos=20C=C3=A1ceres?= Date: Wed, 10 Jun 2020 19:36:02 +1000 Subject: [PATCH 12/15] Remov ImageResource stuff accidentally included on merge --- index.html | 99 ------------------------------------------------------ 1 file changed, 99 deletions(-) diff --git a/index.html b/index.html index c241a8d6f..33784f109 100644 --- a/index.html +++ b/index.html @@ -2486,105 +2486,6 @@

-
-

- sizes member -

-

- The sizes member of an ImageResource is a string - consisting of an unordered set of unique space-separated - tokens which are ASCII case-insensitive that represents - the dimensions of an image. Each keyword is either an ASCII - case-insensitive match for the string "any", or a value - that consists of two valid non-negative integers that do not - have a leading U+0030 DIGIT ZERO (0) character and that are separated - by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN CAPITAL - LETTER X character. The keywords represent icon sizes in raw pixels - (as opposed to CSS pixels). When multiple ImageResources are - available, a user agent MAY use the value to decide which icon is - most suitable for a display context (and ignore any that are - inappropriate). -

-

- The steps for processing the sizes member of an - image are given by the following algorithm. The algorithm takes - an ImageResource image. This algorithm will return - a set. -

-
    -
  1. Let set be an empty set. -
    2. -
  2. Let value be image.sizes. -
    3. -
  3. If Type(value) is not String, return - undefined. -
    4. -
  4. Otherwise, parse value as if it was a - {{HTMLLinkElement/sizes}} attribute and let [=list=] - keywords be the result. -
    5. -
  5. [=list/For each=] keyword of keywords: -
      -
    1. [=set/append=] keyword, ascii lowercased, - to set. -
      2. -
    -
    6. -
  6. Return set. -
    7. -
-
-
-

- src member -

-

- The src member of an ImageResource is a URL from - which a user agent can fetch the image's data. -

-
-
-

- type member -

-

- The type member of an ImageResource is a hint as to the - MIME type of the image. The purpose of this member is to allow - a user agent to ignore images of MIME types it does not support. -

-

- There is no default MIME type for image resources. However, for the - user agents MUST use the [=rules for sniffing images specifically=]. -

-

- The steps for processing the type member of an - image are given by the following algorithm. The algorithm takes - an image object as an argument, and returns either a - string or undefined. -

-
    -
  1. Let value be image["type"]. -
    2. -
  2. If Type(value) is not String, return - undefined. -
    3. -
  3. If value is not a valid MIME type string or the - value of type is not a supported MIME type, issue a - developer warning and return undefined. -
    4. -
  4. Return value. -
    5. -
-
-
-

- platform member -

-

- The platform member represents the platform to which a - containing object applies. -

-

processing image resources From 565a94aaec30ca6047976df91038d8c2e33f8956 Mon Sep 17 00:00:00 2001 From: Tiger Oakes Date: Wed, 10 Jun 2020 10:24:37 -0700 Subject: [PATCH 13/15] Couple of suggestions --- index.html | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 33784f109..3fb6a4665 100644 --- a/index.html +++ b/index.html @@ -2323,8 +2323,8 @@

If the icon contains transparent pixels, the user agent MUST - composite the icon onto a solid fill (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 @@ -2412,21 +2412,21 @@

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 controlled by the application. As web - applications need to 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. + 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 - use 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. + 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 @@ -2437,7 +2437,7 @@

The user agent MAY add a background of any color behind transparent - pixels. + pixels. The background SHOULD have sufficient contrast with the icon.

From b0786b15bf7972fd158221d4adbb2c9980fa488d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcos=20C=C3=A1ceres?= Date: Thu, 11 Jun 2020 18:13:34 +1000 Subject: [PATCH 14/15] Update index.html --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 3fb6a4665..5de22dc35 100644 --- a/index.html +++ b/index.html @@ -2437,7 +2437,8 @@

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

From 6a851a1daaa17697ade94f61bc84e70e2485c0fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcos=20C=C3=A1ceres?= Date: Wed, 17 Jun 2020 19:41:45 +1000 Subject: [PATCH 15/15] Update index.html --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 5de22dc35..10d72adf1 100644 --- a/index.html +++ b/index.html @@ -2409,6 +2409,7 @@

Monochrome icons and solid fills

+

Some platforms enforce that icons be displayed with a solid fill such as a single color, where only the