@dataloop-ai/components 0.20.213 → 0.20.215

package/package.json

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

package/src/assets/theme.css

@@ -94,7 +94,7 @@ body {
     --dl-color-chart-brush: #eef1ff; /* not in use */
 
     --dl-date-picker-shadow: 0px 3px 6px #101e7326; /* not in use */
-    --dl-date-picker-selected-strip: #0076CE; /* base color replace to --dell-blue-500: #0076CE */
+    --dl-date-picker-selected-strip: #ebf4fb; /* replace to --dell-blue-100: #ebf4fb */
     --dl-date-picker-selected-date: #8fa0ff; /* not in use in OA, maybe in use in other repos*/
 
     /* DlJsonEditor based on atom one themes */

package/src/components/compound/DlJsonEditor/DlJsonEditor.vue

@@ -1,8 +1,5 @@
 <template>
-    <div
-        ref="jsonEditorRef"
-        class="json-editor"
-    />
+    <div ref="jsonEditorRef" class="json-editor" />
 </template>
 
 <script lang="ts">
@@ -58,7 +55,14 @@ export default defineComponent({
             default: Mode.text
         }
     },
-    emits: ['update:model-value', 'align-text', 'change', 'content-error', 'focus', 'blur'],
+    emits: [
+        'update:model-value',
+        'align-text',
+        'change',
+        'content-error',
+        'focus',
+        'blur'
+    ],
     setup(props, { emit }) {
         const { modelValue, indentation, readonly, mode } = toRefs(props)
 
@@ -228,6 +232,9 @@ export default defineComponent({
     --jse-panel-background: var(--dl-json-editor-panel-background);
     --jse-panel-border: var(--dl-color-separator);
     --jse-main-border: 1px solid var(--dl-color-separator);
+    --jse-error-color: var(--dell-red-500, #af0000);
+    --jse-message-error-background: var(--jse-error-color);
+    --jse-message-error-color: var(--dell-white, #fff);
 
     .jse-error {
         display: none !important;

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

@@ -90,25 +90,12 @@ 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,
-            activeColor
-        } = toRefs(props)
+        const { styles, color, size, icon, svg, inline, svgSource, tooltip } =
+            toRefs(props)
 
         const svgIcon = ref(null)
         const isDestroyed = ref(false)
@@ -142,9 +129,6 @@ export default defineComponent({
                               : color.value,
                           'dell-gray-800'
                       )
-                    : 'inherit',
-                '--dl-icon-color-active': activeColor.value
-                    ? getColor(activeColor.value, 'dell-gray-800')
                     : 'inherit'
             }
         })
@@ -266,9 +250,5 @@ 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/DlTypography/DlTypography.vue

@@ -34,10 +34,6 @@ export default defineComponent({
         },
         bold: Boolean,
         color: {
-            type: String,
-            default: 'dell-gray-800'
-        },
-        activeColor: {
             type: String,
             default: null
         }
@@ -50,12 +46,13 @@ export default defineComponent({
     computed: {
         styles(): Record<string, string | number> {
             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,
-                '--dl-typography-color-active': this.activeColor
-                    ? getColor(this.activeColor as string, 'dell-gray-800')
-                    : 'inherit'
+                '--dl-typography-color': this.color
+                    ? getColor(this.color as string, 'dell-gray-800')
+                    : 'inherit',
+                '--dl-typography-text-transform': this.letterClass
+                    ? null
+                    : this.transform,
+                '--dl-typography-font-weight': this.bold ? 500 : 400
             }
 
             if (this.size && !sizes.includes(this.size)) {
@@ -98,6 +95,9 @@ export default defineComponent({
 .dl-typography {
     margin: 0;
     padding: 0;
+    color: var(--dl-typography-color);
+    text-transform: var(--dl-typography-text-transform);
+    font-weight: var(--dl-typography-font-weight);
 
     // important needed below for sizing of h tags.. quasar conflict
     // to deal with quasar conflicts.