graycoreio/daffodil

View on GitHub
libs/design/button/src/button-theme-variants/raised.scss

Summary

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

$black: theming.daff-color(theming.$daff-neutral, 110);

@mixin daff-raised-button-theme-variant(
    $base-color,
) {
    @if theming.daff-contrast-ratio($base-color, theming.daff-text-contrast($base-color)) < 4.5 {
        @error 'Button Initial State: ' + map.get(a11y.$wcag-aa-errors, 'text-contrast');
    }

    @if theming.daff-contrast-ratio($base-color, theming.daff-text-contrast($base-color)) < 4.5 {
        @error 'Button Hover State: '+ map.get(a11y.$wcag-aa-errors, 'text-contrast');
    }

    background-color: $base-color;
    border: 1px solid $base-color;
    box-shadow:
        0 3px 5px rgba($black, 0.12),
        0 1px 3px rgba($black, 0.08);
    color: theming.daff-text-contrast($base-color);

    &:after {
        box-shadow:
            0 6px 12px rgba($black, 0.08),
            0 4px 6px rgba($black, 0.04);
    }

    &:hover {
        background-color: $base-color;
        border: 1px solid $base-color;
    }
}