doryan/material-you-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIXED: Normalized colors in icon-buttons, typography color in night-mode

Browse Source
This commit is contained in:
doryan04
2024-02-25 00:37:57 +04:00
committed by doryan
parent 0a8b58668d
commit 894f0bc2c9
11 changed files with 89 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/styles/button-styles/icon-button.sass
View File

@@ -2,13 +2,19 @@
&:is(.default, .outlined)::before
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent)
&.filled::before, &.filled.toggled.selected::before
&.outlined.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) $opacity, transparent)
&.filled::before,
&.filled.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) $opacity, transparent)
&.filled.toggled::before
&.filled:not(.selected).toggled::before,
&.default.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-primary) $opacity, transparent)
&.tonal::before, &.tonal.toggled.selected::before
&.tonal::before,
&.tonal.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) $opacity, transparent)
&.tonal.toggled::before
@@ -66,7 +72,9 @@ button.m3.m3-icon-button
&.selected.toggled
@include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, transparent, 0%)
&:disabled, &.selected:disabled, &.selected.toggled:disabled
&:disabled,
&.selected:disabled,
&.selected.toggled:disabled
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 38%, transparent, 0%)
&.filled
@@ -120,7 +128,7 @@ button.m3.m3-icon-button
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent)
&.tonal:not(:disabled)
&:is(&.selected.toggled, &):not(&.toggled) > span.m3.m3-ripple-domain > span.m3.m3-ripple
&:is(&.selected.toggled, &) > span.m3.m3-ripple-domain > span.m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple