graycoreio/daffodil

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

Summary

Maintainability
Test Coverage
@use 'sass:map';
@use '../../scss/core';
@use '../../scss/theming';

@mixin daff-list-theme($theme) {
    $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');

    .daff-list {
        .daff-list-item {
            &__content {
                *:nth-child(1) { /* stylelint-disable-line scss/selector-nest-combinators */
                    color: $base-contrast;
                }

                *:nth-child(n + 2) { /* stylelint-disable-line scss/selector-nest-combinators */
                    color: theming.daff-illuminate($base-contrast, $neutral, 3);
                }
            }
        }
    }

    .daff-nav-list {
        .daff-list-item {
            &:after {
                background-color: $base;
            }

            &:hover {
                &:after {
                    background-color: theming.daff-illuminate($base, $neutral, 1);
                }
            }
        }
    }
}