Motivation
Consistency + possibility to change the font easily without having to write long selectors to override the default font settings for components. It seems that font rules is one of few that does not have its component variables.
Example
In order to change the textarea font we have to do the following:
.str-chat__message-input .str-chat__message-textarea-container .str-chat__message-textarea {
font: var(--str-chat__body-text);
}
Easier would be something like:
.str-chat {
--str-chat__message-input-textarea-font: var(--str-chat__body-text);
}