@itcase/ui 1.8.133 → 1.8.135

package/dist/cjs/components/Modal.js

@@ -137,7 +137,7 @@ const getOrCreateModalElement = (modalQuerySelector, className = '') => {
 };
 // Modal component that is an abstraction around the portal API.
 const Modal = React.forwardRef(function Modal(props, ref) {
-    const { id, appearance, className, dataTestId, dataTour, title, contentClassName, modalQuerySelector = '#modal-global', scroll = false, stickyHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, modalQuerySelector = '#modal-global', scroll = false, stickyHeader = false, absoluteHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
     // Query DOM element
     const [modalElement, setModalElement] = React.useState(null);
     const [isOpen, setIsOpen] = React.useState(initialIsOpen);
@@ -228,7 +228,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     return (modalElement &&
         ReactDOM.createPortal(
         // Any valid React child: JSX, strings, arrays, etc.
-        isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content', contentClassName, fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [(title || closeIcon) && (jsxRuntime.jsxs("div", { className: clsx('modal__header'), children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
+        isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [(title || closeIcon) && (jsxRuntime.jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
                     fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
         // A DOM element

package/dist/components/Modal.js

@@ -135,7 +135,7 @@ const getOrCreateModalElement = (modalQuerySelector, className = '') => {
 };
 // Modal component that is an abstraction around the portal API.
 const Modal = React.forwardRef(function Modal(props, ref) {
-    const { id, appearance, className, dataTestId, dataTour, title, contentClassName, modalQuerySelector = '#modal-global', scroll = false, stickyHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, modalQuerySelector = '#modal-global', scroll = false, stickyHeader = false, absoluteHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
     // Query DOM element
     const [modalElement, setModalElement] = useState(null);
     const [isOpen, setIsOpen] = useState(initialIsOpen);
@@ -226,7 +226,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     return (modalElement &&
         ReactDOM.createPortal(
         // Any valid React child: JSX, strings, arrays, etc.
-        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal__content', contentClassName, fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [(title || closeIcon) && (jsxs("div", { className: clsx('modal__header'), children: [title && (jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? icons24.Action.Close }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay", 
+        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [(title || closeIcon) && (jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? icons24.Action.Close }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
                     fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
         // A DOM element

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

@@ -110,207 +110,98 @@
   }
 }
 .checkbox_fill {
-  &_active {
-    &_hover {
-      &_none {
-        background-color: transparent;
+  &_active_none,
+  &_active_hover_none,
+  &_hover_none,
+  &_none {
+    background-color: transparent;
+  }
+  @each $type in accent, primary, secondary, surface, error, warning, success,
+    danger, info, disabled {
+    @each $color in primary, secondary, tertiary, quaternary {
+      &_active_$(type) {
+        &-$(color) {
+          & .checkbox__state {
+            background: var(--color-$(type)-fill-$(color));
+          }
+        }
+        &-$(color)-active {
+          & .checkbox__state {
+            background: var(--color-$(type)-fill-active-$(color));
+          }
+        }
       }
-      @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) {
+      &_active_hover_$(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));
-                }
-              }
-              &-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);
-                  }
+                  background: var(--color-$(type)-fill-$(color)-active-hover);
                 }
               }
             }
-            &-hover {
-              &-$(color) {
-                &:hover {
-                  & .checkbox__state {
-                    background: var(--color-$(type)-fill-hover-$(color));
-                  }
-                }
+          }
+          &-active {
+            &:hover {
+              & .checkbox__state {
+                background: var(--color-$(type)-fill-$(color)-active);
               }
             }
           }
-
-          /* } */
         }
-      }
-      @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));
+        &-hover {
+          &-$(color) {
+            &:hover {
+              & .checkbox__state {
+                background: var(--color-$(type)-fill-hover-$(color));
+              }
             }
           }
         }
       }
-    }
-  }
-}
-.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) {
+      &_hover_$(type) {
+        &-$(color) {
+          &:hover {
             & .checkbox__state {
               background: var(--color-$(type)-fill-$(color));
             }
           }
-          &-$(color)-active {
-            & .checkbox__state {
-              background: var(--color-$(type)-fill-active-$(color));
+          &-hover {
+            &:hover {
+              & .checkbox__state {
+                background: var(--color-$(type)-fill-$(color)-hover);
+              }
             }
           }
         }
-      }
-    }
-    @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) {
+        &-hover {
           &-$(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));
-                }
+                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,
@@ -326,76 +217,48 @@
     dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
     stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
     sonic-silver {
-    &_$(palette) {
+    &_active_$(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;
-                }
-              }
-            }
-          }
+    &_active_hover_$(palette) {
+      &:hover {
+        & .checkbox__state {
+          background: var(--color-palette-$(palette));
         }
       }
     }
-    @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_$(palette) {
+      &:hover {
+        & .checkbox__state {
+          background: var(--color-palette-$(palette));
         }
       }
     }
+    &_$(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) {
+  &_active_none,
+  &_active_hover_none,
+  &_hover_none,
+  &_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 {
+      &_active_hover_$(type) {
+        &-border {
+          &-$(color) {
+            &:hover {
               & .checkbox__state {
                 border-width: 1px;
                 border-color: var(--color-$(type)-border-$(color));
@@ -405,43 +268,28 @@
           }
         }
       }
-    }
-    @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;
+      &_active_$(type) {
+        &-border {
+          &-$(color) {
+            & .checkbox__state {
+              border-width: 1px;
+              border-color: var(--color-$(type)-border-$(color));
+              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 {
+        &-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;
@@ -449,63 +297,10 @@
                   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) {
@@ -532,6 +327,38 @@
     dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
     stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
     sonic-silver {
+    &_active_$(palette) {
+      & .checkbox__state {
+        border-width: 1px;
+        border-color: var(--color-palette-$(palette));
+        border-style: solid;
+      }
+    }
+    &_active_$(palette) {
+      & .checkbox__state {
+        border-width: 1px;
+        border-color: var(--color-palette-$(palette));
+        border-style: solid;
+      }
+    }
+    &_hover_$(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;
+          }
+        }
+      }
+    }
     &_$(palette) {
       & .checkbox__state {
         border-width: 1px;