GitXplorerGitXplorer
l

Fluent-HC-demo

public
0 stars
0 forks
0 issues

Commits

List of commits on branch master.
Unverified
ad2116e9915c44dbc8b66abce958b051d83d2226

add example of forced-colod-adjust: none fail

lling1726 committed 3 years ago
Unverified
0a9a24951c630960d5a8c2acc72d83594f0b5ed7

fix copy

lling1726 committed 3 years ago
Unverified
78f2d130a4ca7ff531538f8e3ccdaf427309e95e

hoist system colors copy

lling1726 committed 3 years ago
Unverified
cb18b4fd7d5b2b815625e86de922bc7d2f4b28a1

copy system colors theme postinstall

lling1726 committed 3 years ago
Unverified
5e1b5f0abe1b790d5256e045e8d18595437ef933

update README

lling1726 committed 3 years ago
Unverified
c241bef8bdec6262fbfdfad8d7ca24356d66951d

update css

lling1726 committed 3 years ago

README

The README file for this repository.

Fluent UI v0 v9 High contrast test bench

This project was bootstrapped with Create React App.

Usage

In the project directory, you run:

yarn

  • Installs dependencies
  • Applies Northstar system colour theme patch
  • Copies system colours theme to node_modules for Northstar

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Some learnings

Sometimes forced-color-adjust: none is still necessary

There can be bugs with the rendering of forced colours in windows high contrast mode. One quite infuriating bug is that background-color and color don't work together when explicitly setting the system colours.

We also can't assume there will never be rendering bugs with forced colours in different browser or OS versions so it's important to remember, that it can and should be used in certain scenarios.

Media queries still affect forced-color-adjust: none

Once a document/element styled to ignored forced-colors, media queries that explicitly set forced colours will still affect that style. So if you want to completely avoid using system colours, remember to remove the media queries.