background-check | Automatically switch to a darker or a lighter version | Frontend Framework library

I've set up the following fields in Page Templates:

• page_01_icon (String): will contain something like "icon-home"
• page_02_color (String): this will be the color of the icon or the background-color for the list element; depends on `page_color_background`, valid values are any css hex colors like "#a5011c"
• page_02_color_text (String): if set, the text color will be changed to this
• page_03_menu (Checkbox): checked == `page_icon` will be shown; else only the title of the page
• page_04_icon_only_menu (Checkbox): checked == only icon will be shown, title not (not needed for my question, I use this only in the main menu)
• page_05_color_background (Checkbox): if checked `page_color` is used as background color for this list element, if not the icon will get the colored with `page_color`; if `page_color` is not set at all neither icon or the background will get an color

I am very new to Typo3, but I actually get the above code work with the normal header menu on my page. It was a hard way there but that part works. For the header menu I could do it in FLUID, but this is now a lib and I need to do the same here but with TypoScript - no matter what I try I coudn't get it right. Most examples and how-tos rely on "if uid = 1..25" do something else. But I need multiple if elses for this. I think how I've done in FLUID is the right way, now trying to get the same logic to TypoScript... and ended up here.

Page Template Fields in Mask
This is how I added the fields in Mask

Content-Fields
Pages -> Edit -> Content-Fields (of Mask-Fields)

Main Menu Bar
This is what I've done with FLUID (the main menu bar). Icon-only + Icon and Title + Title only.

Spoken in simple PHP logic I would do the following (just to explain the main thinking / way I try in TypoScript):