[gnome-calculator] appearance: recolor the app to match the icon

[Robert Roth <robertroth src gnome org>]

commit 1382697dc1891a6cfdf6d401b657ec3e97b7a167
Author: Lains <lainsce airmail cc>
Date:   Thu Apr 14 01:34:05 2022 -0300

    appearance: recolor the app to match the icon
    
    This recoloring of the app will give it a bit more visual interest
    and aid in differentiation between buttons.
    
    Fixes #245

 src/math-display.vala         |  1 +
 src/ui/buttons-financial.ui   |  2 +-
 src/ui/buttons-programming.ui |  2 +-
 src/ui/style-dark.css         | 20 ++++++++++++++++++--
 src/ui/style.css              | 30 ++++++++++++++++++++++++++++++
 5 files changed, 51 insertions(+), 4 deletions(-)
---
diff --git a/src/math-display.vala b/src/math-display.vala
index 99bdc455..1d3119a3 100644
--- a/src/math-display.vala
+++ b/src/math-display.vala
@@ -38,6 +38,7 @@ public class MathDisplay : Gtk.Box
     {
         _equation = equation;
         orientation = Gtk.Orientation.VERTICAL;
+        this.add_css_class ("math-display");
 
         var scrolled_window = new Gtk.ScrolledWindow ();
         scrolled_window.add_css_class ("display-scrolled");
diff --git a/src/ui/buttons-financial.ui b/src/ui/buttons-financial.ui
index 08edd29a..18833979 100644
--- a/src/ui/buttons-financial.ui
+++ b/src/ui/buttons-financial.ui
@@ -1602,7 +1602,7 @@
                 <property name="tooltip_text" translatable="1">Memory</property>
                 <property name="label" translatable="1" comments="The label on the memory 
button">x</property>
                 <style>
-                  <class name="function-button"/>
+                  <class name="memory-button"/>
                 </style>
                 <layout>
                   <property name="column">0</property>
diff --git a/src/ui/buttons-programming.ui b/src/ui/buttons-programming.ui
index 29f28c9a..5611187c 100644
--- a/src/ui/buttons-programming.ui
+++ b/src/ui/buttons-programming.ui
@@ -2062,7 +2062,7 @@
                     <property name="label" translatable="1" comments="The label on the memory 
button">x</property>
                     <property name="tooltip_text" translatable="1">Memory</property>
                     <style>
-                      <class name="function-button"/>
+                      <class name="memory-button"/>
                     </style>
                     <layout>
                       <property name="column">5</property>
diff --git a/src/ui/style-dark.css b/src/ui/style-dark.css
index 95d20e96..e2fd74f7 100644
--- a/src/ui/style-dark.css
+++ b/src/ui/style-dark.css
@@ -1,3 +1,19 @@
-.history-view {
-  background-color: alpha(white, .05);
+/* Recoloring of the app comes below… */
+.suggested-action {
+  background: @orange_1;
+}
+
+.function-button,
+.clear-button,
+.procent-button,
+.numeric-point-button,
+.parenthesis-button,
+.operator-button,
+.fx-button button,
+.memory-button button {
+  background: @dark_3;
+}
+
+.number-button {
+  background: @dark_1;
 }
diff --git a/src/ui/style.css b/src/ui/style.css
index 5fd079e5..03e6ae74 100644
--- a/src/ui/style.css
+++ b/src/ui/style.css
@@ -175,3 +175,33 @@ mathdisplay textview text {
   background: none;
   color: inherit;
 }
+
+/* Recoloring of the app comes below… */
+.history-view {
+  background: mix(@green_3, @view_bg_color, 0.87);
+}
+
+.math-display {
+  background: mix(@green_3, @view_bg_color, 0.8);
+}
+
+.suggested-action {
+  background: @orange_3;
+  color: @light_1;
+}
+
+.function-button,
+.clear-button,
+.procent-button,
+.numeric-point-button,
+.parenthesis-button,
+.operator-button,
+.fx-button button,
+.memory-button button {
+  background: @light_3;
+}
+
+.number-button {
+  background: @dark_1;
+  color: @light_1;
+}