When trying to import fonts SCSS file it complains about missing $color-base-white variable

[johnvoelk]

Describe the bug
In one of our SCSS files, attempt to import the fonts and receive the following error:

SassError: Undefined variable: "$color-base-white".
on line 44 of node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/_focusVisible.scss, in mixin focus-hyperlink
from line 123 of node_modules/@alaskaairux/orion-web-core-style-sheets/dist/_essentials.scss
from line 3 of /Users/jvoelk/git/Ryoko/Site/src/App.scss

$color: $color-base-white;

To Reproduce
Steps to reproduce the behavior:

• Start webpack to existing React project
• Add the following lines to an SCSS file:

@import "~@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariables";
@import "~@alaskaairux/orion-web-core-style-sheets/dist/essentials";
@import "~@alaskaairux/orion-web-core-style-sheets/dist/fonts";

• Save the file

Expected behavior
A clear and concise description of what you expected to happen.

Should result in no errors.

[blackfalcon]

If I am understanding this correctly, you are using the deprecated focus-hyperlink() mixin ref, but only importing the new Auro SCSSVariables.

My suggestion is to use the newer auro_focus-hyperlink ref as this has the correct dependency on the new Auro tokens.

Please see the Auro Tokens pre-processed output for full descriptions.

The other option is to reference the deprecated _TokenVariables as this will have the $color-base-white reference needed. But that seems counter productive.

[johnvoelk]

As an ignorant React developer I am not aware that I was choosing to use deprecated features. All of the SCSS files that I am importing are not deprecated.

How do I use the newer auro_focus-hyperlink ref? Sorry this isn't obvious to me.

[geoffrich]

Essentials imports the deprecated focus-hyperlink() mixin by default: https://github.com/AlaskaAirlines/OrionWebCoreStyleSheets/blob/master/src/_essentials.scss#L8. Does essentials needs to be updated to only import the new hyperlink mixin instead? As you said, it seems counter-productive to require import of the old tokens.

[blackfalcon]

Got it! This is the real issue
https://github.com/AlaskaAirlines/OrionWebCoreStyleSheets/blob/master/src/_essentials.scss#L123

Ok, this can be fixed quickly.

[AuroDesignSystem]

🎉 This issue has been resolved in version 2.8.11 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀