[DON'T MERGE] feat(ViewContainer): mvp of ViewContainer

[Yeti-or]

ViewContainer

Добавлен компонент ViewContainer , который позволяет пользователю явно указать, какой бэкграунд имеет контейнер, в котором лежат компоненты: onDark или onLight (если значение не передано, то по умолчанию токены переопределяться не будут).

Примеры

Код:

<div style={{ border: '1px solid coral' }}>
    <h3>Default view</h3>
    <ViewContainer>
        <Button {...props} />
    </ViewContainer>
</div>
<div style={{ border: '1px solid coral', background: 'black', color: 'white' }}>
    <h3>OnDark view</h3>
    <ViewContainer view="onDark">
        <Button {...props} />
    </ViewContainer>
</div>
<div style={{ border: '1px solid coral', background: 'white', color: 'black' }}>
    <h3>OnLight view</h3>
    <ViewContainer view="onLight">
        <Button {...props} />
    </ViewContainer>
</div>

Приведет к такому результату в светлой и темной теме

Примеры в живую лучше смотреть в new-hope-storybook

Объяснение работы

Достигается это за счёт переопределение токенов темы. Т.е. на ViewContainer в зависимости от пропса view применяется либо --text-primary: var(--on-dark-text-primary), либо --text-primary: var(--on-light-text-primary).
Такие мапинги планируется генерировать автоматически и поставлять вместе с темой (plasma_b2c, sdds_serv, и т.д.).

Текущие ограничения

• Пока пары токенов заданы в ручную, но отдельной задачей нужно будет доработать генератор тем, чтобы эти объекты (tokens = { onDark: '...', onLight: '...' } формировались автоамтически

• В библиотеках plasma-b2c и plasma-web в некоторых компонентах используются старые токены (с префиксом --plasma-colors-..., из-за чего механизм адаптации токенов не будет работать (ибо просто нет таких токенов как ---on-dark-plasma-colors). Поэтому отдельной задачей нужно будет перевести все компоненты в конифигах этих библиотек со старых - на новые

• Пока не понятно на сколько необходим inverse режим, по этому на первых итерациях предлагается это не поддерживать. В том числе то связано с тем, что inverse токены не всегда заданы в теме.

What/why changed

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
# or 
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]

[github-actions]

Theme Builder app deployed!

https://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-1221/

[github-actions]

Documentation preview deployed!

website:https://plasma.sberdevices.ru/pr/pr-1221/
b2c storybook: https://plasma.sberdevices.ru/pr/pr-1221/b2c-storybook/
new-hope storybook: https://plasma.sberdevices.ru/pr/pr-1221/new-hope-storybook/

[github-actions]

⚡ Component performance testing

Result: 🟢 OK

[neretin-trike]

кажется, что эта ответственность пользователя (дизайнера), который создаёт цветовую схему. Но он должен как-то знать об этих требованиях

[neretin-trike]

для plasma_b2c они выключены, по этому в итоговую тему не попали. Надо обговорить этот момент с дизайнерами

[github-actions]

⚡ Component performance testing

Result: 🟢 OK

[github-actions]

⚡ Component performance testing

Result: 💀 WASTED

Performance tests are broken.
If the current changes are the cause, please fix it immediately in this PR. If not, please schedule their repair.
For any questions, come to the Speed team.

[github-actions]

⚡ Component performance testing

Result: 🟢 OK