Deprecate 'no-preference' as it is no longer supported

README.md

@@ -21,8 +21,7 @@
 Quoting from the [CSS3](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3) [level 5](https://drafts.csswg.org/mediaqueries-5)
 [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) specfication…
 
-> The [`'prefers-color-scheme'`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme) media feature
-> indicates whether the content is displayed normally, or whether colors have been inverted.
+> The [`'prefers-color-scheme'`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme) media feature reflects the user’s desire that the page use a light or dark color theme.
 
 :high_brightness: **`prefersColorScheme()`** is part of :crystal_ball: [**Magica11y**](https://magica11y.github.io),
 which provides a suite of functions to detect “user-preference” and “environment” media features.
@@ -92,12 +91,10 @@ const enableDarkTheme = (preferredColorScheme === colorSchemes.DARK);
 
 The `colorSchemes` object contains all the possible values supported by the `'prefers-color-scheme'` media query…
 
-* `colorSchemes.NO_PREFERENCE` (spec: [`'no-preference'`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-color-scheme-no-preference))
-  > Indicates that the user has made no preference known to the system.
 * `colorSchemes.LIGHT` (spec: [`'light'`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-color-scheme-light))
-  > Indicates that user has notified the system that they prefer a page that has a light theme (dark text on light background).
+  > Indicates that user has expressed the preference for a page that has a light theme (dark text on light background), or has not expressed an active preference (and thus should receive the "web default" of a light theme).
 * `colorSchemes.DARK` (spec: [`'dark'`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-color-scheme-dark))
-  > Indicates that user has notified the system that they prefer a page that has a dark theme (light text on dark background).
+  > Indicates that user has expressed the preference for a page that has a dark theme (light text on dark background).
 * `null`
   > The user’s preference could not be determined.
 

src/colorSchemes.js

@@ -1,11 +1,9 @@
 // @flow
 
 const colorSchemes: {|
-  NO_PREFERENCE: string,
   DARK: string,
   LIGHT: string,
 |} = Object.freeze({
-  NO_PREFERENCE: 'no-preference',
   DARK: 'dark',
   LIGHT: 'light',
 });

src/prefersColorScheme.js

@@ -4,22 +4,19 @@ import matchUserPreference from '@magica11y/match-user-preference';
 
 import colorSchemes, { type ColorScheme } from './colorSchemes';
 
-const contrastPreferenceValues: Array<ColorScheme> = [
-  colorSchemes.NO_PREFERENCE,
-  colorSchemes.DARK,
-  colorSchemes.LIGHT,
-];
+const colorSchemePreferenceValues: Array<ColorScheme> = [colorSchemes.DARK, colorSchemes.LIGHT];
 
 /**
  * Detects user’s color scheme preferences
  * using CSS3 Media Queries level 5 specification for `'prefers-color-scheme'`.
  *
- * @returns Either 'no-preference', 'dark', 'light' or `null`
+ * @returns Either 'dark', 'light' or `null`
  * @see https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
  */
 const prefersColorScheme = (): ?ColorScheme => {
-  const preferredColorScheme: ?ColorScheme = contrastPreferenceValues.find((contrastPreferenceValue: ColorScheme) =>
-    matchUserPreference('prefers-color-scheme', contrastPreferenceValue),
+  const preferredColorScheme: ?ColorScheme = colorSchemePreferenceValues.find(
+    (colorSchemePreferenceValue: ColorScheme) =>
+      matchUserPreference('prefers-color-scheme', colorSchemePreferenceValue),
   );
 
   if (preferredColorScheme) {

test/prefersColorScheme.test.js

@@ -2,42 +2,29 @@
 
 import mockWindowMatchMedia from '@magica11y/match-user-preference/lib/testing/mockWindowMatchMedia';
 
-import prefersColorScheme, { colorSchemes, type ColorScheme } from '../src';
+import prefersColorScheme, { colorSchemes } from '../src';
 
 describe('prefersColorScheme()', () => {
-  it('returns a color scheme preference when media-query matches', () => {
-    type TestParameter = {|
-      testInput: ColorScheme,
-      expectedOutput: ColorScheme,
-    |};
-
-    const testParameters: Array<TestParameter> = [
-      {
-        testInput: colorSchemes.NO_PREFERENCE,
-        expectedOutput: 'no-preference',
-      },
-      {
-        testInput: colorSchemes.DARK,
-        expectedOutput: 'dark',
-      },
-      {
-        testInput: colorSchemes.LIGHT,
-        expectedOutput: 'light',
-      },
-    ];
-
-    testParameters.forEach((testParameter: TestParameter) => {
+  afterEach(() => {
+    window.matchMedia.mockClear();
+  });
+
+  it.each`
+    testInput             | expectedOutput
+    ${colorSchemes.DARK}  | ${'dark'}
+    ${colorSchemes.LIGHT} | ${'light'}
+  `(
+    'returns "$expectedOutput" when color scheme preference media-query matches "$testInput"',
+    ({ testInput, expectedOutput }) => {
       window.matchMedia = jest
         .fn()
-        .mockImplementation(() => mockWindowMatchMedia(true, `(prefers-color-scheme: ${testParameter.testInput})`));
+        .mockImplementation(() => mockWindowMatchMedia(true, `(prefers-color-scheme: ${testInput})`));
 
       const preferredColorScheme = prefersColorScheme();
 
-      expect(preferredColorScheme).toEqual(testParameter.expectedOutput);
-
-      window.matchMedia.mockClear();
-    });
-  });
+      expect(preferredColorScheme).toEqual(expectedOutput);
+    },
+  );
 
   it('returns "null" when preference cannot be determined', () => {
     window.matchMedia = jest.fn().mockImplementation(() => mockWindowMatchMedia(false, 'not all'));