Skip to content

fix(tokens): input border color and radius tokens - #31468

Merged
BenOsodrac merged 2 commits into
nextfrom
ROU-13047-shapes
Sep 22, 2026
Merged

BenOsodrac merged 2 commits into
nextfrom
ROU-13047-shapes

Conversation

@BenOsodrac

@BenOsodrac BenOsodrac commented Sep 22, 2026 •

Copy link
Copy Markdown
Contributor

Issue number: internal


What is the new behavior?

This pull request makes minor updates to the styling of the input component, specifically adjusting the border color and border radius for certain input variants.

  • Input outline style:

    • Updated the --border-color CSS variable to use globals.$ion-border-input-default for better consistency with the design system. (core/src/components/input/input.ionic.outline.scss)
  • Input shape style:

    • Changed the --border-radius for the .input-shape-soft variant from globals.$ion-shape-soft-xl to globals.$ion-shape-soft-lg for a slightly less rounded appearance. (core/src/components/input/input.ionic.scss)

Does this introduce a breaking change?

  • Yes
  • No

Other information

@BenOsodrac BenOsodrac added package: core @ionic/core package package: react @ionic/react package type: bug a confirmed bug report labels Sep 22, 2026
@vercel

vercel Bot commented Sep 22, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
ionic-framework Ready Ready Preview Sep 22, 2026 5:01pm UTC

Request Review

@github-actions github-actions Bot removed the package: react @ionic/react package label Sep 22, 2026
@BenOsodrac
BenOsodrac marked this pull request as ready for review September 22, 2026 17:53
@BenOsodrac
BenOsodrac requested a review from a team as a code owner September 22, 2026 17:53
@BenOsodrac BenOsodrac added the package: react @ionic/react package label Sep 22, 2026
@BenOsodrac
BenOsodrac requested review from brandyscarney and removed request for OS-jacobbell September 22, 2026 17:56
@BenOsodrac
BenOsodrac merged commit f67bbfc into next Sep 22, 2026
55 checks passed
@BenOsodrac
BenOsodrac deleted the ROU-13047-shapes branch September 22, 2026 18:07
BenOsodrac added a commit that referenced this pull request Sep 22, 2026
Issue number: internal

---------

## What is the new behavior?

Port of #31468 (merged on `next`) to `before-next`.

- Input outline variant: border color now uses
`$ion-border-input-default` instead of `$ion-primitives-neutral-500`.
- Input soft shape variant: border radius now uses `$ion-shape-soft-lg`
instead of `$ion-shape-soft-xl`.

Snapshots are not copied from `next`, since they were generated against
a different input implementation. They need to be regenerated on this
branch with the "Update Reference Screenshots" workflow (component:
`input`).

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
Co-authored-by: ionitron <hi@ionicframework.com>
ShaneK pushed a commit that referenced this pull request Sep 25, 2026
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

This pull request makes minor updates to the styling of the input
component, specifically adjusting the border color and border radius for
certain input variants.

- Input outline style:
* Updated the `--border-color` CSS variable to use
`globals.$ion-border-input-default` for better consistency with the
design system. (`core/src/components/input/input.ionic.outline.scss`)

- Input shape style:
* Changed the `--border-radius` for the `.input-shape-soft` variant from
`globals.$ion-shape-soft-xl` to `globals.$ion-shape-soft-lg` for a
slightly less rounded appearance.
(`core/src/components/input/input.ionic.scss`)

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>

This branch was successfully deployed

1 active deployment
Preview — 3ce0e525 Deployed Sep 22, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package package: react @ionic/react package type: bug a confirmed bug report

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants