feat: preset

JasKang · Apr 29, 2024 · 33322b2 · 33322b2
1 parent 41e9861
commit 33322b2
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/preset.ts b/preset.ts
@@ -94,11 +94,13 @@ const varPlugin: Plugin = {
         '--t-primary': theme('colors.primary.500'),
         '--t-input-border': theme('colors.gray.200'),
         '--t-input-bg': theme('colors.white'),
+        '--t-ring-offset': 'var(--t-input-bg)',
       },
       [darkContext]: {
         '--t-primary': theme('colors.primary.500'),
         '--t-input-border': theme('colors.gray.700'),
         '--t-input-bg': theme('colors.gray.900'),
+        '--t-ring-offset': 'var(--t-input-bg)',
       },
     })
   },
@@ -204,13 +206,22 @@ export default {
             '&:focus': { outline: 'none' },
           },
           '.input-border-bold': {
-            '--tw-ring-opacity': '1',
+            outline: 'none',
             '--tw-ring-color': 'var(--t-input-border)',
-            '--tw-ring-offset-shadow':
-              'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
+            '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--t-ring-offset)',
             '--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)',
+            boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+          },
+          '.input-outline': {
+            outline: 'none',
+            '--tw-ring-offset-width': '2px',
+            '--tw-ring-color': 'var(--t-primary)',
+            '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--t-ring-offset)',
+            '--tw-ring-shadow':
+              'var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
+            boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+            // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2
           },
         })
         matchUtilities(

diff --git a/src/Checkbox/Checkbox.vue b/src/Checkbox/Checkbox.vue
@@ -39,12 +39,10 @@ const clickHandler = () => {
     :class="['relative inline-flex items-center', disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer']"
     @click="clickHandler"
   >
-    <button
-      class="relative block cursor-[inherit] appearance-none rounded transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
-    >
+    <button class="focus-visible:input-outline relative block cursor-[inherit] appearance-none rounded transition-all">
       <span
-        class="block h-4 w-4 rounded border border-solid transition-all"
-        :class="[checked ? 'border-primary-500 bg-primary-500' : 'border-slate-300 bg-white']"
+        class="block h-4 w-4 rounded transition-all input-border"
+        :class="[checked ? 'input-border-primary-500 bg-primary-500' : 'bg-white']"
       >
         <svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg">
           <path

diff --git a/src/Radio/Radio.vue b/src/Radio/Radio.vue
@@ -34,13 +34,13 @@ const clickHandler = () => {
     @click="clickHandler"
   >
     <button
-      class="relative block cursor-[inherit] appearance-none overflow-hidden transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
+      class="focus-visible:input-outline relative block cursor-[inherit] appearance-none overflow-hidden rounded-full transition-all"
     >
       <span
-        class="block h-4 w-4 rounded-full border border-solid transition-all"
-        :class="[checked ? 'border-primary-500 bg-primary-500' : 'border-slate-300 bg-white']"
+        class="block h-4 w-4 rounded-full text-white transition-all input-border"
+        :class="[checked ? 'input-border-primary-500 bg-primary-500' : 'border-slate-300 bg-white ']"
       >
-        <svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg">
+        <svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
           <circle cx="8" cy="8" r="3" />
         </svg>
       </span>