isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

theme: Standardise text styles

Browse Source 
Initial attempt to use standard text styles, in line with what's
being done for GTK (https://gitlab.gnome.org/GNOME/gtk/issues/1808).

This is just changing the sizes and weights for now. Spacing
adjustments will be required further down the line.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/594
This commit is contained in:
Allan Day 2019-06-19 11:10:28 +01:00
parent 2ccd87ae44
commit 40a772c884
1 changed files with 88 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
data/theme/gnome-shell-sass/_common.scss
View File

@ -187,7 +187,7 @@ StScrollBar {
/* Modal Dialogs */ /* Modal Dialogs */
.headline { font-size: 110%; } .headline { @extend %heading; }
.lightbox { background-color: black; } .lightbox { background-color: black; }
.flashspot { background-color: white; } .flashspot { background-color: white; }
@ -204,8 +204,7 @@ StScrollBar {
} }
.run-dialog-button-box { padding-top: 1em; } .run-dialog-button-box { padding-top: 1em; }
.run-dialog-label { .run-dialog-label {
@include fontsize($font-size + 1.1); @extend %title-4;
font-weight: normal;
color: $fg_color; color: $fg_color;
padding-bottom: .4em; padding-bottom: .4em;
} }
@ -213,8 +212,8 @@ StScrollBar {
} }
.mount-dialog-subject, .mount-dialog-subject,
.end-session-dialog-subject { //this should be a generic header class .end-session-dialog-subject {
@include fontsize($font-size * 1.3); @extend %title-2;
} }
/* Message Dialog */ /* Message Dialog */
@ -234,12 +233,12 @@ StScrollBar {
} }
.message-dialog-title { .message-dialog-title {
font-weight: bold; @extend %title-2;
} }
.message-dialog-subtitle { .message-dialog-subtitle {
@extend %heading;
color: $fg_color; color: $fg_color;
font-weight: bold;
} }
/* End Session Dialog */ /* End Session Dialog */
@ -300,7 +299,7 @@ StScrollBar {
} }
.end-session-dialog-list-header { .end-session-dialog-list-header {
font-weight: bold; @extend %heading;
&:rtl { text-align: right; } &:rtl { text-align: right; }
} }
@ -311,12 +310,11 @@ StScrollBar {
.end-session-dialog-app-list-item-name, .end-session-dialog-app-list-item-name,
.end-session-dialog-session-list-item-name { .end-session-dialog-session-list-item-name {
font-weight: bold; @extend %heading;
} }
.end-session-dialog-app-list-item-description { .end-session-dialog-app-list-item-description {
color: darken($fg_color,5%); color: darken($fg_color,5%);
font-size: 10pt;
} }
/* ShellMountOperation Dialogs */ /* ShellMountOperation Dialogs */
@ -372,11 +370,6 @@ StScrollBar {
&:rtl { padding-left: 17px; } &:rtl { padding-left: 17px; }
} }
.mount-dialog-app-list-item-name {
font-size: 10pt;
}
/* Password or Authentication Dialog */ /* Password or Authentication Dialog */
.prompt-dialog { .prompt-dialog {
@ -386,7 +379,7 @@ StScrollBar {
.message-dialog-main-layout { spacing: 24px; padding: 10px; } .message-dialog-main-layout { spacing: 24px; padding: 10px; }
.message-dialog-content { spacing: 16px; } .message-dialog-content { spacing: 16px; }
.message-dialog-title { color: lighten($fg_color,15%); } .message-dialog-title { @extend %title-2; color: lighten($fg_color,15%); }
} }
.prompt-dialog-description:rtl { .prompt-dialog-description:rtl {
@ -399,13 +392,11 @@ StScrollBar {
} }
.prompt-dialog-error-label { .prompt-dialog-error-label {
font-size: 10pt;
color: $warning_color; color: $warning_color;
padding-bottom: 8px; padding-bottom: 8px;
} }
.prompt-dialog-info-label { .prompt-dialog-info-label {
font-size: 10pt;
padding-bottom: 8px; padding-bottom: 8px;
} }
@ -414,7 +405,6 @@ StScrollBar {
} }
.prompt-dialog-null-label { .prompt-dialog-null-label {
font-size: 10pt;
padding-bottom: 8px; padding-bottom: 8px;
} }
@ -470,7 +460,7 @@ StScrollBar {
} }
.audio-selection-title { .audio-selection-title {
font-weight: bold; @extend %title-2;
text-align: center; text-align: center;
} }
@ -513,7 +503,7 @@ StScrollBar {
.extension-dialog { .extension-dialog {
@extend %bubble-panel; @extend %bubble-panel;
.message-dialog-main-layout { spacing: 24px; padding: 10px; } .message-dialog-main-layout { spacing: 24px; padding: 10px; }
.message-dialog-title { font-weight: normal; color: $fg_color; } .message-dialog-title { @extend %title-2; }
} }
/* Inhibit-Shortcuts Dialog */ /* Inhibit-Shortcuts Dialog */
@ -554,9 +544,9 @@ StScrollBar {
&:ltr { padding: .4em 1.75em .4em 0em; } &:ltr { padding: .4em 1.75em .4em 0em; }
&:rtl { padding: .4em 0em .4em 1.75em; } &:rtl { padding: .4em 0em .4em 1.75em; }
&:checked { &:checked {
@extend %heading;
background-color: $bg_color; background-color: $bg_color;
box-shadow: inset 0 -1px 0px $_bubble_borders_color; box-shadow: inset 0 -1px 0px $_bubble_borders_color;
font-weight: bold;
} }
&.selected { &.selected {
background-color: transparentize(white, if($variant=='light', 0.2, 0.9)); background-color: transparentize(white, if($variant=='light', 0.2, 0.9));
@ -627,7 +617,7 @@ StScrollBar {
min-width: 64px; min-width: 64px;
min-height: 64px; min-height: 64px;
.osd-monitor-label { font-size: 3em; } .osd-monitor-label { @extend %title-1; }
.level { .level {
height: 0.6em; height: 0.6em;
-barlevel-height: 0.6em; -barlevel-height: 0.6em;
@ -800,8 +790,8 @@ StScrollBar {
/* TOP BAR */ /* TOP BAR */
#panel { #panel {
@extend %heading;
background-color: black; background-color: black;
font-weight: bold;
height: 1.86em; height: 1.86em;
font-feature-settings: "tnum"; font-feature-settings: "tnum";
@ -833,9 +823,9 @@ StScrollBar {
} }
.panel-button { .panel-button {
@extend %heading;
-natural-hpadding: 12px; -natural-hpadding: 12px;
-minimum-hpadding: 6px; -minimum-hpadding: 6px;
font-weight: bold;
color: #ccc; color: #ccc;
.app-menu-icon { .app-menu-icon {
@ -932,28 +922,28 @@ StScrollBar {
} }
.datemenu-today-button .day-label { .datemenu-today-button .day-label {
@extend %heading;
} }
.datemenu-today-button .date-label { .datemenu-today-button .date-label {
font-size: 1.5em; @extend %large-title;
font-weight: 300;
} }
.world-clocks-header, .world-clocks-header,
.weather-header, .weather-header,
.events-section-title { .events-section-title,
.calendar-month-label {
@extend %heading;
color: darken($fg_color,40%); color: darken($fg_color,40%);
font-weight: bold;
} }
.weather-header.location { .weather-header.location {
font-weight: normal; @extend %caption;
font-size: 0.9em;
} }
.world-clocks-grid, .world-clocks-grid,
.weather-grid { .weather-grid {
spacing-rows: 0.4em; spacing-rows: 0.8em;
spacing-columns: 0.8em; spacing-columns: 0.8em;
} }
@ -961,35 +951,26 @@ StScrollBar {
spacing: 0.4em; spacing: 0.4em;
} }
.world-clocks-city {
font-weight: bold;
font-size: 0.9em;
}
.world-clocks-time { .world-clocks-time {
color: darken($fg_color,20%); font-feature-settings: "tnum";
font-feature-settings: "tnum";
font-size: 1.2em;
} }
.world-clocks-timezone { .world-clocks-timezone {
color: $fg_color; color: darken($fg_color,40%);
font-feature-settings: "tnum"; font-feature-settings: "tnum";
font-size: 0.9em; @extend %caption;
} }
.weather-forecast-icon { .weather-forecast-icon {
icon-size: 2.18em; icon-size: 32px;
} }
.weather-forecast-time { .weather-forecast-time {
@extend %caption;
color: darken($fg_color,40%); color: darken($fg_color,40%);
font-size: 0.8em;
} }
.calendar-month-label { .calendar-month-label {
color: lighten($fg_color,5%);
font-weight: bold;
padding: 8px 0; padding: 8px 0;
&:focus {} &:focus {}
} }
@ -1007,7 +988,7 @@ StScrollBar {
} }
.calendar-day-base { .calendar-day-base {
font-size: 80%; @extend %caption;
text-align: center; text-align: center;
width: 2.4em; height: 2.4em; width: 2.4em; height: 2.4em;
padding: 0.1em; padding: 0.1em;
@ -1021,9 +1002,8 @@ StScrollBar {
border-color: transparent; //avoid jumparound due to today border-color: transparent; //avoid jumparound due to today
} }
&.calendar-day-heading { //day of week heading &.calendar-day-heading { //day of week heading
color: lighten($fg_color,5%); color: darken($fg_color,40%);
margin-top: 1em; // margin-top: 1em;
font-size: 70%;
} }
} }
.calendar-day { //border collapse hack - see calendar.js .calendar-day { //border collapse hack - see calendar.js
@ -1038,14 +1018,15 @@ StScrollBar {
color: $insensitive_fg_color; color: $insensitive_fg_color;
} }
.calendar-today { .calendar-today {
font-weight: bold; @extend %caption-heading;
//color: lighten($fg_color,10%); //color: lighten($fg_color,10%);
//background-color: darken($bg_color,5%); //background-color: darken($bg_color,5%);
border: 1px solid $_bubble_borders_color; border: 1px solid $_bubble_borders_color;
} }
.calendar-day-with-events { .calendar-day-with-events {
@extend %caption-heading;
color: lighten($fg_color,10%); color: lighten($fg_color,10%);
font-weight: bold;
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg"); background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
} }
.calendar-other-month-day { .calendar-other-month-day {
@ -1053,8 +1034,7 @@ StScrollBar {
opacity: 0.5; opacity: 0.5;
} }
.calendar-week-number { .calendar-week-number {
font-size: 70%; @extend %caption-heading;
font-weight: bold;
width: 2.3em; height: 1.8em; width: 2.3em; height: 1.8em;
border-radius: 2px; border-radius: 2px;
padding: 0.5em 0 0; padding: 0.5em 0 0;
@ -1111,8 +1091,8 @@ StScrollBar {
} }
.message-secondary-bin > .event-time { .message-secondary-bin > .event-time {
@extend %caption;
color: $fg_color; color: $fg_color;
font-size: 0.7em;
/* HACK: the label should be baseline-aligned with a 1em label, /* HACK: the label should be baseline-aligned with a 1em label,
fake this with some bottom padding */ fake this with some bottom padding */
padding-bottom: 0.13em; padding-bottom: 0.13em;
@ -1283,17 +1263,16 @@ StScrollBar {
.nm-dialog-airplane-box { spacing: 12px; } .nm-dialog-airplane-box { spacing: 12px; }
.nm-dialog-airplane-headline { .nm-dialog-airplane-headline {
font-weight: bold; @extend %heading;
text-align: center; text-align: center;
} }
.nm-dialog-airplane-text { color: $fg_color; } .nm-dialog-airplane-text { color: $fg_color; }
.nm-dialog-header-icon { icon-size: 32px; } .nm-dialog-header-icon { icon-size: 32px; }
.nm-dialog-scroll-view { border: 2px solid $borders_color; } .nm-dialog-scroll-view { border: 2px solid $borders_color; }
.nm-dialog-header { font-weight: bold; } .nm-dialog-header { @extend %title-2; }
.nm-dialog-item { .nm-dialog-item {
font-size: 110%;
border-bottom: 1px solid $borders_color; border-bottom: 1px solid $borders_color;
padding: 12px; padding: 12px;
spacing: 20px; spacing: 20px;
@ -1400,7 +1379,7 @@ StScrollBar {
#dash { #dash {
@extend %overview-panel; @extend %overview-panel;
font-size: 9pt; @extend %caption;
padding: 4px 0; padding: 4px 0;
border-radius: 0px 9px 9px 0px; border-radius: 0px 9px 9px 0px;
@ -1615,9 +1594,9 @@ StScrollBar {
border: none; border: none;
} }
// Search status, like "Searching..." and "No results"
%status_text { %status_text {
font-size: 2em; @extend %large-title;
font-weight: bold;
color: $osd_fg_color; color: $osd_fg_color;
} }
@ -1626,8 +1605,12 @@ StScrollBar {
.url-highlighter { link-color: lighten($selected_bg_color,10%); } .url-highlighter { link-color: lighten($selected_bg_color,10%); }
// Banners // Banners
.message-body {
@extend %caption;
padding-top: 2px;
}
.notification-banner { .notification-banner {
font-size: 11pt;
width: 34em; width: 34em;
margin: 5px; margin: 5px;
border-radius: $medium-radius; border-radius: $medium-radius;
@ -1637,7 +1620,7 @@ StScrollBar {
&:hover { background: $bg_color; } &:hover { background: $bg_color; }
&, &:focus, &:active { &, &:focus, &:active {
background-color: $bg_color; background-color: $bg_color;
.message-title { color: $fg_color } .message-title { color: $fg_color; }
.message-content { color: $fg_color; } .message-content { color: $fg_color; }
} }
@ -1680,9 +1663,8 @@ StScrollBar {
&:rtl { padding-left: 0; padding-right: 18pt; } &:rtl { padding-left: 0; padding-right: 18pt; }
} }
.chat-meta-message { .chat-meta-message {
@extend %caption-heading;
padding-left: 4px; padding-left: 4px;
font-size: 9pt;
font-weight: bold;
color: lighten($fg_color,18%); color: lighten($fg_color,18%);
&:rtl { padding-left: 0; padding-right: 4px; } &:rtl { padding-left: 0; padding-right: 4px; }
} }
@ -1968,8 +1950,7 @@ StScrollBar {
} }
} }
.login-dialog-not-listed-label { .login-dialog-not-listed-label {
font-size: 90%; @extend %heading;
font-weight: bold;
color: darken($osd_fg_color,30%); color: darken($osd_fg_color,30%);
padding-top: 1em; padding-top: 1em;
} }
@ -1998,8 +1979,7 @@ StScrollBar {
.login-dialog-username, .login-dialog-username,
.user-widget-label { .user-widget-label {
color: $osd_fg_color; color: $osd_fg_color;
font-size: 120%; @extend %title-3;
font-weight: bold;
text-align: left; text-align: left;
padding-left: 15px; padding-left: 15px;
} }
@ -2017,7 +1997,6 @@ StScrollBar {
.login-dialog-prompt-label { .login-dialog-prompt-label {
color: darken($osd_fg_color, 20%); color: darken($osd_fg_color, 20%);
font-size: 110%;
padding-top: 1em; padding-top: 1em;
} }
@ -2089,7 +2068,7 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
.screen-shield-notification-label { .screen-shield-notification-label {
font-weight: bold; @extend %heading;
padding: 0px 0px 0px 12px; padding: 0px 0px 0px 12px;
} }
@ -2129,9 +2108,9 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
} }
.labels { spacing: 4px; } .labels { spacing: 4px; }
.notebook-tab { .notebook-tab {
@extend %heading;
-natural-hpadding: 12px; -natural-hpadding: 12px;
-minimum-hpadding: 6px; -minimum-hpadding: 6px;
font-weight: bold;
color: #ccc; color: #ccc;
transition-duration: 100ms; transition-duration: 100ms;
padding-left: .3em; padding-left: .3em;
@ -2192,7 +2171,7 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
} }
.lg-extension-name { .lg-extension-name {
font-weight: bold; @extend %heading;
} }
.lg-extension-meta { .lg-extension-meta {
@ -2205,3 +2184,39 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
border-radius: 4px; border-radius: 4px;
padding: 6px; padding: 6px;
} }
// text styles
%large-title {
font-weight: 300;
font-size: 24pt;
// letter-spacing: 0.2rem; this breaks the style
}
%title-1 {
font-weight: 800;
font-size: 20pt;
}
%title-2 {
font-weight: 800;
font-size: 15pt;
}
%title-3 {
font-weight: 700;
font-size: 15pt;
}
%title-4 {
font-weight: 700;
font-size: 13pt;
}
%heading {
font-weight: 700;
font-size: 11pt;
}
%caption-heading {
font-weight: 700;
font-size: 9pt;
}
%caption {
font-weight: 400;
font-size: 9pt;
}