Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/styles/createPalette.js.flow

@@ -1,5 +1,3 @@
-// @flow
-
 import warning from 'warning';
 import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
 import indigo from '../colors/indigo';
@@ -7,93 +5,168 @@ import pink from '../colors/pink';
 import grey from '../colors/grey';
 import red from '../colors/red';
 import common from '../colors/common';
-import { getContrastRatio } from './colorManipulator';
+import { getContrastRatio, darken, lighten } from './colorManipulator';
 
 export const light = {
+  // The colors used to style the text.
   text: {
+    // The most important text.
     primary: 'rgba(0, 0, 0, 0.87)',
+    // Secondary text.
     secondary: 'rgba(0, 0, 0, 0.54)',
+    // Disabled text have even lower visual prominence.
     disabled: 'rgba(0, 0, 0, 0.38)',
+    // Text hints.
     hint: 'rgba(0, 0, 0, 0.38)',
-    icon: 'rgba(0, 0, 0, 0.38)',
-    divider: 'rgba(0, 0, 0, 0.12)',
-    lightDivider: 'rgba(0, 0, 0, 0.075)',
-  },
-  input: {
-    bottomLine: 'rgba(0, 0, 0, 0.42)',
-    helperText: 'rgba(0, 0, 0, 0.54)',
-    labelText: 'rgba(0, 0, 0, 0.54)',
-    inputText: 'rgba(0, 0, 0, 0.87)',
-    disabled: 'rgba(0, 0, 0, 0.42)',
-  },
-  action: {
-    active: 'rgba(0, 0, 0, 0.54)',
-    disabled: 'rgba(0, 0, 0, 0.26)',
   },
+  // The color used to divide different elements.
+  divider: 'rgba(0, 0, 0, 0.12)',
+  // The background colors used to style the surfaces.
+  // Consistency between these values is important.
   background: {
-    default: grey[50],
     paper: common.white,
-    appBar: grey[100],
-    contentFrame: grey[200],
+    default: grey[50],
+  },
+  // The colors used to style the action elements.
+  action: {
+    // The color of an active action like an icon button.
+    active: 'rgba(0, 0, 0, 0.54)',
+    // The color of an hovered action.
+    hover: 'rgba(0, 0, 0, 0.08)',
+    // The color of a selected action.
+    selected: 'rgba(0, 0, 0, 0.14)',
+    // The color of a disabled action.
+    disabled: 'rgba(0, 0, 0, 0.26)',
+    // The background color of a disabled action.
+    disabledBackground: 'rgba(0, 0, 0, 0.12)',
   },
 };
 
 export const dark = {
   text: {
-    primary: 'rgba(255, 255, 255, 1)',
+    primary: common.white,
     secondary: 'rgba(255, 255, 255, 0.7)',
     disabled: 'rgba(255, 255, 255, 0.5)',
     hint: 'rgba(255, 255, 255, 0.5)',
     icon: 'rgba(255, 255, 255, 0.5)',
-    divider: 'rgba(255, 255, 255, 0.12)',
-    lightDivider: 'rgba(255, 255, 255, 0.075)',
   },
-  input: {
-    bottomLine: 'rgba(255, 255, 255, 0.7)',
-    helperText: 'rgba(255, 255, 255, 0.7)',
-    labelText: 'rgba(255, 255, 255, 0.7)',
-    inputText: 'rgba(255, 255, 255, 1)',
-    disabled: 'rgba(255, 255, 255, 0.5)',
+  divider: 'rgba(255, 255, 255, 0.12)',
+  background: {
+    paper: grey[800],
+    default: '#303030',
   },
   action: {
-    active: 'rgba(255, 255, 255, 1)',
+    active: common.white,
+    hover: 'rgba(255, 255, 255, 0.1)',
+    selected: 'rgba(255, 255, 255, 0.2)',
     disabled: 'rgba(255, 255, 255, 0.3)',
-  },
-  background: {
-    default: '#303030',
-    paper: grey[800],
-    appBar: grey[900],
-    contentFrame: grey[900],
+    disabledBackground: 'rgba(255, 255, 255, 0.12)',
   },
 };
 
-function getContrastText(color) {
-  if (getContrastRatio(color, common.black) < 7) {
-    return dark.text.primary;
+function addLightOrDark(intent, direction, shade, tonalOffset) {
+  if (!intent[direction]) {
+    if (intent.hasOwnProperty(shade)) {
+      intent[direction] = intent[shade];
+    } else if (direction === 'light') {
+      intent.light = lighten(intent.main, tonalOffset);
+    } else if (direction === 'dark') {
+      intent.dark = darken(intent.main, tonalOffset * 1.5);
+    }
   }
-  return light.text.primary;
 }
 
 export default function createPalette(palette: Object) {
-  const { primary = indigo, secondary = pink, error = red, type = 'light', ...other } = palette;
-  const shades = { dark, light };
+  const {
+    primary = {
+      light: indigo[300],
+      main: indigo[500],
+      dark: indigo[700],
+    },
+    secondary = {
+      light: pink.A200,
+      main: pink.A400,
+      dark: pink.A700,
+    },
+    error = {
+      light: red[300],
+      main: red[500],
+      dark: red[700],
+    },
+    type = 'light',
+    contrastThreshold = 3,
+    tonalOffset = 0.2,
+    ...other
+  } = palette;
 
-  warning(Boolean(shades[type]), `Material-UI: the palette type \`${type}\` is not supported.`);
+  function getContrastText(background) {
+    // Use the same logic as
+    // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
+    // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
+    const contrastText =
+      getContrastRatio(background, dark.text.primary) >= contrastThreshold
+        ? dark.text.primary
+        : light.text.primary;
+
+    if (process.env.NODE_ENV !== 'production') {
+      const contrast = getContrastRatio(background, contrastText);
+      warning(
+        contrast >= 3,
+        [
+          `Material-UI: the contrast ratio of ${contrast}:1 for ${contrastText} on ${background}`,
+          'falls below the WACG recommended absolute minimum contrast ratio of 3:1.',
+          'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast',
+        ].join('\n'),
+      );
+    }
+
+    return contrastText;
+  }
+
+  function augmentColor(color, mainShade, lightShade, darkShade) {
+    if (!color.main && color[mainShade]) {
+      color.main = color[mainShade];
+    }
+    addLightOrDark(color, 'light', lightShade, tonalOffset);
+    addLightOrDark(color, 'dark', darkShade, tonalOffset);
+    if (!color.contrastText) {
+      color.contrastText = getContrastText(color.main);
+    }
+  }
+
+  augmentColor(primary, 500, 300, 700);
+  augmentColor(secondary, 'A400', 'A200', 'A700');
+  augmentColor(error, 500, 300, 700);
+
+  const types = { dark, light };
+
+  warning(types[type], `Material-UI: the palette type \`${type}\` is not supported.`);
 
   const paletteOutput = deepmerge(
     {
+      // A collection of common colors.
       common,
+      // The palette type, can be light or dark.
       type,
+      // The colors used to represent primary interface elements for a user.
       primary,
+      // The colors used to represent secondary interface elements for a user.
       secondary,
+      // The colors used to represent interface elements that the user should be made aware of.
       error,
+      // The grey colors.
       grey,
-      shades,
-      text: shades[type].text,
-      input: shades[type].input,
-      action: shades[type].action,
-      background: shades[type].background,
+      // Used by `getContrastText()` to maximize the contrast between the background and
+      // the text.
+      contrastThreshold,
+      // Take a background color and return the color of the text to maximize the contrast.
       getContrastText,
+      // Used by the functions below to shift a color's luminance by approximately
+      // two indexes within its tonal palette.
+      // E.g., shift from Red 500 to Red 300 or Red 700.
+      tonalOffset,
+      // The light and dark type object.
+      ...types[type],
     },
     other,
     {
@@ -101,32 +174,5 @@ export default function createPalette(palette: Object) {
     },
   );
 
-  // Dev warnings
-  if (process.env.NODE_ENV !== 'production') {
-    const difference = (base, compare) => {
-      if (!compare) {
-        compare = {};
-      }
-
-      return Object.keys(base).filter(hue => !compare[hue]);
-    };
-
-    const paletteColorError = (name, base, compare) => {
-      const missing = difference(base, compare);
-      warning(
-        missing.length === 0,
-        [
-          `Material-UI: ${name} color is missing the following hues: ${missing.join(',')}`,
-          'See the default colors, indigo, or pink, as exported from material-ui/colors.',
-        ].join('\n'),
-      );
-    };
-
-    paletteColorError('primary', indigo, paletteOutput.primary);
-    paletteColorError('secondary', pink, paletteOutput.secondary);
-    paletteColorError('error', red, paletteOutput.error);
-    paletteColorError('grey', red, paletteOutput.grey);
-  }
-
   return paletteOutput;
 }