Material-ui: Using fullWhite as primary theme color causes AppBar error

[mickykebe]

Problem description

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {teal700, fullWhite} from 'material-ui/styles/colors';
import createMuiTheme from 'material-ui/styles/theme';
import createPalette from 'material-ui/styles/palette';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

const palette = createPalette({
  primary: fullWhite,
  accent: teal700,
});
const theme = createMuiTheme({ palette });
ReactDOM.render(
  <MuiThemeProvider theme={theme}>
    <App />
  </MuiThemeProvider>,
  document.getElementById('root')
);

I have an AppBar component in the App component which spits out the error.

Uncaught TypeError: Cannot read property 'charAt' of undefined
at decomposeColor (bundle.js:37946)
at getLuminance (bundle.js:37987)
at getContrastRatio (bundle.js:37970)
at Object.getContrastText (bundle.js:37800)
at bundle.js:33923
at createRules (bundle.js:36467)
at renderNew (bundle.js:36198)
at Object.render (bundle.js:36158)
at AppBar.render (bundle.js:33952)
at bundle.js:26963`

Versions

• Material-UI: 1.0.0-alpha.11
• React: 15.5.4
• Browser: Chrome 57

[kgregory]

This is going to happen with any of the following colors, because the primary color is often addressed as theme.primary[500] and the colors below are not configured as objects:

export const black = '#000000';
export const white = '#ffffff';

export const transparent = 'rgba(0, 0, 0, 0)';
export const fullBlack = 'rgba(0, 0, 0, 1)';
export const darkBlack = 'rgba(0, 0, 0, 0.87)';
export const lightBlack = 'rgba(0, 0, 0, 0.54)';
export const minBlack = 'rgba(0, 0, 0, 0.26)';
export const faintBlack = 'rgba(0, 0, 0, 0.12)';
export const fullWhite = 'rgba(255, 255, 255, 1)';
export const darkWhite = 'rgba(255, 255, 255, 0.87)';
export const lightWhite = 'rgba(255, 255, 255, 0.54)';

Perhaps this could be made clearer if some separation was put between the colors above and the palette color objects defined in colors.js? Maybe something like this:

export palette as {
  red,
  pink,
  purple,
  deepPurple,
  indigo,
  blue,
  lightBlue,
  cyan,
  teal,
  green,
  lightGreen,
  lime,
  yellow,
  amber,
  orange,
  deepOrange,
  brown,
  grey,
  blueGrey
}

Any thoughts, @oliviertassinari?

That discussion is tangential to the main issue, which is using a non-palette color for the primary color of your theme.

[oliviertassinari]

What about requesting the primary color to match a specific shape and throwing if not respected?

[oliviertassinari]

@mickykebe Thanks for raising the issue.