chore(storybook): add custom theme showcase

.storybook/src/ShowcaseCustom.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import {Flex, Icon, spacing} from '@gravity-ui/uikit';
+import {Meta, StoryFn} from '@storybook/react';
+
+import {ImportsTooltip} from './ImportsTooltip/ImportsTooltip';
+import {IllustrationMeta} from './types';
+
+import metadata from '../../metadata.json';
+
+import './customTheme.scss';
+
+const meta = {
+    title: 'Components',
+    id: 'components',
+    args: {
+        size: 300,
+    },
+} as Meta;
+
+export default meta;
+
+const items = (metadata.illustrations as IllustrationMeta[]).map((meta) => {
+    const Component = require(`../../src/components/${meta.componentName}.tsx`).default;
+
+    return {
+        meta,
+        Component,
+    };
+});
+
+export const CustomThemeComponents: StoryFn = ({size}) => {
+    return (
+        <div className={`custom ${spacing({p: 4})}`}>
+            <Flex gap={8} wrap>
+                {items.map(({meta, Component}) => {
+                    return (
+                        <ImportsTooltip key={meta.svgName} meta={meta}>
+                            <Icon data={Component} size={size} />
+                        </ImportsTooltip>
+                    );
+                })}
+            </Flex>
+        </div>
+    );
+};

.storybook/src/customTheme.scss

@@ -0,0 +1,25 @@
+.g-root {
+    &_theme_light .custom,
+    &_theme_light-hc .custom {
+        --gil-color-object-base: rgb(103, 55, 12);
+        --gil-color-object-accent-heavy: rgb(89, 50, 16);
+        --gil-color-object-hightlight: rgb(164, 135, 109);
+        --gil-color-shadow-over-object: rgb(89, 50, 16);
+        --gil-color-background-lines: rgb(133, 95, 61);
+        --gil-color-background-shapes: rgb(242, 242, 242);
+        --gil-color-object-accent-light: rgb(255, 255, 255);
+        --gil-color-object-danger: rgb(255, 4, 1);
+    }
+
+    &_theme_dark .custom,
+    &_theme_dark-hc .custom {
+        --gil-color-object-base: rgb(103, 55, 12);
+        --gil-color-object-accent-heavy: rgb(89, 50, 16);
+        --gil-color-object-hightlight: rgb(82, 47, 19);
+        --gil-color-shadow-over-object: rgb(118, 75, 36);
+        --gil-color-background-lines: rgb(103, 55, 12);
+        --gil-color-background-shapes: rgb(78, 74, 78);
+        --gil-color-object-accent-light: rgb(255, 255, 255);
+        --gil-color-object-danger: rgb(255, 4, 1);
+    }
+}