fix: disabled checked checkboxes border

Author: Adzouz

.changeset/wise-doors-hope.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+fix: disabled checked checkboxes border

docs/stories/03-inputs/Checkbox.stories.tsx

@@ -123,12 +123,13 @@ export const Indeterminate = {
 export const Disabled = {
   args: {
     disabled: true,
+    checked: true,
   },
   name: 'Disabled',
   parameters: {
     docs: {
       source: {
-        code: '<Checkbox disabled>Remember me</Checkbox>',
+        code: '<Checkbox disabled checked>Remember me</Checkbox>',
       },
     },
   },

packages/design-system/src/components/Checkbox/Checkbox.tsx

@@ -75,8 +75,8 @@ const CheckboxRoot = styled(Checkbox.Root)`
   // this ensures the checkbox is always a square even in flex-containers.
   flex: 0 0 2rem;
 
-  &[data-state='checked'],
-  &[data-state='indeterminate'] {
+  &[data-state='checked']:not([data-disabled]),
+  &[data-state='indeterminate']:not([data-disabled]) {
     border: 1px solid ${(props) => props.theme.colors.primary600};
     background-color: ${(props) => props.theme.colors.primary600};
   }