@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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"}