[wcs-input]: migration design tokens

Description

L'idée est de réaliser une première implémentation de l'input avec les design token.

Pour cela, on choisit de rendre cette implémentation compatible avec l'ancienne implémentation afin de pouvoir migrer petit à petit tous les composants. Pour cela, on a adopté la stratégie suivante :

• On migre tout le code interne CSS des composants pour qu'il dépende uniquement des nouveau design token (component level)
• On ajoute la déclaration des design tokens de composants directement dans le code CSS du composant et on leur affecte les valeurs actuelles
• On prépare la suite on dupliquant cette partie dans une classe (par exemple .token-migration, mais cette fois-ci en utilisant les token des couches sous-jacente (sémantiques, primitives)

Exemple :

host {
    --button-font-size: 12px;
    --button-background-primary-active-color: var(--wcs-primary);
    --button-background-primary-default-color: var(--wcs-primary);


    span {
        color: var(--background-primary-active-color);
        font-size: var(--button-font-size);
        ...
    }

    ...

    &:host(.token-migration) {
        --button-font-size: var(--les-vrais-tokens);
        --background-primary-active-color: var(--les-vrais-tokens);
        --background-primary-default-color: var(--les-vrais-tokens);
    }
}