Close button: Adding CSS var

[louismaximepiton]

Related issues

#1196.

Description

Adding CSS var to close buttons.

Motivation & Context

Bootstrap probably won't do it on their side since they use filter for their variants. Moreover, we'll need them later to introduce more variants such as the outlined one.

Types of change

New feature (non-breaking change which adds functionality)

Live previews

• https://deploy-preview-1531--twbs-bootstrap.netlify.app/5.2/components/close

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly

Development

• Should match specs (eg. either the Web UI Kit or any pattern from the WAI — or both…)
• Docs added:
  • including the "Sass" part using scss-docs shortcode
  • in /about/overview/#custom-components if it is a new Orange custom component
  • in /getting-started/introduction/#components if it is a new Orange custom component that requires JavaScript (and Popper)
  • in /customize/overview#csps-and-embedded-svgs if it is a new Orange custom component that includes embedded SVGs in our CSS
  • in /forms/validation/?#supported-elements if it is a new Orange custom component that is a form control
  • in /forms/overview/ if it is a new Orange custom component that is a form control
• Check (and fix) RTL version
• Run linters
• Run compilers
• Tests added for JS-side
• Run tests
• Manually run BrowserStack test
• Manually run Percy test
• Cross-browser test:
  • Chrome
  • Firefox (including ESR)
  • Edge
  • Safari
  • iOS Safari
  • Chrome & Firefox on Android
• Responsive tests: desktop and small screens
• Clean up the branch using rebase -i
• Commited with feat(…): … message
• Mention it in Migration Guide (if back-from-v4): renamed variables, changes in markup requirement, etc.

Reviews

• Code review
• A11y review
• Design review

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	7205557
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/632053278c4b9d0008a7a02d
😎 Deploy Preview	https://deploy-preview-1531--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	8c53bdf
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/63465e0d6ec2920008bbd4d5
😎 Deploy Preview	https://deploy-preview-1531--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[julien-deramond]

LGTM! 🚀