@dataloop-ai/components 0.20.207 → 0.20.209

package/package.json

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

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

@@ -90,12 +90,25 @@ export default defineComponent({
         tooltip: {
             type: String,
             default: null
+        },
+        activeColor: {
+            type: String,
+            default: null
         }
     },
     emits: ['click', 'mousemove', 'mouseup', 'mousedown'],
     setup(props) {
-        const { styles, color, size, icon, svg, inline, svgSource, tooltip } =
-            toRefs(props)
+        const {
+            styles,
+            color,
+            size,
+            icon,
+            svg,
+            inline,
+            svgSource,
+            tooltip,
+            activeColor
+        } = toRefs(props)
 
         const svgIcon = ref(null)
         const isDestroyed = ref(false)
@@ -129,6 +142,9 @@ export default defineComponent({
                               : color.value,
                           'dell-gray-800'
                       )
+                    : 'inherit',
+                '--dl-icon-color-active': activeColor.value
+                    ? getColor(activeColor.value, 'dell-gray-800')
                     : 'inherit'
             }
         })
@@ -250,5 +266,9 @@ export default defineComponent({
     display: inline-flex;
     color: var(--dl-icon-color);
     font-size: var(--dl-icon-font-size);
+
+    &:active {
+        color: var(--dl-icon-color-active);
+    }
 }
 </style>

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

@@ -27,7 +27,7 @@
             </span>
             <p
                 v-if="showValue && !indeterminate && !summary"
-                class="dl-progress-bar-label"
+                class="dl-progress-bar-value"
             >
                 {{ computedValue }}{{ showPercentage ? '%' : '' }}
             </p>
@@ -114,6 +114,12 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .dl-progress-bar-label {
+    margin: 0;
+    font-size: var(--dl-font-size-body);
+    line-height: 1;
+    color: var(--dell-gray-600);
+}
+.dl-progress-bar-value {
     margin: 0;
     font-size: var(--dl-font-size-body);
     line-height: 1;

package/src/components/essential/DlTypography/DlTypography.vue

@@ -36,6 +36,10 @@ export default defineComponent({
         color: {
             type: String,
             default: 'dell-gray-800'
+        },
+        activeColor: {
+            type: String,
+            default: null
         }
     },
     data() {
@@ -48,7 +52,10 @@ export default defineComponent({
             const styles: Record<string, string | number> = {
                 color: getColor(this.color as string, 'dl-color-darker'),
                 textTransform: this.letterClass ? null : this.transform,
-                fontWeight: this.bold ? 500 : 400
+                fontWeight: this.bold ? 500 : 400,
+                '--dl-typography-color-active': this.activeColor
+                    ? getColor(this.activeColor as string, 'dell-gray-800')
+                    : null
             }
 
             if (this.size && !sizes.includes(this.size)) {
@@ -120,5 +127,9 @@ export default defineComponent({
     &--small {
         font-size: var(--dl-font-size-small);
     }
+
+    &:active {
+        color: var(--dl-typography-color-active);
+    }
 }
 </style>

package/src/components/shared/DlTooltip/DlTooltip.vue

@@ -77,12 +77,12 @@ export default defineComponent({
         color: {
             type: String,
             required: false,
-            default: 'dl-color-tooltip-text'
+            default: 'dell-gray-800'
         },
         backgroundColor: {
             type: String,
             required: false,
-            default: 'dl-color-tooltip-background'
+            default: 'dell-white'
         },
         maxHeight: {
             type: String,
@@ -414,7 +414,7 @@ export default defineComponent({
                     '--dl-tooltip-text-transform': props.capitalized
                         ? 'capitalize'
                         : 'none',
-                    '--dl-tooltip-border': props.border
+                    '--dl-tooltip-border': props.border || 'dell-gray-200'
                 }
             ] as any
         }
@@ -435,8 +435,9 @@ export default defineComponent({
     line-height: 16px;
     color: var(--dl-tooltip-color);
     background: var(--dl-tooltip-background);
-    border: var(--dl-tooltip-border);
-    border-radius: 2px;
+    border: 1px solid var(--dl-tooltip-border, #eaeaea);
+    border-radius: 0px;
+    box-shadow: 0 2px 2px 0 var(--dell-shadow, rgba(0, 0, 0, 0.14));
     text-transform: none;
     font-family: 'Roboto', sans-serif;
     font-weight: 400;