@compositor/kit/dist/Color.js

Components for development environments, style guides, and demos

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Contrast = exports.Group = exports.Swatch = undefined;

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _getContrast = require('get-contrast');

var _getContrast2 = _interopRequireDefault(_getContrast);

var _ = require('.');

var _util = require('./util');

var _ui = require('./ui');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Swatch = function Swatch(_ref) {
  var name = _ref.name,
      value = _ref.value,
      props = (0, _objectWithoutProperties3.default)(_ref, ['name', 'value']);
  return _react2.default.createElement(
    _react2.default.Fragment,
    null,
    _react2.default.createElement(
      _ui.Box,
      (0, _extends3.default)({ p: 3 }, props),
      _react2.default.createElement(_ui.Box, { bg: value, p: [3, 4, 5] }),
      _react2.default.createElement(
        _ui.Text,
        null,
        name
      ),
      _react2.default.createElement(
        _ui.Code,
        { f: 0 },
        value
      )
    )
  );
};

exports.Swatch = Swatch;
var Group = function Group(_ref2) {
  var colors = _ref2.colors,
      prefix = _ref2.prefix,
      _ref2$lightText = _ref2.lightText,
      lightText = _ref2$lightText === undefined ? 'white' : _ref2$lightText,
      _ref2$darkText = _ref2.darkText,
      darkText = _ref2$darkText === undefined ? 'black' : _ref2$darkText,
      props = (0, _objectWithoutProperties3.default)(_ref2, ['colors', 'prefix', 'lightText', 'darkText']);
  return _react2.default.createElement(
    _ui.Flex,
    props,
    colors.map(function (c, i) {
      var name = null;
      var value = null;
      if ((typeof c === 'undefined' ? 'undefined' : (0, _typeof3.default)(c)) === 'object') {
        name = (0, _keys2.default)(c)[0];
        value = c[name];
      } else {
        name = prefix ? prefix + '.' + i : c;
        value = c;
      }

      var color = _getContrast2.default.isAccessible(value, 'white') ? lightText : darkText;

      return _react2.default.createElement(
        _ui.Box,
        { key: name, bg: value, color: color, p: 3 },
        _react2.default.createElement(
          _ui.Text,
          null,
          name
        )
      );
    })
  );
};

exports.Group = Group;
var Contrast = exports.Contrast = function Contrast(_ref3) {
  var color = _ref3.color,
      bg = _ref3.bg,
      children = _ref3.children;
  return _react2.default.createElement(
    _ui.Box,
    { p: [3, 4, 5], bg: bg, color: color },
    _react2.default.createElement(
      _ui.Text,
      { f: [5, 6, 128], fontWeight: 'bold' },
      'Aa'
    ),
    _react2.default.createElement(
      _ui.Flex,
      { alignItems: 'baseline' },
      _react2.default.createElement(
        _ui.Code,
        { f: 6 },
        _getContrast2.default.ratio(bg, color).toFixed(2)
      ),
      _react2.default.createElement(
        _ui.Text,
        { f: 4, fontWeight: 'bold' },
        _getContrast2.default.score(bg, color)
      )
    ),
    children
  );
};

var Color = function Color(_ref4) {
  var colors = _ref4.colors;

  var colorsObj = (0, _util.flatten)(colors);
  var colorsArr = (0, _keys2.default)(colorsObj).reduce(function (acc, key) {
    return acc.concat([{ key: key, name: key, value: colorsObj[key] }]);
  }, []);

  return _react2.default.createElement(_ui.Flex, {
    flexWrap: 'wrap',
    children: colorsArr.map(function (color) {
      return _react2.default.createElement(Swatch, (0, _extends3.default)({
        width: [1 / 2, 1 / 3, 1 / 5]
      }, color));
    })
  });
};

Color.Group = Group;
Color.Swatch = Swatch;
Color.Contrast = Contrast;

exports.default = Color;