@itcase/ui 1.8.0 → 1.8.3

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

@@ -1,26 +1,17 @@
 .choice__item {
-  min-width: 30px;
+  margin: 2px 0;
   position: relative;
   display: flex;
-  /* &:hover {
-    background: var(--choice-item-background-hover);
-  } */
+
+  /*
   &:not(:last-child) {
-    border-right: var(--chioce-item-border-right, 1px solid var(--choice-border-color));
+    border-right: var(--chioce-item-border-right);
   }
+  */
   &_state_disabled {
-    background: var(--choice-item-state-disabled-background, #ececec);
+    background: var(--choice-item-state-disabled-background);
     &:hover {
-      background: var(--choice-item-state-disabled-background, #ececec);
-    }
-  }
-  &_active {
-    background: var(--choice-item-background-active);
-    &_state_disabled {
-      background: var(--choice-item-active-state-disabled-background, #ccc);
-      &:hover {
-        background: var(--choice-item-active-state-disabled-background, #ccc);
-      }
+      background: var(--choice-item-state-disabled-background);
     }
   }
   & input {
@@ -39,6 +30,7 @@
     text-align: center;
     position: relative;
     display: flex;
+    align-items: center;
     z-index: 3;
     transition: color 0.5s ease;
     cursor: pointer;
@@ -47,17 +39,38 @@
     padding: var(--choice-item-icon-padding);
   }
 }
-
+.choice__item {
+  &_shape {
+    &_rounded {
+      border-radius: var(--choice-item-shape-rounded);
+      overflow: hidden;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.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;
   display: flex;
-  align-items: center;
-  &__wrapper {
-    position: relative;
-    display: flex;
+  &__before {
+    margin: 2px 0;
+  }
+  &__after {
+    margin: 2px 0;
   }
 }
-
 .choice {
   &_set {
     &_form {
@@ -74,37 +87,41 @@
     }
   }
 }
-
 .choice {
   &_shape {
     &_rounded {
       border-radius: var(--choice-shape-rounded);
-      overflow: hidden;
     }
     &_circular {
       border-radius: 50%;
     }
   }
 }
-
 .choice {
   &_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
+    /* @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
-        ^^&__item {
-          &-label {
-            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;
@@ -114,22 +131,30 @@
     }
   }
 }
-
 :root {
-  --choice-item-size-xs-padding: 1px 8px;
-  --choice-item-size-s-padding: 5px 10px;
-  --choice-item-size-m-padding: 7px 12px;
-  --choice-item-size-l-padding: 9px 15px;
-  --choice-item-size-xl-padding: 13px 20px;
-  --choice-item-size-xxl-padding: 17px 25px;
-  --choice-item-size-tiny-padding: 1px 8px;
-  --choice-item-size-compact-padding: 5px 10px;
-  --choice-item-size-normal-padding: 7px 12px;
-  --choice-item-size-large-padding: 9px 15px;
+  --choice-size-s-height: 28px;
+  --choice-size-m-height: 36px;
+  --choice-size-l-height: 40px;
+
+  --choice-size-s-min-height: 28px;
+  --choice-size-m-min-height: 36px;
+  --choice-size-l-min-height: 40px;
+
+  --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-background-hover: var(--color-surface-secondary);
-  --choice-item-background-active: var(--color-surface-active);
-  --choice-border-color: var(--color-surface-border-tertiary);
+  --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

@@ -1,26 +1,17 @@
 .choice__item {
-  min-width: 30px;
+  margin: 2px 0;
   position: relative;
   display: flex;
-  /* &:hover {
-    background: var(--choice-item-background-hover);
-  } */
+
+  /*
   &:not(:last-child) {
-    border-right: var(--chioce-item-border-right, 1px solid var(--choice-border-color));
+    border-right: var(--chioce-item-border-right);
   }
+  */
   &_state_disabled {
-    background: var(--choice-item-state-disabled-background, #ececec);
+    background: var(--choice-item-state-disabled-background);
     &:hover {
-      background: var(--choice-item-state-disabled-background, #ececec);
-    }
-  }
-  &_active {
-    background: var(--choice-item-background-active);
-    &_state_disabled {
-      background: var(--choice-item-active-state-disabled-background, #ccc);
-      &:hover {
-        background: var(--choice-item-active-state-disabled-background, #ccc);
-      }
+      background: var(--choice-item-state-disabled-background);
     }
   }
   & input {
@@ -39,6 +30,7 @@
     text-align: center;
     position: relative;
     display: flex;
+    align-items: center;
     z-index: 3;
     transition: color 0.5s ease;
     cursor: pointer;

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

@@ -0,0 +1,11 @@
+.choice__item {
+  &_shape {
+    &_rounded {
+      border-radius: var(--choice-item-shape-rounded);
+      overflow: hidden;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}

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.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 {
       }
     }
@@ -1126,7 +1180,7 @@ h2.react-datepicker__current-month {
       align-items: center;
       gap: 12px;
       & .input {
-        min-width: var(--date-picker-input-min-width, 256px);
+        min-width: var(--date-picker-input-min-width);
       }
     }
     &-time-container {
@@ -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(--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,42 +1271,71 @@ 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 {
-  --input-container-padding: 9px 15px;
-
-  --date-picker-input-min-width: 220px;
-  --date-picker-day-border-radius: 8px;
+  --date-picker-padding: 24px 12px;
+  --date-picker-fill: var(--color-surface-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-day-width: 35px;
-  --date-picker-day-height: 35px;
+  --date-picker-input-container-padding: 9px 15px;
+  --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-text-color: var(--color-secondary-text-secondary);
   --date-picker-day-weekend-outside-text-color: var(
@@ -1263,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-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);
 }