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

Yeti-or commented 4 months ago

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

:sparkles: Test out this PR locally via: ```bash npm install @salutejs/caldera-online@0.66.0-canary.1221.9970496989.0 npm install @salutejs/plasma-asdk@0.109.0-canary.1221.9970496989.0 npm install @salutejs/plasma-b2c@1.351.0-canary.1221.9970496989.0 npm install @salutejs/plasma-new-hope@0.106.0-canary.1221.9970496989.0 npm install @salutejs/plasma-web@1.352.0-canary.1221.9970496989.0 npm install @salutejs/sdds-dfa@0.78.0-canary.1221.9970496989.0 npm install @salutejs/sdds-serv@0.79.0-canary.1221.9970496989.0 # or yarn add @salutejs/caldera-online@0.66.0-canary.1221.9970496989.0 yarn add @salutejs/plasma-asdk@0.109.0-canary.1221.9970496989.0 yarn add @salutejs/plasma-b2c@1.351.0-canary.1221.9970496989.0 yarn add @salutejs/plasma-new-hope@0.106.0-canary.1221.9970496989.0 yarn add @salutejs/plasma-web@1.352.0-canary.1221.9970496989.0 yarn add @salutejs/sdds-dfa@0.78.0-canary.1221.9970496989.0 yarn add @salutejs/sdds-serv@0.79.0-canary.1221.9970496989.0 ```

github-actions[bot] commented 4 months ago

Theme Builder app deployed!

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

github-actions[bot] commented 4 months ago

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[bot] commented 4 months ago

⚡ Component performance testing

Result: 🟢 OK

github-actions[bot] commented 2 months ago

⚡ Component performance testing

Result: 🟢 OK

github-actions[bot] commented 2 months ago

⚡ 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[bot] commented 2 months ago

⚡ Component performance testing

Result: 🟢 OK

salute-developers / plasma