<commit_before>let React = require('react');
let { ClearFix, Mixins, Styles, Utils } = require('material-ui');

let { ColorManipulator } = Utils;
let { StyleResizable, StylePropable } = Mixins;
let { Colors, Typography } = Styles;


let ColorsPage = React.createClass({

  mixins: [StyleResizable, StylePropable],

  getStyles() {
    let styles = {
      root: {
        //null
      },
      name: {
        display: 'block',
        marginBottom: '60px'
      },
      hex: {
        float: 'right'
      },
      colorGroup: {
        float: 'left',
        padding: '16px 0',
        display: 'block',
        margin: '0'
      },
      headline: {
        //mui-font-style-headline
        fontSize: '24px',
        lineHeight: '32px',
        paddingTop: '16px',
        marginBottom: '12px',
        letterSpacing: '0',
        fontWeight: Typography.fontWeightNormal,
        color: Typography.textDarkBlack
      },
      colorGroupWhenSmall: {
        width: '50%'
      },
      colorGroupWhenMedium: {
        width: '33%'
      },
      colorGroupWhenLarge: {
        width: '25%'
      }
    };

    if (this.isDeviceSize(StyleResizable.statics.Sizes.LARGE)) {
      styles.colorGroup = this.mergeStyles(styles.colorGroup, styles.colorGroupWhenLarge);
    } else if (this.isDeviceSize(StyleResizable.statics.Sizes.MEDIUM)) {
      styles.colorGroup = this.mergeStyles(styles.colorGroup, styles.colorGroupWhenMedium);
    } else {
      styles.colorGroup = this.mergeStyles(styles.colorGroup, styles.colorGroupWhenSmall);
    }

    return styles;
  },

  render() {
    let mainColors = [
        'Red', 'Pink', 'Purple', 'Deep Purple', 'Indigo', 'Blue', 'Light Blue',
        'Cyan', 'Teal', 'Green', 'Light Green', 'Lime', 'Yellow', 'Amber', 'Orange', 'Deep Orange'
      ],
      neutralColors = ['Brown', 'Blue Grey', 'Grey'],
      colorGroups = [],
      neutralGroups = [];

    mainColors.forEach((color) => {
      colorGroups.push(this._getColorGroup(color, true));
    }, this);

    neutralColors.forEach((color) => {
      neutralGroups.push(this._getColorGroup(color, false));
    }, this);

    let googleLink = "https://www.google.com/design/spec/style/color.html#color-ui-color-palette";
    let githubLink = "https://github.com/callemall/material-ui/blob/css-in-js/src/js/styles/colors.js";

    return (
      <div>
        <h2 style={this.getStyles().headline}>UI Color Palette</h2>
        <p>
          We&#39;ve created javascript variables for every color used in
          the <a href={googleLink}>UI Color Palette</a>. They are stored
          in <a href={githubLink}>styles/colors.js</a>.
        </p>

        <ClearFix>
          {colorGroups}

          <div>
            {neutralGroups}
          </div>
        </ClearFix>
      </div>
    );
  },
<commit_msg>Fix broken link<commit_after>let React = require('react');
let { ClearFix, Mixins, Styles, Utils } = require('material-ui');

let { ColorManipulator } = Utils;
let { StyleResizable, StylePropable } = Mixins;
let { Colors, Typography } = Styles;


let ColorsPage = React.createClass({

  mixins: [StyleResizable, StylePropable],

  getStyles() {
    let styles = {
      root: {
        //null
      },
      name: {
        display: 'block',
        marginBottom: '60px'
      },
      hex: {
        float: 'right'
      },
      colorGroup: {
        float: 'left',
        padding: '16px 0',
        display: 'block',
        margin: '0'
      },
      headline: {
        //mui-font-style-headline
        fontSize: '24px',
        lineHeight: '32px',
        paddingTop: '16px',
        marginBottom: '12px',
        letterSpacing: '0',
        fontWeight: Typography.fontWeightNormal,
        color: Typography.textDarkBlack
      },
      colorGroupWhenSmall: {
        width: '50%'
      },
      colorGroupWhenMedium: {
        width: '33%'
      },
      colorGroupWhenLarge: {
        width: '25%'
      }
    };

    if (this.isDeviceSize(StyleResizable.statics.Sizes.LARGE)) {
      styles.colorGroup = this.mergeStyles(styles.colorGroup, styles.colorGroupWhenLarge);
    } else if (this.isDeviceSize(StyleResizable.statics.Sizes.MEDIUM)) {
      styles.colorGroup = this.mergeStyles(styles.colorGroup, styles.colorGroupWhenMedium);
    } else {
      styles.colorGroup = this.mergeStyles(styles.colorGroup, styles.colorGroupWhenSmall);
    }

    return styles;
  },

  render() {
    let mainColors = [
        'Red', 'Pink', 'Purple', 'Deep Purple', 'Indigo', 'Blue', 'Light Blue',
        'Cyan', 'Teal', 'Green', 'Light Green', 'Lime', 'Yellow', 'Amber', 'Orange', 'Deep Orange'
      ],
      neutralColors = ['Brown', 'Blue Grey', 'Grey'],
      colorGroups = [],
      neutralGroups = [];

    mainColors.forEach((color) => {
      colorGroups.push(this._getColorGroup(color, true));
    }, this);

    neutralColors.forEach((color) => {
      neutralGroups.push(this._getColorGroup(color, false));
    }, this);

    let googleLink = "https://www.google.com/design/spec/style/color.html#color-ui-color-palette";
    let githubLink = "https://github.com/callemall/material-ui/blob/master/src/styles/colors.js";

    return (
      <div>
        <h2 style={this.getStyles().headline}>UI Color Palette</h2>
        <p>
          We&#39;ve created javascript variables for every color used in
          the <a href={googleLink}>UI Color Palette</a>. They are stored
          in <a href={githubLink}>styles/colors.js</a>.
        </p>

        <ClearFix>
          {colorGroups}

          <div>
            {neutralGroups}
          </div>
        </ClearFix>
      </div>
    );
  },

{'fraction_non_alphanumeric': 0.14807555238774056, 'fraction_numerical': 0.008909479686386316, 'mean_word_length': 2.337098692033294, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 35, 'https://': 4, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5391649', 'n_tokens_mistral': 1819, 'n_tokens_neox': 1778, 'n_words': 342}