indicator-ui 0.1.118 → 0.1.120

package/dist/scss/styles/colors/secondary.scss

@@ -1,12 +1,12 @@
-$blue-dark-25: #F5F8FF !default;
-$blue-dark-50: #EFF4FF !default;
-$blue-dark-100: #D1E0FF !default;
-$blue-dark-200: #B2CCFF !default;
-$blue-dark-300: #84ADFF !default;
-$blue-dark-400: #528BFF !default;
-$blue-dark-500: #2970FF !default;
-$blue-dark-600: #155EEF !default;
-$blue-dark-700: #004EEB !default;
-$blue-dark-800: #0040C1 !default;
-$blue-dark-900: #00359E !default;
-$blue-dark-950: #002266 !default;
+$blue-dark-25: var(--blue-dark-25) !default;
+$blue-dark-50: var(--blue-dark-50) !default;
+$blue-dark-100: var(--blue-dark-100) !default;
+$blue-dark-200: var(--blue-dark-200) !default;
+$blue-dark-300: var(--blue-dark-300) !default;
+$blue-dark-400: var(--blue-dark-400) !default;
+$blue-dark-500: var(--blue-dark-500) !default;
+$blue-dark-600: var(--blue-dark-600) !default;
+$blue-dark-700: var(--blue-dark-700) !default;
+$blue-dark-800: var(--blue-dark-800) !default;
+$blue-dark-900: var(--blue-dark-900) !default;
+$blue-dark-950: var(--blue-dark-950) !default;

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

@@ -0,0 +1,55 @@
+@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));
+  }
+}

package/dist/scss/styles/mixins/index.scss

@@ -6,3 +6,4 @@
 @forward "changeSvg";
 @forward "themes";
 @forward "utils";
+@forward "formFieldMixins";

package/dist/scss/styles/mixins/modify-svg.scss

@@ -1,4 +1,4 @@
-@mixin simple-modify-svg($stroke: null, $fill: null, $stroke-width: null) {
+@mixin simple-modify-svg($stroke: null, $fill: null, $stroke-width: null, $transition: null) {
   & {
     * {
       @if ($stroke != null) {
@@ -12,6 +12,9 @@
       @if ($stroke-width != null) {
         stroke-width: $stroke-width;
       }
+      @if ($transition != null) {
+        transition: $transition;
+      }
     }
 
     & {
@@ -20,7 +23,7 @@
   }
 }
 
-@mixin modify-svg($stroke: null, $fill: null, $stroke-width: null) {
+@mixin modify-svg($stroke: null, $fill: null, $stroke-width: null, $transition: null) {
   & > svg {
     @include simple-modify-svg($stroke: $stroke, $fill: $fill, $stroke-width: $stroke-width) {
       @content;

package/dist/scss/styles/mixins/utils.scss

@@ -7,4 +7,12 @@
       display: none; /* Chrome, Safari, Opera */
     }
   }
+}
+
+@mixin hover {
+  @media (hover: hover) {
+    &:hover {
+      @content;
+    }
+  }
 }

package/dist/scss/test/pages/style.scss

@@ -0,0 +1,6 @@
+
+:root {
+  [data-theme='green'] {
+    //--base-white: black;
+  }
+}

package/dist/scss/ui/CheckboxMark/styles/mixins/base.scss

@@ -1,30 +1,28 @@
 @use '../../../../styles' as *;
 
-@mixin checkbox-mark-base-hover($theme) {
-  @if $theme == 'light' {
-    background-color: var(--primary-50);
-    border: 1px solid var(--primary-200);
-  } @else {
-    background-color: var(--gray-iron-800);
-    border: 1px solid var(--gray-iron-500);
+@mixin checkbox-mark-base-hover() {
+  background-color: var(--ui-checkbox-mark-focus-background-color, var(--ui-checkbox-mark-background-color, var(--primary-50)));
+  border: 1px solid var(--ui-checkbox-mark-focus-border-color, var(--ui-checkbox-mark-border-color, var(--primary-200)));
+  @include darkTheme {
+    background-color: var(--ui-checkbox-mark-focus-background-color, var(--ui-checkbox-mark-background-color, var(--gray-800)));
+    border: 1px solid var(--ui-checkbox-mark-focus-border-color, var(--ui-checkbox-mark-border-color, var(--gray-500)));
   }
 }
 
-@mixin checkbox-mark-base($theme: 'light') {
+@mixin checkbox-mark-base() {
   width: 20px;
   height: 20px;
   flex: none;
-
-  @if $theme == 'light' {
-    background-color: var(--base-white);
-    border: 1px solid var(--gray-300);
-  } @else {
-    background-color: var(--gray-iron-900);
-    border: 1px solid var(--gray-iron-500);
-  }
   box-sizing: border-box;
   cursor: pointer;
   overflow: hidden;
+  background-color: var(--ui-checkbox-mark-background-color, var(--base-white));
+  border: 1px solid var(--ui-checkbox-mark-border-color, var(--gray-300));
+
+  @include darkTheme {
+    background-color: var(--ui-checkbox-mark-background-color, var(--gray-900));
+    border: 1px solid var(--ui-checkbox-mark-border-color, var(--gray-500));
+  }
 
   @include centerInsideContent();
   @include modify-svg($stroke-width: 4) {
@@ -32,10 +30,4 @@
     height: 14px;
     flex: none;
   }
-
-  @include tablet-plus {
-    &:hover {
-      @include checkbox-mark-base-hover($theme);
-    }
-  }
 }

package/dist/scss/ui/CheckboxMark/styles/mixins/checkbox-mark.scss

@@ -6,21 +6,18 @@
   .checkboxMark {
     transition: all ease-out 0.2s;
 
-
-    &[data-theme='light'] {
-      @include base.checkbox-mark-base('light');
-
+      @include base.checkbox-mark-base();
 
       &.checkbox {
         @include properties.checkbox();
       }
 
       &.radio {
-        @include properties.radio('light');
+        @include properties.radio();
       }
 
       &.checked {
-        @include properties.checked('light');
+        @include properties.checked();
       }
 
       &.indeterminate {
@@ -32,107 +29,19 @@
       }
 
       &.disabled {
-        @include properties.disabled('light');
+        @include properties.disabled();
       }
 
       &.correct {
         &.checked {
-          @include properties.correct-checked('light');
-
-          &.disabled {
-            @include properties.correct-disabled('light');
-          }
-        }
-      }
-
-      &.incorrect {
-        &.checked {
-          @include properties.incorrect-checked();
+          @include properties.correct-checked();
 
           &.disabled {
-            @include properties.incorrect-disabled();
-          }
-        }
-      }
-
-      @include tablet-plus {
-        &.hover {
-          @include base.checkbox-mark-base-hover('light');
-
-          &.checked {
-            @include properties.checked-hover('light');
-          }
-
-          &.indeterminate {
-            @include properties.indeterminate-hover();
-          }
-
-          &.error {
-            @include properties.error-hover();
-          }
-
-          &.disabled {
-            @include properties.disabled-hover('light');
-          }
-
-          &.correct {
-            &.checked {
-              @include properties.correct-checked-hover('light');
-
-              &.disabled {
-                @include properties.correct-disabled-hover('light');
-              }
-            }
-          }
-
-          &.incorrect {
-            &.checked {
-              @include properties.incorrect-checked-hover();
-
-              &.disabled {
-                @include properties.incorrect-disabled-hover();
-              }
-            }
+            @include properties.correct-checked-disabled();
           }
         }
-      }
-    }
-
-    &[data-theme='dark'] {
-      @include base.checkbox-mark-base('dark');
-
-
-      &.checkbox {
-        @include properties.checkbox();
-      }
-
-      &.radio {
-        @include properties.radio('dark');
-      }
-
-      &.checked {
-        @include properties.checked('dark');
-      }
-
-      &.indeterminate {
-        @include properties.indeterminate();
-      }
-
-      &.error {
-        @include properties.error();
-      }
-
-      &.disabled {
-        @include properties.disabled('dark');
-      }
-
-      &.correct {
-        &.checked {
-          @include properties.correct-checked('dark');
-
-          &.disabled {
-            @include properties.correct-disabled('dark');
-          }
+        &.disabled {
+          @include properties.correct-disabled();
         }
       }
 
@@ -141,52 +50,43 @@
           @include properties.incorrect-checked();
 
           &.disabled {
-            @include properties.incorrect-disabled();
+            @include properties.incorrect-checked-disabled();
           }
         }
+        &.disabled {
+          @include properties.incorrect-disabled();
+        }
       }
 
-      @include tablet-plus {
+    @media (hover: hover) {
         &.hover {
-          @include base.checkbox-mark-base-hover('dark');
+          @include base.checkbox-mark-base-hover();
 
           &.checked {
-            @include properties.checked-hover('dark');
+            @include properties.checked-hover();
           }
 
           &.indeterminate {
             @include properties.indeterminate-hover();
           }
 
+          &.checked.error,
           &.error {
             @include properties.error-hover();
           }
 
-          &.disabled {
-            @include properties.disabled-hover('dark');
-          }
-
           &.correct {
             &.checked {
-              @include properties.correct-checked-hover('dark');
-
-              &.disabled {
-                @include properties.correct-disabled-hover('dark');
-              }
+              @include properties.correct-checked-hover();
             }
           }
 
           &.incorrect {
             &.checked {
               @include properties.incorrect-checked-hover();
-
-              &.disabled {
-                @include properties.incorrect-disabled-hover();
-              }
             }
           }
         }
       }
-    }
   }
 }

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/checked.scss

@@ -1,32 +1,31 @@
 @use '../../../../../styles' as *;
 
-@mixin checked-hover($theme) {
-  @if $theme == 'light' {
-    border: 1px solid var(--primary-400);
-  } @else {
-    background-color: var(--rose-900);
-    border: 1px solid var(--rose-700);
+@mixin checked-hover() {
+  background-color: var(--ui-checkbox-mark-active-focus-background-color, var(--ui-checkbox-mark-active-background-color, var(--primary-50)));
+  border: 1px solid var(--ui-checkbox-mark-active-focus-border-color, var(--ui-checkbox-mark-active-border-color, var(--primary-400)));
+  @include darkTheme {
+    background-color: var(--ui-checkbox-mark-active-focus-background-color, var(--ui-checkbox-mark-active-background-color, var(--primary-900)));
+    border: 1px solid var(--ui-checkbox-mark-active-focus-border-color, var(--ui-checkbox-mark-active-border-color, var(--primary-700)));
   }
 }
 
-@mixin checked($theme: 'light') {
-  @if $theme == 'light' {
-    background-color: var(--primary-50);
-    border: 1px solid var(--primary-200);
-    @include modify-svg($stroke: var(--primary-500));
-  } @else {
-    background-color: var(--rose-950);
-    border: 1px solid var(--rose-700);
-    @include modify-svg($stroke: var(--rose-600));
-  }
+@mixin checked() {
+  background-color: var(--ui-checkbox-mark-active-background-color, var(--primary-50));
+  border: 1px solid var(--ui-checkbox-mark-active-border-color, var(--primary-200));
+  @include modify-svg($stroke: var(--ui-checkbox-mark-active-symbol-color, var(--primary-500)));
 
-  &:after {
-    display: block;
-  }
+  @include darkTheme {
+    background-color: var(--ui-checkbox-mark-active-background-color, var(--primary-950));
+    border: 1px solid var(--ui-checkbox-mark-active-border-color, var(--primary-700));
+    @include modify-svg($stroke: var(--ui-checkbox-mark-active-symbol-color, var(--primary-600)));
+    @include fnt-flex($color: var(--ui-checkbox-mark-active-symbol-color, var(--primary-600)));
 
-  @include tablet-plus {
-    &:hover {
-      @include checked-hover($theme);
+    &:after {
+      background-color: var(--ui-checkbox-mark-active-symbol-color, var(--primary-600));
     }
   }
+  &:after {
+    background-color: var(--ui-checkbox-mark-active-symbol-color, var(--primary-500));
+    display: block;
+  }
 }

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/correct.scss

@@ -1,69 +1,67 @@
 @use '../../../../../styles' as *;
 
-@mixin correct-checked-hover($theme) {
-  border: transparent;
-  @if $theme == 'light' {
-    background-color: var(--primary-600);
-  } @else {
-    background-color: var(--rose-700);
-  }
-}
+@mixin correct-checked-hover() {
+  border: transparent !important;
+  background-color: var(--primary-600) !important;
 
-@mixin correct-disabled-hover($theme) {
-  border: transparent;
-  @if $theme == 'light' {
-    background-color: var(--gray-300);
-  } @else {
-    background-color: var(--gray-iron-600);
+  @include darkTheme {
+    border: transparent !important;
+    background-color: var(--primary-700) !important;
   }
 }
 
-@mixin correct-checked($theme: 'light') {
+@mixin correct-checked() {
   border: transparent;
-  @if $theme == 'light' {
-    background-color: var(--primary-500);
-    @include fnt($color: var(--base-white));
-    @include modify-svg($stroke: var(--base-white));
-  } @else {
-    background-color: var(--rose-600);
-    @include fnt($color: var(--gray-iron-50));
-    @include modify-svg($stroke: var(--gray-iron-50));
-  }
+  background-color: var(--primary-500);
 
   @include fnt($size: 14, $line-height: 14, $weight: 500);
+  @include fnt($color: var(--base-white));
+  @include modify-svg($stroke: var(--base-white));
 
-  &:after {
-    display: none;
+  @include darkTheme {
+    background-color: var(--primary-600);
+    @include fnt($color: var(--gray-50));
+    @include modify-svg($stroke: var(--gray-50));
   }
 
-  @include tablet-plus {
-    &:hover {
-      @include correct-checked-hover($theme);
-    }
+  &:after {
+    display: none;
   }
 }
 
-@mixin correct-disabled($theme: 'light') {
+@mixin correct-checked-disabled() {
   border: transparent;
-  @if $theme == 'light' {
-    background-color: var(--gray-300);
-    @include fnt($color: var(--base-white));
-    @include modify-svg($stroke: var(--base-white));
-  } @else {
-    background-color: var(--gray-iron-600);
-    @include fnt($color: var(--gray-iron-500));
-    @include modify-svg($stroke: var(--gray-iron-500));
-  }
-
+  background-color: var(--gray-300);
   @include fnt($size: 14, $line-height: 14, $weight: 500);
+  @include fnt($color: var(--base-white));
+  @include modify-svg($stroke: var(--base-white));
+
+  @include darkTheme {
+    background-color: var(--gray-700);
+    @include fnt($color: var(--gray-500));
+    @include modify-svg($stroke: var(--gray-500));
+  }
 
   &:after {
     display: none;
   }
+}
+
 
-  @include tablet-plus {
-    &:hover {
-      @include correct-disabled-hover($theme);
-    }
+@mixin correct-disabled() {
+  border: 1px solid var(--gray-300);
+  background-color: var(--gray-100);
+  @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--gray-300));
+  @include modify-svg($stroke: var(--base-white));
+
+  @include darkTheme {
+    border: 1px solid var(--gray-700);
+    background-color: var(--gray-800);
+    @include fnt($color: var(--gray-500));
+    @include modify-svg($stroke: var(--gray-500));
+  }
+
+  &:after {
+    display: none;
   }
 }

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/disabled.scss

@@ -1,43 +1,27 @@
 @use '../../../../../styles' as *;
 
-@mixin disabled-hover($theme) {
-  @if $theme == 'light' {
-    background-color: var(--gray-100);
-    border: 1px solid var(--gray-300);
-
-    @include modify-svg($stroke: var(--gray-300));
-    @include fnt-flex($color: var(--gray-300));
-  } @else {
-    background-color: var(--gray-iron-800);
-    border: 1px solid var(--gray-iron-700);
-  }
-}
-
-@mixin disabled($theme: 'light') {
+@mixin disabled() {
   cursor: default;
 
-  @if $theme == 'light' {
-    background-color: var(--gray-100);
-    border: 1px solid var(--gray-300);
+  background-color: var(--ui-checkbox-mark-disabled-background-color, var(--gray-100));
+  border: 1px solid var(--ui-checkbox-mark-disabled-border-color, var(--gray-300));
 
-    &:after {
-      background-color: var(--gray-300);
-    }
-  } @else {
-    background-color: var(--gray-iron-800);
-    border: 1px solid var(--gray-iron-700);
+  @include modify-svg($stroke: var(--ui-checkbox-mark-disabled-symbol-color, var(--gray-300)));
+  @include fnt-flex($color: var(--ui-checkbox-mark-disabled-symbol-color, var(--gray-300)));
 
-    &:after {
-      background-color: var(--gray-iron-700);
-    }
+  &:after {
+    background-color: var(--ui-checkbox-mark-disabled-symbol-color, var(--gray-300));
   }
 
-  @include modify-svg($stroke: var(--gray-300));
-  @include fnt-flex($color: var(--gray-300));
+  @include darkTheme {
+    background-color: var(--ui-checkbox-mark-disabled-background-color, var(--gray-800));
+    border: 1px solid var(--ui-checkbox-mark-disabled-border-color, var(--gray-700));
 
-  @include tablet-plus {
-    &:hover {
-      @include disabled-hover($theme);
+    @include modify-svg($stroke: var(--ui-checkbox-mark-disabled-symbol-color, var(--gray-700)));
+    @include fnt-flex($color: var(--ui-checkbox-mark-disabled-symbol-color, var(--gray-700)));
+
+    &:after {
+      background-color: var(--ui-checkbox-mark-disabled-symbol-color, var(--gray-700));
     }
   }
 }

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/error.scss

@@ -1,24 +1,30 @@
 @use '../../../../../styles' as *;
 
 @mixin error-hover() {
-  background-color: var(--error-50);
-  border: 1px solid var(--error-400);
+  background-color: var(--ui-checkbox-mark-error-focus-background-color, var(--ui-checkbox-mark-error-background-color, var(--error-50)));
+  border: 1px solid var(--ui-checkbox-mark-error-focus-border-color, var(--ui-checkbox-mark-error-border-color, var(--error-400)));
+  @include darkTheme {
+    background-color: var(--ui-checkbox-mark-error-focus-background-color, var(--ui-checkbox-mark-error-background-color, var(--error-900)));
+    border: 1px solid var(--ui-checkbox-mark-error-focus-border-color, var(--ui-checkbox-mark-error-border-color, var(--error-700)));
+  }
 }
 
 @mixin error() {
-  background-color: var(--error-50);
-  border: 1px solid var(--error-200);
+  background-color: var(--ui-checkbox-mark-error-background-color, var(--error-50));
+  border: 1px solid var(--ui-checkbox-mark-error-border-color, var(--error-200));
 
-  @include modify-svg($stroke: var(--error-500));
-  @include fnt-flex($color: var(--error-500));
+  @include modify-svg($stroke: var(--ui-checkbox-mark-error-symbol-color, var(--error-500)));
 
   &:after {
-    background-color: var(--error-500);
+    background-color: var(--ui-checkbox-mark-error-symbol-color, var(--error-500));
+    @include darkTheme {
+      background-color: var(--ui-checkbox-mark-error-symbol-color, var(--error-600));
+    }
   }
 
-  @include tablet-plus {
-    &:hover {
-      @include error-hover();
-    }
+  @include darkTheme {
+    background-color: var(--ui-checkbox-mark-error-background-color, var(--error-950));
+    border: 1px solid var(--ui-checkbox-mark-error-border-color, var(--error-700));
+    @include modify-svg($stroke: var(--ui-checkbox-mark-error-symbol-color, var(--error-600)));
   }
 }