diff --git a/dist/css/parvus.css b/dist/css/parvus.css
index b27c3ca..ff87f3c 100644
--- a/dist/css/parvus.css
+++ b/dist/css/parvus.css
@@ -1,20 +1,20 @@
 :root {
   --parvus-transition-duration: 0.3s;
   --parvus-transition-timing-function: cubic-bezier(0.62, 0.16, 0.13, 1.01);
-  --parvus-background-color: hsl(23deg 44% 96%);
-  --parvus-color: hsl(228deg 24% 23%);
-  --parvus-btn-background-color: hsl(228deg 24% 23%);
-  --parvus-btn-color: hsl(0deg 0% 100%);
-  --parvus-btn-hover-background-color: hsl(229deg 24% 33%);
-  --parvus-btn-hover-color: hsl(0deg 0% 100%);
-  --parvus-btn-disabled-background-color: hsla(229deg 24% 33% / 60%);
-  --parvus-btn-disabled-color: hsl(0deg 0% 100%);
+  --parvus-background-color: hsl(23, 44%, 96%);
+  --parvus-color: hsl(228, 24%, 23%);
+  --parvus-btn-background-color: hsl(228, 24%, 23%);
+  --parvus-btn-color: hsl(0, 0%, 100%);
+  --parvus-btn-hover-background-color: hsl(229, 24%, 33%);
+  --parvus-btn-hover-color: hsl(0, 0%, 100%);
+  --parvus-btn-disabled-background-color: hsla(229, 24%, 33%, 0.6);
+  --parvus-btn-disabled-color: hsl(0, 0%, 100%);
   --parvus-caption-background-color: transparent;
-  --parvus-caption-color: hsl(228deg 24% 23%);
-  --parvus-loading-error-background-color: hsl(0deg 0% 100%);
-  --parvus-loading-error-color: hsl(228deg 24% 23%);
-  --parvus-loader-background-color: hsl(23deg 40% 96%);
-  --parvus-loader-color: hsl(228deg 24% 23%);
+  --parvus-caption-color: hsl(228, 24%, 23%);
+  --parvus-loading-error-background-color: hsl(0, 0%, 100%);
+  --parvus-loading-error-color: hsl(228, 24%, 23%);
+  --parvus-loader-background-color: hsl(23, 40%, 96%);
+  --parvus-loader-color: hsl(228, 24%, 23%);
 }
 
 ::view-transition-group(lightboximage) {
diff --git a/src/scss/parvus.scss b/src/scss/parvus.scss
index c029d1f..7cfcf20 100644
--- a/src/scss/parvus.scss
+++ b/src/scss/parvus.scss
@@ -1,31 +1,48 @@
+$transition-duration: 0.3s !default;
+$transition-timing-function: cubic-bezier(0.62, 0.16, 0.13, 1.01) !default;
+$background-color: hsl(23deg 44% 96%) !default;
+$color: hsl(228deg 24% 23%) !default;
+$btn-background-color: hsl(228deg 24% 23%) !default;
+$btn-color: hsl(0deg 0% 100%) !default;
+$btn-hover-background-color: hsl(229deg 24% 33%) !default;
+$btn-hover-color: hsl(0deg 0% 100%) !default;
+$btn-disabled-background-color: hsla(229deg 24% 33% / 60%) !default;
+$btn-disabled-color: hsl(0deg 0% 100%) !default;
+$caption-background-color: transparent !default;
+$caption-color: hsl(228deg 24% 23%) !default;
+$loading-error-background-color: hsl(0deg 0% 100%) !default;
+$loading-error-color: hsl(228deg 24% 23%) !default;
+$loader-background-color: hsl(23deg 40% 96%) !default;
+$loader-color: hsl(228deg 24% 23%) !default;
+
 :root {
   // Transition
-  --parvus-transition-duration: 0.3s;
-  --parvus-transition-timing-function: cubic-bezier(0.62, 0.16, 0.13, 1.01);
+  --parvus-transition-duration: #{$transition-duration};
+  --parvus-transition-timing-function: #{$transition-timing-function};
 
   // Overlay
-  --parvus-background-color: hsl(23deg 44% 96%);
-  --parvus-color: hsl(228deg 24% 23%);
+  --parvus-background-color: #{$background-color};
+  --parvus-color: #{$color};
 
   // Button
-  --parvus-btn-background-color: hsl(228deg 24% 23%);
-  --parvus-btn-color:  hsl(0deg 0% 100%);
-  --parvus-btn-hover-background-color: hsl(229deg 24% 33%);
-  --parvus-btn-hover-color: hsl(0deg 0% 100%);
-  --parvus-btn-disabled-background-color: hsla(229deg 24% 33% / 60%);
-  --parvus-btn-disabled-color: hsl(0deg 0% 100%);
+  --parvus-btn-background-color: #{$btn-background-color};
+  --parvus-btn-color: #{$btn-color};
+  --parvus-btn-hover-background-color: #{$btn-hover-background-color};
+  --parvus-btn-hover-color: #{$btn-hover-color};
+  --parvus-btn-disabled-background-color: #{$btn-disabled-background-color};
+  --parvus-btn-disabled-color: #{$btn-disabled-color};
 
   // Caption
-  --parvus-caption-background-color: transparent;
-  --parvus-caption-color: hsl(228deg 24% 23%);
+  --parvus-caption-background-color: #{$caption-background-color};
+  --parvus-caption-color: #{$caption-color};
 
   // Loading error
-  --parvus-loading-error-background-color: hsl(0deg 0% 100%);
-  --parvus-loading-error-color: hsl(228deg 24% 23%);
+  --parvus-loading-error-background-color: #{$loading-error-background-color};
+  --parvus-loading-error-color: #{$loading-error-color};
 
   // Loader
-  --parvus-loader-background-color: hsl(23deg 40% 96%);
-  --parvus-loader-color: hsl(228deg 24% 23%);
+  --parvus-loader-background-color: #{$loader-background-color};
+  --parvus-loader-color: #{$loader-color};
 }
 
 ::view-transition-group(lightboximage) {