From 7b3fef3b83edcdb2ee0016ef148ed94d8d24d5b5 Mon Sep 17 00:00:00 2001 From: Maksim Nedoshev Date: Thu, 14 Sep 2023 01:48:35 +0300 Subject: [PATCH] fix(#3866): toast text color --- .../ui/src/components/va-badge/VaBadge.vue | 2 +- packages/ui/src/components/va-card/VaCard.vue | 2 +- .../src/components/va-checkbox/VaCheckbox.vue | 2 +- .../src/components/va-collapse/VaCollapse.vue | 22 +++++-------------- .../ui/src/components/va-navbar/VaNavbar.vue | 2 +- .../src/components/va-popover/VaPopover.vue | 2 +- .../va-progress-bar/VaProgressBar.vue | 2 +- .../src/components/va-sidebar/VaSidebar.vue | 5 +++-- .../ui/src/components/va-toast/VaToast.vue | 6 ++--- .../src/components/va-toast/_variables.scss | 7 ++---- 10 files changed, 19 insertions(+), 33 deletions(-) diff --git a/packages/ui/src/components/va-badge/VaBadge.vue b/packages/ui/src/components/va-badge/VaBadge.vue index b0de3bef3a..d68e113181 100644 --- 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 index c6094332ad..3ab35141e9 100644 --- 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 index 68379e797e..99ca8d887e 100644 --- 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 index 017c2bcc5b..072241842f 100644 --- 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" /> @@ -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 index cae5acb833..4adff23613 100644 --- 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 index efa87a9888..314f664264 100644 --- 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 index 2e6c1d4dd5..a2a799e1b6 100644 --- 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 index 2a8ff67cce..c48713de86 100644 --- 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 index ed24ba07ae..fbf1e71f71 100644 --- 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 index e38556d7dd..d0e62236f5 100644 --- 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; }