[libadwaita/wip/exalm/error-warning-success] stylesheet: Offer regular/bg/fg variants for error/success/warning colors

[Alexander Mikhaylenko <alexm src gnome org>]

commit 8bd13fa9553a5ac956ffbf76137739b1ee098a2b
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sat Dec 4 15:55:47 2021 +0500

    stylesheet: Offer regular/bg/fg variants for error/success/warning colors
    
    Consistently provide .error, .warning and .success for labels and entries.
    
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/258

 demo/adw-style-demo-window.ui        | 103 ++++++++++++++++++++++++++++-------
 src/stylesheet/_colors.scss          |   8 +++
 src/stylesheet/_defaults.scss        |  18 ++++--
 src/stylesheet/widgets/_entries.scss |  25 ++++-----
 src/stylesheet/widgets/_labels.scss  |  16 ++++--
 5 files changed, 126 insertions(+), 44 deletions(-)
---
diff --git a/demo/adw-style-demo-window.ui b/demo/adw-style-demo-window.ui
index 17bef122..989b2fbc 100644
--- a/demo/adw-style-demo-window.ui
+++ b/demo/adw-style-demo-window.ui
@@ -307,33 +307,74 @@ The "opaque" style class allows to create buttons with custom colors that look s
                   <object class="AdwPreferencesGroup">
                     <property name="title" translatable="yes">Entries</property>
                     <child>
-                      <object class="GtkBox">
-                        <property name="spacing">6</property>
-                        <property name="homogeneous">True</property>
+                      <object class="GtkFlowBox">
+                        <property name="min-children-per-line">1</property>
+                        <property name="max-children-per-line">3</property>
+                        <property name="column-spacing">6</property>
+                        <property name="row-spacing">6</property>
+                        <property name="selection-mode">none</property>
+                        <property name="margin-top">12</property>
+                        <style>
+                          <class name="inline"/>
+                        </style>
                         <child>
-                          <object class="GtkEntry">
-                            <property name="placeholder-text" translatable="yes">Regular</property>
-                            <property name="text" translatable="yes">Regular</property>
+                          <object class="GtkFlowBoxChild">
+                            <property name="focusable">False</property>
+                            <child>
+                              <object class="GtkEntry">
+                                <property name="placeholder-text" translatable="yes">Regular</property>
+                                <property name="text" translatable="yes">Regular</property>
+                                <property name="secondary-icon-name">edit-copy-symbolic</property>
+                              </object>
+                            </child>
                           </object>
                         </child>
                         <child>
-                          <object class="GtkEntry">
-                            <property name="placeholder-text" translatable="yes">Warning</property>
-                            <property name="text" translatable="yes">Warning</property>
-                            <property name="tooltip-text">warning</property>
-                            <style>
-                              <class name="warning"/>
-                            </style>
+                          <object class="GtkFlowBoxChild">
+                            <property name="focusable">False</property>
+                            <child>
+                              <object class="GtkEntry">
+                                <property name="placeholder-text" translatable="yes">Success</property>
+                                <property name="text" translatable="yes">Success</property>
+                                <property name="tooltip-text">success</property>
+                                <property name="secondary-icon-name">edit-copy-symbolic</property>
+                                <style>
+                                  <class name="success"/>
+                                </style>
+                              </object>
+                            </child>
                           </object>
                         </child>
                         <child>
-                          <object class="GtkEntry">
-                            <property name="placeholder-text" translatable="yes">Error</property>
-                            <property name="text" translatable="yes">Error</property>
-                            <property name="tooltip-text">error</property>
-                            <style>
-                              <class name="error"/>
-                            </style>
+                          <object class="GtkFlowBoxChild">
+                            <property name="focusable">False</property>
+                            <child>
+                              <object class="GtkEntry">
+                                <property name="placeholder-text" translatable="yes">Warning</property>
+                                <property name="text" translatable="yes">Warning</property>
+                                <property name="tooltip-text">warning</property>
+                                <property name="secondary-icon-name">edit-copy-symbolic</property>
+                                <style>
+                                  <class name="warning"/>
+                                </style>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkFlowBoxChild">
+                            <property name="focusable">False</property>
+                            <child>
+                              <object class="GtkEntry">
+                                <property name="placeholder-text" translatable="yes">Error</property>
+                                <property name="text" translatable="yes">Error</property>
+                                <property name="tooltip-text">error</property>
+                                <property name="secondary-icon-name">edit-copy-symbolic</property>
+                                <style>
+                                  <class name="error"/>
+                                </style>
+                              </object>
+                            </child>
                           </object>
                         </child>
                       </object>
@@ -559,6 +600,28 @@ The "opaque" style class allows to create buttons with custom colors that look s
                                     </style>
                                   </object>
                                 </child>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="label" translatable="yes">Success</property>
+                                    <property name="xalign">0</property>
+                                    <property name="ellipsize">end</property>
+                                    <property name="tooltip-text">success</property>
+                                    <style>
+                                      <class name="success"/>
+                                    </style>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="label" translatable="yes">Warning</property>
+                                    <property name="xalign">0</property>
+                                    <property name="ellipsize">end</property>
+                                    <property name="tooltip-text">warning</property>
+                                    <style>
+                                      <class name="warning"/>
+                                    </style>
+                                  </object>
+                                </child>
                                 <child>
                                   <object class="GtkLabel">
                                     <property name="label" translatable="yes">Error</property>
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 8f81e42f..2f4de113 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -12,8 +12,16 @@ $destructive_bg_color: gtkcolor(destructive_bg_color);
 $destructive_fg_color: gtkcolor(destructive_fg_color);
 $destructive_color: gtkcolor(destructive_color);
 
+$success_bg_color: gtkcolor(success_bg_color);
+$success_fg_color: gtkcolor(success_fg_color);
 $success_color: gtkcolor(success_color);
+
+$warning_bg_color: gtkcolor(warning_bg_color);
+$warning_fg_color: gtkcolor(warning_fg_color);
 $warning_color: gtkcolor(warning_color);
+
+$error_bg_color: gtkcolor(error_bg_color);
+$error_fg_color: gtkcolor(error_fg_color);
 $error_color: gtkcolor(error_color);
 
 $window_bg_color: gtkcolor(window_bg_color);
diff --git a/src/stylesheet/_defaults.scss b/src/stylesheet/_defaults.scss
index fdfffdba..83e2633e 100644
--- a/src/stylesheet/_defaults.scss
+++ b/src/stylesheet/_defaults.scss
@@ -14,14 +14,22 @@
 @define-color accent_color #{if($variant == 'dark', "@blue_1", "@blue_4")};
 
 // destructive-action buttons
-@define-color destructive_bg_color @red_3;
+@define-color destructive_bg_color #{if($variant == 'dark', "@red_4", "@red_3")};
 @define-color destructive_fg_color @light_1;
-@define-color destructive_color #{if($variant == 'dark', "@red_1", "@red_4")};
+@define-color destructive_color #{if($variant == 'dark', #ff7b63, "@red_4")};
 
 // Levelbars, entries, labels and infobars. These don't need text colors
-@define-color success_color @green_3;
-@define-color warning_color @yellow_5;
-@define-color error_color @red_3;
+@define-color success_bg_color #{if($variant == 'dark', "@green_5", "@green_4")};
+@define-color success_fg_color @light_1;
+@define-color success_color #{if($variant == 'dark', "@green_1", "@green_5")};
+
+@define-color warning_bg_color #{if($variant == 'dark', #cd9309, "@yellow_5")};
+@define-color warning_fg_color @light_1;
+@define-color warning_color #{if($variant == 'dark', "@yellow_2", #ae7b03)};
+
+@define-color error_bg_color #{if($variant == 'dark', "@red_4", "@red_3")};
+@define-color error_fg_color @light_1;
+@define-color error_color #{if($variant == 'dark', #ff7b63, "@red_4")};
 
 // Window
 @define-color window_bg_color #{if($variant == 'light', #fafafa, #242424)};
diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss
index a58acb2f..5de1a8fa 100644
--- a/src/stylesheet/widgets/_entries.scss
+++ b/src/stylesheet/widgets/_entries.scss
@@ -45,37 +45,32 @@ entry {
     &:disabled { filter: opacity($disabled_opacity); }
 
     // entry error and warning style
-    @each $e_type, $e_color in (error, $error_color),
-                               (warning, $warning_color) {
+    @each $e_type, $e_color in (error,   $error_color),
+                               (warning, $warning_color),
+                               (success, $success_color) {
       &.#{$e_type} {
-        @include focus-ring($focus-state: ':focus-within', $fc: gtkalpha($e_color, $focus_border_opacity));
-
-        color: gtkmix($e_color, $view_fg_color, 70%);
+        @include focus-ring($focus-state: ':focus-within', $fc: gtkalpha(currentColor, 
$focus_border_opacity));
 
         > text {
-          color: gtkmix($e_color, $view_fg_color, 70%);
-
           > selection:focus-within { background-color: gtkalpha($e_color, .2); }
 
-          > cursor-handle > contents { background-color: $e_color; }
-        }
-
-        > image:active {
-          color: $e_color;
+          > cursor-handle > contents { background-color: currentColor; }
         }
 
         > progress > trough > progress {
-          border-color: $e_color;
+          border-color: currentColor;
         }
       }
     }
 
     > image { // icons inside the entry
-      opacity: if($contrast == 'high', .9, .75);
+      opacity: if($contrast == 'high', .85, .7);
 
       &:hover { opacity: 1; }
 
-      &:active { color: $accent_color; }
+      &:active {
+        opacity: if($contrast == 'high', .9, .8);
+      }
 
       &.left { margin-right: 6px; }
       &.right { margin-left: 6px; }
diff --git a/src/stylesheet/widgets/_labels.scss b/src/stylesheet/widgets/_labels.scss
index d518262d..f972f32f 100644
--- a/src/stylesheet/widgets/_labels.scss
+++ b/src/stylesheet/widgets/_labels.scss
@@ -8,10 +8,6 @@ label {
   &:disabled {
     filter: opacity($disabled_opacity);
   }
-
-  &.error {
-   color: $error_color;
-  }
 }
 
 .dim-label {
@@ -22,6 +18,18 @@ label {
   color: $accent_color;
 }
 
+.success {
+  color: $success_color;
+}
+
+.warning {
+  color: $warning_color;
+}
+
+.error {
+  color: $error_color;
+}
+
 /**********************
  * General Typography *
  **********************/