libs/design/progress-bar/src/progress-bar-theme.scss
@use 'sass:map';
@use '../../scss/core';
@use '../../scss/theming';
@mixin daff-progress-bar-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');
$neutral: core.daff-map-deep-get($theme, 'core.neutral');
.daff-progress-bar {
$root: '.daff-progress-bar';
#{$root}__label {
color: theming.daff-illuminate($base-contrast, $neutral, 2);
}
#{$root}__track {
background: theming.daff-illuminate($base, $neutral, 2);
}
&.daff-primary {
#{$root}__fill {
background: theming.daff-illuminate($base, $primary, 6);
}
}
&.daff-secondary {
#{$root}__fill {
background: theming.daff-illuminate($base, $secondary, 6);
}
}
&.daff-tertiary {
#{$root}__fill {
background: theming.daff-illuminate($base, $tertiary, 6);
}
}
&.daff-theme {
#{$root}__fill {
background: $base;
}
}
&.daff-theme-contrast {
#{$root}__fill {
background: $base-contrast;
}
}
&.daff-white {
#{$root}__fill {
background: $white;
}
}
&.daff-black {
#{$root}__fill {
background: $black;
}
}
}
}