From 3656c8deba56f0c478af92991aeb1fb0621d0f33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Rio?= Date: Thu, 29 Aug 2024 15:25:34 +0100 Subject: [PATCH] feat(input-password-toggle): fixed color and icon sizes. (#29808) Issue number: resolves ROU-4860 --------- ## What is the current behavior? Icon color and sizes are not ok. ## What is the new behavior? - Fixed Icon color into `neutral-800` - Set the icon size with `16px` ## Does this introduce a breaking change? - [ ] Yes - [X] No ## Other information This will complete the [PR](https://github.com/ionic-team/ionic-framework/pull/29787) [Basic Preview](https://ionic-framework-p6zymvqpo-ionic1.vercel.app/src/components/input-password-toggle/test/basic?ionic:theme=ionic) --------- Co-authored-by: Brandy Carney --- .../input-password-toggle.ionic.scss | 14 +++- .../test/basic/index.html | 21 ++++- .../test/basic/input-password-toggle.e2e.ts | 17 ++++ ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 824 -> 585 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 696 -> 516 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 854 -> 575 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 590 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 509 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 573 bytes ...large-size-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 637 bytes ...arge-size-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 748 bytes ...large-size-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 624 bytes ...-large-size-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 777 bytes ...large-size-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 878 bytes ...-large-size-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 741 bytes .../test/input-password-toggle.spec.tsx | 4 +- .../components/input/input.ionic.outline.scss | 2 +- core/src/components/input/input.ionic.scss | 75 +++++++++++------- 18 files changed, 96 insertions(+), 37 deletions(-) create mode 100644 core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input-password-toggle/input-password-toggle.ionic.scss b/core/src/components/input-password-toggle/input-password-toggle.ionic.scss index c5ce03da15..7f6e956b3d 100644 --- a/core/src/components/input-password-toggle/input-password-toggle.ionic.scss +++ b/core/src/components/input-password-toggle/input-password-toggle.ionic.scss @@ -3,10 +3,18 @@ // Ionic Input Toggle Password // -------------------------------------------------- -:host ion-button.button-has-icon-only { - --padding-end: inherit; - --color: #{globals.$ionic-color-neutral-500}; +:host ion-button { + --color: #{globals.$ionic-color-neutral-800}; --margin-end: calc(-1 * var(--padding-end)); + --padding-end: inherit; + --icon-size: #{globals.dynamic-font(16px)}; @include globals.margin(0, var(--margin-end), 0, 0); + + width: var(--size); + height: var(--size); + + ion-icon { + font-size: var(--icon-size); + } } diff --git a/core/src/components/input-password-toggle/test/basic/index.html b/core/src/components/input-password-toggle/test/basic/index.html index 558cc9a973..f373be7ce8 100644 --- a/core/src/components/input-password-toggle/test/basic/index.html +++ b/core/src/components/input-password-toggle/test/basic/index.html @@ -19,6 +19,9 @@ grid-row-gap: 20px; grid-column-gap: 20px; } + .margin-top { + margin-top: 20px; + } h2 { font-size: 12px; font-weight: normal; @@ -47,7 +50,7 @@
-

Default

+

Default - Size Medium

+
+

Default - Size Large

+ + + +
+
+

Custom Icon

diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts index 375d54dee8..ee45ad2a6d 100644 --- a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts +++ b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts @@ -47,4 +47,21 @@ configs({ modes: ['md', 'ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti await expect(inputPasswordToggle).toHaveScreenshot(screenshot('input-password-toggle')); }); }); + + test.describe(title('input password toggle - large size: rendering'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const inputPasswordToggle = page.locator('ion-input-password-toggle'); + + await expect(inputPasswordToggle).toHaveScreenshot(screenshot('input-password-toggle-large-size')); + }); + }); }); diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Chrome-linux.png index ac5c7692870026a569f74af7a1c4acaccbf6bf94..251ad7817e6aaced072663dda3ca07c2892d2e85 100644 GIT binary patch literal 585 zcmV-P0=E5$P)Px%14%?dR7i>Km%q!hP!z|nmRb=)I3-2S5=28oL^M7$RYNq`&{DMY$FvAeL2WhU z6!Zr~LxV&)m4PJG>JJQ3^BDw}m-nR~&+|@xx5GX6!@Zot`EnpZ5Wok5VHiP>a5x-^ zM556sj^ikb0stV_bwA-cj$_-lWm%5n=(?_|YA6&U2;x)jpSs;{hGG0X*Ax63(106o z1MYw2hTpie-EIXzxL&V{qQEemOeRT^EEEbfP5U`7&z<3LC`r=S*B3=mnM?)%Aj|UU zbXqQ#*=)Ao@4v$x4u_FQq}^`YwmqB8L{S6)WV6|3vk5`aWHNCaXD}GN#${PH7K?Q{ z9RL8wagWENR;vL3c%DZPq}%NR07j#cWm&ym@7cPEqNpee!!UkWuh&VEBuTQ-Xm}3? z05A+ANz&nPc$Ry=-(A;55X1{12=b3y*Y!V*q9}%8rfELQ&FAy!bb342$i^?_n7B>V~2y$8i{jc`fmBpDh-P z&1O?Bmy5+>G#XV^RZ*1V@wi^EE0s#MTJ_T2@l8$BR;$%+x07W#6bhwMsa!5sDwX2# zxStdFalj3@0rziu$B+Ll(=-jk_>}AKEw*jzx~^#&f*^@R0{X!{D;A64IPQ7XZ_UYX Xg|ziG)VG~f00000NkvXXu0mjffy)V( literal 824 zcmV-81IPS{P)Px%@<~KNR9J=WnA=M-K^Vqo&C&Ic=C)gHN~G*fMFgu9NOYjf{>v`9^s4UC2s(fr zG_tU$U@^i@TjS{J?#^Zx1B-m|ftp|NfzRDM^A5j(oqc#`m|QLgdMby*0U>lcoh-|G zJf1)x;BvVD08F#l>@CT%EJBEBnwDi@j1fWu0|Udu!@VbcSG``ZR;#~3qH_EWrcdgV z`lO!9`IE&6q37r4kB<*c(+DA6uXk{8P!NRC(b4b4U8WI2=;-L^<>duJCRY4FsChhI*Jv=(05LH#_(B*O^lSx%oZ*FcnAOQeGQEWAJU5601I+SV{hV6txAqZimQfZeoG&B^A zM$gX92qCt~^ZeV}TWi_t>ni|&<2c(nJUnC=W_EVAgN%sBE_R^)oST(Eun-Q1?M%{jo#VLi@o@lvrfDZ9CyJsh zE-pr+QM$03j4(~}{QUg-`dSc#NF>5>9K$elO4GDbsiY{1D2lQyw|=nhyRdq_etUa+ zcXx*|woM4(6?nhU4*w^Z6`~L}fA=v(WFw zT(4K`_xtxk)h3L}`>1UeYRb^&FB#iY>t5^LUlrg@d_JFJyH-EOhjY%rNjP%4#Buh(6$HuQ42px5h3MU6%S z@pv5Ez~_$wS)8D1wF>6(bt=&5bR)O;`)h`dyQ!MWo&Xf~UA zP*y_-D^<~Mx6$o(-Ttx9eBYbHO0}Uh%y2mT0VROdGXjTlQOcW0BxL6d8ivMEb8d>p z^2*CR%CFs1WhAPN%W~I$VWzrQWNZ z{hQ5ZBCq%6KzS>bO7J%aFZ|i(fmHe|EKqqZ^pOI#r+&TRE8oiNOD@03|6gAI{XZNI z`roI|NU9DxPNx$%+=C7iM>?TU2$4v{9kE#KeMdTv)c62qb#0M#{&^(;0000%>*Wm*khnXYPD&<|lt?6gK)nT~-|y3GHsi=K zkzVw>-Hs-c2`v^29-GVM_%q^ddsC;=VOvtEloBoM84L!rUa#4zU@*v#LM=eG+iiYU zC=?j%@kf|pk+6}CqUg8-`4s>&*imjg2dgO@y#9sP(B4S6KD`Fu{jUXMzpl4=DB zTMgSJM})+~#3Db0?643k4E@Lb3qR!wLZNJ|e`_g+hV(oZwz=-VvmvX@P$)i`h-Of9?xI7+@ e`A4sM%6@jnT%5a0000pZB diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Safari-linux.png index 11d6912ec987edbd33e4bd4e09690deb8d1fddd5..0d1b34be024e3129dc41a142946ae7f49d08bd0b 100644 GIT binary patch delta 568 zcmV-80>}N<2EPO$iBL{Q4GJ0x0000DNk~Le0000T0000f2m$~A07e?M1gtGv}2IOiFLb7qE@+H5x94N(;3@pybbUoaR9g+kG2 zG#m~C04PGpJ6u8t##q<&=ks~Lf8TGnn`xSfMB-iUpL#qVilTg;Ys>R5pf13Y2ie}VuZbikD) z31i&tb}5P)kH^R3vE6P101!enO*a}1LP)>ghY<2S56Jhl+wDYA)OFon3WA`jsvRqe zA_#&V>$)zA;%>M5@I1Uu|6OjOP{?Mp2qC+YVHkwa<#JI~6(LluRsjGQ<9@%N%jF7% zg5$nLqtQ;M10kGDCacxTf8K-RIKwaogMp@Lj{9b#N2Aety=GaqSS+T~X#l|KbdqIx zHk(x{m1eW)c+Orr91e@cV!z)jiUNM$i+a7D$z)zR?tkoZU9QXhN{5{ZOu+q$j~ zheLuOL{VH{Umxdvn*;!8Hkef2Bgx^faU( z2(GTK-rnA}x3@PoHeeXGEUVROsj3?N8X|VYyS%*gJa2!0pJmx^lWMh^q9~P0C7aDc z5M)`_+1XhT1cgEY$8kkby4`NMTwYsSgCNLpoNBddn&!d50Zr2om{^aGkB5hc&(F`X zQ?J*LkB?2$jD}$t)@rq*f1@MUbt7jq8l9Y+oSvSBVL0h7cN|BOq}A0`p66pzRnN!D0-gP>2xB8Ac%6g-0St8o}MNp*|zPv?$XlIxas>oj^pD_H1s?#b~2d^ zhGB+bOiD_p)A@W}k|fKrVv}JQMN!6A`t|iS@?+=v`WgVRxw-j`e;QFLl~5F|R;%$R z3xd$?cI)-JVHl3%wA<}QqrvlhI-QOJZf|d2US3M25=Bwp+k2X(ou8j4lgap?$g+HM za}%?9p5NQsLs1j}AW72Q-JK|kTU%Su6esuV>+9m;!gXCi5Q@bjf*_vfy}!SEp2xCm zG@Fl)k4B@>@Ar3ie|L+;Vw5;dHF6xM)oQidZ5+p!mzOz?BS{iP(a~t6>$<9{pP!#B z%kJ##a2ywBP2YtXh9S$cs;auK$0mkhxm+%v&#$bk{1iWfelG|D+qQk*CrJ{+u-}Ev zJIgs~PWm57f7I_ysOa`NdlCR32m;UZq8s&KFbKnNad8p;Crhsc7>40EPEiz1(|_xg b;CK1~`XuN2rLdVB00000NkvXXu0mjfj2W8f diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..68f3d24f21d84a7248c7957a734cebb2308fd4a0 GIT binary patch literal 590 zcmV-U0Px%2uVaiR9J=Wn7_-iP!z|nmS$EsG$lpN5=cWsL_A|ORYNq`&{DMY$G8YhL2fnV z6!Zr~LxV&)l|dxbR!TUeSD!&>dEteAJe%L`aL>IT&OHat;UKasgKr2$Q4GU^!61fV z;c%EF$yh7~06<*V{R#j=Xxp}BS+;FM2yeIB{eGt?>T7_1!hXO1CO{Abk|f*h zHUMBS7&wkotyTd5k|bdm*6DNr0K?(XvaD{m`*M;MMbR{kf;^90*M0s6j^m+F$TZED0l8c*l}e39BhO?QMv|oS z`FuK^rqk)Oene5sWHKzvzL{h}5aRK8v)R;jeLNm-w_6lNy(Hr}J{Sx_p^#Td@0aOp zHe0P$rBbO-D1^gdUDq{D+wb?wxA@nvOmSs7PbG=?o)1)X0`R+Q$6G0G> cNW^QLzvu|~CeM_DRR91007*qoM6N<$f~(vH%K!iX literal 0 HcmV?d00001 diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..55ff1c715d195200f6d4bc2336bf18cdf439a577 GIT binary patch literal 509 zcmV2D4fgxJ90T(CJW8b!s?{oT zx!k9tfmH&o>teZFqS0ueSS+GYD2Ui@x5IY3#dJDFrBXq&*?gO@V&Hr}V=x#B zsZ>_+4@;`iA)0l&h5l|T(B0VSXWlzb@?P)M#HX;6$S>{@@_uU}ptU5w{Au^aeUO=pxli=+>L? z4vJgXX5 z0wE9rA@HG~-*i5mPOH`Gcsv@00RYHmv*mKR)oL*e^KKLH!f_mDI-MR42ae-vwOTHh z0{~pFS5;LPi$%R&@AY~Jp@4wnIHS=hlgS8z5RFC^McHgN5JHw^d7gJ&cRU{7?{`rY z5kf(L@p$Zc-f%dC5YFfG^ZDHG_W=MHV}@Zmoem*HmSu#HAP9i`Fq)=Gl4RSqUlm2s zFbuz}>$)h4e%ZEdNs=^8`_?XcPt1>jN~KaP7BR;D5G>1LjBmG_VHguuW za#2-vxm-3Hjc&Iae4D;=I-S<*_3?PrbshXYXzg~pP$<0HgfF`g2!Rj?fe--TmoK~j zhY(_#=End+i0itJwZilQhgnM|fqDTL4;^R7h%aLRU`00000 LNkvXXu0mjf44VGr literal 0 HcmV?d00001 diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..4bd170eea42972c492a2ff3bba98104d113d449c GIT binary patch literal 637 zcmV-@0)qXCP)Px%H%UZ6R9J;${Qv(y!vF!MfwFki?oqo(?H;vz)b3Hchq&D=!EegkzIfyWf5OZ(jNS&dWa#Zn+;yF! zmdeW(@d_UPs^Tms+XV%A8L^wlz(8ysTYdZ|vc(Ml8DxZ*)|~hO7ua&{*Y7_JGJ*)x zZom99XYY6X#u8<>wK}T=KT`5#WO(%UUx)<0V#4;9sQB(#Z}DrdUu%o_^MGFRwpAjhdUum*m7jz&KL#_o>@|yxZQt`2y4O zpFvla_44E2a36ECF|02Wa@8lQxFoq;d;acU$)YdIP(v8vjzBYx-gq8Gabk;BlI@0o zCvX1ky7=qf%fF0_j0_A63ZhIddTjDyq!s97+D#QOQtR(gyGQLFwR_a=QM*U&rW61G XQT5eF`%L|I00000NkvXXu0mjfnI%DN literal 0 HcmV?d00001 diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..d8fd77a74468225c027a3d07e7d387ae97b1686a GIT binary patch literal 748 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 E05gztLjV8( literal 0 HcmV?d00001 diff --git a/core/src/components/input-password-toggle/test/input-password-toggle.spec.tsx b/core/src/components/input-password-toggle/test/input-password-toggle.spec.tsx index 9e771598e2..3586dd5cbb 100644 --- a/core/src/components/input-password-toggle/test/input-password-toggle.spec.tsx +++ b/core/src/components/input-password-toggle/test/input-password-toggle.spec.tsx @@ -1,10 +1,10 @@ import { h } from '@stencil/core'; import { newSpecPage } from '@stencil/core/testing'; +import { initialize } from '../../../global/ionic-global'; +import { Button } from '../../button/button'; import { Input } from '../../input/input'; import { InputPasswordToggle } from '../input-password-toggle'; -import { Button } from '../../button/button'; -import { initialize } from '../../../global/ionic-global'; describe('input password toggle', () => { it('should toggle input type when clicked', async () => { diff --git a/core/src/components/input/input.ionic.outline.scss b/core/src/components/input/input.ionic.outline.scss index d5af9301b9..9a00e21bce 100644 --- a/core/src/components/input/input.ionic.outline.scss +++ b/core/src/components/input/input.ionic.outline.scss @@ -153,5 +153,5 @@ // ---------------------------------------------------------------- :host(.input-fill-outline.has-focus) { - --border-width: #{tokens.$ionic-border-size-050}; + --border-width: #{globals.$ionic-border-size-050}; } diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss index 5891078f03..520705444a 100644 --- a/core/src/components/input/input.ionic.scss +++ b/core/src/components/input/input.ionic.scss @@ -1,4 +1,4 @@ -@use "../../foundations/ionic.vars.scss" as tokens; +@use "../../themes/ionic/ionic.globals.scss" as globals; @import "./input"; @import "./input.ionic.vars"; @import "./input.ionic.outline.scss"; @@ -7,17 +7,17 @@ // -------------------------------------------------- :host { - --color: #{tokens.$ionic-color-neutral-1000}; - --border-width: #{tokens.$ionic-border-size-025}; - --border-color: #{tokens.$ionic-color-neutral-300}; - --highlight-color-valid: #{tokens.$ionic-color-success-base}; - --highlight-color-invalid: #{tokens.$ionic-color-danger-base}; - --placeholder-color: #{tokens.$ionic-color-neutral-800}; + --color: #{globals.$ionic-color-neutral-1000}; + --border-width: #{globals.$ionic-border-size-025}; + --border-color: #{globals.$ionic-color-neutral-300}; + --highlight-color-valid: #{globals.$ionic-color-success-base}; + --highlight-color-invalid: #{globals.$ionic-color-danger-base}; + --placeholder-color: #{globals.$ionic-color-neutral-800}; --placeholder-opacity: 1; - --text-color-invalid: #{tokens.$ionic-color-danger-800}; - --background: #{tokens.$ionic-color-base-white}; + --text-color-invalid: #{globals.$ionic-color-danger-800}; + --background: #{globals.$ionic-color-base-white}; - font-size: tokens.$ionic-font-size-350; + font-size: globals.$ionic-font-size-350; } // Ionic Input Sizes @@ -35,6 +35,21 @@ min-height: 56px; } +// Ionic Input Password Toggle Sizes +// -------------------------------------------------- + +:host ion-input-password-toggle { + --size: #{globals.$ionic-scale-1000}; +} + +:host(.input-size-large) ion-input-password-toggle { + --size: #{globals.$ionic-scale-1200}; +} + +:host(.input-size-xlarge) ion-input-password-toggle { + --size: #{globals.$ionic-scale-1400}; +} + // Target area // -------------------------------------------------- :host .native-wrapper::after { @@ -74,13 +89,13 @@ width: 16px; height: 16px; - color: #{tokens.$ionic-color-neutral-500}; + color: globals.$ionic-color-neutral-500; } .input-clear-icon:focus-visible { - @include border-radius(tokens.$ionic-border-radius-100); + @include border-radius(globals.$ionic-border-radius-100); - outline: #{tokens.$ionic-border-size-050} solid #{tokens.$ionic-state-focus-1}; + outline: globals.$ionic-border-size-050 globals.$ionic-border-style-solid globals.$ionic-state-focus-1; opacity: 1; } @@ -109,12 +124,12 @@ // ---------------------------------------------------------------- .label-text-wrapper { - color: tokens.$ionic-color-neutral-1000; + color: globals.$ionic-color-neutral-1000; - font-size: tokens.$ionic-font-size-300; - font-weight: tokens.$ionic-font-weight-medium; + font-size: globals.$ionic-font-size-300; + font-weight: globals.$ionic-font-weight-medium; - line-height: tokens.$ionic-line-height-500; + line-height: globals.$ionic-line-height-500; } :host(.label-floating) .label-text-wrapper { @@ -127,16 +142,16 @@ .input-bottom { @include padding(7px, 0); - font-weight: tokens.$ionic-font-weight-medium; + font-weight: globals.$ionic-font-weight-medium; } .input-bottom .helper-text, .input-bottom .counter { - color: tokens.$ionic-color-neutral-800; + color: globals.$ionic-color-neutral-800; } :host(.has-focus.ion-valid) .helper-text { - color: tokens.$ionic-color-success-900; + color: globals.$ionic-color-success-900; } :host(.ion-touched.ion-invalid) .error-text { @@ -145,7 +160,7 @@ :host(.has-focus.ion-valid), :host(.ion-touched.ion-invalid) { - --border-width: #{tokens.$ionic-border-size-025}; + --border-width: #{globals.$ionic-border-size-025}; } // Input Hover @@ -153,7 +168,7 @@ @media (any-hover: hover) { :host(:hover) { - --border-color: #{tokens.$ionic-color-neutral-600}; + --border-color: #{globals.$ionic-color-neutral-600}; } } @@ -162,8 +177,8 @@ :host(.input-disabled) { // color for the text within the input - --color: #{tokens.$ionic-color-neutral-400}; - --background: #{tokens.$ionic-color-neutral-100}; + --color: #{globals.$ionic-color-neutral-400}; + --background: #{globals.$ionic-color-neutral-100}; pointer-events: none; } @@ -171,15 +186,15 @@ :host(.input-disabled:not(.ion-valid)) .input-bottom .helper-text, :host(.input-disabled) .input-bottom .counter, :host(.input-disabled) .label-text-wrapper { - color: tokens.$ionic-color-neutral-500; + color: globals.$ionic-color-neutral-500; } :host(.input-disabled.has-focus.ion-valid) { - --border-color: rgba(#{tokens.$ionic-color-success-base-rgb}, 0.6); + --border-color: rgba(#{globals.$ionic-color-success-base-rgb}, 0.6); } :host(.input-disabled.ion-touched.ion-invalid) { - --border-color: rgba(#{tokens.$ionic-color-danger-base-rgb}, 0.6); + --border-color: rgba(#{globals.$ionic-color-danger-base-rgb}, 0.6); } :host(.input-disabled.ion-color) { @@ -197,7 +212,7 @@ // ---------------------------------------------------------------- :host(.input-readonly) { - --background: #{tokens.$ionic-color-neutral-100}; + --background: #{globals.$ionic-color-neutral-100}; } // Input Highlight @@ -209,7 +224,7 @@ position: absolute; width: 100%; - height: tokens.$ionic-border-size-050; + height: globals.$ionic-border-size-050; transform: scale(0); @@ -222,7 +237,7 @@ // ---------------------------------------------------------------- :host(.has-focus) { - --border-color: #{tokens.$ionic-color-primary-base}; + --border-color: #{globals.$ionic-color-primary-base}; } :host(.has-focus) .input-highlight {