fix(epicmaxco#3866): toast text color

m0ksem · Sep 13, 2023 · 7b3fef3 · 7b3fef3
1 parent ac344b1
commit 7b3fef3
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 33 deletions.
diff --git a/packages/ui/src/components/va-badge/VaBadge.vue b/packages/ui/src/components/va-badge/VaBadge.vue
@@ -65,8 +65,8 @@ export default defineComponent({
     }))
 
     const { getColor } = useColors()
-    const { textColorComputed } = useTextColor()
     const colorComputed = computed(() => getColor(props.color))
+    const { textColorComputed } = useTextColor(colorComputed)
 
     const positionStylesComputed = useFloatingPosition(props, isFloating)
 

diff --git a/packages/ui/src/components/va-card/VaCard.vue b/packages/ui/src/components/va-card/VaCard.vue
@@ -53,7 +53,7 @@ export default defineComponent({
   setup (props) {
     const { getColor } = useColors()
     const { isLinkTag, tagComputed, hrefComputed } = useRouterLink(props)
-    const { textColorComputed } = useTextColor()
+    const { textColorComputed } = useTextColor(computed(() => getColor(props.color)))
 
     const stripeColorComputed = computed(() => getColor(props.stripeColor))
 

diff --git a/packages/ui/src/components/va-checkbox/VaCheckbox.vue b/packages/ui/src/components/va-checkbox/VaCheckbox.vue
@@ -108,7 +108,7 @@ export default defineComponent({
     } = useSelectable(props, emit, elements)
     const { getColor } = useColors()
     const { hasKeyboardFocus, keyboardFocusListeners } = useKeyboardOnlyFocus()
-    const { textColorComputed } = useTextColor()
+    const { textColorComputed } = useTextColor(computed(() => getColor(props.color)))
 
     const isActive = computed(() => isChecked.value || isIndeterminate.value)
 

diff --git a/packages/ui/src/components/va-collapse/VaCollapse.vue b/packages/ui/src/components/va-collapse/VaCollapse.vue
@@ -15,7 +15,6 @@
           attributes: headerAttributes,
           attrs: headerAttributes,
           iconAttrs: {
-            color: iconColorComputed,
             class: [
               'va-collapse__expand-icon',
               computedModelValue ? 'a-collapse__expand-icon--expanded' : 'a-collapse__expand-icon--collapsed'
@@ -33,7 +32,6 @@
             v-if="icon"
             class="va-collapse__header__icon"
             :name="icon"
-            :color="textColorComputed"
           />
           <slot
             name="header-content"
@@ -48,7 +46,6 @@
               class="va-collapse__expand-icon"
               name="va-arrow-down"
               :class="computedModelValue ? 'va-collapse__expand-icon--expanded' : 'va-collapse__expand-icon--collapsed'"
-              :color="iconColorComputed"
             />
           </slot>
         </div>
@@ -126,11 +123,9 @@ export default defineComponent({
 
     const { valueComputed } = useStateful(props, emit, 'modelValue')
 
-    const { getColor, setHSLAColor } = useColors()
+    const { getColor, getTextColor, setHSLAColor } = useColors()
     const { accordionProps, valueProxy: computedModelValue = valueComputed } = useAccordionItem()
 
-    const { textColorComputed } = useTextColor()
-
     const bodyHeight = ref()
     useResizeObserver([body], () => {
       bodyHeight.value = body.value?.clientHeight ?? 0
@@ -150,11 +145,11 @@ export default defineComponent({
 
       return props.color && props.colorAll
         ? setHSLAColor(getColor(props.color), { a: 0.07 })
-        : ''
+        : undefined
     })
 
     const headerBackground = computed(() => {
-      return props.color ? getColor(props.color) : ''
+      return props.color ? getColor(props.color) : undefined
     })
 
     const uniqueId = computed(generateUniqueId)
@@ -181,12 +176,6 @@ export default defineComponent({
       'colored-header': Boolean(headerBackground.value),
     }))
 
-    const iconColorComputed = computed(() => {
-      if (!props.color || isColorTransparent(getColor(props.color))) { return props.iconColor }
-
-      return textColorComputed.value
-    })
-
     const toggle = () => {
       if (props.disabled) { return }
       computedModelValue.value = !computedModelValue.value
@@ -195,7 +184,6 @@ export default defineComponent({
     return {
       body,
       height,
-      iconColorComputed,
 
       toggle,
       computedModelValue,
@@ -205,11 +193,10 @@ export default defineComponent({
       panelIdComputed,
       tabIndexComputed,
 
-      textColorComputed,
       computedClasses,
 
       headerStyle: computed(() => ({
-        color: textColorComputed.value,
+        color: headerBackground.value ? getColor(getTextColor(headerBackground.value)) : 'currentColor',
         backgroundColor: headerBackground.value,
       })),
 
@@ -219,6 +206,7 @@ export default defineComponent({
           height: `${height.value}px`,
           transitionDuration: getTransition(),
           background: computedModelValue.value ? contentBackground.value : '',
+          color: contentBackground.value ? getColor(getTextColor(contentBackground.value)) : 'currentColor',
         }
       }),
     }

diff --git a/packages/ui/src/components/va-navbar/VaNavbar.vue b/packages/ui/src/components/va-navbar/VaNavbar.vue
@@ -57,8 +57,8 @@ export default defineComponent({
     const { fixedBarStyleComputed } = useFixedBar(props, isScrolledDown)
 
     const { getColor, shiftHSLAColor } = useColors()
-    const { textColorComputed } = useTextColor()
     const color = computed(() => getColor(props.color))
+    const { textColorComputed } = useTextColor(color)
 
     const shapeStyleComputed = computed(() => ({
       borderTopColor: shiftHSLAColor(color.value, { h: -1, s: -11, l: 10 }),

diff --git a/packages/ui/src/components/va-popover/VaPopover.vue b/packages/ui/src/components/va-popover/VaPopover.vue
@@ -70,7 +70,7 @@ export default defineComponent({
 
     const { getColor, getBoxShadowColor } = useColors()
 
-    const { textColorComputed } = useTextColor()
+    const { textColorComputed } = useTextColor(computed(() => getColor(props.color)))
     const showIconComputed = computed(() => props.icon || slots.icon)
     const showTitleComputed = computed(() => props.title || slots.title)
     const showBodyComputed = computed(() => props.message || slots.body)

diff --git a/packages/ui/src/components/va-progress-bar/VaProgressBar.vue b/packages/ui/src/components/va-progress-bar/VaProgressBar.vue
@@ -70,8 +70,8 @@ export default defineComponent({
 
   setup (props) {
     const { getColor, getHoverColor } = useColors()
-    const { textColorComputed } = useTextColor()
     const colorComputed = computed(() => getColor(props.color))
+    const { textColorComputed } = useTextColor(colorComputed)
 
     const isTextSize = computed(() => typeof props.size === 'string' && ['small', 'medium', 'large'].includes(props.size))
 

diff --git a/packages/ui/src/components/va-sidebar/VaSidebar.vue b/packages/ui/src/components/va-sidebar/VaSidebar.vue
@@ -101,10 +101,11 @@ export default defineComponent({
       })
     })
 
-    const { textColorComputed } = useTextColor()
+    const backgroundColorComputed = computed(() => getColor(props.color))
+    const { textColorComputed } = useTextColor(backgroundColorComputed)
 
     const computedStyle = computed(() => {
-      const backgroundColor = getColor(props.color)
+      const backgroundColor = getColor(backgroundColorComputed.value)
 
       const color = textColorComputed.value
 

diff --git a/packages/ui/src/components/va-toast/VaToast.vue b/packages/ui/src/components/va-toast/VaToast.vue
@@ -31,7 +31,7 @@
           role="button"
           :aria-label="tp($props.ariaCloseLabel)"
           tabindex="0"
-          size="small"
+          size="1rem"
           :name="$props.icon"
           @click.stop="onToastClose"
           @keydown.enter.stop="onToastClose"
@@ -93,7 +93,7 @@ export default defineComponent({
 
     const { getColor } = useColors()
 
-    const { textColorComputed } = useTextColor()
+    const { textColorComputed } = useTextColor(computed(() => getColor(props.color)))
 
     const visible = ref(false)
 
@@ -195,7 +195,7 @@ export default defineComponent({
   display: flex;
   align-items: center;
   border-radius: var(--va-toast-border-radius);
-  border: 1px solid var(--va-toast-border-color);
+  border: var(--va-toast-border);
   background-color: var(--va-toast-background-color);
   box-shadow: var(--va-toast-box-shadow);
   transition: var(--va-toast-transition);

diff --git a/packages/ui/src/components/va-toast/_variables.scss b/packages/ui/src/components/va-toast/_variables.scss
@@ -4,9 +4,9 @@
   --va-toast-width: 330px;
   --va-toast-padding: 14px 26px 14px 13px;
   --va-toast-border-radius: 8px;
-  --va-toast-border: 1px solid var(--va-background-secondary);
+  --va-toast-border-color: transparent;
+  --va-toast-border: 1px solid var(--va-toast-border-color);
   --va-toast-background-color: var(--va-background-secondary);
-  --va-toast-border-color: var(--va-background-secondary);
   --va-toast-box-shadow: 0 2px 12px 0 var(--va-shadow);
   --va-toast-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s;
   --va-toast-z-index: calc(var(--va-z-index-teleport-overlay) + 100);
@@ -35,7 +35,4 @@
   --va-toast-close-icon-top: 18px;
   --va-toast-close-icon-right: 15px;
   --va-toast-close-icon-font-size: 1rem;
-
-  /* Hover */
-  --va-toast-hover-color: #909399;
 }