diff --git a/Modules/Demo/DemoPanel.qml b/Modules/Demo/DemoPanel.qml index 2025ace..c1aa89a 100644 --- a/Modules/Demo/DemoPanel.qml +++ b/Modules/Demo/DemoPanel.qml @@ -68,7 +68,7 @@ NLoader { Rectangle { id: bgRect - color: Colors.colorSurface + color: Colors.colorSurfaceVariant radius: Style.radiusMedium * scaling border.color: Colors.colorOutlineVariant border.width: Math.max(1, Style.borderThin * scaling) diff --git a/Modules/Settings/SettingsPanel.qml b/Modules/Settings/SettingsPanel.qml index 926a816..2e03531 100644 --- a/Modules/Settings/SettingsPanel.qml +++ b/Modules/Settings/SettingsPanel.qml @@ -161,7 +161,7 @@ NLoader { color: Colors.colorSurface radius: Style.radiusLarge * scaling border.color: Colors.colorOutlineVariant - border.width: Math.max(1, Style.borderMedium * scaling) + border.width: Math.max(1, Style.borderThin * scaling) layer.enabled: true width: (screen.width * 0.5) * scaling height: (screen.height * 0.5) * scaling diff --git a/Modules/SidePanel/SidePanel.qml b/Modules/SidePanel/SidePanel.qml index 7c3aec2..0d6962c 100644 --- a/Modules/SidePanel/SidePanel.qml +++ b/Modules/SidePanel/SidePanel.qml @@ -83,8 +83,8 @@ NLoader { id: panelBackground color: Colors.colorSurface radius: Style.radiusLarge * scaling - border.color: Colors.colorOutline - border.width: Math.max(1, Style.borderMedium * scaling) + border.color: Colors.colorOutlineVariant + border.width: Math.max(1, Style.borderThin * scaling) layer.enabled: true width: 460 * scaling property real innerMargin: sidePanel.cardSpacing diff --git a/Services/Colors.qml b/Services/Colors.qml index 972f483..7cb0d57 100644 --- a/Services/Colors.qml +++ b/Services/Colors.qml @@ -59,36 +59,36 @@ Singleton { id: defaultTheme // // --- Key Colors: These are the main accent colors that define your app's theme. - property color colorPrimary: "#000000" // The main brand color, used most frequently. - property color colorOnPrimary: "#000000" // Color for text/icons on a Primary background. + property color colorPrimary: "#ebbcba" // The main brand color, used most frequently. + property color colorOnPrimary: "#191724" // Color for text/icons on a Primary background. property color colorPrimaryContainer: "#000000" // A lighter/subtler tone of Primary, used for component backgrounds. property color colorOnPrimaryContainer: "#000000" // Color for text/icons on a Primary Container background. - property color colorSecondary: "#000000" // An accent color for less prominent components. - property color colorOnSecondary: "#000000" // Color for text/icons on a Secondary background. + property color colorSecondary: "#31748f" // An accent color for less prominent components. + property color colorOnSecondary: "#e0def4" // Color for text/icons on a Secondary background. property color colorSecondaryContainer: "#000000" // A lighter/subtler tone of Secondary. property color colorOnSecondaryContainer: "#000000" // olor for text/icons on a Secondary Container background. - property color colorTertiary: "#000000" // A contrasting accent color used for things like highlights or special actions. - property color colorOnTertiary: "#000000" // Color for text/icons on a Tertiary background. + property color colorTertiary: "#9ccfd8" // A contrasting accent color used for things like highlights or special actions. + property color colorOnTertiary: "#191724" // Color for text/icons on a Tertiary background. property color colorTertiaryContainer: "#000000" // A lighter/subtler tone of Tertiary. property color colorOnTertiaryContainer: "#000000" // Color for text/icons on a Tertiary Container background. // --- Utility colorColors: These colors serve specific, universal purposes like indicating errors or providing neutral backgrounds. - property color colorError: "#000000" // Indicates an error state. - property color colorOnError: "#000000" // Color for text/icons on an Error background. + property color colorError: "#eb6f92" // Indicates an error state. + property color colorOnError: "#191724" // Color for text/icons on an Error background. property color colorErrorContainer: "#000000" // A lighter/subtler tone of Error. property color colorOnErrorContainer: "#000000" // Color for text/icons on an Error Container background. // --- Surface colorand Variant Colors: These provide additional options for surfaces and their contents, creating visual hierarchy. - property color colorSurface: "#000000" // The color for component surfaces like cards, sheets, and menus. - property color colorOnSurface: "#000000" // The primary color for text/icons on a Surface background. - property color colorSurfaceVariant: "#000000" // A surface color with a slightly different tint for differentiation. - property color colorOnSurfaceVariant: "#000000" // The color for less prominent text/icons on a Surface. + property color colorSurface: "#191724" // The color for component surfaces like cards, sheets, and menus. + property color colorOnSurface: "#e0def4" // The primary color for text/icons on a Surface background. + property color colorSurfaceVariant: "#26233a" // A surface color with a slightly different tint for differentiation. + property color colorOnSurfaceVariant: "#908caa" // The color for less prominent text/icons on a Surface. property color colorInversePrimary: "#000000" // A primary color legible on an Inverse Surface, often used for call-to-action buttons. - property color colorOutline: "#000000" // The color for component outlines, like text fields or buttons. - property color colorOutlineVariant: "#000000" // A subtler outline color for decorative elements or dividers. - property color colorShadow: "#000000" // The color used for shadows to create elevation. + property color colorOutline: "#44415a" // The color for component outlines, like text fields or buttons. + property color colorOutlineVariant: "#514e6c" // A subtler outline color for decorative elements or dividers. + property color colorShadow: "#191724" // The color used for shadows to create elevation. // // property color colorBackground: "#191724" // // property color colorSurface: "#1f1d2e" diff --git a/Widgets/NComboBox.qml b/Widgets/NComboBox.qml index ddc8d85..8b37d5b 100644 --- a/Widgets/NComboBox.qml +++ b/Widgets/NComboBox.qml @@ -56,7 +56,7 @@ ColumnLayout { background: Rectangle { implicitWidth: 120 * scaling implicitHeight: preferredHeight - color: Colors.colorSurfaceVariant + color: Colors.colorSurface border.color: combo.activeFocus ? Colors.colorTertiary : Colors.colorOutline border.width: Math.max(1, Style.borderThin * scaling) radius: Style.radiusMedium * scaling diff --git a/Widgets/NSlider.qml b/Widgets/NSlider.qml index 2a2ed96..962af98 100644 --- a/Widgets/NSlider.qml +++ b/Widgets/NSlider.qml @@ -27,7 +27,7 @@ Slider { width: root.availableWidth height: implicitHeight radius: height / 2 - color: Colors.colorSurfaceVariant + color: Colors.colorSurface Rectangle { id: activeTrack diff --git a/Widgets/NTextInput.qml b/Widgets/NTextInput.qml index e96afc6..5fc9faf 100644 --- a/Widgets/NTextInput.qml +++ b/Widgets/NTextInput.qml @@ -47,7 +47,7 @@ Item { implicitWidth: root.width implicitHeight: Style.baseWidgetSize * 1.35 * scaling radius: Style.radiusMedium * scaling - color: Colors.colorSurfaceVariant + color: Colors.colorSurface border.color: Colors.colorOutline border.width: Math.max(1, Style.borderThin * scaling) diff --git a/Widgets/NToggle.qml b/Widgets/NToggle.qml index 2c61e96..217fc9e 100644 --- a/Widgets/NToggle.qml +++ b/Widgets/NToggle.qml @@ -53,7 +53,7 @@ RowLayout { implicitWidth: (root.baseSize - 5) * scaling implicitHeight: (root.baseSize - 5) * scaling radius: height * 0.5 - color: value ? Colors.colorOnSurface : Colors.colorPrimary //Colors.onBackground : Colors.colorSecondary + color: value ? Colors.colorOnPrimary: Colors.colorPrimary border.color: value ? Colors.colorSurface : Colors.colorSurface border.width: Math.max(1, Style.borderMedium * scaling) y: 2 * scaling