docs: 📝 add colors, loading to storybook

client/.storybook/main.ts

@@ -2,7 +2,10 @@ import type { StorybookConfig } from '@storybook/nextjs';
 import path from 'path';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)'],
+  stories: [
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
+    '../docs/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
+  ],
   staticDirs: ['../public'],
   addons: [
     '@storybook/addon-links',

client/.storybook/preview.tsx

@@ -15,6 +15,24 @@ export const parameters = {
       color: /(background|color)$/i,
     },
   },
+
+  backgrounds: {
+    default: 'main',
+    values: [
+      {
+        name: 'main',
+        value: '#26292b',
+      },
+      {
+        name: 'white',
+        value: '#fff',
+      },
+      {
+        name: 'additional white',
+        value: '#fafafa',
+      },
+    ],
+  },
   viewport: {
     viewports: {
       '360': {

client/docs/colors.stories.mdx

@@ -0,0 +1,134 @@
+import {ColorItem, ColorPalette, Meta} from '@storybook/blocks';
+
+<Meta title="global/Colors" />
+
+<ColorPalette>
+  <ColorItem
+    title="Base"
+    subtitle="asdasd"
+    colors={{
+      'Black color': 'var(--black-color)',
+      'White colors': 'var(--white-color)',
+      'Card color': 'var(--cards-color)',
+      'BG color': 'var(--bg-color)'
+  }}
+  />
+  <ColorItem
+    title="Green"
+    subtitle="asdasd"
+    colors={{
+      'Dark color': 'var(--green-dark-color)',
+      'Normal color': 'var(--green-normal-color)',
+      'Active color': 'var(--green-active-color)',
+      'Bright color': 'var(--green-bright-color)'
+  }}
+  />
+  <ColorItem
+    title="Grey"
+    subtitle="asdasd"
+    colors={{
+      'Dark color': 'var(--grey-dark-color)',
+      'Normal color': 'var(--grey-normal-color)',
+      'Medium color': 'var(--grey-medium-color)',
+      'Light color': 'var(--grey-light-color)'
+  }}
+  />
+  <ColorItem
+    title="Red"
+    subtitle="asdasdasd"
+    colors={{
+      'Dark color': 'var(--red-dark-color)',
+      'Normal color': 'var(--red-normal-color)',
+      'Light color': 'var(--red-light-color)',
+      'Error color': 'var(--red-error-color)',
+    }}
+  />
+  <ColorItem
+    title="Additional"
+    subtitle="Red"
+    colors={{
+      'Dark/Red': 'var(--additional-dark-red-color)',
+      'Normal/Red': 'var(--additional-normal-red-color)',
+      'Light/Red': 'var(--additional-light-red-color)',
+    }}
+  />
+  <ColorItem
+    title="Additional"
+    subtitle="Orage"
+    colors={{
+      'Dark/Orange': 'var(--additional-dark-orange-color)',
+      'Normal/Orange': 'var(--additional-normal-orange-color)',
+      'Light/Orange': 'var(--additional-light-orange-color)',
+    }}
+  />
+  <ColorItem
+    title="Additional"
+    subtitle="Yellow"
+    colors={{
+      'Dark/Yellow': 'var(--additional-dark-yellow-color)',
+      'Normal/Yellow': 'var(--additional-normal-yellow-color)',
+      'Light/Yellow': 'var(--additional-light-yellow-color)',
+    }}
+  />
+  <ColorItem
+    title="Additional"
+    subtitle="Lime"
+    colors={{
+      'Dark/Lime': 'var(--additional-dark-lime-color)',
+      'Normal/Lime': 'var(--additional-normal-lime-color)',
+      'Light/Lime': 'var(--additional-light-lime-color)',
+    }}
+  />
+  <ColorItem
+    title="Additional"
+    subtitle="Green"
+    colors={{
+      'Dark/Green': 'var(--additional-dark-green-color)',
+      'Normal/Green': 'var(--additional-normal-green-color)',
+      'Light/Green': 'var(--additional-light-green-color)',
+    }}
+  />
+  <ColorItem
+    title="Additional"
+    subtitle="Sky"
+    colors={{
+      'Dark/Sky': 'var(--additional-dark-cyan-color)',
+      'Normal/Sky': 'var(--additional-normal-cyan-color)',
+      'Light/Sky': 'var(--additional-light-cyan-color)',
+    }}
+  />
+  <ColorItem
+    title="Additional"
+    subtitle="Blue"
+    colors={{
+      'Dark/Blue': 'var(--additional-dark-blue-color)',
+      'Normal/Blue': 'var(--additional-normal-blue-color)',
+      'Light/Blue': 'var(--additional-light-blue-color)',
+    }}
+  />
+  <ColorItem
+    title="Additional"
+    subtitle="Violet"
+    colors={{
+      'Dark/Violet': 'var(--additional-dark-violet-color)',
+      'Normal/Violet': 'var(--additional-normal-violet-color)',
+      'Light/Violet': 'var(--additional-light-violet-color)',
+    }}
+  />
+  <ColorItem
+    title="Additional"
+    subtitle="Pink"
+    colors={{
+      'Dark/Pink': 'var(--additional-dark-pink-color)',
+      'Normal/Pink': 'var(--additional-normal-pink-color)',
+      'Light/Pink': 'var(--additional-light-pink-color)',
+    }}
+  />
+  <ColorItem
+    title="Additional"
+    subtitle="White"
+    colors={{
+      'Additional/White color': 'var(--additional-white-color)',
+    }}
+  />
+</ColorPalette>

client/docs/loading.stories.mdx

@@ -0,0 +1,14 @@
+import {ColorItem, ColorPalette, Meta} from '@storybook/blocks';
+
+<Meta title="global/Loading" />
+
+<ColorPalette>
+  <ColorItem
+    title="Loading"
+    subtitle="asdasd"
+    colors={{
+      'Base color': 'var(--loading-base-color)',
+      'Highlight color': 'var(--loading-highlight-color)'
+  }}
+  />
+</ColorPalette>

client/src/shared/assets/icons.module.scss

@@ -1,6 +1,6 @@
 .iconItemStyle {
   border-radius: 4px;
-  background: #00000082;
+  background: rgba(38, 41, 43, 0.67);
   box-shadow: rgba(0, 0, 0, 0.10) 0 1px 3px 0;
   border: 1px solid hsla(203, 50%, 30%, 0.15);
   overflow: hidden;

client/src/shared/assets/icons.stories.mdx

@@ -3,7 +3,7 @@ import {IconGallery, IconItem, Meta} from '@storybook/blocks';
 import {ICON_OPTIONS} from './storybook';
 import styles from './icons.module.scss'
 
-<Meta title='global/iconography' />
+<Meta title='global/Iconography' />
 
 # Iconography