Add color prop to VaDivider component and bind it to CSS border color

[Yasir761]

Close #3153

…ers to specify the color of the divider. The color prop is then bound to the CSS border-color property using Vue's v-bind in CSS feature. This enables users to dynamically change the divider color using the color prop.

Description

Markup:

Details

// Your code

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

[Yasir761]

Please let me know, if there is chance to make a change.

[rustem-nasyrov]

Hello, @Yasir761! Thank you for your pull request. Here is a few suggestions.

• Redundant color prop.
• Let's create a common CSS variable for the border color and use it for horizontal and vertical views. Tip: you can create CSS variable in the _variables.scss file at the va-divider directory.

[m0ksem]

• Redundant color prop.

  • Let's create a common CSS variable for the border color and use it for horizontal and vertical views. Tip: you can create CSS variable in the _variables.scss file at the va-divider directory.

@rustem-nasyrov, I would prefer to have color prop, the same way we have with any other component (like button, input, swtich etc). Kind of intuitive to have this prop despite it can be done easily with css variables. It is more about DX.

Compare this:

<va-divier :color="isDark ? 'text-light' : 'text-dark'" />
<va-divider :style="`--va-divider-color: ${getColor(isDark ? 'text-light' : 'text-dark')}`" />

[rustem-nasyrov]

Keep it up! Just need to do a little fix and issue will be solved! :)