libs/design/button/src/button-theme-variants/raised.scss
@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;
}
}