Skip to content

Commit

Permalink
[NTP] Consolidate button style to common CSS and add dark mode support
Browse files Browse the repository at this point in the history 
Consolidate paper button styling to animations.css. Also add dark mode
support.

Screenshots (Dialog background has been set to dark only for
screenshots):
Enabled = https://screenshot.googleplex.com/rOW5AuTnunN.png
Disabled = https://screenshot.googleplex.com/QJrCHor6bHS.png
Active/hover = https://screenshot.googleplex.com/vWLs9D24F39.png

Bug: 919961
Change-Id: Iceb2741de72c4cfea67ce5e6bb20662a309b530d
Reviewed-on: https://chromium-review.googlesource.com/c/1427246
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#625068}
  • Loading branch information
Kristi Park authored and Commit Bot committed Jan 23, 2019
1 parent 2788d59 commit 392be2e
Show file tree
Hide file tree
Showing 6 changed files with 132 additions and 118 deletions.
121 changes: 120 additions & 1 deletion chrome/browser/resources/local_ntp/animations.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
}

.ripple-effect {
background-color: rgba(26, 115, 232, 0.1);
background-color: rgba(var(--GB600-rgb), 0.1);
border-radius: 50%;
height: 1px;
pointer-events: none;
Expand All @@ -31,3 +31,122 @@
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 1px;
}

html[darkmode=true] .ripple-effect {
background-color: rgba(var(--GB300-rgb), 0.32);
}

button.primary .ripple-effect {
background-color: rgba(255, 255, 255, 0.32);
}

html[darkmode=true] button.primary .ripple-effect {
background-color: rgba(0, 0, 0, 0.08);
}

button.paper {
border: none;
border-radius: 4px;
font-family: 'Roboto', arial, sans-serif;
font-size: 12px;
font-weight: 500;
height: 32px;
padding: 0 16px;
position: relative;
transition-duration: 200ms;
transition-property: background-color, color, box-shadow, border;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

button.paper:disabled {
transition: none;
}

button.paper.primary {
background-color: rgb(var(--GB600-rgb));
color: white;
}

html[darkmode=true] button.paper.primary {
background-color: rgb(var(--GB300-rgb));
color: rgb(var(--GG900-rgb));
}

button.paper.primary:disabled {
background-color: rgb(var(--GG100-rgb));
color: rgb(var(--GG600-rgb));
}

html[darkmode=true] button.paper.primary:disabled {
background-color: rgb(var(--GG800-rgb));
color: rgb(var(--GG600-rgb));
}

button.paper.primary:hover:not(:disabled) {
background-color: rgb(41, 123, 231);
box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), 0.3),
0 1px 3px 1px rgba(var(--GB500-rgb), 0.15);
}

html[darkmode=true] button.paper.primary:hover:not(:disabled) {
background-color: rgb(133, 173, 238);
}

button.paper.primary:active:not(:disabled) {
box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), 0.3),
0 3px 6px 2px rgba(var(--GB500-rgb), 0.15);
}

html[darkmode=true] button.paper.primary:active:not(:disabled) {
background-color: rgb(115, 160, 223);
box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), 0.3),
0 3px 6px 2px rgba(var(--GB500-rgb), 0.15);
}

button.paper.secondary {
background-color: white;
border: 1px solid rgb(var(--GG300-rgb));
color: rgb(var(--GB600-rgb));
}

html[darkmode=true] button.paper.secondary {
background-color: transparent;
border-color: rgb(var(--GG700-rgb));
color: rgb(var(--GB300-rgb));
}

button.paper.secondary:disabled {
border-color: rgb(var(--GG100-rgb));
color: rgb(var(--GG600-rgb));
}

html[darkmode=true] button.paper.secondary:disabled {
border-color: rgb(var(--GG800-rgb));
color: rgb(var(--GG600-rgb));
}

button.paper.secondary:hover:not(:disabled) {
background-color: rgba(var(--GB500-rgb), 0.04);
border-color: rgb(var(--GB100-rgb));
}

html[darkmode=true] button.paper.secondary:hover:not(:disabled) {
background-color: rgba(var(--GB300-rgb), 0.04);
border-color: rgba(var(--GB300-rgb), 0.5);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3),
0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

button.paper.secondary:active:not(:disabled) {
background-color: white;
border-color: white;
box-shadow: 0 1px 2px 0 rgba(var(--GG800-rgb), 0.3),
0 3px 6px 2px rgba(var(--GG800-rgb), 0.15);
}

html[darkmode=true] button.paper.secondary:active:not(:disabled) {
background-color: rgba(var(--GB300-rgb), 0.08);
border-color: rgba(var(--GB300-rgb), 0.5);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3),
0 3px 6px 2px rgba(0, 0, 0, 0.15);
}
48 changes: 0 additions & 48 deletions chrome/browser/resources/local_ntp/custom_backgrounds.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -338,69 +338,21 @@ html[dir=rtl] .is-img-sel #bg-sel-title {
}

.bg-sel-footer-button {
border: none;
border-radius: 4px;
font-family: 'Roboto', arial, sans-serif;
font-size: 12px;
font-weight: 500;
height: 32px;
line-height: normal;
margin-top: 16px;
min-width: 60px;
padding: 0 16px;
position: relative;
text-align: center;
transition-duration: 200ms;
transition-property: background-color, color, box-shadow, border;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
vertical-align: top;
}

.bg-sel-footer-button:disabled {
transition: none;
}

#bg-sel-footer-done {
background-color: rgb(var(--GG100-rgb));
color: rgb(var(--GG600-rgb));
margin-inline-end: 16px;
}

#bg-sel-footer-cancel {
background-color: white;
border: 1px solid rgb(var(--GG300-rgb));
color: rgb(var(--GB600-rgb));
margin-inline-end: 8px;
}

#bg-sel-footer-cancel:hover {
background-color: rgba(var(--GB500-rgb), 0.04);
border-color: rgb(var(--GB100-rgb));
}

#bg-sel-footer-cancel:active {
background-color: white;
border-color: white;
box-shadow: 0 1px 2px 0 rgba(var(--GG800-rgb), 0.3),
0 3px 6px 2px rgba(var(--GG800-rgb), 0.15);
}

#bg-sel-footer-done:not(:disabled) {
background-color: rgb(var(--GB600-rgb));
color: white;
}

#bg-sel-footer-done:hover:not(:disabled) {
background-color: rgb(41, 123, 231);
box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), 0.3),
0 1px 3px 1px rgba(var(--GB500-rgb), 0.15);
}

#bg-sel-footer-done:active:not(:disabled) {
box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), 0.3),
0 3px 6px 2px rgba(var(--GB500-rgb), 0.15);
}

#bg-sel-footer-toggle-text {
padding: 24px 0 0 16px;
}
Expand Down
62 changes: 0 additions & 62 deletions chrome/browser/resources/local_ntp/custom_links_edit.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,68 +136,6 @@ input:focus + .underline {
margin-inline-start: 16px;
}

button {
border: none;
border-radius: 4px;
font-family: 'Roboto', arial, sans-serif;
font-size: 12px;
font-weight: 500;
height: 32px;
padding: 0 16px;
position: relative;
transition-duration: 200ms;
transition-property: background-color, color, box-shadow, border;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

button:disabled {
transition: none;
}

button.primary {
background-color: rgb(var(--GB600-rgb));
color: white;
}

button.primary:disabled {
background-color: rgb(var(--GG100-rgb));
color: rgb(var(--GG600-rgb));
}

button.primary:hover:not(:disabled) {
background-color: rgb(41, 123, 231);
box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), 0.3),
0 1px 3px 1px rgba(var(--GB500-rgb), 0.15);
}

button.primary:active:not(:disabled) {
box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), 0.3),
0 3px 6px 2px rgba(var(--GB500-rgb), 0.15);
}

button.secondary {
background-color: white;
border: 1px solid rgb(var(--GG300-rgb));
color: rgb(var(--GB600-rgb));
}

button.secondary:disabled {
border-color: rgb(var(--GG100-rgb));
color: rgb(var(--GG600-rgb));
}

button.secondary:hover:not(:disabled) {
background-color: rgba(var(--GB500-rgb), 0.04);
border-color: rgb(var(--GB100-rgb));
}

button.secondary:active:not(:disabled) {
background-color: white;
border-color: white;
box-shadow: 0 1px 2px 0 rgba(var(--GG800-rgb), 0.3),
0 3px 6px 2px rgba(var(--GG800-rgb), 0.15);
}

#cancel {
margin-inline-end: 8px;
}
6 changes: 3 additions & 3 deletions chrome/browser/resources/local_ntp/custom_links_edit.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@
</div>
<div class="buttons-container">
<span>
<button id="delete" class="secondary ripple" type="button" tabindex="0"></button>
<button id="delete" class="paper secondary ripple" type="button" tabindex="0"></button>
</span>
<span>
<button id="cancel" class="secondary ripple" type="button" tabindex="0"></button>
<button type="submit" id="done" class="primary ripple" tabindex="0"></button>
<button id="cancel" class="paper secondary ripple" type="button" tabindex="0"></button>
<button type="submit" id="done" class="paper primary ripple" tabindex="0"></button>
</span>
</div>
</form>
Expand Down
6 changes: 4 additions & 2 deletions chrome/browser/resources/local_ntp/local_ntp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,8 +159,10 @@
<span class="toggle"></span>
</label>
<div id="bg-sel-refresh-text"></div>
<button id="bg-sel-footer-cancel" class="bg-sel-footer-button ripple" tabindex="0"></button>
<button id="bg-sel-footer-done" class="bg-sel-footer-button ripple" tabindex="-1"></button>
<button id="bg-sel-footer-cancel" class="bg-sel-footer-button paper secondary ripple"
tabindex="0"></button>
<button id="bg-sel-footer-done" class="bg-sel-footer-button paper primary ripple"
tabindex="-1"></button>
</div>
</dialog>

Expand Down
7 changes: 5 additions & 2 deletions chrome/test/data/local_ntp/local_ntp_browsertest.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<head>
<script>window.localNTPUnitTest = true;</script>
<link rel="stylesheet" href="chrome-search://local-ntp/animations.css"></link>
<link rel="stylesheet" href="chrome-search://local-ntp/constants.css"></link>
<link rel="stylesheet" href="chrome-search://local-ntp/custom-backgrounds.css"></link>
<link rel="stylesheet" href="chrome-search://local-ntp/doodles.css"></link>
<link rel="stylesheet" href="chrome-search://local-ntp/local-ntp.css"></link>
Expand Down Expand Up @@ -148,8 +149,10 @@
<span class="toggle"></span>
</label>
<div id="bg-sel-refresh-text"></div>
<button id="bg-sel-footer-cancel" class="bg-sel-footer-button ripple" tabindex="0"></button>
<button id="bg-sel-footer-done" class="bg-sel-footer-button ripple" tabindex="-1"></button>
<button id="bg-sel-footer-cancel" class="bg-sel-footer-button paper secondary ripple"
tabindex="0"></button>
<button id="bg-sel-footer-done" class="bg-sel-footer-button paper primary ripple"
tabindex="-1"></button>
</div>
</dialog>

Expand Down

0 comments on commit 392be2e

Please sign in to comment.