frontend/css/components/_background.scss in trestle-0.9.8 vs frontend/css/components/_background.scss in trestle-0.10.0.pre

@@ -1,47 +1,19 @@
 %textured-bg {
   background-image: url(../images/bright-squares.png), linear-gradient(rgba(white, 0.05), rgba(black, 0.05));
   background-repeat: repeat, no-repeat;
 }
 
+@each $variation, $lightness in $theme-bg-variations {
+  .theme-bg-#{$variation} {
+    @extend %textured-bg;
+    background-color: adjust-theme-hsl(primary, $lightness: $lightness);
+  }
+}
 
 .theme-bg {
-  @extend %textured-bg;
-  background-color: $theme-bg;
+  @extend .theme-bg-default;
 }
-
-
-.theme-bg-dark {
-  @extend %textured-bg;
-  background-color: darken($theme-bg, $theme-color-interval);
-}
-
-.theme-bg-darker {
-  @extend %textured-bg;
-  background-color: darken($theme-bg, $theme-color-interval * 2);
-}
-
-.theme-bg-darkest {
-  @extend %textured-bg;
-  background-color: darken($theme-bg, $theme-color-interval * 3);
-}
-
-
-.theme-bg-light {
-  @extend %textured-bg;
-  background-color: lighten($theme-bg, $theme-color-interval);
-}
-
-.theme-bg-lighter {
-  @extend %textured-bg;
-  background-color: lighten($theme-bg, $theme-color-interval * 2);
-}
-
-.theme-bg-lightest {
-  @extend %textured-bg;
-  background-color: lighten($theme-bg, $theme-color-interval * 3);
-}
-
 
 .error-bg {
   @extend %textured-bg;
   background-color: $error-bg;
 }