Skip to content

[Bug][Banner]: цвет текста при использовании imageTheme при mode="image" не соответствует описанию в JSDoc #8758

@inomdzhon

Description

@inomdzhon

Описание

Есть не соответствия в работе imageTheme при mode="image", что при imageTheme="light", что imageTheme="dark".

  • При imageTheme="light" текст не остается темным.
  • При imageTheme="dark" не меняется extraSubtitle

Версия

>= 4

Шаги воспроизведения

imageTheme="light"

  1. Перейти на https://vkui.io/components/banner

  2. В какой-нибудь из превью вставить:

    <Banner
      mode="image"
      imageTheme="light"
      title="Текст заголовока"
      subtitle="Текст подзаголовока"
      extraSubtitle="Текст экстра-подзаголовока"
      background={
        <div
          style={{
            backgroundColor: '#65c063',
            backgroundPosition: 'right bottom',
            backgroundSize: 320,
            backgroundRepeat: 'no-repeat',
          }}
        />
      }
    />
  3. Переключить на темную тему

  4. Цвет title, subtitle, extraSubtitle изменился на светлый

imageTheme="dark"

  1. Перейти на https://vkui.io/components/banner

  2. В какой-нибудь из превью вставить:

    <Banner
      mode="image"
      imageTheme="dark"
      title="Текст заголовока"
      subtitle="Текст подзаголовока"
      extraSubtitle="Текст экстра-подзаголовока"
      background={
        <div
          style={{
            backgroundColor: '#65c063',
            backgroundPosition: 'right bottom',
            backgroundSize: 320,
            backgroundRepeat: 'no-repeat',
          }}
        />
      }
    />
  3. Попереключать на светлую/темную тему

  4. Цвет extraSubtitle не соответствует subtitle

Ожидаемое поведение

imageTheme="light"

  1. Цвет title, subtitle, extraSubtitle остаётся тёмным

imageTheme="dark"

  1. Цвет extraSubtitle соответствует subtitle

Скриншоты

imageTheme="light"

Image Image

Светлая тема (текст темный) / Темная тема (текст стал светлым, хотя должен был оставаться тёмным)

imageTheme="dark"

Image Image

Светлая тема (текст extraSubtitle серый) / Темная тема (текст extraSubtitle серый)


Как должно быть?

mode="image" imageTheme="light"

  • для title заменить --vkui--color_text_primary на --vkui--color_text_primary_invariably
  • для subtitle и extraSubtitle задать --vkui--color_text_primary_invariably с opacity: 0.72
Image

mode="image" imageTheme="dark"

  • для extraSubtitle задать --vkui--color_text_contrast
Image

mode="image" imageTheme="auto"

Должен автоматически применять dark или light в зависимости от контекста.

Metadata

Metadata

Type

Projects

Status

✅ Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions