graycoreio/daffodil

View on GitHub
libs/design/article/src/article-theme.scss

Summary

Maintainability
Test Coverage
@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;
            }
        }
    }
}