Customise colors

Author: coderitual

src/components/card2/CardCheckbox.stories.mdx

@@ -100,7 +100,12 @@ import Card from './Card';
           width="150px"
           height="150px"
           defaultChecked={true}
-          style={{'--card-background-color': 'var(--indigo-60)'}}
+          style={{
+            '--card-background-color': 'var(--indigo-60)',
+            '--card-border-color': 'var(--white)',
+            '--card-border-color-checked': 'var(--white)',
+            '--card-border-color-hover': 'rgba(255,255,255,0.8)',
+          }}
         >
           <Card.CheckboxIndicator slot="top-left" />
           <Flex

src/components/card2/card.scss

@@ -5,6 +5,7 @@
   --card-border-color-invalid: var(--red-60);
   --card-border-color-invalid-hover: var(--red-50);
   --card-border-color-checked: var(--black);
+  --card-indicator-color: var(--card-background-color);
 
   display: block;
   position: relative;
@@ -77,6 +78,7 @@
   & .sg-checkbox {
     --checkboxColor: var(--card-border-color);
     --checkboxCheckedColor: var(--card-border-color-checked);
+    --checkboxIconFillColor: var(--card-indicator-color);
   }
 
   & .sg-checkbox__icon {