@dataloop-ai/components 0.18.112 → 0.18.113

package/package.json

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

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

@@ -214,10 +214,24 @@ export default defineComponent({
         },
         getIconColor(): string {
             if (this.disabled) {
-                return 'dl-color-disabled'
+                return setTextColor({
+                    disabled: this.disabled,
+                    outlined: this.outlined,
+                    flat: this.flat,
+                    color: this.color,
+                    filled: this.filled,
+                    shaded: this.shaded,
+                    textColor: this.iconColor ?? this.textColor
+                })
             }
             if (this.mouseOver) {
-                return 'dl-color-hover'
+                return setColorOnHover({
+                    disabled: this.disabled,
+                    outlined: this.outlined,
+                    shaded: this.shaded,
+                    flat: this.flat,
+                    color: this.iconColor ?? this.textColor
+                })
             }
 
             if (this.iconColor) {
@@ -333,20 +347,6 @@ export default defineComponent({
                         flat: this.flat,
                         color: this.textColor
                     }),
-                    '--dl-button-icon-color-hover': setColorOnHover({
-                        disabled: this.disabled,
-                        outlined: this.outlined,
-                        shaded: this.shaded,
-                        flat: this.flat,
-                        color: this.getIconColor
-                    }),
-                    '--dl-icon-color': setColorOnHover({
-                        disabled: this.disabled,
-                        outlined: this.outlined,
-                        shaded: this.shaded,
-                        flat: this.flat,
-                        color: this.getIconColor
-                    }),
                     '--dl-button-border-hover': setBorderOnHover({
                         disabled: this.disabled,
                         flat: this.flat,
@@ -519,9 +519,6 @@ export default defineComponent({
 
 .dl-button-icon {
     transition: var(--dl-button-text-transition-duration);
-    &:hover:enabled:not(:active) {
-        color: var(--dl-button-icon-color-hover);
-    }
 }
 
 .dl-button-container {

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

@@ -163,12 +163,13 @@ export const setColorOnHover = ({
 export const setBorderOnHover = ({
     disabled,
     flat,
-    color
+    color,
+    shaded
 }: Partial<DlButtonProps>) => {
     if (disabled) {
         return 'var(--dl-color-separator)'
     }
-    if (flat) {
+    if (flat || shaded) {
         return 'var(--dl-color-transparent)'
     }
     if (color) {
@@ -180,15 +181,21 @@ export const setBorderOnHover = ({
 export const setBgOnHover = ({
     disabled,
     flat,
+    shaded,
     outlined,
     filled,
     color
 }: Partial<DlButtonProps>) => {
-    if (color) return getLighterGradient(color)
+    if (shaded) {
+        return 'var(--dl-color-fill)'
+    }
 
     if (disabled || flat || outlined) {
         return 'var(--dl-color-transparent)'
     }
+
+    if (color) return getLighterGradient(color)
+
     if (filled) {
         return 'var(--dl-color-hover)'
     }
@@ -196,15 +203,9 @@ export const setBgOnHover = ({
     return 'var(--dl-color-panel-background)'
 }
 
-export const setBgOnPressed = ({
-    shaded,
-    outlined
-}: Partial<DlButtonProps>) => {
-    if (shaded && outlined) {
-        return 'var(--dl-color-text-buttons)'
-    }
+export const setBgOnPressed = ({ shaded }: Partial<DlButtonProps>) => {
     if (shaded) {
-        return 'var(--dl-color-secondary)'
+        return 'var(--dl-color-fill-hover)'
     }
     return 'var(--dl-button-bg)'
 }
@@ -213,21 +214,21 @@ export const setTextOnPressed = ({
     shaded,
     outlined
 }: Partial<DlButtonProps>) => {
-    if (shaded && outlined) {
-        return 'var(--dl-color-secondary)'
-    }
-    if (shaded) {
-        return 'var(--dl-color-text-buttons)'
-    }
     return 'var(--dl-button-text-color)'
 }
 
 export const setBorderOnPressed = ({
     shaded,
-    outlined
+    disabled,
+    flat,
+    color
 }: Partial<DlButtonProps>) => {
-    if (shaded && outlined) {
-        return 'var(--dl-color-secondary)'
+    if (disabled) {
+        return 'var(--dl-color-separator)'
     }
+    if (flat || shaded) {
+        return 'var(--dl-color-transparent)'
+    }
+    if (color) return getLighterGradient(color)
     return 'var(--dl-button-border)'
 }

package/src/components/essential/DlIcon/DlIcon.vue

@@ -89,7 +89,7 @@ export default defineComponent({
         cssIconVars(): Record<string, string> {
             return {
                 '--dl-icon-font-size': `${this.size}`,
-                '--icon-color': this.color
+                '--dl-icon-color': this.color
                     ? // todo: remove this. this is needed for now until the swap of DLBTN in OA
                       getColor(
                           this.color === 'secondary'
@@ -157,7 +157,7 @@ export default defineComponent({
 <style scoped lang="scss">
 .dl-icon {
     display: inline-flex;
-    color: var(--dl-icon-color, var(--icon-color));
+    color: var(--dl-icon-color);
     font-size: var(--dl-icon-font-size);
 }
 </style>

package/src/demos/DlButtonDemo.vue

@@ -293,26 +293,44 @@
                 outlined
             />
         </div>
-        <div>
-            <h3>hover color</h3>
+        <div style="display: flex; flex-direction: column">
+            <h3>button with icon color</h3>
             <dl-button
                 icon="icon-dl-search"
-                flat
-                dense
+                :icon-color="'red'"
+                :text-color="'blue'"
+                color="green"
                 label="test me"
-                text-color="red"
+                size="s"
+                flat
             />
-        </div>
-        <div>
-            <h3>button with icon color</h3>
             <dl-button
                 icon="icon-dl-search"
                 :icon-color="'red'"
+                :text-color="'blue'"
+                color="green"
                 label="test me"
                 size="s"
                 shaded
+            />
+            <dl-button
+                icon="icon-dl-search"
+                :icon-color="'red'"
+                :text-color="'blue'"
+                color="green"
+                label="test me"
+                size="s"
                 outlined
             />
+            <dl-button
+                icon="icon-dl-search"
+                :icon-color="'red'"
+                :text-color="'blue'"
+                color="green"
+                label="test me"
+                size="s"
+                filled
+            />
         </div>
     </div>
 </template>

package/src/utils/getColor.ts

@@ -10,6 +10,7 @@ const getColor = (color: string, fallback?: string) => {
     }
 
     if (!color) return `var(--${fallback || 'dl-color-darker'})`
+    if (color.includes('var(--')) return color
 
     return `var(--${color}, var(--${fallback || 'dl-color-darker'}))`
 }