diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss index 56cdf5069e..f3ffaf1450 100644 --- a/packages/css/src/components/search-field/search-field.scss +++ b/packages/css/src/components/search-field/search-field.scss @@ -27,12 +27,12 @@ font-family: var(--ams-search-field-input-font-family); font-size: var(--ams-search-field-input-font-size); font-weight: var(--ams-search-field-input-font-weight); + inline-size: 100%; line-height: var(--ams-search-field-input-line-height); outline-offset: var(--ams-search-field-input-outline-offset); padding-block: var(--ams-search-field-input-padding-block); padding-inline: var(--ams-search-field-input-padding-inline); touch-action: manipulation; - width: 100%; @include text-rendering; @include reset-input; @@ -53,10 +53,10 @@ .ams-search-field__input::-webkit-search-cancel-button { appearance: none; background-image: var(--ams-search-field-input-cancel-button-background-image); + block-size: var(--ams-search-field-input-cancel-button-block-size); cursor: pointer; - height: var(--ams-search-field-input-cancel-button-height); + inline-size: var(--ams-search-field-input-cancel-button-inline-size); margin-inline-start: 0.5rem; - width: var(--ams-search-field-input-cancel-button-width); } @mixin reset-button { diff --git a/packages/css/src/components/select/select.scss b/packages/css/src/components/select/select.scss index 72db3c7e95..f8de4f618b 100644 --- a/packages/css/src/components/select/select.scss +++ b/packages/css/src/components/select/select.scss @@ -16,8 +16,8 @@ font-family: var(--ams-select-font-family); font-size: var(--ams-select-font-size); font-weight: var(--ams-select-font-weight); + inline-size: 100%; line-height: var(--ams-select-line-height); - max-inline-size: 100%; outline-offset: var(--ams-select-outline-offset); padding-block: var(--ams-select-padding-block); padding-inline: var(--ams-select-padding-inline); diff --git a/packages/css/src/components/text-area/text-area.scss b/packages/css/src/components/text-area/text-area.scss index 7c253dc504..96aeb5de55 100644 --- a/packages/css/src/components/text-area/text-area.scss +++ b/packages/css/src/components/text-area/text-area.scss @@ -18,14 +18,14 @@ font-family: var(--ams-text-area-font-family); font-size: var(--ams-text-area-font-size); font-weight: var(--ams-text-area-font-weight); + inline-size: 100%; line-height: var(--ams-text-area-line-height); - max-width: 100%; - min-height: var(--ams-text-area-min-height); + max-inline-size: 100%; // This prevents overflow when using the `cols` prop + min-block-size: var(--ams-text-area-min-block-size); outline-offset: var(--ams-text-area-outline-offset); padding-block: var(--ams-text-area-padding-block); padding-inline: var(--ams-text-area-padding-inline); touch-action: manipulation; - width: 100%; @include text-rendering; @include reset; @@ -69,5 +69,5 @@ } .ams-text-area--cols { - width: auto; + inline-size: auto; } diff --git a/packages/css/src/components/text-input/text-input.scss b/packages/css/src/components/text-input/text-input.scss index 22f3e1e938..e839902c41 100644 --- a/packages/css/src/components/text-input/text-input.scss +++ b/packages/css/src/components/text-input/text-input.scss @@ -18,12 +18,12 @@ font-family: var(--ams-text-input-font-family); font-size: var(--ams-text-input-font-size); font-weight: var(--ams-text-input-font-weight); + inline-size: 100%; line-height: var(--ams-text-input-line-height); outline-offset: var(--ams-text-input-outline-offset); padding-block: var(--ams-text-input-padding-block); padding-inline: var(--ams-text-input-padding-inline); touch-action: manipulation; - width: 100%; @include text-rendering; @include reset; diff --git a/proprietary/tokens/src/components/ams/search-field.tokens.json b/proprietary/tokens/src/components/ams/search-field.tokens.json index ba1f3e1f73..a8e2d86b39 100644 --- a/proprietary/tokens/src/components/ams/search-field.tokens.json +++ b/proprietary/tokens/src/components/ams/search-field.tokens.json @@ -5,11 +5,11 @@ "background-color": { "value": "{ams.color.primary-blue}" }, "color": { "value": "{ams.color.primary-white}" }, "outline-offset": { "value": "{ams.focus.outline-offset}" }, + "padding-block": { "value": "{ams.space.inside.xs}" }, + "padding-inline": { "value": "{ams.space.inside.xs}" }, "hover": { "background-color": { "value": "{ams.color.dark-blue}" } - }, - "padding-block": { "value": "{ams.space.inside.xs}" }, - "padding-inline": { "value": "{ams.space.inside.xs}" } + } }, "input": { "background-color": { "value": "{ams.color.primary-white}" }, @@ -28,9 +28,9 @@ "background-image": { "value": "url(\"data:image/svg+xml;utf8,\")" }, + "block-size": { "value": "{ams.text.level.5.font-size}" }, "color": { "value": "{ams.color.primary-blue}" }, - "height": { "value": "{ams.text.level.5.font-size}" }, - "width": { "value": "{ams.text.level.5.font-size}" } + "inline-size": { "value": "{ams.text.level.5.font-size}" } }, "hover": { "box-shadow": { diff --git a/proprietary/tokens/src/components/ams/text-area.tokens.json b/proprietary/tokens/src/components/ams/text-area.tokens.json index 7cf68b7d6d..fc9b9e488b 100644 --- a/proprietary/tokens/src/components/ams/text-area.tokens.json +++ b/proprietary/tokens/src/components/ams/text-area.tokens.json @@ -8,7 +8,7 @@ "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, "line-height": { "value": "{ams.text.level.5.line-height}" }, - "min-height": { + "min-block-size": { "value": "calc({ams.text.level.5.line-height} * 1em + 2 * {ams.text-area.padding-block})" }, "outline-offset": { "value": "{ams.focus.outline-offset}" },