@grafana/ui/dist/cjs/components/ColorPicker/NamedColorsPalette.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var ColorSwatch = require('./ColorSwatch.cjs');
var NamedColorsGroup = require('./NamedColorsGroup.cjs');

"use strict";
const NamedColorsPalette = ({ color, onChange }) => {
  const theme = ThemeContext.useTheme2();
  const styles = ThemeContext.useStyles2(getStyles);
  const swatches = [];
  for (const hue of theme.visualization.hues) {
    swatches.push(/* @__PURE__ */ jsxRuntime.jsx(NamedColorsGroup, { selectedColor: color, hue, onColorSelect: onChange }, hue.name));
  }
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.swatches, children: swatches }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.extraColors, children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        ColorSwatch.ColorSwatch,
        {
          isSelected: color === "transparent",
          color: "rgba(0,0,0,0)",
          label: i18n.t("grafana-ui.named-colors-palette.transparent-swatch", "Transparent"),
          onClick: () => onChange("transparent")
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx(
        ColorSwatch.ColorSwatch,
        {
          isSelected: color === "text",
          color: theme.colors.text.primary,
          label: i18n.t("grafana-ui.named-colors-palette.text-color-swatch", "Text color"),
          onClick: () => onChange("text")
        }
      )
    ] })
  ] });
};
const getStyles = (theme) => {
  return {
    container: css.css({
      display: "flex",
      flexDirection: "column"
    }),
    extraColors: css.css({
      display: "flex",
      alignItems: "center",
      justifyContent: "space-around",
      gap: theme.spacing(1),
      padding: theme.spacing(1, 0)
    }),
    swatches: css.css({
      display: "grid",
      flexGrow: 1
    })
  };
};

exports.NamedColorsPalette = NamedColorsPalette;
//# sourceMappingURL=NamedColorsPalette.cjs.map