@veritree/ui 0.64.4 → 0.65.0

package/mixins/form-control.js

@@ -73,7 +73,7 @@ export const formControlStyleMixin = {
       return [
         this.headless
           ? `${this.name}`
-          : 'leading-0 flex w-full max-w-full relative appearance-none placeholder:font-light placeholder:text-gray-500 items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-sm text-inherit file:hidden focus:border-gray-600 focus:placeholder:text-gray-400',
+          : 'leading-0 bg-white disabled:bg-gray-200 flex w-full max-w-full relative appearance-none placeholder:font-light placeholder:text-gray-500 items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-sm text-inherit file:hidden focus:border-gray-600 focus:placeholder:text-gray-400',
         // variant styles
         this.headless
           ? `${this.name}--${this.variant}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.64.4",
+  "version": "0.65.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Button/VTButton.vue

@@ -24,6 +24,8 @@
           : 'border-gray-400 bg-white text-gray-700 hover:bg-gray-100 focus:bg-gray-200 active:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400'
         : isTertiary
         ? 'border-transparent text-gray-600 hover:text-gray-800 focus:text-gray-800 active:text-gray-800 disabled:text-gray-400'
+        : isDark
+        ? 'border-transparent bg-gray-800 text-white hover:bg-gray-700 active:bg-gray-600 disabled:bg-gray-200 disabled:text-gray-400'
         : isIcon
         ? 'text-primary-100 focus-within:bg-gray-200 hover:bg-gray-200 active:bg-gray-300 disabled:bg-gray-200 disabled:text-gray-400'
         : null,
@@ -174,6 +176,10 @@ export default {
       return this.variant === 'tertiary';
     },
 
+    isDark() {
+      return this.variant === 'dark';
+    },
+
     isIcon() {
       return this.variant === 'icon';
     },