import React from 'react';
import { List, ListItem } from '../../components/List';
import Tooltip from '../../components/Tooltip';
import { Module, ModuleBody } from '../../components/Module';
import Item from '../../components/Item';
import { wfpColorsMeta } from '@wfp/themes';
import { hex, score } from 'wcag-contrast';
import './colours.scss';
export var ColourList = function ColourList(_ref) {
  var filter = _ref.filter;
  console.log(wfpColorsMeta);
  var filteredColors = Object.values(wfpColorsMeta).filter(function (ui_colors) {
    return ui_colors.category === filter;
  });
  var list = filteredColors.map(function (color) {
    var computedColor = getComputedStyle(document.body).getPropertyValue("--".concat(color.name));
    return /*#__PURE__*/React.createElement(Item, {
      className: "color__item",
      kind: "horizontal",
      additional: color.hex,
      title: color.variable,
      subContent: color.description,
      image: /*#__PURE__*/React.createElement("div", {
        className: "color__field",
        style: {
          backgroundColor: color.hex
        }
      })
    }, /*#__PURE__*/React.createElement("div", null, "Former name: ", color.former));
  });
  return /*#__PURE__*/React.createElement("ul", {
    className: "color--list"
  }, list);
};
export default ColourList;