fix : badgeribbon with preset color

[boulix3]

🤔 This is a ...

• New feature
• [ x ] Bug fix
• Site / documentation update
• [ x ] Demo update
• Component style update
• Bundle size optimization
• Performance optimization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

When using BadgeRibbon with a preset color, text color is the same as background color.

💡 Background and solution

Here is a snapshot of the bug

<BadgeRibbon Text="Pushes open the window" Color="orange">
    <Card Bordered>And raises the spyglass.</Card>
</BadgeRibbon>
<br />
<BadgeRibbon Text="Pushes open the window" Color="#832">
    <Card Bordered>And raises the spyglass.</Card>
</BadgeRibbon>

Solution : Fix less file.

📝 Changelog

Updated ribbon less file.
Added two ribbon examples with color set (preset and custom)

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Changelog is provided or not needed

[ElderJames]

Thank you for contribution @boulix3 .

Can you reproduce it in ant design react? We will not directly modify the less file. If there is a style issues, we will first go to ant design to submit the fixes.

[boulix3]

Ok, I didn't know the less files came from that repository.

I cannot reproduce in react.
Here is an example :
https://stackblitz.com/edit/react-4uhci9?file=index.js

It seems we are missing a span in the blazor version.
react version :

<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-orange"><span class="ant-ribbon-text">Pushes open the window</span><div class="ant-ribbon-corner"></div></div>

blazor version :

<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-orange">Pushes open the window<div class="ant-ribbon-corner"></div></div>

I'll try to implement this.

[ElderJames]

Ok thanks!

[ElderJames]

cc @Epictek

[boulix3]

The less file is now unmodified.
I updated the razor file. The generated html is now the same as in the react version.

[ElderJames]

Thank you @boulix3 , please feel free to fix the test.

[codecov-io]

Codecov Report

Merging #791 (3b05c7d) into master (f01ee92) will not change coverage.
The diff coverage is 100.00%.

@@          Coverage Diff           @@
##           master    #791   +/-   ##
======================================
  Coverage    3.67%   3.67%           
======================================
  Files         395     395           
  Lines       17481   17481           
======================================
  Hits          642     642           
  Misses      16839   16839           

Impacted Files	Coverage Δ
components/badge/BadgeRibbon.razor	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f01ee92...3b05c7d. Read the comment docs.

[ElderJames]

Thank you very much!