libs/design/loading-icon/src/loading-icon-theme.scss
@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;
}
}
}
}