LibWeb/CSS: Implement the color-scheme CSS property

This commit is contained in:
Gingeh 2025-01-02 12:59:09 +11:00 committed by Sam Atkins
commit ce5cd012b9
Notes: github-actions[bot] 2025-01-08 11:19:41 +00:00
36 changed files with 618 additions and 370 deletions

View file

@ -5,7 +5,6 @@
html {
font-family: serif;
color: CanvasText;
}
body {
@ -54,15 +53,12 @@ button, input[type=submit], input[type=button], input[type=reset], select, ::fil
border: 1px solid ButtonBorder;
color: ButtonText;
cursor: default;
/* FIXME: For some reason this filter is required for the :hover style to work */
filter: contrast(100%);
}
button:disabled, input[type=submit]:disabled, input[type=button]:disabled, input[type=reset]:disabled, select:disabled {
/* FIXME: There isn't a <system-color> keyword for this, so this is a slightly lightened
* version of our light ButtonFace color. Once we support `color-scheme: dark`
* we'll need to use a different color for that.
*/
background-color: #e5e0d7;
color: GrayText;
filter: contrast(70%);
}
input[type=image] {
@ -70,11 +66,7 @@ input[type=image] {
}
button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, select:hover {
/* FIXME: There isn't a <system-color> keyword for this, so this is a slightly lightened
* version of our light ButtonFace color. Once we support `color-scheme: dark`
* we'll need to use a different color for that.
*/
background-color: #e5e0d7;
filter: contrast(70%);
}
option {
@ -95,7 +87,7 @@ input[type=range]::-webkit-slider-runnable-track {
height: 4px;
width: 100%;
margin-top: 6px;
background-color: Background;
background-color: AccentColorText;
border: 1px solid rgba(0, 0, 0, 0.5);
}
input[type=range]::-webkit-slider-thumb {
@ -143,7 +135,7 @@ progress::-webkit-progress-bar, progress::-webkit-progress-value {
height: 100%;
}
progress::-webkit-progress-bar {
background-color: Background;
background-color: AccentColorText;
border: 1px solid rgba(0, 0, 0, 0.5);
}
@ -862,6 +854,8 @@ progress {
/* https://github.com/whatwg/html/pull/9546
*/
input[type=checkbox][switch] {
/* FIXME: Workaround until we can properly style dark switches */
color-scheme: light;
appearance: none;
height: 1em;
width: 1.8em;