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