CSS Variables for all components

[louismaximepiton]

Process

• Choose one use case in this list, please write your pseudo next to the point you take
• Create a branch and a PR for this use case
• In this list, add at the end of the corresponding line a link to the PR
• When the PR is merged, check the use case in the list

Note: Please try to avoid creating a PR that handles several use cases at the same time; it will be easier to track the use cases and easier for the reviewers with small PRs.

When all the checkboxes are checked, this issue can be closed.

Proposal

We need to improve our components and our modifications to use CSS variables such as Bootstrap. However, we could trim the unused variables to reduce our package size. Here is the issue tracking what are the remaining components :

• Accordions
  • Update our Boosted mods
  • Trimmed for Boosted
• Alerts
  • Update our Boosted mods (Need to discuss a bit about it + See Fixes for alerts #1165) (See Alert: Adding CSS var #1424)
  • Trimmed for Boosted
• Back-to-top (See Back to top : Add CSS variables #1258)
• Badge
  • Update our Boosted mods
  • Trimmed for Boosted
• Breadcrumb
  • Update our Boosted mods (See Breadcrumb : add CSS var #1252)
  • Trimmed for Boosted
• Button-group (Waiting for Bootstrap) -> Will probably not happen
  • Update our Boosted mods
  • Trimmed for Boosted
• Buttons
  • Update our Boosted mods (See Buttons: Adding CSS var #1426)
  • Trimmed for Boosted
• Cards
  • Update our Boosted mods (See Cards : Adding CSS var #1253)
  • Trimmed for Boosted
• Carousel (Waiting for Bootstrap)
  • Update our Boosted mods
  • Trimmed for Boosted
• Close-button (Waiting for Bootstrap) Not waiting for Bootstrap since they're based on filter
  • Update our Boosted mods (See Close button: Adding CSS var #1531)
  • Trimmed for Boosted
• Dropdown
  • Update our Boosted mods (See feat(dropdowns): Add CSS vars for $dropdown #1279)
  • Trimmed for Boosted (See Dropdown: Adding and trim CSS var #1423)
• Footer (See Footer css var #1239)
• Grid
  • Update our Boosted mods
  • Trimmed for Boosted
• List groups
  • Update our Boosted mods
  • Trimmed for Boosted (See List group: Trim unused CSS var #1417)
• Modals
  • Update our Boosted mods
  • Trimmed for Boosted (See Modal: Remove unused CSS variables #1418)
• Nav
  • Update our Boosted mods (See Navs: Adding CSS var #1427)
  • Trimmed for Boosted
• Navbar
  • Update our Boosted mods (See Navbar: Add CSS var #1422)
  • Trimmed for Boosted
• Offcanvas
  • Update our Boosted mods (feat(offcanvas): Add CSS vars for %offcanvas-css-vars + offcanvas-backdrop #1271)
  • Trimmed for Boosted
• Orange-navbar (See Navbar: Add CSS var #1422)
• Pagination
  • Update our Boosted mods (See feat(pagination): Add CSS vars for $pagination #1268)
  • Trimmed for Boosted
• Placeholders (Waiting for Bootstrap)
  • Update our Boosted mods
  • Trimmed for Boosted
• Popover
  • Update our Boosted mods
  • Trimmed for Boosted
• Progress
  • Update our Boosted mods (See Progress : Add CSS var #1254)
  • Trimmed for Boosted
• Spinners
  • Update our Boosted mods
  • Trimmed for Boosted
• Stepped process (See CSS var: stepped process #1281)
• Sticker (via feat(stickers): Add CSS vars for $sticker- #1251)
• Title bars (See Title bars : Add CSS var #1259)
• Toasts
  • Update our Boosted mods
  • Trimmed for Boosted
• Tooltip
  • Update our Boosted mods
  • Trimmed for Boosted

Motivation and context

Be closer to Bootstrap and add more flexibility to our framework.

[julien-deramond]

I'll try to update the list when things will come back from Bootstrap.