Adobe App-styled button as a React Component

_colors.scss

// Adobe Colors
$bg-inset:          #1D1D1D !default;
$bg:                #232323 !default;
$bg-element:        #303030 !default;
$bg-element-selected: #474747 !default;
$fg:                #818181 !default;
$fg-primary:        #B9B9B9 !default;
$active:            #2D8CEB !default;

AdobeButton.js

import React, { Component } from 'react';

import './AdobeButton.css';

/**
 * Adobe-Style button
 */
class AdobeButton extends Component {
  render() {
    const { text, onClick } = this.props;

    if (typeof onClicked !== 'function') {
      console.warn(`AdobeButton with "${text}" has no onClick-prop!`);
    }

    return (
      <div
        className="adobe-button"
        onClick={onClick}
      >
        {text}
      </div>
    );
  }
}

export default AdobeButton;

AdobeButton.scss

@import "colors";

.adobe-button {
  display: inline-block;
  user-select: none;
  cursor: pointer;

  height: 20pt;
  line-height: 20pt;
  padding: 0 8pt 0 8pt;

  font-size: 12pt;
  color: $fg;
  background-color: $bg;
  border: $fg 1pt solid;
  border-radius: 20pt;

  transition: all 0.2s ease;

  &:hover {
    background-color: $fg;
    color: $bg;
  }
}