Add new variants of the cartoon skin

The variants use the same accent colors as variants of the standard skin : blue (ocean), green (forest), black (coal), pink (ruby), yellow (desert). Made by CrystalDaEevee with help from QwertyChouskie (base theme advice, original cartoon theme) and myself (forest screenshot, advice regarding screenshots, initiative to get it merged)

data/skins/cartoon-coal/licenses.txt

@@ -0,0 +1,30 @@
+Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
+Upstream-Name: SuperTuxKart
+Upstream-Contact:
+ Marianne Gagnon <auria.mg@gmail.com>
+ Jean-Manuel Clémençon <sam.un@protonmail.com>
+Source: https://supertuxkart.net
+
+Files:
+ glass_iconhighlight_focus.png
+ bubble.png
+Copyright: ???
+License: CC-BY-SA 3.0
+Comment: From peach skin
+
+Files:
+ src/Inter-UI-Black.ttf
+Copyright: Copyright 2018 The Inter UI project authors
+License: OFL 1.1 (SIL Open Font License, Version 1.1)
+Comment: Specifically using version 2.5 of the font, later versions have a different look
+
+Files:
+ src/NotoSans*
+Copyright: Copyright 2015-2016 Google Inc. All Rights Reserved.
+License: This Font Software is licensed under the SIL Open Font License, Version 1.1. This Font Software is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the SIL Open Font License for the specific language, permissions and limitations governing your use of this Font Software.
+Comment: Bold/Black versions of the language-specific fonts used in the other skins
+
+Files: *
+Copyright: Copyright 2018-2020 LCP and QwertyChouskie
+License: CC-BY-SA 4.0
+Comment: Original style, most icons, and some elements by LCP, skin finished by QwertyChouskie

data/skins/cartoon-coal/stkskin.xml

@@ -0,0 +1,376 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
+
+To make your own skin, I suggest simply duplicating this file and modifying it as needed.
+There are two types of images : some will be simply stretched as a whole, others will
+have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
+for each element type; though, as you will see below, for all "advanced stretching" images
+you can easily fake "simple stretch")
+
+All elements will have at least 2 properties :
+        type="X"                                sets what you're skinning with this entry
+        image="skinDirectory/imageName.png"     sets which image is used for this element
+
+Most elements also support states :
+        state="neutral"
+        state="focused"
+        state="down"
+You can thus give different looks for different states.  Not all widgets support all states,
+see entries and comments below to know what's supported.
+Note that checkboxes are an exception and have the following styles :
+    "neutral+unchecked"
+    "neutral+checked"
+    "focused+unchecked"
+    "focused+checked"
+    "deactivated+unchecked"
+    "deactivated+checked"
+
+"Advanced stretching" images are split this way :
+
+     +----+--------------------+----+
+     |    |                    |    |
+     +----+--------------------+----+
+     |    |                    |    |
+     |    |                    |    |     
+     |    |                    |    |     
+     +----+--------------------+----+
+     |    |                    |    | 
+     +----+--------------------+----+
+     
+The center border will be stretched in all directions. The 4 corners will not stretch at all.
+Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
+Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
+the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
+
+In some cases, you may not want vertical stretching to occur (like if the left and right sides
+of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
+parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
+their aspect ratio.
+
+Some components may fill the full inner area with stuff; others will only take a smaller
+area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
+that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
+area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
+the 'v' one is for vertical borders.
+
+Finnally : the image is split, as shown above, into 9 areas. In some cases, you may not want
+all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
+and explicitely specify which parts you want to see. The 4 corner areas are only visible
+when the border that intersect at this corner are enabled.
+
+When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
+
+Any information not specified in this theme will be inherited from the specified base theme,
+if any.  To specify a base theme, add base_theme="themename" to the <skin> tag.
+
+To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
+STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
+-->
+
+<skin name="Cartoon - Coal" 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 -->
+<element type="background" image="background.jpg" />
+
+<element type="bottom-bar" image="bottom_bar.png" />
+
+<element type="achievement-message" image="achievement.png"
+      left_border="130" 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="130" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<!-- Provided by base theme
+<element type="error-message" image="error.png"
+      left_border="130" 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="130" 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="button.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>
+
+<element type="button" state="focused" image="button_focused.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>
+
+<!-- Provided by base theme
+<element type="button" state="deactivated" image="button_inactive.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>-->
+
+<!-- TODO : buttons could support 'pressed' state -->
+
+<!-- Provided by base theme
+<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="gauge_fill.png"
+      left_border="7" right_border="7" top_border="7" bottom_border="7"
+      preserve_h_aspect_ratios="false" />
+
+<!-- Provided by base theme
+<element type="progress" state="neutral" image="section.png"
+      left_border="7" right_border="7" top_border="7" bottom_border="7"
+      preserve_h_aspect_ratios="false" />-->
+      
+      
+<element type="tab" state="neutral" image="tab.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+      
+<element type="tab" state="focused" image="tab_focus.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+
+<element type="tab" state="down" image="tab.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+
+
+<element type="verticalTab" state="neutral" image="tab_vert.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+      
+<element type="verticalTab" state="focused" image="tab_vert_focus.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+
+<element type="verticalTab" state="down" image="tab_vert.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<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_red.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_yellow.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" image="spinner.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="spinner_focus.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<!-- Provided by base theme
+<element type="spinner" state="deactivated" image="spinner_deactivated.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />-->
+
+<!-- color spinner in kart color selection -->
+<!-- Provided by base theme
+<element type="spinner_rainbow" state="neutral" image="spinner_rainbow.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>
+
+<element type="spinner_rainbow" state="focused" image="spinner_rainbow_focus.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>
+
+<element type="spinner_rainbow" state="deactivated" image="spinner_rainbow_deactivated.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>-->
+
+<!-- player name spinner color in multiplayer-->
+<!-- Provided by base theme
+<element type="spinner1" state="neutral" image="spinner_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="spinner2" state="neutral" image="spinner_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" image="spinner_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" image="spinner_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="spinner5" state="neutral" image="spinner_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="spinner_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="checkbox.png"/>
+<element type="checkbox" state="neutral+checked" image="checkbox_checked.png"/>
+<element type="checkbox" state="focused+unchecked" image="checkbox_focus.png"/>
+<element type="checkbox" state="focused+checked" image="checkbox_checked_focus.png"/>
+<!-- Provided by base theme
+<element type="checkbox" state="deactivated+unchecked" image="checkbox_deactivated.png"/>
+<element type="checkbox" state="deactivated+checked" image="checkbox_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="spinner_fill.png" />
+<!-- used for the color slider. -->
+<!-- Provided by base theme
+<element type="gaugefillrainbow" common="y" image="gauge_fill_rainbow.png"/>-->
+
+<!-- Lists are always in neutral state for now -->
+<!-- Provided by base theme
+<element type="list" image="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. -->
+<!-- Provided by base theme
+<element type="scrollbar_background"          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="0.0" vborder_out_portion="0.0" />
+<element type="scrollbar_button"              image="scrollbar_button.png" />
+<element type="scrollbar_button" state="down" image="scrollbar_button.png" />
+
+<element type="left_arrow"  state="neutral" image="left_arrow.png" />
+<element type="right_arrow" state="neutral" 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" />
+
+<!-- Provided by base theme
+<element type="list_header"  state="neutral" image="table_header.png" />-->
+<element type="list_sort_up" state="neutral" image="up_arrow.png" />
+<element type="list_sort_down" state="neutral" image="down_arrow.png" />
+<element type="list_header"  state="down"    image="table_header_down.png" />
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="section" image="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="section.png"
+      left_border="15" right_border="15" top_border="15" bottom_border="15"
+      hborder_out_portion="0.0" vborder_out_portion="0.0" />-->
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="rounded_section" image="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 -->
+<!-- Provided by base theme
+<element type="window" image="dialog.png"
+      left_border="32" right_border="32" top_border="32" bottom_border="32"
+      hborder_out_portion="1.0" vborder_out_portion="1.0" />-->
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="tooltip" image="tooltip.png"
+    left_border="10" right_border="10" top_border="10" bottom_border="10"
+    hborder_out_portion="1.5" vborder_out_portion="1.0" />-->
+    
+<!--                   Colors                  -->
+<color type="text" state="neutral" r="220" g="220" b="220" />
+<color type="brighttext" state="neutral" r="240" g="240" b="240" />
+
+<!-- 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="220" g="220" b="220" />
+
+<!-- Color used for emphasized items in e.g. lists -->
+<color type="emphasis_text" state="neutral" r="230" g="210" b="50" />
+<color type="emphasis_text" state="focused" r="255" g="226" b="56" />
+
+<!-- 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="180" />
+<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="35" g="35" b="35" />
+<color type="text_field" state="background_focused" a="255" r="15" g="15" b="15" />
+<color type="text_field" state="background_deactivated" a="255" r="90" g="90" b="90" />
+<color type="text_field" state="background_marked" a="128" r="220" g="220" b="220" />
+<color type="text_field" state="neutral" a="255" r="35" g="35" b="35" />
+<color type="text_field" state="focused" a="255" r="15" g="15" b="15" />
+<color type="text_field" state="deactivated" a="255" r="90" g="90" b="90" />
+
+<!-- Rating star image -->
+<!-- Provided by base theme
+<element type="rating" state="neutral" image="rating_star.png" />-->
+
+<!-- Font color -->
+<color type="font" state="top" a="255" r="140" g="140" b="140" />
+<color type="font" state="bottom" a="255" r="235" g="235" b="235" />
+<color type="font" state="normal" a="255" r="220" g="220" b="220" />
+
+</skin>

data/skins/cartoon-desert/licenses.txt

@@ -0,0 +1,30 @@
+Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
+Upstream-Name: SuperTuxKart
+Upstream-Contact:
+ Marianne Gagnon <auria.mg@gmail.com>
+ Jean-Manuel Clémençon <sam.un@protonmail.com>
+Source: https://supertuxkart.net
+
+Files:
+ glass_iconhighlight_focus.png
+ bubble.png
+Copyright: 2010 Dakal and/or Marianne Gagnon (Auria)
+License: CC-BY-SA 3.0
+Comment: From peach skin, first found in commit 5cddb8ffb61001407ce97ee5a8c63faa18a08c2c.  It is unclear which author made these particular files.
+
+Files:
+ src/Inter-UI-Black.ttf
+Copyright: Copyright 2018 The Inter UI project authors
+License: OFL 1.1 (SIL Open Font License, Version 1.1)
+Comment: Specifically using version 2.5 of the font, later versions have a different look
+
+Files:
+ src/NotoSans*
+Copyright: Copyright 2015-2016 Google Inc. All Rights Reserved.
+License: This Font Software is licensed under the SIL Open Font License, Version 1.1. This Font Software is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the SIL Open Font License for the specific language, permissions and limitations governing your use of this Font Software.
+Comment: Bold/Black versions of the language-specific fonts used in the other skins
+
+Files: *
+Copyright: Copyright 2018-2020 LCP and QwertyChouskie
+License: CC-BY-SA 4.0
+Comment: Original style, most icons, and some elements by LCP, skin finished by QwertyChouskie

data/skins/cartoon-desert/readme.txt

@@ -0,0 +1,10 @@
+# This color variation was made using the following commands:
+
+for i in *.png ; do convert "$i" -colorspace gray -fill "#00ff00" -tint 100 "$i" ; done
+for i in *focus.png ; do convert "$i" -colorspace gray -fill "#00dd00" -tint 100 "$i" ; done
+for i in *focused.png ; do convert "$i" -colorspace gray -fill "#00dd00" -tint 100 "$i" ; done
+convert bottom_bar.png -colorspace gray -fill "#006900" -tint 100 bottom_bar.png
+
+# table_header_down manually re-colored
+# gauge_fill and spinner_fill were manually colored to #77ff77
+# achievement and friend were manually re-created from the source SVG with the background color changed.

data/skins/cartoon-desert/stkskin.xml

@@ -0,0 +1,376 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
+
+To make your own skin, I suggest simply duplicating this file and modifying it as needed.
+There are two types of images : some will be simply stretched as a whole, others will
+have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
+for each element type; though, as you will see below, for all "advanced stretching" images
+you can easily fake "simple stretch")
+
+All elements will have at least 2 properties :
+        type="X"                                sets what you're skinning with this entry
+        image="skinDirectory/imageName.png"     sets which image is used for this element
+
+Most elements also support states :
+        state="neutral"
+        state="focused"
+        state="down"
+You can thus give different looks for different states.  Not all widgets support all states,
+see entries and comments below to know what's supported.
+Note that checkboxes are an exception and have the following styles :
+    "neutral+unchecked"
+    "neutral+checked"
+    "focused+unchecked"
+    "focused+checked"
+    "deactivated+unchecked"
+    "deactivated+checked"
+
+"Advanced stretching" images are split this way :
+
+     +----+--------------------+----+
+     |    |                    |    |
+     +----+--------------------+----+
+     |    |                    |    |
+     |    |                    |    |     
+     |    |                    |    |     
+     +----+--------------------+----+
+     |    |                    |    | 
+     +----+--------------------+----+
+     
+The center border will be stretched in all directions. The 4 corners will not stretch at all.
+Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
+Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
+the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
+
+In some cases, you may not want vertical stretching to occur (like if the left and right sides
+of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
+parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
+their aspect ratio.
+
+Some components may fill the full inner area with stuff; others will only take a smaller
+area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
+that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
+area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
+the 'v' one is for vertical borders.
+
+Finnally : the image is split, as shown above, into 9 areas. In some cases, you may not want
+all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
+and explicitely specify which parts you want to see. The 4 corner areas are only visible
+when the border that intersect at this corner are enabled.
+
+When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
+
+Any information not specified in this theme will be inherited from the specified base theme,
+if any.  To specify a base theme, add base_theme="themename" to the <skin> tag.
+
+To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
+STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
+-->
+
+<skin name="Cartoon - Desert" 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 -->
+<element type="background" image="background.jpg" />
+
+<element type="bottom-bar" image="bottom_bar.png" />
+
+<element type="achievement-message" image="achievement.png"
+      left_border="130" 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="130" right_border="13" top_border="13" bottom_border="13"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
+
+<!-- Provided by base theme
+<element type="error-message" image="error.png"
+      left_border="130" 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="130" 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="button.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>
+
+<element type="button" state="focused" image="button_focused.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>
+
+<!-- Provided by base theme
+<element type="button" state="deactivated" image="button_inactive.png"
+      left_border="40" right_border="40" top_border="12" bottom_border="12"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0" vborder_out_portion="0"
+      h_inner_padding="0.15" v_inner_padding="0.35"/>-->
+
+<!-- TODO : buttons could support 'pressed' state -->
+
+<!-- Provided by base theme
+<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="gauge_fill.png"
+      left_border="7" right_border="7" top_border="7" bottom_border="7"
+      preserve_h_aspect_ratios="false" />
+
+<!-- Provided by base theme
+<element type="progress" state="neutral" image="section.png"
+      left_border="7" right_border="7" top_border="7" bottom_border="7"
+      preserve_h_aspect_ratios="false" />-->
+      
+      
+<element type="tab" state="neutral" image="tab.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+      
+<element type="tab" state="focused" image="tab_focus.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+
+<element type="tab" state="down" image="tab.png"
+      left_border="44" right_border="44" top_border="28" bottom_border="28"
+      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-12" h_margin="0" v_margin="0" />
+
+
+<element type="verticalTab" state="neutral" image="tab_vert.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+      
+<element type="verticalTab" state="focused" image="tab_vert_focus.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+
+<element type="verticalTab" state="down" image="tab_vert.png"
+      left_border="45" right_border="45" top_border="28" bottom_border="28"
+      hborder_out_portion="0.0" vborder_out_portion="0.0"
+      h_inner_padding="0" v_inner_padding="-8" h_margin="0" v_margin="4" />
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<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_red.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_yellow.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" image="spinner.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="spinner_focus.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
+
+<!-- Provided by base theme
+<element type="spinner" state="deactivated" image="spinner_deactivated.png"
+    left_border="110" right_border="110" top_border="0" bottom_border="36"
+    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />-->
+
+<!-- color spinner in kart color selection -->
+<!-- Provided by base theme
+<element type="spinner_rainbow" state="neutral" image="spinner_rainbow.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>
+
+<element type="spinner_rainbow" state="focused" image="spinner_rainbow_focus.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>
+
+<element type="spinner_rainbow" state="deactivated" image="spinner_rainbow_deactivated.png"
+      left_border="104" right_border="104" top_border="0" bottom_border="36"
+      preserve_h_aspect_ratios="true" hborder_out_portion="0.0"/>-->
+
+<!-- player name spinner color in multiplayer-->
+<!-- Provided by base theme
+<element type="spinner1" state="neutral" image="spinner_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="spinner2" state="neutral" image="spinner_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" image="spinner_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" image="spinner_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="spinner5" state="neutral" image="spinner_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="spinner_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="checkbox.png"/>
+<element type="checkbox" state="neutral+checked" image="checkbox_checked.png"/>
+<element type="checkbox" state="focused+unchecked" image="checkbox_focus.png"/>
+<element type="checkbox" state="focused+checked" image="checkbox_checked_focus.png"/>
+<!-- Provided by base theme
+<element type="checkbox" state="deactivated+unchecked" image="checkbox_deactivated.png"/>
+<element type="checkbox" state="deactivated+checked" image="checkbox_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="spinner_fill.png" />
+<!-- used for the color slider. -->
+<!-- Provided by base theme
+<element type="gaugefillrainbow" common="y" image="gauge_fill_rainbow.png"/>-->
+
+<!-- Lists are always in neutral state for now -->
+<!-- Provided by base theme
+<element type="list" image="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. -->
+<!-- Provided by base theme
+<element type="scrollbar_background"          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="0.0" vborder_out_portion="0.0" />
+<element type="scrollbar_button"              image="scrollbar_button.png" />
+<element type="scrollbar_button" state="down" image="scrollbar_button.png" />
+
+<element type="left_arrow"  state="neutral" image="left_arrow.png" />
+<element type="right_arrow" state="neutral" 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" />
+
+<!-- Provided by base theme
+<element type="list_header"  state="neutral" image="table_header.png" />-->
+<element type="list_sort_up" state="neutral" image="up_arrow.png" />
+<element type="list_sort_down" state="neutral" image="down_arrow.png" />
+<element type="list_header"  state="down"    image="table_header_down.png" />
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="section" image="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="section.png"
+      left_border="15" right_border="15" top_border="15" bottom_border="15"
+      hborder_out_portion="0.0" vborder_out_portion="0.0" />-->
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="rounded_section" image="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 -->
+<!-- Provided by base theme
+<element type="window" image="dialog.png"
+      left_border="32" right_border="32" top_border="32" bottom_border="32"
+      hborder_out_portion="1.0" vborder_out_portion="1.0" />-->
+
+<!-- Stateless -->
+<!-- Provided by base theme
+<element type="tooltip" image="tooltip.png"
+    left_border="10" right_border="10" top_border="10" bottom_border="10"
+    hborder_out_portion="1.5" 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 -->
+<!-- Provided by base theme
+<element type="rating" state="neutral" 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>

data/skins/cartoon-forest/licenses.txt

@@ -0,0 +1,30 @@
+Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
+Upstream-Name: SuperTuxKart
+Upstream-Contact:
+ Marianne Gagnon <auria.mg@gmail.com>
+ Jean-Manuel Clémençon <sam.un@protonmail.com>
+Source: https://supertuxkart.net
+
+Files:
+ glass_iconhighlight_focus.png
+ bubble.png
+Copyright: 2010 Dakal and/or Marianne Gagnon (Auria)
+License: CC-BY-SA 3.0
+Comment: From peach skin, first found in commit 5cddb8ffb61001407ce97ee5a8c63faa18a08c2c.  It is unclear which author made these particular files.
+
+Files:
+ src/Inter-UI-Black.ttf
+Copyright: Copyright 2018 The Inter UI project authors
+License: OFL 1.1 (SIL Open Font License, Version 1.1)
+Comment: Specifically using version 2.5 of the font, later versions have a different look
+
+Files:
+ src/NotoSans*
+Copyright: Copyright 2015-2016 Google Inc. All Rights Reserved.
+License: This Font Software is licensed under the SIL Open Font License, Version 1.1. This Font Software is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the SIL Open Font License for the specific language, permissions and limitations governing your use of this Font Software.
+Comment: Bold/Black versions of the language-specific fonts used in the other skins
+
+Files: *
+Copyright: Copyright 2018-2020 LCP and QwertyChouskie
+License: CC-BY-SA 4.0
+Comment: Original style, most icons, and some elements by LCP, skin finished by QwertyChouskie

data/skins/cartoon-forest/readme.txt

@@ -0,0 +1,10 @@
+# This color variation was made using the following commands:
+
+for i in *.png ; do convert "$i" -colorspace gray -fill "#00ff00" -tint 100 "$i" ; done
+for i in *focus.png ; do convert "$i" -colorspace gray -fill "#00dd00" -tint 100 "$i" ; done
+for i in *focused.png ; do convert "$i" -colorspace gray -fill "#00dd00" -tint 100 "$i" ; done
+convert bottom_bar.png -colorspace gray -fill "#006900" -tint 100 bottom_bar.png
+
+# table_header_down manually re-colored
+# gauge_fill and spinner_fill were manually colored to #77ff77
+# achievement and friend were manually re-created from the source SVG with the background color changed.