Skip to content

Commit 2c55d86

Browse files
NotWoodsNotWoods
authored
BREAKING CHANGE: Replace "badge" with "monochrome" (#833)
1 parent 632df40 commit 2c55d86

File tree

5 files changed

+145
-20
lines changed

5 files changed

+145
-20
lines changed

‎ECHIDNA

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,6 @@ images/icon-mask-windows.svg
88
images/icon-plain.svg
99
images/icon-safe-zone.svg
1010
images/safe-zone.svg
11+
images/monochrome-icon-gray.svg
12+
images/monochrome-icon-plain.svg
13+
images/monochrome-icon-tinted.svg

‎images/monochrome-icon-gradient.svg

Lines changed: 18 additions & 0 deletions
Loading

‎images/monochrome-icon-plain.svg

Lines changed: 12 additions & 0 deletions
Loading

‎images/monochrome-icon-tinted.svg

Lines changed: 5 additions & 0 deletions
Loading

‎index.html

Lines changed: 107 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2164,27 +2164,30 @@ <h3>
21642164
purpose</a>.
21652165
</p>
21662166
<p class="note">
2167-
For example, an icon with purpose "<a>badge</a>" could be used as a
2168-
badge or pinned icon that is visually distinct, in color or form,
2169-
from an application's launch icon. The user agent uses the value of
2170-
the {{ManifestImageResource/purpose}} member as a hint to determine
2171-
where and how a {{ManifestImageResource}} is displayed. Unless
2172-
declared otherwise by the developer, a user agent can use an icon for
2173-
<a>any purpose</a>.
2167+
For example, an icon with purpose "<a>monochrome</a>" could be used
2168+
as a badge or pinned icon with a solid fill, visually distinct from
2169+
an application's full color launch icon. The user agent uses the
2170+
value of the {{ManifestImageResource/purpose}} member as a hint to determine where and
2171+
how an {{ManifestImageResource/purpose}} is displayed. Unless declared otherwise
2172+
by the developer, a user agent can use an icon for <a>any
2173+
purpose</a>.
21742174
</p>
21752175
<p>
21762176
The <dfn>icon purposes</dfn> are as follows:
21772177
</p>
21782178
<dl>
21792179
<dt>
2180-
<dfn data-lt="badge purpose">badge</dfn>:
2180+
<dfn data-lt="monochrome purpose">monochrome</dfn>:
21812181
</dt>
21822182
<dd>
2183-
A user agent can present this icon where space constraints and/or
2184-
color requirements differ from those of the application icon.
2183+
A user agent can present this icon where a
2184+
<a href="#monochrome-icons-and-solid-fills">monochrome icon with a
2185+
solid fill</a> is needed. The color information in the icon is
2186+
discarded and only the alpha data is used. The icon can then be
2187+
used by the user agent like a mask over any solid fill.
21852188
</dd>
21862189
<dt>
2187-
<dfn data-lt="badge maskable">maskable</dfn>:
2190+
<dfn data-lt="maskable purpose">maskable</dfn>:
21882191
</dt>
21892192
<dd>
21902193
The image is designed with <a href="#icon-masks">icon masks and
@@ -2203,9 +2206,10 @@ <h3>
22032206
If an icon contains multiple purposes, it could be used for any of
22042207
those purposes. If none of the stated purposes are recognized, the
22052208
icon is totally ignored. For example, if an icon has purpose
2206-
<code>"badge fizzbuzz"</code>, then it could be used as a badge, but
2207-
if an icon has just the purpose <code>"fizzbuzz"</code>, then it will
2208-
be ignored.
2209+
<code>"monochrome fizzbuzz"</code>, then it could be used as a
2210+
monochrome icon, as <code>"monochrome"</code> is a valid purpose.
2211+
However, if an icon just has the purpose <code>"fizzbuzz"</code>,
2212+
then it will be ignored.
22092213
</p>
22102214
<p>
22112215
The steps for <dfn>processing the `purpose` member of an image</dfn>
@@ -2245,20 +2249,20 @@ <h3>
22452249
<div class="example">
22462250
<p>
22472251
In the following example, the web application is listing two icons
2248-
to be used as a badge, one of which is specifically designed for
2249-
the Android platform.
2252+
to be used as a monochrome icon, one of which is specifically
2253+
designed for the Android platform.
22502254
</p>
22512255
<pre class="example json">
22522256
{
22532257
"name": "News",
22542258
"icons": [{
22552259
"platform": "play",
2256-
"purpose": "badge",
2260+
"purpose": "monochrome",
22572261
"sizes": "16x16",
22582262
"src": "icons/badges/android.png",
22592263
"type": "image/png"
22602264
}, {
2261-
"purpose": "badge",
2265+
"purpose": "monochrome",
22622266
"src": "icons/badges/safari.svg",
22632267
"type": "image/svg"
22642268
}]
@@ -2319,8 +2323,8 @@ <h2>
23192323
</p>
23202324
<p>
23212325
If the icon contains transparent pixels, the user agent MUST
2322-
composite the icon onto a solid color (eg. white) of the user agent's
2323-
choice.
2326+
composite the icon onto a solid fill (e.g., white) of the user
2327+
agent's choice.
23242328
</p>
23252329
<p class="note">
23262330
It is suggested that designers avoid using transparent pixels in
@@ -2401,6 +2405,89 @@ <h2 class="icon-title">
24012405
</div>
24022406
</section>
24032407
</section>
2408+
<section>
2409+
<h2>
2410+
Monochrome icons and solid fills
2411+
</h2>
2412+
<p class="issue atrisk" data-number="905"></p>
2413+
<p>
2414+
Some platforms enforce that icons be displayed with a
2415+
<dfn>solid fill</dfn> such as a single color, where only the
2416+
transparency of the icon can be declared in a [=manifest=]. As web
2417+
applications need to work across multiple platforms, it is possible
2418+
to indicate that an icon can have an user-agent-specified color
2419+
applied by adding the <a>monochrome</a> purpose. This allows the
2420+
platform to ensure that the icon looks well integrated with the
2421+
platform, and even apply different colors and padding in different
2422+
places throughout the platform.
2423+
</p>
2424+
<p>
2425+
When processing a <a>monochrome</a> icon, the user agent MUST NOT
2426+
independently display the red component, green component, or blue
2427+
component of a pixel. The user agent SHOULD display each pixel with
2428+
its original alpha value, but with a red, green, and blue value of
2429+
the user agent's choosing. It is RECOMMENDED that the user agent use
2430+
the same color value for all pixels.
2431+
</p>
2432+
<p class="note">
2433+
Designers of <a>monochrome</a> icons could set all pixels to black
2434+
and only use transparency to create a silhouette of their icon.
2435+
</p>
2436+
<p>
2437+
The user agent MAY enlarge the icon by adding additional padding.
2438+
</p>
2439+
<p>
2440+
The user agent MAY add a background of any color behind transparent
2441+
pixels, and SHOULD ensure that the background has sufficient
2442+
contrast with the icon.
2443+
</p>
2444+
<section>
2445+
<h3>
2446+
Example usage of monochrome icons
2447+
</h3>
2448+
<h2 class="icon-title">
2449+
Usage examples
2450+
</h2>
2451+
<div class="icons">
2452+
<figure>
2453+
<img src="images/monochrome-icon-plain.svg" alt=
2454+
"A black icon over a checkerboard background">
2455+
<figcaption>
2456+
<span class="icon-title">
2457+
Image
2458+
</span>
2459+
<span>
2460+
The base image with no color.
2461+
</span>
2462+
</figcaption>
2463+
</figure>
2464+
<figure>
2465+
<img src="images/monochrome-icon-gradient.svg" alt=
2466+
"A dark gradient icon over a checkerboard background">
2467+
<figcaption>
2468+
<span class="icon-title">
2469+
Gradient fill
2470+
</span>
2471+
<span>
2472+
The image filled in with a gradient.
2473+
</span>
2474+
</figcaption>
2475+
</figure>
2476+
<figure>
2477+
<img src="images/monochrome-icon-tinted.svg" alt=
2478+
"A dark yellow icon over a light gray background">
2479+
<figcaption>
2480+
<span class="icon-title">
2481+
Solid color fill with padding
2482+
</span>
2483+
<span>
2484+
Filled in with the theme color from the manifest.
2485+
</span>
2486+
</figcaption>
2487+
</figure>
2488+
</div>
2489+
</section>
2490+
</section>
24042491
<section>
24052492
<h3>
24062493
processing image resources

0 commit comments

Comments
 (0)