From adb1af7653ec6e276bcc4b44ee40aa1f9e6b3ed5 Mon Sep 17 00:00:00 2001
From: Mishnya <mishnya@yandex-team.ru>
Date: Fri, 17 Nov 2023 14:40:17 +0300
Subject: [PATCH 1/3] feat(Skeleton): support RTL

---
 src/components/Skeleton/Skeleton.scss | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/Skeleton/Skeleton.scss b/src/components/Skeleton/Skeleton.scss
index 733e0dee30..1d2ed63d3c 100644
--- a/src/components/Skeleton/Skeleton.scss
+++ b/src/components/Skeleton/Skeleton.scss
@@ -19,6 +19,11 @@ $block: '.#{variables.$ns}skeleton';
         background-image: linear-gradient(90deg, transparent, var(--g-color-base-generic));
         animation: #{variables.$ns}skeleton 1.2s ease-out infinite;
         content: '';
+
+        [dir='rtl'] & {
+            background-image: linear-gradient(-90deg, transparent, var(--g-color-base-generic));
+            animation-name: #{variables.$ns}skeleton-rtl;
+        }
     }
 }
 
@@ -31,3 +36,13 @@ $block: '.#{variables.$ns}skeleton';
         transform: translateX(100%);
     }
 }
+
+@keyframes #{variables.$ns}skeleton-rtl {
+    0% {
+        transform: translateX(100%);
+    }
+
+    100% {
+        transform: translateX(-100%);
+    }
+}

From fab118d410e02b7ddcbaa0fb11e33c9d1ee339b6 Mon Sep 17 00:00:00 2001
From: Mishnya <mishnya@yandex-team.ru>
Date: Mon, 20 Nov 2023 17:42:28 +0300
Subject: [PATCH 2/3] fix: fixed css styles

---
 src/components/Skeleton/Skeleton.scss | 35 +++++++++++++--------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/Skeleton/Skeleton.scss b/src/components/Skeleton/Skeleton.scss
index 1d2ed63d3c..4df07b0259 100644
--- a/src/components/Skeleton/Skeleton.scss
+++ b/src/components/Skeleton/Skeleton.scss
@@ -3,6 +3,10 @@
 $block: '.#{variables.$ns}skeleton';
 
 #{$block} {
+    --g-skeleton-animation-from: -100%;
+    --g-skeleton-animation-to: 100%;
+    --g-skeleton-gradient-deg: 90deg;
+
     display: inline-block;
     position: relative;
     z-index: 0;
@@ -12,37 +16,32 @@ $block: '.#{variables.$ns}skeleton';
 
     background-color: var(--g-color-base-generic);
 
+    [dir='rtl'] & {
+        --g-skeleton-animation-from: 100%;
+        --g-skeleton-animation-to: -100%;
+        --g-skeleton-gradient-deg: -90deg;
+    }
+
     &::after {
         position: absolute;
         inset: 0;
 
-        background-image: linear-gradient(90deg, transparent, var(--g-color-base-generic));
+        background-image: linear-gradient(
+            var(--g-skeleton-gradient-deg),
+            transparent,
+            var(--g-color-base-generic)
+        );
         animation: #{variables.$ns}skeleton 1.2s ease-out infinite;
         content: '';
-
-        [dir='rtl'] & {
-            background-image: linear-gradient(-90deg, transparent, var(--g-color-base-generic));
-            animation-name: #{variables.$ns}skeleton-rtl;
-        }
     }
 }
 
 @keyframes #{variables.$ns}skeleton {
     0% {
-        transform: translateX(-100%);
-    }
-
-    100% {
-        transform: translateX(100%);
-    }
-}
-
-@keyframes #{variables.$ns}skeleton-rtl {
-    0% {
-        transform: translateX(100%);
+        transform: translateX(var(--g-skeleton-animation-from));
     }
 
     100% {
-        transform: translateX(-100%);
+        transform: translateX(var(--g-skeleton-animation-to));
     }
 }

From 557093b8d7f957f1b9b6bfd365ce0f79adb63215 Mon Sep 17 00:00:00 2001
From: Mishnya <mishnya@yandex-team.ru>
Date: Thu, 23 Nov 2023 11:37:15 +0300
Subject: [PATCH 3/3] fix: fixed css variables

---
 src/components/Skeleton/Skeleton.scss | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Skeleton/Skeleton.scss b/src/components/Skeleton/Skeleton.scss
index 4df07b0259..f5de124be3 100644
--- a/src/components/Skeleton/Skeleton.scss
+++ b/src/components/Skeleton/Skeleton.scss
@@ -3,9 +3,9 @@
 $block: '.#{variables.$ns}skeleton';
 
 #{$block} {
-    --g-skeleton-animation-from: -100%;
-    --g-skeleton-animation-to: 100%;
-    --g-skeleton-gradient-deg: 90deg;
+    --_--animation-from: -100%;
+    --_--animation-to: 100%;
+    --_--gradient-deg: 90deg;
 
     display: inline-block;
     position: relative;
@@ -17,9 +17,9 @@ $block: '.#{variables.$ns}skeleton';
     background-color: var(--g-color-base-generic);
 
     [dir='rtl'] & {
-        --g-skeleton-animation-from: 100%;
-        --g-skeleton-animation-to: -100%;
-        --g-skeleton-gradient-deg: -90deg;
+        --_--animation-from: 100%;
+        --_--animation-to: -100%;
+        --_--gradient-deg: -90deg;
     }
 
     &::after {
@@ -27,7 +27,7 @@ $block: '.#{variables.$ns}skeleton';
         inset: 0;
 
         background-image: linear-gradient(
-            var(--g-skeleton-gradient-deg),
+            var(--_--gradient-deg),
             transparent,
             var(--g-color-base-generic)
         );
@@ -38,10 +38,10 @@ $block: '.#{variables.$ns}skeleton';
 
 @keyframes #{variables.$ns}skeleton {
     0% {
-        transform: translateX(var(--g-skeleton-animation-from));
+        transform: translateX(var(--_--animation-from));
     }
 
     100% {
-        transform: translateX(var(--g-skeleton-animation-to));
+        transform: translateX(var(--_--animation-to));
     }
 }