Skip to content

Commit 1529548

Browse files
fujimo-tfujimo-t
committed
GNOME 48
1 parent 5c3b677 commit 1529548

29 files changed

+746
-471
lines changed

‎gnome-shell-sass/_common.scss‎

Lines changed: 45 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ $forced_circular_radius: 999px;
3939
// radii of things that display over other things, e.g. popovers
4040
$modal_radius: $base_border_radius * 2;
4141

42+
// radii of dialogs
43+
$alert_radius: 18px;
44+
4245
// Chroma key to flag when a background-color is always occluded, not visible.
4346
// This allows any box-shadow behind it to be rendered more efficiently by
4447
// omitting the middle rectangle.
@@ -117,11 +120,11 @@ stage {
117120
}
118121

119122
%default_button {
120-
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);
121-
&:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
122-
&:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
123-
&:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
124-
&:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
123+
@include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);
124+
&:focus { @include button(focus, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
125+
&:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
126+
&:insensitive { @include button(insensitive, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
127+
&:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
125128
}
126129

127130
// items in popover menus
@@ -172,8 +175,9 @@ stage {
172175
%entry_common {
173176
border-radius: $base_border_radius;
174177
padding: $base_padding * 1.5 $base_padding * 1.5;
175-
selection-background-color: $selected_bg_color;
176-
selected-color: $selected_fg_color;
178+
179+
selection-background-color: st-transparentize(-st-accent-color, 0.7);
180+
selected-color: $fg_color;
177181
}
178182

179183
%entry {
@@ -188,58 +192,49 @@ stage {
188192
}
189193
}
190194

191-
// buttons in dialogs/notifications
192-
// lighter in color and have a greater radius
193-
%bubble_button {
194-
padding: $base_padding * 2;
195-
font-weight: bold !important;
196-
197-
&:ltr {margin-right: 1px;}
198-
&:rtl {margin-left: 1px;}
199-
200-
// needs a 1px adjustment to fit exactly into the outer radius
201-
$bubble_button_radius: $modal_radius - 1px;
202-
203-
@include button(normal, $style: bubble);
204-
&:focus { @include button(focus, $style: bubble);}
205-
&:hover { @include button(hover, $style: bubble);}
206-
&:active { @include button(active, $style: bubble);}
207-
&:checked { @include button(checked, $style: bubble);}
208-
&:insensitive { @include button(insensitive, $style: bubble);}
209-
210-
&:first-child:ltr {
211-
border-radius: 0 0 0 $bubble_button_radius;
212-
}
213-
214-
&:last-child:ltr {
215-
border-radius: 0 0 $bubble_button_radius;
216-
margin-right: 0 !important;
217-
}
195+
// buttons in notifications
196+
// use a rounded style and have a lighter background
197+
%notification_button {
198+
font-weight: bold;
199+
padding: $base_padding $base_padding * 2;
200+
border-radius: $base_border_radius;
218201

219-
&:first-child:rtl {
220-
border-radius: 0 0 $bubble_button_radius;
221-
}
202+
@include button(normal, $style: notification);
203+
&:focus { @include button(focus, $style: notification);}
204+
&:hover { @include button(hover, $style: notification);}
205+
&:active { @include button(active, $style: notification);}
206+
&:checked { @include button(checked, $style: notification);}
207+
&:insensitive { @include button(insensitive, $style: notification);}
208+
}
222209

223-
&:last-child:rtl {
224-
border-radius: 0 0 0 $bubble_button_radius;
225-
margin-left: 0 !important;
226-
}
210+
// buttons in dialogs
211+
%dialog_button {
212+
font-weight: bold;
213+
padding: $base_padding * 2;
214+
border-radius: $base_border_radius * 1.5;
227215

228-
&:first-child:last-child {
229-
border-radius: 0 0 $bubble_button_radius $bubble_button_radius;
230-
margin-left: 0 !important;
231-
margin-right: 0 !important;
232-
}
216+
@include button(normal, $style: dialog);
217+
&:focus { @include button(focus, $style: dialog);}
218+
&:hover { @include button(hover, $style: dialog);}
219+
&:active { @include button(active, $style: dialog);}
220+
&:checked { @include button(checked, $style: dialog);}
221+
&:insensitive { @include button(insensitive, $style: dialog);}
233222
}
234223

235224
// tooltip
236225
%tooltip {
237-
color: $fg_color;
238-
background-color: $bg_color;
239-
border: 1px solid $borders_color;
226+
background-color: transparentize(black, 0.1);
227+
border: 1px solid transparentize($light_1, 0.9);
228+
color: $light_1;
229+
240230
border-radius: $forced_circular_radius;
241231
padding: $base_padding $base_padding * 2;
242232
text-align: center;
233+
234+
@if $contrast == 'high' {
235+
background-color: black;
236+
border-color: $hc_inset_color;
237+
}
243238
}
244239

245240
/* General Typography */
@@ -285,7 +280,7 @@ stage {
285280

286281
%smaller {
287282
font-weight: 400;
288-
@include fontsize(8pt);
283+
@include fontsize(9pt);
289284
}
290285

291286
%monospace {font-family: monospace;}

‎gnome-shell-sass/_default-colors.scss‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
// Named Colors
22

33
// base colors
4-
$_base_color_dark: desaturate($dark_4, 100%);
5-
$_base_color_light: desaturate($light_2, 100%);
4+
$_base_color_dark: #222226;
5+
$_base_color_light: #fafafb;
6+
7+
// accent colors
8+
$accent_color: if($variant== 'light', -st-accent-color, st-mix(-st-accent-color, $light_1, 60%));
69

710
// colors for destructive elements
811
$destructive_bg_color: if($variant == 'light', $red_3, $red_4);
@@ -14,41 +17,35 @@ $success_bg_color: if($variant == 'light', $green_4, $green_5);
1417
$success_fg_color: $light_1;
1518
$success_color: $success_bg_color;
1619

17-
$warning_bg_color: if($variant == 'light', $yellow_4, $yellow_3);
20+
$warning_bg_color: if($variant == 'light', $yellow_5, #cd9309); // uses darker off-palette yellow
1821
$warning_fg_color: transparentize(black, .2);
1922
$warning_color: $warning_bg_color;
2023

2124
$error_bg_color: if($variant == 'light', $red_3, $red_4);
2225
$error_fg_color: $light_1;
2326
$error_color: $error_bg_color;
2427

25-
// colors for selected or default elements
26-
$selected_bg_color: if($variant == 'light', $blue_4, $blue_3);
27-
$selected_fg_color: $light_1;
28-
2928
// link colors
30-
$link_color: if($variant == 'light', $blue_4, $blue_2);
31-
$link_visited_color: transparentize($link_color, .6);
29+
$link_color: if($variant == 'light', st-darken(-st-accent-color, 10%), st-lighten(-st-accent-color, 20%));
30+
$link_visited_color: st-transparentize($link_color, .6);
3231

3332
// special cased widget definitions
3433
$background_mix_factor: if($variant == 'light', 12%, 9%); // used to boost the color of backgrounds in different variants
35-
$border_opacity: if($variant == 'light', .85, .9); // change the border opacity in different variants
3634

3735
// shadows
3836
$shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2));
3937
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
4038

41-
// focus colors
42-
$focus_color: $selected_bg_color;
43-
$focus_border_color: transparentize($focus_color, 0.5);
39+
// border opacities
40+
$border_opacity: if($variant == 'light', .85, .9); // change the border opacity in different variants
41+
$focus_border_opacity: .2;
4442

4543
// High Contrast overrides
4644
@if $contrast == 'high' {
4745
// increase border opacity
4846
$border_opacity: .5;
47+
$focus_border_opacity: .1;
4948
// remove shadows
5049
$shadow_color: transparent;
5150
$text_shadow_color: transparent;
52-
// less transparent focus color
53-
$focus_border_color: transparentize($focus_color, 0.2);
5451
}

‎gnome-shell-sass/_drawing.scss‎

Lines changed: 50 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616
// $mc: mix color, defined in High Contrast specific stylesheet
1717
// $mf: mix factor (%), defined in High Contrast specific stylesheet
1818
//
19-
@return mix($c, $mc, $mf);
19+
@return st-mix($c, $mc, $mf);
2020
}
2121

2222
// Function to mix the color and make the focus background
23-
@function focus_bg_color($bg, $fc:$focus_color) {
24-
@return mix($fc, $bg, 5%);
23+
@function focus_bg_color($bg, $fc:$accent_color) {
24+
@return st-mix($fc, $bg, 5%);
2525
}
2626

2727
//
@@ -54,10 +54,13 @@
5454
}
5555

5656
// Draw the focus ring
57-
@mixin focus_ring($width: 2px, $fc: $focus_border_color, $border: false) {
58-
box-shadow: inset 0 0 0 $width $fc !important;
57+
@mixin focus_ring($width: 2px, $fc: $accent_color, $border: false) {
58+
59+
$focus_color: st-transparentize($fc, $focus_border_opacity);
60+
61+
box-shadow: inset 0 0 0 $width $focus_color !important;
5962
@if $border {
60-
border:$width solid $fc !important;
63+
border:$width solid $focus_color !important;
6164
box-shadow: none;
6265
}
6366
}
@@ -90,7 +93,7 @@
9093
// entry colors
9194
$entry_fg_color: $c;
9295
$entry_bg_color: mix($c, $bc, $background_mix_factor);
93-
$entry_focus_color: $focus_color;
96+
$entry_focus_color: $accent_color;
9497

9598
// entry color overrides for lockscreen style
9699
@if $style == 'lockscreen' {
@@ -128,7 +131,7 @@
128131

129132
// focus styles
130133
@if $type == 'focus' {
131-
@include focus_ring();
134+
@include focus_ring($fc:$entry_focus_color);
132135
background-color: focus_bg_color($entry_bg_color);
133136
color: $entry_fg_color;
134137

@@ -160,12 +163,12 @@
160163
// - normal, focus, hover, active, checked, insensitive, default, undecorated
161164
// $c: button bg color, derived from bg_color
162165
// $tc: button text color, derived from fg_color
163-
// $style: button style, possible values: card, bubble, flat, default
166+
// $style: button style, possible values: card, notification, dialog, flat, default
164167
// $always_dark: override the light theme check to use dark colors, true or false
165168
//
166169

167170
// mix input colors to get button background color
168-
$button_bg_color: mix($tc, $c, $background_mix_factor);
171+
$button_bg_color: st-mix($tc, $c, $background_mix_factor);
169172

170173
// background color override for card elements
171174
@if $style == 'card' { $button_bg_color: $card_bg_color;}
@@ -187,37 +190,46 @@
187190
}
188191

189192
// button base state background colors
190-
$hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor));
191-
$active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor));
192-
$checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor));
193-
$insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor));
193+
$hover_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $hover_factor), st-lighten($button_bg_color, $hover_factor));
194+
$active_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $active_factor), st-lighten($button_bg_color, $active_factor));
195+
$checked_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $checked_factor), st-lighten($button_bg_color, $checked_factor));
196+
$insensitive_button_bg_color: if($variant == 'light', st-lighten($button_bg_color, $insensitive_factor), st-darken($button_bg_color, $insensitive_factor));
194197

195198
// button extended state background colors
196-
$active_hover_button_bg_color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));
197-
$checked_hover_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor));
198-
$checked_active_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_factor));
199+
$active_hover_button_bg_color: if($variant == 'light', st-darken($active_button_bg_color, $hover_factor), st-lighten($active_button_bg_color, $hover_factor));
200+
$checked_hover_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $hover_factor), st-lighten($checked_button_bg_color, $hover_factor));
201+
$checked_active_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $active_factor), st-lighten($checked_button_bg_color, $active_factor));
199202

200203
// override button background colours if element is always dark
201204
@if $always_dark {
202-
$hover_button_bg_color: lighten($button_bg_color, $hover_factor);
203-
$active_button_bg_color: lighten($button_bg_color, $active_factor);
204-
$checked_button_bg_color: lighten($button_bg_color, $checked_factor);
205-
$insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor);
205+
$hover_button_bg_color: st-lighten($button_bg_color, $hover_factor);
206+
$active_button_bg_color: st-lighten($button_bg_color, $active_factor);
207+
$checked_button_bg_color: st-lighten($button_bg_color, $checked_factor);
208+
$insensitive_button_bg_color: st-darken($button_bg_color, $insensitive_factor);
206209
// extended
207-
$active_hover_button_bg_color: lighten($active_button_bg_color, $hover_factor);
208-
$checked_hover_button_bg_color: lighten($checked_button_bg_color, $hover_factor);
209-
$checked_active_button_bg_color: lighten($checked_button_bg_color, $active_factor);
210+
$active_hover_button_bg_color: st-lighten($active_button_bg_color, $hover_factor);
211+
$checked_hover_button_bg_color: st-lighten($checked_button_bg_color, $hover_factor);
212+
$checked_active_button_bg_color: st-lighten($checked_button_bg_color, $active_factor);
210213
}
211214

212215
// background color override for buttons that use transparency
213-
// styles: notification bubbles, lockscreen
214-
@if $style == 'bubble' or $style == 'lockscreen' {
216+
// styles: dialogs bubbles, lockscreen
217+
@if $style == 'dialog' or $style == 'lockscreen' {
215218
$button_bg_color: transparentize($tc, .9);
216219
$hover_button_bg_color: transparentize($tc, .87);
217220
$active_button_bg_color: transparentize($tc, .84);
218221
$active_hover_button_bg_color: transparentize($tc, .81);
219222
}
220223

224+
// background color overrides for notification style
225+
@if $style == 'notification' {
226+
$button_bg_color: transparentize($tc, .85);
227+
$hover_button_bg_color: transparentize($tc, .7);
228+
$insensitive_button_bg_color: transparentize($tc, .9);
229+
$active_button_bg_color: transparentize($tc, .8);
230+
$active_hover_button_bg_color: transparentize($tc, .8);
231+
}
232+
221233
// flat style overrides
222234
@if $style == 'flat' {
223235
$insensitive_button_bg_color: $button_bg_color;
@@ -283,7 +295,7 @@
283295

284296
// insensitive button
285297
@else if $type == 'insensitive' {
286-
$insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
298+
$insensitive_button_fg_color: if($variant == 'light', st-transparentize($tc, .6), st-transparentize($tc, .5));
287299
color: $insensitive_button_fg_color;
288300
background-color: $insensitive_button_bg_color;
289301

@@ -300,7 +312,7 @@
300312

301313
// use a different focus ring color for default style
302314
@if $style == 'default' {
303-
@include focus_ring($fc:$selected_borders_color);
315+
@include focus_ring($fc:$accent_borders_color);
304316
}
305317
// change background color if style is flat
306318
@if $style == 'flat' {
@@ -348,6 +360,9 @@
348360
&:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $always_dark: $system);}
349361
} @else {
350362
@include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);
363+
// override the mixin to have the flat button always be transparent
364+
// fixes issue with overlapping tiles
365+
background-color: transparent;
351366
&:focus { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
352367
&:hover { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
353368
&:active { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
@@ -357,32 +372,21 @@
357372
}
358373

359374
&:drop {
360-
background-color: transparentize($selected_bg_color, .8);
361-
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2);
375+
background-color: st-transparentize(-st-accent-color, .8);
376+
box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .2);
362377
}
363378
}
364379

365380
// styling for all menuitems in popovers
366-
@mixin menuitem($bg, $style: flat) {
381+
@mixin menuitem($bg) {
367382

368383
// extend common styles
369384
@extend %menuitem;
370385

371-
// lighten the background color always
372-
$bg: lighten($bg,5%);
373-
374-
@if $style == 'flat' {
375-
@include button(undecorated);
376-
} @else {
377-
@include button(normal, $c:$bg);
378-
}
379-
&:focus,
380-
&:hover {
381-
@include button(hover, $c:$bg);
382-
}
383-
&:active {@include button(active, $c:$bg);}
384-
&:checked {@include button(checked, $c:$bg);}
385-
&:insensitive {@include button(insensitive, $c:$bg);}
386+
@include button(undecorated, $c:$bg, $style: flat);
387+
&:active { @include button(active, $c:$bg, $style: flat);}
388+
&:hover, &:selected, &:checked { @include button(hover, $c:$bg, $style: flat);}
389+
&:insensitive { @include button(insensitive, $c:$bg, $style: flat);}
386390
}
387391

388392
// Panel menu/button drawing function

0 commit comments

Comments
 (0)