@atlaskit/editor-common/dist/es2019/ui/PanelTextInput/styles.js

A package that contains common classes and components for editor and renderer

import { css } from '@emotion/react';
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
import { B100, N100, N30, N400 } from '@atlaskit/theme/colors';
// Normal .className gets overridden by input[type=text] hence this hack to produce input.className
export const panelTextInput = css`
  input& {
    background: transparent;
    border: 2px solid ${`var(--ds-border, ${N30})`};
    border-radius: 0;
    box-sizing: content-box;
    color: ${`var(--ds-text-subtle, ${N400})`};
    flex-grow: 1;
    font-size: ${relativeFontSizeToBase16(13)};
    line-height: 20px;
    padding: ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-400, 32px)"}
      ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"};
    min-width: 145px;

    /* Hides IE10+ built-in [x] clear input button */
    &::-ms-clear {
      display: none;
    }

    &:focus {
      outline: none;
      border-color: ${`var(--ds-border-focused, ${B100})`};
    }

    &::placeholder {
      color: ${`var(--ds-text-subtlest, ${N100})`};
    }
  }
`;
export const panelTextInputWithCustomWidth = width => css`
  input& {
    width: ${width}px;
  }
`;