Migrate Button style to PostCSS

components/button/__test__/index.spec.js

@@ -2,7 +2,7 @@ import expect from 'expect';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
-import theme from '../theme.scss';
+import theme from '../theme.css';
 import Button, { Button as RawButton } from '../Button';
 
 const getRenderedClassName = (tree, Component) => {

components/button/config.css

@@ -0,0 +1,23 @@
+:root {
+  --button-border-radius: calc(0.2 * var(--unit));
+  --button-height: calc(3.6 * var(--unit));
+  --button-toggle-font-size: calc(2 * var(--unit));
+  --button-primary-color: var(--color-primary);
+  --button-primary-color-hover: color(var(--color-primary) a(20%));
+  --button-primary-color-contrast: var(--color-primary-contrast);
+  --button-accent-color-contrast: var(--color-primary-contrast);
+  --button-accent-color-hover: color(var(--color-accent) a(20%));
+  --button-accent-color: var(--color-accent);
+  --button-neutral-color: var(--color-white);
+  --button-neutral-color-contrast: var(--palette-grey-900);
+  --button-neutral-color-hover: color(var(--palette-grey-900) a(20%));
+  --button-floating-font-size: calc(2.4 * var(--unit));
+  --button-floating-height: calc(5.6 * var(--unit));
+  --button-floating-mini-height: calc(4 * var(--unit));
+  --button-floating-mini-font-size: calc(var(--button-floating-mini-height) / 2.25);
+  --button-disabled-text-color: color(var(--color-black) a(26%));
+  --button-disabled-background-color: color(var(--color-black) a(12%));
+  --button-squared-icon-margin: calc(0.6 * var(--unit));
+  --button-squared-min-width: calc(9 * var(--unit));
+  --button-squared-padding: 0 calc(1.2 * var(--unit));
+}

components/button/index.js

@@ -4,7 +4,7 @@ import { buttonFactory } from './Button.js';
 import { iconButtonFactory } from './IconButton.js';
 import FontIcon from '../font_icon/FontIcon.js';
 import themedRippleFactory from '../ripple';
-import theme from './theme.scss';
+import theme from './theme.css';
 
 const Button = buttonFactory(themedRippleFactory({ centered: false }), FontIcon);
 const IconButton = iconButtonFactory(themedRippleFactory({centered: true}), FontIcon);

components/button/theme.css

@@ -0,0 +1,238 @@
+@import '../colors.css';
+@import '../variables.css';
+@import './config.css';
+
+.button {
+  align-content: center;
+  align-items: center;
+  border: 0;
+  cursor: pointer;
+  display: inline-block;
+  flex-direction: row;
+  font-size: calc(1.4 * var(--unit));
+  font-weight: 500;
+  height: var(--button-height);
+  justify-content: center;
+  letter-spacing: 0;
+  line-height: 1;
+  outline: none;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition:
+    box-shadow 0.2s var(--animation-curve-fast-out-linear-in),
+    background-color 0.2s var(--animation-curve-default),
+    color 0.2s var(--animation-curve-default);
+  white-space: nowrap;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  & > span:not([data-react-toolbox='tooltip']) {
+    display: inline-block;
+    line-height: var(--button-height);
+    vertical-align: middle;
+  }
+
+  & > svg {
+    display: inline-block;
+    fill: currentColor;
+    font-size: 120%;
+    height: var(--button-height);
+    vertical-align: middle;
+    width: 1em;
+  }
+
+  & > * {
+    pointer-events: none;
+  }
+
+  & > .rippleWrapper {
+    overflow: hidden;
+  }
+
+  &[disabled] {
+    color: var(--button-disabled-text-color);
+    cursor: auto;
+    pointer-events: none;
+  }
+}
+
+.squared {
+  border-radius: var(--button-border-radius);
+  min-width: var(--button-squared-min-width);
+  padding: var(--button-squared-padding);
+
+  & .icon {
+    font-size: 120%;
+    margin-right: var(--button-squared-icon-margin);
+    vertical-align: middle;
+  }
+
+  & > svg {
+    margin-right: calc(0.5 * var(--unit));
+  }
+}
+
+.solid {
+  &[disabled] {
+    background-color: var(--button-disabled-background-color);
+    box-shadow: var(--shadow-2p);
+  }
+
+  &:active {
+    box-shadow: var(--shadow-2p);
+  }
+
+  &:focus:not(:active) {
+    box-shadow:
+      0 0 8px rgba(0, 0, 0, 0.18),
+      0 8px 16px rgba(0, 0, 0, 0.36);
+  }
+}
+
+.raised {
+  box-shadow: var(--shadow-2p);
+  composes: button;
+  composes: squared;
+  composes: solid;
+}
+
+.flat {
+  background: transparent;
+  composes: button;
+  composes: squared;
+}
+
+.floating {
+  border-radius: 50%;
+  box-shadow:
+    0 1px 1.5px 0 rgba(0, 0, 0, 0.12),
+    0 1px 1px 0 rgba(0, 0, 0, 0.24);
+  composes: button;
+  composes: solid;
+  font-size: var(--button-floating-font-size);
+  height: var(--button-floating-height);
+  width: var(--button-floating-height);
+
+  & .icon {
+    line-height: var(--button-floating-height);
+  }
+
+  & > .rippleWrapper {
+    border-radius: 50%;
+  }
+
+  &.mini {
+    font-size: var(--button-floating-mini-font-size);
+    height: var(--button-floating-mini-height);
+    width: var(--button-floating-mini-height);
+
+    & .icon {
+      line-height: var(--button-floating-mini-height);
+    }
+  }
+}
+
+.toggle {
+  background: transparent;
+  border-radius: 50%;
+  composes: button;
+  width: var(--button-height);
+
+  & > .icon,
+  & svg {
+    font-size: var(--button-toggle-font-size);
+    line-height: var(--button-height);
+    vertical-align: middle;
+  }
+
+  & > .rippleWrapper {
+    border-radius: 50%;
+  }
+}
+
+.primary:not([disabled]) {
+  &.raised,
+  &.floating {
+    background: var(--button-primary-color);
+    color: var(--button-primary-color-contrast);
+  }
+
+  &.flat,
+  &.toggle {
+    color: var(--button-primary-color);
+
+    &:focus:not(:active) {
+      background: var(--button-primary-color-hover);
+    }
+  }
+
+  &.flat:hover {
+    background: var(--button-primary-color-hover);
+  }
+}
+
+.accent:not([disabled]) {
+  &.raised,
+  &.floating {
+    background: var(--button-accent-color);
+    color: var(--button-accent-color-contrast);
+  }
+
+  &.flat,
+  &.toggle {
+    color: var(--button-accent-color);
+
+    &:focus:not(:active) {
+      background: var(--button-accent-color-hover);
+    }
+  }
+
+  &.flat:hover {
+    background: var(--button-accent-color-hover);
+  }
+}
+
+.neutral:not([disabled]) {
+  &.raised,
+  &.floating {
+    background-color: var(--button-neutral-color);
+    color: var(--button-neutral-color-contrast);
+  }
+
+  &.flat,
+  &.toggle {
+    color: var(--button-neutral-color-contrast);
+    &:focus:not(:active) {
+      background: var(--button-neutral-color-hover);
+    }
+  }
+
+  &.flat:hover {
+    background: var(--button-neutral-color-hover);
+  }
+
+  &.inverse {
+    &.raised,
+    &.floating {
+      background-color: var(--button-neutral-color-contrast);
+      color: var(--button-neutral-color);
+    }
+
+    &.flat,
+    &.toggle {
+      color: var(--button-neutral-color);
+
+      &:focus:not(:active) {
+        background: var(--button-neutral-color-hover);
+      }
+    }
+
+    &.flat:hover {
+      background: var(--button-neutral-color-hover);
+    }
+  }
+}