graycoreio/daffodil

View on GitHub
libs/design/loading-icon/src/loading-icon-theme.scss

Summary

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

@mixin daff-loading-icon-theme($theme) {
    $primary: map.get($theme, primary);
    $secondary: map.get($theme, secondary);
    $tertiary: map.get($theme, tertiary);
    $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-loading-icon {
        &__loader {
            stroke: currentColor;
        }

        &__bg {
            stroke: rgba($black, 0.08);
        }

        &.daff-primary {
            .daff-loading-icon__loader {
                stroke: theming.daff-color($primary);
            }

            .daff-loading-icon__bg {
                stroke: rgba(theming.daff-color($primary), 0.08);
            }
        }

        &.daff-secondary {
            .daff-loading-icon__loader {
                stroke: theming.daff-color($secondary);
            }

            .daff-loading-icon__bg {
                stroke: rgba(theming.daff-color($secondary), 0.08);
            }
        }

        &.daff-tertiary {
            .daff-loading-icon__loader {
                stroke: theming.daff-color($tertiary);
            }

            .daff-loading-icon__bg {
                stroke: rgba(theming.daff-color($tertiary), 0.08);
            }
        }

        &.daff-theme {
            .daff-loading-icon__loader {
                stroke: $base;
            }
        }

        &.daff-theme-contrast {
            .daff-loading-icon__loader {
                stroke: $base-contrast;
            }
        }

        &.daff-black {
            .daff-loading-icon__loader {
                stroke: $black;
            }
        }

        &.daff-white {
            .daff-loading-icon__loader {
                stroke: $white;
            }
        }
    }
}