libs/design/card/src/card-theme.scss
@use 'sass:map';
@use '../../scss/core';
@use '../../scss/theming';
@use './card-theme-variants/basic-card' as basic;
@use './card-theme-variants/stroked-card' as stroked;
@use './card-theme-variants/linkable-card' as linkable;
@mixin daff-card-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-card {
$root: &;
@include basic.daff-basic-card-theme-variant(
theming.daff-illuminate($base, $neutral, 1)
);
&.daff-primary {
@include basic.daff-basic-card-theme-variant(
theming.daff-color($primary)
);
}
&.daff-secondary {
@include basic.daff-basic-card-theme-variant(
theming.daff-color($secondary)
);
}
&.daff-tertiary {
@include basic.daff-basic-card-theme-variant(
theming.daff-color($tertiary)
);
}
&.daff-theme {
@include basic.daff-basic-card-theme-variant($base);
}
&.daff-theme-contrast {
@include basic.daff-basic-card-theme-variant($base-contrast);
}
&.daff-black {
@include basic.daff-basic-card-theme-variant($black);
}
&.daff-white {
@include basic.daff-basic-card-theme-variant($white);
}
}
.daff-raised-card {
box-shadow: 0 6px 12px -4px rgba($black, 0.12),
0 4px 8px -2px rgba($black, 0.06);
}
.daff-stroked-card {
@include stroked.daff-stroked-card-theme-variant(
theming.daff-illuminate($base, $neutral, 2)
);
&.daff-primary {
@include stroked.daff-stroked-card-theme-variant(
theming.daff-illuminate($base-contrast, $primary, 3)
);
}
&.daff-secondary {
@include stroked.daff-stroked-card-theme-variant(
theming.daff-illuminate($base-contrast, $secondary, 3)
);
}
&.daff-tertiary {
@include stroked.daff-stroked-card-theme-variant(
theming.daff-illuminate($base-contrast, $tertiary, 3)
);
}
&.daff-theme {
@include stroked.daff-stroked-card-theme-variant(
theming.daff-illuminate($base, $neutral, 2)
);
}
&.daff-theme-contrast {
@include stroked.daff-stroked-card-theme-variant(
theming.daff-illuminate($base-contrast, $neutral, 2)
);
}
&.daff-black {
@include stroked.daff-stroked-card-theme-variant(
theming.daff-color($neutral, 90)
);
}
&.daff-white {
@include stroked.daff-stroked-card-theme-variant(
theming.daff-color($neutral, 20)
);
}
}
a {
&.daff-card {
@include linkable.daff-linkable-card-theme-variant(
theming.daff-illuminate($base, $neutral, 2)
);
&.daff-primary {
@include linkable.daff-linkable-card-theme-variant(
theming.daff-color($primary, 70)
);
}
&.daff-secondary {
@include linkable.daff-linkable-card-theme-variant(
theming.daff-color($secondary, 70)
);
}
&.daff-tertiary {
@include linkable.daff-linkable-card-theme-variant(
theming.daff-color($tertiary, 70)
);
}
&.daff-theme {
@include linkable.daff-linkable-card-theme-variant(
theming.daff-illuminate($base, $neutral, 1)
);
}
&.daff-theme-contrast {
@include linkable.daff-linkable-card-theme-variant(
theming.daff-illuminate($base-contrast, $neutral, 1)
);
}
&.daff-black {
@include linkable.daff-linkable-card-theme-variant(
theming.daff-color($neutral, 100)
);
}
&.daff-white {
@include linkable.daff-linkable-card-theme-variant(
theming.daff-color($neutral, 10)
);
}
}
&.daff-raised-card {
.daff-card__wrapper {
&:after {
box-shadow: 0 16px 32px -4px rgba($black, 0.12),
0 8px 12px -2px rgba($black, 0.06);
}
}
}
}
}