temp

Author: GrabowskiM

packages/assets/src/scss/inputs/_checkbox.scss

@@ -22,8 +22,8 @@
             display: block;
             width: calculateRem(8px);
             height: calculateRem(5px);
-            border-left: calculateRem(2px) solid $color-neutral-10;
-            border-bottom: calculateRem(2px) solid $color-neutral-10;
+            border-left: calculateRem(2px) solid transparent;
+            border-bottom: calculateRem(2px) solid transparent;
             transform: rotate(-45deg);
         }
 

packages/components/src/inputs/Checkbox/Checkbox.tsx

@@ -17,6 +17,7 @@ const Checkbox = ({
     error = false,
     extraAria = {},
     id = undefined,
+    inputClassName = '',
     ref,
     required = false,
     title = '',
@@ -42,6 +43,7 @@ const Checkbox = ({
     return (
         <div className={checkboxClassName}>
             <BaseInput
+                className={inputClassName}
                 disabled={disabled}
                 error={error}
                 extraInputAttrs={{

packages/components/src/inputs/Checkbox/Checkbox.types.ts

@@ -11,6 +11,7 @@ export interface CheckboxProps extends BaseComponentAriaAttributes {
     disabled?: boolean;
     error?: boolean;
     id?: string;
+    inputClassName?: string;
     ref?: Ref<HTMLInputElement>;
     required?: boolean;
     value?: boolean;

packages/components/src/inputs/ThreeStateCheckbox/ThreeStateCheckbox.tsx

@@ -11,10 +11,14 @@ const ThreeStateCheckbox = ({ className = '', indeterminate = false, ...restProp
         'ids-checkbox--three-state': true,
         [className]: true,
     });
+    const inputClassName = createCssClassNames({
+        'ids-input--indeterminate': indeterminate,
+    });
 
     return (
         <Checkbox
             className={checkboxClassName}
+            inputClassName={inputClassName}
             ref={(node) => {
                 if (node) {
                     node.indeterminate = indeterminate; // eslint-disable-line no-param-reassign