@bubbles-ui/extras/lib/form/TagifyInput/TagifyInput.styles.js

The Bubbles Design System is Leemonade's open-source design system for products and experiences.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TagifyInputStyles = void 0;
var _components = require("@bubbles-ui/components");
const TagifyInputStyles = exports.TagifyInputStyles = (0, _components.createStyles)((theme, {
  size
}) => {
  const fontSizes = {
    xs: theme.fontSizes['1'],
    sm: theme.fontSizes['2'],
    md: theme.fontSizes['3']
  };
  const inputTheme = theme.other.input;
  return {
    root: {
      marginBottom: theme.spacing['1'],
      '&.tagify': {
        border: 0,
        borderRadius: 4,
        borderColor: theme.colors.ui01,
        color: theme.colors.text02,
        lineHeight: 0
      },
      '& .tagify__input': {
        ...(0, _components.getInputSizes)(size || 'md', inputTheme.spacing.padding, false),
        ...(0, _components.getInputStyle)(inputTheme, theme.other.global),
        borderRadius: 4,
        fontSize: fontSizes[size]
      },
      '&.tagify--focus': {
        // borderColor: theme.colors.ui01,
        // boxShadow: `0 0 0 3px ${theme.colors.interactive03h}`,
      },
      '.tagify__tag > div': {
        ...(0, _components.getFontProductive)(14, 400)
      },
      '.tagify__tag > div::before': {
        borderRadius: 9999,
        height: 20,
        top: -1,
        background: theme.colors.interactive03h,
        boxShadow: 'none'
      },
      '.tagify__tag:focus div::before, .tagify__tag:hover:not([readonly]) div::before': {
        top: -1,
        right: 0,
        left: 0,
        background: theme.colors.interactive03h,
        boxShadow: 'none'
      }
    }
  };
});