💄(react) make multi select height homogeneous

Some discussion appeared about the fact the multi select was changing
height when pill were selected, making this input having a bigger
height than others making it looks weird in a form comparing to the
others. Modifying the padding and font size make the input keep the
same height.

See #114

.changeset/tender-grapes-love.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+make multi select height homogeneous

packages/react/src/components/Forms/Select/index.scss

@@ -235,7 +235,7 @@
 
         &__pill {
           background-color: var(--c--components--forms-select--multi-pill-background-color);
-          padding: 0.375rem 0.5rem;
+          padding: 0.125rem 0.5rem;
           border-radius: var(--c--components--forms-select--multi-pill-border-radius);
           display: inline-flex;
           align-items: center;
@@ -243,6 +243,7 @@
           margin-right: 0.25rem;
           margin-bottom: 0.25rem;
           max-width: var(--c--components--forms-select--multi-pill-max-width);
+          font-size: var(--c--components--forms-select--multi-pill-font-size);
 
           > span {
             min-width: 0;
@@ -301,7 +302,7 @@
       .c__select__inner__value {
         .c__select__inner__value__input {
           // To match the height of the pills.
-          height: 2rem;
+          height: 1.375rem;
         }
       }
 

packages/react/src/components/Forms/Select/tokens.ts

@@ -24,4 +24,5 @@ export const tokens = (defaults: DefaultTokens) => ({
   "multi-pill-background-color": defaults.theme.colors["greyscale-200"],
   "multi-pill-border-radius": "2px",
   "multi-pill-max-width": "68%",
+  "multi-pill-font-size": defaults.theme.font.sizes.m,
 });

packages/react/src/cunningham-tokens.css

@@ -136,6 +136,7 @@
 	--c--components--forms-select--multi-pill-background-color: var(--c--theme--colors--greyscale-200);
 	--c--components--forms-select--multi-pill-border-radius: 2px;
 	--c--components--forms-select--multi-pill-max-width: 68%;
+	--c--components--forms-select--multi-pill-font-size: var(--c--theme--font--sizes--m);
 	--c--components--forms-radio--border-color: var(--c--theme--colors--greyscale-300);
 	--c--components--forms-radio--accent-color: var(--c--theme--colors--success-600);
 	--c--components--forms-radio--background-color: white;