graycoreio/daffodil

@use 'sass:map';
@use '../../scss/theming';
@use '../../scss/core';
@use './button-theme-variants/button';
@use './button-theme-variants/icon';
@use './button-theme-variants/raised';
@use './button-theme-variants/stroked';
@use './button-theme-variants/underline';
@use './button-theme-variants/flat';

@mixin daff-button-theme($theme) {
    $primary: map.get($theme, primary);
    $secondary: map.get($theme, secondary);
    $tertiary: map.get($theme, tertiary);
    $info: map.get($theme, info);
    $warn: map.get($theme, warn);
    $critical: map.get($theme, critical);
    $success: map.get($theme, success);
    $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-button {
        @include button.daff-button-theme-variant(
            theming.daff-illuminate($base, $neutral, 2),
            theming.daff-illuminate($base, $neutral, 3),
            theming.daff-illuminate($base, $neutral, 4)
        );

        &.daff-primary {
            @include button.daff-button-theme-variant(
                theming.daff-color($primary),
                theming.daff-color($primary, 70),
                theming.daff-color($primary, 80)
            );
        }

        &.daff-secondary {
            @include button.daff-button-theme-variant(
                theming.daff-color($secondary),
                theming.daff-color($secondary, 70),
                theming.daff-color($secondary, 80)
            );
        }

        &.daff-tertiary {
            @include button.daff-button-theme-variant(
                theming.daff-color($tertiary),
                theming.daff-color($tertiary, 70),
                theming.daff-color($tertiary, 80)
            );
        }

        &.daff-black {
            @include button.daff-button-theme-variant(
                $black,
                theming.daff-color($neutral, 90),
                theming.daff-color($neutral, 80)
            );
        }

        &.daff-white {
            @include button.daff-button-theme-variant(
                $white,
                theming.daff-color($neutral, 20),
                theming.daff-color($neutral, 30)
            );
        }

        &.daff-theme {
            @include button.daff-button-theme-variant(
                $base,
                theming.daff-illuminate($base, $neutral, 2),
                theming.daff-illuminate($base, $neutral, 3)
            );
        }

        &.daff-theme-contrast {
            @include button.daff-button-theme-variant(
                $base-contrast,
                theming.daff-illuminate($base-contrast, $neutral, 2),
                theming.daff-illuminate($base-contrast, $neutral, 3)
            );
        }

        &[disabled],
        &.daff-button--disabled {
            @include button.daff-button-theme-variant(
                theming.daff-illuminate($base, $neutral, 3),
                theming.daff-illuminate($base, $neutral, 3),
                theming.daff-illuminate($base, $neutral, 3)
            );
            color: theming.daff-illuminate($base, $neutral, 5);

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

        &.daff-warn {
            @include button.daff-button-theme-variant(
                theming.daff-color($warn),
                theming.daff-color($warn, 70),
                theming.daff-color($warn, 80)
            );
        }

        &.daff-success {
            @include button.daff-button-theme-variant(
                theming.daff-color($success),
                theming.daff-color($success, 70),
                theming.daff-color($success, 80)
            );
        }

        &.daff-critical {
            @include button.daff-button-theme-variant(
                theming.daff-color($critical),
                theming.daff-color($critical, 70),
                theming.daff-color($critical, 80)
            );
        }
    }

    .daff-raised-button {
        @include raised.daff-raised-button-theme-variant(
            theming.daff-illuminate($base, $neutral, 2)
        );

        &.daff-primary {
            @include raised.daff-raised-button-theme-variant(
                theming.daff-color($primary)
            );
        }

        &.daff-secondary {
            @include raised.daff-raised-button-theme-variant(
                theming.daff-color($secondary)
            );
        }

        &.daff-tertiary {
            @include raised.daff-raised-button-theme-variant(
                theming.daff-color($tertiary)
            );
        }

        &.daff-black {
            @include raised.daff-raised-button-theme-variant($black);
        }

        &.daff-white {
            @include raised.daff-raised-button-theme-variant($white);
        }

        &.daff-theme {
            @include raised.daff-raised-button-theme-variant($base);
        }

        &.daff-theme-contrast {
            @include raised.daff-raised-button-theme-variant($base-contrast);
        }

        &[disabled],
        &.daff-button--disabled {
            @include raised.daff-raised-button-theme-variant(
                theming.daff-illuminate($base, $neutral, 3)
            );
            color: theming.daff-illuminate($base, $neutral, 5);

            &:after {
                box-shadow: none;
            }
        }

        &.daff-warn {
            @include raised.daff-raised-button-theme-variant(
                theming.daff-color($warn)
            );
        }

        &.daff-critical {
            @include raised.daff-raised-button-theme-variant(
                theming.daff-color($critical)
            );
        }

        &.daff-success {
            @include raised.daff-raised-button-theme-variant(
                theming.daff-color($success)
            );
        }
    }

    .daff-icon-button {
        @include icon.daff-icon-button-theme-variant(
            theming.daff-illuminate($base, $neutral, 5),
            theming.daff-illuminate($base, $neutral, 6),
            theming.daff-illuminate($base, $neutral, 7)
        );

        &.daff-primary {
            @include icon.daff-icon-button-theme-variant(
                theming.daff-color($primary),
                theming.daff-color($primary, 70),
                theming.daff-color($primary, 80)
            );
        }

        &.daff-secondary {
            @include icon.daff-icon-button-theme-variant(
                theming.daff-color($secondary),
                theming.daff-color($secondary, 70),
                theming.daff-color($secondary, 80)
            );
        }

        &.daff-tertiary {
            @include icon.daff-icon-button-theme-variant(
                theming.daff-color($tertiary),
                theming.daff-color($tertiary, 70),
                theming.daff-color($tertiary, 80)
            );
        }

        &.daff-black {
            @include icon.daff-icon-button-theme-variant(
                $black,
                theming.daff-color($neutral, 100),
                theming.daff-color($neutral, 80)
            );
        }

        &.daff-white {
            @include icon.daff-icon-button-theme-variant(
                $white,
                theming.daff-color($neutral, 20),
                theming.daff-color($neutral, 30)
            );
        }

        &.daff-theme {
            @include icon.daff-icon-button-theme-variant(
                $base,
                theming.daff-illuminate($base, $neutral, 1),
                theming.daff-illuminate($base, $neutral, 2)
            );
        }

        &.daff-theme-contrast {
            @include icon.daff-icon-button-theme-variant(
                $base-contrast,
                theming.daff-illuminate($base-contrast, $neutral, 1),
                theming.daff-illuminate($base-contrast, $neutral, 2)
            );
        }

        &[disabled],
        &.daff-button--disabled {
            @include icon.daff-icon-button-theme-variant(
                theming.daff-illuminate($base, $neutral, 4),
                theming.daff-illuminate($base, $neutral, 4),
                theming.daff-illuminate($base, $neutral, 4)
            );

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

        &.daff-warn {
            @include icon.daff-icon-button-theme-variant(
                theming.daff-color($warn),
                theming.daff-color($warn, 70),
                theming.daff-color($warn, 80)
            );
        }

        &.daff-critical {
            @include icon.daff-icon-button-theme-variant(
                theming.daff-color($critical),
                theming.daff-color($critical, 70),
                theming.daff-color($critical, 80)
            );
        }

        &.daff-success {
            @include icon.daff-icon-button-theme-variant(
                theming.daff-color($success),
                theming.daff-color($success, 70),
                theming.daff-color($success, 80)
            );
        }
    }

    .daff-stroked-button {
        background: transparent;
        border: 1px solid theming.daff-illuminate($base, $neutral, 5);
        color: currentColor;

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

        &:hover {
            border: 1px solid theming.daff-illuminate($base, $neutral, 2);
            color: theming.daff-text-contrast(
                theming.daff-illuminate($base, $neutral, 2)
            );
        }

        &:active {
            border: 1px solid theming.daff-illuminate($base, $neutral, 3);
            color: theming.daff-text-contrast(
                theming.daff-illuminate($base, $neutral, 3)
            );

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

        &.daff-primary {
            @include stroked.daff-stroked-button-theme-variant(
                theming.daff-color($primary),
                theming.daff-color($primary, 70)
            );
        }

        &.daff-secondary {
            @include stroked.daff-stroked-button-theme-variant(
                theming.daff-color($secondary),
                theming.daff-color($secondary, 70)
            );
        }

        &.daff-tertiary {
            @include stroked.daff-stroked-button-theme-variant(
                theming.daff-color($tertiary),
                theming.daff-color($tertiary, 70)
            );
        }

        &.daff-black {
            @include stroked.daff-stroked-button-theme-variant(
                $black,
                theming.daff-color($neutral, 100)
            );
        }

        &.daff-white {
            @include stroked.daff-stroked-button-theme-variant(
                $white,
                theming.daff-color($neutral, 20)
            );
        }

        &.daff-theme {
            @include stroked.daff-stroked-button-theme-variant(
                $base,
                theming.daff-illuminate($base, $neutral, 2)
            );
        }

        &.daff-theme-contrast {
            @include stroked.daff-stroked-button-theme-variant(
                $base-contrast,
                theming.daff-illuminate($base-contrast, $neutral, 2)
            );
        }

        &[disabled],
        &.daff-button--disabled {
            background-color: transparent;
            border-color: theming.daff-illuminate($base, $neutral, 3);
            color: theming.daff-illuminate($base, $neutral, 5);

            &:hover {
                color: theming.daff-illuminate($base, $neutral, 5);

                &:after {
                    background-color: transparent;
                    opacity: 0;
                }
            }
        }

        &.daff-warn {
            @include stroked.daff-stroked-button-theme-variant(
                theming.daff-color($warn),
                theming.daff-color($warn, 70)
            );
        }

        &.daff-critical {
            @include stroked.daff-stroked-button-theme-variant(
                theming.daff-color($critical),
                theming.daff-color($critical, 70)
            );
        }

        &.daff-success {
            @include stroked.daff-stroked-button-theme-variant(
                theming.daff-color($success),
                theming.daff-color($success, 70)
            );
        }
    }

    .daff-flat-button {
        color: currentColor;

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

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

        &:hover,
        &:active {
            color: theming.daff-text-contrast(theming.daff-illuminate($base, $neutral, 2));
        }

        &.daff-primary {
            @include flat.daff-flat-button-theme-variant(
                theming.daff-color($primary),
                theming.daff-color($primary, 70)
            );
        }

        &.daff-secondary {
            @include flat.daff-flat-button-theme-variant(
                theming.daff-color($secondary),
                theming.daff-color($secondary, 70)
            );
        }

        &.daff-tertiary {
            @include flat.daff-flat-button-theme-variant(
                theming.daff-color($tertiary),
                theming.daff-color($tertiary, 70)
            );
        }

        &.daff-black {
            @include flat.daff-flat-button-theme-variant(
                $black,
                theming.daff-color($neutral, 100)
            );
        }

        &.daff-white {
            @include flat.daff-flat-button-theme-variant(
                $white,
                theming.daff-color($neutral, 20)
            );
        }

        &.daff-theme {
            @include flat.daff-flat-button-theme-variant(
                $base,
                theming.daff-illuminate($base, $neutral, 2)
            );
        }

        &.daff-theme-contrast {
            @include flat.daff-flat-button-theme-variant(
                $base-contrast,
                theming.daff-illuminate($base-contrast, $neutral, 2)
            );
        }

        &[disabled],
        &.daff-button--disabled {
            color: theming.daff-illuminate($base, $neutral, 5);

            &:hover,
            &:focus,
            &:active {
                &:after {
                    background: transparent;
                }
            }
        }

        &.daff-warn {
            @include flat.daff-flat-button-theme-variant(
                theming.daff-color($warn),
                theming.daff-color($warn, 70)
            );
        }

        &.daff-critical {
            @include flat.daff-flat-button-theme-variant(
                theming.daff-color($critical),
                theming.daff-color($critical, 70)
            );
        }

        &.daff-success {
            @include flat.daff-flat-button-theme-variant(
                theming.daff-color($success),
                theming.daff-color($success, 70)
            );
        }
    }

    .daff-underline-button {
        @include underline.daff-underline-button-theme-variant(
            theming.daff-illuminate($base, $neutral, 7)
        );

        &.daff-primary {
            @include underline.daff-underline-button-theme-variant(
                theming.daff-color($primary)
            );
        }

        &.daff-secondary {
            @include underline.daff-underline-button-theme-variant(
                theming.daff-color($secondary)
            );
        }

        &.daff-tertiary {
            @include underline.daff-underline-button-theme-variant(
                theming.daff-color($tertiary)
            );
        }

        &.daff-black {
            @include underline.daff-underline-button-theme-variant($black);
        }

        &.daff-white {
            @include underline.daff-underline-button-theme-variant($white);
        }

        &.daff-theme {
            @include underline.daff-underline-button-theme-variant($base);
        }

        &.daff-theme-contrast {
            @include underline.daff-underline-button-theme-variant($base-contrast);
        }

        &[disabled],
        &.daff-button--disabled {
            @include underline.daff-underline-button-theme-variant(
                theming.daff-illuminate($base, $neutral, 4)
            );
        }

        &.daff-warn {
            @include underline.daff-underline-button-theme-variant(
                theming.daff-color($warn)
            );
        }

        &.daff-critical {
            @include underline.daff-underline-button-theme-variant(
                theming.daff-color($critical)
            );
        }

        &.daff-success {
            @include underline.daff-underline-button-theme-variant(
                theming.daff-color($success)
            );
        }
    }
}