Repository: macosui/macos_ui

Issue:
MacosCheckbox in dark mode is difficult to see
Hello! 

I've found the MacosCheckbox in dark mode has too little contrast which makes it difficult to see and/or difficult to tell there is even a checkbox there.

Current dark mode:
<img width="202" alt="Screen Shot 2023-04-04 at 1 07 17 PM" src="https://user-images.githubusercontent.com/10343858/229960017-92690998-616a-4859-9589-7ee55f6f0601.png">

The native system checkbox dark mode has some shading which causes it to stand out more:
<img width="260" alt="Screen Shot 2023-04-04 at 1 07 53 PM" src="https://user-images.githubusercontent.com/10343858/229960108-aed35b7b-f55d-46f0-8751-d1c5912c2abd.png">

MacosCheckbox in light mode has a border:
<img width="225" alt="Screen Shot 2023-04-04 at 1 07 27 PM" src="https://user-images.githubusercontent.com/10343858/229960240-1cffaa72-5ab2-403b-a6e8-c2de406087bc.png">

But that border is removed in dark mode. And the color can't be changed.
<img width="545" alt="Screen Shot 2023-04-04 at 3 54 08 PM" src="https://user-images.githubusercontent.com/10343858/229960294-7d3b947e-c391-475d-8421-ff77a3d1944a.png">

My suggestion would be to put the border back (1px) for dark mode, or some other solution that would allow more contrast, eg:
<img width="214" alt="Screen Shot 2023-04-04 at 9 52 38 PM" src="https://user-images.githubusercontent.com/10343858/229960843-c39cc784-45a2-4942-b733-045e93014f54.png">




Fix patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 919e1927..6ab311b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## [2.0.0-beta.6]
+🔄 Updated 🔄
+* `MacosCheckbox` appearance more closely matches its native counterpart.
+
 ## [2.0.0-beta.5]
 🚨 Breaking Changes 🚨
 * `PushButton` has been updated to support the `ControlSize` enum.
diff --git a/example/lib/pages/buttons_page.dart b/example/lib/pages/buttons_page.dart
index 3bf5fe5d..7c480ce9 100644
--- a/example/lib/pages/buttons_page.dart
+++ b/example/lib/pages/buttons_page.dart
@@ -734,6 +734,13 @@ class _ButtonsPageState extends State<ButtonsPage> {
                           }).toList(),
                         ),
                         const SizedBox(height: 20),
+                        MacosCheckbox(
+                          value: switchValue,
+                          onChanged: (value) {
+                            setState(() => switchValue = value);
+                          },
+                        ),
+                        const SizedBox(height: 20),
                         Row(
                           mainAxisAlignment: MainAxisAlignment.center,
                           children: [
diff --git a/example/pubspec.lock b/example/pubspec.lock
index 44b2f9a3..2b2ea121 100644
--- a/example/pubspec.lock
+++ b/example/pubspec.lock
@@ -97,7 +97,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "2.0.0-beta.5"
+    version: "2.0.0-beta.6"
   macos_window_utils:
     dependency: transitive
     description:
diff --git a/lib/src/buttons/checkbox.dart b/lib/src/buttons/checkbox.dart
index 1ad46d62..d7f8bcc3 100644
--- a/lib/src/buttons/checkbox.dart
+++ b/lib/src/buttons/checkbox.dart
@@ -15,7 +15,7 @@ class MacosCheckbox extends StatelessWidget {
     super.key,
     required this.value,
     required this.onChanged,
-    this.size = 16.0,
+    this.size = 14.0,
     this.activeColor,
     this.disabledColor = CupertinoColors.quaternaryLabel,
     this.offBorderColor = CupertinoColors.tertiaryLabel,
@@ -108,18 +108,55 @@ class MacosCheckbox extends StatelessWidget {
                   ),
                   borderRadius: const BorderRadius.all(Radius.circular(4.0)),
                 )
-              : BoxDecoration(
-                  color: isLight ? null : CupertinoColors.tertiaryLabel,
-                  border: Border.all(
-                    style: isLight ? BorderStyle.solid : BorderStyle.none,
-                    width: 0.5,
-                    color: MacosDynamicColor.resolve(
-                      offBorderColor,
-                      context,
+              : isLight
+                  ? ShapeDecoration(
+                      gradient: LinearGradient(
+                        begin: const Alignment(0.0, -1.0),
+                        end: const Alignment(0, 0),
+                        colors: [
+                          Colors.white.withOpacity(0.85),
+                          Colors.white.withOpacity(1.0),
+                        ],
+                      ),
+                      shadows: const [
+                        BoxShadow(
+                          color: Color(0x3F000000),
+                          blurRadius: 1,
+                          blurStyle: BlurStyle.inner,
+                          offset: Offset(0, 0),
+                          spreadRadius: 0.0,
+                        ),
+                      ],
+                      shape: RoundedRectangleBorder(
+                        side: BorderSide(
+                          width: 0.25,
+                          color: Colors.black.withOpacity(0.35000000596046448),
+                        ),
+                        borderRadius:
+                            const BorderRadius.all(Radius.circular(3.5)),
+                      ),
+                    )
+                  : ShapeDecoration(
+                      gradient: LinearGradient(
+                        begin: const Alignment(0.0, -1.0),
+                        end: const Alignment(0, 1),
+                        colors: [
+                          Colors.white.withOpacity(0.14000000059604645),
+                          Colors.white.withOpacity(0.2800000011920929),
+                        ],
+                      ),
+                      shape: const RoundedRectangleBorder(
+                        borderRadius: BorderRadius.all(Radius.circular(3)),
+                      ),
+                      shadows: const [
+                        BoxShadow(
+                          color: Color(0x3F000000),
+                          blurRadius: 1,
+                          offset: Offset(0, 0),
+                          spreadRadius: 0,
+                        ),
+                      ],
                     ),
-                  ),
-                  borderRadius: const BorderRadius.all(Radius.circular(4.0)),
-                ),
           child: Icon(
             isDisabled || value == false
                 ? null
diff --git a/pubspec.yaml b/pubspec.yaml
index bed7d3d6..33d64578 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: macos_ui
 description: Flutter widgets and themes implementing the current macOS design language.
-version: 2.0.0-beta.5
+version: 2.0.0-beta.6
 homepage: "https://macosui.dev"
 repository: "https://github.com/GroovinChip/macos_ui"
 


Test patch:
diff --git a/test/buttons/checkbox_test.dart b/test/buttons/checkbox_test.dart
index 09881007..7ba24553 100644
--- a/test/buttons/checkbox_test.dart
+++ b/test/buttons/checkbox_test.dart
@@ -62,7 +62,7 @@ void main() {
       [
         'state: "unchecked"',
         'enabled',
-        'size: 16.0',
+        'size: 14.0',
         'activeColor: null',
         'disabledColor: quaternaryLabel(*color = Color(0x2d3c3c43)*, darkColor = Color(0x28ebebf5), highContrastColor = Color(0x423c3c43), darkHighContrastColor = Color(0x3debebf5), resolved by: UNRESOLVED)',
         'offBorderColor: tertiaryLabel(*color = Color(0x4c3c3c43)*, darkColor = Color(0x4cebebf5), highContrastColor = Color(0x603c3c43), darkHighContrastColor = Color(0x60ebebf5), resolved by: UNRESOLVED)',