Keep Themes & Branding from overriding SLDS styles

Question

We have a customized version of the path structure in our app that is showing the current status of a process object. To leverage as much as possible of the SLDS we reused as many classes from Salesforce to define the semantics of a path fragment (active, incomplete, dimmed...)

customPath.cmp

<aura:component>
    <div class="{!v.process.stepMode ? 'slds-tabs--path dimmed' : 'slds-tabs--path'}" role="application">
        <ul class="slds-tabs--path__nav" role="tablist">
            <aura:iteration items="{!v.process.steps}" var="step">
                <li class="{! 'slds-tabs--path__item ' + step.css + (v.process.stepId == step.id ? ' active' : '')}" role="presentation">
                    <a onclick="{!c.naviapprovalToSObject}" data-id="{!step.id}" class="slds-tabs--path__link">
                        <span class="slds-tabs--path__step">
                            <lightning:icon iconName="utility:check" size="x-small" />
                        </span>
                        <span class="slds-tabs--path__title">{!step.label}</span>
                    </a>
                </li>
            </aura:iteration>
        </ul>
    </div>

    <a onclick="{!c.naviapprovalToSObject}" data-id="{!v.process.bpiId}" class="top-padded slds-button--brand slds-path__mark-complete slds-no-flex slds-m-left--small slds-path__mark-current">
        <lightning:icon variant="bare" class="slds-button__icon slds-button__icon--left" iconName="utility:level_up" size="x-small"/>
        Back
    </a>
</aura:component>

But now customers use Themes in their org and the path colors go weird. Active stages get nearly black instead of blue.

I am unsure what to do and I have read about others suffering from that. Do my own 100% would mean not to profit from changes in the SLDS.

Is there documentation on how to handle such situations? Can I just add !important to my copies of the style or will it be ignored.

Answer 1

I also had problems with a path component in Communities when I updated brand colors. I ended up creating tokens to define a color for each step (actually two colors: base and hovered color) and using them in custom css for my custom path component.

I didn't use !important and it worked for me. I believe you need to add some css rules to adjust colors for your case and steps you're using. With a help of a browser inspector you should be able to adjust a given example.

I'm using 4 different states in my path: Complete, Incomplete, Active (currently chosen, e.g. could be Completed state if you went back), Current (current state of the record, it indicates current state of a record if you went back on the path. In most cases Current = Active).

defaultTokens.tokens

<aura:tokens >
    <aura:token name="pathNavComplete" value="#A8B400" /> <!-- Spring Green -->
    <aura:token name="pathNavCompleteHover" value="#889200" />
    <aura:token name="pathNavCurrent" value="#007C92" /> <!-- Turquoise -->
    <aura:token name="pathNavCurrentHover" value="#005F70" />
    <aura:token name="pathNavActive" value="#5E2750" /> <!-- Aubergine -->
    <aura:token name="pathNavActiveHover" value="#461D3C" />
    <aura:token name="pathNavIncomplete" value="#EBEBEB" /> <!-- Grey Xtra Light -->
    <aura:token name="pathNavIncompleteHover" value="#DADADA" />
</aura:tokens>

customPathComponent.css

.THIS .slds-path__nav .slds-is-complete,
.THIS .slds-path__item+.slds-is-complete:before,
.THIS .slds-path__item+.slds-is-current:before {
    background-color: token(pathNavComplete);
}
.THIS .slds-path__nav .slds-is-complete:hover,
.THIS .slds-path__item:hover+.slds-is-complete:before,
.THIS .slds-path__item:hover+.slds-is-current:before {
    background-color: token(pathNavCompleteHover);
}

.THIS .slds-path__nav .slds-is-current,
.THIS .slds-path__nav .slds-is-current+.slds-is-incomplete:before {
    background-color: token(pathNavCurrent);
}
.THIS .slds-path__nav .slds-is-current:hover,
.THIS .slds-path__nav .slds-is-current:hover+.slds-is-incomplete:before {
    background-color: token(pathNavCurrentHover);
}

.THIS .slds-path__nav .slds-is-incomplete,
.THIS .slds-path__item+.slds-is-incomplete:before,
.THIS .slds-path__item+.slds-is-lost:before {
    background-color: token(pathNavIncomplete);
}
.THIS .slds-path__nav .slds-is-incomplete:hover,
.THIS .slds-path__item:hover+.slds-is-incomplete:before,
.THIS .slds-path__item:hover+.slds-is-lost:before {
    background-color: token(pathNavIncompleteHover);
}

.THIS .slds-path__nav .slds-is-active,
.THIS .slds-path__nav .slds-is-active+.slds-path__item:before {
    background-color: token(pathNavActive);
}
.THIS .slds-path__nav .slds-is-active:hover,
.THIS .slds-path__nav .slds-is-active:hover+.slds-path__item:before {
    background-color: token(pathNavActiveHover);
}

Of course this a is custom solution and it may be broken if SLDS updated css classes in their path component, but I don't know the better option.