Skip to content

Commit

Permalink
[Nearby] Add dark mode support for Share Type icons
Browse files Browse the repository at this point in the history 
Introduce support for dark mode in the Nearby Share preview and progress
pages' Share Type icons. New colors added to cros_colors based on the
Figma spec found in the original bug report (b/223933012#comment2).

Nearby Preview and Progress L/D Before
Video: https://drive.google.com/file/d/10npu7S8K8N18pV9kyZRB_WRvcqtoN5rX/view?usp=sharing&resourcekey=0-5bW1BW-0Yru1p1cRhzSe6w

Nearby Preview and Progress L/D After
Video: https://drive.google.com/file/d/1-edkg38978zlwnCKyaqDN32IYIC5BSeL/view?usp=sharing&resourcekey=0-7V0hXCUHpDZO5zGlA3FFig

Nearby High Viz Progress L/D After
Video: https://drive.google.com/file/d/1-ghiP7r6qKTGOIVAYjAOtJZAJUktgoEl/view?usp=sharing&resourcekey=0-bbIABj3agXXce9A6kp3EVw

Tested: Manually tested and included videos.

Fixes: b/223933012
Change-Id: If2b0626d901220c6061c46b2c91de05760bf270c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3547602
Reviewed-by: Josh Nohle <nohle@chromium.org>
Reviewed-by: Christopher Lam <calamity@chromium.org>
Commit-Queue: Crisrael Lucero <crisrael@google.com>
Cr-Commit-Position: refs/heads/main@{#987350}
  • Loading branch information
@crisrael
crisrael authored and Chromium LUCI CQ committed Mar 31, 2022
1 parent bdad793 commit c700a84
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 30 deletions.
5 changes: 3 additions & 2 deletions chrome/browser/resources/nearby_share/shared/nearby_preview.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@
}

iron-icon.disabled {
--nearby-preview-color: var(--google-grey-600);
--nearby-preview-background-color: var(--google-grey-200);
--nearby-preview-color: var(--cros-color-disabled);
--nearby-preview-background-color: var(
--cros-shortcut-background-color);
}

#title {
Expand Down
5 changes: 3 additions & 2 deletions chrome/browser/resources/nearby_share/shared/nearby_progress.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@
}

.has-error #icon {
--nearby-device-icon-color: var(--google-grey-600);
--nearby-device-icon-background-color: var(--google-grey-200);
--nearby-device-icon-color: var(--cros-color-disabled);
--nearby-device-icon-background-color: var(
--cros-shortcut-background-color);
}

#progress-container {
Expand Down
52 changes: 26 additions & 26 deletions chrome/browser/resources/nearby_share/shared/nearby_shared_share_type_icons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,56 +5,56 @@
Keep these in sorted order by id="". See also http://goo.gl/Y1OdAq
-->
<g id="address">
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM7 9C7 6.24 9.24 4 12 4C14.76 4 17 6.24 17 9C17 11.88 14.12 16.19 12 18.88C9.92 16.21 7 11.85 7 9ZM14.5 9C14.5 10.3807 13.3807 11.5 12 11.5C10.6193 11.5 9.5 10.3807 9.5 9C9.5 7.61929 10.6193 6.5 12 6.5C13.3807 6.5 14.5 7.61929 14.5 9Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--cros-highlight-color-blue))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM7 9C7 6.24 9.24 4 12 4C14.76 4 17 6.24 17 9C17 11.88 14.12 16.19 12 18.88C9.92 16.21 7 11.85 7 9ZM14.5 9C14.5 10.3807 13.3807 11.5 12 11.5C10.6193 11.5 9.5 10.3807 9.5 9C9.5 7.61929 10.6193 6.5 12 6.5C13.3807 6.5 14.5 7.61929 14.5 9Z" style="fill: var(--nearby-preview-color, var(--cros-icon-color-blue))"></path>
</g>
<g id="audio-file">
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M6 8C7.1 8 8 8.9 8 10V14C8 15.1 7.1 16 6 16C4.9 16 4 15.1 4 14V10C4 8.9 4.9 8 6 8ZM16 10V14C16 15.1 16.9 16 18 16C19.1 16 20 15.1 20 14V10C20 8.9 19.1 8 18 8C16.9 8 16 8.9 16 10ZM10 6V18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18V6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--cros-highlight-color))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M6 8C7.1 8 8 8.9 8 10V14C8 15.1 7.1 16 6 16C4.9 16 4 15.1 4 14V10C4 8.9 4.9 8 6 8ZM16 10V14C16 15.1 16.9 16 18 16C19.1 16 20 15.1 20 14V10C20 8.9 19.1 8 18 8C16.9 8 16 8.9 16 10ZM10 6V18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18V6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6Z" style="fill: var(--nearby-preview-color, var(--cros-icon-color-blue))"></path>
</g>
<g id="google-docs-file">
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3V3ZM17.01 9H7V7H17.01V9V9ZM17.01 13H7V11H17.01V13V13ZM14.01 17H7V15H14.01V17V17Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--cros-highlight-color))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3V3ZM17.01 9H7V7H17.01V9V9ZM17.01 13H7V11H17.01V13V13ZM14.01 17H7V15H14.01V17V17Z" style="fill: var(--nearby-preview-color, var(--cros-icon-color-blue))"></path>
</g>
<g id="google-sheets-file">
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, rgb(230, 244, 234))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M19 3H5C3.9 3 3.01 3.9 3.01 5L3 8V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3V3ZM19 11H11V19H9V11H5V9H9V5H11V9H19V11V11Z" style="fill: var(--nearby-preview-color, rgb(30, 142, 162))"></path>
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--cros-highlight-color-green))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M19 3H5C3.9 3 3.01 3.9 3.01 5L3 8V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3V3ZM19 11H11V19H9V11H5V9H9V5H11V9H19V11V11Z" style="fill: var(--nearby-preview-color, var(--cros-icon-color-green))"></path>
</g>
<g id="google-slides-file">
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-yellow-50))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M18.9998 3H4.99977C3.89977 3 3.00977 3.9 3.00977 5V19C3.00977 20.1 3.89977 21 4.99977 21H18.9998C20.0998 21 20.9998 20.1 20.9998 19V5C20.9998 3.9 20.0998 3 18.9998 3V3ZM18.9998 16H4.99977V8H18.9998V16V16Z" style="fill: var(--nearby-preview-color, rgb(249, 171, 0))"></path>
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--cros-highlight-color-yellow))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M18.9998 3H4.99977C3.89977 3 3.00977 3.9 3.00977 5V19C3.00977 20.1 3.89977 21 4.99977 21H18.9998C20.0998 21 20.9998 20.1 20.9998 19V5C20.9998 3.9 20.0998 3 18.9998 3V3ZM18.9998 16H4.99977V8H18.9998V16V16Z" style="fill: var(--nearby-preview-color, var(--cros-icon-color-yellow))"></path>
</g>
<g id="image-video-file">
<rect x="5" height="68" width="58" rx="4" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></rect>
<path transform="translate(16 16)" fill-rule="evenodd" d="M14 8v6a9 9 0 1 0 10 11h7v-17zm10 17a9 9 0 0 0 -10 -11v11h10z" style="fill: var(--nearby-preview-color, var(--google-blue-200))"></path>
<rect x="5" height="68" width="58" rx="4" style="fill: var(--nearby-preview-background-color, var(--cros-highlight-color))"></rect>
<path transform="translate(16 16)" fill-rule="evenodd" d="M14 8v6a9 9 0 1 0 10 11h7v-17zm10 17a9 9 0 0 0 -10 -11v11h10z" style="fill: var(--nearby-preview-color, rgba(var(--cros-icon-color-blue-rgb), var(--cros-second-tone-opacity)))"></path>
</g>
<g id="multiple-file">
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M15 1H8C6.9 1 6.01 1.9 6.01 3L6 17C6 18.1 6.89 19 7.99 19H19C20.1 19 21 18.1 21 17V7L15 1ZM18 23H4C2.9 23 2 22.1 2 21V7H4V21H18V23ZM8 3V17H19V8H14V3H8Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--cros-highlight-color))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M15 1H8C6.9 1 6.01 1.9 6.01 3L6 17C6 18.1 6.89 19 7.99 19H19C20.1 19 21 18.1 21 17V7L15 1ZM18 23H4C2.9 23 2 22.1 2 21V7H4V21H18V23ZM8 3V17H19V8H14V3H8Z" style="fill: var(--nearby-preview-color, var(--cros-icon-color-blue))"></path>
</g>
<g id="pdf-file">
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, rgb(252, 232, 230))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM8 11.5H7V10.5H8V11.5ZM9.5 11.5C9.5 12.33 8.83 13 8 13H7V15H5.5V9H8C8.83 9 9.5 9.67 9.5 10.5V11.5ZM17 10.5H19.5V9H15.5V15H17V13H18.5V11.5H17V10.5ZM14.5 13.5C14.5 14.33 13.83 15 13 15H10.5V9H13C13.83 9 14.5 9.67 14.5 10.5V13.5ZM13 13.5H12V10.5H13V13.5Z" style="fill: var(--nearby-preview-color, var(--google-red-600))"></path>
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--cros-highlight-color-red))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM8 11.5H7V10.5H8V11.5ZM9.5 11.5C9.5 12.33 8.83 13 8 13H7V15H5.5V9H8C8.83 9 9.5 9.67 9.5 10.5V11.5ZM17 10.5H19.5V9H15.5V15H17V13H18.5V11.5H17V10.5ZM14.5 13.5C14.5 14.33 13.83 15 13 15H10.5V9H13C13.83 9 14.5 9.67 14.5 10.5V13.5ZM13 13.5H12V10.5H13V13.5Z" style="fill: var(--nearby-preview-color, var(--cros-icon-color-red))"></path>
</g>
<g id="phone">
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M17 1H7C5.9 1 5 1.9 5 3V21C5 22.1 5.9 23 7 23H17C18.1 23 19 22.1 19 21V3C19 1.9 18.1 1 17 1ZM7 6H17V16H7V6ZM7 21H17V18H7V21ZM7 4V3H17V4H7ZM14 19H10V20H14V19Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--cros-highlight-color))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M17 1H7C5.9 1 5 1.9 5 3V21C5 22.1 5.9 23 7 23H17C18.1 23 19 22.1 19 21V3C19 1.9 18.1 1 17 1ZM7 6H17V16H7V6ZM7 21H17V18H7V21ZM7 4V3H17V4H7ZM14 19H10V20H14V19Z" style="fill: var(--nearby-preview-color, var(--cros-icon-color-blue))"></path>
</g>
<g id="text">
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M3.59961 6H20.3996V8.4H3.59961V6ZM3.59961 10.8H20.3996V13.2H3.59961V10.8ZM13.1996 15.6H3.59961V18H13.1996V15.6Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--cros-highlight-color))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M3.59961 6H20.3996V8.4H3.59961V6ZM3.59961 10.8H20.3996V13.2H3.59961V10.8ZM13.1996 15.6H3.59961V18H13.1996V15.6Z" style="fill: var(--nearby-preview-color, var(--cros-icon-color-blue))"></path>
</g>
<g id="unknown-file">
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M6 2H14L20 8V20C20 21.1 19.1 22 18 22H5.99C4.89 22 4 21.1 4 20L4.01 4C4.01 2.9 4.9 2 6 2ZM6 4V20H18V9H13V4H6Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--cros-highlight-color))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M6 2H14L20 8V20C20 21.1 19.1 22 18 22H5.99C4.89 22 4 21.1 4 20L4.01 4C4.01 2.9 4.9 2 6 2ZM6 4V20H18V9H13V4H6Z" style="fill: var(--nearby-preview-color, var(--cros-icon-color-blue))"></path>
</g>
<g id="url">
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M11 15H7C5.35 15 4 13.65 4 12C4 10.35 5.35 9 7 9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15ZM17 7H13V9H17C18.65 9 20 10.35 20 12C20 13.65 18.65 15 17 15H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7ZM16 11H8V13H16V11Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--cros-highlight-color))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M11 15H7C5.35 15 4 13.65 4 12C4 10.35 5.35 9 7 9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15ZM17 7H13V9H17C18.65 9 20 10.35 20 12C20 13.65 18.65 15 17 15H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7ZM16 11H8V13H16V11Z" style="fill: var(--nearby-preview-color, var(--cros-icon-color-blue))"></path>
</g>
<g id="wifi-credentials">
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M18.4561 6.76542C18.7337 6.40882 18.6571 5.88721 18.2916 5.62915C17.0249 4.7353 14.0896 3 10.1235 3C6.15814 3 3.22206 4.7353 1.95539 5.62915C1.58981 5.88721 1.5132 6.40882 1.7908 6.76542L9.5311 16.7072C9.83449 17.0975 10.4102 17.0975 10.7136 16.708L10.9047 16.4626C10.4075 15.5886 10.1235 14.5774 10.1235 13.5C10.1235 10.1863 12.8098 7.5 16.1235 7.5C16.6754 7.5 17.2099 7.57451 17.7174 7.71403L18.4561 6.76542ZM13.8663 10.6527V11.561H13.6763C13.124 11.561 12.6763 12.0088 12.6763 12.561V16C12.6763 16.5523 13.124 17 13.6763 17H17.6763C18.2286 17 18.6763 16.5523 18.6763 16V12.561C18.6763 12.0088 18.2286 11.561 17.6763 11.561H17.6873V10.6527C17.6873 9.59753 16.8319 8.74219 15.7768 8.74219C14.7217 8.74219 13.8663 9.59753 13.8663 10.6527ZM15.7768 10.2422C15.5501 10.2422 15.3663 10.426 15.3663 10.6527V11.561H16.1873V10.6527C16.1873 10.426 16.0035 10.2422 15.7768 10.2422ZM14.1763 13.061V15.5H17.1763V13.061H14.1763Z" style="fill : var(--nearby-preview-color, var(--google-blue-600))"></path>
<circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--cros-highlight-color))"></circle>
<path fill-rule="evenodd" transform="translate(22 22)" d="M18.4561 6.76542C18.7337 6.40882 18.6571 5.88721 18.2916 5.62915C17.0249 4.7353 14.0896 3 10.1235 3C6.15814 3 3.22206 4.7353 1.95539 5.62915C1.58981 5.88721 1.5132 6.40882 1.7908 6.76542L9.5311 16.7072C9.83449 17.0975 10.4102 17.0975 10.7136 16.708L10.9047 16.4626C10.4075 15.5886 10.1235 14.5774 10.1235 13.5C10.1235 10.1863 12.8098 7.5 16.1235 7.5C16.6754 7.5 17.2099 7.57451 17.7174 7.71403L18.4561 6.76542ZM13.8663 10.6527V11.561H13.6763C13.124 11.561 12.6763 12.0088 12.6763 12.561V16C12.6763 16.5523 13.124 17 13.6763 17H17.6763C18.2286 17 18.6763 16.5523 18.6763 16V12.561C18.6763 12.0088 18.2286 11.561 17.6763 11.561H17.6873V10.6527C17.6873 9.59753 16.8319 8.74219 15.7768 8.74219C14.7217 8.74219 13.8663 9.59753 13.8663 10.6527ZM15.7768 10.2422C15.5501 10.2422 15.3663 10.426 15.3663 10.6527V11.561H16.1873V10.6527C16.1873 10.426 16.0035 10.2422 15.7768 10.2422ZM14.1763 13.061V15.5H17.1763V13.061H14.1763Z" style="fill : var(--nearby-preview-color, var(--cros-icon-color-blue))"></path>
</g>
</defs>
</svg>
Expand Down
12 changes: 12 additions & 0 deletions ui/chromeos/styles/cros_colors.json5
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,18 @@
light: "rgba($black_rgb, 0.06)",
dark: "rgba($white_rgb, 0.08)",
},
highlight_color_green: {
light: "rgb($google_green_50_rgb)",
dark: "rgba($google_green_300_rgb, 0.3)",
},
highlight_color_red: {
light: "rgb($google_red_50_rgb)",
dark: "rgba($google_red_600_rgb, 0.3)",
},
highlight_color_yellow: {
light: "rgb($google_yellow_50_rgb)",
dark: "rgba($google_yellow_600_rgb, 0.3)",
},
ripple_color: {
light: "rgba($black_rgb, 0.06)",
dark: "rgba($white_rgb, 0.08)",
Expand Down

0 comments on commit c700a84

Please sign in to comment.