feat(playground): pass the variables theming file to StackBlitz

[brandyscarney]

This PR does the following:

• Adds the variables.css file to the angular, javascript (html), react and vue directories.
  • The source code for this file was copied from the starters
• Adds the missing import of display.css to the react, javascript and angular css imports.
• Passes the variables.css file to StackBlitz in a folder called theme
  • This was done to match the directory structure of the starters

Issue found:
When viewing the website in light mode, then opening a StackBlitz (any language) while the system is set to prefer dark mode, it will display the StackBlitz example in dark mode. This is working as intended based on the content in the variable.css file, but it may be unexpected for users since the website is not automatically displayed in dark mode until you toggle the dark theme. Should we change this so it checks what mode the user is in on the website?

Chip is a pretty good example of this: https://ionic-docs-git-fw-1666-ionic1.vercel.app/docs/api/chip

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
ionic-docs	✅ Ready (Inspect)	Visit Preview	Oct 7, 2022 at 7:22PM (UTC)

[averyjohnston]

I verified this is working with the accordion Advanced Expansion Styles playground: https://ionic-docs-git-fw-1666-ionic1.vercel.app/docs/api/accordion#advanced-expansion-styles On main, when opening in Stackblitz, you can't see the primary color when the accordion is opened, but it works on this branch. 👍

As for the Stackblitz checking whether the site is set to light or dark and opening in that instead, that sounds like a similar issue to how Stackblitz always uses the device for ios vs. md mode, rather than what you had the playground set to. I'm leaning keep it as-is for now, and then fix both behaviors at once later so there's consistency with whether Stackblitz mirrors the site or the device.