Endre høyden på nve-select

[NVEJoel]

Vi har feil høyde på nve-select i forhold til Shoelace, vi bør avtale med designeren hvilken høyde det skal være. Designsystemet small -> height: 48 medium-> height: 48 large-> height: 56

Shoelace small -> height: 30 medium-> height: 40 large-> height: 50

[knutnve]

Vi følger dimensjonskalen som er laget for NVE. Ikke shoelace sin.

Vi går over til 3 størrelser.

• Small - 32 px
• Medium - 40 px
• Large - 48 px

Dette gjelder:

• NVE-Input

• NVE-select

• [ ] Fikser design i Figma

[gruble]

Flott! nve-select og nve-input bruker idag disse størrelsene (fra global.css):

--sl-input-height-small: var(--sizing-small);
--sl-input-height-medium: var(--sizing-medium);
--sl-input-height-large: var(--sizing-large);

I stedet for å endre disse, skulle vil heller justert på alle "størrelses-variablene" i designsystemet, slik at også nve-knappen kan få en standard-størrelse som passer bedre med Shoelace og de andre komponentene?

Om vi justerer ned alle størrelses-variablene ett hakk (8px), kan vi droppe sizing-4x-small som uansett ikke brukes av nve-komponentene idag, og evt. innføre sizing-2x-large hvis vi fortsatt har behov for 64px.

--sizing-2x-large: 4rem; /* 64px (tidligere --sizing-x-large) */
--sizing-x-large: 3.5rem; /* 56px (tidligere --sizing-large) */
--sizing-large: 3rem; /* 48px (tidligere --sizing-medium) */
--sizing-medium: 2.5rem; /* 40px (tidligere --sizing-small) */
--sizing-small: 2rem; /* 32px (tidligere --sizing-x-small) */
--sizing-x-small: 1.5rem; /* 24px (tidligere --sizing-2x-small) */
--sizing-2x-small: 1rem; /* 16px (tidligere --sizing-3x-small) */
--sizing-3x-small: 0.5rem; /* 8px (tidligere --sizing-4x-small) */

*/ 

Da kan nve-knappen få størrelser som passer bedre til størrelses-skalaen (size="small" vil bruke sizing-small i stedet for sizing x-small, som den gjør idag, og size="medium" kan være standard.

Det er flere komponenter som vil påvirkes hvis vi endrer alle sizing-variablene, men det er ikke så mange. Et kjapt søk viser at disse vil påvirkes: nve-tag, nve-switch og nve-textarea. Sjekk PR'en jeg har linket til denne saken.