Use two distinct spinners to select skins

- Use new 'base theme name' and 'variant name' values for skins to determine spinner values
- Ensure the skin is correctly set based on the values of both spinners
- Keep the options in the 'variant' spinners correct when updating the base spinner, as different base themes may have different variants (or no variants)
- Many other small changes to make it all work smoothly.
- Rename the folders of the classic skins, as the order of variants is determined by folder name alphabetic order. Using the same structure as with the cartoon skins ensure the variant order is the same.
- Also remove some redundant comments that were missed in the previous commit.

Remaining:
- Tidying up the code
- Ensure that if a variant exists in both the previous 'base theme' and the new 'base theme', switching the base theme while this variant is active doesn't reset to the default variant.

data/gui/screens/options/options_ui.stkgui

@@ -34,12 +34,20 @@
 
                 <!-- ************ SKIN CHOICE ************ -->
                 <div width="100%" height="fit" layout="horizontal-row">
-                    <spinner id="skinchoice" width="10f" align="center" />
+                    <spinner id="base_skinchoice" width="10f" align="center" />
                     <label height="100%" x="0" y="0" I18N="In the ui settings" text="Skin"/>
                 </div>
 
                 <spacer width="5" height="2%"/>
 
+                <div width="100%" height="fit" layout="horizontal-row">
+                    <spinner id="variant_skinchoice" width="10f" align="center" />
+                    <label height="100%" x="0" y="0" I18N="In the ui settings" text="Skin variant"/>
+                </div>
+
+                <spacer width="5" height="2%"/>
+
+                <!-- ************ MISC. CHOICE ************ -->
                 <div width="100%" height="fit" layout="horizontal-row">
                     <spinner id="minimap" width="10f" align="center" />
                     <label height="100%" x="0" y="0" I18N="In the ui settings" text="Minimap"/>
@@ -54,7 +62,7 @@
 
                 <spacer width="5" height="2%"/>
 
-                <!-- ************ GRAPHICAL EFFECTS SETTINGS ************ -->
+                <!-- ************ EXTRA UI ELEMENTS SETTINGS ************ -->
                 <div width="100%" height="fit" layout="horizontal-row">
                     <spinner id="camera_preset" width="10f" align="center" />
                     <label height="100%" x="0" y="0" I18N="In the ui settings" text="Camera"/>

data/skins/cartoon-coal/stkskin.xml

@@ -8,7 +8,7 @@ Cartoon Skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
 See SKIN_MAKING.md for more details on how the skin elements work.
 -->
 
-<skin name="Cartoon - Coal" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
+<skin base_theme_name="Cartoon" variant_name="Coal" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
 
 <!--
 Here you can configure advanced theming rules for this skin

data/skins/cartoon-desert/stkskin.xml

@@ -8,7 +8,7 @@ Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
 See SKIN_MAKING.md for more details on how the skin elements work.
 -->
 
-<skin name="Cartoon - Desert" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
+<skin base_theme_name="Cartoon" variant_name="Desert" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
 
 <!--
 Here you can configure advanced theming rules for this skin

data/skins/cartoon-forest/stkskin.xml

@@ -8,19 +8,10 @@ Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
 See SKIN_MAKING.md for more details on how the skin elements work.
 -->
 
-<skin name="Cartoon - Forest" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
+<skin base_theme_name="Cartoon" variant_name="Forest" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
 
 <!--
 Here you can configure advanced theming rules for this skin
-
-For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
-font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
-theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
-to specify all types of ttf.
-
-<advanced normal_ttf="xxx.ttf yyy.ttf"
-          digit_ttf="zzz.ttf"
-          color_emoji_ttf="www.ttf"/>
 -->
 
 <!--  Stateless -->

data/skins/cartoon-ocean/stkskin.xml

@@ -8,7 +8,7 @@ Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
 See SKIN_MAKING.md for more details on how the skin elements work.
 -->
 
-<skin name="Cartoon - Ocean" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
+<skin base_theme_name="Cartoon" variant_name="Ocean" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
 
 <!--
 Here you can configure advanced theming rules for this skin

data/skins/cartoon-ruby/stkskin.xml

@@ -8,7 +8,7 @@ Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
 See SKIN_MAKING.md for more details on how the skin elements work.
 -->
 
-<skin name="Cartoon - Ruby" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
+<skin base_theme_name="Cartoon" variant_name="Ruby" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
 
 <!--
 Here you can configure advanced theming rules for this skin

data/skins/cartoon/stkskin.xml

@@ -6,7 +6,7 @@ Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
 See SKIN_MAKING.md for more details on how the skin elements work.
 -->
 
-<skin name="Cartoon" author="LCP and QwertyChouskie">
+<skin base_theme_name="Cartoon" variant_name="Peach" author="LCP and QwertyChouskie">
 
 <!--
 Here you can configure advanced theming rules for this skin

data/skins/classic-coal/stkskin.xml

@@ -9,7 +9,7 @@ Except stars, by s@f
 See SKIN_MAKING.md for more details on how the skin elements work.
 -->
 
-<skin name="Coal" author="Alayan" base_theme="peach">
+<skin base_theme_name="Classic" variant_name="Coal" author="Alayan" base_theme="classic">
 
 <!--
 Here you can configure advanced theming rules for this skin

data/skins/classic-desert/stkskin.xml

@@ -0,0 +1,269 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+The Desert skin is based on the Peach skin
+Peach skin by Dakal, Marianne Gagnon released under creative-commons BY-SA 3.0+
+Except background.jpg, by elisee
+Except stars, by s@f
+
+See SKIN_MAKING.md for more details on how the skin elements work.
+-->
+
+<skin base_theme_name="Classic" variant_name="Desert" author="Dakal & Marianne Gagnon (Auria) (edited by CrystalDaEevee)" base_theme="classic">
+
+<!--
+Here you can configure advanced theming rules for this skin
+-->
+
+<!--  Stateless -->
+<element type="background" common="y" image="background.jpg" />
+
+<element type="bottom-bar" common="y" image="bottom_bar.png" />
+
+<element type="achievement-message" image="achievement.png"
+      left_border="128" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.3" vborder_out_portion="0"/>
+
+<element type="friend-message" image="friend.png"
+      left_border="128" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<element type="error-message" image="error.png"
+      left_border="128" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<element type="generic-message" image="generic.png"
+      left_border="128" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<element type="button" state="neutral" image="glassbutton.png"
+      left_border="13" right_border="13" top_border="13" bottom_border="13"
+      hborder_out_portion="0" vborder_out_portion="0"/>
+
+<element type="button" state="focused" image="glassbutton_focused.png"
+      left_border="13" right_border="13" top_border="13" bottom_border="13"
+      hborder_out_portion="0" vborder_out_portion="0"/>
+
+<element type="button" state="deactivated" common="y" image="glassbutton_deactivated.png"
+      left_border="13" right_border="13" top_border="13" bottom_border="13"
+      hborder_out_portion="0" vborder_out_portion="0"/>
+
+<!-- TODO : buttons could support 'pressed' state -->
+
+<element type="textbubble" state="neutral" image="textbubble.png"
+      left_border="13" right_border="13" top_border="13" bottom_border="13"
+      hborder_out_portion="0.7" vborder_out_portion="0.3" />
+
+<element type="textbubble" state="focused" image="textbubble2.png"
+      left_border="13" right_border="13" top_border="13" bottom_border="13"
+      hborder_out_portion="0.7" vborder_out_portion="0.3" />
+
+<element type="progress" state="fill" image="glasssgauge_fill.png"
+      left_border="10" right_border="10" top_border="10" bottom_border="10" />
+
+<element type="progress" state="neutral" common="y" image="progress_bg.png"
+      left_border="31" right_border="31" top_border="15" bottom_border="15" />
+      
+      
+<element type="tab" state="neutral" image="glasstab.png"
+      left_border="11" right_border="11" top_border="6" bottom_border="10"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
+      
+<element type="tab" state="focused" image="glasstab_focus.png"
+      left_border="11" right_border="11" top_border="6" bottom_border="10"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
+
+<element type="tab" state="down" image="glasstab_down.png"
+      left_border="11" right_border="11" top_border="6" bottom_border="10"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
+
+
+<element type="verticalTab" state="neutral" image="glasstab_vert.png"
+      left_border="10" right_border="10" top_border="10" bottom_border="10"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
+      
+<element type="verticalTab" state="focused" image="glasstab_vert_focus.png"
+      left_border="10" right_border="10" top_border="10" bottom_border="10"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
+
+<element type="verticalTab" state="down" image="glasstab_vert_down.png"
+      left_border="10" right_border="10" top_border="10" bottom_border="10"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
+
+<!-- Stateless -->
+<element type="squareFocusHaloBW" common="y" image="glass_square_focused_bw.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo1" common="y" image="glass_square_focused_yellow.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo2" common="y" image="glass_square_focused_cyan.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo3" common="y" image="glass_square_focused_green.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo4" common="y" image="glass_square_focused_red.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+<element type="squareFocusHalo5" common="y" image="glass_square_focused_pink.png"
+      left_border="6" right_border ="6" top_border="6" bottom_border="6"
+      hborder_out_portion="1.0" />
+      
+<!-- Stateless. No splitting into 9 areas is done; the image is just resized. -->
+<element type="selectionHalo" image="bubble.png"  />
+<element type="focusHalo" image="glass_iconhighlight_focus.png"  />
+
+<element type="spinner" state="neutral" common="y" image="glassspinner.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<element type="spinner" state="focused" image="glassspinner_focus.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<element type="spinner" state="deactivated" common="y" image="glassspinner_deactivated.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<!-- player name spinner color in multiplayer-->
+<element type="spinner1" state="neutral" common="y" image="glass_square_yellow.png"
+      left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+<element type="spinner2" state="neutral" common="y" image="glass_square_cyan.png"
+      left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+<element type="spinner3" state="neutral" common="y" image="glass_square_green.png"
+      left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+<element type="spinner4" state="neutral" common="y" image="glass_square_red.png"
+      left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+<element type="spinner5" state="neutral" common="y" image="glass_square_pink.png"
+      left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<!-- This one is a bit special. Only area(s) LEFT and/or RIGHT will be rendered. They will be overlaid
+     on top of the spinner's background -->
+<element type="spinner" state="down" image="glassspinner_down.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<!-- For checkboxes, no splitting into 9 areas is done; the image is just stretched -->
+<element type="checkbox" state="neutral+unchecked" image="glasscheckbox.png"/>
+<element type="checkbox" state="neutral+checked" image="glasscheckbox_checked.png"/>
+<element type="checkbox" state="focused+unchecked" image="glasscheckbox_focus.png"/>
+<element type="checkbox" state="focused+checked" image="glasscheckbox_checked_focus.png"/>
+<element type="checkbox" state="deactivated+unchecked" common="y" image="glasscheckbox_deactivated.png"/>
+<element type="checkbox" state="deactivated+checked" common="y" image="glasscheckbox_checked_deactivated.png"/>
+
+<!-- are always in neutral state for now. No splitting into 9 areas is done; the image is just stretched.
+     Note: the body of a guage is the same as for for spinners. -->
+<element type="gaugefill" image="glasssgauge_fill.png" />
+
+<!-- Lists are always in neutral state for now -->
+<element type="list" common="y" image="glass_section.png"
+    left_border="15" right_border="15" top_border="7" bottom_border="7"
+    hborder_out_portion="0.0" vborder_out_portion="0.0" />
+    
+<element type="listitem" state="focused" image="select.png"
+    left_border="0" right_border="0" top_border="0" bottom_border="0"
+    hborder_out_portion="0.0" vborder_out_portion="0.0" />
+    
+<!-- Scrollbars. Background and thumb have no state (always neutral state).
+     The buttons are the top and bottom arrows. Image must be top arrow, will
+     be mirrorred for bottom. Buttons can be in neutral or down state.
+     Advanced stretching is only used for the background and thumb. -->
+<element type="scrollbar_background"          common="y" image="scrollbar_bg.png"
+    left_border="7" right_border="7" top_border="7" bottom_border="7"
+    hborder_out_portion="0.0" vborder_out_portion="0.0" />
+<element type="scrollbar_thumb"               image="scrollbar_thumb.png"
+    left_border="7" right_border="7" top_border="7" bottom_border="7"
+    hborder_out_portion="-1.0" vborder_out_portion="-1.0" />
+<element type="scrollbar_button"              common="y" image="scrollbar_btn.png" />
+<element type="scrollbar_button" state="down" image="scrollbar_btn_down.png" />
+
+<element type="left_arrow"  state="neutral" common="y" image="left_arrow.png" />
+<element type="right_arrow" state="neutral" common="y" image="right_arrow.png" />
+<element type="left_arrow"  state="focus"   image="left_arrow_focus.png" />
+<element type="right_arrow" state="focus"   image="right_arrow_focus.png" />
+
+<element type="list_header"  state="neutral" common="y" image="table_header.png" />
+<element type="list_sort_up" state="neutral" common="y" image="list_sort_up.png" />
+<element type="list_sort_down" state="neutral" common="y" image="list_sort_down.png" />
+<element type="list_header"  state="down"    image="table_header_down.png" />
+
+<!-- Stateless -->
+<element type="section" common="y" image="glass_section.png"
+      left_border="15" right_border="15" top_border="15" bottom_border="15"
+      hborder_out_portion="0.0" vborder_out_portion="0.0" />
+
+<element type="section" state="selected" image="glassbutton_focused.png"
+      left_border="15" right_border="15" top_border="15" bottom_border="15"
+      hborder_out_portion="0.0" vborder_out_portion="0.0" />
+
+<!-- Stateless -->
+<element type="rounded_section" common="y" image="glass_rsection.png"
+      left_border="15" right_border="15" top_border="15" bottom_border="15"
+      hborder_out_portion="0.0" vborder_out_portion="0.0" />
+
+<!-- Stateless -->
+<element type="window" common="y" image="dialog.png"
+      left_border="7" right_border="7" top_border="7" bottom_border="7"
+      hborder_out_portion="1.0" vborder_out_portion="0.2" />
+
+<!-- Stateless -->
+<element type="tooltip" common="y" image="tooltip.png"
+    left_border="10" right_border="10" top_border="10" bottom_border="10"
+    hborder_out_portion="1.0" vborder_out_portion="1.0" />
+    
+<!--                   Colors                  -->
+<color type="text" state="neutral" r="0" g="0" b="0" />
+<color type="brighttext" state="neutral" r="255" g="255" b="0" />
+
+<!-- For highlighted items, e.g. in list -->
+<color type="text" state="focused" r="255" g="255" b="255" />
+
+<!-- Color used in the credits -->
+<color type="credits_text" state="neutral" r="65" g="65" b="0" />
+
+<!-- Color used for emphasized items in e.g. lists -->
+<color type="emphasis_text" state="neutral" r="0" g="0" b="180" />
+<color type="emphasis_text" state="focused" r="0" g="0" b="160" />
+
+<!-- Color used for red/blue items in list (e.g. player team color in networking) -->
+<color type="list_blue" state="neutral" r="0" g="0" b="255" />
+<color type="list_blue" state="focused" r="0" g="0" b="255" />
+<color type="list_red" state="neutral" r="255" g="0" b="0" />
+<color type="list_red" state="focused" r="255" g="0" b="0" />
+
+<!-- Color used to fade out background when a dialog is shown -->
+<color type="dialog_background" state="neutral" a="120" r="0" g="0" b="0" />
+
+<!-- Color used for tips in the loading screen -->
+<color type="tips_background" state="neutral" a="120" r="0" g="0" b="0" />
+
+<!-- Text field color -->
+<color type="text_field" state="background" a="255" r="200" g="200" b="200" />
+<color type="text_field" state="background_focused" a="255" r="236" g="236" b="181" />
+<color type="text_field" state="background_deactivated" a="255" r="200" g="200" b="200" />
+<color type="text_field" state="background_marked" a="128" r="90" g="90" b="25" />
+<color type="text_field" state="neutral" a="255" r="138" g="138" b="138" />
+<color type="text_field" state="focused" a="255" r="243" g="243" b="80" />
+<color type="text_field" state="deactivated" a="255" r="138" g="138" b="138" />
+
+<!-- Rating star image -->
+<element type="rating" state="neutral" common="y" image="rating_star.png" />
+
+<!-- Font color -->
+<color type="font" state="top" a="255" r="107" g="80" b="0" />
+<color type="font" state="bottom" a="255" r="255" g="255" b="15" />
+<color type="font" state="normal" a="255" r="210" g="210" b="50" />
+
+</skin>