@itcase/ui 1.8.111 → 1.8.112

package/dist/cjs/components/Checkbox.js

@@ -88,7 +88,7 @@ var checkboxAppearanceRequire = {
         fillCheckbox: 'warningTertiary',
         fillCheckboxActive: 'warningPrimary',
         fillCheckboxActiveHover: 'warningTertiary',
-        fillCheckboxHover: 'warningTertiary',
+        fillCheckboxHover: 'warningSecondary',
         fillCheckmark: 'warningBorderPrimary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
@@ -133,16 +133,22 @@ var checkboxAppearanceSize = {
 var checkboxAppearanceStyle = {
     solid: {
         borderColorCheckbox: 'none',
-        borderWidth: 'none',
+        borderColorCheckboxActive: 'none',
+        borderColorCheckboxActiveHover: 'none',
+        borderColorCheckboxHover: 'none',
     },
     outlined: {
         fill: 'none',
+        fillHover: 'none',
     },
     full: {},
     ghost: {
         fill: 'none',
+        fillHover: 'none',
         borderColorCheckbox: 'none',
-        borderWidth: 'none',
+        borderColorCheckboxActive: 'none',
+        borderColorCheckboxActiveHover: 'none',
+        borderColorCheckboxHover: 'none',
     },
 };
 
@@ -182,26 +188,27 @@ function Checkbox(props) {
     var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, disabled = props.disabled, isDisabled = props.isDisabled, checked = props.checked, indeterminate = props.indeterminate, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, before = props.before, after = props.after, isActive = props.isActive, isChecked = props.isChecked, isSkeleton = props.isSkeleton, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
     var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, checkboxConfig, isDisabled);
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var fillCheckboxActiveClass = propsGenerator.fillCheckboxActiveClass, fillCheckboxActiveHoverClass = propsGenerator.fillCheckboxActiveHoverClass, fillCheckboxClass = propsGenerator.fillCheckboxClass, fillCheckboxHoverClass = propsGenerator.fillCheckboxHoverClass, fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorCheckboxActiveClass = propsGenerator.borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass = propsGenerator.borderColorCheckboxActiveHoverClass, borderColorCheckboxClass = propsGenerator.borderColorCheckboxClass, borderColorCheckboxHoverClass = propsGenerator.borderColorCheckboxHoverClass, checkboxShapeClass = propsGenerator.checkboxShapeClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
-    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), sizeClass && "checkbox_size_".concat(sizeClass), shapeClass && "checkbox_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass), isSkeleton && "checkbox_skeleton"), htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: "checkbox__item", children: [jsxRuntime.jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: (isDisabled || disabled) && 'disabled', checked: (isActive || isChecked || checked) && 'checked', value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', !checked
-                            ? fillCheckboxClass && "fill_".concat(fillCheckboxClass)
-                            : fillCheckboxActiveClass &&
-                                "fill_active_".concat(fillCheckboxActiveClass), !checked
-                            ? fillCheckboxHoverClass && "fill_hover_".concat(fillCheckboxHoverClass)
-                            : fillCheckboxActiveHoverClass &&
-                                "fill_active_hover_".concat(fillCheckboxActiveHoverClass), !checked
-                            ? borderColorCheckboxClass &&
-                                "border-color_".concat(borderColorCheckboxClass)
-                            : borderColorCheckboxActiveClass &&
-                                "border-color_active_".concat(borderColorCheckboxActiveClass), !checked
-                            ? borderColorCheckboxHoverClass &&
-                                "border-color_hover_".concat(borderColorCheckboxHoverClass)
-                            : borderColorCheckboxActiveHoverClass &&
-                                "border-color_active_hover_".concat(borderColorCheckboxActiveHoverClass), checkboxShapeClass && "checkbox__state_shape_".concat(checkboxShapeClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx(!indeterminate
+    var fillCheckboxActiveClass = propsGenerator.fillCheckboxActiveClass, fillCheckboxActiveHoverClass = propsGenerator.fillCheckboxActiveHoverClass, fillCheckboxClass = propsGenerator.fillCheckboxClass, fillCheckboxHoverClass = propsGenerator.fillCheckboxHoverClass, fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorCheckboxActiveClass = propsGenerator.borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass = propsGenerator.borderColorCheckboxActiveHoverClass, borderColorCheckboxClass = propsGenerator.borderColorCheckboxClass, borderColorCheckboxHoverClass = propsGenerator.borderColorCheckboxHoverClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_".concat(fillHoverClass), sizeClass && "checkbox_size_".concat(sizeClass), !checked
+            ? fillCheckboxClass && "checkbox_fill_".concat(fillCheckboxClass)
+            : fillCheckboxActiveClass &&
+                "checkbox_fill_active_".concat(fillCheckboxActiveClass), !checked
+            ? fillCheckboxHoverClass &&
+                "checkbox_fill_hover_".concat(fillCheckboxHoverClass)
+            : fillCheckboxActiveHoverClass &&
+                "checkbox_fill_active_hover_".concat(fillCheckboxActiveHoverClass), !checked
+            ? borderColorCheckboxClass &&
+                "checkbox_border-color_".concat(borderColorCheckboxClass)
+            : borderColorCheckboxActiveClass &&
+                "checkbox_border-color_active_".concat(borderColorCheckboxActiveClass), !checked
+            ? borderColorCheckboxHoverClass &&
+                "checkbox_border-color_hover_".concat(borderColorCheckboxHoverClass)
+            : borderColorCheckboxActiveHoverClass &&
+                "checkbox_border-color_active_hover_".concat(borderColorCheckboxActiveHoverClass), widthClass && "width_".concat(widthClass), isSkeleton && "checkbox_skeleton"), htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: "checkbox__item", children: [jsxRuntime.jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: (isDisabled || disabled) && 'disabled', checked: (isActive || isChecked || checked) && 'checked', value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx(!indeterminate
                             ? 'checkbox__state-checkmark'
                             : 'checkbox__state-indeterminate', (checked || indeterminate) &&
                             fillCheckmarkClass &&
-                            "border-color_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsxRuntime.jsx("div", { className: "checkbox__after", children: after })] }));
+                            "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsxRuntime.jsx("div", { className: "checkbox__after", children: after })] }));
 }
 
 exports.Checkbox = Checkbox;

package/dist/cjs/components/Radio.js

@@ -33,9 +33,9 @@ var radioAppearanceDefault = {
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         borderRadioColor: 'surfaceBorderQuaternary',
-        borderRadioColorHover: 'surfaceBorderQuaternary',
         borderRadioColorActive: 'surfaceBorderQuaternary',
         borderRadioColorActiveHover: 'surfaceBorderQuaternary',
+        borderRadioColorHover: 'surfaceBorderQuaternary',
         shape: 'circular',
     },
 };

package/dist/components/Checkbox.js

@@ -86,7 +86,7 @@ var checkboxAppearanceRequire = {
         fillCheckbox: 'warningTertiary',
         fillCheckboxActive: 'warningPrimary',
         fillCheckboxActiveHover: 'warningTertiary',
-        fillCheckboxHover: 'warningTertiary',
+        fillCheckboxHover: 'warningSecondary',
         fillCheckmark: 'warningBorderPrimary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
@@ -131,16 +131,22 @@ var checkboxAppearanceSize = {
 var checkboxAppearanceStyle = {
     solid: {
         borderColorCheckbox: 'none',
-        borderWidth: 'none',
+        borderColorCheckboxActive: 'none',
+        borderColorCheckboxActiveHover: 'none',
+        borderColorCheckboxHover: 'none',
     },
     outlined: {
         fill: 'none',
+        fillHover: 'none',
     },
     full: {},
     ghost: {
         fill: 'none',
+        fillHover: 'none',
         borderColorCheckbox: 'none',
-        borderWidth: 'none',
+        borderColorCheckboxActive: 'none',
+        borderColorCheckboxActiveHover: 'none',
+        borderColorCheckboxHover: 'none',
     },
 };
 
@@ -180,26 +186,27 @@ function Checkbox(props) {
     var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, disabled = props.disabled, isDisabled = props.isDisabled, checked = props.checked, indeterminate = props.indeterminate, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, before = props.before, after = props.after, isActive = props.isActive, isChecked = props.isChecked, isSkeleton = props.isSkeleton, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
     var appearanceConfig = useAppearanceConfig(appearance, checkboxConfig, isDisabled);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillCheckboxActiveClass = propsGenerator.fillCheckboxActiveClass, fillCheckboxActiveHoverClass = propsGenerator.fillCheckboxActiveHoverClass, fillCheckboxClass = propsGenerator.fillCheckboxClass, fillCheckboxHoverClass = propsGenerator.fillCheckboxHoverClass, fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorCheckboxActiveClass = propsGenerator.borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass = propsGenerator.borderColorCheckboxActiveHoverClass, borderColorCheckboxClass = propsGenerator.borderColorCheckboxClass, borderColorCheckboxHoverClass = propsGenerator.borderColorCheckboxHoverClass, checkboxShapeClass = propsGenerator.checkboxShapeClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
-    return (jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), sizeClass && "checkbox_size_".concat(sizeClass), shapeClass && "checkbox_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass), isSkeleton && "checkbox_skeleton"), htmlFor: Tag === 'label' && id, children: [before, jsxs("div", { className: "checkbox__item", children: [jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: (isDisabled || disabled) && 'disabled', checked: (isActive || isChecked || checked) && 'checked', value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsx("div", { className: clsx('checkbox__state', !checked
-                            ? fillCheckboxClass && "fill_".concat(fillCheckboxClass)
-                            : fillCheckboxActiveClass &&
-                                "fill_active_".concat(fillCheckboxActiveClass), !checked
-                            ? fillCheckboxHoverClass && "fill_hover_".concat(fillCheckboxHoverClass)
-                            : fillCheckboxActiveHoverClass &&
-                                "fill_active_hover_".concat(fillCheckboxActiveHoverClass), !checked
-                            ? borderColorCheckboxClass &&
-                                "border-color_".concat(borderColorCheckboxClass)
-                            : borderColorCheckboxActiveClass &&
-                                "border-color_active_".concat(borderColorCheckboxActiveClass), !checked
-                            ? borderColorCheckboxHoverClass &&
-                                "border-color_hover_".concat(borderColorCheckboxHoverClass)
-                            : borderColorCheckboxActiveHoverClass &&
-                                "border-color_active_hover_".concat(borderColorCheckboxActiveHoverClass), checkboxShapeClass && "checkbox__state_shape_".concat(checkboxShapeClass)), children: "\u00A0" }), jsx("div", { className: clsx(!indeterminate
+    var fillCheckboxActiveClass = propsGenerator.fillCheckboxActiveClass, fillCheckboxActiveHoverClass = propsGenerator.fillCheckboxActiveHoverClass, fillCheckboxClass = propsGenerator.fillCheckboxClass, fillCheckboxHoverClass = propsGenerator.fillCheckboxHoverClass, fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorCheckboxActiveClass = propsGenerator.borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass = propsGenerator.borderColorCheckboxActiveHoverClass, borderColorCheckboxClass = propsGenerator.borderColorCheckboxClass, borderColorCheckboxHoverClass = propsGenerator.borderColorCheckboxHoverClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    return (jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_".concat(fillHoverClass), sizeClass && "checkbox_size_".concat(sizeClass), !checked
+            ? fillCheckboxClass && "checkbox_fill_".concat(fillCheckboxClass)
+            : fillCheckboxActiveClass &&
+                "checkbox_fill_active_".concat(fillCheckboxActiveClass), !checked
+            ? fillCheckboxHoverClass &&
+                "checkbox_fill_hover_".concat(fillCheckboxHoverClass)
+            : fillCheckboxActiveHoverClass &&
+                "checkbox_fill_active_hover_".concat(fillCheckboxActiveHoverClass), !checked
+            ? borderColorCheckboxClass &&
+                "checkbox_border-color_".concat(borderColorCheckboxClass)
+            : borderColorCheckboxActiveClass &&
+                "checkbox_border-color_active_".concat(borderColorCheckboxActiveClass), !checked
+            ? borderColorCheckboxHoverClass &&
+                "checkbox_border-color_hover_".concat(borderColorCheckboxHoverClass)
+            : borderColorCheckboxActiveHoverClass &&
+                "checkbox_border-color_active_hover_".concat(borderColorCheckboxActiveHoverClass), widthClass && "width_".concat(widthClass), isSkeleton && "checkbox_skeleton"), htmlFor: Tag === 'label' && id, children: [before, jsxs("div", { className: "checkbox__item", children: [jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: (isDisabled || disabled) && 'disabled', checked: (isActive || isChecked || checked) && 'checked', value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsx("div", { className: clsx('checkbox__state', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), children: "\u00A0" }), jsx("div", { className: clsx(!indeterminate
                             ? 'checkbox__state-checkmark'
                             : 'checkbox__state-indeterminate', (checked || indeterminate) &&
                             fillCheckmarkClass &&
-                            "border-color_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsx(Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsx("div", { className: "checkbox__after", children: after })] }));
+                            "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsx(Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsx("div", { className: "checkbox__after", children: after })] }));
 }
 
 export { Checkbox, checkboxAppearance, checkboxConfig };

package/dist/components/Radio.js

@@ -31,9 +31,9 @@ var radioAppearanceDefault = {
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         borderRadioColor: 'surfaceBorderQuaternary',
-        borderRadioColorHover: 'surfaceBorderQuaternary',
         borderRadioColorActive: 'surfaceBorderQuaternary',
         borderRadioColorActiveHover: 'surfaceBorderQuaternary',
+        borderRadioColorHover: 'surfaceBorderQuaternary',
         shape: 'circular',
     },
 };

package/dist/css/components/Checkbox/Checkbox.css

@@ -41,14 +41,7 @@
       display: flex;
       flex: 1;
       z-index: 1;
-      &_shape {
-        &_rounded {
-          border-radius: 4px;
-        }
-        &_circular {
-          border-radius: 50%;
-        }
-      }
+      transition: var(--checkbox-item-transition);
     }
     ^&__state-checkmark {
       width: 5px;
@@ -116,43 +109,465 @@
     }
   }
 }
-.checkbox {
-  &_shape {
-    &_rounded {
-      border-radius: 4px;
-      position: relative;
-      overflow: hidden;
+.checkbox_fill {
+  &_active {
+    &_hover {
+      &_none {
+        background-color: transparent;
+      }
+      @each $type in accent, primary, secondary, surface, error, warning,
+        success, danger, info, disabled {
+        @each $color in primary, secondary, tertiary, quaternary {
+          /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+          &_$(type) {
+            &-$(color) {
+              &:hover {
+                & .checkbox__state {
+                  background: var(--color-$(type)-fill-$(color));
+                }
+              }
+              &-hover {
+                &:hover {
+                  & .checkbox__state {
+                    background: var(--color-$(type)-fill-$(color)-hover);
+                  }
+                }
+                &-active {
+                  &:hover {
+                    & .checkbox__state {
+                      background: var(
+                        --color-$(type)-fill-$(color)-active-hover
+                      );
+                    }
+                  }
+                }
+              }
+              &-active {
+                &:hover {
+                  & .checkbox__state {
+                    background: var(--color-$(type)-fill-$(color)-active);
+                  }
+                }
+              }
+            }
+            &-hover {
+              &-$(color) {
+                &:hover {
+                  & .checkbox__state {
+                    background: var(--color-$(type)-fill-hover-$(color));
+                  }
+                }
+              }
+            }
+          }
+
+          /* } */
+        }
+      }
+      @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+        pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
+        orange, clementine, apricot, papaya, kumquat, light-orange, peach,
+        flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
+        mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+        dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
+        light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
+        blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
+        ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
+        lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
+        northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
+        antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
+        coastal-gray, white, black, alto, athens-gray, sonic-silver {
+        &_$(palette) {
+          &:hover {
+            & .checkbox__state {
+              background: var(--color-palette-$(palette));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.checkbox_fill {
+  &_active {
+    &_none {
+      background-color: transparent;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-$(color) {
+            & .checkbox__state {
+              background: var(--color-$(type)-fill-$(color));
+            }
+          }
+          &-$(color)-active {
+            & .checkbox__state {
+              background: var(--color-$(type)-fill-active-$(color));
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        & .checkbox__state {
+          background: var(--color-palette-$(palette));
+        }
+      }
+    }
+  }
+}
+.checkbox_fill {
+  &_hover {
+    &_none {
+      background-color: transparent;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+        &_$(type) {
+          &-$(color) {
+            &:hover {
+              & .checkbox__state {
+                background: var(--color-$(type)-fill-$(color));
+              }
+            }
+            &-hover {
+              &:hover {
+                & .checkbox__state {
+                  background: var(--color-$(type)-fill-$(color)-hover);
+                }
+              }
+            }
+          }
+          &-hover {
+            &-$(color) {
+              &:hover {
+                & .checkbox__state {
+                  background: var(--color-$(type)-fill-hover-$(color));
+                }
+              }
+            }
+          }
+        }
+
+        /* } */
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &:hover {
+          & .checkbox__state {
+            background: var(--color-palette-$(palette));
+          }
+        }
+      }
+    }
+  }
+}
+.checkbox_fill {
+  &_none {
+    background-color: transparent;
+  }
+  @each $type in accent, primary, secondary, surface, error, warning, success,
+    danger, info, disabled {
+    @each $color in primary, secondary, tertiary, quaternary {
+      /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+      &_$(type) {
+        &-$(color) {
+          & .checkbox__state {
+            background: var(--color-$(type)-fill-$(color));
+          }
+          /* &$(alpha) {
+              background: var(--color-$(type)-$(color)-$(alpha));
+            } */
+        }
+      }
+      /* } */
+    }
+  }
+  @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
+    pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
+    apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
+    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
+    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
+    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
+    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
+    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
+    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
+    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
+    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
+    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
+    sonic-silver {
+    &_$(palette) {
+      & .checkbox__state {
+        background: var(--color-palette-$(palette));
+      }
+    }
+  }
+}
+.checkbox_border-color {
+  &_active {
+    &_none {
+      border-width: 1px;
+      border-color: transparent;
+      border-style: solid;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-border {
+            &-$(color) {
+              &:hover {
+                & .checkbox__state {
+                  border-width: 1px;
+                  border-color: var(--color-$(type)-border-$(color));
+                  border-style: solid;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &:hover {
+          & .checkbox__state {
+            border-width: 1px;
+            border-color: var(--color-palette-$(palette));
+            border-style: solid;
+          }
+        }
+      }
+    }
+  }
+}
+.checkbox_border-color {
+  &_active {
+    &_none {
+      border-width: 1px;
+      border-color: transparent;
+      border-style: solid;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-border {
+            &-$(color) {
+              & .checkbox__state {
+                border-width: 1px;
+                border-color: var(--color-$(type)-border-$(color));
+                border-style: solid;
+              }
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        & .checkbox__state {
+          border-width: 1px;
+          border-color: var(--color-palette-$(palette));
+          border-style: solid;
+        }
+      }
+    }
+  }
+}
+.checkboxborder-color {
+  &_hover {
+    &_none {
+      border-width: 1px;
+      border-color: transparent;
+      border-style: solid;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-border {
+            &-$(color) {
+              &:hover {
+                & .checkbox_state {
+                  border-width: 1px;
+                  border-color: var(--color-$(type)-border-$(color));
+                  border-style: solid;
+                }
+              }
+              &-hover {
+                &:hover {
+                  & .checkbox_state {
+                    border-width: 1px;
+                    border-color: var(--color-$(type)-border-$(color));
+                    border-style: solid;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &:hover {
+          & .checkbox_state {
+            border-width: 1px;
+            border-color: var(--color-palette-$(palette));
+            border-style: solid;
+          }
+        }
+        &-hover {
+          &:hover {
+            & .checkbox_state {
+              border-width: 1px;
+              border-color: var(--color-palette-$(palette));
+              border-style: solid;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.checkbox_border-color {
+  &_none {
+    border-width: 1px;
+    border-color: transparent;
+    border-style: solid;
+  }
+  @each $type in accent, primary, secondary, surface, error, warning, success,
+    danger, info, disabled {
+    @each $color in primary, secondary, tertiary, quaternary {
+      &_$(type) {
+        &-border {
+          &-$(color) {
+            & .checkbox__state {
+              border-width: 1px;
+              border-color: var(--color-$(type)-border-$(color));
+              border-style: solid;
+            }
+          }
+        }
+      }
+    }
+  }
+  @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
+    pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
+    apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
+    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
+    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
+    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
+    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
+    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
+    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
+    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
+    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
+    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
+    sonic-silver {
+    &_$(palette) {
+      & .checkbox__state {
+        border-width: 1px;
+        border-color: var(--color-palette-$(palette));
+        border-style: solid;
+      }
     }
   }
 }
 :root {
   --checkbox-column-gap: 12px;
   --checkbox-row-gap: 4px;
-  --checkbox-success-border: var(--color-success-border-secondary);
-  --checkbox-error-border: var(--color-error-border-secondary);
-  --checkbox-focus-border: var(--color-surface-border-quaternary);
+
+  --checkbox-item-transition: all 0.3s ease 0s;
 
   --checkbox-area-xl-width: 24px;
   --checkbox-area-xl-height: 24px;
-  --checkbox-xl-width: 16px;
-  --checkbox-xl-height: 16px;
+  --checkbox-xl-width: 22px;
+  --checkbox-xl-height: 22px;
   --checkbox-xl-gap: 0 2px;
 
   --checkbox-area-l-width: 20px;
   --checkbox-area-l-height: 20px;
-  --checkbox-l-width: 16px;
-  --checkbox-l-height: 16px;
+  --checkbox-l-width: 18px;
+  --checkbox-l-height: 18px;
   --checkbox-l-gap: 0 2px;
 
   --checkbox-area-m-width: 16px;
   --checkbox-area-m-height: 16px;
-  --checkbox-m-width: 12px;
-  --checkbox-m-height: 12px;
+  --checkbox-m-width: 14px;
+  --checkbox-m-height: 14px;
   --checkbox-m-gap: 0 2px;
 
   --checkbox-area-s-width: 14px;
   --checkbox-area-s-height: 14px;
-  --checkbox-s-width: 10px;
-  --checkbox-s-height: 10px;
+  --checkbox-s-width: 12px;
+  --checkbox-s-height: 12px;
   --checkbox-s-gap: 0 2px;
 }

package/dist/types/components/Checkbox/appearance/checkboxStyle.d.ts

@@ -1,16 +1,22 @@
 declare const checkboxAppearanceStyle: {
     solid: {
         borderColorCheckbox: string;
-        borderWidth: string;
+        borderColorCheckboxActive: string;
+        borderColorCheckboxActiveHover: string;
+        borderColorCheckboxHover: string;
     };
     outlined: {
         fill: string;
+        fillHover: string;
     };
     full: {};
     ghost: {
         fill: string;
+        fillHover: string;
         borderColorCheckbox: string;
-        borderWidth: string;
+        borderColorCheckboxActive: string;
+        borderColorCheckboxActiveHover: string;
+        borderColorCheckboxHover: string;
     };
 };
 export { checkboxAppearanceStyle };

package/dist/types/components/Radio/Radio.appearance.d.ts

@@ -111,9 +111,9 @@ export declare const radioAppearance: {
         descTextColor: string;
         borderColor: string;
         borderRadioColor: string;
-        borderRadioColorHover: string;
         borderRadioColorActive: string;
         borderRadioColorActiveHover: string;
+        borderRadioColorHover: string;
         shape: string;
     };
 };

package/dist/types/components/Radio/appearance/radioDefault.d.ts

@@ -9,9 +9,9 @@ declare const radioAppearanceDefault: {
         descTextColor: string;
         borderColor: string;
         borderRadioColor: string;
-        borderRadioColorHover: string;
         borderRadioColorActive: string;
         borderRadioColorActiveHover: string;
+        borderRadioColorHover: string;
         shape: string;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.111",
+  "version": "1.8.112",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -140,7 +140,7 @@
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@itcase/config": "^1.0.56",
-    "@itcase/lint": "^1.1.37",
+    "@itcase/lint": "^1.1.39",
     "@itcase/types": "^1.0.42",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
@@ -171,7 +171,7 @@
     "lint-staged": "^16.1.5",
     "prettier": "^3.6.2",
     "react-docgen-typescript": "^2.4.0",
-    "rollup": "^4.48.1",
+    "rollup": "^4.49.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",