fix(checkbox): change the bg semantic color token (#454)

Co-authored-by: Ján Hamara <jan.hamara@free-now.com>
freenowtech · May 31, 2024 · b873693 · b873693
1 parent 2787ca0
commit b873693
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/components/Checkbox/components/Checkmark.tsx b/src/components/Checkbox/components/Checkmark.tsx
@@ -70,15 +70,15 @@ const Checkmark = styled.input<CheckmarkProps>`
 
     &:disabled {
         cursor: not-allowed;
-        background-color: ${getSemanticValue('background-element-disabled-faded')};
+        background-color: ${getSemanticValue('background-element-disabled-default')};
         box-shadow: inset 0 0 0 0.125rem ${getSemanticValue('transparent')};
 
         &:hover {
             box-shadow: inset 0 0 0 0.125rem ${getSemanticValue('transparent')};
         }
 
         &:active {
-            background-color: ${getSemanticValue('background-element-disabled-faded')};
+            background-color: ${getSemanticValue('background-element-disabled-default')};
         }
     }
 `;

diff --git a/src/components/Checkbox/docs/Checkbox.stories.tsx b/src/components/Checkbox/docs/Checkbox.stories.tsx
@@ -44,6 +44,13 @@ export const Disabled: Story = {
     }
 };
 
+export const DisabledChecked: Story = {
+    args: {
+        disabled: true,
+        defaultChecked: true
+    }
+};
+
 export const Indeterminate: Story = {
     args: {
         indeterminate: true