useTextColor hook

[m0ksem]

Let's have hook, that requires one prop:

• textColor - component's text color

Returns

textColorComputed - returns textColor prop (if passed) or automatically calculated color

Must be used across components like VaButton, VaChip, VaCheckbox, VaSwitch, VaCollapse etc.

const { textColorComputed }  = useTextColor(props.background)
// or
const { textColorComputed }  = useTextColor(props.color) // component color

Text Color must be taken from getCurrentInstance

export const useTextColor = (textBackground: string | Ref<string>) => {
   const { props } = getCurrentInstance()!

  const textColor = computed(() => props.textColor || getTextColor(unref(textBackground)))
   
   return { textColor }
}

[Sadnessa]

Hello. Can I try this task, please?

[aluarius]

See also #1295

[m0ksem]

Take a notice that outlined VaAlert has color from color prop by default, but it must change to text-color if it provided.

https://vuestic.dev/en/ui-elements/alert#different-styles
In this example we should be able to pass textColor to outlined VaAlert, so it can have yellow outline, but black text.

[Derranion]

Should set text color for VaAlert when border prop is active.

[Derranion]

Take a notice that outlined VaAlert has color from color prop by default, but it must change to text-color if it provided.

https://vuestic.dev/en/ui-elements/alert#different-styles In this example we should be able to pass textColor to outlined VaAlert, so it can have yellow outline, but black text.

Hey @m0ksem
This looks like another separate task though - to add textColor prop for VaAlert and related docs.
Because unlike components that were listed in the initial task description VaAlert does not have this prop.

[m0ksem]

Take a notice that outlined VaAlert has color from color prop by default, but it must change to text-color if it provided.

https://vuestic.dev/en/ui-elements/alert#different-styles In this example we should be able to pass textColor to outlined VaAlert, so it can have yellow outline, but black text.

Hey @m0ksem
This looks like another separate task though - to add textColor prop for VaAlert and related docs.
Because unlike components that were listed in the initial description it does not have this prop.

Alert doesn't have the prop, but I have to.

[m0ksem]

I'm thinking how can we deal with components like date picker. It has a transparent background, so we are not able to calculate text color automatically.

As a workaround, we can go through all component parent elements until we find element with background style set. Handle reactivity with MutationObserver. Not sure how it will impact performance.

[Derranion]

We decided to create separate tasks to add textColor prop to VaAlert and to improve automatically selected color algorithm.

By the way @m0ksem here are some examples of parents traversing algorithms to get the real background-color, could be useful:
https://stackoverflow.com/questions/12576084/getting-the-real-background-color-of-an-element

That's why @Sadnessa please feel free to ignore these comments and continue with the initial task, thanks (:

[m0ksem]

Yes. Let's have useTextColor hook, we can improve it later with this PR #1736.