chore: show hex value in colors preview

Author: luisbocanegra

src/plasmoid/package/contents/ui/components/ColorRolePreview.qml

@@ -14,25 +14,49 @@ Rectangle {
     color: scheme[root.role]
     ColumnLayout {
         id: col
-        spacing: 2
+        spacing: 0
         anchors.fill: parent
 
-        Text {
-            text: root.customName !== "" ? `${root.customName}` : `${root.role}`
-            color: root.scheme[root.onRole]
-            font.bold: true
-            font.pixelSize: Kirigami.Theme.defaultFont.pixelSize
-            elide: Text.ElideRight
-            Layout.fillWidth: true
+        RowLayout{
+            Layout.leftMargin: Kirigami.Units.smallSpacing
+            Layout.rightMargin: Kirigami.Units.smallSpacing
+            Text {
+                text: root.customName !== "" ? `${root.customName}` : `${root.role}`
+                color: root.scheme[root.onRole]
+                font.bold: true
+                font.pixelSize: Kirigami.Theme.defaultFont.pixelSize
+                elide: Text.ElideRight
+                Layout.fillWidth: true
+            }
+            Text {
+                text: `${root.scheme[root.role]}`
+                color: root.scheme[root.onRole]
+                font.pixelSize: Kirigami.Theme.smallFont.pixelSize
+                Layout.alignment: Qt.AlignRight
+                opacity: 0.7
+                font.family: "monospace"
+            }
         }
 
-        Text {
-            text: `${root.onRole}`
-            color: root.scheme[root.onRole]
-            font.pixelSize: Kirigami.Theme.smallFont.pixelSize
-            visible: root.customName === ""
-            elide: Text.ElideRight
-            Layout.fillWidth: true
+        RowLayout {
+            Layout.leftMargin: Kirigami.Units.smallSpacing
+            Layout.rightMargin: Kirigami.Units.smallSpacing
+            Text {
+                text: `${root.onRole}`
+                color: root.scheme[root.onRole]
+                font.pixelSize: Kirigami.Theme.smallFont.pixelSize
+                opacity: root.customName === ""
+                Layout.fillWidth: true
+                elide: Text.ElideRight
+            }
+            Text {
+                text: `${root.scheme[root.onRole]}`
+                color: root.scheme[root.onRole]
+                font.pixelSize: Kirigami.Theme.smallFont.pixelSize
+                Layout.alignment: Qt.AlignRight
+                opacity: 0.7
+                font.family: "monospace"
+            }
         }
     }
 }

src/plasmoid/package/contents/ui/components/ColorsPreview.qml

@@ -59,27 +59,30 @@ ColumnLayout {
 
     GridLayout {
         columns: 2
-        rows: 10
+        rows: 12
         columnSpacing: 0
         rowSpacing: 0
         flow: GridLayout.TopToBottom
         Repeater {
             model: [
                 { role: "primary", onRole: "onPrimary" },
-                { role: "primaryContainer", onRole: "onPrimaryContainer" },
+                { role: "primaryDim", onRole: "onPrimary" },
                 { role: "primaryFixed", onRole: "onPrimaryFixed" },
                 { role: "primaryFixed", onRole: "onPrimaryFixedVariant" },
                 { role: "primaryFixedDim", onRole: "onPrimaryFixed" },
+                { role: "primaryContainer", onRole: "onPrimaryContainer" },
                 { role: "tertiary", onRole: "onTertiary" },
-                { role: "tertiaryContainer", onRole: "onTertiaryContainer" },
+                { role: "tertiaryDim", onRole: "onTertiary" },
                 { role: "tertiaryFixed", onRole: "onTertiaryFixed" },
                 { role: "tertiaryFixed", onRole: "onTertiaryFixedVariant" },
                 { role: "tertiaryFixedDim", onRole: "onTertiaryFixed" },
+                { role: "tertiaryContainer", onRole: "onTertiaryContainer" },
                 { role: "secondary", onRole: "onSecondary" },
-                { role: "secondaryContainer", onRole: "onSecondaryContainer" },
+                { role: "secondaryDim", onRole: "onSecondary" },
                 { role: "secondaryFixed", onRole: "onSecondaryFixed" },
                 { role: "secondaryFixed", onRole: "onSecondaryFixedVariant" },
                 { role: "secondaryFixedDim", onRole: "onSecondaryFixed" },
+                { role: "secondaryContainer", onRole: "onSecondaryContainer" },
             ]
             delegate: ColorRolePreview {
                 required property var modelData
@@ -131,6 +134,7 @@ ColumnLayout {
         Repeater {
             model: [
                 { role: "error", onRole: "onError" },
+                { role: "errorDim", onRole: "onError" },
                 { role: "errorContainer", onRole: "onErrorContainer" },
                 { role: "outline", onRole: "onSurface" },
                 { role: "outlineVariant", onRole: "onSurface" },