@material/textfield/_variables.scss

The Material Components for the web text field component

//
// Copyright 2017 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

@use 'sass:math';
@use 'sass:color';
@use '@material/density/variables' as density-variables;
@use '@material/floating-label/variables' as floating-label-variables;
@use '@material/notched-outline/variables' as notched-outline-variables;
@use '@material/theme/theme-color';

///
/// Returns outlined text field floating label position for given height.
///
/// @todo Instead of adjusting `$positionY` with label box height that might change based on floating label font size
///     wrap label in a child element to apply `transitionY(-50%)` to automatically offset based on box height.
///
@function get-outlined-label-position-y($text-field-height) {
  @return math.div($text-field-height, 2) +
    math.div(notched-outline-variables.$label-box-height, 2);
}

$error: error !default;
$disabled-border: rgba(theme-color.prop-value(on-surface), 0.06) !default;
$disabled-icon: rgba(theme-color.prop-value(on-surface), 0.3) !default;
$bottom-line-hover: rgba(theme-color.prop-value(on-surface), 0.87) !default;
$bottom-line-idle: rgba(theme-color.prop-value(on-surface), 0.42) !default;
$label: rgba(theme-color.prop-value(on-surface), 0.6) !default;

$ink-color: rgba(theme-color.prop-value(on-surface), 0.87) !default;
$helper-text-color: rgba(theme-color.prop-value(on-surface), 0.6) !default;
$icon-color: rgba(theme-color.prop-value(on-surface), 0.54) !default;
$focused-label-color: rgba(theme-color.prop-value(primary), 0.87) !default;
$placeholder-ink-color: rgba(theme-color.prop-value(on-surface), 0.54) !default;
$affix-color: rgba(theme-color.prop-value(on-surface), 0.6) !default;

$disabled-label-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;
$disabled-ink-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;
$disabled-placeholder-ink-color: rgba(
  theme-color.prop-value(on-surface),
  0.38
) !default;
$disabled-helper-text-color: rgba(
  theme-color.prop-value(on-surface),
  0.38
) !default;
$disabled-affix-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;

$background: color.mix(
  theme-color.prop-value(on-surface),
  theme-color.prop-value(surface),
  4%
) !default;
$disabled-background: color.mix(
  theme-color.prop-value(on-surface),
  theme-color.prop-value(surface),
  2%
) !default;
$secondary-text: rgba(theme-color.prop-value(on-surface), 0.6) !default;

$outlined-idle-border: rgba(theme-color.prop-value(on-surface), 0.38) !default;
$outlined-disabled-border: rgba(
  theme-color.prop-value(on-surface),
  0.06
) !default;
$outlined-hover-border: rgba(theme-color.prop-value(on-surface), 0.87) !default;

$textarea-border: rgba(theme-color.prop-value(on-surface), 0.73) !default;
$textarea-background: rgba(theme-color.prop-value(surface), 1) !default;
$textarea-disabled-border-color: rgba(
  theme-color.prop-value(on-surface),
  0.26
) !default;
// cannot be transparent because multiline textarea input
// will make text unreadable
$textarea-disabled-background: rgba(249, 249, 249, 1) !default;

$ripple-target: '.mdc-text-field__ripple';
$outlined-stroke-width: 2px !default;
$height: 56px !default;
$minimum-height: 40px !default;
$minimum-height-for-filled-label: 52px !default;
$maximum-height: $height !default;
$padding-horizontal: 16px !default;
$density-scale: density-variables.$default-scale !default;
$density-config: (
  height: (
    default: $height,
    maximum: $maximum-height,
    minimum: $minimum-height,
  ),
) !default;
$shape-radius: small !default;
$label-position-y: floating-label-variables.$position-y !default;
$label-offset: 16px !default;
// TODO(b/154350788): Remove this variable, it's not used internally but it is
// externally in Angular
/// @deprecated this variable will be removed in the future.
/// Use get-outlined-label-position-y($height) instead
$outlined-label-position-y: get-outlined-label-position-y($height) !default;
$outlined-with-leading-icon-label-position-x: 32px !default;
$textarea-outlined-label-position-y: 24.75px !default; // visually ~4dp from top to baseline
$textarea-filled-label-position-y: 10.25px !default; // visually ~20dp from top to label baseline
$helper-line-padding: 16px !default;
$filled-baseline-top: 40px !default;
$input-height: 28px !default;
$textarea-label-top: 19px !default; // visually ~32dp from top to label baseline
$textarea-outlined-label-top: $textarea-label-top -
  notched-outline-variables.$border-width !default;
$textarea-line-height: 1.5rem !default; // 24dp from baseline to baseline
$textarea-input-handle-margin: 1px !default;
// Outlined textarea's first line should be placed at the same position as
// outlined textfield, and should look identical if it is 1 row. Since textfield
// is centered and font metrics vary for where the baseline is, the best way to
// ensure textarea and textfield align is with padding. At 56px height with a
// 24px line-height, a centered textfield has 16px of top and bottom padding.
// Textarea should use this to position itself.
$textarea-outlined-input-margin-top: 16px !default;
$textarea-outlined-input-margin-bottom: 16px !default;
$textarea-outlined-density-config: (
  margin-top: (
    default: $textarea-outlined-input-margin-top,
    maximum: $textarea-outlined-input-margin-top,
    minimum: $textarea-outlined-input-margin-top - 8,
  ),
  margin-bottom: (
    default: $textarea-outlined-input-margin-bottom,
    maximum: $textarea-outlined-input-margin-bottom,
    minimum: $textarea-outlined-input-margin-bottom - 8,
  ),
) !default; // remove 1/2 of scale to -4 for minimum
$textarea-outlined-label-density-config: (
  top: (
    default: $textarea-outlined-label-top,
    maximum: $textarea-outlined-label-top,
    minimum: $textarea-outlined-label-top - 8,
  ),
) !default; // remove 1/2 of scale to -4 for minimum
$textarea-filled-input-margin-top: 23px !default; // visually ~40dp from top to baseline
$textarea-filled-input-margin-bottom: 9px !default; // visually ~16dp from baseline to bottom
$textarea-filled-density-config: (
  margin-bottom: (
    default: $textarea-filled-input-margin-bottom,
    maximum: $textarea-filled-input-margin-bottom,
    minimum: $textarea-filled-input-margin-bottom - 4,
  ),
) !default; // scale to -1 for minimum
$textarea-filled-label-density-config: (
  top: (
    default: $textarea-label-top,
    maximum: $textarea-label-top,
    minimum: $textarea-label-top - 2,
  ),
) !default; // remove 1/2 of scale to -1 for minimm
$textarea-filled-no-label-input-margin-top: 16px !default; // see above explanation for outlined textarea margin
$textarea-filled-no-label-input-margin-bottom: 16px !default; // see above explanation for outlined textarea margin
$textarea-filled-no-label-density-config: (
  margin-top: (
    default: $textarea-filled-no-label-input-margin-top,
    maximum: $textarea-filled-no-label-input-margin-top,
    minimum: $textarea-filled-no-label-input-margin-top - 8,
  ),
  margin-bottom: (
    default: $textarea-filled-no-label-input-margin-bottom,
    maximum: $textarea-filled-no-label-input-margin-bottom,
    minimum: $textarea-filled-no-label-input-margin-bottom - 8,
  ),
) !default; // remove 1/2 of scale to -4 for minimum
$textarea-internal-counter-input-margin-bottom: 2px !default; // visually ~20dp from baseline to counter baseline
$textarea-internal-counter-baseline-bottom: 16px !default;
// Note that the scale factor is an eyeballed approximation of what's shown in the mocks.

$prefix-padding: 2px !default;
$prefix-end-aligned-padding: 12px !default;
$suffix-padding: 12px !default;
$suffix-end-aligned-padding: 2px !default;