libs/design/navbar/src/navbar-theme.scss
@use 'sass:map';
@use '../../scss/core';
@use '../../scss/theming';
@mixin daff-navbar-theme-variant($color) {
background: $color;
color: theming.daff-text-contrast($color);
}
@mixin daff-navbar-theme($theme) {
$primary: map.get($theme, primary);
$secondary: map.get($theme, secondary);
$tertiary: map.get($theme, tertiary);
$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-navbar {
@include daff-navbar-theme-variant(
theming.daff-illuminate($base, $neutral, 1)
);
&--raised {
box-shadow: 0 4px 10px rgba($black, 0.08);
}
&.daff-primary {
@include daff-navbar-theme-variant(theming.daff-color($primary));
}
&.daff-secondary {
@include daff-navbar-theme-variant(theming.daff-color($secondary));
}
&.daff-tertiary {
@include daff-navbar-theme-variant(theming.daff-color($tertiary));
}
&.daff-black {
@include daff-navbar-theme-variant($black);
}
&.daff-white {
@include daff-navbar-theme-variant($white);
}
&.daff-theme {
@include daff-navbar-theme-variant($base);
}
&.daff-theme-contrast {
@include daff-navbar-theme-variant($base-contrast);
}
}
}