@itcase/ui 1.3.31 → 1.3.32

package/dist/css/components/Checkmark/Checkmark.css

@@ -3,14 +3,15 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  &__svg {
+  &__icon {
     width: 100%;
     height: 100%;
-    & .icon__item {
-      width: 100%;
-      height: 100%;
-      justify-content: center;
-      align-items: center;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    & svg {
+      transform: scale(0.65);
     }
   }
 }
@@ -18,10 +19,10 @@
   &_size {
     @each $size in xxs, xs, s, m, l, xl, xxl {
       &_$(size) {
-        min-width: var(--checkmark-width-size-$(size));
-        min-height: var(--checkmark-height-size-$(size));
-        max-width: var(--checkmark-width-size-$(size));
-        max-height: var(--checkmark-height-size-$(size));
+        min-width: var(--checkmark-width-$(size));
+        min-height: var(--checkmark-height-$(size));
+        max-width: var(--checkmark-width-$(size));
+        max-height: var(--checkmark-height-$(size));
       }
     }
   }

package/dist/css/components/Checkmark/Checkmark.tokens.css

@@ -1,16 +1,22 @@
 :root {
-  --checkmark-width-size-xxs: 16px;
-  --checkmark-height-size-xxs: 16px;
-  --checkmark-width-size-xs: 24px;
-  --checkmark-height-size-xs: 24px;
-  --checkmark-width-size-s: 32px;
-  --checkmark-height-size-s: 32px;
-  --checkmark-width-size-m: 40px;
-  --checkmark-height-size-m: 40px;
-  --checkmark-width-size-l: 48px;
-  --checkmark-height-size-l: 48px;
-  --checkmark-width-size-xl: 56px;
-  --checkmark-height-size-xl: 56px;
-  --checkmark-width-size-xxl: 64px;
-  --checkmark-height-size-xxl: 64px;
+  --checkmark-width--xxl: 64px;
+  --checkmark-height-xxl: 64px;
+
+  --checkmark-width-xl: 56px;
+  --checkmark-height-xl: 56px;
+
+  --checkmark-width-l: 48px;
+  --checkmark-height-l: 48px;
+
+  --checkmark-width-m: 40px;
+  --checkmark-height-m: 40px;
+
+  --checkmark-width-s: 32px;
+  --checkmark-height-s: 32px;
+
+  --checkmark-width-xs: 24px;
+  --checkmark-height-xs: 24px;
+
+  --checkmark-width-xxs: 16px;
+  --checkmark-height-xxs: 16px;
 }

package/dist/css/components/Chips/Chips.css

@@ -58,13 +58,3 @@
     }
   }
 }
-
-:root {
-  --chips-size-xxs-shape-rounded: 6px;
-  --chips-size-xs-shape-rounded: 6px;
-  --chips-size-s-shape-rounded: 6px;
-  --chips-size-m-shape-rounded: 6px;
-  --chips-size-l-shape-rounded: 6px;
-  --chips-size-xl-shape-rounded: 6px;
-  --chips-size-xxl-shape-rounded: 6px;
-}

package/dist/css/components/DadataHintField/DadataHintField.css

@@ -36,12 +36,4 @@
       border: solid 1px var(--react-dadata-focus-border);
     }
   }
-}:root {
-  --react-dadata-padding: 8px 12px;
-  --react-dadata-border-radius: 6px;
-  --react-dadata-color: var(--color-surface-text-primary);
-  --react-dadata-border: var(--color-surface-border-tertiary);
-  --react-dadata-hover-border: var(--color-surface-border-quaternary);
-  --react-dadata-focus-border: var(--color-surface-border-quaternary);
-  --react-dadata-error-border: var(--color-error-border-primary);
 }

package/dist/css/components/DadataHintField/DadataHintField.tokens.css

@@ -1,4 +1,9 @@
 :root {
-  --react-dadata-padding: 7px 12px;
-  --react-dadata-border-radius: 8px;
+  --react-dadata-padding: 8px 12px;
+  --react-dadata-border-radius: 6px;
+  --react-dadata-color: var(--color-surface-text-primary);
+  --react-dadata-border: var(--color-surface-border-tertiary);
+  --react-dadata-hover-border: var(--color-surface-border-quaternary);
+  --react-dadata-focus-border: var(--color-surface-border-quaternary);
+  --react-dadata-error-border: var(--color-error-border-primary);
 }

package/dist/css/components/DatePicker/DatePicker.css

@@ -825,7 +825,9 @@ h2.react-datepicker__current-month {
               outline: none;
             }
             &--disabled {
-              background: var(--date-picker-day-outside-background) !important;
+              background: var(
+                --date-picker-day-outside-background
+              ) !important;
               cursor: default !important;
               & .button__label {
                 color: var(--date-picker-day-outside-text-color) !important;
@@ -849,7 +851,9 @@ h2.react-datepicker__current-month {
               &:hover {
                 background: var(--date-picker-day-selected-background-hover);
                 & .button__label {
-                  color: var(--date-picker-day-selected-text-color) !important;
+                  color: var(
+                    --date-picker-day-selected-text-color
+                  ) !important;
                 }
               }
               & .button__label {
@@ -859,40 +863,66 @@ h2.react-datepicker__current-month {
             &--in-selecting-range,
             &--selecting-range,
             &--range {
-              background-color: var(--date-picker-day-range-background) !important;
-              border-radius: var(--date-picker-day-range-border-radius) !important;
+              background-color: var(
+                --date-picker-day-range-background
+              ) !important;
+              border-radius: var(
+                --date-picker-day-range-border-radius
+              ) !important;
               & .button__label {
                 color: var(--date-picker-day-range-text-color) !important;
               }
               &-start {
-                border-radius: var(--date-picker-day-range-start-border-radius) !important;
+                border-radius: var(
+                  --date-picker-day-range-start-border-radius
+                ) !important;
                 &:hover {
-                  background: var(--date-picker-day-selected-background-hover);
-                  border-radius: var(--date-picker-day-range-start-border-radius) !important;
+                  background: var(
+                    --date-picker-day-selected-background-hover
+                  );
+                  border-radius: var(
+                    --date-picker-day-range-start-border-radius
+                  ) !important;
                 }
               }
               &-end {
-                border-radius: var(--date-picker-day-range-end-border-radius) !important;
+                border-radius: var(
+                  --date-picker-day-range-end-border-radius
+                ) !important;
                 &:hover {
-                  border-radius: var(--date-picker-day-range-end-border-radius) !important;
+                  border-radius: var(
+                    --date-picker-day-range-end-border-radius
+                  ) !important;
                 }
               }
               &-start.react-datepicker__day--range-end {
-                border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                border-radius: var(
+                  --date-picker-day-range-start-end-border-radius
+                ) !important;
                 &:hover {
-                  border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                  border-radius: var(
+                    --date-picker-day-range-start-end-border-radius
+                  ) !important;
                 }
                 &.react-datepicker__day--today {
-                  border-radius: var(--date-picker-day-today-border-radius) !important;
+                  border-radius: var(
+                    --date-picker-day-today-border-radius
+                  ) !important;
                   &:hover {
-                    border-radius: var(--date-picker-day-today-border-radius) !important;
+                    border-radius: var(
+                      --date-picker-day-today-border-radius
+                    ) !important;
                   }
                 }
               }
               &.react-datepicker__day--selecting-range-start.react-datepicker__day--selecting-range-end {
-                border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                border-radius: var(
+                  --date-picker-day-range-start-end-border-radius
+                ) !important;
                 &:hover {
-                  border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                  border-radius: var(
+                    --date-picker-day-range-start-end-border-radius
+                  ) !important;
                 }
               }
             }
@@ -908,9 +938,13 @@ h2.react-datepicker__current-month {
                 background: var(--date-picker-day-selected-background);
                 border-radius: 0;
                 &:hover {
-                  background: var(--date-picker-day-selected-background-hover);
+                  background: var(
+                    --date-picker-day-selected-background-hover
+                  );
                   & .button__label {
-                    color: var(--date-picker-day-selected-text-color) !important;
+                    color: var(
+                      --date-picker-day-selected-text-color
+                    ) !important;
                   }
                 }
                 & .button__label {
@@ -918,21 +952,33 @@ h2.react-datepicker__current-month {
                 }
               }
               &.react-datepicker__day--range {
-                background-color: var(--date-picker-day-range-background) !important;
-                border-radius: var(--date-picker-day-range-border-radius) !important;
+                background-color: var(
+                  --date-picker-day-range-background
+                ) !important;
+                border-radius: var(
+                  --date-picker-day-range-border-radius
+                ) !important;
                 & .button__label {
                   color: var(--date-picker-day-range-text-color) !important;
                 }
                 &-start {
-                  border-radius: var(--date-picker-day-range-start-border-radius) !important;
+                  border-radius: var(
+                    --date-picker-day-range-start-border-radius
+                  ) !important;
                   &:hover {
-                    border-radius: var(--date-picker-day-range-start-border-radius) !important;
+                    border-radius: var(
+                      --date-picker-day-range-start-border-radius
+                    ) !important;
                   }
                 }
                 &-end {
-                  border-radius: var(--date-picker-day-range-end-border-radius) !important;
+                  border-radius: var(
+                    --date-picker-day-range-end-border-radius
+                  ) !important;
                   &:hover {
-                    border-radius: var(--date-picker-day-range-end-border-radius) !important;
+                    border-radius: var(
+                      --date-picker-day-range-end-border-radius
+                    ) !important;
                   }
                 }
               }
@@ -968,7 +1014,9 @@ h2.react-datepicker__current-month {
               &.react-datepicker__day--selected {
                 background: var(--date-picker-day-selected-background);
                 &:hover {
-                  background: var(--date-picker-day-selected-background) !important;
+                  background: var(
+                    --date-picker-day-selected-background
+                  ) !important;
                 }
                 & .button__label {
                   color: var(--date-picker-day-selected-text-color);
@@ -976,16 +1024,22 @@ h2.react-datepicker__current-month {
               }
               &.react-datepicker__day--outside-month {
                 & .button__label {
-                  color: var(--date-picker-day-weekend-outside-text-color) !important;
+                  color: var(
+                    --date-picker-day-weekend-outside-text-color
+                  ) !important;
                 }
               }
               &.react-datepicker__day--in-range {
                 background: var(--date-picker-day-selected-background);
                 border-radius: 0;
                 &:hover {
-                  background: var(--date-picker-day-selected-background-hover);
+                  background: var(
+                    --date-picker-day-selected-background-hover
+                  );
                   & .button__label {
-                    color: var(--date-picker-day-selected-text-color) !important;
+                    color: var(
+                      --date-picker-day-selected-text-color
+                    ) !important;
                   }
                 }
                 & .button__label {
@@ -993,27 +1047,41 @@ h2.react-datepicker__current-month {
                 }
               }
               &.react-datepicker__day--range {
-                background-color: var(--date-picker-day-range-background) !important;
-                border-radius: var(--date-picker-day-range-border-radius) !important;
+                background-color: var(
+                  --date-picker-day-range-background
+                ) !important;
+                border-radius: var(
+                  --date-picker-day-range-border-radius
+                ) !important;
                 & .button__label {
                   color: var(--date-picker-day-range-text-color) !important;
                 }
                 &-start {
-                  border-radius: var(--date-picker-day-range-start-border-radius) !important;
+                  border-radius: var(
+                    --date-picker-day-range-start-border-radius
+                  ) !important;
                   &:hover {
-                    border-radius: var(--date-picker-day-range-start-border-radius) !important;
+                    border-radius: var(
+                      --date-picker-day-range-start-border-radius
+                    ) !important;
                   }
                 }
                 &-end {
-                  border-radius: var(--date-picker-day-range-end-border-radius) !important;
+                  border-radius: var(
+                    --date-picker-day-range-end-border-radius
+                  ) !important;
                   &:hover {
-                    border-radius: var(--date-picker-day-range-end-border-radius) !important;
+                    border-radius: var(
+                      --date-picker-day-range-end-border-radius
+                    ) !important;
                   }
                 }
               }
             }
             &--outside-month {
-              background: var(--date-picker-day-outside-background) !important;
+              background: var(
+                --date-picker-day-outside-background
+              ) !important;
               cursor: default !important;
               & .button__label {
                 color: var(--date-picker-day-outside-text-color) !important;
@@ -1158,38 +1226,3 @@ h2.react-datepicker__current-month {
     }
   }
 }
-:root {
-  --input-container-padding: 9px 15px;
-  --date-picker-name-size: 18px;
-  --date-picker-name-weight: 400;
-  --date-picker-selected-weight: 400;
-  --date-picker-input-border-radius: 6px;
-  --date-picker-background: var(--color-surface-primary);
-  --date-picker-padding: 24px 12px;
-  --date-picker-box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
-  --date-picker-border-radius: 12px;
-  --date-picker-border: 1px solid var(--color-surface-tertiary);
-  --date-picker-day-width: 40px;
-  --date-picker-day-height: 40px;
-  --date-picker-day-padding: 8px 0;
-  --date-picker-day-border-radius: 6px;
-  --date-picker-day-hover-background: var(--color-accent-tertiary);
-  --date-picker-day-hover-text-color: var(--color-surface-text-secondary);
-  --date-picker-day-range-background: var(--color-accent-tertiary);
-  --date-picker-day-range-text-color: var(--color-accent-text-secondary);
-  --date-picker-day-range-border-radius: 0;
-  --date-picker-day-range-start-border-radius: 12px 0 0 12px;
-  --date-picker-day-range-end-border-radius: 0 12px 12px 0;
-  --date-picker-day-range-start-end-border-radius: 12px;
-  --date-picker-day-today-background: var(--color-surface-secondary);
-  --date-picker-day-today-border-radius: 12px;
-  --date-picker-day-today-text-color: var(--color-surface-text-primary);
-  --date-picker-day-weekend-background: var(--color-surface-primary);
-  --date-picker-day-weekend-text-color: var(--color-secondary-text-secondary);
-  --date-picker-day-weekend-outside-text-color: var(--color-secondary-text-disabled);
-  --date-picker-day-selected-background: var(--color-accent-primary);
-  --date-picker-day-selected-background-hover: var(--color-accent-primary-hover);
-  --date-picker-day-selected-text-color: var(--color-accent-text-primary);
-  --date-picker-day-outside-background: var(--color-surface-primary);
-  --date-picker-day-outside-text-color: var(--color-surface-text-quaternary);
-}

package/dist/css/components/DatePicker/DatePicker.tokens.css

@@ -1,4 +1,10 @@
 :root {
+  --input-container-padding: 9px 15px;
+
+  --date-picker-name-size: 18px;
+  --date-picker-name-weight: 400;
+  --date-picker-selected-weight: 400;
+
   --date-picker-input-border-radius: 6px;
 
   --date-picker-background: var(--color-surface-primary);
@@ -10,8 +16,7 @@
   --date-picker-day-width: 40px;
   --date-picker-day-height: 40px;
   --date-picker-day-padding: 8px 0;
-  --date-picker-day-border-radius: 8px;
-
+  --date-picker-day-border-radius: 6px;
   --date-picker-day-hover-background: var(--color-accent-tertiary);
   --date-picker-day-hover-text-color: var(--color-surface-text-secondary);
 

package/dist/css/components/Divider/Divider.css

@@ -50,15 +50,3 @@
     }
   }
 }
-:root {
-  --divider-size-xs-height: 1px;
-  --divider-size-s-height: 2px;
-  --divider-size-m-height: 3px;
-  --divider-size-l-height: 4px;
-  --divider-size-xl-height: 5px;
-  --divider-size-xs-width: 1px;
-  --divider-size-s-width: 2px;
-  --divider-size-m-width: 3px;
-  --divider-size-l-width: 4px;
-  --divider-size-xl-width: 5px;
-}

package/dist/css/components/Divider/Divider.tokens.css

@@ -0,0 +1,12 @@
+:root {
+  --divider-size-xs-height: 1px;
+  --divider-size-s-height: 2px;
+  --divider-size-m-height: 3px;
+  --divider-size-l-height: 4px;
+  --divider-size-xl-height: 5px;
+  --divider-size-xs-width: 1px;
+  --divider-size-s-width: 2px;
+  --divider-size-m-width: 3px;
+  --divider-size-l-width: 4px;
+  --divider-size-xl-width: 5px;
+}

package/dist/css/components/Flex/Flex.css

@@ -176,4 +176,3 @@
     }
   }
 }
-

package/dist/css/components/Grid/Grid.css

@@ -224,8 +224,4 @@
     display: grid;
     transition: var(--grid-row-transition);
   }
-}
-:root {
-  --grid-row-transition: all 0.2s ease 0s;
-  --grid-item-transition: all 0.2s ease 0s;
-}
+}

package/dist/css/components/HeroTitle/HeroTitle.css

@@ -15,11 +15,11 @@
       );
       background-size: 200%;
       border-radius: 6px;
-      animation: hero-title-skeleton 3s infinite linear;
+      animation: heroTitleSkeleton 3s infinite linear;
     }
   }
 }
-@keyframes hero-title-skeleton {
+@keyframes heroTitleSkeleton {
   0% {
     background-position: 200%;
   }

package/dist/css/components/Icon/Icon.css

@@ -10,7 +10,7 @@
 }
 .icon {
   &_size {
-    @each $size in 14, 16, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144 {
+    @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144 {
       &_$(size) {
         width: $(size)px;
         height: $(size)px;
@@ -29,11 +29,12 @@
   }
 }
 .icon_fill {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
+    senary, surface, error, success, warning, info, danger, gradient {
     &_$(type) {
       &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
-          hover, inverse {
+        @each $color in primary, secondary, tertiary, quaternary, quinary,
+          senary, accent, disabled, hover, inverse {
           &-$(color) {
             & svg {
               stroke: none;
@@ -42,8 +43,8 @@
           }
         }
       }
-      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
-        hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, quinary,
+        senary, accent, disabled, hover, inverse {
         &-$(color) {
           & svg {
             stroke: none;
@@ -55,10 +56,12 @@
   }
 }
 .icon_fill_hover {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
+    senary, surface, error, success, warning, info, danger, gradient {
     &_$(type) {
       &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary,
+          senary, accent, disabled, hover, inverse {
           &-$(color) {
             &:hover {
               & svg {
@@ -74,7 +77,7 @@
 }
 .icon_fill {
   &_size {
-    @each $size in 14, 16, 24, 32, 40, 48, 56, 60, 72 {
+    @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 72 {
       &_$(size) {
         width: $(size)px;
         height: $(size)px;
@@ -106,7 +109,7 @@
       ^^&__link,
       ^^&__item {
         text-decoration: none;
-        @each $size in 14, 16, 24, 32, 40, 56, 60, 72 {
+        @each $size in 14, 16, 20, 24, 32, 40, 56, 60, 72 {
           &^^^&_size_$(size) {
             & .badge {
               transform: translate(var(--icon-size-$(size)-badge-position));
@@ -129,7 +132,3 @@
     }
   }
 }
-:root {
-  --icon-transition: all 0.2s ease 0s;
-  --icon-size-24-badge-position: 12px, 12px;
-}

package/dist/css/components/Icon/Icon.tokens.css

@@ -1,3 +1,4 @@
 :root {
-  --icon-size-24-badge-position: 14px, -12px;
+  --icon-transition: all 0.2s ease 0s;
+  --icon-size-24-badge-position: 12px, 12px;
 }

package/dist/css/components/Image/Image.css

@@ -41,14 +41,14 @@
         var(--color-surface-secondary)
       );
       background-size: 200%;
-      animation: image-skeleton 3s infinite linear;
+      animation: imageSkeleton 3s infinite linear;
       ^^&__item {
-        opacity: 0;
+        opacity: 0%;
       }
     }
   }
 }
-@keyframes image-skeleton {
+@keyframes imageSkeleton {
   0% {
     background-position: 200%;
   }

package/dist/css/components/Label/Label.css

@@ -21,14 +21,14 @@
         var(--color-surface-secondary)
       );
       background-size: 200%;
-      animation: label-skeleton 3s infinite linear;
+      animation: labelSkeleton 3s infinite linear;
       ^^&__label {
         color: transparent;
       }
     }
   }
 }
-@keyframes label-skeleton {
+@keyframes labelSkeleton {
   0% {
     background-position: 200%;
   }

package/dist/css/components/Loader/Loader.css

@@ -12,18 +12,22 @@
   }
 }
 .loader {
-  &_set {
+  &_type {
     &_simple {
       ^^&__inner {
         width: auto;
         height: auto;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
       }
       ^^&__item {
         width: 12px;
         height: 12px;
+        margin: 4px;
         border-radius: 100%;
         display: inline-block;
-        margin: 4px;
         animation: loaderSimple 1.4s infinite ease-in-out both;
         &:first-child {
           animation-delay: -0.32s;
@@ -36,9 +40,12 @@
   }
 }
 @keyframes loaderSimple {
-  0%, 80%, 100% {
+  0%,
+  80%,
+  100% {
     transform: scale(0);
-  } 40% {
-    transform: scale(1.0);
+  }
+  40% {
+    transform: scale(1);
   }
 }