@dataloop-ai/components 0.20.203 → 0.20.204

package/package.json

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

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

@@ -264,7 +264,7 @@ export default defineComponent({
                     color: this.color,
                     filled: this.filled,
                     shaded: this.shaded,
-                    textColor: this.iconColor ?? this.textColor
+                    textColor: this.iconColor || this.textColor
                 })
             }
 
@@ -278,7 +278,7 @@ export default defineComponent({
                 return setTextOnPressed({
                     disabled: this.disabled,
                     flat: this.flat,
-                    textColor: this.iconColor ?? this.textColor
+                    textColor: this.iconColor || this.textColor
                 })
             }
 
@@ -290,7 +290,7 @@ export default defineComponent({
                         outlined: this.outlined,
                         shaded: this.shaded,
                         flat: this.flat,
-                        color: this.iconColor ?? this.textColor
+                        color: this.iconColor || this.textColor
                     })
                 )
             }

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

@@ -81,29 +81,29 @@ export const setTextColor = ({
     textColor
 }: DlButtonProps): string => {
     if (disabled) {
-        return getColor('', 'dl-color-disabled')
+        return getColor('', 'dell-gray-500')
     }
     if (shaded && outlined) {
-        return getColor(textColor, 'dl-color-text-darker-buttons')
+        return getColor(textColor, 'dell-gray-800')
     }
     if (outlined) {
-        return getColor(textColor, 'dl-color-secondary')
+        return getColor(textColor, 'dell-blue-500')
     }
     if (flat) {
         if (color === 'secondary') {
-            return getColor(textColor, 'dl-color-darker')
+            return getColor(textColor, 'dell-gray-800')
         }
 
-        return getColor(textColor, 'dl-color-secondary')
+        return getColor(textColor, 'dell-blue-500')
     }
     if (shaded) {
-        return getColor(textColor, 'dl-color-darker')
+        return getColor(textColor, 'dell-gray-800')
     }
     if (filled) {
-        return getColor(textColor, 'dl-color-text-buttons')
+        return getColor(textColor, 'dell-white')
     }
 
-    return getColor(textColor, 'dl-color-text-buttons')
+    return getColor(textColor, 'dell-white')
 }
 
 export const setBgColor = ({

package/src/utils/getLighterGradient.ts

@@ -8,13 +8,32 @@ const allColorNames = {
 }
 
 const getLighterGradient = (color: string, magnitude = MAGNITUDE) => {
-    color = color.replace('dl', '--dl')
+    if (color.startsWith('dl-') || color.startsWith('dell-')) {
+        color = `--${color}`
+    }
+    if (color.startsWith('--dell-')) {
+        const colorMatch = color.match(/--dell-(\w+)-(\d+)/)
+        if (colorMatch) {
+            try {
+                const colorName = colorMatch[1]
+                const colorValue = parseInt(colorMatch[2])
+                const nextColorValue = colorValue + 100
+                const colorToReplace = `--dell-${colorName}-${nextColorValue}`
+                if (colorToReplace in allColorNames) {
+                    return allColorNames[
+                        colorToReplace as keyof typeof allColorNames
+                    ]
+                }
+            } catch (error) {
+                // skip error
+            }
+        }
+    }
     let newColor =
         color in allColorNames
             ? allColorNames[color as keyof typeof allColorNames]
             : color
     newColor = newColor.replace(`#`, ``).trim()
-
     if (newColor.length === 6) {
         const decimalColor = parseInt(newColor, 16)