update

example/qml/chart/T_BarChart.qml

@@ -70,8 +70,8 @@ FluScrollablePage{
     }
 
     FluFrame{
-        width: 500
+        Layout.preferredWidth: 500
-        height: 370
+        Layout.preferredHeight: 370
         padding: 10
         Layout.topMargin: 20
         FluChart{

example/qml/page/T_Acrylic.qml

@@ -71,7 +71,7 @@ FluScrollablePage{
                     anchors.centerIn: parent
                     text: "Acrylic"
                     color: "#FFFFFF"
-                    font.bold: true
+                    font: FluTextStyle.Subtitle
                 }
                 MouseArea {
                     property point clickPos: Qt.point(0,0)

example/qml/page/T_Awesome.qml

@@ -58,6 +58,7 @@ FluContentPage {
             FluText {
                 id:item_name
                 font.pixelSize: 10
+                font.family: FluTextStyle.family
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: item_icon.bottom
                 width:parent.width

example/qml/page/T_Carousel.qml

@@ -103,7 +103,6 @@ FluScrollablePage{
                                     horizontalAlignment: Qt.AlignHCenter
                                     text:model.title
                                     color: FluColors.Grey10
-                                    font.pixelSize: 15
                                 }
                             }
                         }

example/qml/page/T_Home.qml

@@ -122,6 +122,7 @@ FluScrollablePage{
                             Layout.leftMargin: 20
                             color: FluColors.Grey120
                             font.pixelSize: 12
+                            font.family: FluTextStyle.family
                             wrapMode: Text.WrapAnywhere
                         }
                     }

example/qml/page/T_StaggeredLayout.qml

@@ -42,8 +42,7 @@ FluContentPage{
                 FluText{
                     color:"#FFFFFF"
                     text:model.index
-                    font.bold: true
+                    font: FluTextStyle.Title
-                    font.pixelSize: 18
                     anchors.centerIn: parent
                 }
             }

example/qml/window/HotloadWindow.qml

@@ -41,7 +41,7 @@ FluWindow {
         }
         FluText{
             text: qsTr("Drag in a qml file")
-            font.pixelSize: 26
+            font: FluTextStyle.Title
             anchors.centerIn: parent
             visible: !loader.itemLodaer().item && loader.statusMode === FluStatusLayoutType.Success
         }

example/qml/window/MainWindow.qml

@@ -101,7 +101,7 @@ FluWindow {
             width: 186
             FluMenuItem{
                 text: qsTr("Open in Separate Window")
-                font.pixelSize: 12
+                font: FluTextStyle.Caption
                 onClicked: {
                     FluRouter.navigate("/pageWindow",{title:modelData.title,url:modelData.url})
                 }

example/src/main.cpp

@@ -33,7 +33,7 @@ Q_IMPORT_QML_PLUGIN(FluentUIPlugin)
 int main(int argc, char *argv[])
 {
 #ifdef WIN32
-    ::SetUnhandledExceptionFilter(MyUnhandledExceptionFilter);
+//    ::SetUnhandledExceptionFilter(MyUnhandledExceptionFilter);
     qputenv("QT_QPA_PLATFORM","windows:darkmode=2");
 #endif
 #if (QT_VERSION >= QT_VERSION_CHECK(6, 0, 0))

src/FluColors.cpp

@@ -1,4 +1,5 @@
 #include "FluColors.h"
+#include "FluTools.h"
 
 FluColors::FluColors(QObject *parent):QObject{parent}{
     Transparent(QColor(0, 0, 0, 0));
@@ -111,17 +112,12 @@ FluColors::FluColors(QObject *parent):QObject{parent}{
 
 FluAccentColor* FluColors::createAccentColor(QColor primaryColor){
     FluAccentColor *accentColor = new FluAccentColor(this);
-    accentColor->darkest(withOpacity(primaryColor,0.7));
+    accentColor->darkest(FluTools::getInstance()->withOpacity(primaryColor,0.7));
-    accentColor->darker(withOpacity(primaryColor,0.8));
+    accentColor->darker(FluTools::getInstance()->withOpacity(primaryColor,0.8));
-    accentColor->dark(withOpacity(primaryColor,0.9));
+    accentColor->dark(FluTools::getInstance()->withOpacity(primaryColor,0.9));
     accentColor->normal(primaryColor);
-    accentColor->light(withOpacity(primaryColor,0.9));
+    accentColor->light(FluTools::getInstance()->withOpacity(primaryColor,0.9));
-    accentColor->lighter(withOpacity(primaryColor,0.8));
+    accentColor->lighter(FluTools::getInstance()->withOpacity(primaryColor,0.8));
-    accentColor->lightest(withOpacity(primaryColor,0.7));
+    accentColor->lightest(FluTools::getInstance()->withOpacity(primaryColor,0.7));
     return accentColor;
 }
-
-QColor FluColors::withOpacity(QColor color,qreal opacity){
-    int alpha = qRound(opacity * 255) & 0xff;
-    return QColor::fromRgba((alpha << 24) | (color.rgba() & 0xffffff));
-}

src/FluColors.h

@@ -3,6 +3,7 @@
 
 #include <QObject>
 #include <QtQml/qqml.h>
+
 #include "FluAccentColor.h"
 #include "stdafx.h"
 #include "singleton.h"
@@ -50,7 +51,6 @@ class FluColors : public QObject
     QML_SINGLETON
 private:
     explicit FluColors(QObject *parent = nullptr);
-    QColor withOpacity(QColor color,qreal opacity);
 public:
     SINGLETON(FluColors)
     Q_INVOKABLE FluAccentColor* createAccentColor(QColor primaryColor);

src/FluFrameless.cpp

@@ -76,7 +76,7 @@ void FluFrameless::componentComplete(){
     HWND hwnd = reinterpret_cast<HWND>(window()->winId());
     DWORD style = ::GetWindowLongPtr(hwnd, GWL_STYLE);
     if(_fixSize){
-        ::SetWindowLongPtr(hwnd, GWL_STYLE, style | WS_THICKFRAME);
+        ::SetWindowLongPtr(hwnd, GWL_STYLE, style | WS_THICKFRAME | WS_CAPTION);
         for (int i = 0; i < qApp->screens().count(); ++i) {
             connect( qApp->screens().at(i),&QScreen::logicalDotsPerInchChanged,this,[=]{
                 SetWindowPos(hwnd,nullptr,0,0,0,0,SWP_NOZORDER | SWP_NOOWNERZORDER | SWP_NOMOVE | SWP_FRAMECHANGED);
@@ -228,12 +228,6 @@ bool FluFrameless::nativeEventFilter(const QByteArray &eventType, void *message,
         return true;
     }else if(uMsg == WM_GETMINMAXINFO){
         MINMAXINFO* minmaxInfo = reinterpret_cast<MINMAXINFO *>(lParam);
-#if QT_VERSION >= QT_VERSION_CHECK(6,0,0)
-        minmaxInfo->ptMaxPosition.x = 0;
-        minmaxInfo->ptMaxPosition.y = 0;
-        minmaxInfo->ptMaxSize.x = 0;
-        minmaxInfo->ptMaxSize.y = 0;
-#else
         auto pixelRatio = window()->devicePixelRatio();
         auto geometry = window()->screen()->availableGeometry();
         RECT rect;
@@ -242,7 +236,6 @@ bool FluFrameless::nativeEventFilter(const QByteArray &eventType, void *message,
         minmaxInfo->ptMaxPosition.y = rect.top - offsetXY.x();
         minmaxInfo->ptMaxSize.x = geometry.width()*pixelRatio + offsetXY.x() * 2;
         minmaxInfo->ptMaxSize.y = geometry.height()*pixelRatio + offsetXY.y() * 2;
-#endif
         return false;
     }else if(uMsg == WM_NCRBUTTONDOWN){
         if (wParam == HTCAPTION) {

src/FluTextStyle.cpp

@@ -1,35 +1,47 @@
 #include "FluTextStyle.h"
 
 FluTextStyle::FluTextStyle(QObject *parent):QObject{parent}{
+    _family = QFont().defaultFamily();
+#ifdef Q_OS_WIN
+    _family = "微软雅黑";
+#endif
+
     QFont caption;
+    caption.setFamily(_family);
     caption.setPixelSize(12);
     Caption(caption);
 
     QFont body;
+    body.setFamily(_family);
     body.setPixelSize(13);
     Body(body);
 
     QFont bodyStrong;
+    bodyStrong.setFamily(_family);
     bodyStrong.setPixelSize(13);
     bodyStrong.setWeight(QFont::DemiBold);
     BodyStrong(bodyStrong);
 
     QFont subtitle;
+    subtitle.setFamily(_family);
     subtitle.setPixelSize(20);
     subtitle.setWeight(QFont::DemiBold);
     Subtitle(subtitle);
 
     QFont title;
+    title.setFamily(_family);
     title.setPixelSize(28);
     title.setWeight(QFont::DemiBold);
     Title(title);
 
     QFont titleLarge;
+    titleLarge.setFamily(_family);
     titleLarge.setPixelSize(40);
     titleLarge.setWeight(QFont::DemiBold);
     TitleLarge(titleLarge);
 
     QFont display;
+    display.setFamily(_family);
     display.setPixelSize(68);
     display.setWeight(QFont::DemiBold);
     Display(display);

src/FluTextStyle.h

@@ -14,6 +14,7 @@ class FluTextStyle : public QObject
 {
     Q_OBJECT
 public:
+    Q_PROPERTY_AUTO(QString,family)
     Q_PROPERTY_AUTO(QFont,Caption);
     Q_PROPERTY_AUTO(QFont,Body);
     Q_PROPERTY_AUTO(QFont,BodyStrong);

src/FluTools.cpp

@@ -119,8 +119,9 @@ QUrl FluTools::getUrlByFilePath(const QString& path){
     return QUrl::fromLocalFile(path);
 }
 
-QColor FluTools::colorAlpha(const QColor& color,qreal alpha){
+QColor FluTools::withOpacity(const QColor& color,qreal opacity){
-    return QColor(color.red(),color.green(),color.blue(),255*alpha);
+    int alpha = qRound(opacity * 255) & 0xff;
+    return QColor::fromRgba((alpha << 24) | (color.rgba() & 0xffffff));
 }
 
 QString FluTools::md5(QString text){

src/FluTools.h

@@ -39,7 +39,7 @@ public:
     Q_INVOKABLE QRect getVirtualGeometry();
     Q_INVOKABLE QString getApplicationDirPath();
     Q_INVOKABLE QUrl getUrlByFilePath(const QString& path);
-    Q_INVOKABLE QColor colorAlpha(const QColor&,qreal alpha);
+    Q_INVOKABLE QColor withOpacity(const QColor&,qreal alpha);
     Q_INVOKABLE QString md5(QString text);
     Q_INVOKABLE QString sha256(QString text);
     Q_INVOKABLE QString toBase64(QString text);

src/FluentUI.cpp

@@ -126,6 +126,7 @@ void FluentUI::registerTypes(const char *uri){
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluEvent.qml"),uri,major,minor,"FluEvent");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluSheet.qml"),uri,major,minor,"FluSheet");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluGroupBox.qml"),uri,major,minor,"FluGroupBox");
+    qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluControlBackground.qml"),uri,major,minor,"FluControlBackground");
     qmlRegisterSingletonType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluRouter.qml"),uri,major,minor,"FluRouter");
     qmlRegisterSingletonType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluEventBus.qml"),uri,major,minor,"FluEventBus");
 
@@ -148,11 +149,6 @@ void FluentUI::registerTypes(const char *uri){
 }
 
 void FluentUI::initializeEngine(QQmlEngine *engine, const char *uri){
-#ifdef Q_OS_WIN
-    QFont font;
-    font.setFamily("微软雅黑");
-    QGuiApplication::setFont(font);
-#endif
     engine->rootContext()->setContextProperty("FluApp",FluApp::getInstance());
     engine->rootContext()->setContextProperty("FluColors",FluColors::getInstance());
     engine->rootContext()->setContextProperty("FluTheme",FluTheme::getInstance());

src/Qt5/imports/FluentUI/Controls/FluButton.qml

@@ -7,7 +7,7 @@ Button {
     property string contentDescription: ""
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
-    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
+    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color dividerColor: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(233/255,233/255,233/255,1)
     property color textColor: {
         if(FluTheme.dark){
@@ -38,11 +38,9 @@ Button {
     horizontalPadding:12
     font:FluTextStyle.Body
     focusPolicy:Qt.TabFocus
-    background: Rectangle{
+    background: FluControlBackground{
-        implicitWidth: 28
+        implicitWidth: 30
-        implicitHeight: 28
+        implicitHeight: 30
-        border.color: control.dividerColor
-        border.width: 1
         radius: 4
         color: {
             if(!enabled){
@@ -50,6 +48,7 @@ Button {
             }
             return hovered ? hoverColor :normalColor
         }
+        shadow: !pressed && enabled
         FluFocusRectangle{
             visible: control.activeFocus
             radius:4

src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml

@@ -449,7 +449,7 @@ FluButton {
                                 DayOfWeekRow {
                                     id: dayOfWeekRow
                                     locale: FluApp.locale
-                                    font.bold: false
+                                    font: FluTextStyle.Body
                                     delegate: Label {
                                         text: model.shortName
                                         font: dayOfWeekRow.font

src/Qt5/imports/FluentUI/Controls/FluComboBox.qml

@@ -45,7 +45,7 @@ T.ComboBox {
         topPadding: 6 - control.padding
         bottomPadding: 6 - control.padding
         renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-        selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+        selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
         selectedTextColor: color
         text: control.editable ? control.editText : control.displayText
         enabled: control.editable
@@ -67,7 +67,13 @@ T.ComboBox {
         bottomInset:1
         rightInset:1
         background: FluTextBoxBackground{
-            borderWidth: 0
+            border.width: 0
+            bottomMargin: {
+                if(!control.editable){
+                    return 0
+                }
+                return contentItem && contentItem.activeFocus ? 2 : 1
+            }
             inputItem: contentItem
         }
         Component.onCompleted: {

src/Qt5/imports/FluentUI/Controls/FluControlBackground.qml

@@ -0,0 +1,46 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+Item{
+    id:control
+    property int radius: 4
+    property bool shadow: true
+    property alias border: d.border
+    property var bottomMargin: undefined
+    property var topMargin: undefined
+    property var leftMargin: undefined
+    property var rightMargin: undefined
+    property color color: FluTheme.dark ? Qt.rgba(42/255,42/255,42/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+    property alias gradient : rect_border.gradient
+    Rectangle{
+        id:d
+        property color startColor: Qt.lighter(d.border.color,1.25)
+        property color endColor: shadow ? control.border.color : startColor
+        visible: false
+        border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(188/255,188/255,188/255,1)
+    }
+    Rectangle{
+        id:rect_border
+        anchors.fill: parent
+        radius: control.radius
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: d.startColor }
+            GradientStop { position: 0.88; color: d.startColor }
+            GradientStop { position: 1.0; color: d.endColor}
+        }
+    }
+    Rectangle{
+        id:rect_back
+        anchors{
+            fill: parent
+            margins: control.border.width
+            topMargin: control.topMargin
+            bottomMargin: control.bottomMargin
+            leftMargin: control.leftMargin
+            rightMargin: control.rightMargin
+        }
+        radius: control.radius
+        color: control.color
+    }
+}

src/Qt5/imports/FluentUI/Controls/FluCopyableText.qml

@@ -17,7 +17,7 @@ TextEdit {
     selectByMouse: true
     selectedTextColor: color
     bottomPadding: 0
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     font:FluTextStyle.Body
     onSelectedTextChanged: {
         control.forceActiveFocus()

src/Qt5/imports/FluentUI/Controls/FluDatePicker.qml

@@ -42,7 +42,7 @@ FluButton {
         id:divider_1
         width: 1
         x:  parent.width/3
-        height: parent.height
+        height: parent.height - 1
         color: control.dividerColor
         visible: showYear
     }
@@ -50,7 +50,7 @@ FluButton {
         id:divider_2
         width: 1
         x: showYear ? parent.width*2/3 :  parent.width/2
-        height: parent.height
+        height: parent.height - 1
         color: control.dividerColor
     }
     FluText{

src/Qt5/imports/FluentUI/Controls/FluDropDownButton.qml

@@ -3,59 +3,12 @@ import QtQuick.Controls 2.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 
-Button {
+FluButton {
-    property bool disabled: false
-    property string contentDescription: ""
-    property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
-    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
-    property color textColor: {
-        if(FluTheme.dark){
-            if(!enabled){
-                return Qt.rgba(131/255,131/255,131/255,1)
-            }
-            if(pressed){
-                return Qt.rgba(162/255,162/255,162/255,1)
-            }
-            return Qt.rgba(1,1,1,1)
-        }else{
-            if(!enabled){
-                return Qt.rgba(160/255,160/255,160/255,1)
-            }
-            if(pressed){
-                return Qt.rgba(96/255,96/255,96/255,1)
-            }
-            return Qt.rgba(0,0,0,1)
-        }
-    }
-    property var window : Window.window
-    default property alias contentData: menu.contentData
-    Accessible.role: Accessible.Button
-    Accessible.name: control.text
-    Accessible.description: contentDescription
-    Accessible.onPressAction: control.clicked()
     id: control
+    default property alias contentData: menu.contentData
     rightPadding:35
-    enabled: !disabled
-    focusPolicy:Qt.TabFocus
     verticalPadding: 0
     horizontalPadding:12
-    background: Rectangle{
-        implicitWidth: 28
-        implicitHeight: 28
-        border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
-        border.width: 1
-        radius: 4
-        FluFocusRectangle{
-            visible: control.activeFocus
-            radius:8
-        }
-        color:{
-            if(!enabled){
-                return disableColor
-            }
-            return hovered ? hoverColor :normalColor
-        }
     FluIcon{
         iconSource:FluentIcons.ChevronDown
         iconSize: 15
@@ -64,14 +17,7 @@ Button {
             rightMargin: 10
             verticalCenter: parent.verticalCenter
         }
-            iconColor:title.color
+        iconColor:control.textColor
-        }
-    }
-    contentItem: FluText {
-        id:title
-        text: control.text
-        verticalAlignment: Text.AlignVCenter
-        color: control.textColor
     }
     onClicked: {
         if(menu.count !==0){

src/Qt5/imports/FluentUI/Controls/FluExpander.qml

@@ -26,8 +26,8 @@ Item {
         width: parent.width
         height: 45
         radius: 4
-        color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+        border.color: FluTheme.dividerColor
-        border.color: FluTheme.dark ?  Window.active ? Qt.rgba(55/255,55/255,55/255,1) : Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+        color: FluTheme.dark ? Window.active ?  Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
         MouseArea{
             id:control_mouse
             anchors.fill: parent
@@ -90,7 +90,7 @@ Item {
             radius: 4
             clip: true
             color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-            border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+            border.color: FluTheme.dividerColor
             anchors.topMargin: -contentHeight
             states: [
                 State{

src/Qt5/imports/FluentUI/Controls/FluFilledButton.qml

@@ -29,27 +29,13 @@ Button {
     font:FluTextStyle.Body
     verticalPadding: 0
     horizontalPadding:12
-    background: Rectangle{
+    background: FluControlBackground{
-        implicitWidth: 28
+        implicitWidth: 30
-        implicitHeight: 28
+        implicitHeight: 30
         radius: 4
-        FluFocusRectangle{
+        bottomMargin: enabled ? 2 : 0
-            visible: control.visualFocus
+        border.width: enabled ? 1 : 0
-            radius:4
+        border.color: enabled ? Qt.darker(control.normalColor,1.2) : disableColor
-        }
-        gradient: Gradient {
-            GradientStop { position: 0.33; color: control.enabled ? control.normalColor : Qt.rgba(0,0,0,0) }
-            GradientStop { position: 1.0; color: control.enabled ? Qt.darker(control.normalColor,1.3) : Qt.rgba(0,0,0,0) }
-        }
-        Rectangle{
-            radius: parent.radius
-            anchors{
-                fill: parent
-                topMargin: control.enabled ? 0 : 0
-                leftMargin: control.enabled ? 1 : 0
-                rightMargin: control.enabled ? 1 : 0
-                bottomMargin: control.enabled ? 2 : 0
-            }
         color:{
             if(!enabled){
                 return disableColor
@@ -59,6 +45,9 @@ Button {
             }
             return hovered ? hoverColor :normalColor
         }
+        FluFocusRectangle{
+            visible: control.visualFocus
+            radius:4
         }
     }
     contentItem: FluText {

src/Qt5/imports/FluentUI/Controls/FluFrame.qml

@@ -18,7 +18,7 @@ T.Frame {
     background: Rectangle {
         id:d
         radius: 4
-        border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+        border.color: FluTheme.dividerColor
-        color: FluTheme.dark ? Window.active ?  Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+        color: FluTheme.dark ? Window.active ?  Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     }
 }

src/Qt5/imports/FluentUI/Controls/FluMenu.qml

@@ -51,9 +51,9 @@ T.Menu {
         FluShadow{}
     }
     T.Overlay.modal: Rectangle {
-        color: FluTools.colorAlpha(control.palette.shadow, 0.5)
+        color: FluTools.withOpacity(control.palette.shadow, 0.5)
     }
     T.Overlay.modeless: Rectangle {
-        color: FluTools.colorAlpha(control.palette.shadow, 0.12)
+        color: FluTools.withOpacity(control.palette.shadow, 0.12)
     }
 }

src/Qt5/imports/FluentUI/Controls/FluMultilineTextBox.qml

@@ -25,7 +25,7 @@ TextArea{
     leftPadding: padding+4
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     selectedTextColor: color
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     placeholderTextColor: {
         if(!enabled){
             return placeholderDisableColor

src/Qt5/imports/FluentUI/Controls/FluPasswordBox.qml

@@ -25,7 +25,7 @@ TextField{
     leftPadding: padding+4
     echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     selectedTextColor: color
     placeholderTextColor: {
         if(!enabled){

src/Qt5/imports/FluentUI/Controls/FluPivot.qml

@@ -7,19 +7,18 @@ Page {
     property alias currentIndex: nav_list.currentIndex
     property color textNormalColor: FluTheme.dark ? FluColors.Grey120 : FluColors.Grey120
     property color textHoverColor: FluTheme.dark ? FluColors.Grey10 : FluColors.Black
-    property int textSize: 28
-    property bool textBold: true
     property int textSpacing: 10
     property int headerSpacing: 20
     property int headerHeight: 40
     id:control
     width: 400
     height: 300
+    font: FluTextStyle.Title
     implicitHeight: height
     implicitWidth: width
     FluObject{
         id:d
-        property int tabY: control.headerHeight/2+control.textSize/2 + 3
+        property int tabY: control.headerHeight/2+control.font.pixelSize/2 + 3
     }
     background:Item{}
     header:ListView{
@@ -65,8 +64,7 @@ Page {
                     id:item_title
                     text: modelData.title
                     anchors.centerIn: parent
-                    font.pixelSize: control.textSize
+                    font: control.font
-                    font.bold: control.textBold
                     color: {
                         if(item_button.hovered)
                             return textHoverColor

src/Qt5/imports/FluentUI/Controls/FluProgressButton.qml

@@ -2,14 +2,13 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 
-Button {
+FluButton {
     property real progress
-    property bool disabled: false
-    property string contentDescription: ""
     QtObject{
         id:d
-        property bool checked: (rect_back.height === background.height) && (progress === 1)
+        property bool checked: (Number(rect_back.height) === Number(background.height)) && (progress === 1)
     }
+    id: control
     property color normalColor: {
         if(d.checked){
             return FluTheme.primaryColor
@@ -32,24 +31,12 @@ Button {
         }
     }
     property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
-    Accessible.role: Accessible.Button
+    background: FluControlBackground{
-    Accessible.name: control.text
+        implicitWidth: 30
-    Accessible.description: contentDescription
+        implicitHeight: 30
-    Accessible.onPressAction: control.clicked()
-    focusPolicy:Qt.TabFocus
-    id: control
-    enabled: !disabled
-    verticalPadding: 0
-    horizontalPadding:12
-    background: FluClip{
-        implicitWidth: 28
-        implicitHeight: 28
-        radius: [4,4,4,4]
-        Rectangle{
-            anchors.fill: parent
-            border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
-            border.width: d.checked ? 0 : 1
         radius: 4
+        border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(188/255,188/255,188/255,1)
+        border.width: d.checked ? 0 : 1
         color:{
             if(!enabled){
                 return disableColor
@@ -61,7 +48,9 @@ Button {
             }
             return hovered ? hoverColor :normalColor
         }
-        }
+        FluClip{
+            anchors.fill: parent
+            radius: [4,4,4,4]
             Rectangle{
                 id:rect_back
                 width: parent.width  * control.progress
@@ -88,6 +77,7 @@ Button {
                     }
                 }
             }
+        }
         FluFocusRectangle{
             visible: control.activeFocus
             radius:4

src/Qt5/imports/FluentUI/Controls/FluShortcutPicker.qml

@@ -131,10 +131,9 @@ FluIconButton {
             width: Math.max(item_text.implicitWidth+12,28)
             height: Math.max(item_text.implicitHeight,28)
             radius: 4
-            Text{
+            FluText{
                 id:item_text
                 color: FluTheme.dark ? Qt.rgba(0,0,0,1)  : Qt.rgba(1,1,1,1)
-                font.pixelSize: 13
                 text: keyText
                 anchors.centerIn: parent
             }

src/Qt5/imports/FluentUI/Controls/FluSpinBox.qml

@@ -39,7 +39,7 @@ T.SpinBox {
             }
             return normalColor
         }
-        selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+        selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
         selectedTextColor: color
         horizontalAlignment: Qt.AlignHCenter
         verticalAlignment: Qt.AlignVCenter

src/Qt5/imports/FluentUI/Controls/FluTableView.qml

@@ -15,7 +15,7 @@ Rectangle {
     property bool horizonalHeaderVisible: true
     property bool verticalHeaderVisible: true
     property color selectedBorderColor: FluTheme.primaryColor
-    property color selectedColor: FluTools.colorAlpha(FluTheme.primaryColor,0.3)
+    property color selectedColor: FluTools.withOpacity(FluTheme.primaryColor,0.3)
     id:control
     color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     onColumnSourceChanged: {

src/Qt5/imports/FluentUI/Controls/FluTextBox.qml

@@ -25,7 +25,7 @@ TextField{
     }
     font:FluTextStyle.Body
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     selectedTextColor: color
     placeholderTextColor: {
         if(!enabled){

src/Qt5/imports/FluentUI/Controls/FluTextBoxBackground.qml

@@ -2,14 +2,9 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 
-FluClip{
+FluControlBackground{
     property Item inputItem
-    property int borderWidth: 1
     id:control
-    radius: [4,4,4,4]
-    Rectangle{
-        radius: 4
-        anchors.fill: parent
     color: {
         if(inputItem && inputItem.disabled){
             return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
@@ -22,35 +17,21 @@ FluClip{
         }
         return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
     }
-        border.width: control.borderWidth
+    border.width: 1
-        border.color: {
+    gradient: Gradient {
-            if(inputItem && inputItem.disabled){
+        GradientStop { position: 0.0; color: d.startColor }
-                return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
+        GradientStop { position: 0.92; color: d.startColor }
+        GradientStop { position: 1.0; color: d.endColor }
     }
-            return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
+    bottomMargin: inputItem && inputItem.activeFocus ? 2 : 1
-        }
+    QtObject{
-    }
+        id:d
-    Rectangle{
+        property color startColor: FluTheme.dark ? Qt.rgba(66/255,66/255,66/255,1) : Qt.rgba(232/255,232/255,232/255,1)
-        width: parent.width
+        property color endColor: {
-        height: inputItem && inputItem.activeFocus ? 2 : 1
+            if(!control.enabled){
-        anchors.bottom: parent.bottom
+                return d.startColor
-        visible: !(inputItem && inputItem.disabled)
-        color: {
-            if(inputItem && inputItem.activeFocus){
-                return FluTheme.primaryColor
-            }
-            if(FluTheme.dark){
-                return Qt.rgba(166/255,166/255,166/255,1)
-            }else{
-                return Qt.rgba(134/255,134/255,134/255,1)
-            }
-        }
-        Behavior on height{
-            enabled: FluTheme.animationEnabled
-            NumberAnimation{
-                duration: 83
-                easing.type: Easing.OutCubic
             }
+            return inputItem && inputItem.activeFocus ? FluTheme.primaryColor : FluTheme.dark ? Qt.rgba(123/255,123/255,123/255,1) : Qt.rgba(132/255,132/255,132/255,1)
         }
     }
 }

src/Qt5/imports/FluentUI/Controls/FluTextButton.qml

@@ -28,8 +28,8 @@ Button {
     enabled: !disabled
     font:FluTextStyle.Body
     background: Rectangle{
-        implicitWidth: 28
+        implicitWidth: 30
-        implicitHeight: 28
+        implicitHeight: 30
         radius: 4
         color: {
             if(!enabled){

src/Qt5/imports/FluentUI/Controls/FluTimePicker.qml

@@ -58,14 +58,14 @@ FluButton {
         id: divider_1
         width: 1
         x: isH ? parent.width/3 : parent.width/2
-        height: parent.height
+        height: parent.height - 1
         color: dividerColor
     }
     Rectangle{
         id: divider_2
         width: 1
         x: parent.width*2/3
-        height: parent.height
+        height: parent.height - 1
         color: dividerColor
         visible: isH
     }

src/Qt5/imports/FluentUI/Controls/FluToggleButton.qml

@@ -23,7 +23,7 @@ Button {
         if(checked){
             return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
         }else{
-            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
+            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(251/255,251/255,251/255,1)
         }
     }
     property var clickListener : function(){
@@ -45,27 +45,14 @@ Button {
         }
     }
     onClicked: clickListener()
-    background: Rectangle{
+    background: FluControlBackground{
-        implicitWidth: 28
+        implicitWidth: 30
-        implicitHeight: 28
+        implicitHeight: 30
         radius: 4
         FluFocusRectangle{
             visible: control.activeFocus
             radius:4
         }
-        gradient: Gradient {
-            GradientStop { position: 0.33; color: control.enabled ? control.normalColor : Qt.rgba(0,0,0,0) }
-            GradientStop { position: 1.0; color: control.enabled ? Qt.darker(control.normalColor,1.3) : Qt.rgba(0,0,0,0) }
-        }
-        Rectangle{
-            radius: parent.radius
-            anchors{
-                fill: parent
-                topMargin: checked && enabled ? 0 : 0
-                leftMargin: checked && enabled ? 1 : 0
-                rightMargin: checked && enabled ? 1 : 0
-                bottomMargin: checked && enabled ? 2 : 0
-            }
         color:{
             if(!enabled){
                 return disableColor
@@ -77,13 +64,33 @@ Button {
             }
             return hovered ? hoverColor :normalColor
         }
+        bottomMargin: {
+            if(checked){
+                return enabled ? 2 : 0
+            }else{
+                return 1
+            }
+        }
+        border.width: {
+            if(checked){
+                return enabled ? 1 : 0
+            }else{
+                return 1
+            }
+        }
+        shadow: {
+            if(checked){
+                return true
+            }else{
+                return !pressed && enabled
+            }
+        }
+        border.color: {
+            if(checked){
+                return enabled ? Qt.darker(control.normalColor,1.2) : disableColor
+            }else{
+                return FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(188/255,188/255,188/255,1)
             }
-        Rectangle{
-            color:"#00000000"
-            anchors.fill: parent
-            border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
-            border.width: checked ? 0 : 1
-            radius: parent.radius
         }
     }
     contentItem: FluText {

src/Qt5/imports/FluentUI/Controls/FluWindow.qml

@@ -43,9 +43,9 @@ Window {
     property bool useSystemAppBar
     property color resizeBorderColor: {
         if(window.active){
-            return FluTheme.dark ? "#333333" : "#6E6E6E"
+            return FluTheme.dark ? Qt.rgba(51/255,51/255,51/255,1) : Qt.rgba(110/255,110/255,110/255,1)
         }
-        return FluTheme.dark ? "#3D3D3E" : "#A7A7A7"
+        return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(167/255,167/255,167/255,1)
     }
     property int resizeBorderWidth: 1
     property var closeListener: function(event){

src/Qt5/imports/FluentUI/qmldir

@@ -19,6 +19,7 @@ FluComboBox 1.0 Controls/FluComboBox.qml
 FluContentDialog 1.0 Controls/FluContentDialog.qml
 FluContentPage 1.0 Controls/FluContentPage.qml
 FluControl 1.0 Controls/FluControl.qml
+FluControlBackground 1.0 Controls/FluControlBackground.qml
 FluCopyableText 1.0 Controls/FluCopyableText.qml
 FluDatePicker 1.0 Controls/FluDatePicker.qml
 FluDivider 1.0 Controls/FluDivider.qml

src/Qt5/imports/fluentui.qrc

@@ -109,5 +109,6 @@
         <file>FluentUI/Controls/FluFrame.qml</file>
         <file>FluentUI/Controls/FluSheet.qml</file>
         <file>FluentUI/Controls/FluGroupBox.qml</file>
+        <file>FluentUI/Controls/FluControlBackground.qml</file>
     </qresource>
 </RCC>

src/Qt6/imports/FluentUI/Controls/FluButton.qml

@@ -3,12 +3,13 @@ import QtQuick.Controls
 import QtQuick.Controls.Basic
 import FluentUI
 
+
 Button {
     property bool disabled: false
     property string contentDescription: ""
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
-    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
+    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color dividerColor: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(233/255,233/255,233/255,1)
     property color textColor: {
         if(FluTheme.dark){
@@ -39,11 +40,9 @@ Button {
     horizontalPadding:12
     font:FluTextStyle.Body
     focusPolicy:Qt.TabFocus
-    background: Rectangle{
+    background: FluControlBackground{
-        implicitWidth: 28
+        implicitWidth: 30
-        implicitHeight: 28
+        implicitHeight: 30
-        border.color: control.dividerColor
-        border.width: 1
         radius: 4
         color: {
             if(!enabled){
@@ -51,6 +50,7 @@ Button {
             }
             return hovered ? hoverColor :normalColor
         }
+        shadow: !pressed && enabled
         FluFocusRectangle{
             visible: control.activeFocus
             radius:4

src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml

@@ -448,7 +448,7 @@ FluButton {
                                 DayOfWeekRow {
                                     id: dayOfWeekRow
                                     locale: FluApp.locale
-                                    font.bold: false
+                                    font: FluTextStyle.Body
                                     delegate: Label {
                                         text: model.shortName
                                         font: dayOfWeekRow.font

src/Qt6/imports/FluentUI/Controls/FluComboBox.qml

@@ -45,7 +45,7 @@ T.ComboBox {
         topPadding: 6 - control.padding
         bottomPadding: 6 - control.padding
         renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-        selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+        selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
         selectedTextColor: color
         text: control.editable ? control.editText : control.displayText
         enabled: control.editable
@@ -67,7 +67,13 @@ T.ComboBox {
         bottomInset:1
         rightInset:1
         background: FluTextBoxBackground{
-            borderWidth: 0
+            border.width: 0
+            bottomMargin: {
+                if(!control.editable){
+                    return 0
+                }
+                return contentItem && contentItem.activeFocus ? 2 : 1
+            }
             inputItem: contentItem
         }
         Component.onCompleted: {

src/Qt6/imports/FluentUI/Controls/FluControlBackground.qml

@@ -0,0 +1,46 @@
+import QtQuick
+import QtQuick.Controls
+import FluentUI
+
+Item{
+    id:control
+    property int radius: 4
+    property bool shadow: true
+    property alias border: d.border
+    property var bottomMargin: undefined
+    property var topMargin: undefined
+    property var leftMargin: undefined
+    property var rightMargin: undefined
+    property color color: FluTheme.dark ? Qt.rgba(42/255,42/255,42/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+    property alias gradient : rect_border.gradient
+    Rectangle{
+        id:d
+        property color startColor: Qt.lighter(d.border.color,1.25)
+        property color endColor: shadow ? control.border.color : startColor
+        visible: false
+        border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(188/255,188/255,188/255,1)
+    }
+    Rectangle{
+        id:rect_border
+        anchors.fill: parent
+        radius: control.radius
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: d.startColor }
+            GradientStop { position: 0.88; color: d.startColor }
+            GradientStop { position: 1.0; color: d.endColor}
+        }
+    }
+    Rectangle{
+        id:rect_back
+        anchors{
+            fill: parent
+            margins: control.border.width
+            topMargin: control.topMargin
+            bottomMargin: control.bottomMargin
+            leftMargin: control.leftMargin
+            rightMargin: control.rightMargin
+        }
+        radius: control.radius
+        color: control.color
+    }
+}

src/Qt6/imports/FluentUI/Controls/FluCopyableText.qml

@@ -17,7 +17,7 @@ TextEdit {
     selectByMouse: true
     selectedTextColor: color
     bottomPadding: 0
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     font:FluTextStyle.Body
     onSelectedTextChanged: {
         control.forceActiveFocus()

src/Qt6/imports/FluentUI/Controls/FluDatePicker.qml

@@ -41,7 +41,7 @@ FluButton {
         id:divider_1
         width: 1
         x:  parent.width/3
-        height: parent.height
+        height: parent.height-1
         color: control.dividerColor
         visible: showYear
     }
@@ -49,7 +49,7 @@ FluButton {
         id:divider_2
         width: 1
         x: showYear ? parent.width*2/3 :  parent.width/2
-        height: parent.height
+        height: parent.height-1
         color: control.dividerColor
     }
     FluText{

src/Qt6/imports/FluentUI/Controls/FluDropDownButton.qml

@@ -4,59 +4,12 @@ import QtQuick.Controls.Basic
 import QtQuick.Window
 import FluentUI
 
-Button {
+FluButton {
-    property bool disabled: false
-    property string contentDescription: ""
-    property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
-    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
-    property color textColor: {
-        if(FluTheme.dark){
-            if(!enabled){
-                return Qt.rgba(131/255,131/255,131/255,1)
-            }
-            if(pressed){
-                return Qt.rgba(162/255,162/255,162/255,1)
-            }
-            return Qt.rgba(1,1,1,1)
-        }else{
-            if(!enabled){
-                return Qt.rgba(160/255,160/255,160/255,1)
-            }
-            if(pressed){
-                return Qt.rgba(96/255,96/255,96/255,1)
-            }
-            return Qt.rgba(0,0,0,1)
-        }
-    }
-    property var window : Window.window
-    default property alias contentData: menu.contentData
-    Accessible.role: Accessible.Button
-    Accessible.name: control.text
-    Accessible.description: contentDescription
-    Accessible.onPressAction: control.clicked()
     id: control
+    default property alias contentData: menu.contentData
     rightPadding:35
-    enabled: !disabled
-    focusPolicy:Qt.TabFocus
     verticalPadding: 0
     horizontalPadding:12
-    background: Rectangle{
-        implicitWidth: 28
-        implicitHeight: 28
-        border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
-        border.width: 1
-        radius: 4
-        FluFocusRectangle{
-            visible: control.activeFocus
-            radius:8
-        }
-        color:{
-            if(!enabled){
-                return disableColor
-            }
-            return hovered ? hoverColor :normalColor
-        }
     FluIcon{
         iconSource:FluentIcons.ChevronDown
         iconSize: 15
@@ -65,14 +18,7 @@ Button {
             rightMargin: 10
             verticalCenter: parent.verticalCenter
         }
-            iconColor:title.color
+        iconColor:control.textColor
-        }
-    }
-    contentItem: FluText {
-        id:title
-        text: control.text
-        verticalAlignment: Text.AlignVCenter
-        color: control.textColor
     }
     onClicked: {
         if(menu.count !==0){

src/Qt6/imports/FluentUI/Controls/FluExpander.qml

@@ -26,8 +26,8 @@ Item {
         width: parent.width
         height: 45
         radius: 4
-        color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+        border.color: FluTheme.dividerColor
-        border.color: FluTheme.dark ?  Window.active ? Qt.rgba(55/255,55/255,55/255,1) : Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+        color: FluTheme.dark ? Window.active ?  Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
         MouseArea{
             id:control_mouse
             anchors.fill: parent
@@ -90,7 +90,7 @@ Item {
             radius: 4
             clip: true
             color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-            border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+            border.color: FluTheme.dividerColor
             anchors.topMargin: -contentHeight
             states: [
                 State{

src/Qt6/imports/FluentUI/Controls/FluFilledButton.qml

@@ -30,27 +30,13 @@ Button {
     font:FluTextStyle.Body
     verticalPadding: 0
     horizontalPadding:12
-    background: Rectangle{
+    background: FluControlBackground{
-        implicitWidth: 28
+        implicitWidth: 30
-        implicitHeight: 28
+        implicitHeight: 30
         radius: 4
-        FluFocusRectangle{
+        bottomMargin: enabled ? 2 : 0
-            visible: control.visualFocus
+        border.width: enabled ? 1 : 0
-            radius:4
+        border.color: enabled ? Qt.darker(control.normalColor,1.2) : disableColor
-        }
-        gradient: Gradient {
-            GradientStop { position: 0.33; color: control.enabled ? control.normalColor : Qt.rgba(0,0,0,0) }
-            GradientStop { position: 1.0; color: control.enabled ? Qt.darker(control.normalColor,1.3) : Qt.rgba(0,0,0,0) }
-        }
-        Rectangle{
-            radius: parent.radius
-            anchors{
-                fill: parent
-                topMargin: control.enabled ? 0 : 0
-                leftMargin: control.enabled ? 1 : 0
-                rightMargin: control.enabled ? 1 : 0
-                bottomMargin: control.enabled ? 2 : 0
-            }
         color:{
             if(!enabled){
                 return disableColor
@@ -60,6 +46,9 @@ Button {
             }
             return hovered ? hoverColor :normalColor
         }
+        FluFocusRectangle{
+            visible: control.visualFocus
+            radius:4
         }
     }
     contentItem: FluText {

src/Qt6/imports/FluentUI/Controls/FluFrame.qml

@@ -16,7 +16,7 @@ T.Frame {
     background: Rectangle {
         id:d
         radius: 4
-        border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+        border.color: FluTheme.dividerColor
-        color: FluTheme.dark ? Window.active ?  Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+        color: FluTheme.dark ? Window.active ?  Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     }
 }

src/Qt6/imports/FluentUI/Controls/FluMenu.qml

@@ -51,9 +51,9 @@ T.Menu {
         FluShadow{}
     }
     T.Overlay.modal: Rectangle {
-        color: Color.transparent(control.palette.shadow, 0.5)
+        color: FluTools.withOpacity(control.palette.shadow, 0.5)
     }
     T.Overlay.modeless: Rectangle {
-        color: Color.transparent(control.palette.shadow, 0.12)
+        color: FluTools.withOpacity(control.palette.shadow, 0.12)
     }
 }

src/Qt6/imports/FluentUI/Controls/FluMultilineTextBox.qml

@@ -26,7 +26,7 @@ TextArea{
     leftPadding: padding+4
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     selectedTextColor: color
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     placeholderTextColor: {
         if(!enabled){
             return placeholderDisableColor

src/Qt6/imports/FluentUI/Controls/FluPasswordBox.qml

@@ -26,7 +26,7 @@ TextField{
     leftPadding: padding+4
     echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     selectedTextColor: color
     placeholderTextColor: {
         if(!enabled){

src/Qt6/imports/FluentUI/Controls/FluPivot.qml

@@ -8,19 +8,18 @@ Page {
     property alias currentIndex: nav_list.currentIndex
     property color textNormalColor: FluTheme.dark ? FluColors.Grey120 : FluColors.Grey120
     property color textHoverColor: FluTheme.dark ? FluColors.Grey10 : FluColors.Black
-    property int textSize: 28
-    property bool textBold: true
     property int textSpacing: 10
     property int headerSpacing: 20
     property int headerHeight: 40
     id:control
     width: 400
     height: 300
+    font: FluTextStyle.Title
     implicitHeight: height
     implicitWidth: width
     FluObject{
         id:d
-        property int tabY: control.headerHeight/2+control.textSize/2 + 3
+        property int tabY: control.headerHeight/2+control.font.pixelSize/2 + 3
     }
     background:Item{}
     header:ListView{
@@ -66,10 +65,9 @@ Page {
                     id:item_title
                     text: modelData.title
                     anchors.centerIn: parent
-                    font.pixelSize: control.textSize
+                    font: control.font
-                    font.bold: control.textBold
                     color: {
-                        if(item_button.hovered || nav_list.currentIndex === index)
+                        if(item_button.hovered)
                             return textHoverColor
                         return textNormalColor
                     }

src/Qt6/imports/FluentUI/Controls/FluProgressButton.qml

@@ -3,14 +3,13 @@ import QtQuick.Controls
 import QtQuick.Controls.Basic
 import FluentUI
 
-Button {
+FluButton {
     property real progress
-    property bool disabled: false
-    property string contentDescription: ""
     QtObject{
         id:d
-        property bool checked: (rect_back.height === background.height) && (progress === 1)
+        property bool checked: (Number(rect_back.height) === Number(background.height)) && (progress === 1)
     }
+    id: control
     property color normalColor: {
         if(d.checked){
             return FluTheme.primaryColor
@@ -33,24 +32,12 @@ Button {
         }
     }
     property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
-    Accessible.role: Accessible.Button
+    background: FluControlBackground{
-    Accessible.name: control.text
+        implicitWidth: 30
-    Accessible.description: contentDescription
+        implicitHeight: 30
-    Accessible.onPressAction: control.clicked()
-    focusPolicy:Qt.TabFocus
-    id: control
-    enabled: !disabled
-    verticalPadding: 0
-    horizontalPadding:12
-    background: FluClip{
-        implicitWidth: 28
-        implicitHeight: 28
-        radius: [4,4,4,4]
-        Rectangle{
-            anchors.fill: parent
-            border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
-            border.width: d.checked ? 0 : 1
         radius: 4
+        border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(188/255,188/255,188/255,1)
+        border.width: d.checked ? 0 : 1
         color:{
             if(!enabled){
                 return disableColor
@@ -62,7 +49,9 @@ Button {
             }
             return hovered ? hoverColor :normalColor
         }
-        }
+        FluClip{
+            anchors.fill: parent
+            radius: [4,4,4,4]
             Rectangle{
                 id:rect_back
                 width: parent.width  * control.progress
@@ -89,6 +78,7 @@ Button {
                     }
                 }
             }
+        }
         FluFocusRectangle{
             visible: control.activeFocus
             radius:4

src/Qt6/imports/FluentUI/Controls/FluShortcutPicker.qml

@@ -131,10 +131,9 @@ FluIconButton {
             width: Math.max(item_text.implicitWidth+12,28)
             height: Math.max(item_text.implicitHeight,28)
             radius: 4
-            Text{
+            FluText{
                 id:item_text
                 color: FluTheme.dark ? Qt.rgba(0,0,0,1)  : Qt.rgba(1,1,1,1)
-                font.pixelSize: 13
                 text: keyText
                 anchors.centerIn: parent
             }

src/Qt6/imports/FluentUI/Controls/FluSpinBox.qml

@@ -40,7 +40,7 @@ T.SpinBox {
             }
             return normalColor
         }
-        selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+        selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
         selectedTextColor: color
         horizontalAlignment: Qt.AlignHCenter
         verticalAlignment: Qt.AlignVCenter

src/Qt6/imports/FluentUI/Controls/FluTableView.qml

@@ -16,7 +16,7 @@ Rectangle {
     property bool horizonalHeaderVisible: true
     property bool verticalHeaderVisible: true
     property color selectedBorderColor: FluTheme.primaryColor
-    property color selectedColor: FluTools.colorAlpha(FluTheme.primaryColor,0.3)
+    property color selectedColor: FluTools.withOpacity(FluTheme.primaryColor,0.3)
     id:control
     color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     onColumnSourceChanged: {

src/Qt6/imports/FluentUI/Controls/FluTextBox.qml

@@ -26,7 +26,7 @@ TextField{
     }
     font:FluTextStyle.Body
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     selectedTextColor: color
     placeholderTextColor: {
         if(!enabled){

src/Qt6/imports/FluentUI/Controls/FluTextBoxBackground.qml

@@ -2,14 +2,9 @@ import QtQuick
 import QtQuick.Controls
 import FluentUI
 
-FluClip{
+FluControlBackground{
     property Item inputItem
-    property int borderWidth: 1
     id:control
-    radius: [4,4,4,4]
-    Rectangle{
-        radius: 4
-        anchors.fill: parent
     color: {
         if(inputItem && inputItem.disabled){
             return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
@@ -22,35 +17,22 @@ FluClip{
         }
         return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
     }
-        border.width: control.borderWidth
+    border.width: 1
-        border.color: {
+    gradient: Gradient {
-            if(inputItem && inputItem.disabled){
+        GradientStop { position: 0.0; color: d.startColor }
-                return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
+        GradientStop { position: d.position; color: d.startColor }
+        GradientStop { position: 1.0; color: d.endColor }
     }
-            return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
+    bottomMargin: inputItem && inputItem.activeFocus ? 2 : 1
-        }
+    QtObject{
-    }
+        id:d
-    Rectangle{
+        property real position: 1 - 3/control.height
-        width: parent.width
+        property color startColor: FluTheme.dark ? Qt.rgba(66/255,66/255,66/255,1) : Qt.rgba(232/255,232/255,232/255,1)
-        height: inputItem && inputItem.activeFocus ? 2 : 1
+        property color endColor: {
-        anchors.bottom: parent.bottom
+            if(!control.enabled){
-        visible: !(inputItem && inputItem.disabled)
+                return d.startColor
-        color: {
-            if(inputItem && inputItem.activeFocus){
-                return FluTheme.primaryColor
-            }
-            if(FluTheme.dark){
-                return Qt.rgba(166/255,166/255,166/255,1)
-            }else{
-                return Qt.rgba(134/255,134/255,134/255,1)
-            }
-        }
-        Behavior on height{
-            enabled: FluTheme.animationEnabled
-            NumberAnimation{
-                duration: 83
-                easing.type: Easing.OutCubic
             }
+            return inputItem && inputItem.activeFocus ? FluTheme.primaryColor : FluTheme.dark ? Qt.rgba(123/255,123/255,123/255,1) : Qt.rgba(132/255,132/255,132/255,1)
         }
     }
 }

src/Qt6/imports/FluentUI/Controls/FluTextButton.qml

@@ -29,8 +29,8 @@ Button {
     enabled: !disabled
     font:FluTextStyle.Body
     background: Rectangle{
-        implicitWidth: 28
+        implicitWidth: 30
-        implicitHeight: 28
+        implicitHeight: 30
         radius: 4
         color: {
             if(!enabled){

src/Qt6/imports/FluentUI/Controls/FluTimePicker.qml

@@ -58,14 +58,14 @@ FluButton {
         id: divider_1
         width: 1
         x: isH ? parent.width/3 : parent.width/2
-        height: parent.height
+        height: parent.height-1
         color: dividerColor
     }
     Rectangle{
         id: divider_2
         width: 1
         x: parent.width*2/3
-        height: parent.height
+        height: parent.height-1
         color: dividerColor
         visible: isH
     }

src/Qt6/imports/FluentUI/Controls/FluToggleButton.qml

@@ -24,7 +24,7 @@ Button {
         if(checked){
             return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
         }else{
-            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
+            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(251/255,251/255,251/255,1)
         }
     }
     property var clickListener : function(){
@@ -41,27 +41,14 @@ Button {
     verticalPadding: 0
     horizontalPadding:12
     onClicked: clickListener()
-    background: Rectangle{
+    background: FluControlBackground{
-        implicitWidth: 28
+        implicitWidth: 30
-        implicitHeight: 28
+        implicitHeight: 30
         radius: 4
         FluFocusRectangle{
             visible: control.activeFocus
             radius:4
         }
-        gradient: Gradient {
-            GradientStop { position: 0.33; color: control.enabled ? control.normalColor : Qt.rgba(0,0,0,0) }
-            GradientStop { position: 1.0; color: control.enabled ? Qt.darker(control.normalColor,1.3) : Qt.rgba(0,0,0,0) }
-        }
-        Rectangle{
-            radius: parent.radius
-            anchors{
-                fill: parent
-                topMargin: checked && enabled ? 0 : 0
-                leftMargin: checked && enabled ? 1 : 0
-                rightMargin: checked && enabled ? 1 : 0
-                bottomMargin: checked && enabled ? 2 : 0
-            }
         color:{
             if(!enabled){
                 return disableColor
@@ -73,13 +60,33 @@ Button {
             }
             return hovered ? hoverColor :normalColor
         }
+        bottomMargin: {
+            if(checked){
+                return enabled ? 2 : 0
+            }else{
+                return 1
+            }
+        }
+        border.width: {
+            if(checked){
+                return enabled ? 1 : 0
+            }else{
+                return 1
+            }
+        }
+        shadow: {
+            if(checked){
+                return true
+            }else{
+                return !pressed && enabled
+            }
+        }
+        border.color: {
+            if(checked){
+                return enabled ? Qt.darker(control.normalColor,1.2) : disableColor
+            }else{
+                return FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(188/255,188/255,188/255,1)
             }
-        Rectangle{
-            color:"#00000000"
-            anchors.fill: parent
-            border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
-            border.width: checked ? 0 : 1
-            radius: parent.radius
         }
     }
     contentItem: FluText {

src/Qt6/imports/FluentUI/Controls/FluWindow.qml

@@ -42,9 +42,9 @@ Window {
     property bool useSystemAppBar
     property color resizeBorderColor: {
         if(window.active){
-            return FluTheme.dark ? "#333333" : "#6E6E6E"
+            return FluTheme.dark ? Qt.rgba(51/255,51/255,51/255,1) : Qt.rgba(110/255,110/255,110/255,1)
         }
-        return FluTheme.dark ? "#3D3D3E" : "#A7A7A7"
+        return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(167/255,167/255,167/255,1)
     }
     property int resizeBorderWidth: 1
     property var closeListener: function(event){