In Chapter 7, "slide.less" has an undefined variable: @dark-color

[iremenerys]

In "Getting Started with AEM Sites Chapter 7 - Teaser and Carousel Components" there might be a problem with "slide.less" file. After I included it and deployed my project, all my styles in "main.less" disappeared from my pages on AEM instance, leaving raw contents with no style. I re-implemented "slide.less" from zero. One class at a time. And figured out that the problem is with the class named "cmp-teaser__title". When defining color for this class, a variable "@dark-color" is used. However when I checked "variables.less" file, I noticed that there is no variable matching "@dark-color". After I removed color property and deployed my project again, everything worked out fine. Thought you should know.

.cmp-teaser__title {
            font-family: @font-family-serif;
            width: 100%;
            color: @dark-color; //Here is the problematic statement
            bottom: 20px;
            font-size: @font-size-h1;
            max-width: @slide-content-width - 100;
            @media (max-width: @screen-small) {
                max-width: 100%;
            }
}

[godanny86]

@iremenerys thank you for raising this!