graycoreio/daffodil

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

Summary

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

@mixin daff-menu-theme($theme) {
    $white: core.daff-map-deep-get($theme, 'core.white');
    $black: core.daff-map-deep-get($theme, 'core.black');
    $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');

    .daff-menu {
        background: $base;
        box-shadow: 0 0 24px rgb($black, 0.12);
    }

    .daff-menu-item {
        background: $base;
        color: $base-contrast;

        &:hover,
        &:focus {
            background: theming.daff-illuminate($base, $neutral, 1);
        }
    }
}