chore: update design

src/components/forms/Checkbox.vue

@@ -68,7 +68,7 @@ export default {
     },
     baseClass: {
       type: String,
-      default: 'h-4 w-4 text-primary-600 focus:ring-primary-500 u-border-gray-300 bg-white dark:bg-gray-800 dark:checked:bg-primary-600 dark:checked:border-primary-600 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed rounded'
+      default: 'h-4 w-4 text-primary-600 focus:ring-1 focus:ring-primary-500 u-border-gray-300 focus:border-primary-500 dark:focus:border-primary-500 u-bg-white dark:checked:bg-primary-600 dark:checked:border-primary-600 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed rounded'
     },
     customClass: {
       type: String,

src/components/forms/Radio.vue

@@ -60,7 +60,7 @@ export default {
     },
     baseClass: {
       type: String,
-      default: 'h-4 w-4 mt-0.5 text-primary-600 checked:border-primary-600 u-border-gray-300 u-bg-white dark:checked:bg-primary-600 focus:ring-offset-white dark:focus:ring-offset-gray-900 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'
+      default: 'h-4 w-4 mt-0.5 text-primary-600 checked:border-primary-600 dark:checked:border-primary-600 focus:ring-1 focus:ring-primary-500 u-border-gray-300 u-bg-white dark:checked:bg-primary-600 focus:ring-offset-white dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed'
     },
     customClass: {
       type: String,

src/components/forms/Toggle.vue

@@ -1,7 +1,7 @@
 <template>
   <Switch
     v-model="enabled"
-    :class="[enabled ? 'bg-primary-600' : 'u-bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-200']"
+    :class="[enabled ? 'bg-primary-600' : 'u-bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-500']"
   >
     <span :class="[enabled ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']">
       <span :class="[enabled ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200', 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity']" aria-hidden="true">

src/css/forms.css

@@ -16,45 +16,6 @@ textarea {
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	appearance: none;
-	background-color: #fff;
-	border-color: #6b7280;
-	border-width: 1px;
-	border-radius: 0;
-	padding-top: .5rem;
-	padding-right: .75rem;
-	padding-bottom: .5rem;
-	padding-left: .75rem;
-	font-size: 1rem;
-	line-height: 1.5rem
-}
-
-[multiple]:focus,
-[type=date]:focus,
-[type=datetime-local]:focus,
-[type=email]:focus,
-[type=month]:focus,
-[type=number]:focus,
-[type=password]:focus,
-[type=search]:focus,
-[type=tel]:focus,
-[type=text]:focus,
-[type=time]:focus,
-[type=url]:focus,
-[type=week]:focus,
-select:focus,
-textarea:focus {
-	outline: 2px solid transparent;
-	outline-offset: 2px;
-	--tw-ring-inset: var(--tw-empty, );
-	/*!*/
-	/*!*/
-	--tw-ring-offset-width: 0px;
-	--tw-ring-offset-color: #fff;
-	--tw-ring-color: #2563eb;
-	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-	border-color: #2563eb
 }
 
 input::-moz-placeholder,
@@ -121,10 +82,7 @@ select {
 	flex-shrink: 0;
 	height: 1rem;
 	width: 1rem;
-	color: #2563eb;
+	border-width: 1px;
-	background-color: #fff;
-	border-color: #6b7280;
-	border-width: 1px
 }
 
 [type=checkbox] {
@@ -135,21 +93,6 @@ select {
 	border-radius: 100%
 }
 
-[type=checkbox]:focus,
-[type=radio]:focus {
-	outline: 2px solid transparent;
-	outline-offset: 2px;
-	--tw-ring-inset: var(--tw-empty, );
-	/*!*/
-	/*!*/
-	--tw-ring-offset-width: 2px;
-	--tw-ring-offset-color: #fff;
-	--tw-ring-color: #2563eb;
-	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
-}
-
 [type=checkbox]:checked,
 [type=radio]:checked {
 	border-color: transparent;

src/presets/tailwindui.ts

@@ -59,7 +59,7 @@ const input = {
     }
   },
   appearance: {
-    default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 border u-border-gray-300 rounded-md shadow-sm',
+    default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500 border u-border-gray-300 rounded-md shadow-sm',
     none: 'border-0 bg-transparent focus:ring-0 focus:shadow-none'
   },
   icon: {