Skip to content

Commit

Permalink
Merge pull request #921 from VKCOM/4.47.0
Browse files Browse the repository at this point in the history 
4.47.0
  • Loading branch information
@8coon
8coon authored Jun 14, 2024
2 parents 05a7695 + 55ea123 commit 2222b5b
Show file tree
Hide file tree
Showing 11 changed files with 3,780 additions and 926 deletions.
2 changes: 2 additions & 0 deletions .editorconfig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
indent_style = space
indent_size = 2

[.nvmrc]
insert_final_newline = false
Expand Down
165 changes: 106 additions & 59 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@

**[Интерактивная документация](https://vkcom.github.io/vkui-tokens/)**

Этот репозиторий содержит токены единой дизайн-системы VKUI и
их значения для тем оформления различных проектов.
Этот репозиторий содержит токены единой дизайн-системы VKUI и их значения для тем оформления различных проектов.

Темы собираются в следующие форматы: `css`, `scss`, `less`, `pcss`, `styl`, `js`, `json`.

Expand Down Expand Up @@ -57,7 +56,7 @@ npm i --save @vkontakte/vkui-tokens@latest

```postcss
.class:hover {
background-color: var(--vkui--color_background--hover);
background-color: var(--vkui--color_background--hover);
}
```

Expand Down Expand Up @@ -108,114 +107,162 @@ import baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';
@import '~@vkontakte/vkui-tokens/themes/vkBase/index';

.myAwesomeClass {
background-color: $color-bg;
background-color: $color-bg;
}

.myAwesomeClass:hover {
background-color: $color-bg--hover;
background-color: $color-bg--hover;
}
```

### Используем pcss формат темы из пакета

1. Заходим в файл, где хотим использовать тему, и импортируем её:
1. Заходим в файл, где хотим использовать тему, и импортируем её:

@import "@vkontakte/vkui-tokens/themes/vkBase";
```css
@import '@vkontakte/vkui-tokens/themes/vkBase';
```

2. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:
2. Заходим в файл темы, смотрим какие там есть переменные и используем их, например:

width: var(--size-content-block-width);
```css
width: var(--size-content-block-width);
```

3. Просто так ничего не заработает, нужно поставить postcss:
3. Просто так ничего не заработает, нужно поставить postcss:

npm i --save-dev postcss
```bash
npm i --save-dev postcss
```

Для запуска у postcss есть командная строка, которую тоже надо установить:
Для запуска у postcss есть командная строка, которую тоже надо установить:

npm i --save-dev postcss-cli
```bash
npm i --save-dev postcss-cli
```

4. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:
4. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:

```javascript
const postcssPresetEnv = require('postcss-preset-env');
```javascript
const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
plugins: [
require('postcss-import'),
require('precss'),
require('postcss-css-variables'),
require('postcss-custom-media'),
require('postcss-media-minmax'),
require('postcss-extend-rule'),
postcssPresetEnv({
stage: 0,
}),
require('postcss-color-mix'),
require('cssnano'),
],
};
```
module.exports = {
plugins: [
require('postcss-import'),
require('precss'),
require('postcss-css-variables'),
require('postcss-custom-media'),
require('postcss-media-minmax'),
require('postcss-extend-rule'),
postcssPresetEnv({
stage: 0,
}),
require('postcss-color-mix'),
require('cssnano'),
],
};
```

Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).
Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.
Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).
Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.

5. Устанавливаем все необходимые плагины, которые написали в конфиге, например:
5. Устанавливаем все необходимые плагины, которые написали в конфиге, например:

npm i --save-dev postcss-import
```bash
npm i --save-dev postcss-import
```

6. Настраиваем сборку postcss.
6. Настраиваем сборку postcss.

Сборка производится командой postcss через командную строку с необходимым параметрами.
Про них подробнее тут https://github.com/postcss/postcss-cli
Сборка производится командой postcss через командную строку с необходимым параметрами.
Про них подробнее тут https://github.com/postcss/postcss-cli

Пример команды:
Пример команды:

postcss src/main.css -c ./ --dir public
```bash
postcss src/main.css -c ./ --dir public
```

Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.
Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.

# Инструменты

## Локальная сборка своих тем инструментами библиотеки

Библиотека предоставляет интерфейсы и темы, от которых можно
наследоваться.
Библиотека предоставляет интерфейсы и темы, от которых можно наследоваться, и набор функций, которые позволяют собрать собственную тему в нужном формате.

Помимо этого, библиотека предоставляет набор функций, которые позволяют
собрать собственную тему в нужном формате.
Сборка темы подразумевает раскрытие наследования, генерацию цветов состояний (hover, active), округление и "пикселизация" значений и т.д.

Сборка темы подразумевает раскрытие наследования, генерацию цветов
состояний (hover, active), округление и "пикселизация" значений и т.д.
## Предварительная настройка

Инструменты адаптированы для запуска в `Node`-среде, и не подходят для генерации темы в рантайме (в браузерной среде).
Вам необходимо установить следующие пакеты для корректной работы скриптов генерации:

```bash
npm i --save-dev color common-tags css.escape
```

### Наследование от существующей темы

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

```typescript
import type { ThemeDescription } from '@vkontakte/vkui-tokens/interfaces/general';
import type { Adaptive } from '@vkontakte/vkui-tokens/interfaces/general/tools';
import { lightTheme as baseTheme } from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';
import {
lightTheme as baseTheme,
darkTheme,
} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk.js';
import { expandAll } from '@vkontakte/vkui-tokens/build/expandTheme';
import { compileStyles } from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';

interface MyNewAwesomeThemeDescription extends ThemeDescription {
myNewAwesomeToken: Adaptive<number>;
myNewAwesomeToken: Adaptive<number>;
}

const myNewAwesomeTheme: MyNewAwesomeThemeDescription = {
...baseTheme,
myNewAwesomeToken: {
regular: 20,
compact: 12,
},
...baseTheme,
// Название темы
themeName: 'myAwesomeTheme',
// Базовая часть названия темы (используется для генерации локального селектора, например: .vkui--myAwesomeTheme--light)
themeNameBase: 'myAwesomeTheme',
// Тема, от которой наследуются переменные, носит информационный характер
themeInheritsFrom: 'vkBase',
// Новый адаптивный токен
myNewAwesomeToken: {
regular: 20,
compact: 12,
},
colors: {
// Сохраняем остальные значения из темы
...baseTheme.colors,
// Переопределяем необходимую переменную
colorTextAccentThemed: '#ff0000',
},
};

// получаем разные типы тем на основе описания
const myNewAwesomeThemeDark: MyNewAwesomeThemeDescription = {
...myNewAwesomeTheme,
...darkTheme,
themeName: 'myAwesomeThemeDark',
themeNameBase: 'myAwesomeTheme',
themeInheritsFrom: 'vkBaseDark',
colors: {
...darkTheme.colors,
colorTextAccentThemed: '#00ff00',
},
};

// Получаем разные типы тем на основе описания
const { theme, pixelifyTheme, cssVarsTheme } = expandAll(myNewAwesomeTheme);
const { pixelifyTheme: pixelifyThemeDark } = expandAll(myNewAwesomeThemeDark);

// получаем CSS-строку со всеми переменными темы,
// которую можно вставить в DOM или сохранить в файл
// Для использования, например, в вебе вам подойдет компиляция "пикселяризованной" темы в формате '.css':
const cssString = compileStyles('css', pixelifyTheme);
const cssStringDark = compileStyles('css', pixelifyThemeDark);

// Полученные CSS-строки со всеми переменными тем можно вставить в DOM или сохранить в файл
```

# Roadmap
Expand Down
14 changes: 7 additions & 7 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@vkontakte/vkui-tokens",
"version": "4.46.0",
"version": "4.47.0",
"description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
"license": "MIT",
"homepage": "https://vkcom.github.io/vkui-tokens",
Expand Down Expand Up @@ -49,16 +49,16 @@
"@types/color": "3.0.6",
"@types/common-tags": "1.8.4",
"@types/fs-extra": "11.0.4",
"@types/lodash": "4.17.1",
"@types/lodash": "4.17.5",
"@types/node": "18.11.10",
"@types/react": "18.3.2",
"@types/react": "18.3.3",
"@types/react-dom": "18.3.0",
"@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.2.0",
"@vkontakte/icons": "2.114.0",
"@vkontakte/prettier-config": "0.1.0",
"@vkontakte/vk-bridge": "2.14.1",
"@vkontakte/vkjs": "1.1.2",
"@vkontakte/vkui": "6.0.2",
"@vkontakte/vkui": "6.1.1",
"babel-jest": "29.7.0",
"babel-loader": "9.1.3",
"clean-webpack-plugin": "4.0.0",
Expand All @@ -85,15 +85,15 @@
"husky": "9.0.11",
"jest": "29.7.0",
"jest-junit": "16.0.0",
"lint-staged": "15.2.2",
"lint-staged": "15.2.7",
"lodash": "4.17.21",
"prettier": "3.2.5",
"react": "18.3.1",
"react-dom": "18.3.1",
"rimraf": "5.0.5",
"rimraf": "5.0.7",
"style-loader": "4.0.0",
"terser-webpack-plugin": "5.3.10",
"ts-jest": "29.1.2",
"ts-jest": "29.1.4",
"ts-loader": "9.5.1",
"ts-morph": "20.0.0",
"ts-node": "10.9.2",
Expand Down
Loading

0 comments on commit 2222b5b

Please sign in to comment.