background-color.trait

.blue {
  background-color: rgb(66, 133, 244);
}

/* https://www.google.com/design/spec/components/buttons.html#buttons-raised-buttons */
.disabledButton--dark {
  background-color: rgba(255, 255, 255, .12);
}

/*
  http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons
  Pressed: 40% #999999 or rgba(153, 153, 153, .4)
  Hover: value is derived from spec. screenshot, alpha is 20% instead of 40%
*/
.gray--hoverButton {
  background-color: rgba(153, 153, 153, .2);
}

button.trait

/* TODO: Implement light theme */
@mixin-definition raisedButton $theme {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 2px;
  display: inline-block;
  min-width: 88px;
  line-height: 36px;
  padding: 0 16px;
  user-select: none;
  transition: box-shadow .1s cubic-bezier(.39, .575, .565, 1);

  @if $theme == dark {
    trait: blue from 'background-color';
  }

  @if $theme == light {
  }

  &.isDisabled {
    @if $theme == dark {
      trait: disabledButton--dark from 'background-color';
    }
    
    @if $theme == light {
    }

    cursor: default;
  }

  &:not(.isDisabled) {
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.28);

    &:hover {
      will-change: box-shadow;
    }

    &:active {
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 4px rgba(0, 0, 0, 0.22)
    }
  }
}

css.js

import cssModulesPlugins from 'jspm-loader-css/src/plugins.js'
import Loader from 'jspm-loader-css/src/loader.js'
import postcssPlugins from './postcssPlugins.js';
import conditionals from 'postcss-conditionals';

export const { fetch, bundle } = new Loader(postcssPlugins.concat([
  conditionals(),
  cssModulesPlugins.localByDefault,
  cssModulesPlugins.extractImports,
  cssModulesPlugins.scope
]));

installButton.css

.installButton {
  @mixin raisedButton dark from './button';
}

installButtonView.js

import { LayoutView } from 'marionette';
import styles from './installButton.css';

export default LayoutView.extend({
  tagName: 'a',
  className: styles.installButton,
  template: false,

  modelEvents: {
    'change:isDisabled': '_onChangeIsDisabled',
    'change:text': '_onChangeText'
  },

  initialize() {
    this._setIsDisabledClass(this.model.get('isDisabled'));
    this._setText(this.model.get('text'));
  },

  onClick() {
    if (!this.model.get('isDisabled')) {
      this.model.install();
    }
  },

  _onChangeIsDisabled(model, isDisabled) {
    this._setIsDisabledClass(isDisabled);
  },

  _onChangeText(model, text) {
    this._setText(text);
  },

  _setIsDisabledClass(isDisabled) {
    this.el.classList.toggle(styles.isDisabled, isDisabled);
  },

  _setText(text) {
    this.el.textContent = text;
  }
});

postcssPlugins.js

import path from 'path';
import mixins from 'postcss-mixins';
import nesting from 'postcss-nesting';
import mixinFrom from 'postcss-mixin-from';
import inlineTrait from 'postcss-inline-trait';

const isBundling = typeof window === 'undefined';
const traitPath = 'common/css/traits/';

// TODO: This still feels overly messy to me. I feel like this work should be handled by normalize if I could only express it correctly.
// Resolve relative directory path and drop the perceived 'root' of the generated path.
// The root value is incorrect as it doesn't take into account System.baseURL.
// The resulting path will be fed into SystemJS for propert, full resolution.
const getResolvedFilePath = (filePath, relativeToPath) => {
  let resolvedFilePath = filePath;

  if (isBundling && filePath[0] === '.') {
    resolvedFilePath = path.resolve(relativeToPath, filePath);
    // css.source.input.from is incorrect when building. Need to convert from relative and then drop root
    // so that when giving the path to SystemJS' fetch it works as expected.
    resolvedFilePath = resolvedFilePath.replace(path.parse(resolvedFilePath).root, '');
  }

  return resolvedFilePath;
};

// Helper function given to PostCSS plugins. Used to retrieve CSS from other files without
// coupling the PostCSS plugin to a specific environment.
const getFileText = (filePath, relativeToPath) => {
  // relativeToPath references a file not a directory. Call path.dirname to strip the file.
  const resolvedFilePath = getResolvedFilePath(filePath, path.dirname(relativeToPath));
  const canonicalParent = relativeToPath.replace(/^\//, '');

  return System
    .normalize(resolvedFilePath, `${System.baseURL}${canonicalParent}`)
    .then(System.import.bind(System));
};

export default [
  inlineTrait({
    getFileText,
    traitPath
  }),
  mixinFrom({
    getFileText
  }),
  mixins,
  nesting()
  })
];