libs/design/article/src/article-theme.scss
@use 'sass:map';
@use './article/stops-article-cascade' as *;
@use '../../scss/core';
@use '../../scss/theming';
@mixin daff-article-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');
$text-color: theming.daff-illuminate($base-contrast, $neutral, 2);
$table-border-color: theming.daff-illuminate($base, $neutral, 2);
.daff-article {
color: $text-color;
&__meta {
color: theming.daff-illuminate($base-contrast, $neutral, 3);
}
@include stopsArticleCascade(a) {
color: theming.daff-color($primary);
code {
background: theming.daff-illuminate($base, $primary, 1);
color: theming.daff-illuminate($base-contrast, $primary, 4);
}
}
pre {
background: theming.daff-illuminate($base, $neutral, 1);
border: 1px solid theming.daff-illuminate($base, $neutral, 2);
color: $base-contrast;
code {
background: none;
border: none;
}
}
code {
background: rgba(theming.daff-illuminate($base, $neutral, 2), 0.5);
color: $base-contrast;
}
hr {
background: theming.daff-illuminate($base, $neutral, 2);
}
blockquote {
background: rgba(theming.daff-color($primary), 0.1);
border-left: 4px solid theming.daff-illuminate($base, $primary, 5);
color: theming.daff-illuminate($base-contrast, $primary, 1);
code {
background: rgba(theming.daff-color($primary), 0.15);
color: $base-contrast;
}
@include stopsArticleCascade(a) {
color: theming.daff-illuminate($base, $primary, 7);
}
@include stopsArticleCascade(a) {
code {
background: rgba(theming.daff-color($primary), 0.15);
color: theming.daff-illuminate($base-contrast, $primary, 4);
}
}
}
table {
th {
background: theming.daff-illuminate($base, $neutral, 1);
border: 1px solid $table-border-color;
}
td {
border: 1px solid $table-border-color;
}
}
}
}