armtek-uikit-react 1.0.183 → 1.0.185

package/assets/Accordion.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@use "variables";
 
 .arm-accordion_variant_section {
   & + .arm-accordion_variant_section{

package/assets/Adornment.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@use "variables";
 
 .arm-adornment > *{
   display: block;
@@ -13,11 +13,11 @@
 }
 .arm-adornment_end{
   & + * {
-    margin-left: $size-step;
+    margin-left: var(--size-step);
   }
 }
 .arm-adornment_start{
   & + * {
-    margin-left: $size-step;
+    margin-left: var(--size-step);
   }
 }

package/assets/Avatar.scss

@@ -1,9 +1,11 @@
-@import "variables";
+@use "variables" as v;
+
+
 
 .arm-avatar{
-  width: $size-elarge;
-  height: $size-elarge;
-  min-width: $size-elarge;
+  width: var(--size-elarge);
+  height: var(--size-elarge);
+  min-width: var(--size-elarge)elarge;
   border-radius: 50%;
   background: var(--color-primary);
   color: #fff;
@@ -15,15 +17,12 @@
 .arm-avatar__icon{
   background: var(--color-gray-400);
 }
-.arm-avatar__name{
-  text-transform: uppercase;
-}
 .arm-avatar__inner{
   overflow: hidden;
   border-radius: 50%;
   width: 100%;
   height: 100%;
-  @include flex(center);
+  @include v.flex(center);
 }
 .arm-avatar__text{
   display: flex;

package/assets/AvatarGroup.scss

@@ -1,5 +1,7 @@
+@use 'variables' as v;
+
 .arm-avatar-group{
-  @include flex(flex-end);
+  @include v.flex(flex-end);
   transform: scale(-1, 1);
 }
 .arm-avatar-group_medium{
@@ -17,8 +19,8 @@
   height: 60px;
   min-width: 60px;
   position: relative;
-  @include flex(center);
-  background: $color-neutral-light;
+  @include v.flex(center);
+  background: var(--bg-neutral-light);
   font-size: 24px;
   color: #fff;
 }

package/assets/Badge.scss

@@ -1,3 +1,5 @@
+@use "variables" as v;
+
 .arm-badge{
   display: inline-block;
   position: relative;
@@ -7,7 +9,7 @@ $vertical_offset: calc(100% - 6px);
 $horizontal_offset: calc(100% - 6px);
 
 .arm-badge__item{
-  background: $color-error;
+  background: var(--color-error);
   color: #fff;
   position: absolute;
   width: 8px;
@@ -25,23 +27,23 @@ $horizontal_offset: calc(100% - 6px);
     background: var(--color-neutral);
   }
   &_error{
-    background: $color-error;
+    background: var(--color-error);
   }
   &_info{
-    background: $color-info;
+    background: var(--color-info);
   }
   &_warning{
     background: var(--color-warning);
   }
   &_success{
     background: var(--color-success);
-    color: $color-gray-900;
+    color: var(--color-gray-900);
   }
 }
 .arm-badge__item_content{
   width: 20px;
   height: 20px;
-  @include flex(center);
+  @include v.flex(center);
   font-size: 12px;
 }
 

package/assets/Button.scss

@@ -1,3 +1,4 @@
+@use "variables" as v;
 
 .arm-button{
   outline: none;
@@ -6,7 +7,7 @@
   padding: var(--size-step) calc(3 * var(--size-step));
   cursor: pointer;
   text-decoration: none;
-  @include transition(0.3s);
+  @include v.transition(0.3s);
   font-weight: 500;
   font-family: inherit;
   font-size: 16px;
@@ -562,22 +563,22 @@
   }
 }
 .arm-button__adornment_end{
-  margin-left: $size-step;
+  margin-left: var(--size-step);
 }
 .arm-button__adornment_start{
-  margin-right: $size-step;
+  margin-right: var(--size-step);
 }
 
 .arm-button_large{
-  height: $size-large;
+  height: var(--size-large);
   font-size: 15px;
 }
 .arm-button_medium{
-  height: $size-medium;
+  height: var(--size-medium);
   font-size: 14px;
 }
 .arm-button_small{
-  height: $size-small;
+  height: var(--size-small);
   font-size: 13px;
   padding-left: calc(var(--size-step) * 1.2);
   padding-right: calc(var(--size-step) * 1.2);

package/assets/ButtonIcon.scss

@@ -1,8 +1,8 @@
-@import "variables";
+@use "variables";
 
 .arm-button-icon{
-  padding: $size-step;
-  width: $size-elarge;
+  padding: var(--size-step);
+  width: var(--size-elarge);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -12,18 +12,18 @@
 
 }
 .arm-button-icon_large{
-  width: $size-large;
+  width: var(--size-large);
   font-size: 24px;
   & .material_icon {font-size: 24px}
 }
 .arm-button-icon_medium{
-  width: $size-medium;
+  width: var(--size-medium);
   font-size: 20px;
   & .material_icon {font-size: 20px}
 }
 .arm-button-icon_small{
-  width: $size-small;
-  padding: calc($size-step / 2);
+  width: var(--size-small);
+  padding: calc(var(--size-step) / 2);
   font-size: 16px;
   & .material_icon {font-size: 16px}
 }

package/assets/Checkbox.scss

@@ -53,6 +53,7 @@
   }
 }
 
+
 .arm-checkbox_medium{
   min-width:18px;
   width:18px;
@@ -196,7 +197,7 @@
 }
 
 .arm-checkbox__label_disabled{
-  color: $color-gray-500 !important;
+  color: var(--color-gray-500) !important;
   pointer-events: none;
   &:before{
     background-color: var(--color-gray-400);
@@ -226,7 +227,7 @@
       background: var(--color-primary);
       width: 10px;
       height: 10px;
-      margin-top: -3px;
+      margin-top: 0px;
       margin-left: 0;
       top:50%;
       left:50%;
@@ -243,7 +244,6 @@
       &:after{
         width: 6px;
         height: 6px;
-        margin-top: -2px;
       }
     }
     &.arm-checkbox_error:before{
@@ -295,4 +295,4 @@
 
 
   }
-}
+}

package/assets/Chip.scss

@@ -1,3 +1,4 @@
+@use "variables" as v;
 
 .arm-chip{
   background-color: var(--color-gray-200);
@@ -16,7 +17,7 @@
 }
 
 .arm-chip__inner{
-  @include flex(center)
+  @include v.flex(center)
 }
 
 .arm-chip__icon{
@@ -24,7 +25,7 @@
   margin-right: var(--size-step);
   margin-left: calc(var(--size-step) * -1);
   font-size: 22px;
-  @include flex();
+  @include v.flex();
   overflow: hidden;
 }
 .arm-chip__close{
@@ -35,7 +36,7 @@
   color: var(--color-gray-500);
   cursor: pointer;
   &:hover{
-    @include transition();
+    @include v.transition();
     color: var(--color-gray-600);
   }
 }

package/assets/DatePicker.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@use "variables";
 
 .datepicker{
   & .react-datepicker{

package/assets/Icon.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@use "variables";
 
 .arm-icon_size_small{
   font-size: 11px;

package/assets/Interval.scss

@@ -1,6 +1,7 @@
+@use 'variables' as v;
 
 .arm-interval{
-  @include flex();
+  @include v.flex();
   width: 100%;
   & input{
     -moz-appearance: textfield;
@@ -25,10 +26,10 @@
 }
 
 .arm-interval__helper{
-  margin-top: calc($size-step / 2);
+  margin-top: calc(var(--size-step) / 2);
 }
 
 .arm-intervalslide__slider{
-  padding: 0 calc($size-step * 2);
+  padding: 0 calc(var(--size-step) * 2);
   margin-top: -7px;
 }

package/assets/Link.scss

@@ -1,4 +1,4 @@
-@import "./../assets/variables";
+@use "./../assets/variables";
 
 .arm-link{
   transition: 0.2s all ease;

package/assets/ListItem.scss

@@ -1,12 +1,12 @@
-@import "variables";
+@use "variables" as v;
 
 .arm-listitem{
   outline: none;
-  padding: calc($size-step * 1.5) calc($size-step * 2);
+  padding: calc(var(--size-step) * 1.5) calc(var(--size-step) * 2);
   color: var(--color-neutral);
   background: #fff;
-  @include transition(0.3s, background);
-  @include flex();
+  @include v.transition(0.3s, background);
+  @include v.flex();
   width: 100%;
   border: none;
   text-align: left;
@@ -17,11 +17,11 @@
   font-family: inherit;
   min-height: 48px;
   &:hover{
-    background: $color-gray-50;
+    background: var(--color-gray-50);
   }
   &.arm-listitem_active,
   &:active{
-    background: rgba($color-primary, 0.1);
+    background: rgba(var(--color-primary-rgba), 0.1);
   }
 }
 
@@ -34,10 +34,10 @@
 }
 .arm-listitem__content{
   display: block;
-  margin-right: calc($size-step * 2);
+  margin-right: calc(var(--size-step) * 2);
 }
 .arm-listitem__content_adornment_left{
-  margin-left: calc($size-step * 2);
+  margin-left: calc(var(--size-step) * 2);
 }
 .arm-listitem_endAdornment{
 
@@ -49,9 +49,9 @@
   display: block;
 }
 .arm-listitem__helper{
-  margin-top: calc($size-step / 2);
+  margin-top: calc(var(--size-step) / 2);
   display: block;
-  color: $color-neutral-light;
+  color: var(--color-neutral-light);
 }
 .arm-theme-dark {
 

package/assets/Loader.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@use "variables";
 
 @mixin bg ($color:var(--color-gray-800), $size: 2px) {
   background:

package/assets/Logo.scss

@@ -1,11 +1,11 @@
-@import "variables";
+@use "variables";
 
 .arm-logo{
   display: inline-block;
 }
 .arm-logo_shape{
-  box-shadow: $box-shadow;
-  padding: calc($size-step * 2);
+  box-shadow: var(--box-shadow);
+  padding: calc(var(--size-step) * 2);
   transform: skewX(-10deg);
   & .arm-logo__inner{
     transform: skewX(10deg);
@@ -19,7 +19,7 @@
   font-size: 0;
 }
 .arm-logo__description{
-  color: $color-gray-900;
+  color: var(--color-gray-900);
   font-size: 14px;
   font-style: italic;
   margin-top: 2px;

package/assets/Modal.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@use "variables";
 
 .arm-modal{
   border-radius: var(--border-radius);
@@ -10,25 +10,25 @@
   min-height: 78px;
   display: flex;
   align-items: center;
-  padding: $size-step calc($size-step * 4);
+  padding: var(--size-step) calc(var(--size-step) * 4);
   border-top-left-radius:var(--border-radius);
   border-top-right-radius:var(--border-radius);
   position: relative;
 }
 .arm-modal__title{
   font-size: 20px;
-  color: $color-gray-900;
+  color: var(--color-gray-900);
 }
 .arm-modal__body{
-  padding: calc($size-step * 4)
+  padding: calc(var(--size-step) * 4)
 }
 .arm-modal__footer{
   margin-top: calc(var(--size-step) * 4);
-  padding: 0 calc($size-step * 4) calc($size-step * 4) calc($size-step * 4)
+  padding: 0 calc(var(--size-step) * 4) calc(var(--size-step) * 4) calc(var(--size-step) * 4)
 }
 .arm-modal__close{
   position: absolute;
-  right: calc($size-step * 4);
+  right: calc(var(--size-step) * 4);
   top: 50%;
   transform: translateY(-50%);
 }

package/assets/Paper.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@use "variables";
 
 .arm-paper{
   border-radius: var(--border-radius);

package/assets/Rating.scss

@@ -1,6 +1,6 @@
-
+@use "variables" as v;
 .arm-rating{
-  @include flex();
+  @include v.flex();
 }
 .arm-rating__item{
   cursor: pointer;

package/assets/Select.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@use "variables";
 
 .arm-select{
   position: relative;
@@ -25,9 +25,9 @@
   position: static;
 }
 .arm-selectSummary__wrapper{
-  padding: calc($size-step * 2) calc($size-step * 2) $size-step;
+  padding: calc(var(--size-step) * 2) calc(var(--size-step) * 2) var(--size-step);
   & .arm-selectSummary{
-    border-top: 1px solid $color-gray-300;
+    border-top: 1px solid var(--color-gray-300);
   }
 }
 .arm-selectSummary{
@@ -37,12 +37,12 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-top:$size-step;
+  margin-top:var(--size-step);
 }
 .arm-selectSummary__check{
   margin-right: 60px;
   font-size: 13px;
-  color: $color-gray-600;
+  color: var(--color-gray-600);
   cursor: pointer;
   &:nth-child(2){
     margin-right: auto;
@@ -53,12 +53,12 @@
   cursor: default;
 }
 .arm-selectSummary__checkLabel{
-  border-bottom: 1px dotted $color-gray-600;
+  border-bottom: 1px dotted var(--color-gray-600);
 }
 .arm-selectSummary__options{
-  border-bottom: 1px solid $color-gray-300;
-  padding: 0 0 calc($size-step) 0;
-  margin-bottom: calc($size-step / 2);
+  border-bottom: 1px solid var(--color-gray-300);
+  padding: 0 0 calc(var(--size-step)) 0;
+  margin-bottom: calc(var(--size-step) / 2);
 }
 .arm-selectSummary__optionList{
   display: flex;
@@ -66,8 +66,8 @@
   align-items: center;
 }
 .arm-selectSummary__option{
-  margin-right: $size-step;
-  margin-top: $size-step;
+  margin-right: var(--size-step);
+  margin-top: var(--size-step);
 }
 .arm-selectSummary__button{
   width: 100px;

package/assets/Skeleton.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@use "variables";
 
 .arm-skeleton{
   background-color: var(--color-gray-100);

package/assets/Slider.scss

@@ -1,6 +1,6 @@
-@import "variables";
+@use "variables" as v;
 
 .arm-slider__text{
-  @include flex(space-between);
-  margin-top: 8px;
+  @include v.flex(space-between);
+  margin-top: var(--size-step);
 }

package/assets/Status.scss

@@ -10,32 +10,32 @@
   font-family: inherit;
 }
 .arm-status_primary{
-  background: rgba($color-primary-dark, 0.2);
-  color: $color-primary-dark;
+  background: rgba(var(--color-primary-dark-rgb), 0.2);
+  color: var(--color-primary-dark);
 }
 .arm-status_secondary{
-  background: rgba($color-secondary-dark, 0.2);
-  color: $color-secondary-dark;
+  background: rgba(var(--color-secondary-dark-rgb), 0.2);
+  color: var(--color-secondary-dark);
 }
 .arm-status_neutral{
   background: rgba(#4D5359, 0.2);
   color: rgba(#212529, 0.7);
 }
 .arm-status_error{
-  background: rgba($color-error-dark, 0.2);
+  background: rgba(var(--color-error-dark-rgb), 0.2);
   color: var(--color-error-dark);
 }
 .arm-status_warning{
   background: rgba(#FFC61A, 0.2);
-  color: $color-secondary-dark;
+  color: var(--color-secondary-dark);
 }
 .arm-status_info{
   background: rgba(#0D46FF, 0.2);
-  color: $color-primary-dark;
+  color: var(--color-primary-dark);
 }
 .arm-status_success{
   background: rgba(#0BD998, 0.2);
-  color: $color-success-dark;
+  color: var(--color-success-dark);
 }
 .arm-status__content{
   font-size: 14px;

package/assets/StepItem.scss

@@ -1,10 +1,11 @@
+@use "variables" as v;
 
 .arm-step-item__inner{
-  @include flex(flex-start, flex-start)
+  @include v.flex(flex-start, flex-start)
 }
 
 .arm-step-item__title{
-  margin: 2px 0 0 $size-step;
+  margin: 2px 0 0 var(--size-step);
   position: relative;
   background: #fff;
   padding-right: 5px;
@@ -13,7 +14,7 @@
   font-weight: 700;
 }
 .arm-step-item__title_error{
-  color: $color-error-dark
+  color: var(--color-error-dark)
 }
 
 .arm-step-item__content{
@@ -24,7 +25,7 @@
   position: relative;
 }
 .arm-step-item__button{
-  margin-top: $size-step;
+  margin-top: var(--size-step);
 }
 
 

package/assets/StepItemIcon.scss

@@ -1,6 +1,7 @@
+@use "variables" as v;
 
 .arm-step-item-icon{
-  @include flex(center);
+  @include v.flex(center);
   width: 24px;
   min-width: 24px;
   height: 24px;

package/assets/Switch.scss

@@ -22,7 +22,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: $color-neutral-light;
+  background-color: var(--color-neutral-light);
   -webkit-transition: .4s;
   transition: .4s;
   border-radius: 7px;
@@ -39,11 +39,11 @@
   -webkit-transition: .4s;
   transition: .4s;
   border-radius: 50%;
-  box-shadow: $box-shadow;
+  box-shadow: var(--box-shadow);
 }
 
 .arm-switch__input:checked + .arm-switch__slider {
-  background-color: $color-orange-400;
+  background-color: var(--color-orange-400);
 }
 
 .arm-switch__input:checked + .arm-switch__slider:before {

package/assets/Table.scss

@@ -14,16 +14,16 @@
 }
 
 .arm-table-cell{
-  color: $color-gray-800;
+  color: var(--color-gray-800);
   font-size: 14px;
-  border-bottom: 1px solid $color-gray-300;
+  border-bottom: 1px solid var(--color-gray-300);
   background-color: #fff;
 }
 .arm-table-cell__inner{
-  padding: calc($size-step * 2 ) $size-step;
+  padding: calc(var(--size-step) * 2 ) var(--size-step);
 }
 .arm-table-cell__inner_size_small{
-  padding: $size-step calc($size-step / 2 );
+  padding: var(--size-step) calc(var(--size-step) / 2 );
 }
 .arm-table-cell__inner_variant_outlined{
   padding-left: 0;
@@ -31,7 +31,7 @@
 }
 
 .arm-table-cell_head{
-  color: $color-gray-500
+  color: var(--color-gray-500)
 }
 .arm-table-cell_variant_outlined{
   background-color: transparent;