ArticleTemplates/assets/scss/pillar/_colour.scss

// Note the variable naming differences between the app templates and MAPI:
// App templates name — MAPI name
// $p-kicker — main and pillar
// $p-feature-headline — featureHeadline
// $p-soft — no correspondence
// $p-inverted — mediaMain and elementBackground
// $p-liveblog-background — liveblogBackground
// in addition, MAPI includes pillar-toned liveblogBackground and liveblogMain


@mixin pillar-colour($p-kicker, $p-feature-headline, $p-soft, $p-inverted, $p-liveblog-background, $p-media-main) {
    .comment-count a,
    .element-pullquote blockquote {
        color: $p-kicker;
    }

    .avatar {
        background-color: $p-inverted;
    }

    .prose .element-pullquote blockquote {
        color: $p-kicker;
        &:before,
        &:after,
        footer {
            color: $p-kicker;
        }
    }

    .alerts {
        border-color: rgba($p-kicker, .5);
        color: $p-kicker;
    }

    .more--live-blogs .more__button, .more--live-blogs-blocks .more__button {
        background-color: $p-kicker;

        &:active {
            background-color: darken($p-kicker, 10%);
        }
    }

    .comments__ordering {
        color: color(brightness-0);

        &:active {
            color: color(brightness-0);
        }
    }

    .comment__report,
    .comments .touchpoint--primary {
        .touchpoint__button {
            background-color: color(brightness-0);
        }

        &:active .touchpoint__button {
            background-color: color(brightness-0);
        }

        .touchpoint__label {
            color: color(brightness-0);
        }

        &:active .touchpoint__label {
            color: color(brightness-0);
        }
    }

    .comments__viewmore {
        .comments__viewmore--label {
            color: color(brightness-0);
        }

        &:active .comments__viewmore--label {
            color: color(brightness-0);
        }
    }

    .comment__recommend {
        &.increase .touchpoint__button {
            color: color(brightness-100);
            background-color: $p-kicker;
            border-color: transparent;
        }
    }

    .more.more--comments .more__label {
        color: $p-kicker;
        border: solid 1px rgba($p-kicker, .5);

        &:active {
            color: darken($p-kicker, 10%);
            border-color: rgba(darken($p-kicker, 10%), .5);
        }
    }

    // Maybe make this bit less smart and more manual later?
    @include pillar-reversible($p-kicker, $p-feature-headline, $p-soft, $p-inverted);

    // Feature, Review, Recipe, Interview overrides
    &.garnett--type-feature,
    &.garnett--type-review,
    &.garnett--type-recipe,
    &.garnett--type-interview {
        .headline {
            color: $p-feature-headline;
        }
    }


    // Analysis overrides
    &.garnett--type-analysis {
        .headline {
            background-image: repeating-linear-gradient(to bottom, transparent, transparent calc(3.6rem - 1px), rgba($p-kicker, .5));
            @include mq($from: col2) {
                background-image: repeating-linear-gradient(to bottom, transparent, transparent calc(4.4rem - 1px), rgba($p-kicker, .5));
            }
        }
    }

    // Immersive overrides
    &.garnett--type-immersive {
        .article__series,
        .byline__author > a {
            color: $p-inverted;
        }

        .article__series {
            background-color: $p-kicker;
        }

        .article__series-copy {
            color: color(brightness-100);

            a {
                color: color(brightness-100);
            }
        }

        &.tone--special .article__series-copy {
            color: color(tone-highlight);

            a {
                color: color(brightness-100);
            }
        }

        .section__rule {
            + p.has__dropcap {
                @include immersive-dropcap($p-kicker);
            }
        }
    }

    // Numbered list displayHint
    &.display-hint--numberedList {
        .article__header {
            .article-kicker,
            .headline {
                background-color: $p-kicker;
                color: color(brightness-100);
            }
        }
        h2 strong {
            color: $p-kicker;
        }
    }


    // play buttons
    .audio-player__button.touchpoint--primary .touchpoint__button,
    .element-placeholder .element-placeholder__button .touchpoint__button,
    .element-youtube .element-placeholder__button .touchpoint__button,
    .audio-player__slider__knob {
        background-color: color(tone-highlight);
    }

    .audio-player__container_new .audio-player__button.touchpoint--primary .touchpoint__button,
    .listen-to-article__container .audio-player__button.touchpoint--primary .touchpoint__button {
        background-color: $p-media-main;
    }

    .audio-player__container_new .audio-player__button--loading .pulse,
    .listen-to-article__container .audio-player__button--loading .pulse {
        &:before,
        &:after,
        & {
            background-color: $p-media-main;
        }
    }

    .element-placeholder .element-placeholder__button .touchpoint__button,
    .element-youtube .element-placeholder__button .touchpoint__button,
    .audio-player__button.touchpoint--primary .touchpoint__button {
        &:before {
            color: color(brightness-7);
        }
    }

    .element-placeholder .element-placeholder__button .touchpoint__label,
    .element-youtube .element-placeholder__button .touchpoint__label {
        color: color(brightness-100);
    }

    // Media overrides
    &.garnett--type-media {
        @include pillar-reversible($p-inverted, $p-kicker, $p-feature-headline, $p-soft);

        &:not(.garnett--type-guardianlabs) .byline {
            color: color(brightness-100);
        }
    }

    // Live overrides
    &.garnett--type-live.is-live {
        a.touchpoint {
            &:active {
                color: $p-kicker;
            }
        }


        .alerts {
            span.following[data-icon] {
                &:before {
                    color: $p-kicker;
                }
            }
            span.not-following[data-icon] {
                border: 1px solid $p-kicker;
                &:before {
                    color: $p-kicker;
                }
            }
        }

        .article__header,
        .section,
        .article-kicker,
        .headline,
        .main-media {
            background-color: $p-kicker;
        }

        .avatar {
            background-color: $p-feature-headline;
        }

        @include mq($from: col4) {
            .article__header {
                background-color: color(brightness-96);
            }
        }

        &.garnett--pillar-sport .sponsorship {
            background-color: color(news-soft);
            &__about-uri {
                color: color(brightness-7);
            }
        }

        &.garnett--pillar-news .sponsorship {
            background-color: color(tone-live);

            &__about-uri,
            &__formatted-sponsor-name,
            &__formatted-sponsor-name a {
                color: color(brightness-100);
            }
        }

        .standfirst {
            color: color(brightness-96);
            @include text-underline(color(brightness-100), color(brightness-93));
        }

        // Template specific styles
        .article--liveblog {
            .prose table,
            .table {
                border-top-color: $p-kicker;
            }

            .prose .element-pullquote {
                blockquote {
                    footer,
                    &::after,
                    &::before {
                        color: $p-kicker;
                    }
                }
            }

            .standfirst,
            .standfirst__inner,
            .meta,
            .main-media {
                background-color: $p-liveblog-background;
            }
            .meta__published__comments {
                border-left-color: rgba(color(tone-sandy-light), .5);
            }
        }

        .key-events {
            &__title {
                color: $p-kicker;
            }
            &__time,
            &__link,
            &__link h2 {
                .key-event--highlighted & {
                    color: $p-kicker !important;
                }
            }
        }

        .block--live-summary {
            .prose p,
            .prose li {
                @include text-underline($p-kicker, $p-feature-headline);
            }
        }
    }

    &.garnett--type-live,
    &.garnett--type-article {
        .key-events {
            a {
                color: $p-kicker !important;
            }
        }
    }

    .block--live-key-event, .block--live-summary {
        border-top-color: $p-kicker;

        .block__title .highlight {
            background-color: color(tone-highlight);
            padding: 0.25rem 0.125rem;
        }
    }

    // quiz styles
    .element-atom {
        .quiz {
            .question__wrapper {
                border-top: 2px solid $p-kicker;
            }

            .question__text {
                &::before {
                    color: $p-kicker;
                }
            }

            .quiz-scores,
            .quiz-results {
                border-color: $p-kicker;
                border-top: 2px solid $p-kicker;
            }

            .quiz-scores .quiz-scores__score {
                border-top: 2px solid $p-kicker;
                background: $p-feature-headline;
                color: $p-inverted;
            }

            &.personality-quiz {
                .question__wrapper {
                    border-top: 2px solid color(brightness-7);
                }

                .question__text {
                    &::before {
                        color:  color(brightness-7);
                    }
                }

                .quiz-scores,
                .quiz-results {
                    border-color: color(brightness-7);
                    border-top: 2px solid color(brightness-7);
                }
            }
        }
    }

    @media (prefers-color-scheme: dark) {
        @include personality-quiz-dark-mode;
    }

    //for android
    .body .dark-mode-on {
        @include personality-quiz-dark-mode;
    }

    .prose, .article__header {
        .bullet {
            @include faux-bullet($color: $p-kicker, $right-space: 4px);
        }

        ul > li {
            @include faux-bullet();
        }
    }

    &.garnett--type-media, &.garnett--type-guardianlabs {
        .article__header, .prose {
            ul > li, .bullet {
                @include faux-bullet($color: color(brightness-60));
            }
        }
    }
}

@mixin personality-quiz-dark-mode {
    .element-atom {
        .quiz {
            &.personality-quiz {
                .question__wrapper {
                    border-top: 2px solid #707070;
                }

                .question__text {
                    &::before {
                        color: #707070;
                    }
                }

                .quiz-scores,
                .quiz-results {
                    border-color: #707070;
                    border-top: 2px solid #707070;
                    color: color(brightness-86);
                }
            }
        }
    }
}

// CSS for reversible pillar colours, this means we can
// use $kicker colours to mean $p-kicker or $p-inverted
// depending on context
@mixin pillar-reversible($kicker, $feature, $soft, $inverted) {

    &:not(.garnett--type-guardianlabs) {
        // Section and series labels above headline
        .article-kicker {
            color: $kicker;
        }

        // Author names
        .byline,
        .headline__byline,
        .byline__author,
        .byline__author a,
        .touch-gallery__caption__caption a,
        .gallery-caption a,
        .sponsorship__about-uri {
            color: $kicker;
        }

        // in-article
        .prose {
            @include text-underline($kicker, $feature);
        }

        .standfirst {
            @include text-underline($kicker, $feature, $bottom-space: 0);
        }

        table {
            border-top-color: $soft;
        }
    }
}