-
Notifications
You must be signed in to change notification settings - Fork 666
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[various] Holistic review/proposal of color-modifying things #3807
Comments
I strongly support the goal of making the various media queries logically independent (e.g., having Authors can always use boolean combinations of media queries as needed, e.g. I'd recommend also splitting the relevant section of Media Queries 5 to clearly separate out the user preference media queries which ask the author to make changes ( I wonder if That would also avoid any confusion about how invert mode interacts with individual color values — it's a filter effect that applies to the full screen, although it is possible to revert the effect with opposite filters on individual elements. (I think this is how the Safari implementation works, with the "reverting invert" filters on images and videos now specified in the user style sheet. So specifying the same rule in an author stylesheet would have neither harm nor benefit. But someone who is familiar with the latest WebKit changes needs to confirm.) The special cascade order rules for |
|
Hooking this thread to provide my own feedback. Before anything, I wanted to say I generally approve the compromise solution outlined by Tab and Fantasai above:
Now, back on to the MS proposal. My main concern is with the Cascade Order section:
It's way too complex. I understand that this is how things used to work in IE, but I don't think we want to import this complexity in modern browsers. First point: My understanding is that if you want to use your own colors in Edge, you should always set
Second point: Disabling declarations based on the computed value of a property is against the normal flow of property computation, and would require a special computation pass just for Based on these two points, I propose an alternative solution: drop the entire cascade section, and replace it with the following text:
Gecko and Servo already support the Apart from those two points about the cascade order, I would like to point out again that I am in favor of the general proposal. |
I am very intrigued by @FremyCompany's suggestion re using To clarify, this would mean that turning on a high contrast mode or other forced-color effect would have the following effects:
From there, all values from the user agent and author stylesheet would cascade as normal. After cascade — and separate from whether a high contrast mode is on or not — the
I do like this approach, especially if the existing I would suggest that |
To give a bit of history, this was originally offered as an accessibility feature and implemented at the system level - in that apps couldn't opt-out, and didn't even know it was happening unless they queried the system preferences (which I guess technically gave them a way to opt-out by pre-inverting things before they draw). It was a popular feature, but the main complaint was that inverted images are wrong. So then came "smart invert", where everything was inverted except images and other media Then we discovered that people would toggle this feature on and off depending on the page content. Basically they wanted either dark or light pages, and prefer to have their choice even if that meant the colours are all weird. So that's where we are today, and led to having a system preference for light/dark. If the light/dark preference becomes widely adopted, we might not need the invert path any more. |
I have various complaints about the high-contrast stuff:
Regarding @FremyCompany's proposal of using |
@emilio Please, let's not continue to call this “high contrast”. Rossen has already pointed out that it's also used to enforce low contrast; we need to be clear when discussing it that it is not synonymous with a request for high contrast. Wrt not being able to override... the user could theoretically set @grorg Dark mode is interesting, and I imagine in some cases it might be a user's base preference and for others they might prefer enforcing it. If inversion (rather than forced colors) is the path you're choosing for enforcement, I imagine you might end up with an option for "let the page do as it likes if it supports the appropriate color mode, otherwise invert". The media queries we have can express this state in case the author wants to query it and make adjustments... except we're not clear on the method of color inversion. If the author needs to invert images, or if it can depend on the UA doing so, or if hues will be distorted or preserved, those are important distinctions we need to be able to make. In other words, the inverted-colors MQ needs to be specific enough that the expected work the author needs to do is very clear and does not need to differ depending on the UA/OS/version, only on MQ values that they can legitimately query! |
The main reason the property is still needed, is that if you are building your own component, you need to be able to set the color of the text in that component to "DisabledText" when your component is disabled otherwise it becomes inacessible. Ditto for other custom states. |
The CSS Working Group just discussed
The full IRC log of that discussion<dael> Topic: Holistic review/proposal of color-modifying things<dael> github: https://github.com//issues/3807 <dael> TabAtkins: fantasai and I have been watching with mild concern as various color modifying things have come about. Wanted to make sure they all corrdinated. Put together an issue that reviews all of it. For the most part people are doing same and that's good. Have a few suggestions that are minor <dael> TabAtkins: Dark mode- The spec Rune put together based on our plan which basically matches Safari is good except long names. Hvae suggested shorter names. preferred-color-scheme we wanted to call color-scheme. That's about it for dark mode. <fantasai> s/preferred/supported/ <dael> TabAtkins: MS high contrast prop works pretty well <dael> TabAtkins: Set of system colors we support has a few with appropriate names. Outlined those in issue with additional color names if we want to give access to authors via MQ <dael> TabAtkins: If doing forced color scheme and bg is light or dark should also trigger light or dark mode MQ. <dael> TabAtkins: You can do things like remove shadows based on it being dark or whatnot <dael> TabAtkins: Question about inverted colors, but should discuss sep <dael> TabAtkins: Main thing. Suggestion of modified names <dael> TabAtkins: [missed...audio issues] <dino> 🎁+ <dael> TabAtkins: Main thing is first this suggested shortened name for dark mode and meta tag. Only shipping impl is Safari b/c they shipped before a spec. No one else has shipped. So resolution if we change names or not. <dael> smfr: Reason we choose prefers; we need to make clear to authors this is user's preferred appearance for the page. Similar to preferred reduced motion MQ. <dael> TabAtkins: MQ is good. It's supported-color-scheme property and meta we want to rename. <fantasai> @media (prefers-color-scheme: light | dark | no-preference) <fantasai> color-scheme: only? && [light | dark | <custom-ident>]+ <fantasai> <meta name=color-scheme content="(same values)"> sets initial value of 'color-scheme' on the root <fantasai> proposal ^ <dael> dino: I was going to say MQ has been in MQ spec for a long time <dael> astearns: Given that, smfr is rename okay? <dael> AmeliaBR: It's drop 'supported' in 'supported-color-scheme' <fantasai> If we can change system colors to compute to themselves, then 'color-scheme' changes the used values of the system colors on the element. If not, 'color-scheme' on the root does so for the whole page. In either case, the affected system colors are at least the set defined for "high contrast". <dael> florian: But not for MQ? <fantasai> 'color-scheme' must also affect input & scrollbar styling. <dael> AmeliaBR: MQ keeps 'preferred' <dael> smfr: Think okay <fantasai> s/preferred/prefers/ <dael> fremy: Wondering, on the issue color-scheme is written as a singular. Is that intentional? <dael> TabAtkins: Property names are always singular so we went with that. <dael> fremy: Okay, sounds good. If you thought about it I'm fine <dael> astearns: Other discussion on if we should have 'supports' in prop name? <dael> dino: Not changing values, jsut removing prefix? <dael> fantasai: We also fixed the grammar. Current allows light or dark or only keyword. Defined to parse and not throw out additional IDs. <dael> TabAtkins: As far as we know this matches what you intended <dael> smfr: Sounds fine <fantasai> Proposal is to rename supported-color-scheme to color-scheme <dael> dino: Reading in #3807 in light/dark color scheme proposal. That's what to look at? <dael> TabAtkins: Yeah <dael> dino: I think we're okay with that <dael> smfr: Allow only to be at end? <dael> TabAtkins: Either spot because it matches general CSS. only light and light only make sense <dael> astearns: Other questions about change from supported-color-scheme to color-scheme ? <fantasai> smfr, you can't do "light only dark" <fantasai> smfr, but "only light dark" and "light dark only" are fine <dael> Rossen_: Reviewing this prop it aligns closely with some internal work we did on this in terms of wordsmithing and aligning. Thanks for taking the time TabAtkins and fantasai. It aligns with how I hoped this would mash together and make sense of all the darks and lights. +1 and thank you <dael> astearns: Prop: Add the color-scheme property with updated grammar to a spec instead of supported-color-scheme <dael> TabAtkins: Yes. Not sure if there's an existing spec that fits. Maybe colors but I'm not sure. Either Colors or a new spec <dael> AmeliaBR: THis goes into larger discussion. Debated last week where adjust for forced colors goes. Maybe in same place as new color-scheme <dael> TabAtkins: Yes. High contrast stuff should be same place as light/dark. That should be either Color or a new spec <dael> florian: Feels coherent enough to be a sep spec and feels it will move faster <dael> fantasai: Discussion was appendix to MQ until we figure out where it goes <dael> AmeliaBR: Other property these are related to is appearance. It's turning on or off default UA styles. Not sure what spec that's in <dael> florian: That's CSS UI L4. It's a bit of a stretch but only a little one <dael> TabAtkins: Can we make a color adjust spec? <dael> fantasai: Sure <fantasai> s/make/just make/ <dael> Rossen_: We can always have one more spec :) <fantasai> s/color adjust/color-adjust/ <dael> astearns: Obj to start a new Color Adjust draft? <dael> RESOLVED: start a new Color Adjust draft <dael> astearns: Who will edit? <dael> TabAtkins: fantasai and I <dael> astearns: Who else <dael> Rossen_: Rune and I should put time on this and put our edits <dael> tantek: sgtm <dael> s/tantek/Tab <dael> astearns: I'm appointing Rune and Rossen as editors, TabAtkins and fantasai can provide feedback. Let's spread out editing <dael> Rossen_: Resolutions for MQs? <dael> astearns: Let's resolve on color scheme. Obj to Add the color-scheme property with updated grammar to Color Adjust spec instead of supported-color-scheme <dael> AmeliaBR: Meta tag too? <dael> astearns: Yes <dael> dbaron: I think I said what I didn't like last time we discussed this. <dael> florian: Don't think resolved <dael> dbaron: My concern is we have a set up where all pages on web work with light form controls. Many pages break with dark. On systems where browser can choose they tend to light. <dael> dbaron: This is designing around a few recent OS changes rather than say a general system them change a user has made. It's not clear to me this is impl across OS themes. It's a step forward and backward. All pages work with light, many broken in dark. this allows pages to say work with dark, but also allows broken in light and i"m not happy about that <dael> dbaron: Want to have a page say I'm happy with a dark theme. Not happy about page overriding user choice <dael> AmeliaBR: You okay taking this up in spec discussion? Sounds like you're concerned about the only keyword interacting with list of preferences. I'm not sure that blocks actual concept <dael> dbaron: Once there's a spec it will ship. WE need to discuss before <dael> fantasai: Well it shipped w/o a spec <fantasai> already <dael> astearns: Would concern be addressed if we did grammar such that you could not exclude supporting a light scheme? <dael> dbaron: I believe so. I'm not up on semantics of current proposal. <dael> TabAtkins: Ignoring future compat with other schemes. IT's saying I'm fine with light or dark or I'm only fine with light or only fine with dark. If at the moment 'only' works on light you can say I only do light or you can say I allow dark and if user wants that give it to me <dael> astearns: That does seem more widely implementable <dael> dbaron: I think that would help <dael> dbaron: Still some edge cases where we couldn't do that <dael> florian: Neither light nor dark systems? <dael> dbaron: Or we don't know. We can just draw a control. <dael> astearns: Another way addressing this is to have an implicit auto where there is a browser default that this prop cannot opt out of. <dael> astearns: If the color scheme is set to only dark if browser only has one set of form controls it can display with those auto controls <dael> AmeliaBR: THat's clear in Rune spec. It's a matter of if browser has >1 color scheme the only is asking author pref to override user. BUt it presumes >1 color scheme <dael> TabAtkins: Per current processing if you only have 1 color scheme it selects that. Only filters to values unless the set would be empty <dael> dbaron: Nice spec says that but reality is if 99% browsers have both the 1% will have to do something b/c otherwise pages break <dael> florian: That's the situation today. If your UI is orange on pink too bad for you. <dael> dbaron: I'm concerned about Linux. Most users have light form controls. Edge case will expand from set of Linux users with dark controls to all Linux users <dael> TabAtkins: On pages that are only dark and break in a bad way with a light form control <dael> TabAtkins: Those don't exist now so it's theoretical future pages <dael> astearns: How about this. Resolve on putting color scheme in the spec with an issue noting we are concerned about backwards compat and need some way of expressing that it is okay to display things with the controls you've got <dael> florian: Prefer to start with restricted grammar. Then if we relax later it's easier. <dael> AmeliaBR: Restricted grammar is do not allow dark only. You can say light only or light and dark but you can't say an only that doesn't include light. <dael> florian: Yes <dael> fremy: I still don't...it's removing a possibility that's a legit use case. We are assumign this new feature that doesn't work well on an OS that can chnage. If this becomes a problem Linux can do what every other system does and fix it. <dael> florian: Compat problem. It's about writing a web page that says it doesn't work on existing OSs <dael> fremy: That happens all the time. You need a webcam to do a skype call. I don't like spec around limitations of one system <dael> astearns: CSS is long lived. I can see a new OS that's very concerned about its controls and it will never show a dark mode. <dael> Rossen_: Are we solving anything? Feels like we're rambling <dael> astearns: Current suggestion is we put color-scheme in with a change to grammar such that you can only express the only keyword for the light theme <dael> astearns: Heard concerns it's too restrictive. But it can relax in future <dael> fremy: If you have a toggle on website that says I want dark theme you can't have dark form controls. <dael> florian: You can ask for dakr, just not on OSs that can't do it <dael> fremy: Doesn't work. If you have a website with a toggle and user clicks I want dark theme if the OS has a light you get light <AmeliaBR> For clarification, I am not supporting the "restricted grammar". But I am very supportive of adding the property to the spec with an open issue. <dael> fantasai: We're either adding this or not. Apple has shipped. Might be able to get away with not adding only, but we can debate on another day <dael> fremy: So you can still do dark light for what I want <dael> resolved: Add the color-scheme property and meta with updated grammar and no 'only' property to Color Adjust spec instead of supported-color-scheme <dael> fantasai: MS had what they called high contrast MQ and high contrast adjust but they said same is used for low contrast so calling it high contrast is confusing <dael> fantasai: TabAtkins and I suggest calling it forced-colors <dael> fantasai: MQ for forced-color-adjust. Rather than diff keywords color scheme relying on dark mode switch so only none or active in the MQ <AmeliaBR> Strong +1 to the forced-colors name <dael> astearns: Concerned it's too abstract. contrast-adjust might be better <dael> fantasai: Not adjusting. This is fixed colors and we're forcing on you <fantasai> s/fixed colors/fixed set of colors/ <fantasai> @media (forced-colors: none | active) {...} <florian> I like forced-colors <fantasai> forced-color-adjust: auto | none <dael> Rossen_: Forced color desc well. Another name is user-color-scheme. That implies user choose that and only problem is too close to prefers-color-scheme. Forced-colors is fine <dael> astearns: Other concerns? <dael> florian: Question- earlier talked about interact with prefers-color-scheme have prefers-contrast, interact? <fantasai> "The (prefers-contrast) MQ is unrelated and unchanged." <dael> fantasai: prefers-contrast is same and nothing changes <dael> TabAtkins: It's orthogonal which is why want to get away from work contrast <dael> florian: But if forced color scheme has something dramatic you can infer prefered contrast <dael> TabAtkins: Prefers contrast is different. <dael> AmeliaBR: Important to keep naming clear. Have set of prefers MQs that tells author user expressed a preference. forced-colors is very different so it's important to have a very different name that emphasizes the override. Also really important that it doesn't make any assumptions about what hte colors are <fantasai> TabAtkins^: prefers-contrast is about letting author adjust things to match the contrast preferences. This is about you're using this set of colors, too bad. <dael> AmeliaBR: Key feature for authos is that you're not going to know what colors will be used <aja> fwiw, implementers, consider support for :has along with the meta, eg :root:has(meta) {--set-some-variables-on-root}} <dael> florian: Not opposed. Little confused why you can infer prefer high if it's dark but can't infer prefer light <dael> fantasai: What about lime green on pink. What does that mean? Is it high or low? <dael> florian: Weird contrast ^-^ <dael> fremy: Agree with florian . Should be in spec. UA can decide to do these things, but we shouldn't spec it. User is allowed to decide they want high contrast. You can put a note saying you can be smart. I like proposal of not forcing this but UA can do smart things <dael> florian: I'm sold <dael> Rossen_: Can we go back to forced-colors and not talk contrast? <dael> astearns: Is high contrast prop in a spec? <dael> Rossen_: Which? One we prop? <dael> fantasai: One you prop. There's enough explainers we can write a spec. <dael> astearns: Prop: Add a forced-colors MQ into the new draft? <dael> Rossen_: Or MQ, whichever <dael> fantasai: In MQ <dael> TabAtkins: Forced-color MQ into MQ spec <dael> astearns: Objections to adding forced-colors MQ to MQ spec <dael> RESOLVED: Add forced-colors MQ to MQ spec <dael> astearns: forced-color property in the new spec <dael> TabAtkins: Indicates on a sub tree don't force colors I know what I'm doing. <dael> Rossen_: Should go in color adjust <dael> Rossen_: Fitting to be in color adjust spec <dael> florian: Presumably the adjust thing on print goes with it? <dael> fantasai: We should move it, yeah <dael> astearns: Obj to adding forced-color-adjust property as an opt to into new spec? <dael> RESOLVED: Add forced-color-adjust property as an opt to into new spec <dael> AmeliaBR: In draft from Rossen_ and melanierichards lots of issues about interaction between author and UA will go. Is that into new spec? <dael> TabAtkins: Yes <dael> AmeliaBR: fremy had diff prop for same thing so that discussion would happen in this spec? <dael> TabAtkins: Yep <dael> astearns: We'll have continued discussion for this new spec, what goes in , and changes <dael> fantasai: Reoslve to move print-color-adjust? <dael> astearns: Obj? <dael> resolved: Move print-color-adjust property into the new spec <dael> astearns: I'll leave agenda+ on the new items |
also resolved: RESOLVED: Add the color-scheme property and meta with updated grammar and no 'only' property to Color Adjust spec instead of supported-color-scheme |
https://bugs.webkit.org/show_bug.cgi?id=197016 rdar://problem/49980259 Reviewed by Simon Fraser. Source/WebCore: Changed `supported-color-schemes` to `color-scheme` to follow the spec changes being tracked by: w3c/csswg-drafts#3807 The old `supported-color-schemes` is now an alias of `color-scheme` for compatibility. Tests: css-dark-mode/color-scheme-css-parse.html css-dark-mode/color-scheme-css.html css-dark-mode/color-scheme-meta.html css-dark-mode/color-scheme-priority.html css-dark-mode/color-scheme-scrollbar.html css-dark-mode/older-syntax/supported-color-schemes-css.html css-dark-mode/older-syntax/supported-color-schemes-meta.html css-dark-mode/older-systems/color-scheme-css.html css-dark-mode/older-systems/color-scheme-meta.html * WebCore.xcodeproj/project.pbxproj: * css/CSSComputedStyleDeclaration.cpp: (WebCore::ComputedStyleExtractor::valueForPropertyinStyle): * css/CSSProperties.json: * css/CSSValueKeywords.in: * css/StyleBuilderConverter.h: (WebCore::StyleBuilderConverter::updateColorScheme): (WebCore::StyleBuilderConverter::convertColorScheme): (WebCore::StyleBuilderConverter::updateSupportedColorSchemes): Deleted. (WebCore::StyleBuilderConverter::convertSupportedColorSchemes): Deleted. * css/StyleBuilderCustom.h: (WebCore::StyleBuilderCustom::applyValueColorScheme): (WebCore::StyleBuilderCustom::applyValueSupportedColorSchemes): Deleted. * css/StyleResolver.cpp: (WebCore::StyleResolver::applyMatchedProperties): * css/parser/CSSPropertyParser.cpp: (WebCore::consumeColorScheme): (WebCore::CSSPropertyParser::parseSingleValue): (WebCore::consumeSupportedColorSchemes): Deleted. * dom/Document.cpp: (WebCore::processColorSchemeString): (WebCore::Document::processColorScheme): (WebCore::Document::useDarkAppearance const): (WebCore::processColorSchemes): Deleted. (WebCore::Document::processSupportedColorSchemes): Deleted. * dom/Document.h: * html/HTMLMetaElement.cpp: (WebCore::HTMLMetaElement::process): * page/FrameView.cpp: (WebCore::FrameView::rendererForColorScheme const): (WebCore::FrameView::useDarkAppearance const): (WebCore::FrameView::styleColorOptions const): (WebCore::FrameView::rendererForSupportedColorSchemes const): Deleted. * page/FrameView.h: * rendering/style/RenderStyle.cpp: (WebCore::rareInheritedDataChangeRequiresRepaint): * rendering/style/RenderStyle.h: (WebCore::RenderStyle::colorScheme const): (WebCore::RenderStyle::setHasExplicitlySetColorScheme): (WebCore::RenderStyle::hasExplicitlySetColorScheme const): (WebCore::RenderStyle::setColorScheme): (WebCore::RenderStyle::initialColorScheme): (WebCore::RenderStyle::NonInheritedFlags::operator== const): (WebCore::RenderStyle::supportedColorSchemes const): Deleted. (WebCore::RenderStyle::setHasExplicitlySetSupportedColorSchemes): Deleted. (WebCore::RenderStyle::hasExplicitlySetSupportedColorSchemes const): Deleted. (WebCore::RenderStyle::setSupportedColorSchemes): Deleted. (WebCore::RenderStyle::initialSupportedColorSchemes): Deleted. * rendering/style/RenderStyleConstants.h: * rendering/style/StyleColorScheme.h: Renamed from Source/WebCore/rendering/style/StyleSupportedColorSchemes.h. (WebCore::StyleColorScheme::StyleColorScheme): (WebCore::StyleColorScheme::operator== const): (WebCore::StyleColorScheme::operator!= const): (WebCore::StyleColorScheme::isAuto const): (WebCore::StyleColorScheme::isOnly const): (WebCore::StyleColorScheme::colorScheme const): (WebCore::StyleColorScheme::add): (WebCore::StyleColorScheme::contains const): (WebCore::StyleColorScheme::setAllowsTransformations): (WebCore::StyleColorScheme::allowsTransformations const): * rendering/style/StyleRareInheritedData.cpp: (WebCore::StyleRareInheritedData::StyleRareInheritedData): (WebCore::StyleRareInheritedData::operator== const): * rendering/style/StyleRareInheritedData.h: Source/WebInspectorUI: * UserInterface/Views/Main.css: (:root): LayoutTests: * css-dark-mode/color-scheme-css-expected.txt: Renamed from LayoutTests/css-dark-mode/supported-color-schemes-css-expected.txt. * css-dark-mode/color-scheme-css.html: Renamed from LayoutTests/css-dark-mode/supported-color-schemes-css.html. * css-dark-mode/color-scheme-meta-expected.txt: Renamed from LayoutTests/css-dark-mode/supported-color-schemes-expected.txt. * css-dark-mode/color-scheme-meta.html: Renamed from LayoutTests/css-dark-mode/supported-color-schemes.html. * css-dark-mode/color-scheme-parse-expected.txt: Renamed from LayoutTests/css-dark-mode/parse-supported-color-schemes-expected.txt. * css-dark-mode/color-scheme-parse.html: Renamed from LayoutTests/css-dark-mode/parse-supported-color-schemes.html. * css-dark-mode/color-scheme-priority-expected.txt: Renamed from LayoutTests/css-dark-mode/supported-color-schemes-priority-expected.txt. * css-dark-mode/color-scheme-priority.html: Renamed from LayoutTests/css-dark-mode/supported-color-schemes-priority.html. * css-dark-mode/color-scheme-scrollbar-expected.txt: Renamed from LayoutTests/css-dark-mode/supported-color-schemes-scrollbar-expected.txt. * css-dark-mode/color-scheme-scrollbar.html: Renamed from LayoutTests/css-dark-mode/supported-color-schemes-scrollbar.html. * css-dark-mode/older-syntax/supported-color-schemes-css-expected.txt: Copied from LayoutTests/css-dark-mode/supported-color-schemes-css-expected.txt. * css-dark-mode/older-syntax/supported-color-schemes-css.html: Copied from LayoutTests/css-dark-mode/supported-color-schemes-css.html. * css-dark-mode/older-syntax/supported-color-schemes-meta-expected.txt: Copied from LayoutTests/css-dark-mode/supported-color-schemes-expected.txt. * css-dark-mode/older-syntax/supported-color-schemes-meta.html: Copied from LayoutTests/css-dark-mode/supported-color-schemes.html. * css-dark-mode/older-systems/color-scheme-css-expected.txt: Renamed from LayoutTests/css-dark-mode/older-systems/supported-color-schemes-css-expected.txt * css-dark-mode/older-systems/color-scheme-css.html: Renamed from LayoutTests/css-dark-mode/older-systems/supported-color-schemes-css.html. * css-dark-mode/older-systems/color-scheme-meta-expected.txt: Renamed from LayoutTests/css-dark-mode/older-systems/supported-color-schemes-expected.txt. * css-dark-mode/older-systems/color-scheme-meta.html: Renamed from LayoutTests/css-dark-mode/older-systems/supported-color-schemes.html. * fast/css/style-enumerate-properties.html: Updated property count. git-svn-id: http://svn.webkit.org/repository/webkit/trunk@244408 268f45cc-cd09-0410-ab3c-d52691b4dbfc
…ulled 'color-scheme' from Rune's draft https://lilles.github.io/specs/supported-color-schemes.html. Issue #3807
…rast” mode described in https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/HighContrast/explainer.md and discussion in #3807
OK, @tabatkins and I drafted up the spec text for all of this into https://drafts.csswg.org/css-color-adjust-1/ and https://drafts.csswg.org/mediaqueries-5/ based on the MSFT explainer, Apple proposal, WG discussions, and @FremyCompany's excellent comment about cascading. Please review the drafts, especially css-color-adjust. I've split out the Please file more issue as you find them, or if there's anything you brought up here that didn't get adequately considered. Closing this one out based on this weeks' telecon resolutions and subsequent edits. Thanks! |
Hmmm, I thought what we'd agreed to resolve on was:
although the resolution following that is actually recorded as:
but the draft seems to have |
Yes, from what I understood we agreed that you can only use |
@fantasai Minor editorial issue, but it seems the link to Also, re-reading the list, I am curious as to why the |
@fantasai Can we reopen this issue, or should we file new ones? |
Yup, forgot about that as I was drafting from Rune's spec. Fixed now, with an explanatory issue. |
@FremyCompany Open new issues. |
https://bugs.webkit.org/show_bug.cgi?id=197016 rdar://problem/49980259 Reviewed by Simon Fraser. Source/WebCore: Changed `supported-color-schemes` to `color-scheme` to follow the spec changes being tracked by: w3c/csswg-drafts#3807 The old `supported-color-schemes` is now an alias of `color-scheme` for compatibility. Tests: css-dark-mode/color-scheme-css-parse.html css-dark-mode/color-scheme-css.html css-dark-mode/color-scheme-meta.html css-dark-mode/color-scheme-priority.html css-dark-mode/color-scheme-scrollbar.html css-dark-mode/older-syntax/supported-color-schemes-css.html css-dark-mode/older-syntax/supported-color-schemes-meta.html css-dark-mode/older-systems/color-scheme-css.html css-dark-mode/older-systems/color-scheme-meta.html * WebCore.xcodeproj/project.pbxproj: * css/CSSComputedStyleDeclaration.cpp: (WebCore::ComputedStyleExtractor::valueForPropertyinStyle): * css/CSSProperties.json: * css/CSSValueKeywords.in: * css/StyleBuilderConverter.h: (WebCore::StyleBuilderConverter::updateColorScheme): (WebCore::StyleBuilderConverter::convertColorScheme): (WebCore::StyleBuilderConverter::updateSupportedColorSchemes): Deleted. (WebCore::StyleBuilderConverter::convertSupportedColorSchemes): Deleted. * css/StyleBuilderCustom.h: (WebCore::StyleBuilderCustom::applyValueColorScheme): (WebCore::StyleBuilderCustom::applyValueSupportedColorSchemes): Deleted. * css/StyleResolver.cpp: (WebCore::StyleResolver::applyMatchedProperties): * css/parser/CSSPropertyParser.cpp: (WebCore::consumeColorScheme): (WebCore::CSSPropertyParser::parseSingleValue): (WebCore::consumeSupportedColorSchemes): Deleted. * dom/Document.cpp: (WebCore::processColorSchemeString): (WebCore::Document::processColorScheme): (WebCore::Document::useDarkAppearance const): (WebCore::processColorSchemes): Deleted. (WebCore::Document::processSupportedColorSchemes): Deleted. * dom/Document.h: * html/HTMLMetaElement.cpp: (WebCore::HTMLMetaElement::process): * page/FrameView.cpp: (WebCore::FrameView::rendererForColorScheme const): (WebCore::FrameView::useDarkAppearance const): (WebCore::FrameView::styleColorOptions const): (WebCore::FrameView::rendererForSupportedColorSchemes const): Deleted. * page/FrameView.h: * rendering/style/RenderStyle.cpp: (WebCore::rareInheritedDataChangeRequiresRepaint): * rendering/style/RenderStyle.h: (WebCore::RenderStyle::colorScheme const): (WebCore::RenderStyle::setHasExplicitlySetColorScheme): (WebCore::RenderStyle::hasExplicitlySetColorScheme const): (WebCore::RenderStyle::setColorScheme): (WebCore::RenderStyle::initialColorScheme): (WebCore::RenderStyle::NonInheritedFlags::operator== const): (WebCore::RenderStyle::supportedColorSchemes const): Deleted. (WebCore::RenderStyle::setHasExplicitlySetSupportedColorSchemes): Deleted. (WebCore::RenderStyle::hasExplicitlySetSupportedColorSchemes const): Deleted. (WebCore::RenderStyle::setSupportedColorSchemes): Deleted. (WebCore::RenderStyle::initialSupportedColorSchemes): Deleted. * rendering/style/RenderStyleConstants.h: * rendering/style/StyleColorScheme.h: Renamed from Source/WebCore/rendering/style/StyleSupportedColorSchemes.h. (WebCore::StyleColorScheme::StyleColorScheme): (WebCore::StyleColorScheme::operator== const): (WebCore::StyleColorScheme::operator!= const): (WebCore::StyleColorScheme::isAuto const): (WebCore::StyleColorScheme::isOnly const): (WebCore::StyleColorScheme::colorScheme const): (WebCore::StyleColorScheme::add): (WebCore::StyleColorScheme::contains const): (WebCore::StyleColorScheme::setAllowsTransformations): (WebCore::StyleColorScheme::allowsTransformations const): * rendering/style/StyleRareInheritedData.cpp: (WebCore::StyleRareInheritedData::StyleRareInheritedData): (WebCore::StyleRareInheritedData::operator== const): * rendering/style/StyleRareInheritedData.h: Source/WebInspectorUI: * UserInterface/Views/Main.css: (:root): LayoutTests: * css-dark-mode/color-scheme-css-expected.txt: Renamed from LayoutTests/css-dark-mode/supported-color-schemes-css-expected.txt. * css-dark-mode/color-scheme-css.html: Renamed from LayoutTests/css-dark-mode/supported-color-schemes-css.html. * css-dark-mode/color-scheme-meta-expected.txt: Renamed from LayoutTests/css-dark-mode/supported-color-schemes-expected.txt. * css-dark-mode/color-scheme-meta.html: Renamed from LayoutTests/css-dark-mode/supported-color-schemes.html. * css-dark-mode/color-scheme-parse-expected.txt: Renamed from LayoutTests/css-dark-mode/parse-supported-color-schemes-expected.txt. * css-dark-mode/color-scheme-parse.html: Renamed from LayoutTests/css-dark-mode/parse-supported-color-schemes.html. * css-dark-mode/color-scheme-priority-expected.txt: Renamed from LayoutTests/css-dark-mode/supported-color-schemes-priority-expected.txt. * css-dark-mode/color-scheme-priority.html: Renamed from LayoutTests/css-dark-mode/supported-color-schemes-priority.html. * css-dark-mode/color-scheme-scrollbar-expected.txt: Renamed from LayoutTests/css-dark-mode/supported-color-schemes-scrollbar-expected.txt. * css-dark-mode/color-scheme-scrollbar.html: Renamed from LayoutTests/css-dark-mode/supported-color-schemes-scrollbar.html. * css-dark-mode/older-syntax/supported-color-schemes-css-expected.txt: Copied from LayoutTests/css-dark-mode/supported-color-schemes-css-expected.txt. * css-dark-mode/older-syntax/supported-color-schemes-css.html: Copied from LayoutTests/css-dark-mode/supported-color-schemes-css.html. * css-dark-mode/older-syntax/supported-color-schemes-meta-expected.txt: Copied from LayoutTests/css-dark-mode/supported-color-schemes-expected.txt. * css-dark-mode/older-syntax/supported-color-schemes-meta.html: Copied from LayoutTests/css-dark-mode/supported-color-schemes.html. * css-dark-mode/older-systems/color-scheme-css-expected.txt: Renamed from LayoutTests/css-dark-mode/older-systems/supported-color-schemes-css-expected.txt * css-dark-mode/older-systems/color-scheme-css.html: Renamed from LayoutTests/css-dark-mode/older-systems/supported-color-schemes-css.html. * css-dark-mode/older-systems/color-scheme-meta-expected.txt: Renamed from LayoutTests/css-dark-mode/older-systems/supported-color-schemes-expected.txt. * css-dark-mode/older-systems/color-scheme-meta.html: Renamed from LayoutTests/css-dark-mode/older-systems/supported-color-schemes.html. * fast/css/style-enumerate-properties.html: Updated property count. Canonical link: https://commits.webkit.org/211294@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@244408 268f45cc-cd09-0410-ab3c-d52691b4dbfc
@fantasai and I have spent the day reviewing all the various proposals regarding modifying the colors on the page (dark mode, high-contrast, etc), and have come up with an integrated set of proposals that we think address all the use-cases and interact fairly cleanly.
"High-contrast" proposal
Undeprecate some System Colors, and add a few new ones to match with MS's High Contrast feature (which isn't actually about high contrast, but rather about forcing apps/websites to use a specific, small set of user-chosen colors-- which may or may not be high contrast, and in some cases may specifically be low-contrast).
When forced-color-adjust is
auto
and the user is forcing colors, then the set of properties defined in the MS proposal have their colors overridden to use the system colors defined above. Authors are encouraged to use these system colors for properties that aren't overridden to create a coherent page design when colors are forced.If the forced background is dark (based on Lab lightness), (prefers-color-scheme: dark) must match; mutatis mutandi for light. This way, websites that support light/dark color schemes will adjust automatically to more closely match the color scheme implied by the forced colors. (This replaces the white-on-black and black-on-white values of the MSFT high-contrast media query proposal.)
The (prefers-contrast) MQ is unrelated and unchanged.
(We might further consider folding 'forced-color-adjust' into the existing 'color-adjust' property somehow, but can discuss whether and how to do that later.)
Light/Dark color scheme proposal
Processing rules as defined by Rune https://lilles.github.io/specs/supported-color-schemes.html
If we can change system colors to compute to themselves, then 'color-scheme' changes the used values of the system colors on the element. If not, 'color-scheme' on the root does so for the whole page. In either case, the affected system colors are at least the set defined for "high contrast".
'color-scheme' must also affect input & scrollbar styling.
color-filter proposal
This seems like an early attempt at ability to auto dark-mode a page, but doesn't seem particularly useful now that color-scheme/etc has reasonable consensus.
It might be useful to expose as a quick-and-dirty way for an author to dark-mode their page, but are there use-cases beyond auto-darkmode-ing? If not, maybe just switch this to a keyword property (adding to 'color-adjust'?) that can do "smarter" inversion based on luminance.
inverted-colors proposal
Supported in Safari; it's not clear whether "inverted" means all-pixels inversion, or color-inversion only, or what?
Important to distinguish these, as what authors do in response can vary based on which inversion is performed. (The
img { filter: invert(100%); }
rule in the spec's example, for instance, is only useful for all-pixel inversion; it would be harmful for a colors-only inversion.)So, we either need to specify what kind of inversion is allowed to be performed, or add more values capturing the distinctions among the types.
The text was updated successfully, but these errors were encountered: