1// When color definition differs for dark and light variant, 2// it gets @if ed depending on $variant 3 4@import 'color-palette'; 5 6@function gtkalpha($c, $a) { 7 @return unquote("alpha(#{$c}, #{$a})"); 8} 9 10@function fade($c) { 11 @return mix($c, $blue_grey_900, 50%); 12} 13 14// Foreground colors 15$dark_fg_color: rgba($black, 0.87); 16$light_fg_color: $white; 17 18$fg_color: if($variant == 'light', rgba($black, 0.75), $white); 19$button_fg_color: if($variant == 'light', rgba($black, 0.65), rgba($white, 0.8)); // extra fg color for raised buttons 20$secondary_fg_color: if($variant == 'light', rgba($black, 0.55), rgba($white, 0.7)); 21$hint_fg_color: if($variant == 'light', rgba($black, 0.38), rgba($white, 0.5)); 22$disabled_fg_color: if($variant == 'light', rgba($black, 0.38), rgba($white, 0.5)); 23$disabled_secondary_fg_color: if($variant == 'light', rgba($black, 0.26), rgba($white, 0.3)); 24$track_color: if($variant == 'light', rgba($black, 0.2), rgba($white, 0.2)); 25$divider_color: if($variant == 'light', rgba($black, 0.08), rgba($white, 0.08)); 26 27$titlebar_fg_color: if($titlebar == 'light', rgba($black, 0.75), $white); 28$titlebar_secondary_fg_color: if($titlebar == 'light', rgba($black, 0.54), rgba($white, 0.7)); 29$titlebar_hint_fg_color: if($titlebar == 'light', rgba($black, 0.38), rgba($white, 0.5)); 30$titlebar_disabled_fg_color: if($titlebar == 'light', rgba($black, 0.38), rgba($white, 0.5)); 31$titlebar_disabled_secondary_fg_color: if($titlebar == 'light', rgba($black, 0.26), rgba($white, 0.3)); 32$titlebar_track_color: if($titlebar == 'light', rgba($black, 0.26), rgba($white, 0.3)); 33$titlebar_divider_color: if($titlebar == 'light', rgba($black, 0.12), rgba($white, 0.12)); 34 35$inverse_fg_color: $white; 36$inverse_secondary_fg_color: rgba($white, 0.7); 37$inverse_hint_fg_color: rgba($white, 0.5); 38$inverse_disabled_fg_color: rgba($white, 0.5); 39$inverse_disabled_secondary_fg_color: rgba($white, 0.3); 40$inverse_track_color: rgba($white, 0.3); 41$inverse_divider_color: rgba($white, 0.12); 42 43$panel_fg_color: if($titlebar == 'light', rgba($white, 0.8), rgba($white, 0.8)); 44$panel_secondary_fg_color: if($titlebar == 'light', rgba($white, 0.68), rgba($white, 0.68)); 45$panel_hint_fg_color: if($titlebar == 'light', rgba($white, 0.5), rgba($white, 0.5)); 46$panel_disabled_fg_color: if($titlebar == 'light', rgba($white, 0.5), rgba($white, 0.5)); 47$panel_disabled_secondary_fg_color: if($titlebar == 'light', rgba($white, 0.3), rgba($white, 0.3)); 48$panel_track_color: if($titlebar == 'light', rgba($white, 0.3), rgba($white, 0.3)); 49$panel_divider_color: if($titlebar == 'light', rgba($white, 0.12), rgba($white, 0.12)); 50 51// Background colors 52$bg_color: if($variant == 'light', $blue_grey_50, fade($blue_grey_800)); 53$base_color: if($variant == 'light', $white, fade($blue_grey_850)); 54$alt_base_color: if($variant == 'light', darken($bg_color, 3%), lighten($bg_color, 3%)); 55$lighter_bg_color: if($variant == 'light', $blue_grey_50, $blue_grey_750); 56$alt_lighter_bg_color: if($variant == 'light', $blue_grey_100, fade($blue_grey_800)); // for gnome-shell sub menu 57$darker_bg_color: if($variant == 'light', $blue_grey_200, fade($blue_grey_900)); 58$keyboard_bg_color: if($variant == 'light', $blue_grey_50, fade($blue_grey_800)); // for gnome-shell keyboard 59$alt_keyboard_bg_color: if($variant == 'light', $blue_grey_200, fade($blue_grey_900)); // for gnome-shell keyboard 60 61$button_bg_color: if($variant == 'light', $base_color, $lighter_bg_color); 62 63$titlebar_bg_color: if($titlebar == 'light', $white, fade($blue_grey_850)); 64$alt_titlebar_bg_color: if($titlebar == 'light', $blue_grey_50, $blue_grey_800); 65 66$sidebar_bg_color: if($variant == 'light', $white, $blue_grey_850); 67$alt_sidebar_bg_color: if($variant == 'light', $white, $blue_grey_850); 68 69$panel_bg_color: rgba($blue_grey_900, $secondary_opacity + 0.1); 70$alt_panel_bg_color: rgba($blue_grey_800, $secondary_opacity + 0.1); 71$inverse_panel_bg_color: rgba($inverse_fg_color, 0.1); 72$solid_panel_bg_color: if($titlebar == 'dark', $blue_grey_900, $blue_grey_900); 73$opaque_panel_bg_color: if($titlebar == 'dark', $blue_grey_900, $blue_grey_900); // for Unity panel which cannot use translucent colors 74 75$gdm_bg_color: if($variant == 'light', $blue_grey_800, $blue_grey_900); 76 77$menu_bg_color: if($titlebar == 'light' and $variant == 'light', $base_color, $blue_grey_850); 78$menu_fg_color: if($titlebar == 'light' and $variant == 'light', rgba($black, 0.54), rgba($white, 0.7)); 79$menu_disabled_fg: if($titlebar == 'light' and $variant == 'light', rgba($black, 0.26), rgba($white, 0.3)); 80$menu_border_color: if($titlebar == 'light' and $variant == 'light', rgba($black, 0.1), rgba($white, 0.1)); 81 82$popover_bg: if($variant == 'light', $grey_850, $lighter_bg_color); 83$popover_fg: rgba($white, 0.8); 84$popover_disabled_fg: rgba($white, 0.3); 85$popover_border: rgba($white, 0.12); 86 87$fill_color: gtkalpha(currentColor, $lower_opacity); 88$semi_fill_color: gtkalpha(currentColor, $lower_opacity / 2); 89$row_fill_color: gtkalpha(currentColor, 0.05); 90 91// Misc colors 92$primary_color: #5657f5; 93$alt_primary_color: #5C6BC0; 94$progress_color: #5D7DFB; 95$sidebar_color: #F5F6FA; 96$accent_color: $deep_purple_A200; 97$disabled_accent_color: rgba($accent_color, 0.5); 98 99$theme_color_top: #716ffb; 100$theme_color_middle: #6C6AF2; 101$theme_color_bottom: #4648FB; 102$theme_image: linear-gradient(to bottom, $theme_color_middle, $theme_color_bottom); 103$header_theme_image: linear-gradient(to bottom, $theme_color_top, $theme_color_middle); 104 105$link_color: $primary_color; 106$visited_link_color: $purple_A200; 107 108$warning_color: $orange_A700; 109$error_color: $deep_orange_A700; 110$success_color: $green_A700; 111 112$suggested_color: $accent_color; 113$destructive_color: $red_A200; 114 115$info_bg_color: $green_400; 116$question_bg_color: $blue_400; 117$warning_bg_color: $orange_400; 118$error_bg_color: $red_400; 119 120$suggested_image: linear-gradient(to bottom, $light_blue_300, $blue_400); 121$destructive_image: linear-gradient(to bottom, $red_400, $red_A200); 122$progress_image: linear-gradient(to left, $purple_300, $deep_purple_400); 123 124$border_color: if($variant == 'light', rgba($black, 0.08), rgba($white, 0.08)); 125$solid_border_color: if($variant =='light', darken($bg_color, 8%), lighten($bg_color, 8%)); 126$alt_border_color: rgba($black, 0.2); // for non-native GTK+ apps (e.g. Firefox and Chrome) 127$highlight_color: if($variant == 'light', rgba($white, 0.4), rgba($white, 0.1)); 128$titlebar_highlight_color: if($titlebar == 'dark', rgba($white, 0.1), rgba($white, 0.0)); 129$alt_highlight_color: rgba($white, 0.2); // for selection-mode headerbar which colored with $primary_color 130$titlebar_indicator_color: if($titlebar == 'dark', currentColor, $primary_color); 131 132// for Electron/Atom menu which cannot use translucent colors 133$opaque_fg_color: if($variant == 'light', $blue_grey_900, $white); 134$opaque_secondary_fg_color: if($variant == 'light', $blue_grey_600, mix($white, $base_color, percentage(0.7))); 135$opaque_disabled_fg_color: if($variant == 'light', $blue_grey_500, mix($white, $base_color, percentage(0.5))); 136$opaque_divider_color: if($variant == 'light', $blue_grey_300, mix($white, $base_color, percentage(0.12))); 137 138// FIXME: gtk's @placeholder_text_color API really should use $secondary_fg_color, 139// but it doesn't work with translucent colors. So we use opaque colors instead. 140$placeholder_text_color: if($variant == 'light', 141 mix($black, $base_color, percentage(0.54)), 142 mix($white, $base_color, percentage(0.7))); 143