all-around fixes

tau-OS · Nov 21, 2022 · 3c5cc6b · 3c5cc6b
1 parent 3652aa2
commit 3c5cc6b
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 31 deletions.
diff --git a/Helium/gtk-4.0/_tauos.scss b/Helium/gtk-4.0/_tauos.scss
@@ -95,7 +95,7 @@ $colors: (
 
   .fill-button.#{$name} {
     background-color: $color;
-    color: gtkmix($accent_fg_color, $color, 96%);
+    color: gtkmix($accent_fg_color, $color, 90%);
 
     &:hover {
       background-color: if(
@@ -116,7 +116,7 @@ $colors: (
 
   .tint-button.#{$name} {
     background-color: gtkalpha($color, 0.1);
-    color: gtkmix($view_fg_color, $color, 96%);
+    color: gtkmix($color, $view_fg_color, 90%);
 
     &:hover {
       background-color: gtkalpha($color, 0.2);
@@ -204,27 +204,31 @@ $colors: (
 
   .modifier-badge.#{$name} {
     background-color: $color;
-    color: gtkmix($view_fg_color, $color, 96%);
+    color: gtkmix($color, $view_fg_color, 90%);
   }
 
   .tint-badge.#{$name} {
     background-color: gtkalpha($color, 0.1);
-    color: gtkmix($view_fg_color, $color, 96%);
+    color: gtkmix($color, $view_fg_color, 90%);
   }
-
+  
   .link-button.#{$name} {
     label {
-      color: $accent_color;
+      color: $color;
       padding: 2px;
     }
+
+    &:hover label {
+      color: $accent_fg_color;
+    }
   }
 }
 
 .pill-button {
   padding: 10px 32px;
   border-radius: 9999px;
   background-color: $accent_bg_color;
-  color: $accent_fg_color;
+  color: gtkmix($accent_bg_color, $accent_fg_color, 90%);
   &:hover {
     background-color: if(
       $variant == "light",
@@ -244,14 +248,14 @@ $colors: (
 
 .disclosure-button {
   border-radius: 9999px;
-  color: $view_fg_color;
+  color: gtkmix($accent_bg_color, $view_fg_color, 90%);
 }
 
 .overlay-button {
   padding: 13px;
   border-radius: 999px;
   background-color: $accent_bg_color;
-  color: $accent_fg_color;
+  color: gtkmix($accent_bg_color, $accent_fg_color, 90%);
 
   & box image {
     min-width: 24px;
@@ -292,7 +296,7 @@ $colors: (
 
 .fill-button {
   background-color: $accent_bg_color;
-  color: $accent_fg_color;
+  color: gtkmix($accent_bg_color, $accent_fg_color, 90%);
 
   &:hover {
     background-color: if(
@@ -313,7 +317,7 @@ $colors: (
 
 .tint-button {
   background-color: gtkalpha($accent_bg_color, 0.1);
-  color: gtkmix($accent_bg_color, $accent_fg_color, 50%);
+  color: gtkmix($accent_bg_color, $accent_fg_color, 90%);
 
   &:hover {
     background-color: gtkalpha($accent_bg_color, 0.2);
@@ -366,7 +370,7 @@ $colors: (
 
 .textual-button {
   background-color: transparent;
-  color: $accent_bg_color;
+  color: $accent_color;
 
   &:hover {
     background-color: gtkalpha($accent_bg_color, 0.1);
@@ -379,28 +383,17 @@ $colors: (
 
 .badge-info {
   background-color: gtkalpha($accent_bg_color, 0.1);
-  color: $accent_fg_color;
+  color: gtkmix($accent_bg_color, $accent_fg_color, 90%);
 }
 
 .modifier-badge {
   background-color: gtkmix($electron-yellow, $accent_bg_color, 10%);
-  color: $accent_fg_color;
+  color: gtkmix($accent_bg_color, $accent_fg_color, 90%);
 }
 
 .tint-badge {
   background-color: gtkalpha($accent_bg_color, 0.1);
-  color: gtkmix($accent_bg_color, $accent_fg_color, 50%);
-}
-
-.link-button {
-  label {
-    color: $accent_color;
-    padding: 2px;
-  }
-
-  &:hover {
-    color: $accent_fg_color;
-  }
+  color: gtkmix($accent_bg_color, $accent_fg_color, 96%);
 }
 
 .content-block {
@@ -411,6 +404,7 @@ $colors: (
 
   & entry {
     background-color: $view_bg_color;
+    color: $view_fg_color;
   }
 
   row:hover & {
@@ -443,6 +437,7 @@ $colors: (
 
   & entry {
     background-color: $view_bg_color;
+    color: $view_fg_color;
   }
 
   row:hover & {
@@ -510,13 +505,14 @@ $colors: (
 
 .bottom-bar {
   background: gtkmix($accent_bg_color, $view_bg_color, 10%);
+  color: $view_fg_color;
   padding: 12px;
   min-height: 48px;
 }
 
 .badge {
   border-radius: 99px;
-  border: 2px solid $view_bg_color;
+  border: 2px solid $window_bg_color;
   background-color: $meson-red;
   margin-right: -5px;
   margin-top: -5px;
@@ -527,7 +523,7 @@ $colors: (
 .modifier-badge {
   border-radius: 99px;
   padding: 8px;
-  border: 2px solid $view_bg_color;
+  border: 2px solid $window_bg_color;
   font-weight: 700;
 
   label {
@@ -632,6 +628,10 @@ $colors: (
   margin: 0px;
   min-height: 0px;
   min-width: 0px;
+
+  &:hover label {
+    color: $accent_fg_color;
+  }
 }
 
 .tab-holder .tab {

diff --git a/Helium/gtk-4.0/widgets/_buttons.scss b/Helium/gtk-4.0/widgets/_buttons.scss
@@ -310,6 +310,7 @@ button {
 
   &.card {
     background-color: $card_bg_color;
+    color: $card_fg_color;
     background-clip: padding-box;
     font-weight: inherit;
     padding: 0;

diff --git a/Helium/gtk-4.0/widgets/_entries.scss b/Helium/gtk-4.0/widgets/_entries.scss
@@ -9,6 +9,7 @@ entry {
     border-radius: $button_radius;
     border-spacing: 6px;
     background-color: $entry_color;
+    color: $view_fg_color;
     background-clip: padding-box;
     transition: all 200ms $ease-out-quad;
     caret-color: currentColor;
@@ -24,7 +25,7 @@ entry {
     }
 
     .search {
-      border-radius: 99px;
+      border-radius: 999px;
       background-color: $view_bg_color;
     }
 

diff --git a/Helium/gtk-4.0/widgets/_header-bar.scss b/Helium/gtk-4.0/widgets/_header-bar.scss
@@ -101,6 +101,7 @@ windowcontrols {
 
     > image {
       background-color: $button_color;
+      color: $view_fg_color;
       border-radius: 6px;
       padding: 2px;
       transition: $button_transition;
@@ -113,8 +114,8 @@ windowcontrols {
       background: none;
     }
 
-    &:hover > image { background-color: $button_hover_color; color: $accent_fg_color; }
-    &:hover:active > image { background-color: $button_active_color; color: $accent_fg_color; }
+    &:hover > image { background-color: $view_hover_color; color: $accent_fg_color; }
+    &:hover:active > image { background-color: $view_active_color; color: $accent_fg_color; }
   }
 
   > .icon {

diff --git a/Helium/gtk-4.0/widgets/_transition-shadow.scss b/Helium/gtk-4.0/widgets/_transition-shadow.scss
@@ -34,3 +34,27 @@ leaflet {
     &.down  { @include background-shadow(to top); }
   }
 }
+lapel,
+album {
+  > dimming {
+    background: $shade_color;
+  }
+
+  @if $contrast == 'high' {
+    > border {
+      min-width: 1px;
+      min-height: 1px;
+      background: $border_color ;
+    }
+  }
+
+  > shadow {
+    min-width: 56px;
+    min-height: 56px;
+
+    &.left  { @include background-shadow(to right); }
+    &.right { @include background-shadow(to left); }
+    &.up    { @include background-shadow(to bottom); }
+    &.down  { @include background-shadow(to top); }
+  }
+}