Skip to content

GitLab

T
tangled
Commit 8b3b3089 authored by Sam Sebree's avatar Sam Sebree Committed by Commit Bot
Browse files
Options

[Controls Refresh] Adds dark mode styling for the button native controls 

This change uses the -internal-light-dark-color css property to set
correct dark mode styling on the button native controls.

Bug: 929098
Change-Id: I15e68cda2a07bb89601c43ef1dc8ce696c75b1ce
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2097318Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Reviewed-by: default avatarIonel Popescu <iopopesc@microsoft.com>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Reviewed-by: default avatarElly Fong-Jones <ellyjones@chromium.org>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Commit-Queue: Sam Sebree <sasebree@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#751364}
parent 638d43e3
Hide whitespace changes
Inline Side-by-side
Showing with 74 additions and 9 deletions
third_party/blink/renderer/core/html/resources/controls_refresh.css
View file @ 8b3b3089
......@@ -48,8 +48,8 @@ input[type="reset" i],
input[type="color" i],
input[type="file" i]::-webkit-file-upload-button,
button {
background-color: #efefef;
border-color: #767676;
background-color: -internal-light-dark-color(#efefef, #4A4A4A);
border-color: -internal-light-dark-color(#767676, #C3C3C3);
}
input[type="button" i]:disabled,
......@@ -58,9 +58,9 @@ input[type="reset" i]:disabled,
input[type="color" i]:disabled,
input[type="file" i]:disabled::-webkit-file-upload-button,
button:disabled {
background-color: rgba(239, 239, 239, 0.3);
border-color: rgba(118, 118, 118, 0.3);
color: rgba(16, 16, 16, 0.3);
background-color: -internal-light-dark-color(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
border-color: -internal-light-dark-color(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3));
color: -internal-light-dark-color(rgba(16, 16, 16, 0.3), #aaaaaa);
}
input[type="password" i]::-internal-reveal {
......
third_party/blink/renderer/core/html/resources/html.css
View file @ 8b3b3089
......@@ -614,7 +614,7 @@ input[type="button" i], input[type="submit" i], input[type="reset" i], input[typ
align-items: flex-start;
text-align: center;
cursor: default;
color: ButtonText;
color: -internal-light-dark-color(ButtonText, #AAAAAA);
padding: 2px 6px 3px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
......
third_party/blink/renderer/core/layout/layout_theme.cc
View file @ 8b3b3089
......@@ -749,7 +749,7 @@ Color LayoutTheme::SystemColor(CSSValueID css_value_id,
case CSSValueID::kButtonshadow:
return 0xFF888888;
case CSSValueID::kButtontext:
return color_scheme == WebColorScheme::kDark ? 0xFFFFFFFF : 0xFF000000;
return color_scheme == WebColorScheme::kDark ? 0xFFAAAAAA : 0xFF000000;
case CSSValueID::kCaptiontext:
return color_scheme == WebColorScheme::kDark ? 0xFFFFFFFF : 0xFF000000;
case CSSValueID::kField:
......
third_party/blink/web_tests/virtual/dark-color-scheme/button/button-appearance-basic.html 0 → 100644
View file @ 8b3b3089
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<body>
<ul style="line-height:200%">
<li><button style="color-scheme: dark">button</button></li>
<li><input type="submit" style="color-scheme: dark" value="submit" /></li>
<li> <input type="reset" style="color-scheme: dark" value="reset" />
</li>
<li>
<div style="color:#aaa">
<input type="file" style="color-scheme: dark" value="file" />
</div>
</li>
<li> <button style="color-scheme: dark" disabled>disabled button</button>
</li>
<li> <input type="button" style="color-scheme: dark" value="disabled button"
disabled />
</li>
<li> <input type="submit" style="color-scheme: dark" value="disabled submit"
disabled />
</li>
<li> <input type="reset" style="color-scheme: dark" value="disabled reset"
disabled />
</li>
<li> <input type="file" style="color-scheme: dark" value="disabled file"
disabled />
</li>
</ul>
</body>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/button/button-hover-state.html 0 → 100644
View file @ 8b3b3089
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<body>
<input type="button" value="button" id="pressTarget" style="color-scheme: dark"/>
<script>
function hoverElement(element) {
eventSender.mouseMoveTo(element.offsetLeft + 1, element.offsetTop + 1);
}
runAfterLayoutAndPaint(function() {
var target = document.getElementById('pressTarget');
hoverElement(target)
}, true);
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/button/button-pressed-state.html 0 → 100644
View file @ 8b3b3089
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<body>
<input type="button" value="button" id="pressTarget" style="color-scheme: dark"/>
<script>
runAfterLayoutAndPaint(function() {
var target = document.getElementById('pressTarget');
pressElement(target)
}, true);
</script>
</body>
\ No newline at end of file
ui/native_theme/native_theme_base.cc
View file @ 8b3b3089
......@@ -1631,8 +1631,6 @@ SkColor NativeThemeBase::GetDarkModeControlColor(
case kPressedAccent:
case kDisabledAccent:
case kFill:
case kHoveredFill:
case kPressedFill:
case kDisabledFill:
case kLightenLayer:
case kProgressValue:
......@@ -1653,6 +1651,10 @@ SkColor NativeThemeBase::GetDarkModeControlColor(
return SkColorSetRGB(0xAC, 0xAC, 0xAC);
case kDisabledBorder:
return SkColorSetARGB(0x4D ,0xC3, 0xC3, 0xC3);
case kHoveredFill:
return SkColorSetRGB(0x54, 0x54, 0x54);
case kPressedFill:
return SkColorSetRGB(0x45, 0x45, 0x45);
}
NOTREACHED();
return gfx::kPlaceholderColor;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment