M3_ using px instead of dp what seems to match much better with the

displayed controls on the M3 web pages. Also using pt instead of dp.
Not sure why the specs mention dp as unit and what is exactly meant by
it.

designsystems/material3/QskMaterial3Skin.cpp

@@ -104,47 +104,28 @@ namespace
 
 namespace
 {
-    inline constexpr qreal dpToPixels( qreal value )
+    /*
+        mapping between px/pt and Qt's logical coordinates
+     */
+    inline constexpr double operator ""_px( long double value ) Q_DECL_UNUSED
     {
-        /*
+        return static_cast< double >( value );
-            see: https://en.wikipedia.org/wiki/Device-independent_pixel
-                 https://developer.android.com/training/multiscreen/screendensities
-
-            One dp is a virtual pixel unit that's roughly equal to one pixel
-            on a medium-density screen ( 160 dpi ).
-
-            One logical pixel is equivalent to 1/96th of an inch.
-         */
-
-        /*
-           For non scalable resources the following density buckets
-           are recommended:
-
-                  ldpi: ( 0 -> 140 )  : 120
-                  mdpi: ( 140 -> 200 ): 160
-                  hdpi: ( 140 -> 280 ): 240
-                 xhdpi: ( 280 -> 400 ): 320
-                xxhdpi: ( 400 -> 560 ): 480
-               xxxhdpi: ( 560 -> ... ): 640
-
-           For some reason the metrics from the Figma model seem to be
-           too small on our deskop system. Until this has bee understood
-           we use the ldpi bucket as the density of the logical coordinate
-           system falls into it.
-
-           Need to find out why TODO ...
-         */
-        return value * 96.0 / 120.0;
     }
 
-    Q_DECL_UNUSED inline constexpr double operator ""_dp( long double value )
+    inline constexpr double operator ""_px( unsigned long long value ) Q_DECL_UNUSED
     {
-        return dpToPixels( static_cast< qreal >( value ) );
+        return static_cast< double >( value );
     }
 
-    Q_DECL_UNUSED inline constexpr double operator ""_dp( unsigned long long value )
+    inline constexpr double operator ""_pt( long double value ) Q_DECL_UNUSED
     {
-        return dpToPixels( value );
+        // px: 1/96 inch, pt: 1/72 inch
+        return value * 72.0 / 96.0;
+    }
+
+    inline constexpr double operator ""_pt( unsigned long long value ) Q_DECL_UNUSED
+    {
+        return value * 72.0 / 96.0;
     }
 
     class Combination : public QskStateCombination
@@ -169,6 +150,9 @@ namespace
 
         void setup()
         {
+            // default font
+            setFontRole( QskAspect::NoSubcontrol, BodyLarge );
+
             for ( int i = 0; i < staticMetaObject.methodCount(); i++ )
                 staticMetaObject.method( i ).invokeOnGadget( this );
         }
@@ -234,15 +218,15 @@ void Editor::setupCheckBox()
 
     // == metrics
 
-    setSpacing( Q::Panel, 40_dp );
+    setSpacing( Q::Panel, 6_px );
 
     {
-        setStrutSize( Q::Box, 18_dp, 18_dp );
+        setStrutSize( Q::Box, 18_px, 18_px );
-        setBoxBorderMetrics( Q::Box, 2_dp );
+        setBoxBorderMetrics( Q::Box, 2_px );
-        setBoxShape( Q::Box, 2_dp );
+        setBoxShape( Q::Box, 2_px );
-        setPadding( Q::Box, 3_dp ); // "icon size"
+        setPadding( Q::Box, 3_px ); // "icon size"
 
-        QskShadowMetrics shadowMetrics( 12_dp, 0.0 );
+        QskShadowMetrics shadowMetrics( 12_px, 0.0 );
         shadowMetrics.setShapeMode( QskShadowMetrics::Ellipse );
         setShadowMetrics( Q::Box, shadowMetrics );
     }
@@ -324,13 +308,13 @@ void Editor::setupComboBox()
 {
     using Q = QskComboBox;
 
-    setStrutSize( Q::Panel,  -1.0, 56_dp );
+    setStrutSize( Q::Panel,  -1.0, 56_px );
-    setPadding( Q::Panel, { 12_dp, 8_dp, 12_dp, 8_dp } );
+    setPadding( Q::Panel, { 12_px, 8_px, 12_px, 8_px } );
     setGradient( Q::Panel, m_pal.surfaceVariant );
     setBoxShape( Q::Panel, m_pal.shapeExtraSmallTop );
-    setBoxBorderMetrics( Q::Panel, { 0, 0, 0, 1_dp } );
+    setBoxBorderMetrics( Q::Panel, { 0, 0, 0, 1_px } );
     setBoxBorderColors( Q::Panel, m_pal.onSurfaceVariant );
-    setSpacing( Q::Panel, 8_dp );
+    setSpacing( Q::Panel, 8_px );
 
     setGradient( Q::Panel | Q::Hovered,
         m_pal.hoverColor( m_pal.onSurfaceVariant, m_pal.surfaceVariant ) );
@@ -344,13 +328,13 @@ void Editor::setupComboBox()
     setGradient( Q::Panel | Q::PopupOpen,
         m_pal.pressedColor( m_pal.onSurfaceVariant, m_pal.surfaceVariant ) );
 
-    setStrutSize( Q::Icon, 24_dp, 24_dp );
+    setStrutSize( Q::Icon, 24_px, 24_px );
     setGraphicRole( Q::Icon, QskMaterial3Skin::GraphicRoleOnSurface );
 
     setColor( Q::Text, m_pal.onSurface );
-    setFontRole( Q::Text, BodyMedium );
+    setFontRole( Q::Text, BodyLarge );
 
-    setStrutSize( Q::StatusIndicator, 12_dp, 12_dp );
+    setStrutSize( Q::StatusIndicator, 12_px, 12_px );
     setGraphicRole( Q::StatusIndicator, QskMaterial3Skin::GraphicRoleOnSurface );
     setAlignment( Q::StatusIndicator, Qt::AlignRight | Qt::AlignVCenter );
 
@@ -396,7 +380,7 @@ void Editor::setupMenu()
     setHint( Q::Overlay | A::Style, false );
     setGradient( Q::Overlay, stateLayerColor( m_pal.outline, 0.8 ) );
 
-    setBoxShape( Q::Panel, 4_dp );
+    setBoxShape( Q::Panel, 4_px );
     setBoxBorderMetrics( Q::Panel, 0 );
     setPadding( Q::Panel, 0 );
 
@@ -408,13 +392,13 @@ void Editor::setupMenu()
     setShadowMetrics( Q::Panel, m_pal.elevation2 );
     setShadowColor( Q::Panel, m_pal.shadow );
 
-    setMetric( Q::Separator | A::Size, 1_dp );
+    setMetric( Q::Separator | A::Size, 1_px );
     setBoxShape( Q::Separator, 0 );
     setBoxBorderMetrics( Q::Separator, 0 );
     setGradient( Q::Separator, m_pal.primary12 );
 
-    setPadding( Q::Segment, 6_dp );
+    setPadding( Q::Segment, 6_px );
-    setSpacing( Q::Segment, 5_dp );
+    setSpacing( Q::Segment, 5_px );
     setGradient( Q::Segment, Qt::transparent );
 
     setGradient( Q::Segment | Q::Hovered,
@@ -426,12 +410,12 @@ void Editor::setupMenu()
     setGradient( Q::Segment | Q::Pressed | Q::Selected,
         m_pal.pressedColor( m_pal.onSurface, m_pal.primary12 ) );
 
-    setPadding( Q::Icon, 7_dp );
+    setPadding( Q::Icon, 7_px );
-    setStrutSize( Q::Icon, 24_dp, 24_dp );
+    setStrutSize( Q::Icon, 24_px, 24_px );
     setGraphicRole( Q::Icon, QskMaterial3Skin::GraphicRoleOnSurface );
 
     setColor( Q::Text, m_pal.onSurface );
-    setFontRole( Q::Text, BodyMedium );
+    setFontRole( Q::Text, BodyLarge );
 
     setAnimation( Q::Cursor | A::Position | A::Metric, 75, QEasingCurve::OutCubic );
 
@@ -443,7 +427,8 @@ void Editor::setupTextLabel()
     using Q = QskTextLabel;
 
     setColor( Q::Text, m_pal.onSurface );
-    setPadding( Q::Panel, 5_dp );
+    setFontRole( Q::Text, BodyLarge );
+    setPadding( Q::Panel, 5_px );
 }
 
 void Editor::setupTextField()
@@ -451,14 +436,14 @@ void Editor::setupTextField()
     using Q = QskTextField;
     using SK = QskTextFieldSkinlet;
 
-    setStrutSize( Q::Panel,  -1.0, 56_dp );
+    setStrutSize( Q::Panel,  -1.0, 56_px );
-    setPadding( Q::Panel, { 12_dp, 8_dp, 12_dp, 8_dp } );
+    setPadding( Q::Panel, { 12_px, 8_px, 12_px, 8_px } );
     setGradient( Q::Panel, m_pal.surfaceVariant );
     setColor( Q::Panel | SK::Selected, m_pal.primary12 );
     setBoxShape( Q::Panel, m_pal.shapeExtraSmallTop );
-    setBoxBorderMetrics( Q::Panel, { 0, 0, 0, 1_dp } );
+    setBoxBorderMetrics( Q::Panel, { 0, 0, 0, 1_px } );
     setBoxBorderColors( Q::Panel, m_pal.onSurfaceVariant );
-    setSpacing( Q::Panel, 8_dp );
+    setSpacing( Q::Panel, 8_px );
 
     const auto hoverColor = flattenedColor( m_pal.onSurfaceVariant,
         m_pal.surfaceVariant, m_pal.hoverOpacity );
@@ -471,7 +456,7 @@ void Editor::setupTextField()
     // ### Also add a pressed state
 
     setColor( Q::Text, m_pal.onSurface );
-    setFontRole( Q::Text, BodyMedium );
+    setFontRole( Q::Text, BodyLarge );
     setAlignment( Q::Text, Qt::AlignLeft | Qt::AlignVCenter );
 
     setAlignment( Q::PlaceholderText, Qt::AlignLeft | Qt::AlignVCenter );
@@ -485,7 +470,7 @@ void Editor::setupTextField()
     // PlaceholderText
 
     setColor( Q::PlaceholderText, color( Q::Text ) );
-    setFontRole( Q::PlaceholderText, fontRole( Q::Text ) );
+    setFontRole( Q::PlaceholderText, BodyLarge );
     setAlignment( Q::PlaceholderText, alignment( Q::Text ) );
 }
 
@@ -497,7 +482,7 @@ void Editor::setupProgressBar()
     for ( auto subControl : { Q::Groove, Q::Fill } )
     {
         setBoxShape( subControl, { 100, Qt::RelativeSize } );
-        setMetric( subControl | A::Size, 4_dp );
+        setMetric( subControl | A::Size, 4_px );
     }
 
     setGradient( Q::Groove, m_pal.surfaceContainerHighest );
@@ -511,13 +496,13 @@ void Editor::setupProgressRing()
 {
     using Q = QskProgressRing;
 
-    setArcMetrics( Q::Groove, 90, -360, 4_dp );
+    setArcMetrics( Q::Groove, 90, -360, 4_px );
     setGradient( Q::Groove, m_pal.surfaceContainerHighest );
     setGradient( Q::Groove | Q::Disabled, m_pal.onSurface12 );
 
     setSpacing( Q::Fill, 10 );
-    setStrutSize( Q::Fill, { 48_dp, 48_dp } );
+    setStrutSize( Q::Fill, { 48_px, 48_px } );
-    setArcMetrics( Q::Fill, 90, -360, 4_dp );
+    setArcMetrics( Q::Fill, 90, -360, 4_px );
     setGradient( Q::Fill, m_pal.primary );
     setGradient( Q::Fill | Q::Disabled, m_pal.onSurface38 );
 }
@@ -527,17 +512,17 @@ void Editor::setupRadioBox()
     using Q = QskRadioBox;
     using A = QskAspect;
 
-    setSpacing( Q::Panel, 10_dp );
+    setSpacing( Q::Panel, 6_px );
-    setSpacing( Q::Button, 10_dp );
+    setSpacing( Q::Button, 10_px );
 
-    setStrutSize( Q::CheckIndicatorPanel, 20_dp, 20_dp );
+    setStrutSize( Q::CheckIndicatorPanel, 20_px, 20_px );
 
     for ( auto subControl : { Q::CheckIndicatorPanel, Q::CheckIndicator } )
         setBoxShape( subControl, 100, Qt::RelativeSize ); // circular
 
-    setBoxBorderMetrics( Q::CheckIndicatorPanel, 2_dp );
+    setBoxBorderMetrics( Q::CheckIndicatorPanel, 2_px );
     setBoxBorderColors( Q::CheckIndicatorPanel, m_pal.onBackground );
-    setPadding( Q::CheckIndicatorPanel, 5_dp );
+    setPadding( Q::CheckIndicatorPanel, 5_px );
 
     setGradient( Q::Button, QskGradient() );
 
@@ -550,7 +535,7 @@ void Editor::setupRadioBox()
         {
             const auto aspect = Q::CheckIndicatorPanel | state1 | state2;
 
-            setShadowMetrics( aspect, { 10_dp, 0 } );
+            setShadowMetrics( aspect, { 10_px, 0 } );
 
             auto rgb = ( state2 == Q::Selected ) ? m_pal.primary : m_pal.onSurface;
             rgb = stateLayerColor( rgb, m_pal.stateOpacity( state1 ) );
@@ -584,19 +569,19 @@ void Editor::setupSegmentedBar()
     using A = QskAspect;
     using Q = QskSegmentedBar;
 
-    const QSizeF panelStrutSize( -1, 48_dp );
+    const QSizeF panelStrutSize( -1, 48_px );
-    const QSizeF segmentStrutSize( 48_dp, 40_dp );
+    const QSizeF segmentStrutSize( 48_px, 40_px );
 
     {
         // Container
 
         setGradient( Q::Panel, Qt::transparent );
         setPadding( Q::Panel, 0 );
-        setSpacing( Q::Panel, 8_dp );
+        setSpacing( Q::Panel, 8_px );
 
         setBoxShape( Q::Panel, 100, Qt::RelativeSize );
 
-        setBoxBorderMetrics( Q::Panel, 1_dp );
+        setBoxBorderMetrics( Q::Panel, 1_px );
         setBoxBorderColors( Q::Panel, m_pal.outline );
 
         setBoxBorderColors( Q::Panel | Q::Disabled, m_pal.onSurface12 );
@@ -625,15 +610,15 @@ void Editor::setupSegmentedBar()
 
         setGradient( Q::Segment | Q::Selected | Q::Disabled, m_pal.onSurface12 );
 
-        setPadding( Q::Segment | A::Horizontal, 12_dp, 0, 12_dp, 0 );
+        setPadding( Q::Segment | A::Horizontal, 12_px, 0, 12_px, 0 );
-        setPadding( Q::Segment | A::Vertical, 0, 12_dp, 0, 12_dp );
+        setPadding( Q::Segment | A::Vertical, 0, 12_px, 0, 12_px );
     }
 
     {
         // Separator
 
-        setStrutSize( Q::Separator | A::Horizontal, 1_dp, segmentStrutSize.height() );
+        setStrutSize( Q::Separator | A::Horizontal, 1_px, segmentStrutSize.height() );
-        setStrutSize( Q::Separator | A::Vertical, segmentStrutSize.height(), 1_dp );
+        setStrutSize( Q::Separator | A::Vertical, segmentStrutSize.height(), 1_px );
         setPadding( Q::Separator, 0 );
         setGradient( Q::Separator, m_pal.outline );
         setColor( Q::Separator | Q::Disabled, m_pal.onSurface12 );
@@ -663,7 +648,7 @@ void Editor::setupSegmentedBar()
         // Icon
 
         setSymbol( Q::Icon, symbol( "check" ) );
-        setStrutSize( Q::Icon, 18_dp, 18_dp );
+        setStrutSize( Q::Icon, 18_px, 18_px );
 
         setGraphicRole( Q::Icon, QskMaterial3Skin::GraphicRoleOnSurface );
         setGraphicRole( Q::Icon | Q::Selected,
@@ -681,7 +666,7 @@ void Editor::setupSeparator()
     {
         const auto aspect = Q::Panel | variation;
 
-        setMetric( aspect | A::Size, 1_dp );
+        setMetric( aspect | A::Size, 1_px );
         setBoxShape( Q::Panel, 0 );
         setBoxBorderMetrics( Q::Panel, 0 );
         setGradient( aspect, m_pal.outlineVariant );
@@ -692,12 +677,12 @@ void Editor::setupPageIndicator()
 {
     using Q = QskPageIndicator;
 
-    const auto extent = 9_dp;
+    const auto extent = 9_px;
     setStrutSize( Q::Bullet, extent, extent );
 
     // circles, without border
     setBoxShape( Q::Bullet, 100, Qt::RelativeSize );
-    setBoxBorderMetrics( Q::Bullet, 0 );
+    setBoxBorderMetrics( Q::Bullet, 0_px );
 
     setGradient( Q::Bullet, m_pal.primaryContainer );
     setGradient( Q::Bullet | Q::Selected, m_pal.primary );
@@ -705,8 +690,8 @@ void Editor::setupPageIndicator()
     setGradient( Q::Bullet | Q::Disabled, m_pal.onSurface12 );
     setGradient( Q::Bullet | Q::Selected | Q::Disabled, m_pal.onSurface38 );
 
-    setSpacing( Q::Panel, 3_dp );
+    setSpacing( Q::Panel, 3_px );
-    setPadding( Q::Panel, 0 );
+    setPadding( Q::Panel, 0_px );
     setGradient( Q::Panel, QskGradient() ); // invisible
 }
 
@@ -720,20 +705,20 @@ void Editor::setupPushButton()
     constexpr auto Text = QskAspect::Tiny;
 
     setHint( Q::Panel | QskAspect::Direction, Qsk::LeftToRight );
-    setStrutSize( Q::Panel, -1, 40_dp );
+    setStrutSize( Q::Panel, -1, 40_px );
-    setSpacing( Q::Panel, 8_dp );
+    setSpacing( Q::Panel, 8_px );
-    setPadding( Q::Panel, { 24_dp, 0, 24_dp, 0 } );
+    setPadding( Q::Panel, { 24_px, 0, 24_px, 0 } );
     setBoxShape( Q::Panel, 100, Qt::RelativeSize );
     setShadowColor( Q::Panel, m_pal.shadow );
 
-    setStrutSize( Q::Icon, 18_dp, 18_dp );
+    setStrutSize( Q::Icon, 18_px, 18_px );
-    setPadding( Q::Icon, { 0, 0, 8_dp, 0 } );
+    setPadding( Q::Icon, { 0, 0, 8_px, 0 } );
     setGraphicRole( Q::Icon, QskMaterial3Skin::GraphicRoleOnPrimary );
 
     setFontRole( Q::Text, LabelLarge );
     setPadding( Q::Text, 0 );
 
-    setBoxShape( Q::Splash, 40_dp );
+    setBoxShape( Q::Splash, 40_px );
     setAnimation( Q::Splash | QskAspect::Color, qskDuration );
 
     const auto checkedOpacity = m_pal.focusOpacity + m_pal.pressedOpacity;
@@ -833,7 +818,7 @@ void Editor::setupPushButton()
 
     setGradient( Q::Panel | Outlined, m_pal.surface );
     setBoxBorderColors( Q::Panel | Outlined, m_pal.outline );
-    setBoxBorderMetrics( Q::Panel | Outlined, 1_dp );
+    setBoxBorderMetrics( Q::Panel | Outlined, 1_px );
     setShadowMetrics( Q::Panel | Outlined, m_pal.elevation0 );
 
     setColor( Q::Text | Outlined, m_pal.primary );
@@ -919,8 +904,8 @@ void Editor::setupSlider()
     using Q = QskSlider;
     using SK = QskSliderSkinlet;
 
-    const auto extentGroove = 16_dp;
+    const auto extentGroove = 16_px;
-    const auto extentPanel = 44_dp;
+    const auto extentPanel = 44_px;
 
     setStrutSize( Q::Panel | A::Horizontal, 3 * extentGroove, extentPanel );
     setStrutSize( Q::Panel | A::Vertical, extentPanel, 3 * extentGroove );
@@ -938,7 +923,7 @@ void Editor::setupSlider()
     setBoxShape( Q::Groove, 100, Qt::RelativeSize );
     setBoxShape( Q::Fill, 100, Qt::RelativeSize );
 
-    setStrutSize( Q::Tick, { 4_dp, 4_dp } );
+    setStrutSize( Q::Tick, { 4_px, 4_px } );
     setBoxShape( Q::Tick, 100, Qt::RelativeSize );
 
     setGradient( Q::Tick, m_pal.primary );
@@ -954,8 +939,8 @@ void Editor::setupSlider()
     for ( const auto variation : { A::Horizontal, A::Vertical } )
     {
         QSizeF handleSize( extentGroove, extentPanel );
-        QskMargins margin1{ 6_dp, 0_dp };
+        QskMargins margin1{ 6_px, 0_px };
-        QskMargins margin2{ 7_dp, 0_dp };
+        QskMargins margin2{ 7_px, 0_px };
 
         if ( variation == A::Vertical )
         {
@@ -987,29 +972,29 @@ void Editor::setupSpinBox()
 
     setHint( Q::Panel | QskAspect::Style, Q::ButtonsLeftAndRight );
 
-    setStrutSize( Q::Panel, -1.0, 48_dp );
+    setStrutSize( Q::Panel, -1.0, 48_px );
-    setBoxShape( Q::Panel, 4_dp );
+    setBoxShape( Q::Panel, 4_px );
-    setBoxBorderMetrics( Q::Panel, 1_dp );
+    setBoxBorderMetrics( Q::Panel, 1_px );
 
     setBoxBorderColors( Q::Panel, m_pal.outline );
     setBoxBorderColors( Q::Panel | Q::Focused, m_pal.primary,
         Combination( { Q::Increasing, Q::Decreasing } ) );
 
-    setPadding( Q::Panel, 4_dp );
+    setPadding( Q::Panel, 4_px );
-    setSpacing( Q::Panel, 4_dp );
+    setSpacing( Q::Panel, 4_px );
 
-    setStrutSize( Q::TextPanel, 80_dp, 40_dp );
+    setStrutSize( Q::TextPanel, 80_px, 40_px );
-    setStrutSize( Q::UpPanel, 40_dp, 40_dp );
+    setStrutSize( Q::UpPanel, 40_px, 40_px );
-    setStrutSize( Q::DownPanel, 40_dp, 40_dp );
+    setStrutSize( Q::DownPanel, 40_px, 40_px );
 
     setAlignment( Q::Text, Qt::AlignCenter );
 
     for( const auto subControl : { Q::DownPanel, Q::UpPanel, Q::TextPanel } )
     {
-        setBoxBorderMetrics( subControl, 1_dp );
+        setBoxBorderMetrics( subControl, 1_px );
     }
 
-    setBoxShape( Q::TextPanel, 4_dp );
+    setBoxShape( Q::TextPanel, 4_px );
 
     setBoxShape( Q::DownPanel, 100, Qt::RelativeSize );
     setBoxShape( Q::UpPanel, 100, Qt::RelativeSize );
@@ -1017,7 +1002,7 @@ void Editor::setupSpinBox()
     for( const auto subControl : { Q::DownPanel, Q::UpPanel } )
     {
         setGradient( subControl | Q::Hovered, m_pal.primary8 );
-        setPadding( subControl, 11_dp );
+        setPadding( subControl, 11_px );
     }
 
     {
@@ -1041,19 +1026,19 @@ void Editor::setupSpinBox()
     setColor( Q::Text | Q::Disabled, m_pal.onSurface38 );
 
 #if 0
-    setPadding( Q::TextPanel, 5_dp );
+    setPadding( Q::TextPanel, 5_px );
-    setBoxShape( Q::TextPanel, 4_dp, 4_dp, 0, 0 );
+    setBoxShape( Q::TextPanel, 4_px, 4_px, 0, 0 );
-    setBoxBorderMetrics( Q::TextPanel, 0, 0, 0, 1_dp );
+    setBoxBorderMetrics( Q::TextPanel, 0, 0, 0, 1_px );
     setBoxBorderColors( Q::TextPanel, m_pal.onSurface );
 
-    setBoxBorderMetrics( Q::TextPanel | Q::Focused, 0, 0, 0, 2_dp );
+    setBoxBorderMetrics( Q::TextPanel | Q::Focused, 0, 0, 0, 2_px );
     setBoxBorderColors( Q::TextPanel | Q::Focused, m_pal.primary );
 
     setGradient( Q::TextPanel, m_pal.surfaceVariant );
 
     const auto c1 = QskRgb::toTransparentF( m_pal.onSurface, 0.04 );
     setGradient( Q::TextPanel | Q::Disabled, c1 );
-    setBoxBorderMetrics( Q::TextPanel | Q::Disabled, 0, 0, 0, 1_dp );
+    setBoxBorderMetrics( Q::TextPanel | Q::Disabled, 0, 0, 0, 1_px );
 
     setColor( Q::TextPanel | Q::Disabled, m_pal.onSurface38 );
     setBoxBorderColors( Q::TextPanel | Q::Disabled, m_pal.onSurface38 );
@@ -1066,7 +1051,7 @@ void Editor::setupSwitchButton()
     using Q = QskSwitchButton;
 
     setBoxShape( Q::Groove, 100, Qt::RelativeSize );
-    const QSizeF strutSize( 52_dp, 32_dp );
+    const QSizeF strutSize( 52_px, 32_px );
     setStrutSize( Q::Groove | A::Horizontal, strutSize );
     setStrutSize( Q::Groove | A::Vertical, strutSize.transposed() );
     setGradient( Q::Groove, m_pal.surfaceVariant );
@@ -1075,23 +1060,23 @@ void Editor::setupSwitchButton()
     setGradient( Q::Groove | Q::Checked, m_pal.primary );
 
     setGradient( Q::Groove | Q::Checked | Q::Disabled, m_pal.onSurface12 );
-    setBoxBorderMetrics( Q::Groove, 2_dp );
+    setBoxBorderMetrics( Q::Groove, 2_px );
     setBoxBorderColors( Q::Groove, m_pal.outline );
     setBoxBorderColors( Q::Groove | Q::Disabled, m_pal.onSurface12 );
 
     setBoxBorderMetrics( Q::Groove | Q::Checked, 0 );
 
     setBoxShape( Q::Handle, 100, Qt::RelativeSize );
-    setStrutSize( Q::Handle, { 30_dp, 30_dp } );
+    setStrutSize( Q::Handle, { 28_px, 28_px } );
-    setMargin( Q::Handle, 7_dp );
+    setMargin( Q::Handle, 7_px );
-    setShadowMetrics( Q::Handle, { 17_dp, 0 } );
+    setShadowMetrics( Q::Handle, { 17_px, 0 } );
     setShadowColor( Q::Handle, QskRgb::Transparent );
 
     setGradient( Q::Handle, m_pal.outline );
     setGradient( Q::Handle | Q::Checked, m_pal.onPrimary );
 
-    setStrutSize( Q::Icon, { 16_dp, 16_dp } );
+    setStrutSize( Q::Icon, { 16_px, 16_px } );
-    setPadding( Q::Icon, 6_dp );
+    setPadding( Q::Icon, 6_px );
     setSymbol( Q::Icon, symbol( "switchbutton-unchecked" ) );
     setSymbol( Q::Icon | Q::Checked, symbol( "switchbutton-checked" ) );
 
@@ -1111,13 +1096,13 @@ void Editor::setupSwitchButton()
 
             if ( state1 == Q::Pressed )
             {
-                setShadowMetrics( aspect, { 10_dp, 0 } );
+                setShadowMetrics( aspect, { 10_px, 0 } );
                 setMargin( aspect, 0.0 );
             }
             else if ( state2 == Q::Checked )
             {
-                setShadowMetrics( aspect, { 13_dp, 0 } );
+                setShadowMetrics( aspect, { 13_px, 0 } );
-                setMargin( aspect, 3_dp );
+                setMargin( aspect, 3_px );
             }
 
             if ( state1 )
@@ -1160,7 +1145,7 @@ void Editor::setupTabButton()
     using A = QskAspect;
     using Q = QskTabButton;
 
-    setStrutSize( Q::Panel, 48_dp, 64_dp );
+    setStrutSize( Q::Panel, 48_px, 48_px );
 #if 1
     // couldn't find a value in the specs
     setPadding( Q::Panel, 8, 0, 8, 0 );
@@ -1176,7 +1161,7 @@ void Editor::setupTabButton()
     setColor( Q::Text | Q::Hovered, m_pal.primary );
 
     QskBoxBorderMetrics border;
-    border.setWidthAt( Qt::BottomEdge, 3_dp );
+    border.setWidthAt( Qt::BottomEdge, 3_px );
     setBoxBorderMetrics( Q::Panel, border );
 
     QskBoxBorderColors borderColors( m_pal.surface );
@@ -1211,7 +1196,7 @@ void Editor::setupTabButton()
 
     setAnimation( Q::Panel | A::Color, qskDuration );
 
-    setFontRole( Q::Text, LabelLarge );
+    setFontRole( Q::Text, TitleSmall );
     setAlignment( Q::Text, Qt::AlignCenter );
 }
 
@@ -1256,11 +1241,11 @@ void Editor::setupVirtualKeyboard()
     using Q = QskVirtualKeyboard;
 
     // key panel
-    setMargin( Q::ButtonPanel, 5_dp );
+    setMargin( Q::ButtonPanel, 5_px );
     setGradient( Q::ButtonPanel, m_pal.surface2 );
     setGradient( Q::ButtonPanel | QskPushButton::Pressed, m_pal.surface );
     setColor( Q::ButtonText | QskPushButton::Pressed, m_pal.outlineVariant );
-    setBoxShape( Q::ButtonPanel, 6_dp );
+    setBoxShape( Q::ButtonPanel, 6_px );
 
     setBoxShape( Q::ButtonPanel | A::Huge, 100, Qt::RelativeSize );
     setGradient( Q::ButtonPanel | A::Huge, m_pal.primary );
@@ -1286,7 +1271,7 @@ void Editor::setupVirtualKeyboard()
 
     // panel
     setGradient( Q::Panel, m_pal.background );
-    setPadding( Q::Panel, { 3_dp, 25_dp, 3_dp, 5_dp } );
+    setPadding( Q::Panel, { 3_px, 25_px, 3_px, 5_px } );
 }
 
 void Editor::setupScrollView()
@@ -1299,11 +1284,11 @@ void Editor::setupScrollView()
 
     for ( auto subControl : { Q::HorizontalScrollBar, Q::VerticalScrollBar } )
     {
-        setMetric( subControl | A::Size, 6_dp );
+        setMetric( subControl | A::Size, 6_px );
         setPadding( subControl, 0 );
     }
 
-    const auto handleExtent = 40_dp;
+    const auto handleExtent = 40_px;
     setStrutSize( Q::HorizontalScrollHandle, handleExtent, 0.0 );
     setStrutSize( Q::VerticalScrollHandle, 0.0, handleExtent );
 
@@ -1324,8 +1309,8 @@ void Editor::setupListView()
     using Q = QskListView;
     using A = QskAspect;
 
-    setStrutSize( Q::Cell, { -1, 56_dp } );
+    setStrutSize( Q::Cell, { -1, 56_px } );
-    setPadding( Q::Cell, { 16_dp, 8_dp, 24_dp, 8_dp } );
+    setPadding( Q::Cell, { 16_px, 8_px, 24_px, 8_px } );
 
     setBoxBorderColors( Q::Cell, m_pal.outline );
 
@@ -1376,7 +1361,7 @@ void Editor::setupListView()
         }
     }
 
-    setFontRole( Q::Text, BodyMedium );
+    setFontRole( Q::Text, BodyLarge );
 
     setColor( Q::Text, m_pal.onSurface );
     setColor( Q::Text | Q::Disabled, m_pal.onSurface38 );
@@ -1394,17 +1379,17 @@ void Editor::setupSubWindow()
 
     // Panel
 
-    setPadding( Q::Panel, { 24_dp, 0, 24_dp, 24_dp } );
+    setPadding( Q::Panel, { 24_px, 0, 24_px, 24_px } );
-    setStrutSize( Q::Panel, { 280_dp, -1 } );
+    setStrutSize( Q::Panel, { 280_px, -1 } );
-    setBoxShape( Q::Panel, 28_dp );
+    setBoxShape( Q::Panel, 28_px );
     setBoxBorderMetrics( Q::Panel, 0 );
     setGradient( Q::Panel, m_pal.secondaryContainer );
     setShadowMetrics( Q::Panel, m_pal.elevation3 );
     setShadowColor( Q::Panel, m_pal.shadow );
 
     // TitleBarPanel
-    setBoxShape( Q::TitleBarPanel, { 28_dp, 28_dp, 0, 0 } );
+    setBoxShape( Q::TitleBarPanel, { 28_px, 28_px, 0, 0 } );
-    setPadding( Q::TitleBarPanel, { 24_dp, 24_dp, 24_dp, 16_dp } );
+    setPadding( Q::TitleBarPanel, { 24_px, 24_px, 24_px, 16_px } );
     setHint( Q::TitleBarPanel | QskAspect::Style, Q::NoDecoration );
 
     setGradient( Q::TitleBarPanel, m_pal.secondaryContainer );
@@ -1584,7 +1569,7 @@ QskMaterial3Theme::QskMaterial3Theme( QskSkin::ColorScheme colorScheme,
     elevation2 = QskShadowMetrics( -2, 8, { 0, 2 } );
     elevation3 = QskShadowMetrics( -1, 11, { 0, 2 } );
 
-    shapeExtraSmallTop = QskBoxShapeMetrics( 4_dp, 4_dp, 0, 0 );
+    shapeExtraSmallTop = QskBoxShapeMetrics( 4_px, 4_px, 0, 0 );
 }
 
 qreal QskMaterial3Theme::stateOpacity( int state ) const
@@ -1633,7 +1618,7 @@ QskMaterial3Skin::~QskMaterial3Skin()
 {
 }
 
-static inline QFont createFont( qreal size, int lineHeight,
+static inline QFont createFont( qreal size, qreal lineHeight,
     qreal spacing, QFont::Weight weight )
 {
     Q_UNUSED( lineHeight );
@@ -1652,8 +1637,7 @@ static inline QFont createFont( qreal size, int lineHeight,
         checkFont = false;
     }
 
-    // px: 1/96 inch, pt: 1/72 inch
+    font.setPointSizeF( size );
-    font.setPointSize( size * 72.0 / 96.0 );
 
     if ( spacing > 0.0 )
         font.setLetterSpacing( QFont::AbsoluteSpacing, spacing );
@@ -1668,30 +1652,30 @@ void QskMaterial3Skin::setupFonts()
         From the results on our desktop system we guess they are in pt
         - corresponding to the QFont point size.
      */
-    setFont( LabelSmall, createFont( 11, 16_dp, 0.5, QFont::Medium ) );
+    setFont( LabelSmall, createFont( 11_pt, 16_pt, 0.5_pt, QFont::Medium ) );
-    setFont( LabelMedium, createFont( 12, 16_dp, 0.5, QFont::Medium ) );
+    setFont( LabelMedium, createFont( 12_pt, 16_pt, 0.5_pt, QFont::Medium ) );
-    setFont( LabelLarge, createFont( 14, 20_dp, 0.1, QFont::Medium ) );
+    setFont( LabelLarge, createFont( 14_pt, 20_pt, 0.1_pt, QFont::Medium ) );
 
-    setFont( BodySmall, createFont( 12, 16_dp, 0.4, QFont::Normal ) );
+    setFont( BodySmall, createFont( 12_pt, 16_pt, 0.4_pt, QFont::Normal ) );
-    setFont( BodyMedium, createFont( 14, 20_dp, 0.25, QFont::Normal ) );
+    setFont( BodyMedium, createFont( 14_pt, 20_pt, 0.25_pt, QFont::Normal ) );
-    setFont( BodyLarge, createFont( 16, 24_dp, 0.5, QFont::Normal ) );
+    setFont( BodyLarge, createFont( 16_pt, 24_pt, 0.5_pt, QFont::Normal ) );
 
-    setFont( TitleSmall, createFont( 14, 20_dp, 0.1, QFont::Medium ) );
+    setFont( TitleSmall, createFont( 14_pt, 20_pt, 0.1_pt, QFont::Medium ) );
-    setFont( TitleMedium, createFont( 16, 24_dp, 0.15, QFont::Medium ) );
+    setFont( TitleMedium, createFont( 16_pt, 24_pt, 0.15_pt, QFont::Medium ) );
-    setFont( TitleLarge, createFont( 22, 28_dp, 0.0, QFont::Normal ) );
+    setFont( TitleLarge, createFont( 22_pt, 28_pt, 0.0_pt, QFont::Normal ) );
 
-    setFont( HeadlineSmall, createFont( 24, 32_dp, 0.0, QFont::Normal ) );
+    setFont( HeadlineSmall, createFont( 24_pt, 32_pt, 0.0_pt, QFont::Normal ) );
-    setFont( HeadlineMedium, createFont( 28, 36_dp, 0.0, QFont::Medium ) );
+    setFont( HeadlineMedium, createFont( 28_pt, 36_pt, 0.0_pt, QFont::Medium ) );
-    setFont( HeadlineLarge, createFont( 32, 40_dp, 0.0, QFont::Medium ) );
+    setFont( HeadlineLarge, createFont( 32_pt, 40_pt, 0.0_pt, QFont::Medium ) );
 
-    setFont( DisplaySmall, createFont( 36, 44_dp, 0.0, QFont::Normal ) );
+    setFont( DisplaySmall, createFont( 36_pt, 44_pt, 0.0_pt, QFont::Normal ) );
-    setFont( DisplayMedium, createFont( 45, 52_dp, 0.0, QFont::Normal ) );
+    setFont( DisplayMedium, createFont( 45_pt, 52_pt, 0.0_pt, QFont::Normal ) );
-    setFont( DisplayLarge, createFont( 57, 64_dp, 0.0, QFont::Normal ) );
+    setFont( DisplayLarge, createFont( 57_pt, 64_pt, 0.0_pt, QFont::Normal ) );
 
     // to have something for the unused roles
 
     setFont( { QskFontRole::Subtitle, QskFontRole::Normal },
-        createFont( 16, 24_dp, 0.0, QFont::Normal ) );
+        createFont( 16_pt, 24_pt, 0_pt, QFont::Normal ) );
 
     QskSkin::completeFontTable();
 }

examples/gallery/button/ButtonPage.cpp

@@ -38,7 +38,7 @@ namespace
             : ButtonBox( Qt::Horizontal, 3, parent )
         {
             setDefaultAlignment( Qt::AlignCenter );
-            setSpacing( 25 );
+            setSpacing( 10 );
             populate();
         }