feat(themes): experimental click theme for checkbox/radio/switch

packages/themes/src/mixins/checkbox/click.css

@@ -0,0 +1,16 @@
+@import '../../../../vars/src/index.css';
+
+@define-mixin checkbox-click {
+    /* core vars */
+    --color-light-graphic-positive: #2fc26e;
+
+    /* theme */
+    --checkbox-checked-bg-color: var(--color-light-graphic-positive);
+    --checkbox-checked-border-color: transparent;
+    --checkbox-checked-hover-bg-color: color-mod(var(--color-light-graphic-positive) shade(10%));
+    --checkbox-checked-hover-border-color: transparent;
+    --checkbox-checked-active-bg-color: color-mod(var(--color-light-graphic-positive) shade(30%));
+    --checkbox-checked-active-border-color: transparent;
+    --checkbox-checked-disabled-bg-color: color-mod(var(--color-light-graphic-positive) alpha(30%));
+    --checkbox-checked-disabled-border-color: transparent;
+}

packages/themes/src/mixins/click.css

@@ -2,6 +2,9 @@
 @import './form-control/click.css';
 @import './input/click.css';
 @import './button/click.css';
+@import './checkbox/click.css';
+@import './radio/click.css';
+@import './switch/click.css';
 @import './tabs/click.css';
 @import './tag/click.css';
 @import './link/click.css';
@@ -13,6 +16,9 @@
     @mixin form-control-click;
     @mixin input-click;
     @mixin button-click;
+    @mixin checkbox-click;
+    @mixin radio-click;
+    @mixin switch-click;
     @mixin tabs-click;
     @mixin tag-click;
     @mixin link-click;

packages/themes/src/mixins/radio/click.css

@@ -0,0 +1,16 @@
+@import '../../../../vars/src/index.css';
+
+@define-mixin radio-click {
+    /* core vars */
+    --color-light-graphic-positive: #2fc26e;
+
+    /* theme */
+    --radio-checked-bg-color: var(--color-light-graphic-positive);
+    --radio-checked-border-color: transparent;
+    --radio-checked-hover-bg-color: color-mod(var(--color-light-graphic-positive) shade(10%));
+    --radio-checked-hover-border-color: transparent;
+    --radio-checked-active-bg-color: color-mod(var(--color-light-graphic-positive) shade(30%));
+    --radio-checked-active-border-color: transparent;
+    --radio-checked-disabled-bg-color: color-mod(var(--color-light-graphic-positive) alpha(30%));
+    --radio-checked-disabled-border-color: transparent;
+}

packages/themes/src/mixins/switch/click.css

@@ -0,0 +1,12 @@
+@import '../../../../vars/src/index.css';
+
+@define-mixin switch-click {
+    /* core vars */
+    --color-light-graphic-positive: #2fc26e;
+
+    /* theme */
+    --switch-checked-bg-color: var(--color-light-graphic-positive);
+    --switch-checked-border-color: transparent;
+    --switch-checked-disabled-bg-color: color-mod(var(--color-light-graphic-positive) alpha(30%));
+    --switch-checked-disabled-border-color: transparent;
+}