has-shade

@include has-shade(
  $shade,
  $base,
  $parent,
  $levels
) {
  /* ... */
};

Description

Detect if an element has or is contained within a parent element that has a particular color applied to it. This is useful for providing alternative styles to use when the styled elements appear in different contexts.

Parameters

$shade (shades | 'is-light' | 'is-dark')
The shade you want to detect. Can be a campaign shade like primary-dark or secondary-light, or the more generic is-light or is-dark .

$property ('text' | 'background' | 'border')
The property you want to target when detecting it's shade. These refer to the text, background, or border color.

$parent (boolean)
Determine whether or not to detect the $shade and $property on the parent element, or the current element.
Default: true

$levels (list)
Define the element tree you wish to target. By default, it will detect for rows, columns, and blocks in that order. You can change this parameter to alter the depth and hierarchy of the targeting.
Default: (row, col, block)

Return

(CSS) Class-scoped styles for when element has a specific shade.

Examples

Apply a different color scheme when row is dark

.foo-button {
  background: $secondaryColor;
  color: white;
  
  @include has-shade('is-dark') {
    background: $secondaryLightest;
    color: $secondaryDarkest;
  }
}