@itcase/ui 1.3.31 → 1.3.33

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

@@ -1,44 +1,20 @@
 .chips {
   display: inline-flex;
-  &__label {
-    white-space: var(--chips-label-white-space, nowrap);
-  }
   &__inner {
     display: flex;
     align-items: center;
-    gap: 4px;
   }
 }
 
 .chips {
-  &&_size {
-    &_xxs {
-      padding: var(--chips-size-xxs-padding, 2px 6px);
-      @mixin text-s;
-    }
-    &_xs {
-      padding: var(--chips-size-xs-padding, 2px 6px);
-      @mixin text-s;
-    }
-    &_s {
-      padding: var(--chips-size-s-padding, 2px 6px);
-      @mixin text-s;
-    }
-    &_m {
-      padding: var(--chips-size-m-padding, 2px 6px);
-      @mixin text-m;
-    }
-    &_l {
-      padding: var(--chips-size-l-padding, 2px 6px);
-      @mixin text-l;
-    }
-    &_xl {
-      padding: var(--chips-size-xl-padding, 2px 6px);
-      @mixin text-l;
-    }
-    &_xxl {
-      padding: var(--chips-size-xxl-padding, 6px 12px);
-      @mixin text-xxl;
+  @each $size in xxl, xl, l, m, s, xs, xxs {
+    &_size_$(size) {
+      ^&__inner {
+        min-width: var(--chips-$(size)-min-width);
+        min-height: var(--chips-$(size)-min-height);
+        padding: var(--chips-$(size)-padding);
+        gap: var(--chips-$(size)-gap);
+      }
     }
   }
 }
@@ -47,24 +23,52 @@
   &_shape {
     &_rounded {
       border-radius: var(--chips-shape-rounded-default, 6px);
-      @each $size in xxs, xs, s, m, l, xl, xxl {
-        &.chips_size_$(size) {
-          border-radius: var(--chips-size-$(size)-shape-rounded);
+      @each $size in xxl, xl, l, m, s, xs, xxs {
+        &^^&_size_$(size) {
+          border-radius: var(--chips-$(size)-shape-rounded, 6px);
         }
       }
     }
     &_circular {
-      border-radius: 50%;
+      border-radius: 20px;
     }
   }
 }
 
 :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;
+  /* 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;
+  --chips-xxs-min-width: 16px;
+  --chips-xxs-min-height: 16px;
 }

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

@@ -1,9 +1,37 @@
 :root {
-  --chips-size-xxs-padding: 0px 8px;
-  --chips-size-xs-padding: 1px 10px;
-  --chips-size-s-padding: 2px 10px;
-  --chips-size-m-padding: 4px 10px;
-  --chips-size-l-padding: 5px 10px;
-  --chips-size-xl-padding: 9px 10px;
-  --chips-size-xxl-padding: 13px 12px;
+  /* 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;
+  --chips-xxs-min-width: 16px;
+  --chips-xxs-min-height: 16px;
 }

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

@@ -116,9 +116,20 @@
 }
 
 :root {
-  --choice-item-background-hover: var(--color-surface-secondary);
+  --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-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-icon-padding: 0;
 }

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

@@ -10,8 +10,9 @@
   --choice-item-size-normal-padding: 7px 12px;
   --choice-item-size-large-padding: 9px 15px;
 
-  --choice-item-background-hover: var(--color-surface-primary-hover);
-  --choice-item-background-active: var(--color-surface-tertiary);
+  --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-icon-padding: 3px 2px;
+  --choice-item-icon-padding: 0;
 }

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;
@@ -1160,36 +1228,52 @@ h2.react-datepicker__current-month {
 }
 :root {
   --input-container-padding: 9px 15px;
-  --date-picker-name-size: 18px;
+
+  --date-picker-input-min-width: 220px;
+  --date-picker-day-border-radius: 8px;
+
+  --date-picker-day-width: 35px;
+  --date-picker-day-height: 35px;
+
+  --date-picker-name-size: 16px;
+
   --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-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-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-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-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,17 +1,26 @@
 :root {
+  --input-container-padding: 9px 15px;
+
+  --date-picker-input-min-width: 220px;
+  --date-picker-day-border-radius: 8px;
+
+  --date-picker-day-width: 35px;
+  --date-picker-day-height: 35px;
+
+  --date-picker-name-size: 16px;
+
+  --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-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-width: 40px;
-  --date-picker-day-height: 40px;
   --date-picker-day-padding: 8px 0;
-  --date-picker-day-border-radius: 8px;
-
   --date-picker-day-hover-background: var(--color-accent-tertiary);
   --date-picker-day-hover-text-color: var(--color-surface-text-secondary);
 
@@ -27,10 +36,14 @@
 
   --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-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-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);

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

@@ -7,8 +7,8 @@
   &_size {
     @each $size in xs, s, m, l, xl {
       &_$(size) {
-        height: var(--divider-size-$(size)-height);
-        min-height: var(--divider-size-$(size)-height);
+        height: var(--divider-$(size)-height);
+        min-height: var(--divider-$(size)-height);
       }
     }
   }
@@ -17,8 +17,8 @@
       &^^&_size {
         @each $size in xs, s, m, l, xl {
           &_$(size) {
-            height: var(--divider-size-$(size)-height);
-            min-height: var(--divider-size-$(size)-height);
+            height: var(--divider-$(size)-height);
+            min-height: var(--divider-$(size)-height);
           }
         }
       }
@@ -27,9 +27,9 @@
       &^^&_size {
         @each $size in xs, s, m, l, xl {
           &_$(size) {
-            width: var(--divider-size-$(size)-width);
+            width: var(--divider-$(size)-width);
             height: auto;
-            min-width: var(--divider-size-$(size)-height);
+            min-width: var(--divider-$(size)-height);
           }
         }
       }
@@ -51,14 +51,15 @@
   }
 }
 :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;
+  --divider-xl-height: 5px;
+  --divider-l-height: 4px;
+  --divider-m-height: 3px;
+  --divider-s-height: 2px;
+  --divider-xs-height: 1px;
+
+  --divider-xl-width: 5px;
+  --divider-l-width: 4px;
+  --divider-m-width: 3px;
+  --divider-s-width: 2px;
+  --divider-xs-width: 1px;
 }