Boolean
$text-field-disable-everything: base.$form-disable-everything !default;
Boolean
$text-field-disable-addon: $disable-everything !default;
Boolean
$text-field-disable-placeholder-ellipsis: false !default;
Boolean
$text-field-disable-container-dense: false !default;
Boolean
$text-field-disable-underline-left: base.$form-disable-underlined-theme !default;
Boolean
$text-field-disable-underline-center: base.$form-disable-underlined-theme !default;
Boolean
$text-field-disable-underline-right: base.$form-disable-underlined-theme !default;
Map
$text-field-typography: map.merge(
typography.$base-font-styles,
map.merge(
typography.$body-1-styles,
(
font-size: 1em,
)
)
) !default;
Number
$text-field-height: 3rem !default;
Number
$text-field-dense-height: 2.5rem !default;
Number
$text-field-label-height: 3.5rem !default;
Number
$text-field-label-dense-height: 3.25rem !default;
Number
$text-field-border-radius: border-radius.get-var(xs) !default;
Number
$text-field-border-width: 1px !default;
Number
$text-field-border-width-active: 2px !default;
Number
$text-field-filled-padding: calc(spacing.get-var(sm) * 1.5) !default;
Number
$text-field-outlined-padding: spacing.get-var(md) !default;
Number
$text-field-underlined-padding: null !default;
Number
$text-field-underlined-placeholder-height: 2.5rem !default;
Number
$text-field-underlined-placeholder-padding-top: spacing.get-var(sm) !default;
Number
$text-field-underlined-placeholder-addon-padding-top: spacing.get-var(xs) !default;
Number
$text-field-underlined-label-padding-top: spacing.get-var(lg) !default;
Number
$text-field-underlined-label-left-offset: spacing.get-var(sm) !default;
Number
$text-field-color-min-width: 5rem !default;
Number
$text-field-addon-gap: spacing.get-var(xs) !default;
Number
$text-field-addon-margin: spacing.get-var(sm) !default;
Number
$text-field-addon-spacing: spacing.get-var(sm) !default;
Color
$text-field-light-border-color: rgba(colors.$black, 0.12) !default;
Color
$text-field-dark-border-color: rgba(colors.$white, 0.5) !default;
Color
$text-field-border-color: theme.get-default-color(
$light-border-color,
$dark-border-color
) !default;
Color
$text-field-light-hover-border-color: rgba(colors.$black, 0.87) !default;
Color
$text-field-dark-hover-border-color: rgba(colors.$white, 0.87) !default;
Color
$text-field-hover-border-color: theme.get-default-color(
$light-hover-border-color,
$dark-hover-border-color
) !default;
Color
$text-field-light-filled-background-color: colors.$grey-100 !default;
Color
$text-field-dark-filled-background-color: #424242 !default;
Color
$text-field-filled-background-color: theme.get-default-color(
$light-filled-background-color,
$dark-filled-background-color
) !default;
List
$text-field-variables: (
addon-top,
addon-spacing,
addon-margin-top,
addon-left-offset,
height,
padding-left,
padding-right,
padding-top,
border-color,
hover-border-color,
filled-color,
filled-padding,
outlined-padding,
underlined-padding
);
mixin
@mixin set-var($name, $value) { … }
mixin
@mixin use-var($property, $name: $property, $fallback: null) { … }
mixin
@mixin use-light-theme { … }
mixin
@mixin use-dark-theme { … }
mixin
@mixin variables { … }
mixin
@mixin container-styles($disable-layer: false) { … }
mixin
@mixin text-field-styles($disable-layer: false) { … }
mixin
@mixin addon-styles($disable-layer: false) { … }
mixin
@mixin styles($disable-layer: false) { … }
function
@function get-var($name, $fallback: null) { … }
String
Set to true
to disable the TextField
styles
Set to true
if the addon props will not be used with the TextField
or
TextArea
components or the visibilityIcon
prop for the Password
component.
Set to true
if the ::placeholder
text should not automatically ellipsis when there is text overflow.
Set to true
to disable the TextFieldContainer
dense styles.
Set to true
if the underlined theme will not animate from the left.
NOTE: This would require updating the FORM_CONFIG.underlineDirection
value since this is the default.
Set to true
if the underlined theme will not animate from the center.
Set to true
if the underlined theme will not animate from the right.
The default TextField
typography
The default TextField
height.
The default TextField
height when the dense
prop is enabled.
The default TextField
height when there is a label
prop.
The default TextField
height when there is a label
and dense
prop.
The border-radius
for a TextField
.
The border-width
for a TextField
.
The border-width
for a TextField
while active or focused.
The amount of horizontal padding to apply to a TextField
with the
theme="filled"
.
The amount of horizontal padding to apply to a TextField
with the
theme="outline"
.
The amount of horizontal padding to apply to a TextField
with the
theme="underline"
.
The amount of height to apply to a TextField
while the
theme="underline"
and a label
has not been provided.
Set this to null
to disable these styles.
The amount of padding-top to apply to a TextField
while the
theme="underline"
and a label
has not been provided.
This will be ignored if the $underlined-placeholder-height
is
null
.
The amount of padding-top to apply to addons in a TextField
while the
theme="underline"
.
This will be ignored if the $underlined-placeholder-height
is
null
.
The amount of padding-top to apply to the TextFieldContainer
while the
theme="underline"
and a label
was provided.
NOTE: This is the default height of the label with line-height
The position in the TextFieldContainer
for a Label
while the
theme="underline"
.
Set this to null
if not using <TextField type="color" />
since this is used to apply a min-width
to color inputs.
The gap to apply between addon elements if multiple were provided.
i.e. leftAddon={<><FavoriteIcon /><CloseIcon /></>}
The amount of margin to apply to addons when the TextField
theme="underline"
.
The amount of spacing between a TextField
addon and the <input>
element.
The border-color for a theme="outline"
TextField
in the light theme.
The border-color for a theme="outline"
TextField
in the dark theme.
The default border-color for a theme="outline"
TextField
.
The border-color for a theme="outline"
TextField
in the light theme while hovering.
The border-color for a theme="outline"
TextField
in the dark theme while hovering.
The default border-color for a theme="outline"
TextField
while hovering.
The background color for theme="filled"
TextField
in the light theme.
The background color for theme="filled"
TextField
in the dark theme.
The default background color for theme="filled"
TextField
.
The available configurable css variables and mostly used internally for the
get-var
, set-var
, and use-var
utils.
The supported variable name
The value to set the variable to. Supports null
which will just be a no-op.
The css property to apply the variable to
The supported variable name
An optional fallback value if the variable has not been set
Applies the light the variables based on feature flags
Applies the dark the variables based on feature flags
Conditionally applies the css variables based on feature flags
Generates all the styles based on feature flags.
Set this to true
to disable the layer behavior
Generates all the styles based on feature flags.
Set this to true
to disable the layer behavior
Generates all the styles based on feature flags.
Set this to true
to disable the layer behavior
Generates all the styles based on feature flags.
Set this to true
to disable the layer behavior
a var()
statement
The supported variable name
An optional fallback value