Merge remote-tracking branch 'upstream/master'

peterychuang · Sep 6, 2019 · e74b122 · e74b122
2 parents 31f025a + a7d4b8e
commit e74b122
Show file tree

Hide file tree

Showing 292 changed files with 10,303 additions and 8,680 deletions.
diff --git a/change_color.sh b/change_color.sh
@@ -60,17 +60,17 @@ if [[ -z "${THEME:-}" ]]; then
 fi
 
 PATHLIST=(
+  './src/_sass/_colors.scss'
   './src/chrome'
   './src/cinnamon'
   './src/cinnamon/assets'
   './src/gnome-shell'
+  './src/gtk/assets.svg'
+  './src/gtk-2.0/assets.svg'
+  './src/gtk-2.0/assets-dark.svg'
   './src/gtk-2.0/gtkrc'
   './src/gtk-2.0/gtkrc-dark'
   './src/gtk-2.0/gtkrc-light'
-  './src/_sass/_colors.scss'
-  './src/gtk-2.0/assets.svg'
-  './src/gtk-2.0/assets-dark.svg'
-  './src/gtk/assets.svg'
   './src/metacity-1'
   './src/unity'
   './src/xfwm4'
@@ -175,39 +175,34 @@ for FILEPATH in "${PATHLIST[@]}"; do
     find "$FILEPATH" -type f -not -name '_color-palette.scss' -exec sed -i'' \
       -e '/color-surface/{n;s/#FFFFFF/%MATERIA_SURFACE%/g}' \
       -e '/color-base/{n;s/#FFFFFF/%MATERIA_VIEW%/g}' \
+      -e 's/#8AB4F8/%SEL_BG%/g' \
+      -e 's/#1A73E8/%SEL_BG%/g' \
       -e 's/#000000/%FG%/g' \
       -e 's/#212121/%FG%/g' \
-      -e 's/#757575/%INACTIVE_FG%/g' \
       -e 's/#BDBDBD/%INACTIVE_FG%/g' \
-      -e 's/#FAFAFA/%INACTIVE_MATERIA_VIEW%/g' \
+      -e 's/#616161/%INACTIVE_FG%/g' \
       -e 's/#F2F2F2/%BG%/g' \
-      -e 's/#4285F4/%SEL_BG%/g' \
+      -e 's/#FFFFFF/%MATERIA_SURFACE%/g' \
       -e 's/#FFFFFF/%MATERIA_VIEW%/g' \
-      -e 's/#383838/%HDR_BG%/g' \
+      -e 's/#FAFAFA/%INACTIVE_MATERIA_VIEW%/g' \
+      -e 's/#353535/%HDR_BG%/g' \
+      -e 's/#2C2C2C/%HDR_BG2%/g' \
       -e 's/#E0E0E0/%HDR_BG%/g' \
+      -e 's/#D6D6D6/%HDR_BG2%/g' \
       -e 's/Materia/%OUTPUT_THEME_NAME%/g' \
-      -e 's/#282828/%HDR_BG%/g' \
-      -e 's/#303030/%MATERIA_VIEW%/g' \
-      -e 's/#2C2C2C/%INACTIVE_MATERIA_VIEW%/g' \
-      -e 's/#424242/%MATERIA_SURFACE%/g' \
       {} \; ;
   else
     find "$FILEPATH" -type f -not -name '_color-palette.scss' -exec sed -i'' \
-      -e 's/#000000/%BG%/g' \
-      -e 's/#282828/%BG%/g' \
-      -e 's/#757575/%INACTIVE_FG%/g' \
+      -e 's/#1A73E8/%SEL_BG%/g' \
+      -e 's/#FFFFFF/%FG%/g' \
       -e 's/#BDBDBD/%INACTIVE_FG%/g' \
+      -e 's/#212121/%BG%/g' \
+      -e 's/#3C3C3C/%MATERIA_SURFACE%/g' \
+      -e 's/#2C2C2C/%MATERIA_VIEW%/g' \
       -e 's/#2C2C2C/%INACTIVE_MATERIA_VIEW%/g' \
-      -e 's/#FFFFFF/%FG%/g' \
-      -e 's/#FAFAFA/%FG%/g' \
-      -e 's/#424242/%MATERIA_SURFACE%/g' \
-      -e 's/#4285F4/%SEL_BG%/g' \
-      -e 's/#303030/%MATERIA_VIEW%/g' \
-      -e 's/#383838/%HDR_BG%/g' \
-      -e 's/#212121/%HDR_BG2%/g' \
+      -e 's/#353535/%HDR_BG%/g' \
+      -e 's/#2C2C2C/%HDR_BG2%/g' \
       -e 's/Materia/%OUTPUT_THEME_NAME%/g' \
-      -e 's/#F2F2F2/%FG%/g' \
-      -e 's/#E0E0E0/%HDR_FG%/g' \
       {} \; ;
   fi
 done

diff --git a/install.sh b/install.sh
@@ -146,6 +146,8 @@ install_gdm() {
   fi
 }
 
+colors=()
+sizes=()
 while [[ "$#" -gt 0 ]]; do
   case "${1:-}" in
     -d|--dest)
@@ -228,8 +230,14 @@ if [[ ! -w "${dest:-$DEST_DIR}" ]]; then
   exit 1
 fi
 
-for color in "${colors[@]:-${COLOR_VARIANTS[@]}}"; do
-  for size in "${sizes[@]:-${SIZE_VARIANTS[@]}}"; do
+if [[ "${#colors[@]}" -eq 0 ]] ; then
+  colors=("${COLOR_VARIANTS[@]}")
+fi
+if [[ "${#sizes[@]}" -eq 0 ]] ; then
+  sizes=("${SIZE_VARIANTS[@]}")
+fi
+for color in "${colors[@]}"; do
+  for size in "${sizes[@]}"; do
     install "${dest:-$DEST_DIR}" "${_name:-$THEME_NAME}" "$color" "$size"
   done
 done

diff --git a/src/_sass/_color-palette.scss b/src/_sass/_color-palette.scss
@@ -1,5 +1,5 @@
-// based color palette:
-// https://material.io/guidelines/style/color.html#color-color-palette
+// Based on 2014 Material Design color palettes:
+// https://material.io/design/color/#tools-for-picking-colors
 
 // Red
 $red-50: #FFEBEE;

diff --git a/src/_sass/_colors.scss b/src/_sass/_colors.scss
@@ -3,11 +3,6 @@
 
 @import 'color-palette';
 
-$blue:                                  #4285F4;
-$green:                                 #34A853;
-$yellow:                                #FBBC05;
-$red:                                   #EA4335;
-
 @function gtkalpha($c, $a) {
   @return unquote("alpha(#{$c}, #{$a})");
 }
@@ -22,7 +17,7 @@ $red:                                   #EA4335;
 
   @if ($brightness >= 128) {
     @if ($state == 'primary') { @return rgba(black, 0.87); }
-    @if ($state == 'secondary') { @return rgba(black, 0.54); }
+    @if ($state == 'secondary') { @return rgba(black, 0.6); }
     @if ($state == 'disabled') { @return rgba(black, 0.38); }
     @if ($state == 'secondary-disabled') { @return rgba(black, 0.26); }
     @if ($state == 'track') { @return rgba(black, 0.26); }
@@ -51,24 +46,24 @@ $red:                                   #EA4335;
 // Basic colors
 //
 
-$primary-dark:                          $blue;
+$primary-dark:                          #1A73E8;
 $primary-light:                         #8AB4F8;
 $primary:                               if($variant == 'light', $primary-dark, $primary-light);
 
-$background:                            if($variant == 'light', #F2F2F2, #282828);
-$surface:                               if($variant == 'light', #FFFFFF, #424242);
-$base:                                  if($variant == 'light', #FFFFFF, #303030); // semi-surface with no elevation
+$background:                            if($variant == 'light', #F2F2F2, #212121);
+$surface:                               if($variant == 'light', #FFFFFF, #3C3C3C);
+$base:                                  if($variant == 'light', #FFFFFF, #2C2C2C); // semi-surface with 1dp elevation
 $base-alt:                              if($variant == 'light', #FAFAFA, #2C2C2C);
 
-$os-background:                         #303030;
+$os-background:                         #212121;
 $tooltip:                               rgba(#616161, 0.9);
-$scrim:                                 rgba(black, 0);
-$scrim-alt:                             rgba(black, 0.6);
+$scrim:                                 rgba(black, 0.6);
+$scrim-alt:                             rgba(black, 0.3);
 $scrim-inverse:                         rgba(white, 0.1);
-$titlebar:                              if($topbar == 'dark', #383838, #E0E0E0);
-$titlebar-backdrop:                     if($topbar == 'dark', #303030, #D6D6D6);
-$panel:                                 $os-background;
-$panel-solid:                           if($titlebar == 'dark', $grey_800, mix($grey_200, $grey_400, 50%)); // for Unity panel which doesn't allow translucent colors
+$titlebar:                              if($topbar == 'dark', #353535, #E0E0E0);
+$titlebar-backdrop:                     if($topbar == 'dark', #2C2C2C, #D6D6D6);
+$panel:                                 if($topbar == 'dark', #1F1F1F, $scrim);
+$panel-solid:                           if($topbar == 'dark', #1F1F1F, #CCCCCC); // for Unity panel which doesn't allow translucent colors
 
 //
 // Misc colors
@@ -77,9 +72,9 @@ $panel-solid:                           if($titlebar == 'dark', $grey_800, mix($
 $link:                                  $primary;
 $link-visited:                          if($variant == 'light', $purple-500, $purple-200);
 
-$warning:                               $yellow;
-$error:                                 $red;
-$success:                               $green;
+$warning:                               if($variant == 'light', #F4B400, #FDD633);
+$error:                                 if($variant == 'light', #D93025, #F28B82);
+$success:                               if($variant == 'light', #0F9D58, #81C995);
 
 $suggested:                             $primary;
 $destructive:                           $error;
@@ -122,4 +117,4 @@ $titlebar-divider:                      on($titlebar, divider);
 $titlebar-fill:                         on($titlebar, fill);
 
 // workaround for GTK3 @placeholder_text_color which doesn't allow translucent colors
-$placeholder_text_color:                if($variant == 'light', $grey-600, mix($white, $base, percentage(0.7)));
+$placeholder_text_color:                if($variant == 'light', mix(black, $base, percentage(0.6)), mix(white, $base, percentage(0.7)));
diff --git a/src/_sass/_colors.scss.template b/src/_sass/_colors.scss.template
@@ -17,7 +17,7 @@
 
   @if ($brightness >= 128) {
     @if ($state == 'primary') { @return rgba(black, 0.87); }
-    @if ($state == 'secondary') { @return rgba(black, 0.54); }
+    @if ($state == 'secondary') { @return rgba(black, 0.6); }
     @if ($state == 'disabled') { @return rgba(black, 0.38); }
     @if ($state == 'secondary-disabled') { @return rgba(black, 0.26); }
     @if ($state == 'track') { @return rgba(black, 0.26); }
@@ -46,11 +46,6 @@
 // Basic colors
 //
 
-$blue:                                  %TERMINAL_COLOR12%;
-$green:                                 %TERMINAL_COLOR10%;
-$yellow:                                %TERMINAL_COLOR11%;
-$red:                                   %TERMINAL_COLOR9%;
-
 $primary-dark:                          %SEL_BG%;
 $primary-light:                         %SEL_BG%;
 $primary:                               if($variant == 'light', $primary-dark, $primary-light);

diff --git a/src/_sass/_variables.scss b/src/_sass/_variables.scss
@@ -1,7 +1,9 @@
 $asset-suffix: if($variant == 'dark', '-dark', '');
-$background-clip-extra: if($variant == 'light', padding-box, border-box);
 
-// sizes
+//
+// Sizes
+//
+
 $container-padding: if($compact == 'false', 6px, 4px);
 
 $small-size: if($compact == 'false', 24px, 20px);
@@ -11,35 +13,104 @@ $large-size: if($compact == 'false', 48px, 40px);
 $bar-size: 4px;
 $menuitem-size: 28px;
 
-// radii
+//
+// Radii
+//
+
 $corner-radius: 2px;
 $circular-radius: 9999px;
 
-// durations
+//
+// Durations
+//
+
 $duration: 75ms;
 $ripple-fade-in-duration: 225ms;
 $ripple-fade-out-duration: 300ms;
 $ripple-fade-out-opacity-duration: 1200ms;
 
-// timing functions
+//
+// Timing functions
+//
+
 $ease: cubic-bezier(0.4, 0.0, 0.2, 1);
 $ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
 $ease-in: cubic-bezier(0.4, 0.0, 1, 1);
 $ease-in-out: cubic-bezier(0.4, 0.0, 0.6, 1);
 
-// transition shorthands
+//
+// Transition shorthands
+//
+
 $transition: all $duration $ease-out;
 $transition-shadow: box-shadow $duration $ease-out;
 
-// shadows
-// based shadow values:
-// https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png
+//
+// Shadows
+//
 
-// box-shadow 1px blur doesn't draw correctly, see
+// Values are based on:
+// https://github.com/material-components/material-components-web/blob/master/packages/mdc-elevation/_variables.scss
+
+// NOTE: box-shadow blur less than 2px doesn't work properly, see
 // https://gitlab.gnome.org/GNOME/gtk/issues/511
-// $shadow-1: 0 1px 1.5px rgba(black, 0.12), 0 1px 1px rgba(black, 0.24);
-$shadow-1: 0 1px 1px rgba(black, 0.12), 0 1px 2px rgba(black, 0.24);
-$shadow-2: 0 3px 3px rgba(black, 0.16), 0 3px 3px rgba(black, 0.23);
-$shadow-3: 0 10px 10px rgba(black, 0.19), 0 6px 3px rgba(black, 0.23);
-$shadow-4: 0 14px 14px rgba(black, 0.25), 0 10px 5px rgba(black, 0.22);
-$shadow-5: 0 19px 19px rgba(black, 0.30), 0 15px 6px rgba(black, 0.22);
+
+// NOTE 2: Compared to rendering on the Web, GTK seems to have a bigger blur.
+
+$shadow-z1:
+  // 0 2px (1px * .6) -1px rgba(black, 0.2),
+  0 2px 2px -2px rgba(black, 0.3),
+  // 0 1px (1px * .6) 0 rgba(black, 0.14),
+  0 1px 2px -1px rgba(black, 0.24),
+  // 0 1px (3px * .6) 0 rgba(black, 0.12);
+  0 1px 2px -.6px rgba(black, 0.17);
+$shadow-z2:
+  // 0 3px (1px * .6) -2px rgba(black, 0.2),
+  0 3px 2px -3px rgba(black, 0.3),
+  // 0 2px (2px * .6) 0 rgba(black, 0.14),
+  0 2px 2px -1px rgba(black, 0.24),
+  0 1px (5px * .6) 0 rgba(black, 0.12);
+$shadow-z3:
+  // 0 3px (3px * .6) -2px rgba(black, 0.2),
+  0 3px 2px -2px rgba(black, 0.2),
+  0 3px (4px * .6) 0 rgba(black, 0.14),
+  0 1px (8px * .6) 0 rgba(black, 0.12);
+$shadow-z4:
+  0 2px (4px * .6) -1px rgba(black, 0.2),
+  0 4px (5px * .6) 0 rgba(black, 0.14),
+  0 1px (10px * .6) 0 rgba(black, 0.12);
+$shadow-z6:
+  0 3px (5px * .6) -1px rgba(black, 0.2),
+  0 6px (10px * .6) 0 rgba(black, 0.14),
+  0 1px (18px * .6) 0 rgba(black, 0.12);
+$shadow-z8:
+  0 5px (5px * .6) -3px rgba(black, 0.2),
+  0 8px (10px * .6) 1px rgba(black, 0.14),
+  0 3px (14px * .6) 2px rgba(black, 0.12);
+$shadow-z12:
+  0 7px (8px * .6) -4px rgba(black, 0.2),
+  0 12px (17px * .6) 2px rgba(black, 0.14),
+  0 5px (22px * .6) 4px rgba(black, 0.12);
+$shadow-z16:
+  0 8px (10px * .6) -5px rgba(black, 0.2),
+  0 16px (24px * .6) 2px rgba(black, 0.14),
+  0 6px (30px * .6) 5px rgba(black, 0.12);
+$shadow-z24:
+  0 11px (15px * .6) -7px rgba(black, 0.2),
+  0 24px (38px * .6) 3px rgba(black, 0.14),
+  0 9px (46px * .6) 8px rgba(black, 0.12);
+
+$text-shadow:
+  0 1px 1px rgba(black, 0.2),
+  0 1px 2px rgba(black, 0.14),
+  0 1px 3px rgba(black, 0.12);
+
+// workaround for selection-mode checkboxes
+$icon-shadow-z2:
+  0 1px 1px rgba(black, 0.2),
+  0 2px 2px rgba(black, 0.14),
+  0 1px (5px * .6) rgba(black, 0.12);
+$icon-shadow-z4:
+  0 2px 2px rgba(black, 0.2),
+  0 4px (5px * .6) rgba(black, 0.14),
+  0 1px (10px * .6) rgba(black, 0.12);
diff --git a/src/_sass/chrome/_scrollbars.scss b/src/_sass/chrome/_scrollbars.scss
@@ -3,8 +3,7 @@
   width: 17px;
   height: 17px;
   border: 0 solid $divider;
-  background-color: rgba($base, 0.9);
-  background-clip: $background-clip-extra;
+  background-color: rgba($surface, 0.9);
 }
 
 ::-webkit-scrollbar:horizontal,
@@ -17,6 +16,10 @@
   border-left-width: 1px;
 }
 
+::-webkit-scrollbar {
+  background-clip: padding-box;
+}
+
 ::-webkit-scrollbar-thumb {
   width: 32px;
   height: 32px;
@@ -43,3 +46,11 @@
 
   &:disabled { background-color: $text-secondary-disabled; }
 }
+
+//
+// Workaround: Chrome does not properly load selection style of GTK theme.
+//
+
+::selection {
+  background-color: rgba($primary-dark, 0.24);
+}