From e4c4fa1c3dd30a41abac7044f62880176fbf6bd6 Mon Sep 17 00:00:00 2001
From: Igor Danchenko <64441155+igordanchenko@users.noreply.github.com>
Date: Thu, 7 Nov 2024 13:50:51 -0500
Subject: [PATCH] refactor: migrate scss modules

---
 src/plugins/captions/captions.scss     |  8 ++--
 src/plugins/counter/counter.scss       | 14 +++----
 src/plugins/thumbnails/thumbnails.scss | 32 +++++++--------
 src/styles.scss                        | 54 +++++++++++++-------------
 4 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/plugins/captions/captions.scss b/src/plugins/captions/captions.scss
index 3ae764e..e75f596 100644
--- a/src/plugins/captions/captions.scss
+++ b/src/plugins/captions/captions.scss
@@ -1,7 +1,7 @@
-@import "../../common";
+@use "../../common";
 
 @function localVar($key, $default) {
-  @return globalVar(slide_ + $key, $default);
+  @return common.globalVar(slide_ + $key, $default);
 }
 
 .yarl__slide {
@@ -18,7 +18,7 @@
   }
 
   &_title {
-    color: localVar(title_color, $color-white);
+    color: localVar(title_color, common.$color-white);
     font-size: localVar(title_font_size, 125%);
     font-weight: localVar(title_font_weight, bolder);
     max-width: calc(100% - var(--yarl__toolbar_width, 0px));
@@ -38,7 +38,7 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: localVar(description_max_lines, 3);
     text-align: localVar(description_text_align, start);
-    color: localVar(description_color, $color-white);
+    color: localVar(description_color, common.$color-white);
 
     &_container {
       bottom: localVar(description_container_bottom, 0);
diff --git a/src/plugins/counter/counter.scss b/src/plugins/counter/counter.scss
index eb8cf17..412ecbb 100644
--- a/src/plugins/counter/counter.scss
+++ b/src/plugins/counter/counter.scss
@@ -1,7 +1,7 @@
-@import "../../common";
+@use "../../common";
 
 @function localVar($key, $default) {
-  @return globalVar(counter_ + $key, $default);
+  @return common.globalVar(counter_ + $key, $default);
 }
 
 .yarl__counter {
@@ -10,10 +10,10 @@
   left: localVar(left, 0);
   bottom: localVar(bottom, unset);
   right: localVar(right, unset);
-  color: localVar(color, $color-button);
-  filter: localVar(filter, $filter-drop-shadow);
-  margin: localVar(margin, globalVar(toolbar_padding, $toolbar-padding));
-  padding: localVar(padding, globalVar(button_padding, $icon-button-padding));
-  line-height: localVar(line_height, globalVar(icon_size, $icon-size));
+  color: localVar(color, common.$color-button);
+  filter: localVar(filter, common.$filter-drop-shadow);
+  margin: localVar(margin, common.globalVar(toolbar_padding, common.$toolbar-padding));
+  padding: localVar(padding, common.globalVar(button_padding, common.$icon-button-padding));
+  line-height: localVar(line_height, common.globalVar(icon_size, common.$icon-size));
   user-select: localVar(user_select, none);
 }
diff --git a/src/plugins/thumbnails/thumbnails.scss b/src/plugins/thumbnails/thumbnails.scss
index f12256b..2f7538b 100644
--- a/src/plugins/thumbnails/thumbnails.scss
+++ b/src/plugins/thumbnails/thumbnails.scss
@@ -1,12 +1,12 @@
-@import "../../common";
+@use "../../common";
 
 $vignette-size: 12%;
 $thumbnail-focus-box-shadow:
-  $color-black 0 0 0 2px,
-  $color-button 0 0 0 4px;
+  common.$color-black 0 0 0 2px,
+  common.$color-button 0 0 0 4px;
 
 @function localVar($key, $default) {
-  @return globalVar(thumbnails_ + $key, $default);
+  @return common.globalVar(thumbnails_ + $key, $default);
 }
 
 .yarl__thumbnails {
@@ -30,7 +30,7 @@ $thumbnail-focus-box-shadow:
 
   &_container {
     flex: 0 0 auto;
-    background-color: localVar(container_background_color, $color-backdrop);
+    background-color: localVar(container_background_color, common.$color-backdrop);
     padding: localVar(container_padding, 16px);
     position: relative;
     overflow: hidden;
@@ -63,9 +63,9 @@ $thumbnail-focus-box-shadow:
     right: 0;
     background: linear-gradient(
       to right,
-      $color-backdrop 0px,
+      common.$color-backdrop 0px,
       transparent localVar(vignette_size, $vignette-size) calc(100% - localVar(vignette_size, $vignette-size)),
-      $color-backdrop 100%
+      common.$color-backdrop 100%
     );
   }
 
@@ -76,9 +76,9 @@ $thumbnail-focus-box-shadow:
     bottom: 0;
     background: linear-gradient(
       to bottom,
-      $color-backdrop 0px,
+      common.$color-backdrop 0px,
       transparent localVar(vignette_size, $vignette-size) calc(100% - localVar(vignette_size, $vignette-size)),
-      $color-backdrop 100%
+      common.$color-backdrop 100%
     );
   }
 
@@ -91,10 +91,10 @@ $thumbnail-focus-box-shadow:
     flex: 0 0 auto;
     cursor: pointer;
     appearance: none;
-    background: localVar(thumbnail_background, $color-black);
+    background: localVar(thumbnail_background, common.$color-black);
     border-width: localVar(thumbnail_border, 1px);
     border-style: localVar(thumbnail_border_style, solid);
-    border-color: localVar(thumbnail_border_color, $color-button);
+    border-color: localVar(thumbnail_border_color, common.$color-button);
     border-radius: localVar(thumbnail_border_radius, 4px);
     -webkit-tap-highlight-color: transparent;
     position: relative;
@@ -107,7 +107,7 @@ $thumbnail-focus-box-shadow:
     box-sizing: content-box;
 
     &_active {
-      border-color: localVar(thumbnail_active_border_color, $color-button-active);
+      border-color: localVar(thumbnail_active_border_color, common.$color-button-active);
     }
 
     &_fadein {
@@ -141,14 +141,14 @@ $thumbnail-focus-box-shadow:
   }
 
   &_thumbnail_icon {
-    color: localVar(thumbnail_icon_color, $color-button);
-    filter: localVar(thumbnail_icon_filter, $filter-drop-shadow);
+    color: localVar(thumbnail_icon_color, common.$color-button);
+    filter: localVar(thumbnail_icon_filter, common.$filter-drop-shadow);
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
-    width: localVar(thumbnail_icon_size, $icon-size);
-    height: localVar(thumbnail_icon_size, $icon-size);
+    width: localVar(thumbnail_icon_size, common.$icon-size);
+    height: localVar(thumbnail_icon_size, common.$icon-size);
   }
 }
 
diff --git a/src/styles.scss b/src/styles.scss
index 8c2536f..d0cde1a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,4 +1,4 @@
-@import "./_common";
+@use "common";
 
 .yarl_ {
   &_fullsize {
@@ -18,8 +18,8 @@
     left: 0;
     opacity: 0;
     overflow: hidden;
-    z-index: globalVar(portal_zindex, 9999);
-    transition: opacity globalVar(fade_animation_duration, 250ms) globalVar(fade_animation_timing_function, ease);
+    z-index: common.globalVar(portal_zindex, 9999);
+    transition: opacity common.globalVar(fade_animation_duration, 250ms) common.globalVar(fade_animation_timing_function, ease);
 
     &_open {
       opacity: 1;
@@ -33,11 +33,11 @@
     bottom: 0;
     left: 0;
     overflow: hidden;
-    background-color: globalVar(container_background_color, $color-backdrop);
+    background-color: common.globalVar(container_background_color, common.$color-backdrop);
     outline: none;
     user-select: none;
-    touch-action: globalVar(controller_touch_action, none);
-    overscroll-behavior: globalVar(controller_overscroll_behavior, contain);
+    touch-action: common.globalVar(controller_touch_action, none);
+    overscroll-behavior: common.globalVar(controller_overscroll_behavior, contain);
   }
 
   &_carousel {
@@ -92,7 +92,7 @@
       max-width: 100%;
       max-height: 100%;
       object-fit: contain;
-      touch-action: globalVar(controller_touch_action, none);
+      touch-action: common.globalVar(controller_touch_action, none);
       user-select: none;
       -webkit-user-select: none;
       -webkit-touch-callout: none;
@@ -127,7 +127,7 @@
     }
 
     &_loading {
-      color: globalVar(slide_icon_loading_color, $color-button);
+      color: common.globalVar(slide_icon_loading_color, common.$color-button);
       animation: yarl__delayed_fadein 1s linear;
 
       & line {
@@ -143,9 +143,9 @@
 
     &_error {
       $icon-size: 48px;
-      width: globalVar(slide_icon_error_size, $icon-size);
-      height: globalVar(slide_icon_error_size, $icon-size);
-      color: globalVar(slide_icon_error_color, red);
+      width: common.globalVar(slide_icon_error_size, $icon-size);
+      height: common.globalVar(slide_icon_error_size, $icon-size);
+      color: common.globalVar(slide_icon_error_color, red);
     }
   }
 
@@ -169,7 +169,7 @@
     left: auto;
     display: flex;
     justify-content: flex-end;
-    padding: globalVar(toolbar_padding, $toolbar-padding);
+    padding: common.globalVar(toolbar_padding, common.$toolbar-padding);
 
     [dir="rtl"] & {
       top: 0;
@@ -180,45 +180,45 @@
   }
 
   &_icon {
-    width: globalVar(icon_size, $icon-size);
-    height: globalVar(icon_size, $icon-size);
+    width: common.globalVar(icon_size, common.$icon-size);
+    height: common.globalVar(icon_size, common.$icon-size);
   }
 
   &_button {
     cursor: pointer;
     appearance: none;
-    background-color: globalVar(button_background_color, transparent);
-    border: globalVar(button_border, 0);
-    margin: globalVar(button_margin, 0);
+    background-color: common.globalVar(button_background_color, transparent);
+    border: common.globalVar(button_border, 0);
+    margin: common.globalVar(button_margin, 0);
     outline: none;
     line-height: 0;
-    padding: globalVar(button_padding, $icon-button-padding);
-    color: $color-button;
-    filter: globalVar(button_filter, $filter-drop-shadow);
+    padding: common.globalVar(button_padding, common.$icon-button-padding);
+    color: common.$color-button;
+    filter: common.globalVar(button_filter, common.$filter-drop-shadow);
     -webkit-tap-highlight-color: transparent;
 
     &:focus {
-      color: $color-button-active;
+      color: common.$color-button-active;
     }
 
     &:focus:not(:focus-visible) {
-      color: $color-button;
+      color: common.$color-button;
     }
 
     &:focus-visible {
-      color: $color-button-active;
+      color: common.$color-button-active;
     }
 
     @media (hover: hover) {
       &:hover,
       &:focus:hover,
       &:focus-visible:hover {
-        color: $color-button-active;
+        color: common.$color-button-active;
       }
     }
 
     &:disabled {
-      color: $color-button-disabled;
+      color: common.$color-button-disabled;
       cursor: default;
     }
   }
@@ -229,9 +229,9 @@
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
-      padding: globalVar(
+      padding: common.globalVar(
         navigation_button_padding,
-        $toolbar-padding + 2 * $icon-button-padding $toolbar-padding + $icon-button-padding
+        common.$toolbar-padding + 2 * common.$icon-button-padding common.$toolbar-padding + common.$icon-button-padding
       );
     }