@itcase/ui 1.8.1 → 1.8.4

package/dist/css/components/Cell/Cell.css

@@ -26,20 +26,20 @@
       &_vertical {
         display: flex;
         flex-direction: column;
-        gap: var(--cell-vertical-gap, 4px);
+        gap: var(--cell-vertical-gap);
       }
       &_horizontal {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-        gap: var(--cell-horizontal-gap, 20px);
+        gap: var(--cell-horizontal-gap);
       }
     }
   }
 }
 .cell {
   &_size {
-    @each $size in xs, s, m, l, xl {
+    @each $size in s, m, l, xl {
       &_$(size) {
         ^^&__wrapper {
           padding: var(--cell-size-$(size)-padding);
@@ -52,7 +52,7 @@
   &__wrapper {
     &_shape {
       &_rounded {
-        border-radius: var(--cell-border-radius, 6px);
+        border-radius: var(--cell-border-radius);
       }
     }
   }
@@ -125,9 +125,10 @@
   }
 }
 :root {
-  --cell-size-xs-padding: 6px;
-  --cell-size-s-padding: 6px;
-  --cell-size-m-padding: 6px;
-  --cell-size-l-padding: 6px;
-  --cell-size-xl-padding: 12px;
+  --cell-vertical-gap: 4px;
+  --cell-horizontal-gap: 8px;
+  --cell-border-radius: 0;
+  @each $size, $value in (s, m, l, xl), (6px, 6px, 6px, 6px) {
+    --cell-size-$(size)-padding: $value;
+  }
 }

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

@@ -36,36 +36,48 @@
 }
 
 :root {
+  /* Rounded */
+  --chips-shape-rounded-default: 0;
+  @each $size, $value in (xxl, xl, l, m, s, xs, xxs), (0, 0, 0, 0, 0, 0, 0) {
+    --chips-$(size)-shape-rounded: $(value);
+  }
+
   /* Size XXL */
   --chips-xxl-gap: 0.5m;
   --chips-xxl-padding: 2m 2m;
   --chips-xxl-min-width: 48px;
   --chips-xxl-min-height: 48px;
+
   /* Size XL */
   --chips-xl-gap: 0.5m;
   --chips-xl-padding: 1m 1m;
   --chips-xl-min-width: 40px;
   --chips-xl-min-height: 40px;
+
   /* Size L */
   --chips-l-gap: 0.5m;
   --chips-l-padding: 0.5m 0.5m;
   --chips-l-min-width: 32px;
   --chips-l-min-height: 32px;
+
   /* Size M */
   --chips-m-gap: 0.5m;
   --chips-m-padding: 0.75m 1.25m;
   --chips-m-min-width: 28px;
   --chips-m-min-height: 28px;
+
   /* Size S */
   --chips-s-gap: 0.5m;
   --chips-s-padding: 0.25m 0.5m;
   --chips-s-min-width: 24px;
   --chips-s-min-height: 24px;
+
   /* Size XS */
   --chips-xs-gap: 0.5m;
   --chips-xs-padding: 0.5m 0.5m;
   --chips-xs-min-width: 20px;
   --chips-xs-min-height: 20px;
+
   /* Size XXS */
   --chips-xxs-gap: 0.5m;
   --chips-xxs-padding: 0.25m 0.25m;

package/dist/css/components/Choice/Choice.css

@@ -2,9 +2,12 @@
   margin: 2px 0;
   position: relative;
   display: flex;
+
+  /*
   &:not(:last-child) {
     border-right: var(--chioce-item-border-right);
   }
+  */
   &_state_disabled {
     background: var(--choice-item-state-disabled-background);
     &:hover {
@@ -47,6 +50,16 @@
     }
   }
 }
+.choice__item {
+  &_size {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
+      &_$(size) {
+        min-height: var(--choice-size-$(size)-min-height);
+        padding: var(--choice-item-size-$(size)-padding);
+      }
+    }
+  }
+}
 .choice {
   padding: 0 2px;
   position: relative;
@@ -86,23 +99,29 @@
 }
 .choice {
   &_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
+    /* @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
-        height: var(--choice-size-$(size)-height);
-        ^^&__item {
-          &-label {
-            height: var(--choice-item-size-$(size)-height);
-            padding: var(--choice-item-size-$(size)-padding);
-          }
-        }
+        gap: var(--choice-size-$(size)-row-gap)
+          var(--choice-size-$(size)-column-gap);
       }
-    }
+    } */
   }
 }
 .choice {
   &_wrap {
     &_wrap {
       flex-wrap: wrap;
+      &^^&_size {
+        @each $size in xxl, xl, l, m, s, xs, xxs {
+          &_$(size) {
+            gap: var(--choice-size-$(size)-row-gap)
+              var(--choice-size-$(size)-column-gap);
+            & .choice__item {
+              margin: 0;
+            }
+          }
+        }
+      }
     }
     &_nowrap {
       flex-wrap: nowrap;
@@ -113,15 +132,29 @@
   }
 }
 :root {
-
-  --choice-size-s-height: 28px;;
+  --choice-size-s-height: 28px;
   --choice-size-m-height: 36px;
+  --choice-size-l-height: 40px;
 
-  --choice-item-size-s-padding: 0px 10px;
-  --choice-item-size-m-padding: 0px 12px;
+  --choice-size-s-min-height: 28px;
+  --choice-size-m-min-height: 36px;
+  --choice-size-l-min-height: 40px;
 
-  --choice-item-icon-padding: 0;
+  --choice-size-s-row-gap: 12px;
+  --choice-size-s-column-gap: 12px;
+
+  --choice-size-m-row-gap: 12px;
+  --choice-size-m-column-gap: 12px;
+
+  --choice-size-l-row-gap: 12px;
+  --choice-size-l-column-gap: 12px;
 
   --choice-shape-rounded: 8px;
+
+  --choice-item-size-s-padding: 0px 10px;
+  --choice-item-size-m-padding: 0px 10px;
+  --choice-item-size-l-padding: 0px 10px;
+
+  --choice-item-icon-padding: 0;
   --choice-item-shape-rounded: 8px;
 }

package/dist/css/components/Choice/css/__item/choice__item.css

@@ -2,9 +2,12 @@
   margin: 2px 0;
   position: relative;
   display: flex;
+
+  /*
   &:not(:last-child) {
     border-right: var(--chioce-item-border-right);
   }
+  */
   &_state_disabled {
     background: var(--choice-item-state-disabled-background);
     &:hover {

package/dist/css/components/Choice/css/__item/choice__item_size.css

@@ -0,0 +1,10 @@
+.choice__item {
+  &_size {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
+      &_$(size) {
+        min-height: var(--choice-size-$(size)-min-height);
+        padding: var(--choice-item-size-$(size)-padding);
+      }
+    }
+  }
+}

package/dist/css/components/Code/Code.css

@@ -49,15 +49,13 @@
   }
 }
 :root {
-  --code-input-size-compact-width: 36px;
-  --code-input-size-compact-height: 36px;
-  --code-input-size-compact-padding: 5px;
-  --code-input-size-normal-width: 48px;
-  --code-input-size-normal-height: 48px;
-  --code-input-size-normal-padding: 10px 12px;
-
-  --code-input-size-l-width: 56px;
-  --code-input-size-l-height: 56px;
-
-  --code-size-l-gap: 8px;
+  --code-input-shape-rounded: 0;
+  @each $size, $width, $height, $padding, $gap in (xxl, xl, l, m, s, xs, xxs),
+    (0, 0, 0, 0, 0, 0, 0), (0, 0, 0, 0, 0, 0, 0), (0, 0, 0, 0, 0, 0, 0),
+    (8, 8, 8, 8, 8, 8, 8) {
+    --code-input-size-$(size)-width: $width;
+    --code-input-size-$(size)-height: $height;
+    --code-input-size-$(size)-padding: $padding;
+    --code-size-$(size)-gap: $gap;
+  }
 }

package/dist/css/components/CookiesWarning/CookiesWarning.css

@@ -18,7 +18,7 @@
     animation-name: cookieMessageClose;
   }
   &__inner {
-    background: var(--color-surface-primary);
+    background: var(--color-surface-fill-primary);
     padding: 32px;
     position: relative;
     @media (--mobile) {

package/dist/css/components/CookiesWarning/CookiesWarning.token.css

@@ -0,0 +1,2 @@
+:root {
+}

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

@@ -725,7 +725,7 @@ h2.react-datepicker__current-month {
 }
 .react-datepicker {
   font-size: inherit;
-  background: var(--date-picker-background);
+  background: var(--date-picker-fill);
   border: none;
   border-radius: var(--date-picker-border-radius);
   display: flex;
@@ -771,7 +771,7 @@ h2.react-datepicker__current-month {
         border-bottom: none;
         display: flex;
         flex-direction: column;
-        gap: 24px;
+        gap: 12px;
         background-color: transparent;
         &--div {
           display: flex;
@@ -788,11 +788,28 @@ h2.react-datepicker__current-month {
                 text-transform: uppercase;
               }
             }
+            ^^^^^&__year {
+              margin: 0;
+            }
           }
         }
         &--time {
           padding: 0;
         }
+        ^^^&__week {
+          &-number {
+            width: var(--date-picker-week-width);
+            height: var(--date-picker-week-height);
+            font-size: var(--date-picker-week-text-size);
+            font-weight: var(--date-picker-week-text-weight);
+            color: var(--date-picker-week-text-color);
+            line-height: var(--date-picker-week-text-line-height);
+            margin: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
         ^^^&__day {
           &-names {
             margin: 0;
@@ -801,7 +818,10 @@ h2.react-datepicker__current-month {
           &-name {
             width: var(--date-picker-day-width);
             height: var(--date-picker-day-height);
-            line-height: normal;
+            font-size: var(--date-picker-day-name-text-size);
+            font-weight: var(--date-picker-day-name-text-weight);
+            color: var(--date-picker-day-name-text-color);
+            line-height: var(--date-picker-day-name-text-line-height);
             margin: 0;
             display: flex;
             justify-content: center;
@@ -812,11 +832,31 @@ h2.react-datepicker__current-month {
       ^^&__month {
         ^^^&__week {
           display: flex;
+          &-number {
+            color: var(--date-picker-week-number-text-color);
+            width: var(--date-picker-day-width);
+            height: var(--date-picker-day-height);
+            border-radius: var(--date-picker-day-border-radius);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0;
+            font-size: var(--date-picker-day-text-size);
+            font-weight: var(--date-picker-day-text-weight);
+            line-height: var(--date-picker-day-text-line-height);
+            &:hover {
+              background: var(--date-picker-week-number-fill-hover);
+              cursor: pointer;
+            }
+          }
           ^^^^&__day {
             width: var(--date-picker-day-width);
             height: var(--date-picker-day-height);
             margin: 0;
             border-radius: var(--date-picker-day-border-radius);
+            display: flex;
+            justify-content: center;
+            align-items: center;
             &:hover {
               color: var(--date-picker-day-hover-text-color);
               background: var(--date-picker-day-hover-background);
@@ -824,11 +864,18 @@ h2.react-datepicker__current-month {
             &:focus {
               outline: none;
             }
+            & .button__label {
+              color: var(--date-picker-day-text-color);
+              font-size: var(--date-picker-day-text-size);
+              font-weight: var(--date-picker-day-text-weight);
+              line-height: var(--date-picker-day-text-line-height);
+              cursor: pointer !important;
+            }
             &--disabled {
               background: var(--date-picker-day-outside-background) !important;
               cursor: default !important;
               & .button__label {
-                color: var(--date-picker-day-outside-text-color) !important;
+                color: var(--date-picker-day-ouside-ext-color) !important;
                 cursor: default !important;
               }
             }
@@ -951,6 +998,7 @@ h2.react-datepicker__current-month {
                   --date-picker-day-range-border-radius
                 ) !important;
                 & .button__label {
+          
                   color: var(--date-picker-day-range-text-color) !important;
                 }
                 &-start {
@@ -1005,10 +1053,14 @@ 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;
+                  & .button__label {
+                    color: var(--date-picker-day-selected-text-hover-color) !important;
+                  }
                 }
                 & .button__label {
                   color: var(--date-picker-day-selected-text-color);
@@ -1027,6 +1079,7 @@ 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;
@@ -1044,6 +1097,7 @@ h2.react-datepicker__current-month {
                   --date-picker-day-range-border-radius
                 ) !important;
                 & .button__label {
+                  
                   color: var(--date-picker-day-range-text-color) !important;
                 }
                 &-start {
@@ -1095,7 +1149,7 @@ h2.react-datepicker__current-month {
       float: none;
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: 12px;
       ^&-box {
       }
     }
@@ -1156,7 +1210,7 @@ h2.react-datepicker__current-month {
     transform: translateY(-50%);
   }
   &__clear-label {
-    width: 100%;
+    width: auto;
   }
   &__input-icon.icon {
     background: #fff;
@@ -1170,14 +1224,15 @@ h2.react-datepicker__current-month {
     ^&__input-container {
       & .input {
         cursor: pointer;
-        &.input_size_l {
-          padding: var(--date-picker-input-container-padding);
-        }
       }
     }
   }
   &-time {
     &__header {
+      min-height: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       font-size: var(--date-picker-name-size);
       font-weight: var(--date-picker-name-weight);
     }
@@ -1191,7 +1246,7 @@ h2.react-datepicker__current-month {
   }
 }
 .datepicker {
-  &_type_multiple-months {
+  &_multiple-months {
     & .react-datepicker {
       &__month-container {
         &:nth-last-child(2) {
@@ -1216,40 +1271,72 @@ h2.react-datepicker__current-month {
     }
   }
 }
+.datepicker {
+  &_button {
+    & .react-datepicker {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-template-rows: 1fr auto;
+      grid-column-gap: 0;
+      &__input-time-container {
+        grid-row-start: 2;
+        grid-column-start: span 2;
+      }
+    }
+  }
+}
 :root {
+  --date-picker-padding: 24px 12px;
+  --date-picker-fill: var(--color-surface-fill-primary);
+  --date-picker-box-shadow: 0px 4px 24px 0px rgb(0, 0, 0, 0.2);
+  --date-picker-border-radius: 12px;
+  --date-picker-border: solid 1px var(--color-surface-tertiary);
+
   --date-picker-input-container-padding: 9px 15px;
-  --date-picker-day-border-radius: 8px;
-  --date-picker-day-width: 35px;
-  --date-picker-day-height: 35px;
+  --date-picker-input-border-radius: 6px;
 
   --date-picker-name-size: 16px;
 
   --date-picker-name-weight: 400;
   --date-picker-selected-weight: 400;
+  --date-picker-week-width: 40px;
+  --date-picker-week-height: 40px;
+  --date-picker-week-text-color: lime;
+  --date-picker-week-text-line-height: 20px;
+  --date-picker-week-text-size: 18px;
+  --date-picker-week-text-weight: normal;
 
-  --date-picker-input-border-radius: 6px;
+  --date-picker-week-number-fill-hover: #eee;
+  --date-picker-week-number-text-color: var(--color-surface-text-quaternary);
 
-  --date-picker-background: var(--color-surface-primary, #fff);
-  --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-name-text-size: 16px;
+  --date-picker-day-name-text-line-height: 18px;
+  --date-picker-day-name-text-weight: normal;
+  --date-picker-day-name-text-color: var(--color-surface-text-secondary);
 
+  --date-picker-day-width: 40px;
+  --date-picker-day-height: 40px;
+  --date-picker-day-text-size: 18px;
+  --date-picker-day-text-line-height: 20px;
+  --date-picker-day-text-weight: normal;
+  --date-picker-day-text-color: var(--color-surface-text-primary);
   --date-picker-day-padding: 8px 0;
   --date-picker-day-hover-background: var(--color-accent-tertiary);
   --date-picker-day-hover-text-color: var(--color-surface-text-secondary);
+  --date-picker-day-border-radius: 8px;
 
+  --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-range-start-end-border-radius: 8px;
   --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-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-background: var(--color-surface-fill-primary);
   --date-picker-day-weekend-text-color: var(--color-secondary-text-secondary);
   --date-picker-day-weekend-outside-text-color: var(
     --color-secondary-text-disabled
@@ -1260,7 +1347,8 @@ h2.react-datepicker__current-month {
     --color-accent-primary-hover
   );
   --date-picker-day-selected-text-color: var(--color-accent-text-primary);
+  --date-picker-day-selected-text-hover-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);
+  --date-picker-day-outside-background: var(--color-surface-fill-primary);
+  --date-picker-day-outside-text-color: var(--color-surface-text-tertiary);
 }

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

@@ -5,7 +5,7 @@
 }
 .divider {
   &_size {
-    @each $size in l, m, s{
+    @each $size in l, m, s {
       &_$(size) {
         height: var(--divider-$(size)-height);
         min-height: var(--divider-$(size)-height);
@@ -15,7 +15,7 @@
   &_direction {
     &_horizontal {
       &^^&_size {
-        @each $size in l, m, s{
+        @each $size in l, m, s {
           &_$(size) {
             height: var(--divider-$(size)-height);
             min-height: var(--divider-$(size)-height);
@@ -25,7 +25,7 @@
     }
     &_vertical {
       &^^&_size {
-        @each $size in l, m, s{
+        @each $size in l, m, s {
           &_$(size) {
             width: var(--divider-$(size)-width);
             height: auto;
@@ -58,5 +58,4 @@
   --divider-l-width: 3px;
   --divider-m-width: 2px;
   --divider-s-width: 1px;
-  ;
 }

package/dist/css/components/Dot/Dot.css

@@ -26,6 +26,7 @@
   }
 }
 :root {
+  --dot-shape-rounded: 0;
   --dot-size-s-width: 12px;
   --dot-size-s-height: 12px;
 

package/dist/css/components/Drawer/Drawer.css

@@ -29,12 +29,9 @@
   display: flex;
   flex-flow: column nowrap;
   &__overlay {
-    background: var(
-      --drawer-overlay-background,
-      rgba(116, 116, 116, 0.5)
-    ) !important;
+    background: var(--drawer-overlay-background) !important;
     opacity: 100% !important;
-    backdrop-filter: var(--drawer-overlay-filter, blur(10px)) !important;
+    backdrop-filter: var(--drawer-overlay-filter) !important;
   }
   &__wrapper {
     flex: 1;
@@ -54,6 +51,6 @@
   }
 }
 :root {
-  --drawer-overlay-background: none;
-  --drawer-overlay-filter: blur(0);
+  --drawer-overlay-background: rgb(116, 116, 116, 0.5);
+  --drawer-overlay-filter: blur(10px);
 }

package/dist/css/components/Dropdown/Dropdown.css

@@ -92,7 +92,7 @@
 .dropdown {
   &__item {
     &_size {
-      @each $size in xxl, xl, l, m, s, xs, xxs {
+      @each $size in xs, s, l {
         &_$(size) {
           ^^&-wrapper {
             gap: var(--dropdown-item-size-$(size)-gap);
@@ -119,15 +119,30 @@
   }
 }
 :root {
+  /* Default */
+  --dropdown-default-padding: 0;
+  --dropdown-default-gap: 0;
+
+  /* Common */
+  --dropdown-shape-rounded: 0;
+  --dropdown-item-shape-rounded: 0;
+  --dropdown-item-width-fixed: 0;
+  --dropdown-compact-padding: 0;
+  --dropdown-compact-gap: 0;
+
+  /* Sizes XS */
   --dropdown-item-size-xs-padding: 0;
   --dropdown-item-size-xs-gap: 8px;
 
-  --dropdown-item-size-m-padding: 0px;
-  --dropdown-item-size-m-gap: 0px;
+  /* Sizes M */
+  --dropdown-item-size-s-padding: 0px;
+  --dropdown-item-size-s-gap: 0px;
 
+  /* Sizes L */
   --dropdown-item-size-l-padding: 10px 12px;
   --dropdown-item-size-l-gap: 12px;
 
+  /* Normal */
   --dropdown-normal-padding: 16px;
   --dropdown-normal-gap: 16px;
 }