@dataloop-ai/components 0.20.211 → 0.20.213

package/package.json

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

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

@@ -18,7 +18,7 @@
             :opened-icon="openedIcon"
             data-test-id="accordion-header"
             :background-color="backgroundColor"
-            :with-background="withBackground"
+            with-background
             @click="handleClick"
         >
             <template #header>
@@ -87,9 +87,8 @@ export default defineComponent({
         separator: { type: Boolean, default: false },
         closedIcon: { type: String, default: 'icon-dl-right-chevron' },
         openedIcon: { type: String, default: 'icon-dl-down-chevron' },
-        backgroundColor: { type: String, default: 'dl-color-fill' },
-        withBackground: { type: Boolean, default: false },
-        iconHoverColor: { type: String, default: 'dl-color-primary' }
+        backgroundColor: { type: String, default: 'dell-blue-100' },
+        withBackground: { type: Boolean, default: false }
     },
     emits: ['update:model-value', 'hide', 'show'],
     data() {

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

@@ -42,6 +42,7 @@ import { DlIcon } from '../../../essential'
 import { defineComponent, ref } from 'vue-demi'
 import { getColor } from '../../../../utils'
 import { useSizeObserver } from '../../../../hooks/use-size-observer'
+import { getDellColorNextShade } from '../../../../utils/getLighterGradient'
 export default defineComponent({
     name: 'AccordionHeader',
     components: {
@@ -54,13 +55,13 @@ export default defineComponent({
         fontSize: { type: String, default: '12px' },
         fontWeight: { type: String, default: '400' },
         title: { type: String, default: null },
-        titleColor: { type: String, default: 'dl-color-medium' },
+        titleColor: { type: String, default: 'dell-gray-800' },
         isOpen: { type: Boolean, default: false },
         rightSide: { type: Boolean, default: false },
         closedIcon: { type: String, default: 'icon-dl-right-chevron' },
         openedIcon: { type: String, default: 'icon-dl-down-chevron' },
-        backgroundColor: { type: String, default: 'dl-color-fill' },
-        withBackground: { type: Boolean, default: false }
+        backgroundColor: { type: String, default: 'dell-blue-100' },
+        withBackground: { type: Boolean, default: true }
     },
     emits: ['click'],
     setup() {
@@ -74,6 +75,33 @@ export default defineComponent({
     },
     computed: {
         accordionHeadStyles(): Record<string, string> {
+            let bgColor = ''
+            let hoverBgColor = ''
+            let activeBgColor = ''
+            if (this.withBackground) {
+                if (this.isOpen) {
+                    bgColor = getColor(this.backgroundColor)
+                    const nextShadeColor = getDellColorNextShade(
+                        this.backgroundColor
+                    )
+                    if (nextShadeColor) {
+                        hoverBgColor = getColor(nextShadeColor)
+                        activeBgColor = hoverBgColor
+                    } else {
+                        hoverBgColor = bgColor
+                        activeBgColor = bgColor
+                    }
+                } else {
+                    hoverBgColor = getColor(this.backgroundColor)
+                    const nextShadeColor = getDellColorNextShade(
+                        this.backgroundColor
+                    )
+                    activeBgColor = nextShadeColor
+                        ? getColor(nextShadeColor)
+                        : hoverBgColor
+                }
+            }
+
             return {
                 '--dl-title-color': getColor(this.titleColor, 'dell-gray-600'),
                 '--dl-expand-icon-color': `var(--${
@@ -84,18 +112,12 @@ export default defineComponent({
                     : 'row',
                 '--dl-accordion-header-fontsize': this.fontSize,
                 '--dl-accordion-header-fontweight': this.fontWeight,
-                '--dl-accordion-header-background-color':
-                    this.withBackground && !this.isOpen
-                        ? getColor(this.backgroundColor)
-                        : '',
-                '--dl-accordion-header-border-radius':
-                    this.withBackground && !this.isOpen ? '4px' : '0px',
-                '--dl-accordion-header-padding': this.withBackground
-                    ? '4px'
-                    : '12px 16px',
-                '--dl-accordion-header-margin-bottom': this.withBackground
-                    ? '2px'
-                    : '0px'
+                '--dl-accordion-header-background-color': bgColor,
+                '--dl-accordion-header-hover-background-color': hoverBgColor,
+                '--dl-accordion-header-active-background-color': activeBgColor,
+                '--dl-accordion-header-border-radius': '0px',
+                '--dl-accordion-header-padding': '12px 16px',
+                '--dl-accordion-header-margin-bottom': '0px'
             }
         },
         hasSlot(): boolean {
@@ -125,13 +147,24 @@ export default defineComponent({
     flex-direction: var(--dl-accordion-header-flex-direction);
     color: var(--dl-title-color);
     margin-bottom: var(--dl-accordion-header-margin-bottom);
+    background-color: var(--dl-accordion-header-background-color, transparent);
 }
 
 .accordion-header:hover {
-    background-color: var(--dl-accordion-header-background-color, transparent);
+    background-color: var(
+        --dl-accordion-header-hover-background-color,
+        transparent
+    );
     border-radius: var(--dl-accordion-header-border-radius, 0px);
 }
 
+.accordion-header:active {
+    background-color: var(
+        --dl-accordion-header-active-background-color,
+        transparent
+    );
+}
+
 .accordion-title {
     white-space: nowrap;
     overflow: hidden;

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

@@ -55,7 +55,7 @@ export default defineComponent({
                 fontWeight: this.bold ? 500 : 400,
                 '--dl-typography-color-active': this.activeColor
                     ? getColor(this.activeColor as string, 'dell-gray-800')
-                    : null
+                    : 'inherit'
             }
 
             if (this.size && !sizes.includes(this.size)) {

package/src/utils/getLighterGradient.ts

@@ -7,26 +7,45 @@ const allColorNames = {
     ...getRootStyles()
 }
 
+const getDellColorNextShade = (color: string): string | null => {
+    if (!color) {
+        return null
+    }
+    if (!color.startsWith('dell-')) {
+        return color
+    }
+
+    const colorMatch = color.match(/dell-(\w+)-(\d+)/)
+    if (!colorMatch) {
+        return color
+    }
+
+    try {
+        const colorName = colorMatch[1]
+        const colorValue = parseInt(colorMatch[2])
+        const nextColorValue = colorValue + 100
+        const nextColor = `--dell-${colorName}-${nextColorValue}`
+
+        if (nextColor in allColorNames) {
+            return `dell-${colorName}-${nextColorValue}`
+        }
+    } catch (error) {
+        // skip error
+    }
+
+    return color
+}
 const getLighterGradient = (color: string, magnitude = MAGNITUDE) => {
-    if (color.startsWith('dl-') || color.startsWith('dell-')) {
+    if (color.startsWith('dl-')) {
         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
-            }
+    if (color.startsWith('dell-')) {
+        const nextColor = getDellColorNextShade(color)
+        const nextColorName = `--${nextColor}`
+        if (nextColorName && nextColorName in allColorNames) {
+            return allColorNames[nextColorName as keyof typeof allColorNames]
+        } else {
+            color = nextColor
         }
     }
     let newColor =
@@ -52,4 +71,4 @@ const getLighterGradient = (color: string, magnitude = MAGNITUDE) => {
     }
 }
 
-export { getLighterGradient }
+export { getLighterGradient, getDellColorNextShade }