fix font (#12375)

* fix font

* add changeset

* tweaks

* add changeset

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Freddy Boulton <41651716+freddyaboulton@users.noreply.github.com>

Author: 3 people

.changeset/modern-items-clap.md

@@ -0,0 +1,8 @@
+---
+"@gradio/checkbox": minor
+"@gradio/checkboxgroup": minor
+"@gradio/radio": minor
+"gradio": minor
+---
+
+feat:fix font

js/checkbox/shared/Checkbox.svelte

@@ -43,7 +43,7 @@
 	}
 </script>
 
-<label class="checkbox-container">
+<label class="checkbox-container" class:disabled>
 	<input
 		bind:checked={gradio.props.value}
 		on:keydown={handle_enter}
@@ -70,7 +70,7 @@
 
 	.label-text {
 		color: var(--body-text-color);
-		font-size: var(--text-sm);
+		font-size: var(--checkbox-label-text-size);
 		line-height: var(--line-sm);
 	}
 
@@ -146,6 +146,11 @@
 
 	input[disabled] {
 		cursor: not-allowed;
+		opacity: 0.75;
+	}
+
+	label.disabled {
+		cursor: not-allowed;
 	}
 
 	input:not([disabled]):hover {

js/checkboxgroup/Index.svelte

@@ -206,7 +206,11 @@
 
 	input[disabled],
 	.disabled {
-		cursor: not-allowed;
+		cursor: not-allowed !important;
+	}
+
+	input[disabled] {
+		opacity: 0.75;
 	}
 
 	input:hover {

js/radio/shared/Radio.svelte

@@ -110,17 +110,17 @@
 		background-color: white;
 	}
 
-	input:hover {
+	input:hover:not([disabled]) {
 		border-color: var(--checkbox-border-color-hover);
 		background-color: var(--checkbox-background-color-hover);
 	}
 
-	input:focus {
+	input:focus:not([disabled]) {
 		border-color: var(--checkbox-border-color-focus);
 		background-color: var(--checkbox-background-color-focus);
 	}
 
-	input:checked:focus {
+	input:checked:focus:not([disabled]) {
 		border-color: var(--checkbox-border-color-focus);
 		background-image: var(--radio-circle);
 		background-color: var(--checkbox-background-color-selected);
@@ -130,4 +130,8 @@
 	.disabled {
 		cursor: not-allowed;
 	}
+
+	input[disabled] {
+		opacity: 0.75;
+	}
 </style>