| 1 | // Role assignments for the Darkmatter palette. |
| 2 | // |
| 3 | // Ported from Nordic's _colors.scss and kept variable-for-variable compatible, |
| 4 | // so every widget partial compiles unchanged. Where a derivation is inherited |
| 5 | // it is left alone; where Nordic's base was mid-dark and Darkmatter's is |
| 6 | // near-black, a darken() would bottom out at black — those few are noted and |
| 7 | // resolved against a palette step instead. |
| 8 | |
| 9 | // Main definitions |
| 10 | $base_color: $dm_base; |
| 11 | $text_color: $dm_fg; |
| 12 | $bg_color: $dm_bg; |
| 13 | $fg_color: $dm_fg; |
| 14 | $switch_bg: if($variant == 'light', #ffffff, transparentize(black,1)); |
| 15 | |
| 16 | $main_dark_color: $dm_dark; |
| 17 | $_sidebar_color: $dm_dark; |
| 18 | |
| 19 | // Primary colors |
| 20 | // The scheme carries no green, blue or purple. Rather than import colors from |
| 21 | // outside it, the roles that Nordic spread across six hues collapse onto the |
| 22 | // three the scheme does have. |
| 23 | $lime: $dm_teal; |
| 24 | $red: $dm_red; |
| 25 | $orange: $dm_orange; |
| 26 | $yellow: $dm_cream; |
| 27 | $purple: $dm_cream; |
| 28 | $darkpurple: $dm_teal; |
| 29 | $blue: $dm_teal; |
| 30 | $cyan: $dm_orange; // drives suggested-action buttons; must match selection |
| 31 | $slider: $dm_orange; |
| 32 | $teal: $dm_teal; |
| 33 | |
| 34 | $selected_fg_color: $dm_bg; |
| 35 | $selected_bg_color: $dm_orange; |
| 36 | $selected_borders_color: darken($selected_bg_color, 10%); |
| 37 | $borders_color: $dm_border; // Nordic darkens the dark color; here that is black |
| 38 | $borders_edge: if($variant == 'light', transparentize(white, 0.8), transparentize(white, 0.9)); |
| 39 | $link_color: $dm_orange; |
| 40 | $link_visited_color: transparentize($link_color, 0.5); |
| 41 | $top_highlight: if($variant == 'light', transparentize(white, 0.8), transparentize(white, 0.9)); |
| 42 | $bottom_highlight: if($variant == 'light', transparentize(black, 0.8), transparentize(black, 0.9)); |
| 43 | $dark_fill: mix($borders_color, $bg_color, 35%); |
| 44 | $headerbar_color: $dm_dark; |
| 45 | $headerbar_fg_color: $text_color; |
| 46 | $menu_color: if($variant == 'light', $base_color, mix($bg_color, $base_color, 20%)); |
| 47 | $popover_bg_color: $base_color; |
| 48 | $popover_hover_color: $dm_hover; // Nordic darkens; on near-black hover must go lighter |
| 49 | |
| 50 | $scrollbar_bg_color: mix($base_color, $bg_color, 50%); |
| 51 | $scrollbar_slider_color: $dm_dim; // Nordic's fg/bg mix lands near-white here; too loud |
| 52 | $scrollbar_slider_hover_color: $dm_subtle; |
| 53 | $scrollbar_slider_active_color: $dm_orange; |
| 54 | |
| 55 | $warning_color: $dm_cream; |
| 56 | $error_color: $dm_red; |
| 57 | $success_color: $dm_teal; |
| 58 | $destructive_color: $dm_red; |
| 59 | $suggested_color: $dm_orange; |
| 60 | |
| 61 | $osd_fg_color: $fg_color; |
| 62 | $osd_text_color: $text_color; |
| 63 | $osd_bg_color: transparentize($dm_dark, 0.07); |
| 64 | $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); |
| 65 | $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%); |
| 66 | $osd_borders_color: $borders_color; |
| 67 | |
| 68 | $sidebar_bg_color: mix($bg_color, $base_color, 50%); |
| 69 | $base_hover_color: transparentize($fg_color, 0.95); |
| 70 | |
| 71 | $tooltip_borders_color: $borders_color; |
| 72 | // Deeper than Nordic's 0.9: on near-black surfaces a 10% shadow is invisible, |
| 73 | // and popovers need to separate from the window behind them. |
| 74 | $shadow_color: transparentize(black, 0.75); |
| 75 | |
| 76 | $text_shadow_color: if($variant == 'dark', $shadow_color, transparentize(white, 0.9)); |
| 77 | $icon_shadow_color: $text_shadow_color; |
| 78 | |
| 79 | $drop_target_color: $dm_orange; |
| 80 | |
| 81 | // Infobar colors |
| 82 | $info_color: $dm_teal; |
| 83 | $question_color: $dm_teal; |
| 84 | |
| 85 | // Panel colors |
| 86 | $panel_bg_color: transparentize($main_dark_color, 0); |
| 87 | $panel_fg_color: $fg_color; |
| 88 | $panel_borders_color: transparentize($main_dark_color, 0.8); |
| 89 | |
| 90 | // Disabled state colors |
| 91 | $insensitive_fg_color: mix($fg_color, $bg_color, 50%); |
| 92 | $insensitive_bg_color: mix($bg_color, $base_color, 60%); |
| 93 | $insensitive_base_color: darken($base_color, 5%); |
| 94 | $insensitive_borders_color: transparentize($borders_color, 0.7); |
| 95 | |
| 96 | // Backdrop state colors |
| 97 | $backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%)); |
| 98 | $backdrop_text_color: mix($text_color, $backdrop_base_color, 80%); |
| 99 | $backdrop_bg_color: $bg_color; |
| 100 | $backdrop_headerbar_bg_color: $headerbar_color; |
| 101 | $backdrop_headerbar_fg_color: if($variant == 'light', transparentize($headerbar_fg_color, 0.5), transparentize($headerbar_fg_color, 0.2)); |
| 102 | $backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%); |
| 103 | $backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%)); |
| 104 | $backdrop_selected_bg_color: transparentize($selected_bg_color, 0.4); |
| 105 | $backdrop_selected_fg_color: if($variant == 'light', $selected_fg_color, transparentize($selected_fg_color, 0.5)); |
| 106 | $backdrop_borders_color: mix($borders_color, $bg_color, 90%); |
| 107 | $backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%); |
| 108 | $backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%); |
| 109 | |
| 110 | $backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%); |
| 111 | $backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); |
| 112 | |
| 113 | $backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%)); |
| 114 | |
| 115 | $scale_bg: if($variant == 'light', transparentize(black, 0.86), transparentize(white, 0.86)); |
| 116 | $scale_disabled_bg: if($variant == 'light', transparentize(black, 0.94), transparentize(white, 0.94)); |
| 117 | $suggested_bg_color: linear-gradient(to right, $dm_orange 0%, $dm_orange 100%); |
| 118 | $destructive_bg_color: linear-gradient(to right, $red, $red); |
| 119 | $menu_shadow_color: if($variant == 'light', transparentize(rgb(122, 122, 122), 0.6), $borders_color); |