@dataloop-ai/components 0.20.200 → 0.20.201

package/package.json

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

package/src/components/basic/DlAccordion/DlAccordion.vue

@@ -76,7 +76,7 @@ export default defineComponent({
         title: { type: String, default: null },
         fontSize: { type: String, default: '12px' },
         fontWeight: { type: String, default: '400' },
-        titleColor: { type: String, default: 'dl-color-medium' },
+        titleColor: { type: String, default: 'dell-gray-600' },
         modelValue: { type: Boolean, default: null },
         rightSide: { type: Boolean, default: false },
         isEmpty: Boolean,
@@ -147,11 +147,11 @@ export default defineComponent({
     transition: all 300ms;
     line-height: 16px;
     padding: var(--dl-accordion-content-padding, 0 16px 15px 38px);
-    color: var(--dl-color-darker);
+    color: var(--dell-gray-800);
     max-height: fit-content;
     overflow: hidden;
     &__border {
-        border-bottom: 1px solid var(--dl-color-separator);
+        border-bottom: 1px solid var(--dell-gray-300);
     }
     &.right-side {
         padding: 0 38px 16px 16px;

package/src/components/basic/DlAccordion/components/AccordionHeader.vue

@@ -75,12 +75,9 @@ export default defineComponent({
     computed: {
         accordionHeadStyles(): Record<string, string> {
             return {
-                '--dl-title-color': getColor(
-                    this.titleColor,
-                    'dl-color-medium'
-                ),
+                '--dl-title-color': getColor(this.titleColor, 'dell-gray-600'),
                 '--dl-expand-icon-color': `var(--${
-                    this.isOpen ? 'dl-color-darker' : this.titleColor
+                    this.isOpen ? 'dell-gray-800' : this.titleColor
                 })`,
                 '--dl-accordion-header-flex-direction': this.rightSide
                     ? 'row-reverse'

package/src/components/basic/DlAlert/DlAlert.vue

@@ -33,7 +33,7 @@
                     class="close-button-icon"
                     data-test="close-button-icon"
                     icon="icon-dl-close"
-                    color="dl-color-darker"
+                    color="dell-gray-800"
                     size="16px"
                     @click="handleClose"
                 />
@@ -104,17 +104,17 @@ const typeToIconMap: Record<DlAlertType, string> = {
 }
 
 const typeToIconColorMap: Record<DlAlertType, string> = {
-    info: 'dl-color-info',
-    success: 'dl-color-positive',
-    warning: 'dl-color-warning',
-    error: 'dl-color-negative'
+    info: 'dell-blue-500',
+    success: 'dell-green-500',
+    warning: 'dell-yellow-600',
+    error: 'dell-red-500'
 }
 
 const typeToBackgroundMap: Record<DlAlertType, string> = {
-    info: 'dl-color-info-background',
-    success: 'dl-color-positive-background',
-    warning: 'dl-color-warning-background',
-    error: 'dl-color-negative-background'
+    info: 'dell-blue-200',
+    success: 'dell-green-200',
+    warning: 'dell-yellow-200',
+    error: 'dell-red-200'
 }
 
 export default defineComponent({
@@ -342,7 +342,7 @@ export default defineComponent({
 
 .confirm-message {
     margin: 0;
-    color: var(--dl-color-darker);
+    color: var(--dell-gray-800);
     font-size: var(--dl-font-size-body);
     line-height: 1.5;
 }

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

@@ -987,7 +987,7 @@ export default defineComponent({
             if (this.error) {
                 return `var(--dell-red-500)`
             } else if (this.warning) {
-                return `var(--dell-yellow-500)`
+                return `var(--dell-yellow-600)`
             } else {
                 return `var(--dell-blue-500)`
             }
@@ -1034,7 +1034,7 @@ export default defineComponent({
                 classes.push('dl-input__input--disabled')
             }
 
-            if (this.inputLength) {
+            if (this.modelValue && this.inputLength) {
                 classes.push('dl-input__input--text-color')
             } else {
                 classes.push('dl-input__input--placeholder-color')

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

@@ -268,7 +268,7 @@ export default defineComponent({
 
                 highlightedHtml = label.replace(
                     toReplace,
-                    `<span style="background: var(--dell-yellow-500)">${getCaseInsensitiveInput(
+                    `<span style="background: var(--dell-yellow-600)">${getCaseInsensitiveInput(
                         label,
                         this.filterTerm
                     )}</span>`

package/src/components/essential/DlLabel/DlLabel.vue

@@ -8,10 +8,7 @@
     >
         <div class="dl-label__prefix">
             <slot name="prefix">
-                <div
-                    v-if="indicatorColor"
-                    class="dl-label__line"
-                />
+                <div v-if="indicatorColor" class="dl-label__line" />
             </slot>
         </div>
         <div class="dl-label__content">
@@ -22,10 +19,7 @@
                 :class="!suffix && fluid ? 'dl-label__fluid' : ''"
                 :text="text"
             />
-            <dl-ellipsis
-                v-else
-                class="dl-label__text"
-            >
+            <dl-ellipsis v-else class="dl-label__text">
                 <slot name="default" />
             </dl-ellipsis>
             <span
@@ -42,10 +36,7 @@
                 class="dl-label__suffix"
             >
                 <div class="dl-label__suffix-slot">
-                    <slot
-                        v-if="mouseOver"
-                        name="actions"
-                    />
+                    <slot v-if="mouseOver" name="actions" />
                 </div>
                 <slot name="hint">
                     <dl-icon
@@ -113,7 +104,7 @@ export default defineComponent({
          */
         color: {
             type: String,
-            default: 'dl-color-darker'
+            default: 'dell-gray-800'
         },
         /**
          * Will fill the container size its given

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

@@ -117,14 +117,14 @@ export default defineComponent({
     margin: 0;
     font-size: var(--dl-font-size-body);
     line-height: 1;
-    color: var(--dl-color-darker);
+    color: var(--dell-gray-800);
 }
 .dl-progress-bar {
     overflow: hidden;
     width: 100%;
     height: var(--dl-progress-bar-height);
     border-radius: 2px;
-    background-color: var(--dl-color-separator);
+    background-color: var(--dell-gray-300);
     margin: 6px 0;
 }
 .dl-progress-bar-indicator {
@@ -156,7 +156,7 @@ export default defineComponent({
     line-height: 12px;
     text-transform: capitalize;
     font-feature-settings: 'cpsp' on;
-    color: var(--dl-color-lighter);
+    color: var(--dell-gray-500);
 }
 @keyframes indeterminate-loading {
     0% {