@dataloop-ai/components 0.20.198 → 0.20.199

package/package.json

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

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

@@ -8,4 +8,4 @@ export const itemCursor = (actionable: boolean, disabled: boolean) =>
     actionable ? 'pointer' : disabled ? 'not-allowed' : 'cursor'
 
 export const itemColor = (disabled: boolean) =>
-    disabled ? 'var(--dl-color-disabled)' : 'var(--dl-color-darker)'
+    disabled ? 'var(--dell-gray-500)' : 'var(--dell-gray-800)'

package/src/components/compound/DlInput/DlInput.vue

@@ -985,11 +985,11 @@ export default defineComponent({
         },
         getBorderColor(): string {
             if (this.error) {
-                return `var(--dl-color-negative)`
+                return `var(--dell-red-500)`
             } else if (this.warning) {
-                return `var(--dl-color-warning)`
+                return `var(--dell-yellow-500)`
             } else {
-                return `var(--dl-color-secondary)`
+                return `var(--dell-blue-500)`
             }
         },
         cssVars(): Record<string, any> {
@@ -1034,6 +1034,12 @@ export default defineComponent({
                 classes.push('dl-input__input--disabled')
             }
 
+            if (this.inputLength) {
+                classes.push('dl-input__input--text-color')
+            } else {
+                classes.push('dl-input__input--placeholder-color')
+            }
+
             return classes
         },
         asteriskClasses(): string[] {
@@ -1366,7 +1372,7 @@ export default defineComponent({
 [contenteditable='true']:empty:before {
     content: attr(placeholder);
     display: inline;
-    opacity: 0.5;
+    opacity: 1;
     -webkit-text-security: none;
 }
 
@@ -1480,7 +1486,6 @@ export default defineComponent({
         font-family: Arial, Helvetica, sans-serif;
         border-right: none;
         border-radius: 0px;
-        color: var(--dl-color-darker);
         white-space: var(--dl-input-white-space);
         font-size: var(--dl-font-size-body);
         overflow: hidden scroll;
@@ -1496,6 +1501,13 @@ export default defineComponent({
         line-height: 10px;
         width: 100%;
 
+        &--text-color {
+            color: var(--dell-gray-800);
+        }
+        &--placeholder-color {
+            color: var(--dell-gray-500);
+        }
+
         &--prepend {
             width: calc(100% - 10px - 28px);
         }

package/src/components/compound/DlSelect/DlSelect.vue

@@ -63,7 +63,7 @@
                             v-if="searchable"
                             icon="icon-dl-search"
                             :size="iconSize"
-                            color="dl-color-lighter"
+                            color="dell-gray-500"
                         />
                     </slot>
                 </div>
@@ -166,7 +166,7 @@
                 @selected-item="handleSelectedItem"
             >
                 <dl-list-item v-if="hasBeforeOptions && !noOptions">
-                    <dl-item-section color="dl-color-medium">
+                    <dl-item-section color="dell-gray-600">
                         <slot name="before-options" />
                     </dl-item-section>
                 </dl-list-item>
@@ -175,7 +175,7 @@
                     :style="computedNoOptionsStyle"
                     :padding="noOptionsPadding"
                 >
-                    <dl-item-section color="dl-color-medium">
+                    <dl-item-section color="dell-gray-600">
                         <slot name="no-options"> No options </slot>
                     </dl-item-section>
                 </dl-list-item>
@@ -355,7 +355,7 @@
                     v-if="error && !!errorMessage.length"
                     :icon="errorIcon"
                     :inline="false"
-                    color="dl-color-negative"
+                    color="dell-red-500"
                     :size="iconSize"
                 >
                     <dl-tooltip>
@@ -816,7 +816,7 @@ export default defineComponent({
                 '--placeholder-color': getColor(
                     this.modelValueLength > 0 || this.selectedIndex !== -1
                         ? 'dell-gray-800'
-                        : 'dl-color-lighter'
+                        : 'dell-gray-500'
                 )
             }
         },

package/src/components/compound/DlSelect/components/DlSelectOption.vue

@@ -222,7 +222,7 @@ export default defineComponent({
             return `dl-select-option-${this.value}`.replaceAll(' ', '-')
         },
         color(): string | null {
-            return this.defaultStyles ? 'dl-color-darker' : null
+            return this.defaultStyles ? 'dell-gray-800' : null
         },
         isSelected(): boolean {
             return (
@@ -268,7 +268,7 @@ export default defineComponent({
 
                 highlightedHtml = label.replace(
                     toReplace,
-                    `<span style="background: var(--dl-color-warning)">${getCaseInsensitiveInput(
+                    `<span style="background: var(--dell-yellow-500)">${getCaseInsensitiveInput(
                         label,
                         this.filterTerm
                     )}</span>`

package/src/components/compound/DlTable/DlTable.vue

@@ -167,7 +167,7 @@
                                         style="width: 100%; display: flex"
                                     >
                                         <dl-button
-                                            :text-color="
+                                            :icon-color="
                                                 isVisibleColumnsOpen
                                                     ? 'dell-blue-600'
                                                     : 'dell-gray-600'
@@ -571,7 +571,7 @@
                                         style="width: 100%; display: flex"
                                     >
                                         <dl-button
-                                            :text-color="
+                                            :icon-color="
                                                 isVisibleColumnsOpen
                                                     ? 'dl-color-secondary'
                                                     : 'dl-color-medium'

package/src/components/essential/DlCheckbox/DlCheckbox.vue

@@ -234,10 +234,10 @@ export default defineComponent({
 }
 .container.disabled {
     cursor: not-allowed;
-    color: var(--dl-color-disabled);
+    color: var(--dell-gray-500);
     & * {
         pointer-events: auto;
-        color: var(--dl-color-disabled);
+        color: var(--dell-gray-500);
     }
 }
 .checkbox-wrapper {
@@ -245,7 +245,7 @@ export default defineComponent({
     position: relative;
     width: 12px;
     height: 12px;
-    border: 1px solid var(--dl-color-separator);
+    border: 1px solid var(--dell-gray-300);
     border-radius: 2px;
     & svg {
         transition: fill 100ms cubic-bezier(0, 0, 0.2, 1) 0ms;
@@ -278,7 +278,7 @@ input {
 
 .checkbox-label {
     font-size: var(--dl-font-size-body);
-    color: var(--dl-color-darker);
+    color: var(--dell-gray-800);
     overflow-wrap: break-word;
     width: 100%;
 }

package/src/components/essential/DlLink/DlLink.vue

@@ -43,8 +43,12 @@ export default defineComponent({
                 : `${window.origin}/${this.href}`
         },
         linkStyles(): Record<string, string> {
-            const textColor = this.color ?? 'dl-color-studio-secondary'
-            const hoverTextColor = this.hoverColor ?? textColor
+            const textColor = this.color ?? 'dell-blue-600'
+            const hoverTextColor = this.hoverColor
+                ? this.hoverColor
+                : this.color
+                ? this.color
+                : 'dell-blue-700'
             return {
                 '--link-color': `var(--${textColor})`,
                 '--link-hover-color': `var(--${hoverTextColor})`

package/src/components/essential/DlList/DlList.vue

@@ -1,9 +1,5 @@
 <template>
-    <component
-        :is="type"
-        :id="uuid"
-        :class="classes"
-    >
+    <component :is="type" :id="uuid" :class="classes">
         <slot :clickable="clickable" />
     </component>
 </template>
@@ -44,12 +40,12 @@ export default defineComponent({
 <style scoped lang="scss">
 .dl-list {
     padding: 6px 0;
-    background-color: var(--dl-color-panel-background);
+    background-color: var(--dell-white);
     &--bordered {
-        border: 1px solid var(--dl-color-separator);
+        border: 1px solid var(--dell-gray-300);
     }
     &--separator {
-        border-top: 1px solid var(--dl-color-separator);
+        border-top: 1px solid var(--dell-gray-300);
         & > .dl-list-item {
             padding: 5px 10px;
         }

package/src/components/essential/DlProgressBar/DlProgressBar.vue

@@ -51,7 +51,7 @@ export default defineComponent({
     props: {
         color: {
             type: String,
-            default: 'dl-color-secondary'
+            default: 'dell-blue-500'
         },
         label: {
             type: String,

package/src/components/essential/DlTrend/DlTrend.vue

@@ -1,8 +1,5 @@
 <template>
-    <div
-        :id="uuid"
-        class="trend-wrapper"
-    >
+    <div :id="uuid" class="trend-wrapper">
         <span
             v-if="withArrow"
             class="direction-arrow"
@@ -25,6 +22,24 @@ import { getColor } from '../../../utils'
 const colorValidator = (val: string | null) =>
     val === 'negative' || val === 'positive' || val === null
 
+const getColorByName = (name: string) => {
+    if (name === 'negative') {
+        return 'dell-red-500'
+    } else if (name === 'positive') {
+        return 'dell-green-500'
+    } else {
+        return 'dell-gray-800'
+    }
+}
+
+const getColorByDirection = (direction: string) => {
+    if (direction === 'up') {
+        return 'dell-green-500'
+    } else {
+        return 'dell-red-500'
+    }
+}
+
 export default defineComponent({
     name: 'DlTrend',
     props: {
@@ -63,9 +78,9 @@ export default defineComponent({
         },
         computedColor(): string {
             if (this.color !== null || !colorValidator(this.color)) {
-                return getColor(`dl-color-${this.color}`)
+                return getColor(getColorByName(this.color))
             }
-            return getColor(`dl-color-${this.isUp ? 'positive' : 'negative'}`)
+            return getColor(getColorByDirection(this.direction))
         },
         withArrow(): boolean {
             return !(this.value === 0 || this.value === '0')
@@ -83,7 +98,7 @@ export default defineComponent({
     font-size: var(--dl-font-size-body);
     line-height: 1;
     padding: 2px 0;
-    color: var(--dl-color-darker);
+    color: var(--dell-gray-800);
 }
 .direction-arrow {
     width: 8px;

package/src/utils/getColor.ts

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