css: Lighten primary color on dark variant
This improves readability. Fixes #355
by roundabout, Tuesday, 23 April 2019, 10:55:31 (1556016931), pushed by roundabout, Sunday, 11 May 2025, 13:22:37 (1746969757)
Author identity: nana-4 <hnmaigo@gmail.com>
077269c7123081aa08958d4d0e0dcef2e8af343c
src/_sass/_colors.scss
@@ -51,8 +51,9 @@ $green: #34A853;
$yellow: #FBBC05;
$red: #EA4335;
$primary: $blue;
$primary-alt: #7BAAF7;
$primary-dark: $blue;
$primary-light: #7BAAF7;
$primary: if($variant == 'light', $primary-dark, $primary-light);
$background: if($variant == 'light', #F2F2F2, #282828);
$surface: if($variant == 'light', #FFFFFF, #424242);
@@ -79,7 +80,7 @@ $warning: $yellow;
$error: $red;
$success: $green;
$suggested: $primary;
$suggested: $primary-dark;
$destructive: $error;
$frame: if($variant == 'light', rgba(black, 0.12), rgba(black, 0.26)); // instead of shadows
src/_sass/gnome-shell/_common-3.18.scss
@@ -817,8 +817,8 @@ StScrollBar {
/* Tiled window previews */
.tile-preview {
background-color: rgba($primary-alt, 0.3);
border: 1px solid $primary-alt;
background-color: rgba($primary-light, 0.3);
border: 1px solid $primary-light;
}
.tile-preview-left.on-primary {
src/_sass/gnome-shell/_common-3.24.scss
@@ -820,8 +820,8 @@ StScrollBar {
/* Tiled window previews */
.tile-preview {
background-color: rgba($primary-alt, 0.3);
border: 1px solid $primary-alt;
background-color: rgba($primary-light, 0.3);
border: 1px solid $primary-light;
}
.tile-preview-left.on-primary {
src/_sass/gnome-shell/_common-3.26.scss
@@ -794,8 +794,8 @@ StScrollBar {
/* Tiled window previews */
.tile-preview {
background-color: rgba($primary-alt, 0.3);
border: 1px solid $primary-alt;
background-color: rgba($primary-light, 0.3);
border: 1px solid $primary-light;
}
.tile-preview-left.on-primary {
src/_sass/gnome-shell/_common-3.28.scss
@@ -794,8 +794,8 @@ StScrollBar {
/* Tiled window previews */
.tile-preview {
background-color: rgba($primary-alt, 0.3);
border: 1px solid $primary-alt;
background-color: rgba($primary-light, 0.3);
border: 1px solid $primary-light;
}
.tile-preview-left.on-primary {
src/_sass/gnome-shell/_common-3.30.scss
@@ -794,8 +794,8 @@ StScrollBar {
/* Tiled window previews */
.tile-preview {
background-color: rgba($primary-alt, 0.3);
border: 1px solid $primary-alt;
background-color: rgba($primary-light, 0.3);
border: 1px solid $primary-light;
}
.tile-preview-left.on-primary {
src/_sass/gnome-shell/_common-3.32.scss
@@ -794,8 +794,8 @@ StScrollBar {
/* Tiled window previews */
.tile-preview {
background-color: rgba($primary-alt, 0.3);
border: 1px solid $primary-alt;
background-color: rgba($primary-light, 0.3);
border: 1px solid $primary-light;
}
.tile-preview-left.on-primary {
src/_sass/gtk/_common-3.20.scss
@@ -110,8 +110,8 @@ textview {
.rubberband,
rubberband {
border: 1px solid $primary-alt;
background-color: rgba($primary-alt, 0.3);
border: 1px solid $primary-light;
background-color: rgba($primary-light, 0.3);
}
flowbox {
@@ -1151,44 +1151,44 @@ headerbar {
// but let's keep it for backwards compatibility.
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
box-shadow: $shadow-1, inset 0 1px highlight($primary);
background-color: $primary;
color: on($primary);
box-shadow: $shadow-1, inset 0 1px highlight($primary-dark);
background-color: $primary-dark;
color: on($primary-dark);
&:backdrop {
color: on($primary, secondary);
color: on($primary-dark, secondary);
}
.subtitle:link { color: on($primary); }
.subtitle:link { color: on($primary-dark); }
button:not(.suggested-action):not(.destructive-action) {
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
currentColor 0%,
transparent 0%)
0 0 0 / 0 0 0px;
color: on($primary);
color: on($primary-dark);
&:disabled { color: on($primary, disabled); }
&:disabled { color: on($primary-dark, disabled); }
&:checked {
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
currentColor 100%,
transparent 0%)
0 0 2 / 0 0 2px;
color: on($primary);
color: on($primary-dark);
&:disabled { color: on($primary, disabled); }
&:disabled { color: on($primary-dark, disabled); }
}
&:backdrop {
color: on($primary, secondary);
color: on($primary-dark, secondary);
&:disabled { color: on($primary, secondary-disabled); }
&:disabled { color: on($primary-dark, secondary-disabled); }
&:checked {
color: on($primary, secondary);
color: on($primary-dark, secondary);
&:disabled { color: on($primary, secondary-disabled); }
&:disabled { color: on($primary-dark, secondary-disabled); }
}
}
}
src/_sass/gtk/_drawing-3.20.scss
@@ -13,11 +13,11 @@
@keyframes ripple-on-headerbar {
from {
background-image: radial-gradient(circle, $primary 0%, transparent 0%);
background-image: radial-gradient(circle, $primary-dark 0%, transparent 0%);
}
to {
background-image: radial-gradient(circle, $primary 100%, transparent 0%);
background-image: radial-gradient(circle, $primary-dark 100%, transparent 0%);
}
}
@@ -136,8 +136,8 @@
}
@if $t == checked {
background-color: $primary;
color: on($primary);
background-color: $primary-dark;
color: on($primary-dark);
}
@if $t == checked-disabled {
src/_sass/gtk/apps/_mate.scss
@@ -120,7 +120,7 @@ MatePanelAppletFrameDBus {
// WnckPager
PanelApplet.wnck-applet .wnck-pager {
background-color: transparent;
color: $primary-alt;
color: $primary-light;
&:hover { background-color: $overlay-hover; }