Make system-color a proper data type page

[wbamberg]

This PR makes "System color kewords" into a proper reference page for the <system-color> type, as discussed in #15540 (comment) and following comments.

This will also fix the <system-color> link in the formal syntax for the <color> data type: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#formal_syntax.

This PR depends on mdn/browser-compat-data#17924.

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/named-color
• /en-US/docs/Web/CSS/system-color

Flaws (2)

URL: /en-US/docs/Web/CSS/named-color
Title: <named-color>
Flaw count: 1

• bad_bcd_queries:
  • No BCD data for query: css.types.color.named-color

---

URL: /en-US/docs/Web/CSS/system-color
Title: <system-color>
Flaw count: 1

• bad_bcd_queries:
  • No BCD data for query: css.types.color.system-color

External URLs (1)

URL: /en-US/docs/Web/CSS/system-color
Title: <system-color>

• https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/ (1 time) (Note! This may be a new URL 👀)

(this comment was updated 2022-10-03 19:42:02.341463)

[hamishwillee]

This is all good except it would be good to provide links/hints on how to set forced color mode - even better (if possible) would be to make pressing the button force the mode.

Otherwise not much point this being a live example.

I'm going to merge anyway, because this is excellent.

[wbamberg]

I copied the example from the forced-colors page: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors#examples.

I think you can't make pressing the button enable it, it's an OS setting that's not available to Web pages. The only concrete example I know of is Windows high contrast mode: https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/ . I just added a reference to that, it's helpful I think.

[hamishwillee]

Works for me/don't have any better ideas :-)

[hamishwillee]

Good for me, modulo comment. Did you want to wait on the BCD to go in first before merging @wbamberg ?

[wbamberg]

Good for me, modulo comment. Did you want to wait on the BCD to go in first before merging @wbamberg ?

Thanks Hamish. The BCD PR just merged but I'm going to wait for a couple of days for it to percolate through to the page, and hope noone makes any merge conflicts in the meantime: 🤞 .

[dipikabh]

Just tiny nits

[dipikabh]

Suggested change

	In this example we have a button that normally gets its contrast using the {{cssxref("box-shadow")}} property. In forced colors mode, `box-shadow` is forced to `none`, so the example uses the `forced-colors` media feature to ensure there is a border of the appropriate color (`ButtonBorder` in this case).
	The button in this example gets its contrast using the {{cssxref("box-shadow")}} property. In the `forced-colors` mode, `box-shadow` is forced to `none`. The example uses the `forced-colors` media feature to ensure that there is a border of the appropriate color (`ButtonBorder` in this case).

[wbamberg]

forced-colors (with code styling and a hyphen) is the name of the media feature, but "forced colors mode" is the name of the abstract feature. So I think "In forced colors mode" is correct here.

[dipikabh]

Thank you! 👍