using icons from https://github.com/microsoft/fluentui-system-icons/tree/main/assets

designsystems/fluent2/QskFluent2Icons.qrc

@@ -1,10 +1,7 @@
 <RCC>
     <qresource prefix="/fluent2">
         <file>icons/qvg/checkmark.qvg</file>
-        <file>icons/qvg/combo-box-arrow-closed.qvg</file>
+        <file>icons/qvg/chevron_down.qvg</file>
-        <file>icons/qvg/combo-box-arrow-open.qvg</file>
+        <file>icons/qvg/chevron_up.qvg</file>
-        <file>icons/qvg/segmented-button-check.qvg</file>
-        <file>icons/qvg/spin-box-arrow-down.qvg</file>
-        <file>icons/qvg/spin-box-arrow-up.qvg</file>
     </qresource>
 </RCC>

designsystems/fluent2/QskFluent2Skin.cpp

@@ -419,7 +419,6 @@ void Editor::setupCheckBoxMetrics()
     setStrutSize( Q::Box, { 20_px, 20_px } ); // 18 + 2*1 border
     setBoxShape( Q::Box, 4_px ); // adapt to us taking the border into account
     setBoxBorderMetrics( Q::Box, 1_px );
-    setPadding( Q::Box, 5_px ); // "icon size"
 
     setFontRole( Q::Text, Fluent2::Body );
 }
@@ -548,9 +547,9 @@ void Editor::setupComboBoxMetrics()
     setAlignment( Q::Text, Qt::AlignLeft | Qt::AlignVCenter );
     setFontRole( Q::Text, Fluent2::Body );
 
-    setStrutSize( Q::StatusIndicator, 12_px, 12_px );
+    setStrutSize( Q::StatusIndicator, 16_px, 16_px );
-    setSymbol( Q::StatusIndicator, symbol( "spin-box-arrow-down" ) );
+    setSymbol( Q::StatusIndicator, symbol( "chevron_down" ) );
-    setSymbol( Q::StatusIndicator | Q::PopupOpen, symbol( "spin-box-arrow-up" ) );
+    // setSymbol( Q::StatusIndicator | Q::PopupOpen, symbol( "chevron_up" ) );
 
     // Using Focused (Pressed doesn't exist yet):
     setBoxBorderMetrics( Q::Panel | Q::Focused, { 1_px, 1_px, 1_px, 2_px } );
@@ -1523,20 +1522,19 @@ void Editor::setupSpinBoxMetrics()
 
     setPadding( Q::TextPanel, { 11_px, 0, 11_px, 0 } );
 
-#if 1
+    for ( auto panel : { Q::UpPanel, Q::DownPanel } )
-    // probably obsolete once QskGraphic supports viewBox
+        setStrutSize( panel, 32_px, 18_px );
-    setStrutSize( Q::UpPanel, 32_px, 20_px );
-    setPadding( Q::UpPanel, { 11_px, 7_px, 11_px, 7_px } );
 
-    setStrutSize( Q::DownPanel, 34_px, 20_px );
+    setSymbol( Q::UpIndicator, symbol( "chevron_up" ) );
-    setPadding( Q::DownPanel, { 11_px, 7_px, 13_px, 7_px } );
+    setSymbol( Q::DownIndicator, symbol( "chevron_down" ) );
+
+    setPadding( Q::UpPanel, { 0, 1_px, 0, 0 } );
+    setPadding( Q::DownPanel, { 0, 0, 0, 1_px } );
+
+#if 0
+    // QskSpinBox::Pressed is missing yet
+    setBoxBorderMetrics( Q::Panel | Q::Pressed, { 1_px, 1_px, 1_px, 2_px } );
 #endif
-
-    setSymbol( Q::UpIndicator, symbol( "spin-box-arrow-up" ) );
-    setSymbol( Q::DownIndicator, symbol( "spin-box-arrow-down" ) );
-
-    // Focused (Pressed doesn't exist yet):
-    setBoxBorderMetrics( Q::Panel | Q::Focused, { 1_px, 1_px, 1_px, 2_px } );
 }
 
 void Editor::setupSpinBoxColors(
@@ -1599,8 +1597,17 @@ void Editor::setupSpinBoxColors(
         panelColor = rgbSolid( panelColor, pal.background.solid.base );
 
         setGradient( panel, panelColor );
+
         setBoxBorderGradient( panel, borderColor1, borderColor2, panelColor );
 
+        if ( state == Q::Focused )
+        {
+            const auto colors = boxBorderColors( panel );
+
+            setBoxBorderColors( panel | Q::Decreasing, colors );
+            setBoxBorderColors( panel | Q::Increasing, colors );
+        }
+
         setColor( text, textColor );
 
         setGraphicRole( upIndicator, graphicRole );

designsystems/fluent2/icons/README

@@ -0,0 +1,10 @@
+SVGs have been taken from https://github.com/microsoft/fluentui-system-icons/tree/main/assets.
+
+Icons are available in different sizes. As SVGs can be scaled we only need
+one version of them - chosing the '12'.
+
+As we are replacing the colors of the SVGs using graphic filters we set the
+color in the SVGs manually to black ( instead of #212121 ). So they are in
+line with icons coming from somewhere else.
+
+Names have been shortened ( ic_fluent_xyz_16_regular.svg -> xyz.svg )

designsystems/fluent2/icons/checkmark.svg

@@ -1,4 +1,3 @@
-<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.00195312 3.49805C0.00195312 3.36133 0.0507812 3.24414 0.148438 3.14648C0.246094 3.04883 0.363281 3 0.5 3C0.636719 3 0.753906 3.04883 0.851562 3.14648L3.5 5.79492L9.14844 0.146484C9.24609 0.0488281 9.36328 0 9.5 0C9.57031 0 9.63477 0.0136719 9.69336 0.0410156C9.75586 0.0644531 9.80859 0.0996094 9.85156 0.146484C9.89844 0.189453 9.93555 0.242187 9.96289 0.304688C9.99023 0.363281 10.0039 0.427734 10.0039 0.498047C10.0039 0.634766 9.95312 0.753906 9.85156 0.855469L3.85156 6.85547C3.75391 6.95312 3.63672 7.00195 3.5 7.00195C3.36328 7.00195 3.24609 6.95312 3.14844 6.85547L0.148438 3.85547C0.0507812 3.75781 0.00195312 3.63867 0.00195312 3.49805Z" fill="black"/>
+<path d="M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z" fill="black"/>
 </svg>
-

designsystems/fluent2/icons/chevron_down.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.14645 4.64645C2.34171 4.45118 2.65829 4.45118 2.85355 4.64645L6 7.79289L9.14645 4.64645C9.34171 4.45118 9.65829 4.45118 9.85355 4.64645C10.0488 4.84171 10.0488 5.15829 9.85355 5.35355L6.35355 8.85355C6.15829 9.04882 5.84171 9.04882 5.64645 8.85355L2.14645 5.35355C1.95118 5.15829 1.95118 4.84171 2.14645 4.64645Z" fill="black"/>
+</svg>

designsystems/fluent2/icons/chevron_up.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.14645 7.35355C2.34171 7.54882 2.65829 7.54882 2.85355 7.35355L6 4.20711L9.14645 7.35355C9.34171 7.54882 9.65829 7.54882 9.85355 7.35355C10.0488 7.15829 10.0488 6.84171 9.85355 6.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645L2.14645 6.64645C1.95118 6.84171 1.95118 7.15829 2.14645 7.35355Z" fill="black"/>
+</svg>

designsystems/fluent2/icons/combo-box-arrow-closed.svg

@@ -1,4 +0,0 @@
-<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.25 0.5L4 4.25L7.75 0.5H0.25Z" fill="black"/>
-</svg>
-

designsystems/fluent2/icons/combo-box-arrow-open.svg

@@ -1,4 +0,0 @@
-<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.25 0.5L4 4.25L7.75 0.5H0.25Z" transform="rotate(180 4 2.5)" fill="black"/>
-</svg>
-

designsystems/fluent2/icons/segmented-button-check.svg

@@ -1,4 +0,0 @@
-<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.24914 8.12738L1.12164 4.99988L0.0566406 6.05738L4.24914 10.2499L13.2491 1.24988L12.1916 0.192383L4.24914 8.12738Z" fill="black"/>
-</svg>
-

designsystems/fluent2/icons/spin-box-arrow-down.svg

@@ -1,4 +0,0 @@
-<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.5 1.125C0.5 1.02344 0.537109 0.935547 0.611328 0.861328C0.685547 0.787109 0.773438 0.75 0.875 0.75C0.976562 0.75 1.06445 0.787109 1.13867 0.861328L5 4.7168L8.86133 0.861328C8.93555 0.787109 9.02344 0.75 9.125 0.75C9.22656 0.75 9.31445 0.787109 9.38867 0.861328C9.46289 0.935547 9.5 1.02344 9.5 1.125C9.5 1.22656 9.46289 1.31445 9.38867 1.38867L5.26367 5.51367C5.18945 5.58789 5.10156 5.625 5 5.625C4.89844 5.625 4.81055 5.58789 4.73633 5.51367L0.611328 1.38867C0.537109 1.31445 0.5 1.22656 0.5 1.125Z" fill="black"/>
-</svg>
-

designsystems/fluent2/icons/spin-box-arrow-up.svg

@@ -1,4 +0,0 @@
-<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.5 4.875C0.5 4.77344 0.537109 4.68555 0.611328 4.61133L4.73633 0.486328C4.81055 0.412109 4.89844 0.375 5 0.375C5.10156 0.375 5.18945 0.412109 5.26367 0.486328L9.38867 4.61133C9.46289 4.68555 9.5 4.77344 9.5 4.875C9.5 4.97656 9.46289 5.06445 9.38867 5.13867C9.31445 5.21289 9.22656 5.25 9.125 5.25C9.02344 5.25 8.93555 5.21289 8.86133 5.13867L5 1.2832L1.13867 5.13867C1.06445 5.21289 0.976562 5.25 0.875 5.25C0.773438 5.25 0.685547 5.21289 0.611328 5.13867C0.537109 5.06445 0.5 4.97656 0.5 4.875Z" fill="black"/>
-</svg>
-