push buttons: Style checked state properly (#477)

Resolves #367
uwerat · Nov 18, 2024 · 9fc7b1f · 9fc7b1f
1 parent b5c56f7
commit 9fc7b1f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/designsystems/fluent2/QskFluent2Skin.cpp b/designsystems/fluent2/QskFluent2Skin.cpp
@@ -1008,7 +1008,7 @@ void Editor::setupPushButtonColors(
         const auto text = Q::Text | section | variation;
         const auto icon = Q::Icon | section | variation;
 
-        for ( const auto state : { QskAspect::NoState, Q::Hovered, Q::Pressed, Q::Disabled } )
+        for ( const auto state : { QskAspect::NoState, Q::Hovered, Q::Pressed, Q::Checked, Q::Disabled } )
         {
             QRgb panelColor, borderColor1, borderColor2, textColor;
             int graphicRole;
@@ -1023,7 +1023,7 @@ void Editor::setupPushButtonColors(
                     textColor = pal.fillColor.textOnAccent.primary;
                     graphicRole = W::GraphicRoleFillColorTextOnAccentPrimary;
                 }
-                else if ( state == Q::Pressed )
+                else if ( state == Q::Pressed || state == Q::Checked )
                 {
                     panelColor = pal.fillColor.accent.tertiary;
                     borderColor1 = borderColor2 = pal.strokeColor.control.onAccentDefault;
@@ -1056,7 +1056,7 @@ void Editor::setupPushButtonColors(
                     textColor = pal.fillColor.text.primary;
                     graphicRole = W::GraphicRoleFillColorTextPrimary;
                 }
-                else if ( state == Q::Pressed )
+                else if ( state == Q::Pressed || state == Q::Checked )
                 {
                     panelColor = pal.fillColor.control.tertiary;
                     borderColor1 = borderColor2 = pal.strokeColor.control.defaultColor;

diff --git a/designsystems/material3/QskMaterial3Skin.cpp b/designsystems/material3/QskMaterial3Skin.cpp
@@ -725,6 +725,7 @@ void Editor::setupPushButton()
     setBoxShape( Q::Splash, 40_dp );
     setAnimation( Q::Splash | QskAspect::Color, qskDuration );
 
+    const auto checkedOpacity = m_pal.focusOpacity + m_pal.pressedOpacity;
 
     // elevated buttons:
 
@@ -751,8 +752,11 @@ void Editor::setupPushButton()
     setGradient( Q::Panel | M3::Elevated | Q::Focused, elevatedPressedColor );
     setShadowMetrics( Q::Panel | M3::Elevated | Q::Focused, m_pal.elevation1 );
 
-    setGradient( Q::Panel | M3::Elevated | Q::Pressed, elevatedPressedColor );
-    setShadowMetrics( Q::Panel | M3::Elevated | Q::Pressed, m_pal.elevation1 );
+    for( const auto state: { Q::Pressed, Q::Checked } )
+    {
+        setGradient( Q::Panel | M3::Elevated | state, elevatedPressedColor );
+        setShadowMetrics( Q::Panel | M3::Elevated | state, m_pal.elevation1 );
+    }
 
 
     // normal buttons (i.e. Filled):
@@ -769,6 +773,8 @@ void Editor::setupPushButton()
     setGradient( Q::Panel | Q::Focused, focusColor );
 
     setGradient( Q::Panel | Q::Pressed, focusColor );
+    setGradient( Q::Panel | Q::Checked,
+        flattenedColor( m_pal.onPrimary, m_pal.primary, checkedOpacity ) );
 
     setGradient( Q::Splash, stateLayerColor( m_pal.onPrimary, m_pal.hoverOpacity ) );
 
@@ -806,6 +812,10 @@ void Editor::setupPushButton()
     setGradient( Q::Panel | M3::Tonal | Q::Pressed, tonalPressedColor );
     setShadowMetrics( Q::Panel | M3::Tonal | Q::Pressed, m_pal.elevation0 );
 
+    const auto tonalCheckedColor = flattenedColor( m_pal.onSecondaryContainer,
+        m_pal.secondaryContainer, checkedOpacity );
+    setGradient( Q::Panel | M3::Tonal | Q::Checked, tonalCheckedColor );
+
 
     // outlined buttons:
 
@@ -831,6 +841,7 @@ void Editor::setupPushButton()
 
     setGradient( Q::Panel | M3::Outlined | Q::Pressed, m_pal.primary12 );
 
+    setGradient( Q::Panel | M3::Outlined | Q::Checked, m_pal.primary12 );
 
     /*
         text buttons:
@@ -857,6 +868,8 @@ void Editor::setupPushButton()
     setGradient( Q::Panel | M3::Text | Q::Focused, m_pal.primary12 );
 
     setGradient( Q::Panel | M3::Text | Q::Pressed, m_pal.primary12 );
+
+    setGradient( Q::Panel | M3::Text | Q::Checked, m_pal.primary12 );
 }
 
 void Editor::setupDialogButtonBox()