@dataloop-ai/components 0.20.206 → 0.20.207

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.206",
+  "version": "0.20.207",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/basic/DlButton/DlButton.vue

@@ -421,6 +421,7 @@ export default defineComponent({
                             disabled: this.disabled,
                             flat: this.flat,
                             shaded: this.shaded,
+                            outlined: this.outlined,
                             color: this.color
                         }),
                     '--dl-button-bg-hover':
@@ -442,13 +443,21 @@ export default defineComponent({
                     '--dl-button-bg-pressed':
                         this.pressedBgColor ??
                         setBgOnPressed({
+                            disabled: this.disabled,
+                            flat: this.flat,
                             shaded: this.shaded,
-                            outlined: this.outlined
+                            outlined: this.outlined,
+                            filled: this.filled,
+                            color: this.color
                         }),
 
                     '--dl-button-border-pressed': setBorderOnPressed({
+                        disabled: this.disabled,
+                        flat: this.flat,
                         shaded: this.shaded,
-                        outlined: this.outlined
+                        outlined: this.outlined,
+                        filled: this.filled,
+                        color: this.color
                     })
                 }
             }

package/src/components/basic/DlButton/utils.ts

@@ -120,7 +120,7 @@ export const setBgColor = ({
         return 'var(--dl-color-fill)'
     }
 
-    return getColor(color, 'dl-color-secondary')
+    return getColor(color, 'dell-blue-500')
 }
 
 export const setBorder = ({
@@ -142,7 +142,7 @@ export const setBorder = ({
         return 'var(--dl-color-transparent)'
     }
 
-    return getColor(color, 'dl-color-secondary')
+    return getColor(color, 'dell-blue-500')
 }
 
 export const setColorOnHover = ({
@@ -151,11 +151,14 @@ export const setColorOnHover = ({
     outlined,
     color
 }: Partial<DlButtonProps>) => {
-    if (color) return getLighterGradient(color)
     if (disabled) {
         return flat ? 'var(--dl-color-transparent)' : 'var(--dl-color-disabled)'
     }
-    if (outlined || flat) {
+    if (outlined) {
+        return getColor(color || '', 'dell-blue-500')
+    }
+    if (color) return getLighterGradient(color)
+    if (flat) {
         return 'var(--dl-color-hover)'
     }
 
@@ -166,7 +169,8 @@ export const setBorderOnHover = ({
     disabled,
     flat,
     color,
-    shaded
+    shaded,
+    outlined
 }: Partial<DlButtonProps>) => {
     if (disabled) {
         return 'var(--dl-color-separator)'
@@ -174,10 +178,13 @@ export const setBorderOnHover = ({
     if (flat || shaded) {
         return 'var(--dl-color-transparent)'
     }
+    if (outlined) {
+        return getColor(color || '', 'dell-blue-500')
+    }
     if (color) {
         return getLighterGradient(color)
     }
-    return 'var(--dl-color-hover)'
+    return 'var(--dell-blue-600)'
 }
 
 export const setBgOnHover = ({
@@ -192,6 +199,10 @@ export const setBgOnHover = ({
         return 'var(--dl-color-fill)'
     }
 
+    if (outlined && !disabled) {
+        return 'var(--dell-blue-100)'
+    }
+
     if (disabled || flat || outlined) {
         return 'var(--dl-color-transparent)'
     }
@@ -199,16 +210,36 @@ export const setBgOnHover = ({
     if (color) return getLighterGradient(color)
 
     if (filled) {
-        return 'var(--dl-color-hover)'
+        return 'var(--dell-blue-600)'
     }
 
     return 'var(--dl-color-panel-background)'
 }
 
-export const setBgOnPressed = ({ shaded }: Partial<DlButtonProps>) => {
+export const setBgOnPressed = ({
+    disabled,
+    flat,
+    shaded,
+    outlined,
+    filled,
+    color
+}: Partial<DlButtonProps>) => {
     if (shaded) {
         return 'var(--dl-color-fill-hover)'
     }
+
+    if (disabled) {
+        return 'var(--dl-button-bg)'
+    }
+
+    if (outlined && !flat) {
+        return 'var(--dell-blue-200)'
+    }
+
+    if (filled && !flat && !outlined && !color) {
+        return 'var(--dell-blue-700)'
+    }
+
     return 'var(--dl-button-bg)'
 }
 
@@ -224,9 +255,11 @@ export const setTextOnPressed = ({
 }
 
 export const setBorderOnPressed = ({
-    shaded,
     disabled,
     flat,
+    shaded,
+    outlined,
+    filled,
     color
 }: Partial<DlButtonProps>) => {
     if (disabled) {
@@ -235,6 +268,13 @@ export const setBorderOnPressed = ({
     if (flat || shaded) {
         return 'var(--dl-color-transparent)'
     }
+    if (outlined) {
+        return getColor(color || '', 'dell-blue-500')
+    }
     if (color) return getLighterGradient(color)
+    const isFilled = filled !== false
+    if (isFilled && !color) {
+        return 'var(--dell-blue-700, var(--dl-button-border))'
+    }
     return 'var(--dl-button-border)'
 }