feat: remove extra vars, update docs (#370)

docs: add media queries docs

refactor: remove extra vars

remove extra vars - css breakpoints

BREAKING CHANGE: remove packages/vars/src/breakpoints.css

docs/10.breakpoints.stories.mdx

@@ -0,0 +1,54 @@
+<Meta title='Гайдлайны|Брейкпоинты' />
+
+## Брейкпоинты
+
+Контрольные точки для медиа запросов задаются в [mq.json](https://github.com/alfa-laboratory/core-components/blob/master/packages/mq/src/mq.json).
+
+| Название       | Значение        |
+| -------------- | --------------- |
+| `--mobile-s`   | 320px to 100%   |
+| `--mobile-m`   | 375px to 100%   |
+| `--mobile-l`   | 412px to 100%   |
+| `--mobile`     | 0 to 599px      |
+| `--tablet-s`   | 600px to 100%   |
+| `--tablet-m`   | 768px to 100%   |
+| `--tablet`     | 600px to 1023px |
+| `--desktop-s`  | 1024px to 100%  |
+| `--desktop-m`  | 1280px to 100%  |
+| `--desktop-l`  | 1440px to 100%  |
+| `--desktop-xl` | 1920px to 100%  |
+| `--desktop`    | 1024px to 100%  |
+
+### Пример использования в CSS
+
+Требования: версия `arui-scripts` выше `10.2.0`
+
+```css
+@media (--mobile-m) {
+    /* styles */
+}
+
+@media (--desktop-s) {
+    /* styles */
+}
+```
+
+### Пример использования в JS
+
+При особой необходимости, для рендеринга по условию в шаблонах используйте компонент [Mq](https://alfa-laboratory.github.io/core-components/master/?path=/docs/компоненты--mq), который основан на `window.matchMedia API`:
+
+```tsx
+import { Mq, useMatchMedia } from '@alfalab/core-components-mq';
+
+const Component = () => (
+    <Mq query='--mobile'>
+        <Button>Mobile button</Button>
+    </Mq>
+);
+
+const Component = () => {
+    const query = '--mobile';
+    const [matches] = useMatchMedia(query);
+    return `Matches ${query}: ${matches}`;
+};
+```

packages/vars/src/index.css

@@ -3,6 +3,5 @@
 @import './colors-indigo.css';
 @import './shadows-indigo.css';
 @import './gaps.css';
-@import './breakpoints.css';
 @import './typography.css';
 @import './mixins.css';