graycoreio/daffodil

View on GitHub
libs/design/hero/src/hero-theme.scss

Summary

Maintainability
Test Coverage
@use 'sass:map';
@use '../../scss/core';
@use '../../scss/theming';

@mixin daff-hero-theme-variant($color) {
    background: $color;
    color: theming.daff-text-contrast($color);
}

@mixin daff-hero-theme($theme) {
    $primary: map.get($theme, primary);
    $secondary: map.get($theme, secondary);
    $tertiary: map.get($theme, tertiary);
    $neutral: core.daff-map-deep-get($theme, 'core.neutral');
    $base: core.daff-map-deep-get($theme, 'core.base');
    $base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
    $white: core.daff-map-deep-get($theme, 'core.white');
    $black: core.daff-map-deep-get($theme, 'core.black');

    .daff-hero {
        @include daff-hero-theme-variant(
            theming.daff-illuminate($base, $neutral, 1)
        );

        &.daff-primary {
            @include daff-hero-theme-variant(
                theming.daff-color($primary)
            );
        }

        &.daff-secondary {
            @include daff-hero-theme-variant(
                theming.daff-color($secondary)
            );
        }

        &.daff-tertiary {
            @include daff-hero-theme-variant(
                theming.daff-color($tertiary)
            );
        }

        &.daff-theme {
            @include daff-hero-theme-variant($base);
        }

        &.daff-theme-contrast {
            @include daff-hero-theme-variant($base-contrast);
        }

        &.daff-black {
            @include daff-hero-theme-variant($black);
        }

        &.daff-white {
            @include daff-hero-theme-variant($white);
        }
    }
}