@spectrum-css/textfield
Version:
The Spectrum CSS textfield component
370 lines (369 loc) • 18.2 kB
JSON
{
"sourceFile": "index.css",
"selectors": [
".is-focused .spectrum-Textfield-input",
".is-focused .spectrum-Textfield-input::placeholder",
".is-focused .spectrum-Textfield-input:hover",
".is-focused .spectrum-Textfield-input:hover::placeholder",
".is-invalid .spectrum-Textfield-input",
".is-invalid .spectrum-Textfield-input:focus",
".is-invalid .spectrum-Textfield-input:focus-visible",
".is-invalid .spectrum-Textfield-input:focus:hover",
".is-invalid .spectrum-Textfield-input:hover:not(.is-disabled)",
".is-invalid.is-focused .spectrum-Textfield-input",
".is-invalid.is-focused .spectrum-Textfield-input:hover",
".is-invalid.is-keyboardFocused .spectrum-Textfield-input",
".is-invalid:focus .spectrum-Textfield-input",
".is-invalid:focus .spectrum-Textfield-input:hover",
".is-invalid:hover:not(.is-disabled) .spectrum-Textfield-input",
".is-keyboardFocused .spectrum-Textfield-input",
".is-keyboardFocused .spectrum-Textfield-input::placeholder",
".is-valid .spectrum-Textfield-input",
".spectrum-Textfield",
".spectrum-Textfield .spectrum-FieldLabel",
".spectrum-Textfield .spectrum-HelpText",
".spectrum-Textfield .spectrum-Textfield-input",
".spectrum-Textfield .spectrum-Textfield-input::placeholder",
".spectrum-Textfield--multiline",
".spectrum-Textfield--multiline .spectrum-Textfield-input",
".spectrum-Textfield--multiline.spectrum-Textfield--grows .spectrum-Textfield-input",
".spectrum-Textfield--multiline.spectrum-Textfield--grows.spectrum-Textfield--sideLabel .spectrum-Textfield-input",
".spectrum-Textfield--multiline.spectrum-Textfield--quiet .spectrum-Textfield-input",
".spectrum-Textfield--quiet .spectrum-FieldLabel",
".spectrum-Textfield--quiet .spectrum-Textfield-characterCount",
".spectrum-Textfield--quiet .spectrum-Textfield-input",
".spectrum-Textfield--quiet .spectrum-Textfield-validationIcon",
".spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input",
".spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input::placeholder",
".spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input",
".spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input::placeholder",
".spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-input",
".spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-validationIcon",
".spectrum-Textfield--quiet.is-keyboardFocused:after",
".spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input",
".spectrum-Textfield--quiet.is-valid .spectrum-Textfield-validationIcon",
".spectrum-Textfield--quiet:after",
".spectrum-Textfield--sideLabel",
".spectrum-Textfield--sideLabel .spectrum-FieldLabel",
".spectrum-Textfield--sideLabel .spectrum-HelpText",
".spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount",
".spectrum-Textfield--sideLabel .spectrum-Textfield-input",
".spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon",
".spectrum-Textfield--sideLabel:after",
".spectrum-Textfield--sizeL",
".spectrum-Textfield--sizeS",
".spectrum-Textfield--sizeXL",
".spectrum-Textfield-characterCount",
".spectrum-Textfield-input",
".spectrum-Textfield-input:-moz-ui-invalid",
".spectrum-Textfield-input::placeholder",
".spectrum-Textfield-input:disabled",
".spectrum-Textfield-input:disabled::placeholder",
".spectrum-Textfield-input:focus",
".spectrum-Textfield-input:focus::placeholder",
".spectrum-Textfield-input:focus:hover",
".spectrum-Textfield-input:focus:hover::placeholder",
".spectrum-Textfield-input:hover",
".spectrum-Textfield-input:hover::placeholder",
".spectrum-Textfield-input:lang(ja)::placeholder",
".spectrum-Textfield-input:lang(ko)::placeholder",
".spectrum-Textfield-input:lang(zh)::placeholder",
".spectrum-Textfield-input:read-only",
".spectrum-Textfield-input:read-only::placeholder",
".spectrum-Textfield-input[type=\"number\"]",
".spectrum-Textfield-input[type=\"number\"]::-webkit-inner-spin-button",
".spectrum-Textfield-input[type=\"number\"]::-webkit-outer-spin-button",
".spectrum-Textfield.is-disabled .spectrum-FieldLabel",
".spectrum-Textfield.is-disabled .spectrum-Textfield-input",
".spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder",
".spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon",
".spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input",
".spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder",
".spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon",
".spectrum-Textfield.is-readOnly .spectrum-Textfield-input",
".spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder",
".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon",
".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input",
".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder",
".spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon",
".spectrum-Textfield.spectrum-Textfield--quiet",
".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon",
".spectrum-Textfield.spectrum-Textfield--sizeL",
".spectrum-Textfield.spectrum-Textfield--sizeS",
".spectrum-Textfield.spectrum-Textfield--sizeXL",
".spectrum-Textfield:hover .spectrum-Textfield-input",
".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder"
],
"modifiers": [
"--mod-texfield-animation-duration",
"--mod-text-area-min-block-size",
"--mod-text-area-min-block-size-quiet",
"--mod-text-area-min-inline-size",
"--mod-textfield-background-color",
"--mod-textfield-background-color-disabled",
"--mod-textfield-border-color",
"--mod-textfield-border-color-disabled",
"--mod-textfield-border-color-focus",
"--mod-textfield-border-color-focus-hover",
"--mod-textfield-border-color-hover",
"--mod-textfield-border-color-invalid-default",
"--mod-textfield-border-color-invalid-focus",
"--mod-textfield-border-color-invalid-focus-hover",
"--mod-textfield-border-color-invalid-hover",
"--mod-textfield-border-color-invalid-keyboard-focus",
"--mod-textfield-border-color-keyboard-focus",
"--mod-textfield-border-width",
"--mod-textfield-character-count-font-family",
"--mod-textfield-character-count-font-size",
"--mod-textfield-character-count-font-weight",
"--mod-textfield-character-count-spacing-block",
"--mod-textfield-character-count-spacing-block-quiet",
"--mod-textfield-character-count-spacing-block-side",
"--mod-textfield-character-count-spacing-inline",
"--mod-textfield-character-count-spacing-inline-side",
"--mod-textfield-corner-radius",
"--mod-textfield-focus-indicator-color",
"--mod-textfield-focus-indicator-gap",
"--mod-textfield-focus-indicator-width",
"--mod-textfield-font-family",
"--mod-textfield-font-weight",
"--mod-textfield-height",
"--mod-textfield-helptext-spacing-block",
"--mod-textfield-icon-color-invalid",
"--mod-textfield-icon-color-valid",
"--mod-textfield-icon-size-invalid",
"--mod-textfield-icon-size-valid",
"--mod-textfield-icon-spacing-block-invalid",
"--mod-textfield-icon-spacing-block-valid",
"--mod-textfield-icon-spacing-inline-end-invalid",
"--mod-textfield-icon-spacing-inline-end-quiet-invalid",
"--mod-textfield-icon-spacing-inline-end-quiet-valid",
"--mod-textfield-icon-spacing-inline-end-valid",
"--mod-textfield-icon-spacing-inline-start-invalid",
"--mod-textfield-icon-spacing-inline-start-valid",
"--mod-textfield-label-spacing-block",
"--mod-textfield-label-spacing-block-quiet",
"--mod-textfield-label-spacing-inline-side-label",
"--mod-textfield-min-width",
"--mod-textfield-placeholder-font-size",
"--mod-textfield-spacing-block-end",
"--mod-textfield-spacing-block-quiet",
"--mod-textfield-spacing-block-start",
"--mod-textfield-spacing-inline",
"--mod-textfield-spacing-inline-quiet",
"--mod-textfield-text-color-default",
"--mod-textfield-text-color-disabled",
"--mod-textfield-text-color-focus",
"--mod-textfield-text-color-focus-hover",
"--mod-textfield-text-color-hover",
"--mod-textfield-text-color-invalid",
"--mod-textfield-text-color-keyboard-focus",
"--mod-textfield-text-color-readonly",
"--mod-textfield-text-color-valid",
"--mod-textfield-width"
],
"component": [
"--spectrum-text-field-minimum-width-multiplier",
"--spectrum-textfield-background-color",
"--spectrum-textfield-background-color-disabled",
"--spectrum-textfield-border-color",
"--spectrum-textfield-border-color-disabled",
"--spectrum-textfield-border-color-focus",
"--spectrum-textfield-border-color-focus-hover",
"--spectrum-textfield-border-color-hover",
"--spectrum-textfield-border-color-invalid-default",
"--spectrum-textfield-border-color-invalid-focus",
"--spectrum-textfield-border-color-invalid-focus-hover",
"--spectrum-textfield-border-color-invalid-hover",
"--spectrum-textfield-border-color-invalid-keyboard-focus",
"--spectrum-textfield-border-color-keyboard-focus",
"--spectrum-textfield-border-width",
"--spectrum-textfield-character-count-font-family",
"--spectrum-textfield-character-count-font-size",
"--spectrum-textfield-character-count-font-weight",
"--spectrum-textfield-character-count-spacing-block",
"--spectrum-textfield-character-count-spacing-block-quiet",
"--spectrum-textfield-character-count-spacing-block-side",
"--spectrum-textfield-character-count-spacing-inline",
"--spectrum-textfield-character-count-spacing-inline-side",
"--spectrum-textfield-corner-radius",
"--spectrum-textfield-focus-indicator-color",
"--spectrum-textfield-focus-indicator-gap",
"--spectrum-textfield-focus-indicator-width",
"--spectrum-textfield-font-family",
"--spectrum-textfield-font-weight",
"--spectrum-textfield-height",
"--spectrum-textfield-helptext-spacing-block",
"--spectrum-textfield-icon-color-invalid",
"--spectrum-textfield-icon-color-valid",
"--spectrum-textfield-icon-size-invalid",
"--spectrum-textfield-icon-size-valid",
"--spectrum-textfield-icon-spacing-block-invalid",
"--spectrum-textfield-icon-spacing-block-valid",
"--spectrum-textfield-icon-spacing-inline-end-invalid",
"--spectrum-textfield-icon-spacing-inline-end-quiet-invalid",
"--spectrum-textfield-icon-spacing-inline-end-quiet-valid",
"--spectrum-textfield-icon-spacing-inline-end-valid",
"--spectrum-textfield-icon-spacing-inline-start-invalid",
"--spectrum-textfield-icon-spacing-inline-start-valid",
"--spectrum-textfield-input-line-height",
"--spectrum-textfield-label-spacing-block",
"--spectrum-textfield-label-spacing-block-quiet",
"--spectrum-textfield-label-spacing-inline-side-label",
"--spectrum-textfield-min-width",
"--spectrum-textfield-placeholder-font-size",
"--spectrum-textfield-spacing-block-end",
"--spectrum-textfield-spacing-block-quiet",
"--spectrum-textfield-spacing-block-start",
"--spectrum-textfield-spacing-inline",
"--spectrum-textfield-spacing-inline-quiet",
"--spectrum-textfield-text-color-default",
"--spectrum-textfield-text-color-disabled",
"--spectrum-textfield-text-color-focus",
"--spectrum-textfield-text-color-focus-hover",
"--spectrum-textfield-text-color-hover",
"--spectrum-textfield-text-color-invalid",
"--spectrum-textfield-text-color-keyboard-focus",
"--spectrum-textfield-text-color-readonly",
"--spectrum-textfield-text-color-valid",
"--spectrum-textfield-width"
],
"global": [
"--spectrum-animation-duration-100",
"--spectrum-border-width-100",
"--spectrum-character-count-to-field-quiet-extra-large",
"--spectrum-character-count-to-field-quiet-large",
"--spectrum-character-count-to-field-quiet-medium",
"--spectrum-character-count-to-field-quiet-small",
"--spectrum-checkmark-icon-size-100",
"--spectrum-checkmark-icon-size-200",
"--spectrum-checkmark-icon-size-300",
"--spectrum-checkmark-icon-size-75",
"--spectrum-component-bottom-to-text-100",
"--spectrum-component-bottom-to-text-200",
"--spectrum-component-bottom-to-text-75",
"--spectrum-component-edge-to-text-100",
"--spectrum-component-edge-to-text-200",
"--spectrum-component-edge-to-text-75",
"--spectrum-component-height-100",
"--spectrum-component-height-200",
"--spectrum-component-height-300",
"--spectrum-component-height-75",
"--spectrum-component-top-to-text-100",
"--spectrum-component-top-to-workflow-icon-100",
"--spectrum-component-top-to-workflow-icon-200",
"--spectrum-component-top-to-workflow-icon-300",
"--spectrum-component-top-to-workflow-icon-75",
"--spectrum-corner-radius-100",
"--spectrum-disabled-content-color",
"--spectrum-field-edge-to-alert-icon-extra-large",
"--spectrum-field-edge-to-alert-icon-large",
"--spectrum-field-edge-to-alert-icon-medium",
"--spectrum-field-edge-to-alert-icon-quiet",
"--spectrum-field-edge-to-alert-icon-small",
"--spectrum-field-edge-to-border-quiet",
"--spectrum-field-edge-to-text-quiet",
"--spectrum-field-edge-to-validation-icon-extra-large",
"--spectrum-field-edge-to-validation-icon-large",
"--spectrum-field-edge-to-validation-icon-medium",
"--spectrum-field-edge-to-validation-icon-quiet",
"--spectrum-field-edge-to-validation-icon-small",
"--spectrum-field-label-to-component",
"--spectrum-field-label-to-component-quiet-extra-large",
"--spectrum-field-label-to-component-quiet-large",
"--spectrum-field-label-to-component-quiet-medium",
"--spectrum-field-label-to-component-quiet-small",
"--spectrum-field-text-to-alert-icon-extra-large",
"--spectrum-field-text-to-alert-icon-large",
"--spectrum-field-text-to-alert-icon-medium",
"--spectrum-field-text-to-alert-icon-small",
"--spectrum-field-text-to-validation-icon-extra-large",
"--spectrum-field-text-to-validation-icon-large",
"--spectrum-field-text-to-validation-icon-medium",
"--spectrum-field-text-to-validation-icon-small",
"--spectrum-field-top-to-validation-icon-extra-large",
"--spectrum-field-top-to-validation-icon-large",
"--spectrum-field-top-to-validation-icon-medium",
"--spectrum-field-top-to-validation-icon-small",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
"--spectrum-font-size-100",
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
"--spectrum-gray-25",
"--spectrum-gray-300",
"--spectrum-gray-500",
"--spectrum-gray-600",
"--spectrum-gray-800",
"--spectrum-gray-900",
"--spectrum-help-text-to-component",
"--spectrum-negative-border-color-default",
"--spectrum-negative-border-color-focus",
"--spectrum-negative-border-color-focus-hover",
"--spectrum-negative-border-color-hover",
"--spectrum-negative-border-color-key-focus",
"--spectrum-negative-visual-color",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-focus",
"--spectrum-neutral-content-color-focus-hover",
"--spectrum-neutral-content-color-hover",
"--spectrum-neutral-content-color-key-focus",
"--spectrum-positive-visual-color",
"--spectrum-regular-font-weight",
"--spectrum-sans-font-family-stack",
"--spectrum-side-label-character-count-to-field",
"--spectrum-side-label-character-count-top-margin-extra-large",
"--spectrum-side-label-character-count-top-margin-large",
"--spectrum-side-label-character-count-top-margin-medium",
"--spectrum-side-label-character-count-top-margin-small",
"--spectrum-spacing-100",
"--spectrum-spacing-200",
"--spectrum-texfield-animation-duration",
"--spectrum-text-area-min-block-size",
"--spectrum-text-area-min-block-size-quiet",
"--spectrum-text-area-min-inline-size",
"--spectrum-text-area-minimum-height",
"--spectrum-text-area-minimum-width",
"--spectrum-workflow-icon-size-100",
"--spectrum-workflow-icon-size-200",
"--spectrum-workflow-icon-size-300",
"--spectrum-workflow-icon-size-75"
],
"system-theme": [
"--system-textfield-background-color",
"--system-textfield-background-color-disabled",
"--system-textfield-border-color",
"--system-textfield-border-color-disabled",
"--system-textfield-border-color-focus",
"--system-textfield-border-color-focus-hover",
"--system-textfield-border-color-hover",
"--system-textfield-border-color-keyboard-focus",
"--system-textfield-border-width",
"--system-textfield-icon-spacing-block-invalid",
"--system-textfield-quiet-border-color-disabled",
"--system-textfield-size-l-icon-spacing-block-invalid",
"--system-textfield-size-s-icon-spacing-block-invalid",
"--system-textfield-size-xl-icon-spacing-block-invalid"
],
"passthroughs": [],
"high-contrast": [
"--highcontrast-textfield-border-color",
"--highcontrast-textfield-border-color-focus",
"--highcontrast-textfield-border-color-hover",
"--highcontrast-textfield-border-color-invalid-default",
"--highcontrast-textfield-border-color-invalid-focus",
"--highcontrast-textfield-border-color-invalid-hover",
"--highcontrast-textfield-border-color-invalid-keyboard-focus",
"--highcontrast-textfield-border-color-keyboard-focus",
"--highcontrast-textfield-focus-indicator-color",
"--highcontrast-textfield-text-color-default",
"--highcontrast-textfield-text-color-disabled",
"--highcontrast-textfield-text-color-hover",
"--highcontrast-textfield-text-color-invalid",
"--highcontrast-textfield-text-color-keyboard-focus",
"--highcontrast-textfield-text-color-readonly",
"--highcontrast-textfield-text-color-valid"
]
}