using graphics for the spin box button indicators

skins/material3/QskMaterial3Skin.cpp

@@ -893,6 +893,7 @@ void Editor::setupSpinBox()
     {
         setGradient( subControl, m_pal.primary );
         setGradient( subControl | Q::Disabled, m_pal.onSurface12 );
+        setPadding( subControl, 10 );
     }
 
     {
@@ -904,10 +905,9 @@ void Editor::setupSpinBox()
 
     for( const auto subControl : { Q::DownIndicator, Q::UpIndicator } )
     {
-        setColor( subControl, m_pal.onPrimary );
-        setColor( subControl | Q::Disabled, m_pal.onSurface38 );
         setAlignment( subControl, Qt::AlignCenter );
-        setFontRole( subControl, QskMaterial3Skin::M3LabelLarge );
+        setGraphicRole( subControl, QskMaterial3Skin::GraphicRoleOnPrimary );
+        setGraphicRole( subControl | Q::Disabled, QskMaterial3Skin::GraphicRoleOnSurface38 );
     }
 
     setColor( Q::Text, m_pal.onBackground );
@@ -1370,9 +1370,11 @@ QskGraphic QskMaterial3Skin::symbol( int symbolType ) const
             return *( provider->requestGraphic( "segmented-button-check" ) );
 
         case QskStandardSymbol::ComboBoxSymbolPopupClosed:
+        case QskStandardSymbol::TriangleDown:
             return *( provider->requestGraphic( "combo-box-arrow-closed" ) );
 
         case QskStandardSymbol::ComboBoxSymbolPopupOpen:
+        case QskStandardSymbol::TriangleUp:
             return *( provider->requestGraphic( "combo-box-arrow-open" ) );
 
         default:

skins/squiek/QskSquiekSkin.cpp

@@ -44,6 +44,7 @@
 #include <QskMargins.h>
 #include <QskNamespace.h>
 #include <QskRgbValue.h>
+#include <QskColorFilter.h>
 
 static const int qskDuration = 200;
 
@@ -175,6 +176,11 @@ namespace
 
         const ColorPalette& m_pal;
     };
+
+    enum ColorRole
+    {
+        DisabledColor = 1
+    };
 }
 
 void Editor::setSeparator( QskAspect aspect )
@@ -1041,7 +1047,7 @@ void Editor::setupSpinBox()
     for ( auto subControl : { Q::UpPanel, Q::DownPanel } )
     {
         setButton( subControl, Raised, 1.0 );
-        setPadding( subControl, 0.0 );
+        setPadding( subControl, 4 );
         setStrutSize( subControl, 20, 10 );
         setBoxShape( subControl, 0 );
 
@@ -1056,12 +1062,9 @@ void Editor::setupSpinBox()
 
     for ( auto subControl : { Q::UpIndicator, Q::DownIndicator } )
     {
+        setGraphicRole( subControl | Q::Disabled, DisabledColor );
         setAlignment( subControl, Qt::AlignCenter );
-#if 1
+
-        setFontRole( subControl, QskSkin::TinyFont ); // until it is no graphic
-        setColor( subControl, m_pal.themeForeground );
-        setColor( subControl | Q::Disabled, m_pal.darker200 );
-#endif
         setAnimation( subControl | A::Color, 100 );
     }
 }
@@ -1122,6 +1125,8 @@ QskSquiekSkin::QskSquiekSkin( QObject* parent )
 {
     setupFonts( QStringLiteral( "DejaVuSans" ) );
 
+    addGraphicRole( DisabledColor, m_data->palette.lighter150 );
+
     Editor editor( &hintTable(), m_data->palette );
     editor.setup();
 }
@@ -1138,5 +1143,12 @@ void QskSquiekSkin::resetColors( const QColor& accent )
     editor.setup();
 }
 
+void QskSquiekSkin::addGraphicRole( int role, const QColor& color )
+{
+    QskColorFilter colorFilter;
+    colorFilter.addColorSubstitution( QskRgb::Black, color.rgba() );
+
+    setGraphicFilter( role, colorFilter );
+}
 
 #include "moc_QskSquiekSkin.cpp"

skins/squiek/QskSquiekSkin.h

@@ -22,6 +22,7 @@ class QSK_SQUIEK_EXPORT QskSquiekSkin : public QskSkin
 
   private:
     void resetColors( const QColor& accent ) override;
+    void addGraphicRole( int role, const QColor& );
 
     class PrivateData;
     std::unique_ptr< PrivateData > m_data;

src/controls/QskSpinBoxSkinlet.cpp

@@ -6,7 +6,10 @@
 #include "QskSpinBoxSkinlet.h"
 #include "QskSpinBox.h"
 #include "QskFunctions.h"
+#include "QskSkin.h"
 #include "QskSkinStateChanger.h"
+#include "QskStandardSymbol.h"
+#include "QskGraphic.h"
 
 #include <qfontmetrics.h>
 
@@ -92,15 +95,19 @@ QSGNode* QskSpinBoxSkinlet::updateSubNode(
         case UpIndicator:
         {
             stateChanger.setStates( qskButtonStates( skinnable, Q::UpIndicator ) );
-            return updateTextNode( skinnable, node,
+
-                QStringLiteral( "+" ), Q::UpIndicator );
+            const auto skin = skinnable->effectiveSkin();
+            return updateGraphicNode( skinnable, node,
+                skin->symbol( QskStandardSymbol::TriangleUp ), Q::UpIndicator );
         }
 
         case DownIndicator:
         {
             stateChanger.setStates( qskButtonStates( skinnable, Q::DownIndicator ) );
-            return updateTextNode( skinnable, node,
+
-                QStringLiteral( "-" ), Q::DownIndicator );
+            const auto skin = skinnable->effectiveSkin();
+            return updateGraphicNode( skinnable, node,
+                skin->symbol( QskStandardSymbol::TriangleDown ), Q::DownIndicator );
         }
 
         case TextPanel:
@@ -271,4 +278,3 @@ QSizeF QskSpinBoxSkinlet::sizeHint( const QskSkinnable* skinnable,
     hint = hint.expandedTo( spinBox->strutSizeHint( Q::Panel ) );
     return hint;
 }
-