box-ui-elements-mlh/es/styles/colors.stories.js

Box UI Elements

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from 'react';
import * as variables from './variables';
import mdNotes from './colors.md';
var bdlColors = {};
Object.keys(variables).forEach(function (colorKey) {
  var color = variables[colorKey];

  if (colorKey.startsWith('bdl') && !colorKey.includes('Neutral') && colorKey !== 'bdlSecondaryBlue' && !Array.isArray(color) && color.startsWith('#')) {
    var colorNameBreakDown = colorKey.match(/(bdl)|([A-Z][a-z]+)|(\d+)/g).join('-');
    var allowColorKey = colorKey.match(/[A-Z][a-z]+/g).join(' ');

    if (!bdlColors[allowColorKey]) {
      bdlColors[allowColorKey] = [];
    }

    bdlColors[allowColorKey].push([colorNameBreakDown, color, colorKey]);
  }
});
var wrapper = {
  margin: '20px'
};
var palette = {
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'wrap',
  margin: '20px 10px'
};
var swatch = {
  borderRadius: '3px',
  height: '40px',
  marginBottom: '4px',
  width: '200px'
};
var swatchContainer = {
  margin: '10px'
};
var label = {
  margin: '3px 0 5px'
};

var Swatch = function Swatch(_ref) {
  var color = _ref.color;
  return /*#__PURE__*/React.createElement("div", {
    style: swatchContainer
  }, /*#__PURE__*/React.createElement("div", {
    style: _objectSpread(_objectSpread({}, swatch), {}, {
      backgroundColor: color[1]
    })
  }), /*#__PURE__*/React.createElement("label", {
    style: label
  }, /*#__PURE__*/React.createElement("strong", null, "CSS:"), " ", color[1], /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "SCSS:"), " $", color[0].toLowerCase(), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "JS:"), " ", color[2]));
};

var SwatchSection = function SwatchSection(_ref2) {
  var swatchColor = _ref2.swatchColor;
  return /*#__PURE__*/React.createElement("div", {
    style: wrapper
  }, /*#__PURE__*/React.createElement("div", {
    style: palette
  }, bdlColors[swatchColor].map(function (color) {
    return /*#__PURE__*/React.createElement(Swatch, {
      key: color[1],
      color: color
    });
  })));
};

var allColors = function allColors() {
  return /*#__PURE__*/React.createElement("div", {
    style: wrapper
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "White"), /*#__PURE__*/React.createElement("div", {
    style: palette
  }, /*#__PURE__*/React.createElement("div", {
    style: swatchContainer
  }, /*#__PURE__*/React.createElement("div", {
    style: _objectSpread(_objectSpread({}, swatch), {}, {
      backgroundColor: '#fff'
    })
  }), /*#__PURE__*/React.createElement("label", {
    style: label
  }, /*#__PURE__*/React.createElement("strong", null, "CSS:"), " #fff", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "SCSS:"), " $white", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "JS:"), " white")))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Black"), /*#__PURE__*/React.createElement("div", {
    style: palette
  }, /*#__PURE__*/React.createElement("div", {
    style: swatchContainer
  }, /*#__PURE__*/React.createElement("div", {
    style: _objectSpread(_objectSpread({}, swatch), {}, {
      backgroundColor: '#000'
    })
  }), /*#__PURE__*/React.createElement("label", {
    style: label
  }, /*#__PURE__*/React.createElement("strong", null, "CSS:"), " #000", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "SCSS:"), " $black", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "JS:"), " black")))), Object.keys(bdlColors).map(function (key) {
    return /*#__PURE__*/React.createElement("div", {
      key: key
    }, /*#__PURE__*/React.createElement("h4", null, key), /*#__PURE__*/React.createElement("div", {
      style: palette
    }, bdlColors[key].map(function (color) {
      return /*#__PURE__*/React.createElement(Swatch, {
        key: color[1],
        color: color
      });
    })));
  }));
};

var boxBlue = function boxBlue() {
  return /*#__PURE__*/React.createElement(SwatchSection, {
    swatchColor: "Box Blue"
  });
};

var gray = function gray() {
  return /*#__PURE__*/React.createElement(SwatchSection, {
    swatchColor: "Gray"
  });
};

var darkBlue = function darkBlue() {
  return /*#__PURE__*/React.createElement(SwatchSection, {
    swatchColor: "Dark Blue"
  });
};

var lightBlue = function lightBlue() {
  return /*#__PURE__*/React.createElement(SwatchSection, {
    swatchColor: "Light Blue"
  });
};

var yellorange = function yellorange() {
  return /*#__PURE__*/React.createElement(SwatchSection, {
    swatchColor: "Yellorange"
  });
};

var yellow = function yellow() {
  return /*#__PURE__*/React.createElement(SwatchSection, {
    swatchColor: "Yellow"
  });
};

var grimace = function grimace() {
  return /*#__PURE__*/React.createElement(SwatchSection, {
    swatchColor: "Grimace"
  });
};

var greenLight = function greenLight() {
  return /*#__PURE__*/React.createElement(SwatchSection, {
    swatchColor: "Green Light"
  });
};

var purpleRain = function purpleRain() {
  return /*#__PURE__*/React.createElement(SwatchSection, {
    swatchColor: "Purple Rain"
  });
};

var watermelonRed = function watermelonRed() {
  return /*#__PURE__*/React.createElement(SwatchSection, {
    swatchColor: "Watermelon Red"
  });
};

export { allColors, boxBlue, gray, darkBlue, lightBlue, yellorange, yellow, greenLight, grimace, purpleRain, watermelonRed };
export default {
  title: 'Theming|Colors',
  parameters: {
    notes: mdNotes
  }
};
//# sourceMappingURL=colors.stories.js.map