feat(core-components-themes): add theming example

docs/2.theming.stories.css

@@ -0,0 +1,76 @@
+.themeExample {
+    font-family: var(--font-family);
+}
+
+.cssExample {
+    margin: 10px 0 20px;
+    color: var(--color-light-text-secondary);
+}
+
+.container {
+    padding: 15px 30px;
+    margin: 20px 0;
+}
+
+@define-mixin theme-dark {
+    --switch-label-color: var(--color-dark-text-primary);
+    --checkbox-bg-color: var(--color-dark-bg-secondary);
+    --checkbox-border-color: var(--color-dark-border-secondary-inverted);
+    --checkbox-hover-bg-color: var(--color-dark-border-secondary-inverted);
+    --checkbox-hover-border-color: var(--color-dark-border-tertiary-inverted);
+    --checkbox-active-border-color: var(--color-dark-border-key);
+    --radio-bg-color: var(--color-dark-bg-secondary);
+    --checkbox-border-color: var(--color-dark-border-secondary-inverted);
+    --checkbox-hover-bg-color: var(--color-dark-border-secondary-inverted);
+    --checkbox-hover-border-color: var(--color-dark-border-tertiary-inverted);
+    --checkbox-active-border-color: var(--color-dark-border-key);
+}
+
+@define-mixin theme-light {
+    --switch-label-color: var(--color-light-text-primary);
+    --checkbox-bg-color: var(--color-light-bg-secondary);
+    --checkbox-border-color: var(--color-light-border-secondary-inverted);
+    --checkbox-hover-bg-color: var(--color-light-border-secondary-inverted);
+    --checkbox-hover-border-color: var(--color-light-border-tertiary-inverted);
+    --checkbox-active-border-color: var(--color-light-border-key);
+    --radio-bg-color: var(--color-light-bg-secondary);
+    --checkbox-border-color: var(--color-light-border-secondary-inverted);
+    --checkbox-hover-bg-color: var(--color-light-border-secondary-inverted);
+    --checkbox-hover-border-color: var(--color-light-border-tertiary-inverted);
+    --checkbox-active-border-color: var(--color-light-border-key);
+}
+
+@define-mixin theme-red-eye {
+    --switch-label-color: var(--color-dark-text-accent);
+    --checkbox-bg-color: transparent;
+    --checkbox-border-color: var(--color-dark-border-accent);
+    --checkbox-hover-bg-color: var(--color-dark-bg-negative-muted);
+    --checkbox-hover-border-color: var(--color-dark-border-accent);
+    --checkbox-active-border-color: var(--color-dark-border-key);
+    --radio-bg-color: transparent;
+    --radio-border-color: var(--color-dark-border-accent);
+    --radio-hover-bg-color: var(--color-dark-bg-negative-muted);
+    --radio-hover-border-color: var(--color-dark-border-accent);
+    --radio-active-border-color: var(--color-dark-border-key);
+}
+
+.dark {
+    @mixin theme-dark;
+
+    background-color: var(--color-dark-bg-primary);
+    color: var(--color-dark-text-primary);
+}
+
+.light {
+    @mixin theme-light;
+
+    background-color: var(--color-light-bg-primary);
+    color: var(--color-light-text-primary);
+}
+
+.redEye {
+    @mixin theme-red-eye;
+
+    background-color: var(--color-static-bg-dark);
+    color: var(--color-dark-text-accent);
+}

docs/2.theming.stories.mdx

@@ -1,7 +1,17 @@
-import { Description } from '@storybook/addon-docs/blocks';
+import { Description, Story, Preview } from '@storybook/addon-docs/blocks';
+import { Row } from 'storybook/blocks/grid';
+import cn from 'classnames';
+
+import { Typography } from '@alfalab/core-components-typography';
+import { Radio } from '@alfalab/core-components-radio';
+import { Checkbox } from '@alfalab/core-components-checkbox';
+
+import styles from './2.theming.stories.css';
 
 <Meta title='Принципы|Темизация' />
 
+<Story name="Описание" />
+
 ## 💅 Темизация
 
 Темы для компонентов доступны в пакете [@alfalab/core-components-themes](https://www.npmjs.com/package/@alfalab/core-components-themes).
@@ -175,4 +185,68 @@ module.exports = {
   });
   ```
 
+## Примеры
+
+export const css = `.dark {
+    --some-component-var: var(--some-new-color);
+}`;
+
+export const cssMixin = `@define-mixin theme-dark {
+    --some-component-var: var(--some-new-color);
+}
+.dark {
+    @mixin theme-dark;
+}`;
+
+<Story name="Примеры">
+    <div className={styles.themeExample}>
+        <div className={cn(styles.dark, styles.container)}>
+            <Typography.Title view="small">Dark block</Typography.Title>
+            <br/>
+            <Typography.Text tag="p">
+                Рекомендуемый способ темизации - переопределение нужных переменных по классу:
+                <pre className={styles.cssExample}>{css}</pre>
+            </Typography.Text>
+            <Typography.Text tag="p">
+                Это позволяет как перекрасить все компоненты на странице, так и применять тему только к выбранному блоку.
+            </Typography.Text>
+            <Typography.Text tag="p">
+                Для удобства, переопределения переменных можно оформить в виде миксина:
+                <pre className={styles.cssExample}>{cssMixin}</pre>
+            </Typography.Text>
+            <Row>
+                <Checkbox label="Чекбокс на темном фоне" checked />
+            </Row>
+            <Row>
+                <Radio label="Радио-кнопка на темном фоне" checked />
+            </Row>
+            <div className={cn(styles.light, styles.container)}>
+                <Typography.Title view="small">Light block</Typography.Title>
+                <Row>
+                    <Checkbox label="Чекбокс на светлом фоне" checked />
+                </Row>
+                <Row>
+                    <Radio label="Радио-кнопка на светлом фоне" checked />
+                </Row>
+            </div>
+            <div className={cn(styles.redEye, styles.container)}>
+                <Typography.Title view="small">Custom block</Typography.Title>
+                <Row>
+                    <Checkbox label="Чекбокс" />
+                </Row>
+                <Row>
+                    <Radio label="Радио-кнопка" />
+                </Row>
+                <Row>
+                    <Checkbox label="Чекбокс" checked />
+                </Row>
+                <Row>
+                    <Radio label="Радио-кнопка" checked />
+                </Row>
+            </div>
+        </div>
+    </div>
+</Story>
+
+
 *Если остались какие-либо вопросы или документация не кажется понятной - пожалуйста, свяжитесь с мейнтейнерами проекта или создайте issue.*