@mpmaan, thank you for taking the time to fix this issue.

Going to ask for some help from @moT01 since he helped create these challenges. I have a few questions. About the penguin class, here's how it stands now:

.penguin {",
  --penguin-skin: black;",
  --penguin-belly: gray;",
  --penguin-beak: yellow;",
  position: relative;",
  margin: auto;",
  display: block;",
  margin-top: 5%;",
  width: 300px;",
  height: 300px;",
}",

First, I'm guessing that penguin should be misspelled here to trigger the fallback classes bellow, so the class should read:

.penguin {",
  --pengiun-skin: black;",
  --pengiun-belly: gray;",
  --pengiun-beak: yellow;",
  position: relative;",
  margin: auto;",
  display: block;",
  margin-top: 5%;",
  width: 300px;",
  height: 300px;",
}",

Is that right? Then the penguin image in the preview is rendered like so:

If so, then the default editor seed for penguin-top and penguin bottom should be:

  .penguin-top {
    top: 10%;
    left: 25%;
  
    /* change code below */
    background: var(--penguin-skin);
    /* change code above */
  
    width: 50%;
    height: 45%;
    border-radius: 70% 70% 60% 60%;
  }
  
  .penguin-bottom {
    top: 40%;
    left: 23.5%;
  
    /* change code below */
    background: var(--penguin-skin);
    /* change code above */
  
    width: 53%;
    height: 45%;
    border-radius: 70% 70% 100% 100%;
  }

Then the user just needs to change the CSS variables to var(--penguin-skin, black) in the background properties of both classes, right? Please let me know if I got anything wrong.

@scissorsneedfoodtoo my intention was to do the opposite (sort of) of what you are saying - you put the typo in the variable declaration, I originally put the typo in where the variable was used (.penguin-top/.penguin-bottom) - the way it stands on the live site is how it was intended (with the typo where the variables were used)...

  .penguin {
    --penguin-skin: gray;
    --penguin-belly: white;
    --penguin-beak: orange;
  }
  
  .penguin-top {
    /* change code below */
    background: var(--pengiun-skin, black);
    /* change code above */
  }
  
  .penguin-bottom {
    /* change code below */
    background: var(--pengiun-skin, black);
    /* change code above */
  }

either way would work

@moT01 The second way proposed by @scissorsneedfoodtoo will also change the color of beak and the feet because of the typo --pengiun-beak: yellow which is not required.

@moT01, I'm sorry, I misunderstood. I think I get it now.

So everything up on the live site for the .penguin class is correct now, with penguin spelled correctly for all the CSS variables.

However, in .penguin-top and .penguin-bottom where the variables are used should be misspelled "pengiun-skin". So the user should not correct the spelling but set the color to black in both the top and bottom classes for the tests to pass: background: var(--pengiun-skin, black);.

Is that right?

@scissorsneedfoodtoo yes

Alright, thank you for bearing with me so far.

One last question, is the preview image also correct? Just want to make sure the CSS variables for the left and right hand weren't also purposefully misspelled and accidentally corrected later:

@scissorsneedfoodtoo yes, the preview is correct - and no, they werent accidentally corrected later

Thank you for confirming that and all of your support, @moT01.

Everything LGTM! Thank you for your contribution, @mpmaan, and also for your patience and help with all of this.

🎉 This PR is included in version 3.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀