https://github.com/bem/yandex-ui-themer
A simple way to create your theme for @yandex/ui with Themekit
https://github.com/bem/yandex-ui-themer
themekit yandex-ui
Last synced: 10 months ago
JSON representation
A simple way to create your theme for @yandex/ui with Themekit
- Host: GitHub
- URL: https://github.com/bem/yandex-ui-themer
- Owner: bem
- License: other
- Created: 2020-11-01T12:50:45.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-10-12T06:42:39.000Z (over 4 years ago)
- Last Synced: 2025-03-20T19:21:42.792Z (over 1 year ago)
- Topics: themekit, yandex-ui
- Language: TypeScript
- Homepage: https://bem.github.io/yandex-ui-themer
- Size: 12.3 MB
- Stars: 13
- Watchers: 27
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# yandex-ui-themer
A simple way to create your theme for [@yandex/ui](https://github.com/bem/yandex-ui) with [Themekit](https://github.com/yarastqt/themekit)
## How to add new component to Theme Constructor
1. Update *@yandex/ui* to version where the component is introduced
```bash
npm i @yandex/ui@latest
```
2. Rebuild theme tokens
```bash
npm ci
npm run tokens:build
```
3. Add new component into *componentList* in *themekit.config.js*
> **_NOTE:_** It is better to add components in alphabetical order.
```javascript
const componentsList = [
"attach",
"badge",
...,
"componentName"
...
]
```
4. Add the showcase for the component in *src/components/Showcase/Showcases/ComponentShowcase.tsx*
> **_NOTE:_** Showcase should cover all possible tokens of the component. Otherwise, designers could not tune all of the tokens in Theme Constructor.
```javascript
import React from 'react';
import { Component } from '@yandex/ui/Component/desktop/bundle';
import { Headline } from '../../Headline';
export const ComponentShowcase = () => {
return (
ComponentName
)
}
```
5. Add the component showcase to *componentsMap* in *src/components/Showcase/Showcase.tsx*
```javascript
import { ComponentShowcase } from './Showcases/ComponentShowcase';
const componentsMap: Record = {
button: ButtonShowcase,
buttonGroup: ButtonGroupShowcase,
...,
component: ComponentShowcase,
...
}
```
## License
[MPL-2.0](https://github.com/bem/yandex-ui-themer/blob/master/LICENSE.md)