diff --git a/.changeset/healthy-chicken-clap.md b/.changeset/healthy-chicken-clap.md new file mode 100644 index 00000000000..d31c3c30b12 --- /dev/null +++ b/.changeset/healthy-chicken-clap.md @@ -0,0 +1,48 @@ +--- +"@spectrum-css/textfield": major +--- + +Migrate to Spectrum 2 + +- Default styles are used for medium +- Removal of quiet variant +- Style adjustments to match design spec: + - Spacing start/end edge to value for XL component should use `component-edge-to-text-300`, not `-200` + - Spacing top edge to value should change with size, now uses different spacing tokens for each component tshirt size according to spec (`component-top-to-text-75`, `-100`, `-200`, and `-300`) + - Spacing bottom edge to value should change with size, now uses different spacing tokens for each component tshirt size according to spec (`component-bottom-to-text-75`, `-100`, `-200`, and `-300`) + - Border thickness has been increased to 2px, and border colors have been updated to match spec + - Adjust side label inline spacing to field, should be `spacing-200` for all tshirt sizes + - Change disabled background color to `gray-25` + - Change disabled-border-color from transparent to `disabled-border-color` +- Use new and updated tokens: + - use tokens for textfield width (`field-default-width-small`, `-medium`, `-large`, `-extra-large`) + - use updated corner radius tokens + - use different component-bottom-to-text tokens for character-count-spacing-block + - update tokens for alert icon block spacing + - update tokens for alert and invalid inline-start spacing + - update font tokens + +Adds mods: + +- `--mod-textfield-character-count-color` +- `--mod-textfield-character-count-font-style` +- `--mod-textfield-character-count-line-height` +- `--mod-textfield-character-count-line-height-cjk` +- `--mod-textfield-font-style` +- `--mod-textfield-line-height` (used for multiline only) +- `--mod-textfield-line-height-cjk` + +Removes mods: + +- `--mod-text-area-min-block-size-quiet` +- `--mod-textfield-character-count-spacing-block-quiet` +- `--mod-textfield-icon-spacing-inline-end-quiet-invalid` +- `--mod-textfield-icon-spacing-inline-end-quiet-valid` +- `--mod-textfield-label-spacing-block-quiet` +- `--mod-textfield-spacing-block-quiet` +- `--mod-textfield-spacing-inline-quiet` + +Changed mods: + +- `--mod-texfield-animation-duration` --> `--mod-textfield-animation-duration` +- `--mod-texfield-placeholder-font-size` --> `--mod-texfield-placeholder-font-size` diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json index ea7001c7db6..073bc68dfb2 100644 --- a/components/textfield/dist/metadata.json +++ b/components/textfield/dist/metadata.json @@ -1,59 +1,29 @@ { "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-input:lang(ja)", + ".spectrum-Textfield--multiline .spectrum-Textfield-input:lang(ko)", + ".spectrum-Textfield--multiline .spectrum-Textfield-input:lang(zh)", ".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-characterCount:lang(ja)", + ".spectrum-Textfield-characterCount:lang(ko)", + ".spectrum-Textfield-characterCount:lang(zh)", ".spectrum-Textfield-input", ".spectrum-Textfield-input:-moz-ui-invalid", ".spectrum-Textfield-input::placeholder", @@ -65,37 +35,67 @@ ".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-HelpText .spectrum-HelpText-text", + ".spectrum-Textfield.is-disabled .spectrum-Textfield-characterCount", ".spectrum-Textfield.is-disabled .spectrum-Textfield-input", ".spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder", + ".spectrum-Textfield.is-disabled .spectrum-Textfield-input:read-only::placeholder", ".spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon", + ".spectrum-Textfield.is-disabled .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder", + ".spectrum-Textfield.is-disabled .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder", ".spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input", ".spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder", + ".spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input:read-only::placeholder", + ".spectrum-Textfield.is-disabled:hover .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder", + ".spectrum-Textfield.is-disabled:hover .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder", + ".spectrum-Textfield.is-focused .spectrum-Textfield-input", + ".spectrum-Textfield.is-focused .spectrum-Textfield-input::placeholder", + ".spectrum-Textfield.is-focused .spectrum-Textfield-input:hover", + ".spectrum-Textfield.is-focused .spectrum-Textfield-input:hover::placeholder", + ".spectrum-Textfield.is-focused:hover .spectrum-Textfield-input", + ".spectrum-Textfield.is-focused:hover .spectrum-Textfield-input::placeholder", + ".spectrum-Textfield.is-invalid .spectrum-Textfield-input", + ".spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus", + ".spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus:hover", ".spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon", + ".spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input", + ".spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input:hover", + ".spectrum-Textfield.is-invalid.is-focused:hover .spectrum-Textfield-input", + ".spectrum-Textfield.is-invalid.is-keyboardFocused .spectrum-Textfield-input", + ".spectrum-Textfield.is-invalid.is-keyboardFocused:hover .spectrum-Textfield-input", + ".spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input", + ".spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input:hover", + ".spectrum-Textfield.is-invalid:focus:hover .spectrum-Textfield-input", + ".spectrum-Textfield.is-invalid:hover:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input", + ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover", + ".spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input", + ".spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input::placeholder", + ".spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input", + ".spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input::placeholder", ".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.is-disabled .spectrum-Textfield-input", ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input", ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder", + ".spectrum-Textfield.is-valid .spectrum-Textfield-input", ".spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon", - ".spectrum-Textfield.spectrum-Textfield--quiet", ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon", + ".spectrum-Textfield:focus:hover .spectrum-Textfield-input", + ".spectrum-Textfield:focus:hover .spectrum-Textfield-input::placeholder", ".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-animation-duration", "--mod-textfield-background-color", "--mod-textfield-background-color-disabled", "--mod-textfield-border-color", @@ -110,11 +110,8 @@ "--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-color", "--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", @@ -123,6 +120,8 @@ "--mod-textfield-focus-indicator-gap", "--mod-textfield-focus-indicator-width", "--mod-textfield-font-family", + "--mod-textfield-font-size", + "--mod-textfield-font-style", "--mod-textfield-font-weight", "--mod-textfield-height", "--mod-textfield-helptext-spacing-block", @@ -133,21 +132,17 @@ "--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-line-height", + "--mod-textfield-line-height-cjk", "--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", @@ -161,6 +156,7 @@ ], "component": [ "--spectrum-text-field-minimum-width-multiplier", + "--spectrum-textfield-animation-duration", "--spectrum-textfield-background-color", "--spectrum-textfield-background-color-disabled", "--spectrum-textfield-border-color", @@ -175,11 +171,8 @@ "--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-color", "--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", @@ -188,6 +181,8 @@ "--spectrum-textfield-focus-indicator-gap", "--spectrum-textfield-focus-indicator-width", "--spectrum-textfield-font-family", + "--spectrum-textfield-font-size", + "--spectrum-textfield-font-style", "--spectrum-textfield-font-weight", "--spectrum-textfield-height", "--spectrum-textfield-helptext-spacing-block", @@ -198,22 +193,18 @@ "--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-line-height", + "--spectrum-textfield-line-height-cjk", "--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", @@ -227,57 +218,52 @@ ], "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-border-width-200", "--spectrum-checkmark-icon-size-100", "--spectrum-checkmark-icon-size-200", "--spectrum-checkmark-icon-size-300", "--spectrum-checkmark-icon-size-75", + "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", + "--spectrum-component-bottom-to-text-300", "--spectrum-component-bottom-to-text-75", "--spectrum-component-edge-to-text-100", "--spectrum-component-edge-to-text-200", + "--spectrum-component-edge-to-text-300", "--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-text-200", + "--spectrum-component-top-to-text-300", + "--spectrum-component-top-to-text-75", "--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-corner-radius-medium-size-extra-large", + "--spectrum-corner-radius-medium-size-large", + "--spectrum-corner-radius-medium-size-medium", + "--spectrum-corner-radius-medium-size-small", + "--spectrum-default-font-style", + "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", + "--spectrum-field-default-width-extra-large", + "--spectrum-field-default-width-large", + "--spectrum-field-default-width-medium", + "--spectrum-field-default-width-small", "--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", @@ -291,11 +277,11 @@ "--spectrum-font-size-75", "--spectrum-gray-25", "--spectrum-gray-300", - "--spectrum-gray-500", - "--spectrum-gray-600", + "--spectrum-gray-400", "--spectrum-gray-800", "--spectrum-gray-900", "--spectrum-help-text-to-component", + "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-focus", "--spectrum-negative-border-color-focus-hover", @@ -307,22 +293,20 @@ "--spectrum-neutral-content-color-focus-hover", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", + "--spectrum-neutral-subdued-content-color-default", "--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-text-to-visual-100", + "--spectrum-text-to-visual-200", + "--spectrum-text-to-visual-300", + "--spectrum-text-to-visual-75", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", @@ -330,17 +314,25 @@ ], "passthroughs": [], "high-contrast": [ + "--highcontrast-textfield-background-color", + "--highcontrast-textfield-background-color-disabled", "--highcontrast-textfield-border-color", + "--highcontrast-textfield-border-color-disabled", "--highcontrast-textfield-border-color-focus", + "--highcontrast-textfield-border-color-focus-hover", "--highcontrast-textfield-border-color-hover", "--highcontrast-textfield-border-color-invalid-default", "--highcontrast-textfield-border-color-invalid-focus", + "--highcontrast-textfield-border-color-invalid-focus-hover", "--highcontrast-textfield-border-color-invalid-hover", "--highcontrast-textfield-border-color-invalid-keyboard-focus", "--highcontrast-textfield-border-color-keyboard-focus", + "--highcontrast-textfield-border-color-readonly", "--highcontrast-textfield-focus-indicator-color", "--highcontrast-textfield-text-color-default", "--highcontrast-textfield-text-color-disabled", + "--highcontrast-textfield-text-color-focus", + "--highcontrast-textfield-text-color-focus-hover", "--highcontrast-textfield-text-color-hover", "--highcontrast-textfield-text-color-invalid", "--highcontrast-textfield-text-color-keyboard-focus", diff --git a/components/textfield/index.css b/components/textfield/index.css index 6a382d1804c..1117d3ca174 100644 --- a/components/textfield/index.css +++ b/components/textfield/index.css @@ -12,59 +12,69 @@ */ .spectrum-Textfield { - --spectrum-textfield-border-color: var(--spectrum-gray-500); - --spectrum-textfield-border-color-hover: var(--spectrum-gray-600); - --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); - --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-800); - - --spectrum-textfield-border-width: var(--spectrum-border-width-100); - - --spectrum-textfield-background-color: var(--mod-textfield-background-color, var(--spectrum-gray-25)); - --spectrum-textfield-background-color-disabled: var(--mod-textfield-background-color-disabled, var(--spectrum-gray-25)); - --spectrum-textfield-border-color-disabled: var(--mod-textfield-border-color-disabled, var(--spectrum-gray-300)); + --spectrum-textfield-animation-duration: var(--spectrum-animation-duration-100); - /* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */ - /* disallow mod for max compatibility */ - --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); - --spectrum-texfield-animation-duration: var(--spectrum-animation-duration-100); - - --spectrum-textfield-width: 240px; /* override per api */ - --spectrum-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier); - --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100); + /* default height/width/border radius */ + --spectrum-textfield-height: var(--spectrum-component-height-100); + --spectrum-textfield-width: var(--spectrum-field-default-width-medium); + --spectrum-textfield-min-width: calc(var(--spectrum-textfield-height) * var(--spectrum-text-field-minimum-width-multiplier)); + --spectrum-textfield-border-width: var(--spectrum-border-width-200); + --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-medium-size-medium); /* default spacing */ - --spectrum-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet); + --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); --spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100); --spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100); - --spectrum-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet); - /* default label spacing */ + /* default field label and help text spacing */ --spectrum-textfield-label-spacing-block: var(--spectrum-field-label-to-component); - - /* default help text spacing */ + --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); --spectrum-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component); + /* default icon size */ + --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); + --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + /* default icon spacing - invalid */ - --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet); + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-text-to-visual-100); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100); /* default icon spacing - valid */ - --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet); + --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-text-to-visual-100); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); + --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); /* font styles */ --spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack); --spectrum-textfield-font-weight: var(--spectrum-regular-font-weight); + --spectrum-textfield-font-style: var(--spectrum-default-font-style); + --spectrum-textfield-font-size: var(--spectrum-font-size-100); + --spectrum-textfield-line-height: var(--spectrum-line-height-100); + --spectrum-textfield-line-height-cjk: var(--spectrum-cjk-line-height-100); + + /* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */ + --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); /* character count */ - --spectrum-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-textfield-character-count-font-weight: var(--spectrum-regular-font-weight); + --spectrum-textfield-character-count-color: var(--spectrum-neutral-subdued-content-color-default); --spectrum-textfield-character-count-spacing-inline: var(--spectrum-spacing-200); + --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100); --spectrum-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field); + --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-component-top-to-text-100); /* focus indicator */ --spectrum-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness); --spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + /*** Colors ***/ + --spectrum-textfield-background-color: var(--mod-textfield-background-color, var(--spectrum-gray-25)); + --spectrum-textfield-border-color: var(--spectrum-gray-300); + --spectrum-textfield-border-color-hover: var(--spectrum-gray-400); + --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); + --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-800); + /* Text Colors */ --spectrum-textfield-text-color-default: var(--spectrum-neutral-content-color-default); --spectrum-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover); @@ -76,6 +86,8 @@ --spectrum-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default); /* Disabled Colors */ + --spectrum-textfield-background-color-disabled: var(--highcontrast-textfield-background-color-disabled, var(--mod-textfield-background-color-disabled, var(--spectrum-gray-25))); + --spectrum-textfield-border-color-disabled: var(--highcontrast-textfield-border-color-disabled, var(--mod-textfield-border-color-disabled, var(--spectrum-disabled-border-color))); --spectrum-textfield-text-color-disabled: var(--spectrum-disabled-content-color); /* Invalid Colors */ @@ -85,7 +97,6 @@ --spectrum-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); --spectrum-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus); --spectrum-textfield-icon-color-invalid: var(--spectrum-negative-visual-color); - --spectrum-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default); /* Valid Colors */ @@ -98,102 +109,85 @@ /* Text Area / Multiline */ --spectrum-text-area-min-inline-size: var(--spectrum-text-area-minimum-width); --spectrum-text-area-min-block-size: var(--spectrum-text-area-minimum-height); - - /* Default sizing values: Medium */ - --spectrum-textfield-height: var(--spectrum-component-height-100); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); - - /* Text Area / Multiline size medium */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100); - - &.spectrum-Textfield--quiet { - --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); - } } /********* Text field t-shirt sizes *********/ .spectrum-Textfield--sizeS { --spectrum-textfield-height: var(--spectrum-component-height-75); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75); + --spectrum-textfield-width: var(--spectrum-field-default-width-small); + --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-medium-size-small); + --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-75); + --spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-75); + --spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-75); + --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-75); --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-75); + + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-text-to-visual-75); --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75); + + --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-text-to-visual-75); --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small); --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small); - /* Text Area / Multiline size small */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-75); + --spectrum-textfield-font-size: var(--spectrum-font-size-75); + + --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-component-top-to-text-75); } .spectrum-Textfield--sizeL { --spectrum-textfield-height: var(--spectrum-component-height-200); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200); + --spectrum-textfield-width: var(--spectrum-field-default-width-large); + --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-medium-size-large); + --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200); + --spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-200); + --spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-200); + --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-200); --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-200); + + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-text-to-visual-200); --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200); + + --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-text-to-visual-200); --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large); --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-100); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large); - /* Text Area / Multiline size large */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-200); + --spectrum-textfield-font-size: var(--spectrum-font-size-200); + + --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200); + --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-component-top-to-text-200); } .spectrum-Textfield--sizeXL { --spectrum-textfield-height: var(--spectrum-component-height-300); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200); + --spectrum-textfield-width: var(--spectrum-field-default-width-extra-large); + --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-medium-size-extra-large); + + --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-300); + --spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-300); + --spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-300); + --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-300); --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-300); + + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-text-to-visual-300); --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-300); + + --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-text-to-visual-300); --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large); --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-300); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-200); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large); - /* Text Area / Multiline size extra large */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-300); + --spectrum-textfield-font-size: var(--spectrum-font-size-300); + + --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-300); + --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-component-top-to-text-300); } /********* TEXT FIELD and TEXT AREA Outer Wrapper *********/ @@ -237,6 +231,7 @@ /****** Validation Icon - Valid ✅ ******/ .spectrum-Textfield.is-valid & { + /* validation icon does not need to account for border width */ inset-block-start: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid)); inset-block-end: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid)); inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)); @@ -246,6 +241,8 @@ /****** Validation Icon - Invalid ⚠️ ******/ .spectrum-Textfield.is-invalid & { block-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)); + + /* validation icon does not need to account for border width */ inline-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)); inset-block-start: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid)); inset-block-end: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid)); @@ -258,18 +255,6 @@ /* Disabled validation icons are transparent */ color: transparent; } - - .spectrum-Textfield--quiet & { - padding-inline-end: 0; - } - - .spectrum-Textfield--quiet.is-valid & { - inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-quiet-valid, var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid)); - } - - .spectrum-Textfield--quiet.is-invalid & { - inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-quiet-invalid, var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid)); - } } /********* Child Component - Label *********/ @@ -280,24 +265,27 @@ grid-column: 1 / span 1; } - .spectrum-Textfield--quiet & { - margin-block-end: var(--mod-textfield-label-spacing-block-quiet, var(--spectrum-textfield-label-spacing-block-quiet)); - } - .spectrum-Textfield.is-disabled & { - color: var(--spectrum-textfield-text-color-disabled); + color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); } } /********* Child Component - Help Text *********/ -.spectrum-Textfield .spectrum-HelpText { - margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block)); - grid-row: 3; - grid-column: 1 / span 2; +.spectrum-HelpText { + .spectrum-Textfield & { + margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block)); + grid-row: 3; + grid-column: 1 / span 2; + } + + .spectrum-Textfield.is-disabled & .spectrum-HelpText-text { + color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + } } /********* Child Element - Character Count *********/ .spectrum-Textfield-characterCount { + color: var(--mod-textfield-character-count-color, var(--spectrum-textfield-character-count-color)); display: inline-flex; align-items: flex-end; justify-content: flex-end; @@ -305,15 +293,23 @@ margin-block-end: var(--mod-textfield-character-count-spacing-block, var(--spectrum-textfield-character-count-spacing-block)); margin-inline-start: var(--mod-textfield-character-count-spacing-inline, var(--spectrum-textfield-character-count-spacing-inline)); margin-inline-end: 0; - font-size: var(--mod-textfield-character-count-font-size, var(--spectrum-textfield-character-count-font-size)); - font-family: var(--mod-textfield-character-count-font-family, var(--spectrum-textfield-character-count-font-family)); - font-weight: var(--mod-textfield-character-count-font-weight, var(--spectrum-textfield-character-count-font-weight)); + font-size: var(--mod-textfield-font-size, var(--spectrum-textfield-font-size)); + font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family)); + font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight)); + font-style: var(--mod-textfield-font-style, var(--spectrum-textfield-font-style)); + line-height: var(--mod-textfield-line-height, var(--spectrum-textfield-line-height)); grid-row: 1; grid-column: 2 / span 1; padding-inline-end: calc(var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)) / 2); - .spectrum-Textfield--quiet & { - margin-block-end: var(--mod-textfield-character-count-spacing-block-quiet, var(--spectrum-textfield-character-count-spacing-block-quiet)); + .spectrum-Textfield.is-disabled & { + color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + } + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-textfield-line-height: var(--mod-textfield-line-height-cjk, var(--spectrum-textfield-line-height-cjk)); } } @@ -327,21 +323,21 @@ block-size: var(--mod-textfield-height, var(--spectrum-textfield-height)); padding-block-start: calc(var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); padding-block-end: calc(var(--mod-textfield-spacing-block-end, var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); - padding-inline: calc(var(--mod-textfield-spacing-inline, var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); vertical-align: top; /* used to align them correctly in forms. */ outline: none; - background-color: var(--spectrum-textfield-background-color); + background-color: var(--highcontrast-textfield-background-color, var(--spectrum-textfield-background-color)); border-width: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)); border-style: solid; border-color: var(--highcontrast-textfield-border-color, var(--mod-textfield-border-color, var(--spectrum-textfield-border-color))); border-radius: var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)); - transition: border-color var(--mod-texfield-animation-duration, var(--spectrum-texfield-animation-duration)) ease-in-out; + transition: border-color var(--mod-textfield-animation-duration, var(--spectrum-textfield-animation-duration)) ease-in-out; - font-size: var(--mod-textfield-placeholder-font-size, var(--spectrum-textfield-placeholder-font-size)); + font-size: var(--mod-textfield-font-size, var(--spectrum-textfield-font-size)); font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family)); font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight)); + font-style: var(--mod-textfield-font-style, var(--spectrum-textfield-font-style)); color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default))); text-overflow: ellipsis; @@ -349,6 +345,9 @@ grid-row: 2; grid-column: 1 / span 2; + /* prevents unexpected color changes for border in high contrast mode */ + forced-color-adjust: none; + /*** ↓ Browser Mitigations for Input ↓ ***/ /* Firefox and Safari - Remove the margin for input. */ margin: 0; @@ -375,20 +374,12 @@ &::placeholder { /* Normalize opacity between browsers. */ opacity: 1; - font-size: var(--mod-textfield-placeholder-font-size, var(--spectrum-textfield-placeholder-font-size)); + font-size: var(--mod-textfield-font-size, var(--spectrum-textfield-font-size)); font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family)); font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight)); + font-style: var(--mod-textfield-font-style, var(--spectrum-textfield-font-style)); color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default))); - transition: color var(--mod-texfield-animation-duration, var(--spectrum-texfield-animation-duration)) ease-in-out; - } - - /*** Input Placeholder Text - CJK ***/ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - &::placeholder { - font-style: normal; - } + transition: color var(--mod-textfield-animation-duration, var(--spectrum-textfield-animation-duration)) ease-in-out; } /* hover */ @@ -403,28 +394,41 @@ } /* mouse focus */ - .is-focused &, + .spectrum-Textfield.is-focused &, &:focus { border-color: var(--highcontrast-textfield-border-color-focus, var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus))); - color: var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus)); + color: var(--highcontrast-textfield-text-color-focus, var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus))); &::placeholder { - color: var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus)); + color: var(--highcontrast-textfield-text-color-focus, var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus))); } /* focus hover */ &:hover { - border-color: var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover)); - color: var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover)); + border-color: var(--highcontrast-textfield-border-color-focus-hover, var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover))); + color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))); + + &::placeholder { + color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))); + } } + } - &:hover::placeholder { - color: var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover)); + /* focus hover */ + .spectrum-Textfield:focus:hover &, + .spectrum-Textfield.is-focused:hover &, + .spectrum-Textfield.is-keyboardFocused:hover &, + &:focus:hover { + border-color: var(--highcontrast-textfield-border-color-focus-hover, var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover))); + color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))); + + &::placeholder { + color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))); } } /* keyboard focus */ - .is-keyboardFocused & { + .spectrum-Textfield.is-keyboardFocused & { border-color: var(--highcontrast-textfield-border-color-keyboard-focus, var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus))); color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))); @@ -439,39 +443,46 @@ } /*** Input Valid ✅ ***/ - .is-valid & { + .spectrum-Textfield.is-valid & { + /* creates spacing between text end and icon start, sum of icon start spacing + icon size + icon end spacing - border */ padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); color: var(--highcontrast-textfield-text-color-valid, var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid))); } /*** Input Invalid ⚠️ ***/ - .is-invalid & { + .spectrum-Textfield.is-invalid & { + /* creates spacing between text end and icon start, sum of icon start spacing + icon size + icon end spacing - border */ padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)) + var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); color: var(--highcontrast-textfield-text-color-invalid, var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid))); border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default))); } /* Invalid hover */ - .is-invalid:hover:not(.is-disabled) &, - .is-invalid &:hover:not(.is-disabled) { + .spectrum-Textfield.is-invalid:hover:not(.is-disabled, .is-readOnly) &, + .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) &:hover { border-color: var(--highcontrast-textfield-border-color-invalid-hover, var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover))); } /* Invalid mouse focus */ - .is-invalid.is-focused &, - .is-invalid:focus &, - .is-invalid &:focus { + .spectrum-Textfield.is-invalid.is-focused &, + .spectrum-Textfield.is-invalid:focus &, + .spectrum-Textfield.is-invalid &:focus { border-color: var(--highcontrast-textfield-border-color-invalid-focus, var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus))); /* focus hover */ &:hover { - border-color: var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover)); + border-color: var(--highcontrast-textfield-border-color-invalid-focus-hover, var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover))); } } + .spectrum-Textfield.is-invalid:focus:hover &, + .spectrum-Textfield.is-invalid.is-focused:hover &, + .spectrum-Textfield.is-invalid.is-keyboardFocused:hover & { + border-color: var(--highcontrast-textfield-border-color-invalid-focus-hover, var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover))); + } + /* invalid keyboard focus */ - .is-invalid.is-keyboardFocused &, - .is-invalid &:focus-visible { + .spectrum-Textfield.is-invalid.is-keyboardFocused & { border-color: var(--highcontrast-textfield-border-color-invalid-keyboard-focus, var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus))); } @@ -494,50 +505,31 @@ } } - /****** Input - Quiet 🤫 ******/ - .spectrum-Textfield--quiet & { - outline: none; - border-block-start-width: 0; - border-inline-width: 0; - - margin-block-end: var(--mod-textfield-spacing-block-quiet, var(--spectrum-textfield-spacing-block-quiet)); - padding-block-start: var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)); - padding-inline: var(--mod-textfield-spacing-inline-quiet, var(--spectrum-textfield-spacing-inline-quiet)); - background-color: transparent; - border-radius: 0; - - /* Treat all quiet inputs and text areas the same */ - resize: none; - overflow-y: hidden; - } - - /****** Input - Quiet 🤫 + Disabled 🚫 ******/ - .spectrum-Textfield--quiet.is-disabled &, - .spectrum-Textfield--quiet.is-disabled:hover &, - &:disabled { - background-color: transparent; - border-color: var(--spectrum-textfield-border-color-disabled); - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); - - &::placeholder { - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); - } - } - /****** Input ReadOnly ******/ .spectrum-Textfield.is-readOnly &, .spectrum-Textfield.is-readOnly:hover &, &:read-only { background-color: transparent; - border-color: transparent; + border-color: var(--highcontrast-textfield-border-color-readonly, transparent); color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))); outline: none; &::placeholder { color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))); background-color: transparent; + + .spectrum-Textfield.is-disabled &, + .spectrum-Textfield.is-disabled:hover & { + color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + } } } + + /****** ReadOnly & Disabled ******/ + .spectrum-Textfield.is-readOnly.is-disabled & { + border-color: var(--highcontrast-textfield-border-color-disabled, transparent); + color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + } } /*** Layout Variant - Side Label ***/ @@ -545,12 +537,6 @@ grid-template-columns: auto auto auto; grid-template-rows: auto auto; - /*** Focus Indicator ***/ - &::after { - grid-row: 1 / span 1; - grid-column: 2 / span 1; - } - .spectrum-FieldLabel { margin-inline-end: var(--mod-textfield-label-spacing-inline-side-label, var(--spectrum-textfield-label-spacing-inline-side-label)); grid-row: 1 / span 2; @@ -583,12 +569,17 @@ /*** Text Area ***/ .spectrum-Textfield--multiline { - --spectrum-textfield-input-line-height: normal; - .spectrum-Textfield-input { + line-height: var(--mod-textfield-line-height, var(--spectrum-textfield-line-height)); min-inline-size: var(--mod-text-area-min-inline-size, var(--spectrum-text-area-min-inline-size)); min-block-size: var(--mod-text-area-min-block-size, var(--spectrum-text-area-min-block-size)); resize: inherit; + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-textfield-line-height: var(--mod-textfield-line-height-cjk, var(--spectrum-textfield-line-height-cjk)); + } } &.spectrum-Textfield--grows { @@ -600,40 +591,6 @@ grid-row: 1 / auto; } } - - &.spectrum-Textfield--quiet .spectrum-Textfield-input { - min-block-size: var(--mod-text-area-min-block-size-quiet, var(--spectrum-text-area-min-block-size-quiet)); - - /* Treat all quiet inputs and text areas the same */ - resize: none; - overflow-y: hidden; - } -} - -.spectrum-Textfield--quiet { - &::after { - content: ""; - pointer-events: none; - position: absolute; - inset-block-end: calc(-1 * (var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)))); - inset-inline-start: 0; - inline-size: 100%; - block-size: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)); - } - - &.is-keyboardFocused::after { - background-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))); - } - - /*** Quiet Input Invalid ⚠️ ***/ - &.is-invalid .spectrum-Textfield-input { - padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid))); - } - - /*** Quiet Input Valid ✅ ***/ - &.is-valid .spectrum-Textfield-input { - padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid))); - } } /********* WHCM *********/ @@ -642,31 +599,33 @@ --highcontrast-textfield-border-color: CanvasText; --highcontrast-textfield-border-color-hover: Highlight; --highcontrast-textfield-border-color-focus: Highlight; - --highcontrast-textfield-border-color-keyboard-focus: CanvasText; + --highcontrast-textfield-border-color-keyboard-focus: Highlight; + --highcontrast-textfield-border-color-focus-hover: Highlight; --highcontrast-textfield-focus-indicator-color: Highlight; + --highcontrast-textfield-background-color: Canvas; + + --highcontrast-textfield-background-color-disabled: Canvas; + --highcontrast-textfield-border-color-disabled: GrayText; + + --highcontrast-textfield-border-color-readonly: CanvasText; --highcontrast-textfield-border-color-invalid-default: Highlight; --highcontrast-textfield-border-color-invalid-hover: Highlight; --highcontrast-textfield-border-color-invalid-focus: Highlight; --highcontrast-textfield-border-color-invalid-keyboard-focus: Highlight; + --highcontrast-textfield-border-color-invalid-focus-hover: Highlight; - --highcontrast-textfield-text-color-valid: CanvasText; - --highcontrast-textfield-text-color-invalid: CanvasText; - - .spectrum-Textfield-input { + &, + .spectrum-Textfield-input::placeholder { + --highcontrast-textfield-text-color-valid: CanvasText; + --highcontrast-textfield-text-color-invalid: CanvasText; --highcontrast-textfield-text-color-default: CanvasText; --highcontrast-textfield-text-color-hover: CanvasText; + --highcontrast-textfield-text-color-focus: CanvasText; + --highcontrast-textfield-text-color-focus-hover: CanvasText; --highcontrast-textfield-text-color-keyboard-focus: CanvasText; --highcontrast-textfield-text-color-disabled: GrayText; --highcontrast-textfield-text-color-readonly: CanvasText; - - &::placeholder { - --highcontrast-textfield-text-color-default: GrayText; - --highcontrast-textfield-text-color-hover: GrayText; - --highcontrast-textfield-text-color-keyboard-focus: GrayText; - --highcontrast-textfield-text-color-disabled: GrayText; - --highcontrast-textfield-text-color-readonly: CanvasText; - } } } } diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js index e255eeae0ee..a46a2feb919 100644 --- a/components/textfield/stories/template.js +++ b/components/textfield/stories/template.js @@ -24,7 +24,6 @@ import "../index.css"; * @property {boolean} [isValid=false] * @property {boolean} [multiline=false] * @property {boolean} [grows=false] - * @property {boolean} [isQuiet=false] * @property {boolean} [isFocused=false] * @property {boolean} [isDisabled=false] * @property {boolean} [isRequired=false] @@ -63,14 +62,15 @@ export const Template = ({ isValid = false, multiline = false, grows = false, - isQuiet = false, isFocused = false, isDisabled = false, + isHovered = false, isRequired = false, + isRequiredWithoutAsterisk = false, isReadOnly = false, isKeyboardFocused = false, isLoading = false, - displayLabel = false, + displayLabel = true, labelPosition = "top", labelText, characterCount, @@ -91,12 +91,17 @@ export const Template = ({ // Override icon name and set if the field is invalid or valid if (isInvalid) { - iconName = "Alert"; + iconName = "AlertTriangle"; iconSet = "workflow"; } else if (isValid) { - iconName = "Checkmark"; iconSet = "ui"; + iconName = "Checkmark" + ({ + s: "75", + m: "100", + l: "200", + xl: "300", + }[size] || "100"); } return html` @@ -107,10 +112,10 @@ export const Template = ({ typeof size !== "undefined", [`${rootClass}--multiline`]: multiline, [`${rootClass}--grows`]: grows, - [`${rootClass}--quiet`]: isQuiet, [`${rootClass}--sideLabel`]: labelPosition === "side", "is-invalid": isInvalid, "is-valid": isValid, + "is-hover": isHovered, "is-focused": isFocused, "is-keyboardFocused": isKeyboardFocused, "is-disabled": isDisabled, @@ -149,6 +154,7 @@ export const Template = ({ size, label: labelText, isDisabled, + isRequired: isRequired && !isRequiredWithoutAsterisk, }, context))} ${when(typeof characterCount !== "undefined", () => html` ${characterCount}`)} @@ -215,7 +221,7 @@ export const Template = ({ }; export const HelpTextOptions = (args, context) => Container({ - direction: "column", + direction: "row", withBorder: false, withHeading: false, content: html` @@ -235,67 +241,62 @@ export const HelpTextOptions = (args, context) => Container({ export const TextFieldOptions = (args, context) => Container({ direction: "row", withBorder: false, - wrapperStyles: { - rowGap: "12px", - }, content: html` ${Container({ withBorder: false, - containerStyles: { - "gap": "8px", - }, heading: "Default", content: Template(args, context) }, context)} ${Container({ withBorder: false, - containerStyles: { - "gap": "8px", - }, - heading: "Invalid", - content: Template({...args, isInvalid: true}, context) + heading: "Focused", + content: Template({...args, isFocused: true}, context) }, context)} ${Container({ withBorder: false, - containerStyles: { - "gap": "8px", - }, - heading: "Focused", - content: Template({...args, isFocused: true}, context) + heading: "Keyboard focused", + content: Template({...args, isKeyboardFocused: true}, context) + }, context)} + ` +}, context); + +export const InvalidOptions = (args, context) => Container({ + direction: "row", + withBorder: false, + withHeading: false, + content: html` + ${Container({ + withBorder: false, + heading: "Invalid", + content: Template({...args, isInvalid: true}, context) }, context)} ${Container({ withBorder: false, - containerStyles: { - "gap": "8px", - }, heading: "Invalid, focused", content: Template({...args, isInvalid: true, isFocused: true}, context) }, context)} ` }, context); -export const KeyboardFocusTemplate = (args, context) => Container({ - direction: "column", +export const RequiredOptions = (args, context) => Container({ + direction: "row", withBorder: false, - wrapperStyles: { - rowGap: "12px", - }, + withHeading: false, content: html` ${Container({ withBorder: false, - containerStyles: { - "gap": "8px", - }, - heading: "Default", - content: Template({...args, isKeyboardFocused: true}, context) + heading: "Required with (required) label", + content: Template({...args, isRequired: true, isRequiredWithoutAsterisk: true, labelText: "Email address (required)", value: "abc@adobe.com", helpText: "Email address is required"}, context), + }, context)} + ${Container({ + withBorder: false, + heading: "Required with asterisk", + content: Template({...args, isRequired: true, labelText: "Email address", value: "abc@adobe.com", helpText: "Email address is required"}, context), }, context)} ${Container({ withBorder: false, - containerStyles: { - "gap": "8px", - }, - heading: "Quiet", - content: Template({...args, isKeyboardFocused: true, isQuiet: true}, context) + heading: "Required with asterisk, side label", + content: Template({...args, isRequired: true, labelPosition: "side", labelText: "Email address", value: "abc@adobe.com", helpText: "Email address is required"}, context), }, context)} ` }, context); diff --git a/components/textfield/stories/textarea.stories.js b/components/textfield/stories/textarea.stories.js index 340820af2db..bffb2b7b3f2 100644 --- a/components/textfield/stories/textarea.stories.js +++ b/components/textfield/stories/textarea.stories.js @@ -2,12 +2,15 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; -import { HelpTextOptionsTextArea, KeyboardFocusTemplate, Template, TextAreaOptions } from "./textarea.template.js"; +import { HelpTextOptionsTextArea, InvalidOptionsTextArea, RequiredOptionsTextArea, Template, TextAreaOptions } from "./textarea.template.js"; import { TextAreaGroup } from "./textarea.test.js"; import { default as Textfield } from "./textfield.stories.js"; /** - * A text area is multi-line text field using the `