graycoreio/daffodil

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

Summary

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

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

@mixin daff-navbar-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-navbar {
        @include daff-navbar-theme-variant(
            theming.daff-illuminate($base, $neutral, 1)
        );

        &--raised {
            box-shadow: 0 4px 10px rgba($black, 0.08);
        }

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

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

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

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

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

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

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