Add 3 variants of buttens

Page1.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.13
 import "./SepantaUiKit/SKBtn"
+import "./SepantaUiKit"
 
 Item {
     anchors.fill: parent
@@ -8,11 +9,29 @@ Item {
         anchors.margins: 20
         anchors.fill: parent
         SKBtn {
-            text: "Enable"
+            text: "Enable P"
         }
         SKBtn {
-            text: "Disable"
+            text: "Disable P"
             isEnable: false
         }
+        SKBtn {
+            text: "Enable S"
+            buttonType: Setting.Secondary
+        }
+        SKBtn {
+            text: "Disable S"
+            isEnable: false
+            buttonType: Setting.Secondary
+        }
+        SKBtn {
+            text: "Enable T"
+            buttonType: Setting.Tertiary
+        }
+        SKBtn {
+            text: "Disable T"
+            isEnable: false
+            buttonType: Setting.Tertiary
+        }
     }
 }

SepantaUiKit/Colors.qml

@@ -7,11 +7,11 @@ Item {
     property string primaryEnable: "#B2F7EF"
     property string primaryPressed: "#3CFCE6"
     //Secondary
-    property string secondaryEnable: "#007dff"
+    property string secondaryEnable: "#D0D8D8"
     property string secondaryPressed: "#abb5be"
     //Tertiary
     property string tertiaryEnable: "#E9E8E8"
-    property string tertiaryPressed: "#D0D0d0"
+    property string tertiaryPressed: "#E0E7E9"
     //Other
     property string white: "#f8f8f8"
     property string balck: "#0b0b0b"

SepantaUiKit/SKBtn/SKBtn.qml

@@ -7,18 +7,13 @@ Item {
     width: 140
     height: 50
     property bool isEnable: true
-    onIsEnableChanged: enableHandle()
-    function enableHandle() {
-        if (isEnable) {
-            stateOfComponent = Setting.Enable
-        } else {
-            stateOfComponent = Setting.Disabel
-        }
-    }
-
+    property var buttonType: Setting.Primary
     property var stateOfComponent: Setting.Enable
-    onStateOfComponentChanged: stateChanged()
     property alias text: idText.text
+
+    onIsEnableChanged: enableHandle()
+    onStateOfComponentChanged: stateChanged()
+    //========================================================================
     Rectangle {
         id: idBackGround
         anchors.fill: parent
@@ -31,7 +26,11 @@ Item {
             verticalAlignment: Text.AlignVCenter
             color: Colors.balck
             font: Fonts.h3
-            Component.onCompleted: console.log(JSON.stringify(idText.fontInfo))
+            Behavior on color {
+                ColorAnimation {
+                    duration: Setting.animationDuration
+                }
+            }
         }
         Behavior on color {
             ColorAnimation {
@@ -62,21 +61,70 @@ Item {
             }
         }
     }
-
+    //========================================================================
     function stateChanged() {
-        switch (stateOfComponent) {
-        case Setting.Enable:
-            idBackGround.color = Colors.primaryEnable
-            break
-        case Setting.Pressed:
-            idBackGround.color = Colors.primaryPressed
-            break
-        case Setting.Hoverd:
-            idBackGround.color = Qt.lighter(Colors.primaryEnable, 1.07)
-            break
-        case Setting.Disabel:
-            idBackGround.color = Qt.darker(Colors.primaryEnable, 4)
-            break
+        if (buttonType === Setting.Primary) {
+            switch (stateOfComponent) {
+            case Setting.Enable:
+                idBackGround.color = Colors.primaryEnable
+                break
+            case Setting.Pressed:
+                idBackGround.color = Colors.primaryPressed
+                break
+            case Setting.Hoverd:
+                idBackGround.color = Qt.lighter(Colors.primaryEnable,
+                                                Setting.hoverCoeffecient)
+                break
+            case Setting.Disabel:
+                idBackGround.color = Qt.darker(Colors.primaryEnable,
+                                               Setting.disableCoeffecient)
+                break
+            }
+        } else if (buttonType === Setting.Secondary) {
+            switch (stateOfComponent) {
+            case Setting.Enable:
+                idBackGround.color = Colors.secondaryEnable
+                break
+            case Setting.Pressed:
+                idBackGround.color = Colors.secondaryPressed
+                break
+            case Setting.Hoverd:
+                idBackGround.color = Qt.lighter(Colors.secondaryEnable,
+                                                Setting.hoverCoeffecient)
+                break
+            case Setting.Disabel:
+                idBackGround.color = Qt.darker(Colors.secondaryEnable,
+                                               Setting.disableCoeffecient)
+                break
+            }
+        } else if (buttonType === Setting.Tertiary) {
+            idBackGround.color = Colors.balck
+            idBackGround.border.width = 1
+            idBackGround.border.color = Colors.tertiaryEnable
+            idText.color = Colors.white
+            switch (stateOfComponent) {
+            case Setting.Enable:
+                idBackGround.border.color = Colors.tertiaryEnable
+                break
+            case Setting.Pressed:
+                idBackGround.border.color = Colors.tertiaryPressed
+                break
+            case Setting.Hoverd:
+                idBackGround.border.color = Qt.lighter(Colors.tertiaryEnable,
+                                                       Setting.hoverCoeffecient)
+                break
+            case Setting.Disabel:
+                idBackGround.border.color = Qt.darker(
+                            Colors.tertiaryEnable, Setting.disableCoeffecient)
+                break
+            }
+        }
+    }
+    function enableHandle() {
+        if (isEnable) {
+            stateOfComponent = Setting.Enable
+        } else {
+            stateOfComponent = Setting.Disabel
         }
     }
 

SepantaUiKit/Setting.qml

@@ -6,12 +6,19 @@ Item {
     property int radius: 25
     property real disableOpacity: 0.25
     property real hoverOpacity: 0.20
-    property int animationDuration: 200
+    property int animationDuration: 180
+    property real hoverCoeffecient: 1.07
+    property real disableCoeffecient: 4
 
     enum State {
+        //status
         Enable,
         Pressed,
         Hoverd,
-        Disabel
+        Disabel,
+        //button type
+        Primary,
+        Secondary,
+        Tertiary
     }
 }