@@ -143,6 +143,7 @@ const InputComponent = React.forwardRef<HTMLInputElement, React.PropsWithChildre
143
143
display: inline-block;
144
144
box-sizing: border-box;
145
145
-webkit-box-align: center;
146
+ font-size: var(--input-font-size);
146
147
}
147
148
148
149
.input-container {
@@ -197,6 +198,11 @@ const InputComponent = React.forwardRef<HTMLInputElement, React.PropsWithChildre
197
198
--input-background: var(--color-background-900);
198
199
}
199
200
201
+
202
+ .font {
203
+ font-size: var(--input-font-size);
204
+ }
205
+
200
206
input.disabled {
201
207
cursor: not-allowed;
202
208
}
@@ -247,13 +253,11 @@ const InputComponent = React.forwardRef<HTMLInputElement, React.PropsWithChildre
247
253
-webkit-text-fill-color: var(--input-color) !important;
248
254
}
249
255
250
-
251
256
${ SCALE . padding ( 0 , value => `padding: ${ value . top } ${ value . right } ${ value . bottom } ${ value . left } ;` , undefined , 'with-label' ) }
252
257
${ SCALE . margin ( 0 , value => `margin: ${ value . top } ${ value . right } ${ value . bottom } ${ value . left } ;` , undefined , 'with-label' ) }
253
258
${ SCALE . w ( 1 , value => `width: ${ value } ;` , 'initial' , 'with-label' ) }
254
- ${ SCALE . font ( 0.875 , value => `font-size: ${ value } ;` , undefined , 'with-label' ) }
259
+ ${ SCALE . font ( 0.875 , value => `--input- font-size: ${ value } ;` , undefined , 'with-label' ) }
255
260
${ SCALE . h ( 2.25 , value => `--input-height: ${ value } ;` , undefined , 'with-label' ) }
256
- ${ SCALE . font ( 0.875 , value => `font-size: ${ value } ;` , undefined , 'font' ) }
257
261
${ SCALE . w ( 1 , value => `width: ${ value } ;` , 'initial' , 'input-container' ) }
258
262
${ SCALE . r ( 1 , value => `border-radius: ${ value } ;` , 'var(--layout-radius)' , 'input-wrapper' ) }
259
263
0 commit comments