search

RocketCommunicationsInc / astro

Astro UXDS is a collection of guidelines, patterns and components for designing space-based user interface applications.
https://astrouxds.com
Other
108 stars 25 forks source link

CSS Root Vars #630

Closed JennyAuer closed 2 years ago

JennyAuer commented 2 years ago

Hi there! We are using Astro v6.9.0 on one project and v6.12.0 on another. The root CSS global vars work with the older version, but not the newer one. It seems as if the color variable names (for example, --colorPrimaryLighten4) got changed in the root CSS file, but not updated on your website. This also broke the colors of the projects we have using the new Astro version, as we were using the global references for these colors and they no longer work. Would we be able to get a fix for this please?

Thanks!

markacianfrani commented 2 years ago

Absolutely!

Is the issue that you're trying to upgrade from 6.9 -> 6.12 and your styles are breaking? Are you actually using colorPrimaryLighten4 (or similar CSS custom properties with the camelcase naming convention)? Would it be possible to provide us with the CSS custom properties that you are using? If thats a big lift, no worries. I just want to make sure that I understand correctly.

We're actively working on this as part of design token effort and have been renaming some things under the hood. It looks like we may have accidentally broken something.

JennyAuer commented 2 years ago

Sure thing! So on this page here https://www.astrouxds.com/design-guidelines/color/ it lists the variable names for each color so you can use the global variable in your code rather than using the specific hex code each time. For example, under the secondary colors, the one with the "base" step has the variable reference name as --colorSecondary, which used to be located in the old root CSS file that was found in node modules -> @astrouxds\astro-web-components -> dist -> astro-web-components -> astro-web-components.css, but now that same color's variable name changed from --colorSecondary to --color-palette-brightblue-500 within the node modules' astro css file. This means when we reference it using the old name on your website, it won't render because that variable name is no longer used for that color. So it would be super helpful to update the webpage to show the new names that the CSS file uses, if possible!

As a fix today we've just been digging through the CSS file in the node modules but its quite time-consuming since it's quite a large file.

I hope that clarifies it a bit; thanks so much!

markacianfrani commented 2 years ago

thanks so much! Is this a relatively new project or were you originally using the old v5.0 lit version of our components? I'm curious because v6.9.0 doesn't have any --colorSecondary custom prop .

In 6.0 we removed our css library in favor of full shadow-domed web components. Unfortunately, we didn't do a great job at communicating that and our docs on astrouxds are still referencing v5 vars. We also didn't anticipate that people would be using are 6.0 custom properties because they weren't documented.

The good news is that we've completely redesigned our vars as design tokens in 7.0 and are working hard on delivering a more intuitive way to use them. But that won't help you now, so I'm wondering what we can do today to support you. If we can pinpoint the issue to upgrading from 6.9 -> 6.12, then we can track down what might've changed there. But if the issue is --colorSecondary isn't defined, I'm curious where that would be coming from since it's been removed for awhile now.

In the meantime, does this help you at all?

these are all the core global vars currently in 6.12.

JennyAuer commented 2 years ago

I think some of us had node modules from the older version, which is why it was working on some machines and not on others. But yes, those links help; thank you so much!