diff --git a/README-ru.md b/README-ru.md index 7fe4c5a..8f33b42 100644 --- a/README-ru.md +++ b/README-ru.md @@ -12,13 +12,26 @@ npm install --save-dev @gravity-ui/illustrations #### Подготовка -Укажите значение для CSS-токена `--gil-color-underlay` в приложении: +Установите тему иллюстраций. Выполните любой из последующих шагов: + +##### Указание значений css-токенов с собственной цветовой палитрой + +Задайте значения для CSS-токенов из списка ниже в приложении: ```scss ---gil-color-underlay: rgba(240, 243, 245, 1); +--gil-color-object-base: rgb(255, 190, 92); +--gil-color-object-accent-heavy: rgb(211, 101, 7); +--gil-color-object-hightlight: rgb(255, 216, 157); +--gil-color-shadow-over-object: rgb(211, 158, 80); +--gil-color-background-lines: rgb(140, 140, 140); +--gil-color-background-shapes: rgb(242, 242, 242); +--gil-color-object-accent-light: rgb(255, 255, 255); +--gil-color-object-danger: rgb(255, 0, 61); ``` -В качестве альтернативы можно использовать SCSS-миксины: +##### Использование SCSS-миксинов с дефолтной gravity-темой + +Используйте следующие миксины для стилизации иллюстраций в разных темах: ```scss @import '@gravity-ui/illustrations/styles/theme.scss'; @@ -28,13 +41,32 @@ npm install --save-dev @gravity-ui/illustrations @include g-illustrations-colors-light; } + &_theme_light-hc { + @include g-illustrations-colors-light-hc; + } + &_theme_dark { @include g-illustrations-colors-dark; } + + &_theme_dark-hc { + @include g-illustrations-colors-dark-hc; + } } ``` -#### Использование +##### Альтернатива для проектов с предустановленной gravity-темой + +В качестве альтернативы, если `@gravity-ui/uikit` уже установлен в проекте и использована дефолтная тема, можно просто добавить импорт `gravityTheme.scss` в файл с глобальными стилями проекта: + +```scss +// существующий импорт определений gravity-стилей +import '@gravity-ui/uikit/styles/styles.css'; +// нужно добавить еще один импорт ниже +import '@gravity-ui/illustrations/styles/gravityTheme.scss'; +``` + +#### Использование компонентов ```js import NotFound from '@gravity-ui/illustrations/NotFound'; diff --git a/README.md b/README.md index 986ba43..b389537 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # @gravity-ui/illustrations · [![npm package](https://img.shields.io/npm/v/@gravity-ui/illustrations)](https://www.npmjs.com/package/@gravity-ui/illustrations) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/illustrations/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/illustrations/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/illustrations/) -## Install +## Installation ```shell npm install --save-dev @gravity-ui/illustrations @@ -12,7 +12,11 @@ npm install --save-dev @gravity-ui/illustrations #### Preparation -Define following css-tokens in your app: +Setup illustrations theme. Execute any of the following steps: + +##### Defining css-tokens with own colors pallete + +Define following css-tokens in app: ```scss --gil-color-object-base: rgb(255, 190, 92); @@ -25,7 +29,9 @@ Define following css-tokens in your app: --gil-color-object-danger: rgb(255, 0, 61); ``` -or use mixins in scss: +##### Using mixins with default gravity-theme in scss + +Use the following mixins for styling illustrations in different themes ```scss @import '@gravity-ui/illustrations/styles/theme.scss'; @@ -35,13 +41,23 @@ or use mixins in scss: @include g-illustrations-colors-light; } + &_theme_light-hc { + @include g-illustrations-colors-light-hc; + } + &_theme_dark { @include g-illustrations-colors-dark; } + + &_theme_dark-hc { + @include g-illustrations-colors-dark-hc; + } } ``` -Alternatively, if you are already have `@gravity-ui/uikit` package installed in your project, you can just import `gravityTheme.scss` to the root file with styles imports in your project: +##### Alternative for projects with pre-installed gravity theme + +Alternatively, if `@gravity-ui/uikit` is already installed in the project and default theme is used, you can just import `gravityTheme.scss` to the root file with styles in your project: ```scss // existing gravity styles definition @@ -50,7 +66,7 @@ import '@gravity-ui/uikit/styles/styles.css'; import '@gravity-ui/illustrations/styles/gravityTheme.scss'; ``` -#### Usage +#### Components usage ```js import NotFound from '@gravity-ui/illustrations/NotFound';