@greensight/gds/autokits/esm/ColorsAutokit.js

Greensight Design System

import { useRef } from 'react';
import { L as Layout } from './index-BUJaA6RV.js';
import { t as typography, s as scale, b as baseTheme } from './typography-BmZOWRkU.js';
import { u as useAutokitsTheme, j as jsx, _ as _objectSpread2, c as css } from './useTheme-DPU-Td50.js';
import { c as copyToClipboard, T as Tooltip } from './copyToClipboard-C7ZbYqhg.js';
import 'react-dom';
import './style-inject.es-tgCJW-Cu.js';

var Color = function Color(_ref) {
  var name = _ref.name,
    value = _ref.value;
  var colors = baseTheme.colors;
  var buttonRef = useRef(null);
  var markCss = _objectSpread2({
    backgroundColor: colors.white,
    color: colors.grey0,
    padding: scale(1),
    borderRadius: '4px 4px 4px 0px'
  }, typography('smallBold'));
  return jsx(Tooltip, {
    content: "Variable name is copied to the clipboard"
  }, jsx("button", {
    ref: buttonRef,
    type: "button",
    onClick: function onClick() {
      return copyToClipboard("colors.".concat(name), buttonRef);
    },
    css: /*#__PURE__*/css({
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-end',
      alignItems: 'flex-start',
      width: '100%',
      height: scale(28),
      padding: scale(1),
      backgroundColor: value,
      borderRadius: '24px 24px 24px 0px',
      transition: 'box-shadow ease 300ms',
      ':focus-visible': {
        outline: 'none',
        boxShadow: "0 0 0 2px ".concat(colors.grey0)
      }
    }, process.env.NODE_ENV === "production" ? "" : ";label:Color;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQ2dCIiwiZmlsZSI6IkNvbG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VSZWYgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IFRvb2x0aXAgfSBmcm9tICcuLi8uLi8uLi9oZWxwZXJzL2NvbW1vbi9Ub29sdGlwJztcbmltcG9ydCB7IGNvcHlUb0NsaXBib2FyZCB9IGZyb20gJy4uLy4uLy4uL2hlbHBlcnMvY29tbW9uL2NvcHlUb0NsaXBib2FyZCc7XG5pbXBvcnQgeyB0eXBvZ3JhcGh5IH0gZnJvbSAnLi4vLi4vLi4vaGVscGVycy9lbW90aW9uL3R5cG9ncmFwaHknO1xuaW1wb3J0IHsgc2NhbGUgfSBmcm9tICcuLi8uLi8uLi91dGlscy9jb21tb24vc2NhbGUnO1xuaW1wb3J0IHsgYmFzZVRoZW1lIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMvZW1vdGlvbi9iYXNlVGhlbWUnO1xuXG5leHBvcnQgaW50ZXJmYWNlIENvbG9yUHJvcHMge1xuICAgIC8qKiBDb2xvciB2YXJpYWJsZSBuYW1lLiAqL1xuICAgIG5hbWU6IHN0cmluZztcbiAgICAvKiogQ29sb3IgdmFsdWUuICovXG4gICAgdmFsdWU6IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IENvbG9yID0gKHsgbmFtZSwgdmFsdWUgfTogQ29sb3JQcm9wcykgPT4ge1xuICAgIGNvbnN0IHsgY29sb3JzIH0gPSBiYXNlVGhlbWU7XG4gICAgY29uc3QgYnV0dG9uUmVmID0gdXNlUmVmPEhUTUxCdXR0b25FbGVtZW50PihudWxsKTtcblxuICAgIGNvbnN0IG1hcmtDc3MgPSB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogY29sb3JzLndoaXRlLFxuICAgICAgICBjb2xvcjogY29sb3JzLmdyZXkwLFxuICAgICAgICBwYWRkaW5nOiBzY2FsZSgxKSxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiAnNHB4IDRweCA0cHggMHB4JyxcbiAgICAgICAgLi4udHlwb2dyYXBoeSgnc21hbGxCb2xkJyksXG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxUb29sdGlwIGNvbnRlbnQ9XCJWYXJpYWJsZSBuYW1lIGlzIGNvcGllZCB0byB0aGUgY2xpcGJvYXJkXCI+XG4gICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICAgcmVmPXtidXR0b25SZWZ9XG4gICAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4gY29weVRvQ2xpcGJvYXJkKGBjb2xvcnMuJHtuYW1lfWAsIGJ1dHRvblJlZil9XG4gICAgICAgICAgICAgICAgY3NzPXt7XG4gICAgICAgICAgICAgICAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgICAgICAgICAgICAgICAgZmxleERpcmVjdGlvbjogJ2NvbHVtbicsXG4gICAgICAgICAgICAgICAgICAgIGp1c3RpZnlDb250ZW50OiAnZmxleC1lbmQnLFxuICAgICAgICAgICAgICAgICAgICBhbGlnbkl0ZW1zOiAnZmxleC1zdGFydCcsXG4gICAgICAgICAgICAgICAgICAgIHdpZHRoOiAnMTAwJScsXG4gICAgICAgICAgICAgICAgICAgIGhlaWdodDogc2NhbGUoMjgpLFxuICAgICAgICAgICAgICAgICAgICBwYWRkaW5nOiBzY2FsZSgxKSxcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB2YWx1ZSxcbiAgICAgICAgICAgICAgICAgICAgYm9yZGVyUmFkaXVzOiAnMjRweCAyNHB4IDI0cHggMHB4JyxcbiAgICAgICAgICAgICAgICAgICAgdHJhbnNpdGlvbjogJ2JveC1zaGFkb3cgZWFzZSAzMDBtcycsXG4gICAgICAgICAgICAgICAgICAgICc6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICAgICAgICAgICAgICAgICAgICAgIG91dGxpbmU6ICdub25lJyxcbiAgICAgICAgICAgICAgICAgICAgICAgIGJveFNoYWRvdzogYDAgMCAwIDJweCAke2NvbG9ycy5ncmV5MH1gLFxuICAgICAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPHNwYW4gY3NzPXt7IC4uLm1hcmtDc3MsIG1hcmdpbkJvdHRvbTogc2NhbGUoMSkgfX0+e3ZhbHVlfTwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8c3BhbiBjc3M9e21hcmtDc3N9PntuYW1lfTwvc3Bhbj5cbiAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8L1Rvb2x0aXA+XG4gICAgKTtcbn07XG4iXX0= */")
  }, jsx("span", {
    css: /*#__PURE__*/css(_objectSpread2(_objectSpread2({}, markCss), {}, {
      marginBottom: scale(1)
    }), process.env.NODE_ENV === "production" ? "" : ";label:Color;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRHNCIiwiZmlsZSI6IkNvbG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VSZWYgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IFRvb2x0aXAgfSBmcm9tICcuLi8uLi8uLi9oZWxwZXJzL2NvbW1vbi9Ub29sdGlwJztcbmltcG9ydCB7IGNvcHlUb0NsaXBib2FyZCB9IGZyb20gJy4uLy4uLy4uL2hlbHBlcnMvY29tbW9uL2NvcHlUb0NsaXBib2FyZCc7XG5pbXBvcnQgeyB0eXBvZ3JhcGh5IH0gZnJvbSAnLi4vLi4vLi4vaGVscGVycy9lbW90aW9uL3R5cG9ncmFwaHknO1xuaW1wb3J0IHsgc2NhbGUgfSBmcm9tICcuLi8uLi8uLi91dGlscy9jb21tb24vc2NhbGUnO1xuaW1wb3J0IHsgYmFzZVRoZW1lIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMvZW1vdGlvbi9iYXNlVGhlbWUnO1xuXG5leHBvcnQgaW50ZXJmYWNlIENvbG9yUHJvcHMge1xuICAgIC8qKiBDb2xvciB2YXJpYWJsZSBuYW1lLiAqL1xuICAgIG5hbWU6IHN0cmluZztcbiAgICAvKiogQ29sb3IgdmFsdWUuICovXG4gICAgdmFsdWU6IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IENvbG9yID0gKHsgbmFtZSwgdmFsdWUgfTogQ29sb3JQcm9wcykgPT4ge1xuICAgIGNvbnN0IHsgY29sb3JzIH0gPSBiYXNlVGhlbWU7XG4gICAgY29uc3QgYnV0dG9uUmVmID0gdXNlUmVmPEhUTUxCdXR0b25FbGVtZW50PihudWxsKTtcblxuICAgIGNvbnN0IG1hcmtDc3MgPSB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogY29sb3JzLndoaXRlLFxuICAgICAgICBjb2xvcjogY29sb3JzLmdyZXkwLFxuICAgICAgICBwYWRkaW5nOiBzY2FsZSgxKSxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiAnNHB4IDRweCA0cHggMHB4JyxcbiAgICAgICAgLi4udHlwb2dyYXBoeSgnc21hbGxCb2xkJyksXG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxUb29sdGlwIGNvbnRlbnQ9XCJWYXJpYWJsZSBuYW1lIGlzIGNvcGllZCB0byB0aGUgY2xpcGJvYXJkXCI+XG4gICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICAgcmVmPXtidXR0b25SZWZ9XG4gICAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4gY29weVRvQ2xpcGJvYXJkKGBjb2xvcnMuJHtuYW1lfWAsIGJ1dHRvblJlZil9XG4gICAgICAgICAgICAgICAgY3NzPXt7XG4gICAgICAgICAgICAgICAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgICAgICAgICAgICAgICAgZmxleERpcmVjdGlvbjogJ2NvbHVtbicsXG4gICAgICAgICAgICAgICAgICAgIGp1c3RpZnlDb250ZW50OiAnZmxleC1lbmQnLFxuICAgICAgICAgICAgICAgICAgICBhbGlnbkl0ZW1zOiAnZmxleC1zdGFydCcsXG4gICAgICAgICAgICAgICAgICAgIHdpZHRoOiAnMTAwJScsXG4gICAgICAgICAgICAgICAgICAgIGhlaWdodDogc2NhbGUoMjgpLFxuICAgICAgICAgICAgICAgICAgICBwYWRkaW5nOiBzY2FsZSgxKSxcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB2YWx1ZSxcbiAgICAgICAgICAgICAgICAgICAgYm9yZGVyUmFkaXVzOiAnMjRweCAyNHB4IDI0cHggMHB4JyxcbiAgICAgICAgICAgICAgICAgICAgdHJhbnNpdGlvbjogJ2JveC1zaGFkb3cgZWFzZSAzMDBtcycsXG4gICAgICAgICAgICAgICAgICAgICc6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICAgICAgICAgICAgICAgICAgICAgIG91dGxpbmU6ICdub25lJyxcbiAgICAgICAgICAgICAgICAgICAgICAgIGJveFNoYWRvdzogYDAgMCAwIDJweCAke2NvbG9ycy5ncmV5MH1gLFxuICAgICAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPHNwYW4gY3NzPXt7IC4uLm1hcmtDc3MsIG1hcmdpbkJvdHRvbTogc2NhbGUoMSkgfX0+e3ZhbHVlfTwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8c3BhbiBjc3M9e21hcmtDc3N9PntuYW1lfTwvc3Bhbj5cbiAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8L1Rvb2x0aXA+XG4gICAgKTtcbn07XG4iXX0= */")
  }, value), jsx("span", {
    css: markCss
  }, name)));
};

var ColorsAutokit = function ColorsAutokit() {
  var _useAutokitsTheme = useAutokitsTheme(),
    colors = _useAutokitsTheme.colors;
  if (!colors) return jsx("div", {
    css: typography('body')
  }, jsx("span", {
    role: "img",
    "aria-label": "Error"
  }, "\u26D4\uFE0F"), ' ', "Colors are not defined. Use tokens or add ", jsx("strong", null, "colors"), " property in theme settings manually");
  return jsx(Layout, {
    auto: scale(20),
    gap: scale(8)
  }, Object.keys(colors).map(function (name) {
    return jsx(Layout.Item, {
      key: name
    }, jsx(Color, {
      name: name,
      value: colors[name]
    }));
  }));
};

export { ColorsAutokit };