@grafana/ui/dist/esm/components/ColorPicker/ColorSwatch.mjs.map

Grafana Components Library

{"version":3,"file":"ColorSwatch.mjs","sources":["../../../../src/components/ColorPicker/ColorSwatch.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useFocusRing } from '@react-aria/focus';\nimport * as React from 'react';\nimport tinycolor from 'tinycolor2';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\n\n/** @internal */\nexport enum ColorSwatchVariant {\n  Small = 'small',\n  Large = 'large',\n}\n\n/** @internal */\nexport interface Props extends React.HTMLAttributes<HTMLDivElement> {\n  color: string;\n  label?: string;\n  variant?: ColorSwatchVariant;\n  isSelected?: boolean;\n}\n\n/** @internal */\nexport const ColorSwatch = React.forwardRef<HTMLDivElement, Props>(\n  ({ color, label, variant = ColorSwatchVariant.Small, isSelected, 'aria-label': ariaLabel, ...otherProps }, ref) => {\n    const theme = useTheme2();\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const styles = getStyles(theme, variant, color, isFocusVisible, isSelected);\n    const hasLabel = !!label;\n    const colorLabel = ariaLabel || label;\n    return (\n      <div ref={ref} className={styles.wrapper} data-testid={selectors.components.ColorSwatch.name} {...otherProps}>\n        {hasLabel && <span className={styles.label}>{label}</span>}\n        <button\n          className={styles.swatch}\n          {...focusProps}\n          aria-label={\n            colorLabel\n              ? t('grafana-ui.color-swatch.aria-label-selected-color', '{{colorLabel}} color', { colorLabel })\n              : t('grafana-ui.color-swatch.aria-label-default', 'Pick a color')\n          }\n          type=\"button\"\n        />\n      </div>\n    );\n  }\n);\n\nconst getStyles = (\n  theme: GrafanaTheme2,\n  variant: ColorSwatchVariant,\n  color: string,\n  isFocusVisible: boolean,\n  isSelected?: boolean\n) => {\n  const tc = tinycolor(color);\n  const isSmall = variant === ColorSwatchVariant.Small;\n  const swatchSize = isSmall ? '16px' : '32px';\n  let border = 'none';\n\n  if (tc.getAlpha() < 0.1) {\n    border = `2px solid ${theme.colors.border.medium}`;\n  }\n\n  return {\n    wrapper: css({\n      display: 'flex',\n      alignItems: 'center',\n      cursor: 'pointer',\n    }),\n    label: css({\n      marginRight: theme.spacing(1),\n    }),\n    swatch: css({\n      width: swatchSize,\n      height: swatchSize,\n      background: `${color}`,\n      border,\n      borderRadius: theme.shape.radius.circle,\n      outlineOffset: '1px',\n      outline: isFocusVisible ? `2px solid  ${theme.colors.primary.main}` : 'none',\n      boxShadow: isSelected\n        ? `inset 0 0 0 2px ${color}, inset 0 0 0 4px ${theme.colors.getContrastText(color)}`\n        : 'none',\n      [theme.transitions.handleMotion('no-preference')]: {\n        transition: theme.transitions.create(['transform'], {\n          duration: theme.transitions.duration.short,\n        }),\n      },\n      '&:hover': {\n        transform: 'scale(1.1)',\n      },\n      '@media (forced-colors: active)': {\n        forcedColorAdjust: 'none',\n      },\n    }),\n  };\n};\n\nColorSwatch.displayName = 'ColorSwatch';\n"],"names":["ColorSwatchVariant"],"mappings":"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"}