graycoreio/daffodil

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

Summary

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