Hashed CSS variables & dependency on SASS

[cloudscape-design]

Hashed CSS variables & dependency on SASS

[SilentImp]

@anthumchris if I understand correctly the whole idea behind the hash in variables names is to restrict usage of variables that are not "officially" exposed.

Which is questionable approach.
Maybe owners can share why exactly it was done like that?

[rubencarvalho]

Hello Chris,
We currently don’t allow the SASS dependency to be removed neither the randomising of hashes.
We’ve done this in order to guarantee backward compatibility.
To accept this as a feature request, we need to gather feedback about possible use cases to help us better understand and prioritise it.

[just-boris]

Closing due to inactivity. Feel free to reopen if there are additional comments

[anthumchris]

If removing the SASS dependency isn't possible, can we simply remove the randomized hash strings from the generated CSS?

[rubencarvalho]

Hello Chris,

thank you for reaching out!

To better understand your use case, could you please share why you'd want to directly access the CSS variables?

If it is for theming reasons, please refer to the Theming documentation.

However, if your goal is to use our design tokens, these are available from a separate package called design-tokens and are intended to be used together with Cloudscape components. All of our tokens are available as SASS variables (e.g. $color-text-body-secondary) but also as JavaScript variables (e.g. colorTextBodySecondary).

Thanks!
RC

[anthumchris]

@rubencarvalho Thanks for your fast response. Could we kindly keep this thread focused on the technicality of the 2 aforementioned questions shown below? Let's avoid discussing or focusing on use cases for now, if you don't mind.

1. Can we remove the SASS dependency to provide developers with direct, native usage of modern CSS variables?
2. If removing the SASS dependency isn't possible, can we simply remove the randomized hash strings from the generated CSS?

[arunim2405]

Is it reasonable to ask for a config setting which lets us turn on or off hashed variables? If we strictly do not want to follow the Cloudscape Design guidelines but still would like to use the component library?
A very trivial usecase-
#408

[just-boris]

What you are asking (changing a color of a button) is exactly the reason why there are hashes. Internal styles is not our public API, and we change them pretty often. Changing a color this way is not future proof and may lead to unexpected issues when doing a patch version upgrade

For the best development experience, it is better not to override our styles.

[arunim2405]

Understood, thanks for the clarification 😊 @just-boris