indicator-ui 0.1.122 → 0.1.124

package/docs/CSSVariables/CSSThemeCustomize.md

@@ -5,42 +5,43 @@
 ## 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`
+    - `--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`
+    - `--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`
+    - `--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`
+    - `--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`
+    - `--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`
@@ -48,137 +49,113 @@
 - `--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`
+    - `--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`
+    - `--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`
+    - `--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`
+    - `--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`
+    - `--ui-checkbox-text-color`
+    - `--ui-checkbox-support-text-color`
 - ### focus
-  - `--ui-checkbox-focus-text-color`
-  - `--ui-checkbox-focus-support-text-color`
+    - `--ui-checkbox-focus-text-color`
+    - `--ui-checkbox-focus-support-text-color`
 - ### error
-  - `--ui-checkbox-error-text-color`
-  - `--ui-checkbox-error-support-text-color`
+    - `--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`
+    - `--ui-checkbox-error-focus-text-color`
+    - `--ui-checkbox-error-focus-text-color`
 - ### disabled
-  - `--ui-checkbox-disabled-text-color`
-  - `--ui-checkbox-disabled-support-text-color`
+    - `--ui-checkbox-disabled-text-color`
+    - `--ui-checkbox-disabled-support-text-color`
 - ### active
-  - `--ui-checkbox-active-text-color`
-  - `--ui-checkbox-active-support-text-color`
+    - `--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`
+    - `--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`
+    - `--ui-checkbox-mark-background-color`
+    - `--ui-checkbox-mark-border-color`
 - ### focus
-  - `--ui-checkbox-mark-focus-background-color`
-  - `--ui-checkbox-mark-focus-border-color`
+    - `--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`
+    - `--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`
+    - `--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`
+    - `--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`
+    - `--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`
+    - `--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`
 
-### Primary
-- ### base
-  - `--ui-button-primary-background-color`
-  - `--ui-button-primary-border-color`
-  - `--ui-button-primary-box-shadow`
-  - `--ui-button-primary-text-color`
-  - `--ui-button-primary-icon-color`
-- ### base hover
-  - `--ui-button-primary-hover-background-color`
-  - `--ui-button-primary-hover-border-color`
-  - `--ui-button-primary-hover-box-shadowr`
-  - `--ui-button-primary-hover-text-color`
-  - `--ui-button-primary-hover-icon-color`
-- ### disabled
-  - `--ui-button-primary-disabled-background-color`
-  - `--ui-button-primary-disabled-border-color`
-  - `--ui-button-primary-disabled-box-shadow`
-  - `--ui-button-primary-disabled-text-color`
-  - `--ui-button-primary-disabled-icon-color`
-### Secondary color
-- ### base
-  - `--ui-button-secondary-color-background-color`
-  - `--ui-button-secondary-color-border-color`
-  - `--ui-button-secondary-color-box-shadow`
-  - `--ui-button-secondary-color-text-color`
-  - `--ui-button-secondary-color-icon-color`
-- ### base hover
-  - `--ui-button-secondary-color-hover-background-color`
-  - `--ui-button-secondary-color-hover-border-color`
-  - `--ui-button-secondary-color-hover-box-shadowr`
-  - `--ui-button-secondary-color-hover-text-color`
-  - `--ui-button-secondary-color-hover-icon-color`
-- ### disabled
-  - `--ui-button-secondary-color-disabled-background-color`
-  - `--ui-button-secondary-color-disabled-border-color`
-  - `--ui-button-secondary-color-disabled-box-shadow`
-  - `--ui-button-secondary-color-disabled-text-color`
-  - `--ui-button-secondary-color-disabled-icon-color`
-### Secondary gray
-- ### base
-  - `--ui-button-secondary-gray-background-color`
-  - `--ui-button-secondary-gray-border-color`
-  - `--ui-button-secondary-gray-box-shadow`
-  - `--ui-button-secondary-gray-text-color`
-  - `--ui-button-secondary-gray-icon-color`
-- ### base hover
-  - `--ui-button-secondary-gray-hover-background-color`
-  - `--ui-button-secondary-gray-hover-border-color`
-  - `--ui-button-secondary-gray-hover-box-shadowr`
-  - `--ui-button-secondary-gray-hover-text-color`
-  - `--ui-button-secondary-gray-hover-icon-color`
-- ### disabled
-  - `--ui-button-secondary-gray-disabled-background-color`
-  - `--ui-button-secondary-gray-disabled-border-color`
-  - `--ui-button-secondary-gray-disabled-box-shadow`
-  - `--ui-button-secondary-gray-disabled-text-color`
-  - `--ui-button-secondary-gray-disabled-icon-color`
+- `--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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indicator-ui",
-  "version": "0.1.122",
+  "version": "0.1.124",
   "main": "dist/index.js",
   "types": "dist/ts/src/index.d.ts",
   "style": "dist/index.css",

package/dist/scss/styles/mixins/formFieldMixins.scss

@@ -1,55 +0,0 @@
-@use './themes' as *;
-
-@mixin formFieldDisabled {
-  background-color: var(--ui-form-field-disabled-background-color, var(--gray-50));
-  border: 1px solid var(--ui-form-field-disabled-border-color, var(--gray-300));
-  color: var(--ui-form-field-disabled-text-color, var(--gray-500));
-
-  @include darkTheme {
-    background-color: var(--ui-form-field-disabled-background-color, var(--gray-950));
-    border: 1px solid var(--ui-form-field-disabled-border-color, var(--gray-800));
-    color: var(--ui-form-field-disabled-text-color, var(--gray-25))
-  }
-}
-
-@mixin formFieldFocus {
-  background-color: var(--ui-form-field-focus-background-color, var(--ui-form-field-background-color, var(--base-white)));
-  border: 1px solid var(--ui-form-field-focus-border-color, var(--ui-form-field-border-color, var(--gray-400)));
-  box-shadow: var(--ui-form-field-focus-box-shadow, var(--ui-form-field-box-shadow, 0 1px 2px 0 #1018280D));
-  color: var(--ui-form-field-focus-text-color, var(--ui-form-field-text-color, var(--gray-900)));
-
-  @include darkTheme {
-    background-color: var(--ui-form-field-focus-background-color, var(--ui-form-field-background-color, var(--gray-950)));
-    border: 1px solid var(--ui-form-field-focus-border-color, var(--ui-form-field-border-color, var(--gray-700)));
-    box-shadow: var(--ui-form-field-focus-box-shadow, var(--ui-form-field-box-shadow, 0 1px 2px 0 #1018280D));
-    color: var(--ui-form-field-focus-text-color, var(--ui-form-field-text-color, var(--gray-25)));
-  }
-}
-
-@mixin formFieldError {
-  background-color: var(--ui-form-field-error-background-color, var(--base-white));
-  border: 1px solid var(--ui-form-field-error-border-color, var(--error-300));
-  box-shadow: var(--ui-form-field-error-box-shadow, 0 1px 2px 0 #1018280D);
-  color: var(--ui-form-field-error-text-color, var(--gray-900));
-
-  @include darkTheme {
-    background-color: var(--ui-form-field-error-background-color, var(--ui-form-field-background-color, var(--gray-950)));
-    border: 1px solid var(--ui-form-field-error-border-color, var(--error-900));
-    box-shadow: var(--ui-form-field-error-box-shadow, var(--ui-form-field-box-shadow, 0 1px 2px 0 #1018280D));
-    color: var(--ui-form-field-error-text-color, var(--ui-form-field-text-color, var(--gray-25)));
-  }
-}
-
-@mixin formFieldErrorFocus {
-  background-color: var(--ui-form-field-error-focus-background-color, var(--base-white));
-  border: 1px solid var(--ui-form-field-error-focus-border-color, var(--error-400));
-  box-shadow: var(--ui-form-field-error-focus-box-shadow, 0 1px 2px 0 #1018280D);
-  color: var(--ui-form-field-error-focus-text-color, var(--gray-900));
-
-  @include darkTheme {
-    background-color: var(--ui-form-field-error-focus-background-color, var(--ui-form-field-error-background-color, var(--ui-form-field-background-color, var(--gray-950))));
-    border: 1px solid var(--ui-form-field-error-focus-border-color, var(--ui-form-field-error-border-color, var(--error-700)));
-    box-shadow: var(--ui-form-field-error-focus-box-shadow, var(--ui-form-field-error-box-shadow, 0 1px 2px 0 #1018280D));
-    color: var(--ui-form-field-error-focus-text-color, var(--gray-25));
-  }
-}