new scaling system pass two

Button.qml

@@ -9,10 +9,10 @@ import "fonts"
 
 Rectangle {
     id: button
-    width: (text == undefined || text == "" ? 0 : buttonText.width) + (icon == undefined || icon == "" ? 0 : ico.width) + 24 * gcd.themeScale
+    width: tm.width + (icon == undefined || icon == "" ? 0 : iconSize) + 2 * Theme.paddingClickTarget + 2 * radius
     Layout.minimumWidth: width
     Layout.maximumWidth: width
-    height: 20 * gcd.themeScale
+    height: 2 * Theme.paddingClickTarget + Math.max(tm.height, (icon == undefined || icon == "" ? 0 : iconSize))
     Layout.minimumHeight: height
     Layout.maximumHeight: height
     property color inactiveColor: Theme.defaultButtonColor
@@ -21,28 +21,28 @@ Rectangle {
     color: mousedown ? activeColor : inactiveColor
     border.color:  mousedown ? activeColor : inactiveColor
     border.width: 1
-    radius: override_radius
+    radius: height / 2
     antialiasing: true
 
     property bool checked: false
-    property double override_radius:  (height / 2.0)
     property alias text: buttonText.text
     property alias font: buttonText.font.family
     property string icon
+    property int iconSize: Theme.uiIconSizeS
     property bool mousedown
     property string tooltip
     signal clicked
 
     RowLayout {
         anchors.centerIn: parent
-        spacing: 6 * gcd.themeScale
+        spacing: Theme.paddingSmall
 
         Image {
             id: ico
             source: icon!="" ? gcd.assetPath + "core/"+icon+".webp" : "";
             visible: icon != ""
-            height: button.height / 2
+            height: button.iconSize
-            sourceSize.height: button.height / 2
+            sourceSize.height: button.iconSize
 
             ColorOverlay{
                 id: iconColorOverlay
@@ -60,11 +60,17 @@ Rectangle {
             id: buttonText
             font.family: Fonts.applicationFontRegular.name
             font.styleName: "ExtraBold"
-            font.pixelSize: button.height / 2
+            font.pointSize: Theme.textMediumPt
             color: button.textColor
             visible: button.text != "" && button.text != undefined
         }
 
+        TextMetrics {
+        	id: tm
+        	font: buttonText.font
+        	text: buttonText.text
+        }
+
         ToolTip.visible: tooltip != "" && mouseArea.containsMouse
         ToolTip.text: tooltip
     }

ButtonTextField.qml

@@ -11,7 +11,7 @@ import "theme"
 TextField {
     id: tf
     color:  Theme.textfieldTextColor
-    font.pixelSize: Theme.secondaryTextSize * gcd.themeScale
+    font.pointSize: Theme.textSmallPt
     width: parent.width - 20
 
     // IMPORTANT: Setting a dynamic height on the internal button widget caused it to crash on Android when
@@ -41,7 +41,7 @@ TextField {
         icon: ""
         text: button_text
         anchors { top: parent.top; right: parent.right }
-        override_radius: 10
+        radius: 10
         height: parent.height;
 
         inactiveColor: Theme.textfieldButtonColor

IconTextField.qml

@@ -9,7 +9,7 @@ import "theme"
 // IconTextField integrates a text field and an icon
 TextField {
     color:  Theme.textfieldTextColor
-    font.pixelSize: Theme.secondaryTextSize * gcd.themeScale * gcd.themeScale
+    font.pointSize: Theme.textSmallPt
     width: parent.width - 20
     property alias icon: icon_.source
     signal clicked

RadioButton.qml

@@ -10,23 +10,20 @@ RadioButton {
 
     property color textColor: Theme.mainTextColor
     property color indicatorColor: Theme.boxCheckedColor
-    //property real size: 12
-    spacing: 0 //4 * gcd.themeScale
-
 
     indicator: Rectangle {
-        width: 16 * gcd.themeScale
+        width: Theme.uiSliderSize
-        height: 16 * gcd.themeScale
+        height: width
         anchors.verticalCenter: parent.verticalCenter
-        radius: 9 * gcd.themeScale
+        radius: width / 2
         border.width: 1
 
         Rectangle {
             anchors.fill: parent
             visible: control.checked
             color: indicatorColor
-            radius: 9 * gcd.themeScale
+            radius: width/2
-            anchors.margins: 4 * gcd.themeScale
+            anchors.margins: 2//thin line
         }
     }
 

ResponsiveContainer.qml

@@ -9,9 +9,9 @@ import "theme"
 GridLayout {
     id: root
 
-    // have children ... control weather to stack or row them
+    // have children ... control whether to stack or row them
-    // n * minWidth determin
+    // n * minWidth determines row or column
-    property int minCellWidth: Theme.sidePaneMinSize * gcd.themeScale
+    property int minCellWidth: Theme.sidePaneMinSize
 
 
     onWidthChanged: resizeCheck()

Slider.qml

@@ -33,9 +33,9 @@ Slider {
     handle: Rectangle {
         x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
         y: control.topPadding + control.availableHeight / 2 - height / 2
-        implicitWidth: 26 * gcd.themeScale
+        implicitWidth: Theme.uiSliderSize
-        implicitHeight: 26 * gcd.themeScale
+        implicitHeight: implicitWidth
-        radius: 13 * gcd.themeScale
+        radius: implicitWidth / 2
         color: control.pressed ? control.buttonActiveColor : control.buttonColor
         border.color: control.buttonColor
     }

TextField.qml

@@ -17,7 +17,7 @@ TextField {
     property bool error: false
 
     color: error ? errorColor : Theme.textfieldTextColor
-    font.pointSize: 10 * gcd.themeScale
+    font.pointSize: Theme.textSmallPt
     width: 100
 
     // selectByMouse shouldn't be enabled on mobile

UnderlineTextField.qml

@@ -13,7 +13,7 @@ TextField {
     property bool error: false
 
     color:  error ? errorColor : Theme.mainTextColor
-    font.pixelSize: Theme.secondaryTextSize * gcd.themeScale
+    font.pointSize: Theme.textSmallPt
     signal clicked
     smooth: true
     placeholderTextColor: Theme.altTextColor

controls/FlagButton.qml

@@ -37,7 +37,7 @@ Rectangle {
     Connections {
         target: gcd
 
-        onSupplySettings: function(zoom, newLocale) {
+        onSupplySettings: function(zoom, scale, newLocale) {
             selected = newLocale == locale
         }
     }

styles/CwtchTextFieldStyle.qml

@@ -4,8 +4,8 @@ import "../theme"
 
 TextFieldStyle {
     id: root
-    textColor: "black"
+    textColor: Theme.mainTextColor
-    font.pointSize: 10 * gcd.themeScale
+    font.pointSize: Theme.textSmallPt
     property int width: parent.width
 
     background: Rectangle {

theme/Theme.qml

@@ -105,8 +105,8 @@ Item {
     property ThemeType light: CwtchLight{}
     property ThemeType theme: gcd.theme == "dark" ? dark : light
 
-    // 0-4. replace gcd.themeScale with whatever your app has!
+
-    property int scale: gcd.themeScaleNew
+    property int scale: gcd.scaleFactor// 0-4. replace with whatever your app has!
 
 	// magnification system: all size-sets should generally respect these semantics:
 	//
@@ -136,9 +136,16 @@ Item {
     readonly property variant paddingLargeBase: [10, 30, 40]
     readonly property int     paddingLarge: paddingLargeBase[p[scale]]
 
-    readonly property variant paddingClickTargetBase: gcd.os == "android" ? [10, 40, 100] : [3, 10, 15]
+    readonly property variant paddingClickTargetBase: gcd.os == "android" ? [10, 30, 60] : [1, 3, 6]
     readonly property int     paddingClickTarget: paddingClickTargetBase[p[scale]]
 
+    readonly property variant radiusSBase: [4, 4, 6]
+    readonly property variant radiusMBase: [6, 7, 9]
+    readonly property variant radiusLBase: [10, 12, 15]
+    readonly property int radiusS: radiusSBase[p[scale]]
+    readonly property int radiusM: radiusMBase[p[scale]]
+    readonly property int radiusL: radiusLBase[p[scale]]
+
 	////////////////////////
 	// section: TEXT SIZE //
 	////////////////////////
@@ -155,6 +162,9 @@ Item {
 	readonly property variant textHeaderPtBase: [16, 24, 32]
 	readonly property int     textHeaderPt: textHeaderPtBase[t[scale]]
 
+	readonly property variant textBadgeLabelPtBase: [6, 10, 14]
+	readonly property variant textBadgeLabelPt: textBadgeLabelPtBase[t[scale]]
+
     /////////////////////////////////
     // section: ELEMENT DIMENSIONS //
     /////////////////////////////////
@@ -171,13 +181,16 @@ Item {
     readonly property variant contactPortraitSizeBase: [60, 72, 84]
     readonly property int contactPortraitSize: contactPortraitSizeBase[p[scale]]
 
+	readonly property variant uiSliderSizeBase: [20, 26, 32]
+	readonly property int uiSliderSize: uiSliderSizeBase[p[scale]]
+
     ///////////////////////////////////////
     // section: OLD FONT SIZES REFERENCE //
     ///////////////////////////////////////
 
     // old size (usually given to font.pixelSize but occasionally to font.pointSize) -> new size
-    readonly property int badgeTextSize: 12
+    readonly property int badgeTextSize: textSmallPt
-    readonly property int statusTextSize: 12
+    readonly property int statusTextSize: textSmallPt
     // readonly property int chatMetaTextSize: 15 -> textSmallPt
     // readonly property int secondaryTextSize: 20 -> textSmallPt
     readonly property int chatSize: textMediumPt //was:20