Clarity: Import clarity sass variables to reference in angular component sass files

[rjmccluskey]

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

Import @clr/ui/src/utils/variables.clarity.scss and @clr/ui/src/color/utils/colors.clarity.scss files without needing to import other dependent sass files.

I want to import these files so that I can reference various sass variables directly in my styles in order to keep styles in line with clarity. For example, I want to use the variables for different colors, border radius, etc.

Actual behavior

If the above files are imported alone there are errors because of various missing dependencies that can be found in @clr/ui/src/utils/dependencies.clarity.scss. One way around this is to instead import dependencies.clarity, however a lot of extra stuff is imported this way. Not only that but some of the clarity styling gets messed up.

Ideally it would be nice to be able to just import the variables alone.

Maybe there is a better way to do this so please let me know if what I am doing isn't the best practice.

Reproduction of behavior

https://github.com/rjmccluskey/clarity-sass-import-example

Environment details

(The example repo above was created from the clarity seed repo)

• Angular version: 5.0.0

• Clarity version: 0.11.0

• OS and version: macOS 10.13.3

• Browser: At least Chrome but probably all of them

[hippee-lee]

Hi @rjmccluskey

Sorry for the trouble. I organized the scss to support theming and that organization makes it unclear how to expose the Clarity SCSS variables directly in an app.

Minimal imports needed to expose Clarity $vars

/* Minimal imports to expose clarity variables */
@import "../node_modules/@clr/ui/src/color/utils/colors.clarity";
@import "../node_modules/@clr/ui/src/color/variables.color";
@import "../node_modules/@clr/ui/src/utils/variables.global";
@import "../node_modules/@clr/ui/src/typography/variables.typography";

I threw together a simple angular-cli app that does this here. In particular, it imports the Clarity $vars from the @clr/ui package in= the clarity.imports.scss file and then it consumes that and implements $clr-green in the app.component.scss

Does this help?

[rjmccluskey]

Thanks for your fast response, @hippee-lee!

This technically solves my problem and I really appreciate the clarification, however it feels like a potentially fragile solution. I'm worried that a future update from clarity could change or add a file that I will need and it will be hard know which file is required. Unless you feel like that won't happen?

Maybe this issue is better labeled as a feature request. I would love it if there was a dedicated sass file that clarity intended to be used for importing variables. Sort of like dependencies.clarity. Do you think that is something worthwhile?

But for now your solution will keep me going, thanks again!

[hippee-lee]

I'm worried that a future update from clarity could change or add a file that I will need and it will be hard know which file is required. Unless you feel like that won't happen?

Breaking changes like that only happen in documented breaking change version release. Chances are small that we will break it but if we do it will be documented in the release notes for that version.

I too would love to get all of the variables into a single file but was unable to manage that when I implemented the themes. So, yes we are aware that it's not ideal for folks who consume Clarity $vars directly in their app SCSS but don't have a priority at this time to refactor the project SCSS that far.

Closing this based on your comment. Feel free to re-open it if there is something else I can address.

[rjmccluskey]

Okay no problem. I'm glad to hear that it will be considered a breaking change. I appreciate the help!

[smk]

Uh oh, fast forward four months, and the solution is already broken 😞

$clr-popover-box-shadow-color: rgba(clr-getColor(dark), 0.25);
                              ^
      Argument `$color` of `rgba($color, $alpha)` must be a color
      in /Users/stefankudwien/Code/smart-fed/smartfed-frontend/node_modules/@clr/ui/src/utils/_variables.global.scss (line 83, column 32)

SCSS variables should really be separated from the actual styles...

[hippee-lee]

@smk - I agree. Unfortunately the evolution of the component scss didn't allow us to implement that when I implemented themes, what we have today was the closest I could get.

I'm aware that this seems to be a pain point for folks building apps with the Clarity scss. Since this issue has been closed, can you file a new issue for this and include a link to a repo that reproduces the error your found?

[rjmccluskey]

@hippee-lee @smk was the new issue ever created for this? I am now upgrading and running into the same problem. If the issue has not been created then I'll go ahead and add one

[hippee-lee]

Hi @rjmccluskey - please do create a new issue. If you can link to a repo that reproduces the issue you are seeing that would help determining if its the same issue or if something changed recently that is causing the issue.