@create-figma-plugin/ui/lib/components/textbox/textbox-multiline/textbox-multiline.module.css

Production-grade Preact components that replicate the Figma UI design

.textboxMultiline {
  position: relative;
  z-index: var(--z-index-1);
}

.disabled,
.disabled * {
  cursor: not-allowed;
}

.grow {
  display: grid;
}

.ghost,
.grow .textarea {
  grid-area: 1 / 1 / 2 / 2;
}

.ghost {
  padding: var(--space-4) var(--space-8);
  white-space: pre-wrap;
}

.textarea {
  display: block;
  width: 100%;
  padding: calc(var(--space-4) - var(--border-width-1))
    calc(var(--space-8) - var(--border-width-1));
  border: var(--border-width-1) solid transparent;
  border-radius: var(--border-radius-4);
  background-color: var(--figma-color-bg-secondary);
  color: var(--figma-color-text);
  resize: none;
}
.textarea:focus {
  border-color: var(--figma-color-border-selected);
}
.disabled .textarea {
  border-color: var(--figma-color-border-disabled);
  background-color: transparent;
  color: var(--figma-color-text-disabled);
}
.grow .textarea {
  overflow: hidden;
}

.textarea::placeholder {
  color: var(--figma-color-text-tertiary);
}