Use simple colors for program designs

data/de.johrpan.Musicus.gschema.xml.in

@@ -39,17 +39,17 @@
     </key>
     <key name="program1" type="s">
       <!-- Translators: Configuration for the default programs in JSON. Please only translate the values of "title" and "description". -->
-      <default l10n="messages">'{"title":"Just play some music","description":"Randomly select some music. Customize programs using the button in the top right.","design":"Program1","prefer_recently_added":0.0,"prefer_least_recently_played":0.1,"avoid_repeated_composers":60,"avoid_repeated_instruments":60,"play_full_recordings":true}'</default>
+      <default l10n="messages">'{"title":"Just play some music","description":"Randomly select some music. Customize programs using the button in the top right.","design":"Slate","prefer_recently_added":0.0,"prefer_least_recently_played":0.1,"avoid_repeated_composers":60,"avoid_repeated_instruments":60,"play_full_recordings":true}'</default>
       <summary>Default settings for program 1</summary>
     </key>
     <key name="program2" type="s">
       <!-- Translators: Configuration for the default programs in JSON. Please only translate the values of "title" and "description". -->
-      <default l10n="messages">'{"title":"What\'s new?","description":"Recordings that you recently added to your music library.","design":"Program2","prefer_recently_added":1.0,"prefer_least_recently_played":0.0,"avoid_repeated_composers":60,"avoid_repeated_instruments":60,"play_full_recordings":true}'</default>
+      <default l10n="messages">'{"title":"What\'s new?","description":"Recordings that you recently added to your music library.","design":"Orange","prefer_recently_added":1.0,"prefer_least_recently_played":0.0,"avoid_repeated_composers":60,"avoid_repeated_instruments":60,"play_full_recordings":true}'</default>
       <summary>Default settings for program 2</summary>
     </key>
     <key name="program3" type="s">
       <!-- Translators: Configuration for the default programs in JSON. Please only translate the values of "title" and "description". -->
-      <default l10n="messages">'{"title":"A long time ago","description":"Works that you haven\'t listened to for a long time.","design":"Program3","prefer_recently_added":0.0,"prefer_least_recently_played":1.0,"avoid_repeated_composers":60,"avoid_repeated_instruments":60,"play_full_recordings":true}'</default>
+      <default l10n="messages">'{"title":"A long time ago","description":"Works that you haven\'t listened to for a long time.","design":"Purple","prefer_recently_added":0.0,"prefer_least_recently_played":1.0,"avoid_repeated_composers":60,"avoid_repeated_instruments":60,"play_full_recordings":true}'</default>
       <summary>Default settings for program 3</summary>
     </key>
   </schema>

data/res/style.css

@@ -59,15 +59,6 @@
 .program-tile {
   padding: 12px;
   min-width: 200px;
-  transition: transform 100ms;
-}
-
-.program-tile:hover {
-  transform: scale(1.01);
-}
-
-.program-tile:active {
-  transform: scale(0.99);
 }
 
 .program-tile .title {
@@ -85,34 +76,49 @@
   box-shadow: 0 0 0 3px var(--accent-bg-color);
 }
 
-.program-1 {
+.blue {
   color: white;
-  background: linear-gradient(-225deg, #ac32e4 0%, #7918f2 48%, #4801ff 100%);
+  background-color: var(--accent-blue);
 }
 
-.program-2 {
+.teal {
   color: white;
-  background: linear-gradient(145deg, #f12711, #f5af19);
+  background-color: var(--accent-teal);
 }
 
-.program-3 {
+.green {
   color: white;
-  background: linear-gradient(-80deg, #ad5389, #3c1053);
+  background-color: var(--accent-green);
 }
 
-.program-4 {
+.yellow {
   color: white;
-  background: linear-gradient(140deg, #136797, #0b486b);
+  background-color: var(--accent-yellow);
 }
 
-.program-5 {
+.orange {
   color: white;
-  background: linear-gradient(100deg, #6a9113, #141517);
+  background-color: var(--accent-orange);
 }
 
-.program-6 {
+.red {
   color: white;
-  background: linear-gradient(120deg, #870000, #190a05);
+  background-color: var(--accent-red);
+}
+
+.pink {
+  color: white;
+  background-color: var(--accent-pink);
+}
+
+.purple {
+  color: white;
+  background-color: var(--accent-purple);
+}
+
+.slate {
+  color: white;
+  background-color: var(--accent-slate);
 }
 
 .selector>contents {

data/ui/editor/program.blp

@@ -69,66 +69,110 @@ template $MusicusProgramEditor: Adw.NavigationPage {
 
                   Gtk.ToggleButton {
                     action-name: "program.set-design";
-                    action-target: "'program-1'";
+                    action-target: "'default'";
 
                     styles [
                       "program-design-button",
-                      "program-1",
+                      "default",
                       "circular",
                     ]
                   }
 
                   Gtk.ToggleButton {
                     action-name: "program.set-design";
-                    action-target: "'program-2'";
+                    action-target: "'blue'";
 
                     styles [
                       "program-design-button",
-                      "program-2",
+                      "blue",
                       "circular",
                     ]
                   }
 
                   Gtk.ToggleButton {
                     action-name: "program.set-design";
-                    action-target: "'program-3'";
+                    action-target: "'teal'";
 
                     styles [
                       "program-design-button",
-                      "program-3",
+                      "teal",
                       "circular",
                     ]
                   }
 
                   Gtk.ToggleButton {
                     action-name: "program.set-design";
-                    action-target: "'program-4'";
+                    action-target: "'green'";
 
                     styles [
                       "program-design-button",
-                      "program-4",
+                      "green",
                       "circular",
                     ]
                   }
 
                   Gtk.ToggleButton {
                     action-name: "program.set-design";
-                    action-target: "'program-5'";
+                    action-target: "'yellow'";
 
                     styles [
                       "program-design-button",
-                      "program-5",
+                      "yellow",
                       "circular",
                     ]
                   }
 
                   Gtk.ToggleButton {
                     action-name: "program.set-design";
-                    action-target: "'program-6'";
+                    action-target: "'orange'";
 
                     styles [
                       "program-design-button",
-                      "program-6",
+                      "orange",
+                      "circular",
+                    ]
+                  }
+
+                  Gtk.ToggleButton {
+                    action-name: "program.set-design";
+                    action-target: "'red'";
+
+                    styles [
+                      "program-design-button",
+                      "red",
+                      "circular",
+                    ]
+                  }
+
+                  Gtk.ToggleButton {
+                    action-name: "program.set-design";
+                    action-target: "'pink'";
+
+                    styles [
+                      "program-design-button",
+                      "pink",
+                      "circular",
+                    ]
+                  }
+
+                  Gtk.ToggleButton {
+                    action-name: "program.set-design";
+                    action-target: "'purple'";
+
+                    styles [
+                      "program-design-button",
+                      "purple",
+                      "circular",
+                    ]
+                  }
+
+                  Gtk.ToggleButton {
+                    action-name: "program.set-design";
+                    action-target: "'slate'";
+
+                    styles [
+                      "program-design-button",
+                      "slate",
                       "circular",
                     ]
                   }

src/program.rs

@@ -168,12 +168,16 @@ impl Default for Program {
 #[derive(glib::Enum, Serialize, Deserialize, Eq, PartialEq, Clone, Copy, Debug)]
 #[enum_type(name = "MusicusProgramDesign")]
 pub enum ProgramDesign {
-    Program1,
+    Default,
-    Program2,
+    Blue,
-    Program3,
+    Teal,
-    Program4,
+    Green,
-    Program5,
+    Yellow,
-    Program6,
+    Orange,
+    Red,
+    Pink,
+    Purple,
+    Slate,
 }
 
 impl ProgramDesign {
@@ -184,19 +188,23 @@ impl ProgramDesign {
 
 impl Default for ProgramDesign {
     fn default() -> Self {
-        Self::Program1
+        Self::Default
     }
 }
 
 impl ToString for ProgramDesign {
     fn to_string(&self) -> String {
         String::from(match self {
-            ProgramDesign::Program1 => "program-1",
+            ProgramDesign::Default => "default",
-            ProgramDesign::Program2 => "program-2",
+            ProgramDesign::Blue => "blue",
-            ProgramDesign::Program3 => "program-3",
+            ProgramDesign::Teal => "teal",
-            ProgramDesign::Program4 => "program-4",
+            ProgramDesign::Green => "green",
-            ProgramDesign::Program5 => "program-5",
+            ProgramDesign::Yellow => "yellow",
-            ProgramDesign::Program6 => "program-6",
+            ProgramDesign::Orange => "orange",
+            ProgramDesign::Red => "red",
+            ProgramDesign::Pink => "pink",
+            ProgramDesign::Purple => "purple",
+            ProgramDesign::Slate => "slate",
         })
     }
 }
@@ -206,12 +214,16 @@ impl FromStr for ProgramDesign {
 
     fn from_str(s: &str) -> std::result::Result<Self, ()> {
         match s {
-            "program-1" => Ok(ProgramDesign::Program1),
+            "default" => Ok(ProgramDesign::Default),
-            "program-2" => Ok(ProgramDesign::Program2),
+            "blue" => Ok(ProgramDesign::Blue),
-            "program-3" => Ok(ProgramDesign::Program3),
+            "teal" => Ok(ProgramDesign::Teal),
-            "program-4" => Ok(ProgramDesign::Program4),
+            "green" => Ok(ProgramDesign::Green),
-            "program-5" => Ok(ProgramDesign::Program5),
+            "yellow" => Ok(ProgramDesign::Yellow),
-            "program-6" => Ok(ProgramDesign::Program6),
+            "orange" => Ok(ProgramDesign::Orange),
+            "red" => Ok(ProgramDesign::Red),
+            "pink" => Ok(ProgramDesign::Pink),
+            "purple" => Ok(ProgramDesign::Purple),
+            "slate" => Ok(ProgramDesign::Slate),
             _ => Err(()),
         }
     }

src/program_tile.rs

@@ -74,8 +74,12 @@ mod imp {
         }
 
         fn set_program(&self, program: &Program) {
-            self.obj()
+            self.obj().set_css_classes(&[
-                .set_css_classes(&["program-tile", &program.design().css_class()]);
+                "program-tile",
+                "card",
+                "activatable",
+                &program.design().css_class(),
+            ]);
 
             if let Some(title) = program.title() {
                 self.title_label.set_label(&title);