Update to CF v4

[jimmynotjim]

Updated the project to use the latest version of Capital Framework.

Additions

• Added new color variables from Capital Framework

Removals

• Removed duplicate styles that have already been ported from cf-enhancements

Changes

• Updated the CF modules to version 4.1.0 in package.json.
• Updated all the elements to use the correct class names.

Testing

• run grunt less && grunt scripts.
• run npm start and navigate through the site.

Review

• @Scotchester
• @cfarm
• @contolini

Preview this PR without the whitespace changes

Screenshots

Notes

• There are a few color variable that aren't using colors from our palette. I'm leaving them as is for now because they should really be handled in the cfpb-theme.

Todos

• Remove any duplicate styles between this project and Capital Framework.
• Update the project to use the cfpb-theme module.

Checklist

• [ ] Changes are limited to a single goal (no scope creep)
• [ ] Code can be automatically merged (no conflicts)
• [ ] Code follows the standards laid out in the front end playbook
• [ ] Passes all existing automated tests
• [ ] New functions include new tests
• [ ] New functions are documented (with a description, list of inputs, and expected output)
• [ ] Placeholder code is flagged
• [ ] Visually tested in supported browsers and devices
• [ ] Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)

[Scotchester]

This is not a problem with your PR, but looking at the expandables page, I realize that our :last-child { margin-bottom: 0; } rule has eliminated the bottom spacing in all expandables, which were counting on their last child's bottom margin to be there. I'll file an issue in capital-framework.

[Scotchester]

Got a couple issues on the Tables page:

[jimmynotjim]

Updated with @Scotchester fix for pagination and markup corrections for the tables. I removed the 100% inline widths because I'd like to solve that issue in cf-tables. I don't know if we should hold this up for that or not though.

[jimmynotjim]

It's going to get messy dealing with ongoing changes to the less files with this project on v3. Can we merge this?

[Scotchester]

Testing this again locally.

I removed the 100% inline widths because I'd like to solve that issue in cf-tables.

Are you proposing we set all table widths to 100% by default? I'm not sure we want to do that.

But anyway, a more efficient way to do it in this project would be to add a style for it in the project's stylesheets. I'll commit that, along with a fix for the pagination style to correctly show how it would look on a small screen.

We should also decide whether the expandable bottom padding issue should be a blocker to moving forward with this. As soon as we publish, those examples will look broken.

[jimmynotjim]

@Scotchester agreed that the best option would be setting them in the main stylesheet of this project. As far as the expandables, yes, we should fix that first. I can do that after I make the hero updates today.

[Scotchester]

Whoops, pushed that commit to my fork yesterday afternoon. Pushed it here now.

[jimmynotjim]

Expandables bug is being addressed at https://github.com/cfpb/AtomicComponent/pull/4 and https://github.com/cfpb/capital-framework/pull/471

[jimmynotjim]

@Scotchester I think I've addressed everything we discovered in this process. Hopefully we can merge this and keep moving on other improvements.

[Scotchester]

:+1: