|
| 1 | +@use '@material/theme/theme-color' as mdc-theme-color; |
| 2 | +@use '@material/theme/theme' as mdc-theme; |
| 3 | +@use '../../material/core/ripple/ripple-theme'; |
| 4 | + |
| 5 | +// Selector for the element that has a background color and opacity applied to its ::before and |
| 6 | +// ::after for state interactions (hover, active, focus). Their API calls this their |
| 7 | +// "ripple target", but we do not use it as our ripple, just state color. |
| 8 | +$button-state-target: '.mdc-button__ripple'; |
| 9 | +$fab-state-target: '.mdc-fab__ripple'; |
| 10 | + |
| 11 | +// The MDC button's ripple ink color is based on the theme color, not on the foreground base |
| 12 | +// which is what the ripple mixin uses. This creates a new theme that sets the color to the |
| 13 | +// foreground base to appropriately color the ink. |
| 14 | +@mixin ripple-ink-color($mdc-color) { |
| 15 | + @include ripple-theme.theme(( |
| 16 | + foreground: ( |
| 17 | + base: mdc-theme-color.prop-value($mdc-color) |
| 18 | + ), |
| 19 | + )); |
| 20 | +} |
| 21 | + |
| 22 | +// Applies the disabled theme color to the text color. |
| 23 | +@mixin apply-disabled-color() { |
| 24 | + @include mdc-theme.prop(color, |
| 25 | + mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background)); |
| 26 | +} |
| 27 | + |
| 28 | +// Wraps the content style in a selector for the disabled state. |
| 29 | +// MDC adds theme color by using :not(:disabled), so just using [disabled] once will not |
| 30 | +// override this, neither will it apply to anchor tags. This needs to override the |
| 31 | +// previously set theme color, so it must be ordered after the theme styles. |
| 32 | +// TODO(andrewseguin): Discuss with the MDC team to see if we can avoid the :not(:disabled) by |
| 33 | +// manually styling disabled buttons with a [disabled] selector. |
| 34 | +@mixin apply-disabled-style() { |
| 35 | + &[disabled][disabled] { |
| 36 | + @content; |
| 37 | + } |
| 38 | +} |
| 39 | + |
| 40 | +// Applies the disabled theme background color for raised buttons. Value is taken from |
| 41 | +// mixin `mdc-button--filled`. |
| 42 | +// TODO(andrewseguin): Discuss with the MDC team about providing a variable for the 0.12 value |
| 43 | +// or otherwise have a mixin we can call to apply this style for both button and anchors. |
| 44 | +@mixin apply-disabled-background() { |
| 45 | + @include mdc-theme.prop(background-color, rgba(mdc-theme-color.prop-value(on-surface), 0.12)); |
| 46 | +} |
| 47 | + |
0 commit comments