A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
fix(input): adjust colors, padding, fonts & heights for ionic theme (#29520)
Issue number: internal --------- ## What is the current behavior? Input styles were slightly different from the ionic theme design. ## What is the new behavior? Updates the following: - The font size for input (14px) and labels (12px) - The font weight, line-height and color for the label - The padding for the label & helper message - Removes the label transform in order to set `font-size` directly - Updates the Sass variables to be referenced from `tokens` where they were not ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information The underline (undefined) fill looks off from the design but issue ROU-5151 exists for implementing it so I assume it will be fixed there. - [Shapes preview](https://ionic-framework-git-fix-input-placeholder-ionic1.vercel.app/src/components/input/test/shape?ionic:theme=ionic) - [Fills preview](https://ionic-framework-git-fix-input-placeholder-ionic1.vercel.app/src/components/input/test/fill?ionic:theme=ionic) ## Image Comparison | Before | After | UX Design | | ---| ---| ---| |  |  |  | > [!NOTE] > The design is not going to match perfectly because we are not using the Inter font in our tests.
B
Brandy Carney committed
7a4843b2dba06bb5b2ac79b1f26ad140c6da780c
Parent: bf8dfdb
Committed by GitHub <noreply@github.com>
on 5/22/2024, 3:58:26 PM