Dynamically removing css variables

[LTiger14]

In the move to a flannel v2 we will need to remove the majority of css variables (custom properties) to simplify our API.

This ticket is to:

• Create an automated script to do the changes
• Remove all of the CSS variables in Storefrontstyles/scss/components

[LTiger14]

For using the script (development)

The script is located in ./scripts and is named remove-css-vars.ts. (you can see it here https://github.com/SAP/cloud-commerce-spartacus-storefront/blob/feature/GH-1914/scripts/remove-css-vars.ts)

In order to use it:

• Go to line 77 you should see extractCssVariables('./projects/storefrontstyles/scss/misc');, replace the string with the path of the folder you want to use it on from the project root (works only for folders)
• To run use: ts-node ./scripts/remove-css-vars.ts

IMPORTANT NOTE Please remove the script before merging to develop.

[LTiger14]

For the reviewer

Make sure the fallbacks are used instead of the variables e.g.

.some-class {
  text-align: var(--cx-text-align, center);
  color: var(--cx-color, var(--cx-g-color-primary));
}

becomes

.some-class {
  text-align: center;
  color: var(--cx-g-color-primary);
}

These should be the only changes.

In addition, please go through the site to make sure the look and feel is still the same. (Including mobile)

[LTiger14]

For QA

Go through the site on Desktop, Tablet and Mobile making sure the style isn't broken.

[KateChuen]

Tested on dev17 (on laptop, using different viewports - did not test on actual tablet/phone -> Will be covered during exploratory testing).

• Did not encounter situation where style is broken.
• Only have some styling improvements in general (created ticket #2835) for it.