feat: creates hollow style for button inputs

formkit · Nov 9, 2023 · ec9dc9c · ec9dc9c
1 parent c98dc8f
commit ec9dc9c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 26 deletions.
diff --git a/src/families/button.ts b/src/families/button.ts
@@ -1,45 +1,22 @@
 export default {
-  outer: `
-    data-[disabled]:opacity-100
-  `,
   input: `
     ${"" /* base styles */}
     font-bold
-    bg-$accentColor-$baseColorShade
     $radius
+    outline-none
+    flex
     !text-$scale(-1,*)
     px-$spacing(7,*)
     py-$spacing(2,3,10)
-    outline-none
-    flex
     items-center
     mb-$spacing(-1)
-    text-white
     text-$scale(-1,*)
-    active:text-$accentColor-100
-    active:bg-$accentColor-$baseColorShade(1,*)
-    hover:bg-$accentColor-$baseColorShade(1,*)
     ring-offset-2
     ring-$accentColor-$baseColorShade(-1,*)
     focus-visible:ring-2
-    disabled:border-$colorTemperature-$borderShadeLightMode
-    disabled:bg-$colorTemperature-400
-    disabled:text-$colorTemperature-100
     group-data-[disabled]:!cursor-not-allowed
     $inputShadow
     group-data-[prefix-icon]:pl-$spacing(5,*)
     group-data-[suffix-icon]:pr-$spacing(5,*)
-
-    ${"" /* dark mode styles */}
-    dark:disabled:border-$colorTemperature-100
-    dark:disabled:bg-$colorTemperature-500
-    dark:disabled:text-$colorTemperature-200
-    dark:ring-offset-$accentColor-$baseColorShade(-1,*)
-  `,
-  prefixIcon: `
-    text-$colorTemperature-100
-  `,
-  suffixIcon: `
-    text-$colorTemperature-100
   `,
 };
diff --git a/src/inputs/button.ts b/src/inputs/button.ts
@@ -1,3 +1,14 @@
 export default {
   // inherits family:button classes
+  input: `
+    border
+    border-$accentColor-$baseColorShade
+    text-$accentColor-$baseColorShade
+    hover:bg-$accentColor-50
+
+    ${"" /* dark mode styles */}
+    dark:border-$accentColor-500
+    dark:text-$accentColor-500
+    dark:hover:bg-$accentColor-900/20
+  `,
 };
diff --git a/src/inputs/submit.ts b/src/inputs/submit.ts
@@ -1,3 +1,29 @@
 export default {
-  // inherits family:button classes
+  outer: `
+    data-[disabled]:opacity-100
+  `,
+  input: `
+    ${"" /* base styles */}
+    bg-$accentColor-$baseColorShade
+    text-white
+    active:text-$accentColor-100
+    active:bg-$accentColor-$baseColorShade(1,*)
+    hover:bg-$accentColor-$baseColorShade(1,*)
+    disabled:border-$colorTemperature-$borderShadeLightMode
+    disabled:bg-$colorTemperature-400
+    disabled:text-$colorTemperature-100
+    group-data-[disabled]:!cursor-not-allowed
+
+    ${"" /* dark mode styles */}
+    dark:disabled:border-$colorTemperature-100
+    dark:disabled:bg-$colorTemperature-500
+    dark:disabled:text-$colorTemperature-200
+    dark:ring-offset-$accentColor-$baseColorShade(-1,*)
+  `,
+  prefixIcon: `
+    text-$colorTemperature-100
+  `,
+  suffixIcon: `
+    text-$colorTemperature-100
+  `,
 };