graycoreio/daffodil

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

Summary

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

@mixin daff-toast-theme($theme) {
    $primary: map.get($theme, primary);
    $secondary: map.get($theme, secondary);
    $tertiary: map.get($theme, tertiary);
    $info: map.get($theme, info);
    $warn: map.get($theme, warn);
    $critical: map.get($theme, critical);
    $success: map.get($theme, success);
    $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-toast {
        background: theming.daff-illuminate($base, $neutral, 1);
        box-shadow: 0 -16px 24px -4px rgba($black, 0.04), 0 8px 24px -4px rgba($black, 0.10);
        color: theming.daff-text-contrast($base);

        &:before {
            background: theming.daff-illuminate($base, $neutral, 4);
        }

        &.daff-success {
            background: theming.daff-color($success, 10);
            color: $black;

            .daff-prefix {
                color: theming.daff-color($success);
            }
            
            &:before {
                background: theming.daff-color($success);
            }
        }

        &.daff-warn {
            background: theming.daff-color($warn, 10);
            color: $black;

            .daff-prefix {
                color: theming.daff-color($warn);
            }

            &:before {
                background: theming.daff-color($warn);
            }
        }

        &.daff-critical {
            background: theming.daff-color($critical, 10);
            color: $black;

            .daff-prefix {
                color: theming.daff-color($critical);
            }

            &:before {
                background: theming.daff-color($critical);
            }
        }
    }
}