indicator-ui 0.1.124 → 0.1.132

package/docs/CSSVariables/CSSThemeCustomize.md

@@ -1,161 +1,161 @@
-# CSS кастомизация
-
----
-
-## FormField
-
-- ### base
-    - `--ui-form-field-label-color`
-    - `--ui-form-field-required-color`
-    - `--ui-form-field-hint-color`
-    - `--ui-form-field-helper-link-color`
-    - `--ui-form-field-background-color`
-    - `--ui-form-field-border-color`
-    - `--ui-form-field-border-radius`
-    - `--ui-form-field-text-color`
-    - `--ui-form-field-placeholder-color`
-    - `--ui-form-field-box-shadow`
-
-- #### focus
-    - `--ui-form-field-focus-text-color`
-    - `--ui-form-field-focus-background-color`
-    - `--ui-form-field-focus-border-color`
-    - `--ui-form-field-focus-box-shadow`
-
-- #### disabled
-    - `--ui-form-field-disabled-text-color`
-    - `--ui-form-field-disabled-background-color`
-    - `--ui-form-field-disabled-border-color`
-
-- #### error
-    - `--ui-form-field-error-text-color`
-    - `--ui-form-field-error-hint-color`
-    - `--ui-form-field-error-background-color`
-    - `--ui-form-field-error-border-color`
-    - `--ui-form-field-error-box-shadow`
-
-- #### error focus
-    - `--ui-form-field-error-focus-text-color`
-    - `--ui-form-field-error-focus-background-color`
-    - `--ui-form-field-error-focus-border-color`
-    - `--ui-form-field-error-focus-box-shadow`
-
-## Dropdown
-
-- `--ui-dropdown-background-color`
-- `--ui-dropdown-border-color`
-- `--ui-dropdown-border-radius`
-- `--ui-dropdown-box-shadow`
-- `--ui-dropdown-title-color`
-
-### Dropdown Item
-
-- #### base
-    - `--ui-dropdown-item-border-radius` - сюда можно писать только одиночный радиус
-    - `--ui-dropdown-item-text-color`
-    - `--ui-dropdown-item-support-text-color`
-    - `--ui-dropdown-item-show-icon-color`
-- #### hover
-    - `--ui-dropdown-item-hover-background-color`
-    - `--ui-dropdown-item-hover-text-color`
-    - `--ui-dropdown-item-hover-support-text-color`
-    - `--ui-dropdown-item-hover-show-icon-color`
-- #### active
-    - `--ui-dropdown-item-active-background-color`
-    - `--ui-dropdown-item-active-text-color`
-    - `--ui-dropdown-item-active-support-text-color`
-    - `--ui-dropdown-item-active-show-icon-color`
-    - `--ui-dropdown-item-active-check-icon-color`
-- #### active hover
-    - `--ui-dropdown-item-active-hover-background-color`
-    - `--ui-dropdown-item-active-hover-text-color`
-    - `--ui-dropdown-item-active-hover-support-text-color`
-    - `--ui-dropdown-item-active-hover-show-icon-color`
-    - `--ui-dropdown-item-active-hover-check-icon-color`
-
-## Checkbox
-
-- ### base
-    - `--ui-checkbox-text-color`
-    - `--ui-checkbox-support-text-color`
-- ### focus
-    - `--ui-checkbox-focus-text-color`
-    - `--ui-checkbox-focus-support-text-color`
-- ### error
-    - `--ui-checkbox-error-text-color`
-    - `--ui-checkbox-error-support-text-color`
-- ### error focus
-    - `--ui-checkbox-error-focus-text-color`
-    - `--ui-checkbox-error-focus-text-color`
-- ### disabled
-    - `--ui-checkbox-disabled-text-color`
-    - `--ui-checkbox-disabled-support-text-color`
-- ### active
-    - `--ui-checkbox-active-text-color`
-    - `--ui-checkbox-active-support-text-color`
-- ### active focus
-    - `--ui-checkbox-active-focus-text-color`
-    - `--ui-checkbox-active-focus-support-text-color`
-
-### Checkbox Mark
-
-- ### base
-    - `--ui-checkbox-mark-background-color`
-    - `--ui-checkbox-mark-border-color`
-- ### focus
-    - `--ui-checkbox-mark-focus-background-color`
-    - `--ui-checkbox-mark-focus-border-color`
-- ### error
-    - `--ui-checkbox-mark-error-background-color`
-    - `--ui-checkbox-mark-error-border-color`
-    - `--ui-checkbox-mark-error-symbol-color`
-- ### error focus
-    - `--ui-checkbox-mark-error-focus-background-color`
-    - `--ui-checkbox-mark-error-focus-border-color`
-    - `--ui-checkbox-mark-error-focus-symbol-color`
-- ### disabled
-    - `--ui-checkbox-mark-disabled-background-color`
-    - `--ui-checkbox-mark-disabled-border-color`
-    - `--ui-checkbox-mark-disabled-symbol-color`
-- ### active
-    - `--ui-checkbox-mark-active-background-color`
-    - `--ui-checkbox-mark-active-border-color`
-    - `--ui-checkbox-mark-active-symbol-color`
-- ### active focus
-    - `--ui-checkbox-mark-active-focus-background-color`
-    - `--ui-checkbox-mark-active-focus-border-color`
-    - `--ui-checkbox-mark-active-focus-symbol-color`
-
-## Button
-
-- `--ui-button-radius`
-- `--ui-button-tab-radius`
-- `--ui-button-[hierarchy]-[modificator]-[property]`
-    - `hierarchy` -- тип кнопки:
-        - `primary`
-        - `secondary-color`
-        - `secondary-gray`
-        - `tertiary-white`
-        - `tertiary-color`
-        - `tertiary-gray`
-        - `link-color`
-        - `link-black`
-        - `link-gray`
-        - `tab-active`
-        - `tab`
-    - `modificator` -- состояние кнопки:
-      - `hover` 
-      - `warning`
-      - `warning-hover`
-      - `disabled`
-    - `property` -- изменяемое свойство
-      - `background-color`
-      - `border-color`
-      - `icon-color`
-      - `text-color`
-      - `box-shadow`
-### Например:
-- `--ui-button-primary-background-color`
-- `--ui-button-primary-hover-background-color`
-- `--ui-button-secondary-color-error-background-color`
+# CSS кастомизация
+
+---
+
+## FormField
+
+- ### base
+    - `--ui-form-field-label-color`
+    - `--ui-form-field-required-color`
+    - `--ui-form-field-hint-color`
+    - `--ui-form-field-helper-link-color`
+    - `--ui-form-field-background-color`
+    - `--ui-form-field-border-color`
+    - `--ui-form-field-border-radius`
+    - `--ui-form-field-text-color`
+    - `--ui-form-field-placeholder-color`
+    - `--ui-form-field-box-shadow`
+
+- #### focus
+    - `--ui-form-field-focus-text-color`
+    - `--ui-form-field-focus-background-color`
+    - `--ui-form-field-focus-border-color`
+    - `--ui-form-field-focus-box-shadow`
+
+- #### disabled
+    - `--ui-form-field-disabled-text-color`
+    - `--ui-form-field-disabled-background-color`
+    - `--ui-form-field-disabled-border-color`
+
+- #### error
+    - `--ui-form-field-error-text-color`
+    - `--ui-form-field-error-hint-color`
+    - `--ui-form-field-error-background-color`
+    - `--ui-form-field-error-border-color`
+    - `--ui-form-field-error-box-shadow`
+
+- #### error focus
+    - `--ui-form-field-error-focus-text-color`
+    - `--ui-form-field-error-focus-background-color`
+    - `--ui-form-field-error-focus-border-color`
+    - `--ui-form-field-error-focus-box-shadow`
+
+## Dropdown
+
+- `--ui-dropdown-background-color`
+- `--ui-dropdown-border-color`
+- `--ui-dropdown-border-radius`
+- `--ui-dropdown-box-shadow`
+- `--ui-dropdown-title-color`
+
+### Dropdown Item
+
+- #### base
+    - `--ui-dropdown-item-border-radius` - сюда можно писать только одиночный радиус
+    - `--ui-dropdown-item-text-color`
+    - `--ui-dropdown-item-support-text-color`
+    - `--ui-dropdown-item-show-icon-color`
+- #### hover
+    - `--ui-dropdown-item-hover-background-color`
+    - `--ui-dropdown-item-hover-text-color`
+    - `--ui-dropdown-item-hover-support-text-color`
+    - `--ui-dropdown-item-hover-show-icon-color`
+- #### active
+    - `--ui-dropdown-item-active-background-color`
+    - `--ui-dropdown-item-active-text-color`
+    - `--ui-dropdown-item-active-support-text-color`
+    - `--ui-dropdown-item-active-show-icon-color`
+    - `--ui-dropdown-item-active-check-icon-color`
+- #### active hover
+    - `--ui-dropdown-item-active-hover-background-color`
+    - `--ui-dropdown-item-active-hover-text-color`
+    - `--ui-dropdown-item-active-hover-support-text-color`
+    - `--ui-dropdown-item-active-hover-show-icon-color`
+    - `--ui-dropdown-item-active-hover-check-icon-color`
+
+## Checkbox
+
+- ### base
+    - `--ui-checkbox-text-color`
+    - `--ui-checkbox-support-text-color`
+- ### focus
+    - `--ui-checkbox-focus-text-color`
+    - `--ui-checkbox-focus-support-text-color`
+- ### error
+    - `--ui-checkbox-error-text-color`
+    - `--ui-checkbox-error-support-text-color`
+- ### error focus
+    - `--ui-checkbox-error-focus-text-color`
+    - `--ui-checkbox-error-focus-text-color`
+- ### disabled
+    - `--ui-checkbox-disabled-text-color`
+    - `--ui-checkbox-disabled-support-text-color`
+- ### active
+    - `--ui-checkbox-active-text-color`
+    - `--ui-checkbox-active-support-text-color`
+- ### active focus
+    - `--ui-checkbox-active-focus-text-color`
+    - `--ui-checkbox-active-focus-support-text-color`
+
+### Checkbox Mark
+
+- ### base
+    - `--ui-checkbox-mark-background-color`
+    - `--ui-checkbox-mark-border-color`
+- ### focus
+    - `--ui-checkbox-mark-focus-background-color`
+    - `--ui-checkbox-mark-focus-border-color`
+- ### error
+    - `--ui-checkbox-mark-error-background-color`
+    - `--ui-checkbox-mark-error-border-color`
+    - `--ui-checkbox-mark-error-symbol-color`
+- ### error focus
+    - `--ui-checkbox-mark-error-focus-background-color`
+    - `--ui-checkbox-mark-error-focus-border-color`
+    - `--ui-checkbox-mark-error-focus-symbol-color`
+- ### disabled
+    - `--ui-checkbox-mark-disabled-background-color`
+    - `--ui-checkbox-mark-disabled-border-color`
+    - `--ui-checkbox-mark-disabled-symbol-color`
+- ### active
+    - `--ui-checkbox-mark-active-background-color`
+    - `--ui-checkbox-mark-active-border-color`
+    - `--ui-checkbox-mark-active-symbol-color`
+- ### active focus
+    - `--ui-checkbox-mark-active-focus-background-color`
+    - `--ui-checkbox-mark-active-focus-border-color`
+    - `--ui-checkbox-mark-active-focus-symbol-color`
+
+## Button
+
+- `--ui-button-radius`
+- `--ui-button-tab-radius`
+- `--ui-button-[hierarchy]-[modificator]-[property]`
+    - `hierarchy` -- тип кнопки:
+        - `primary`
+        - `secondary-color`
+        - `secondary-gray`
+        - `tertiary-white`
+        - `tertiary-color`
+        - `tertiary-gray`
+        - `link-color`
+        - `link-black`
+        - `link-gray`
+        - `tab-active`
+        - `tab`
+    - `modificator` -- состояние кнопки:
+      - `hover` 
+      - `warning`
+      - `warning-hover`
+      - `disabled`
+    - `property` -- изменяемое свойство
+      - `background-color`
+      - `border-color`
+      - `icon-color`
+      - `text-color`
+      - `box-shadow`
+### Например:
+- `--ui-button-primary-background-color`
+- `--ui-button-primary-hover-background-color`
+- `--ui-button-secondary-color-error-background-color`
 - `--ui-button-secondary-color-error-hover-background-color`

package/docs/CSSVariables/CSSVariables.md

@@ -1,63 +1,63 @@
-[🔙 Назад](../../README.md)
-
-# CSS Variables
-
-В библиотеке используются **CSS-переменные** для цветов (в будущем, возможно, не только для них). Иногда может возникнуть необходимость изменить эти значения в вашем проекте.
-
----
-
-## 🔧 Использование в разработке
-
-Для задания переменных в библиотеке используются **CSS Variables**, все переменные лучше складировать в файлах по типу `*-var.scss`:
-
-```css
-:root {
-    --var: #fff;
-}
-```
-
-При использовании в стилях:
-
-```scss
-@use 'variables' as *;
-
-background-color: var(--var);
-```
-
-📌 **Важно**: при разработке новых компонентов в библиотеке используйте **только** CSS-переменные, чтобы пользователи могли их переопределять в своих проектах.
-
----
-
-## 🎨 Кастомизация в проекте
-
-### 1️⃣ Создайте файл с переопределением переменных
-
-Рекомендуется создать отдельный файл (например, `indicator-ui-variables.scss`), в котором будут переопределены значения CSS-переменных библиотеки. Все новые переменные должны находиться в `:root {}`.
-
-Пример:
-
-```scss
-:root {
-  --base-black: #000000;
-  --base-white: #ffffff;
-  /* Другие цвета */
-}
-```
-
-🔹 _(Автор не расист, все вопросы к [Rockstar](https://support.rockstargames.com/), так как цитата взята оттуда)_ 😁
-
-### 2️⃣ Импортируйте файл с переменными
-
-Чтобы переопределенные переменные применились корректно, **импортируйте их после подключения библиотеки**:
-
-```scss
-@import 'indicator-ui/dist/index.css';
-@import 'indicator-ui-variables.scss';
-```
-
-🎉 **Ура, победа. Вы переопределили переменные в библиотеке.**
-
-
-## PS
-
+[🔙 Назад](../../README.md)
+
+# CSS Variables
+
+В библиотеке используются **CSS-переменные** для цветов (в будущем, возможно, не только для них). Иногда может возникнуть необходимость изменить эти значения в вашем проекте.
+
+---
+
+## 🔧 Использование в разработке
+
+Для задания переменных в библиотеке используются **CSS Variables**, все переменные лучше складировать в файлах по типу `*-var.scss`:
+
+```css
+:root {
+    --var: #fff;
+}
+```
+
+При использовании в стилях:
+
+```scss
+@use 'variables' as *;
+
+background-color: var(--var);
+```
+
+📌 **Важно**: при разработке новых компонентов в библиотеке используйте **только** CSS-переменные, чтобы пользователи могли их переопределять в своих проектах.
+
+---
+
+## 🎨 Кастомизация в проекте
+
+### 1️⃣ Создайте файл с переопределением переменных
+
+Рекомендуется создать отдельный файл (например, `indicator-ui-variables.scss`), в котором будут переопределены значения CSS-переменных библиотеки. Все новые переменные должны находиться в `:root {}`.
+
+Пример:
+
+```scss
+:root {
+  --base-black: #000000;
+  --base-white: #ffffff;
+  /* Другие цвета */
+}
+```
+
+🔹 _(Автор не расист, все вопросы к [Rockstar](https://support.rockstargames.com/), так как цитата взята оттуда)_ 😁
+
+### 2️⃣ Импортируйте файл с переменными
+
+Чтобы переопределенные переменные применились корректно, **импортируйте их после подключения библиотеки**:
+
+```scss
+@import 'indicator-ui/dist/index.css';
+@import 'indicator-ui-variables.scss';
+```
+
+🎉 **Ура, победа. Вы переопределили переменные в библиотеке.**
+
+
+## PS
+
 [Если интересно, как выглядила бы документация, если ее автор был из Калифорнии](./CSSVariablesCalifornia.md)

package/docs/CSSVariables/CSSVariablesCalifornia.md

@@ -1,62 +1,62 @@
-[🔙 Назад](../../README.md)
-
-# CSS Variables 🌴🌊
-
-Йооо, чуваки, в этой библиотеке мы юзаем **CSS-переменные** для цветов (ну, возможно, в будущем не только для них, кто знает). Иногда захочешь немного покрутить их под свой проект, и вот тебе, как это сделать, если хочешь, чтобы всё было чётко! ✌️
-
----
-
-## 🔧 Как это работает, чувак?
-
-Мы задаем переменные в библиотеке через **CSS Variables**:
-
-```css
-:root {
-    --var: #fff; /* Ну типа белый цвет, да */
-}
-```
-
-А когда хочешь использовать эту штуку, просто пиши так:
-
-```scss
-@use 'variables' as *;
-
-background-color: var(--var); /* Эй, хватит смотреть на меня, ты ж знаешь, что это делает */
-```
-
-📌 **Тупо важно**: Когда ты делаешь новые компоненты для библиотеки, **используй только** CSS-переменные, чтобы другие ребята могли под себя всё настроить. Просто чётко, понял? 😎
-
----
-
-## 🎨 Как настроить свой проект, чувак?
-
-### 1️⃣ Создай файл, где ты всё переделаешь
-
-Эй, не усложняй, просто создай отдельный файл (например, `indicator-ui-variables.scss`), где будешь переделывать эти переменные на свой вкус. Все твои новые переменные должны быть в `:root {}`. Это как твоя домашка, только тут можно реально кайфануть. 😁
-
-Пример, ну типа так:
-
-```scss
-:root {
-  --base-black: #000000; /* Ну ты понял, базовый чёрный */
-  --base-white: #ffffff; /* Базовый белый, чтоб не скучно было */
-  /* Добавь что хочешь — зелёный для своей ласточки или оранжевый для веселья */
-}
-```
-
-🔹 _(Не переживай, я не расист, всё как-то так у Rockstar вон, если что 😜)_
-
-### 2️⃣ Импортируй файл с переменными
-
-Чувак, вот тут важный момент — тебе нужно импортировать твой файл **после** подключения самой библиотеки, иначе, ну, как бы, не прокатит. Это как печеньки после молока, понял? 😋
-
-```scss
-@import 'indicator-ui/dist/index.css';
-@import 'indicator-ui-variables.scss'; /* И вот тут ты подключаешь свои переменные */
-```
-
-🎉 **Йо! Ты переопределил переменные в библиотеке, теперь ты как бог в своём проекте.** 🔥
-
----
-
+[🔙 Назад](../../README.md)
+
+# CSS Variables 🌴🌊
+
+Йооо, чуваки, в этой библиотеке мы юзаем **CSS-переменные** для цветов (ну, возможно, в будущем не только для них, кто знает). Иногда захочешь немного покрутить их под свой проект, и вот тебе, как это сделать, если хочешь, чтобы всё было чётко! ✌️
+
+---
+
+## 🔧 Как это работает, чувак?
+
+Мы задаем переменные в библиотеке через **CSS Variables**:
+
+```css
+:root {
+    --var: #fff; /* Ну типа белый цвет, да */
+}
+```
+
+А когда хочешь использовать эту штуку, просто пиши так:
+
+```scss
+@use 'variables' as *;
+
+background-color: var(--var); /* Эй, хватит смотреть на меня, ты ж знаешь, что это делает */
+```
+
+📌 **Тупо важно**: Когда ты делаешь новые компоненты для библиотеки, **используй только** CSS-переменные, чтобы другие ребята могли под себя всё настроить. Просто чётко, понял? 😎
+
+---
+
+## 🎨 Как настроить свой проект, чувак?
+
+### 1️⃣ Создай файл, где ты всё переделаешь
+
+Эй, не усложняй, просто создай отдельный файл (например, `indicator-ui-variables.scss`), где будешь переделывать эти переменные на свой вкус. Все твои новые переменные должны быть в `:root {}`. Это как твоя домашка, только тут можно реально кайфануть. 😁
+
+Пример, ну типа так:
+
+```scss
+:root {
+  --base-black: #000000; /* Ну ты понял, базовый чёрный */
+  --base-white: #ffffff; /* Базовый белый, чтоб не скучно было */
+  /* Добавь что хочешь — зелёный для своей ласточки или оранжевый для веселья */
+}
+```
+
+🔹 _(Не переживай, я не расист, всё как-то так у Rockstar вон, если что 😜)_
+
+### 2️⃣ Импортируй файл с переменными
+
+Чувак, вот тут важный момент — тебе нужно импортировать твой файл **после** подключения самой библиотеки, иначе, ну, как бы, не прокатит. Это как печеньки после молока, понял? 😋
+
+```scss
+@import 'indicator-ui/dist/index.css';
+@import 'indicator-ui-variables.scss'; /* И вот тут ты подключаешь свои переменные */
+```
+
+🎉 **Йо! Ты переопределил переменные в библиотеке, теперь ты как бог в своём проекте.** 🔥
+
+---
+
 Теперь ты точно в игре! Не забывай — кастомизация это твоя фишка, а библиотека — твой инструмент. Давай, чувак, делай всё по-своему и кайфуй! 🌞🌴