Extract theme texture and gradient into CSS variables

TrestleAdmin · Jul 17, 2024 · bb9cf65 · bb9cf65
1 parent 62bc19e
commit bb9cf65
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/app/assets/bundle/trestle/admin.css b/app/assets/bundle/trestle/admin.css
diff --git a/frontend/css/components/_background.scss b/frontend/css/components/_background.scss
@@ -1,5 +1,5 @@
 %textured-bg {
-  background-image: url(../images/bright-squares.png), linear-gradient(rgba(white, 0.05), rgba(black, 0.05));
+  background-image: var(--theme-texture), var(--theme-gradient);
   background-repeat: repeat, no-repeat;
 }
 

diff --git a/frontend/css/core/_theme.scss b/frontend/css/core/_theme.scss
@@ -30,6 +30,9 @@ $theme-colors: (
     --#{$prefix}#{$color}-border-subtle: #{adjust-theme-hsl($color, $lightness: 60%)};
   }
 
+  --theme-texture: url(../images/bright-squares.png);
+  --theme-gradient: #{linear-gradient(rgba(white, 0.05), rgba(black, 0.05))};
+
   --#{$prefix}link-color: var(--primary);
   --#{$prefix}link-color-rgb: var(--primary-rgb);
   --#{$prefix}link-color-hsl: var(--primary-hsl);