@jupyter/web-components/dist/esm/text-area/text-area.styles.js

A component library for building extensions in Jupyter frontends.

// Copyright (c) Jupyter Development Team.
// Copyright (c) Microsoft Corporation.
// Distributed under the terms of the Modified BSD License.
import { css } from '@microsoft/fast-element';
import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
import { accentFillFocus, bodyFont, controlCornerRadius, designUnit, disabledOpacity, errorFillActive, errorFillFocus, errorFillHover, errorFillRest, focusStrokeWidth, neutralFillHover, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralFillRest, neutralFillStrongActive, neutralFillStrongHover, neutralFillStrongRest, neutralForegroundRest, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens.js';
import { heightNumber } from '../styles/index.js';
/**
 * Styles for Text Area
 * @public
 */
export const textAreaStyles = (context, definition) => css `
    ${display('inline-block')} :host {
      font-family: ${bodyFont};
      outline: none;
      user-select: none;
    }

    .control {
      box-sizing: border-box;
      position: relative;
      color: ${neutralForegroundRest};
      background: ${neutralFillInputRest};
      border-radius: calc(${controlCornerRadius} * 1px);
      border: calc(${strokeWidth} * 1px) solid ${neutralFillStrongRest};
      height: calc(${heightNumber} * 2px);
      font: inherit;
      font-size: ${typeRampBaseFontSize};
      line-height: ${typeRampBaseLineHeight};
      padding: calc(${designUnit} * 2px + 1px);
      width: 100%;
      resize: none;
    }

    :host([aria-invalid='true']) .control {
      border-color: ${errorFillRest};
    }

    .control:hover:enabled {
      background: ${neutralFillInputHover};
      border-color: ${neutralFillStrongHover};
    }

    :host([aria-invalid='true']) .control:hover:enabled {
      border-color: ${errorFillHover};
    }

    .control:active:enabled {
      background: ${neutralFillInputActive};
      border-color: ${neutralFillStrongActive};
    }

    :host([aria-invalid='true']) .control:active:enabled {
      border-color: ${errorFillActive};
    }

    .control:hover,
    .control:${focusVisible},
    .control:disabled,
    .control:active {
      outline: none;
    }

    :host(:focus-within) .control {
      border-color: ${accentFillFocus};
      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)
        ${accentFillFocus};
    }

    :host([aria-invalid='true']:focus-within) .control {
      border-color: ${errorFillFocus};
      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)
        ${errorFillFocus};
    }

    :host([appearance='filled']) .control {
      background: ${neutralFillRest};
    }

    :host([appearance='filled']:hover:not([disabled])) .control {
      background: ${neutralFillHover};
    }

    :host([resize='both']) .control {
      resize: both;
    }

    :host([resize='horizontal']) .control {
      resize: horizontal;
    }

    :host([resize='vertical']) .control {
      resize: vertical;
    }

    .label {
      display: block;
      color: ${neutralForegroundRest};
      cursor: pointer;
      font-size: ${typeRampBaseFontSize};
      line-height: ${typeRampBaseLineHeight};
      margin-bottom: 4px;
    }

    .label__hidden {
      display: none;
      visibility: hidden;
    }

    :host([disabled]) .label,
    :host([readonly]) .label,
    :host([readonly]) .control,
    :host([disabled]) .control {
      cursor: ${disabledCursor};
    }
    :host([disabled]) {
      opacity: ${disabledOpacity};
    }
    :host([disabled]) .control {
      border-color: ${neutralStrokeRest};
    }

    :host([cols]) {
      width: initial;
    }

    :host([rows]) .control {
      height: initial;
    }
  `.withBehaviors(forcedColorsStylesheetBehavior(css `
      :host([disabled]) {
        opacity: 1;
      }

      :host([aria-invalid='true']) .control {
        border-style: dashed;
      }
    `));