Skip to content

A simple way to create your theme for @yandex/ui with Themekit

License

Notifications You must be signed in to change notification settings

bem/yandex-ui-themer

Repository files navigation

yandex-ui-themer

A simple way to create your theme for @yandex/ui with Themekit

How to add new component to Theme Constructor

  1. Update @yandex/ui to version where the component is introduced
npm i @yandex/ui@latest
  1. Rebuild theme tokens
npm ci
npm run tokens:build
  1. Add new component into componentList in themekit.config.js

NOTE: It is better to add components in alphabetical order.

const componentsList = [
  "attach",
  "badge",
  ...,
  "componentName"
  ...
]
  1. 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.

import React from 'react';
import { Component } from '@yandex/ui/Component/desktop/bundle';

import { Headline } from '../../Headline';

export const ComponentShowcase = () => {
    return (
        <Headline>ComponentName</Headline>
        <div className="Showcase-Item">
            <Component />
        </div>
    )
}
  1. Add the component showcase to componentsMap in src/components/Showcase/Showcase.tsx
import { ComponentShowcase } from './Showcases/ComponentShowcase';

const componentsMap: Record<string, ComponentType> = {
    button: ButtonShowcase,
    buttonGroup: ButtonGroupShowcase,
    ...,
    component: ComponentShowcase,
    ...
}

License

MPL-2.0