Gnome-Shell: update popover theme tweaks

This commit is contained in:
Daniel Ruiz de Alegría 2022-03-09 08:23:05 +01:00
parent 6cfd361e65
commit fd47a59861
No known key found for this signature in database
GPG Key ID: 59667A77E8BFCB6C
5 changed files with 165 additions and 77 deletions

View File

@ -232,8 +232,8 @@ StEntry {
selection-background-color: #2777ff; selection-background-color: #2777ff;
selected-color: #ffffff; } selected-color: #ffffff; }
StEntry:hover { StEntry:hover {
background-color: #363a48; background-color: #3b3f4e;
border-color: #363a48; border-color: #3b3f4e;
color: rgba(238, 238, 236, 0.7); } color: rgba(238, 238, 236, 0.7); }
StEntry:focus { StEntry:focus {
background-color: #2d3546; background-color: #2d3546;
@ -354,21 +354,21 @@ StScrollBar {
.popup-menu-item:rtl { .popup-menu-item:rtl {
padding-right: 6px; } padding-right: 6px; }
.popup-menu-item:focus, .popup-menu-item:hover { .popup-menu-item:focus, .popup-menu-item:hover {
background-color: #2b2f3a !important; }
.popup-menu-item:focus:active, .popup-menu-item:hover:active {
background-color: #303340 !important; } background-color: #303340 !important; }
.popup-menu-item:focus:active, .popup-menu-item:hover:active {
background-color: #343845 !important; }
.popup-menu-item:checked { .popup-menu-item:checked {
background-color: #363a48 !important; } background-color: #3b3f4e !important; }
.popup-menu-item:checked { .popup-menu-item:checked {
margin-bottom: 0; margin-bottom: 0;
box-shadow: inset 0 -1px 0 0 #2b2f3a; box-shadow: inset 0 -1px 0 0 #303340;
border-radius: 8px 8px 0 0; } border-radius: 8px 8px 0 0; }
.popup-menu-item:checked:focus, .popup-menu-item:checked:hover { .popup-menu-item:checked:focus, .popup-menu-item:checked:hover {
background-color: #3d4251 !important; }
.popup-menu-item:checked:active {
background-color: #414657 !important; } background-color: #414657 !important; }
.popup-menu-item:checked:active {
background-color: #464b5d !important; }
.popup-menu-item:active { .popup-menu-item:active {
background-color: #3b3f4e; background-color: #3f4454;
color: #fcfcfc; } color: #fcfcfc; }
.popup-menu-item:insensitive { .popup-menu-item:insensitive {
color: rgba(238, 238, 236, 0.5); } color: rgba(238, 238, 236, 0.5); }
@ -387,7 +387,7 @@ StScrollBar {
icon-size: 16px !important; } icon-size: 16px !important; }
.popup-sub-menu { .popup-sub-menu {
background-color: #363a48; background-color: #3b3f4e;
border-radius: 0 0 8px 8px; } border-radius: 0 0 8px 8px; }
.popup-sub-menu .popup-menu-ornament { .popup-sub-menu .popup-menu-ornament {
min-width: 1.09em !important; } min-width: 1.09em !important; }
@ -397,13 +397,13 @@ StScrollBar {
.popup-sub-menu .popup-menu-item:last-child { .popup-sub-menu .popup-menu-item:last-child {
border-radius: 0 0 8px 8px; } border-radius: 0 0 8px 8px; }
.popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover { .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover {
background-color: #414657 !important; }
.popup-sub-menu .popup-menu-item:checked {
background-color: #4c5266 !important; }
.popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover {
background-color: #484d60 !important; }
.popup-sub-menu .popup-menu-item:active {
background-color: #464b5d !important; } background-color: #464b5d !important; }
.popup-sub-menu .popup-menu-item:checked {
background-color: #51576b !important; }
.popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover {
background-color: #4c5266 !important; }
.popup-sub-menu .popup-menu-item:active {
background-color: #4a5063 !important; }
.popup-sub-menu .popup-menu-section .popup-menu-item:last-child:hover, .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:focus { .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:hover, .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:focus {
border-radius: 0; } border-radius: 0; }
.popup-sub-menu .popup-menu-section:last-child .popup-menu-item:last-child { .popup-sub-menu .popup-menu-section:last-child .popup-menu-item:last-child {
@ -551,9 +551,9 @@ StScrollBar {
margin: 2px; margin: 2px;
border-radius: 6px; } border-radius: 6px; }
.calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus { .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus {
background-color: #2b2f3a; }
.calendar .calendar-month-header .pager-button:active {
background-color: #303340; } background-color: #303340; }
.calendar .calendar-month-header .pager-button:active {
background-color: #343845; }
.calendar .calendar-day-base { .calendar .calendar-day-base {
text-align: center; text-align: center;
margin: 2px; margin: 2px;
@ -562,16 +562,16 @@ StScrollBar {
width: 32px !important; width: 32px !important;
border-radius: 99px; } border-radius: 99px; }
.calendar .calendar-day-base:hover { .calendar .calendar-day-base:hover {
background-color: #2b2f3a; } background-color: #303340; }
.calendar .calendar-day-base:focus { .calendar .calendar-day-base:focus {
background-color: #243658; background-color: #243658;
color: #ffffff; color: #ffffff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected {
color: #fcfcfc; color: #fcfcfc;
background-color: #303340; } background-color: #343845; }
.calendar .calendar-day-base:active:focus, .calendar .calendar-day-base:selected:focus { .calendar .calendar-day-base:active:focus, .calendar .calendar-day-base:selected:focus {
background-color: #2e4166; } background-color: #31456b; }
.calendar .calendar-day-base.calendar-day-heading { .calendar .calendar-day-base.calendar-day-heading {
color: #888a8d; color: #888a8d;
padding-top: 6px; padding-top: 6px;
@ -846,10 +846,10 @@ StScrollBar {
border-radius: 8px; border-radius: 8px;
color: #eeeeec; } color: #eeeeec; }
.message-media-control:hover { .message-media-control:hover {
background-color: #363a48; background-color: #3b3f4e;
color: #eeeeec; } color: #eeeeec; }
.message-media-control:active { .message-media-control:active {
background-color: #3b3f4e; background-color: #3f4454;
color: #eeeeec; } color: #eeeeec; }
.message-media-control:insensitive { .message-media-control:insensitive {
color: #959799; } color: #959799; }
@ -885,7 +885,7 @@ StScrollBar {
background-color: #2777ff; background-color: #2777ff;
color: #ffffff; } color: #ffffff; }
.candidate-box:hover { .candidate-box:hover {
background-color: #2b2f3a; background-color: #303340;
color: #f8f8f7; } color: #f8f8f7; }
.candidate-page-button-box { .candidate-page-button-box {
@ -1068,7 +1068,7 @@ StScrollBar {
.audio-selection-device { .audio-selection-device {
border-radius: 16px; } border-radius: 16px; }
.audio-selection-device:hover, .audio-selection-device:focus { .audio-selection-device:hover, .audio-selection-device:focus {
background-color: #2b2f3a; } background-color: #303340; }
.audio-selection-device:active { .audio-selection-device:active {
background-color: #2777ff; background-color: #2777ff;
color: #ffffff; } color: #ffffff; }
@ -1119,7 +1119,7 @@ StScrollBar {
border-radius: 5px; border-radius: 5px;
color: #ffffff; } color: #ffffff; }
.nm-dialog-item:hover { .nm-dialog-item:hover {
background-color: #2b2f3a; } background-color: #303340; }
.nm-dialog-icon { .nm-dialog-icon {
icon-size: 1.09em; } icon-size: 1.09em; }
@ -1294,7 +1294,7 @@ StScrollBar {
transition-duration: 200ms; transition-duration: 200ms;
border-radius: 99px; } border-radius: 99px; }
.screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus { .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus {
background-color: #2b2f3a; } background-color: #303340; }
.screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle { .screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle {
background-color: #d9d9d9; } background-color: #d9d9d9; }
.screenshot-ui-capture-button:active .screenshot-ui-capture-button-circle { .screenshot-ui-capture-button:active .screenshot-ui-capture-button-circle {
@ -1307,7 +1307,7 @@ StScrollBar {
background-color: #360707; } background-color: #360707; }
.screenshot-ui-shot-cast-container { .screenshot-ui-shot-cast-container {
background-color: #2b2f3a; background-color: #303340;
border-radius: 16px; border-radius: 16px;
padding: 3px; padding: 3px;
spacing: 3px; } spacing: 3px; }
@ -1321,9 +1321,9 @@ StScrollBar {
background-color: transparent; background-color: transparent;
border-radius: 13px; } border-radius: 13px; }
.screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus { .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus {
background-color: #363a48; }
.screenshot-ui-shot-cast-button:active {
background-color: #3b3f4e; } background-color: #3b3f4e; }
.screenshot-ui-shot-cast-button:active {
background-color: #3f4454; }
.screenshot-ui-shot-cast-button:checked { .screenshot-ui-shot-cast-button:checked {
background-color: white; background-color: white;
color: black; } color: black; }
@ -1572,8 +1572,8 @@ StScrollBar {
border: 2px solid #2e313d; } border: 2px solid #2e313d; }
.search-entry:hover { .search-entry:hover {
background-color: #363a48; background-color: #3b3f4e;
border-color: #363a48; border-color: #3b3f4e;
color: rgba(238, 238, 236, 0.7); } color: rgba(238, 238, 236, 0.7); }
.search-entry:focus { .search-entry:focus {
@ -2596,14 +2596,38 @@ $_osd_color: if($variant=='light', black, $fg_color);
-slider-handle-radius: 0; } -slider-handle-radius: 0; }
/* Popovers/Menus */ /* Popovers/Menus */
/* .popup-menu-content, .candidate-popup-content {
// menu items padding: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
background-color: #272a34; }
.popup-menu-item { .popup-menu-item {
&.selected, &:active { border: 1px solid transparent;
background-color: $popover_hover_color; border-bottom: 0;
color: $fg_color; margin-top: 0;
} margin-bottom: 0;
} padding-top: 8px;
padding-bottom: 8px; }
.popup-menu-item:checked {
border-color: #0d0e11;
background-color: #23252e !important; }
.popup-sub-menu {
background-color: #23252e;
border: 1px solid #0d0e11;
border-top: 0; }
.popup-sub-menu .popup-menu-item {
padding-top: 7px;
padding-bottom: 7px; }
.popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover {
background-color: #303340 !important; }
.popup-sub-menu .popup-menu-item:checked {
background-color: #3b3f4e !important; }
.popup-sub-menu .popup-menu-item:active {
background-color: #343845 !important; }
.popup-separator-menu-item {
margin: 6px 0; }
/* Message List */ /* Message List */
.message-list .message-list-placeholder, .message-list .message-list-placeholder,

View File

@ -354,21 +354,21 @@ StScrollBar {
.popup-menu-item:rtl { .popup-menu-item:rtl {
padding-right: 6px; } padding-right: 6px; }
.popup-menu-item:focus, .popup-menu-item:hover { .popup-menu-item:focus, .popup-menu-item:hover {
background-color: #f7f7f7 !important; }
.popup-menu-item:focus:active, .popup-menu-item:hover:active {
background-color: #f2f2f2 !important; } background-color: #f2f2f2 !important; }
.popup-menu-item:checked { .popup-menu-item:focus:active, .popup-menu-item:hover:active {
background-color: #ededed !important; } background-color: #ededed !important; }
.popup-menu-item:checked {
background-color: #e8e8e8 !important; }
.popup-menu-item:checked { .popup-menu-item:checked {
margin-bottom: 0; margin-bottom: 0;
box-shadow: inset 0 -1px 0 0 #e0e0e0; box-shadow: inset 0 -1px 0 0 #dbdbdb;
border-radius: 8px 8px 0 0; } border-radius: 8px 8px 0 0; }
.popup-menu-item:checked:focus, .popup-menu-item:checked:hover { .popup-menu-item:checked:focus, .popup-menu-item:checked:hover {
background-color: whitesmoke !important; } background-color: #f0f0f0 !important; }
.popup-menu-item:checked:active { .popup-menu-item:checked:active {
background-color: #fafafa !important; } background-color: whitesmoke !important; }
.popup-menu-item:active { .popup-menu-item:active {
background-color: white; background-color: #fafafa;
color: #50555e; } color: #50555e; }
.popup-menu-item:insensitive { .popup-menu-item:insensitive {
color: rgba(92, 97, 108, 0.5); } color: rgba(92, 97, 108, 0.5); }
@ -387,7 +387,7 @@ StScrollBar {
icon-size: 16px !important; } icon-size: 16px !important; }
.popup-sub-menu { .popup-sub-menu {
background-color: #ededed; background-color: #e8e8e8;
border-radius: 0 0 8px 8px; } border-radius: 0 0 8px 8px; }
.popup-sub-menu .popup-menu-ornament { .popup-sub-menu .popup-menu-ornament {
min-width: 1.09em !important; } min-width: 1.09em !important; }
@ -401,7 +401,7 @@ StScrollBar {
.popup-sub-menu .popup-menu-item:checked { .popup-sub-menu .popup-menu-item:checked {
background-color: white !important; } background-color: white !important; }
.popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover { .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover {
background-color: white !important; } background-color: #fcfcfc !important; }
.popup-sub-menu .popup-menu-item:active { .popup-sub-menu .popup-menu-item:active {
background-color: white !important; } background-color: white !important; }
.popup-sub-menu .popup-menu-section .popup-menu-item:last-child:hover, .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:focus { .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:hover, .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:focus {
@ -551,9 +551,9 @@ StScrollBar {
margin: 2px; margin: 2px;
border-radius: 6px; } border-radius: 6px; }
.calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus { .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus {
background-color: #f7f7f7; }
.calendar .calendar-month-header .pager-button:active {
background-color: #f2f2f2; } background-color: #f2f2f2; }
.calendar .calendar-month-header .pager-button:active {
background-color: #ededed; }
.calendar .calendar-day-base { .calendar .calendar-day-base {
text-align: center; text-align: center;
margin: 2px; margin: 2px;
@ -562,16 +562,16 @@ StScrollBar {
width: 32px !important; width: 32px !important;
border-radius: 99px; } border-radius: 99px; }
.calendar .calendar-day-base:hover { .calendar .calendar-day-base:hover {
background-color: #f7f7f7; } background-color: #f2f2f2; }
.calendar .calendar-day-base:focus { .calendar .calendar-day-base:focus {
background-color: #d4e4ff; background-color: #d4e4ff;
color: #ffffff; color: #ffffff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected {
color: #50555e; color: #50555e;
background-color: #f2f2f2; } background-color: #ededed; }
.calendar .calendar-day-base:active:focus, .calendar .calendar-day-base:selected:focus { .calendar .calendar-day-base:active:focus, .calendar .calendar-day-base:selected:focus {
background-color: #cadaf5; } background-color: #c6d6f1; }
.calendar .calendar-day-base.calendar-day-heading { .calendar .calendar-day-base.calendar-day-heading {
color: #aeb0b6; color: #aeb0b6;
padding-top: 6px; padding-top: 6px;
@ -849,7 +849,7 @@ StScrollBar {
background-color: white; background-color: white;
color: #5c616c; } color: #5c616c; }
.message-media-control:active { .message-media-control:active {
background-color: white; background-color: #fafafa;
color: #5c616c; } color: #5c616c; }
.message-media-control:insensitive { .message-media-control:insensitive {
color: #bbbdc2; } color: #bbbdc2; }
@ -885,7 +885,7 @@ StScrollBar {
background-color: #2777ff; background-color: #2777ff;
color: #ffffff; } color: #ffffff; }
.candidate-box:hover { .candidate-box:hover {
background-color: #f7f7f7; background-color: #f2f2f2;
color: #50555e; } color: #50555e; }
.candidate-page-button-box { .candidate-page-button-box {
@ -1068,7 +1068,7 @@ StScrollBar {
.audio-selection-device { .audio-selection-device {
border-radius: 16px; } border-radius: 16px; }
.audio-selection-device:hover, .audio-selection-device:focus { .audio-selection-device:hover, .audio-selection-device:focus {
background-color: #f7f7f7; } background-color: #f2f2f2; }
.audio-selection-device:active { .audio-selection-device:active {
background-color: #2777ff; background-color: #2777ff;
color: #ffffff; } color: #ffffff; }
@ -1119,7 +1119,7 @@ StScrollBar {
border-radius: 5px; border-radius: 5px;
color: #ffffff; } color: #ffffff; }
.nm-dialog-item:hover { .nm-dialog-item:hover {
background-color: #f7f7f7; } background-color: #f2f2f2; }
.nm-dialog-icon { .nm-dialog-icon {
icon-size: 1.09em; } icon-size: 1.09em; }
@ -1294,7 +1294,7 @@ StScrollBar {
transition-duration: 200ms; transition-duration: 200ms;
border-radius: 99px; } border-radius: 99px; }
.screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus { .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus {
background-color: #f7f7f7; } background-color: #f2f2f2; }
.screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle { .screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle {
background-color: #d9d9d9; } background-color: #d9d9d9; }
.screenshot-ui-capture-button:active .screenshot-ui-capture-button-circle { .screenshot-ui-capture-button:active .screenshot-ui-capture-button-circle {
@ -1307,7 +1307,7 @@ StScrollBar {
background-color: #360707; } background-color: #360707; }
.screenshot-ui-shot-cast-container { .screenshot-ui-shot-cast-container {
background-color: #f7f7f7; background-color: #f2f2f2;
border-radius: 16px; border-radius: 16px;
padding: 3px; padding: 3px;
spacing: 3px; } spacing: 3px; }
@ -1323,7 +1323,7 @@ StScrollBar {
.screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus { .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus {
background-color: white; } background-color: white; }
.screenshot-ui-shot-cast-button:active { .screenshot-ui-shot-cast-button:active {
background-color: white; } background-color: #fafafa; }
.screenshot-ui-shot-cast-button:checked { .screenshot-ui-shot-cast-button:checked {
background-color: white; background-color: white;
color: black; } color: black; }
@ -2592,14 +2592,38 @@ $_osd_color: if($variant=='light', black, $fg_color);
-slider-handle-radius: 0; } -slider-handle-radius: 0; }
/* Popovers/Menus */ /* Popovers/Menus */
/* .popup-menu-content, .candidate-popup-content {
// menu items padding: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
background-color: #fafafa; }
.popup-menu-item { .popup-menu-item {
&.selected, &:active { border: 1px solid transparent;
background-color: $popover_hover_color; border-bottom: 0;
color: $fg_color; margin-top: 0;
} margin-bottom: 0;
} padding-top: 8px;
padding-bottom: 8px; }
.popup-menu-item:checked {
border-color: #d9d9d9;
background-color: #ffffff !important; }
.popup-sub-menu {
background-color: #ffffff;
border: 1px solid #d9d9d9;
border-top: 0; }
.popup-sub-menu .popup-menu-item {
padding-top: 7px;
padding-bottom: 7px; }
.popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover {
background-color: #f2f2f2 !important; }
.popup-sub-menu .popup-menu-item:checked {
background-color: #e8e8e8 !important; }
.popup-sub-menu .popup-menu-item:active {
background-color: #ededed !important; }
.popup-separator-menu-item {
margin: 6px 0; }
/* Message List */ /* Message List */
.message-list .message-list-placeholder, .message-list .message-list-placeholder,

View File

@ -38,15 +38,43 @@ $_osd_color: if($variant=='light', black, $fg_color);
} }
/* Popovers/Menus */ /* Popovers/Menus */
/* .popup-menu-content {
// menu items padding: 4px;
box-shadow: 0 2px 4px transparentize(black, .8);
background-color: $base_color;
}
.popup-menu-item { .popup-menu-item {
&.selected, &:active { border: 1px solid transparent;
background-color: $popover_hover_color; border-bottom: 0;
color: $fg_color; margin-top: 0;
margin-bottom: 0;
padding-top: 8px;
padding-bottom: 8px;
&:checked {
border-color: $borders_color;
background-color: $bg_color!important;
} }
} }
.popup-sub-menu {
background-color: $bg_color;
border: 1px solid $borders_color;
border-top: 0;
.popup-menu-item {
padding-top: 7px;
padding-bottom: 7px;
&:focus, &:hover { background-color: $hover_bg_color!important; }
&:checked { background-color: $checked_bg_color!important; }
&:active { background-color: $active_bg_color!important; }
}
}
.popup-separator-menu-item { margin: 6px 0; }
/* Message List */ /* Message List */
.message-list .message-list-placeholder, .message-list .message-list-placeholder,
.message-list-controls { .message-list-controls {

View File

@ -36,15 +36,15 @@ $base_border_radius: 8px;
$modal_radius: $base_border_radius*2; // 24px $modal_radius: $base_border_radius*2; // 24px
// derived hover colors // derived hover colors
$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%)); $hover_bg_color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 4%));
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 4%)); $hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 4%));
// derived active colors // derived active colors
$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%)); $active_bg_color: if($variant=='light', darken($base_color, 5%), lighten($base_color, 6%));
$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 6%)); $active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 6%));
// derived checked colors // derived checked colors
$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%)); $checked_bg_color: if($variant=='light', darken($base_color, 7%), lighten($base_color, 9%));
$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%)); $checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%));
// fonts // fonts

View File

@ -1,3 +1,15 @@
39c39
< $hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%));
---
> $hover_bg_color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 4%));
43c43
< $active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%));
---
> $active_bg_color: if($variant=='light', darken($base_color, 5%), lighten($base_color, 6%));
47c47
< $checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%));
---
> $checked_bg_color: if($variant=='light', darken($base_color, 7%), lighten($base_color, 9%));
51c51 51c51
< $base_font_size: 11; < $base_font_size: 11;
--- ---