Tracking: CSS Variables

[mdo]

Putting together this tracking issue to set up a checklist of components that we should migrate to using CSS variables.

Globals

• Body font, color, and background
• Theme colors
• Border
• Accent backgrounds
• Spacing

Content

• Typography
• Tables
• Figures

Forms

• Inputs
• Selects
• Checks, radios, and switches
• Range
• Input group
• Floating labels
• Layout
• Validation

Components

• Accordion
  • Slated for v5.2.0
  • Convert accordion to CSS variables #35861
• Alerts
  • Added in v5.2.0
  • Convert alerts to CSS variables #35401
• Badges
  • Added in v5.2.0
  • Convert badges to CSS variables #35402
• Breadcrumb
  • Added in v5.2.0 (originally slated for v5.3.0)
  • Convert breadcrumbs to CSS variables #35403
• Buttons
  • Added in v5.2.0
  • Convert buttons to CSS variables #34600
• Cards
  • Slated for v5.2.0
  • Coming in Convert cards to CSS vars #36059
  • Early spike in Add CSS color variables to Card component #35097 by @tagliala
• Dropdowns
  • Added in v5.2.0 (originally slated for v5.3.0)
  • Convert dropdowns to CSS variables #35409
• List group
  • v5.2.0
  • Convert list group to CSS variables #35862
• Modal
  • Slated for v5.2.0
  • Convert modals to CSS variables #36060
• Navs & tabs
  • Slated for v5.2.0
  • Convert navs to CSS variables #36061
• Navbar
  • Added in v5.2.0
  • Convert navbar to CSS variables #34443
• Offcanvas
  • Added in v5.2.0 design refresh, plus responsive offcanvas classes #35736
• Pagination
  • Added in v5.2.0
  • Previous attempt in WIP: Adding CSS variables to Pagination #31685
  • Convert pagination component to CSS variables #35399
• Placeholders
  • Not yet started, but not all that helpful? Likely skipping for now.
• Popovers and Tooltips
  • Currently in progress
  • Slated for v5.2.0
  • Convert tooltips and popovers to CSS vars #34622
• Progress
  • Added in v5.2.0
  • Convert progress bars to CSS variables #35962
• Spinners
  • Added in v5.2.0
  • Convert spinners to CSS variables #35960
• Toasts
  • Added in v5.2.0
  • Convert toasts to CSS variables #35961

Utilities

• Background and color utilities
  • Added in v5.1.0
  • Updated utility API (css-vars utils and new bg/color utils), plus new root CSS variables #34100
• Border utilities
  • Added in v5.2.0
  • Convert border utilities to CSS variables #35428
• Spacing

Helpers

• Colored links
• Ratio
• Stretched link
• Vertical rule

---

• V5 Utilities : Add Border Opacity #33320: Update border-color utils to match background/text changes like in Updated utility API (css-vars utils and new bg/color utils), plus new root CSS variables #34100
• Extend $component-active-bg/$component-active-color classes #34983: See about adding new global variables that get used unless there’s a component variable present
• Consider changing the logic of CSS variables #35783: Improving CSS variables logic

[ffoodd]

Simple sidenote after buttons' PR: the stylelint rule regarding empty line before custom properties should probably be disabled globally, as we'll almost always have a scss-docs comment before.

[julien-deramond]

Aren't carousels and close buttons missing in this list?