From 22afb177a37fd1b69389c522c0dfd07306fac71f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=98eho=C5=99kov=C3=A1=20Kate=C5=99ina?=
 <katerina.rehorkova@almacareer.com>
Date: Fri, 24 Jan 2025 08:04:00 +0100
Subject: [PATCH] fixup! fixup! Feat(web): Introduce Skeleton component
 #DS-1625

---
 .../src/scss/components/Skeleton/README.md    |  6 +++---
 .../scss/components/Skeleton/_Skeleton.scss   | 13 ++++++------
 .../src/scss/components/Skeleton/_theme.scss  |  5 -----
 .../src/scss/components/Skeleton/_tools.scss  | 20 -------------------
 .../src/scss/components/Skeleton/index.html   |  4 ++--
 5 files changed, 12 insertions(+), 36 deletions(-)

diff --git a/packages/web/src/scss/components/Skeleton/README.md b/packages/web/src/scss/components/Skeleton/README.md
index 6a88a4522b..4805ddbc5c 100644
--- a/packages/web/src/scss/components/Skeleton/README.md
+++ b/packages/web/src/scss/components/Skeleton/README.md
@@ -47,9 +47,9 @@ Use CSS custom properties to define the width, height, and radius of the shape.
 
 - `--spirit-skeleton-shape-width: number{px};`
 - `--spirit-skeleton-shape-height: number{px};`
-- `--spirit-skeleton-shape-radius:var(--spirit-radius-200);`
-- `--spirit-skeleton-shape-tablet-radius: var(--spirit-radius-300);`
-- `--spirit-skeleton-shape-desktop-radius: var(--spirit-radius-400);`
+- `--spirit-skeleton-shape-radius: var(--spirit-radius-200);`
+- `--spirit-skeleton-shape-radius-tablet: var(--spirit-radius-300);`
+- `--spirit-skeleton-shape-radius-desktop: var(--spirit-radius-400);`
 
 ```html
 <div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
diff --git a/packages/web/src/scss/components/Skeleton/_Skeleton.scss b/packages/web/src/scss/components/Skeleton/_Skeleton.scss
index 953c0ce58c..a7d8225ed3 100644
--- a/packages/web/src/scss/components/Skeleton/_Skeleton.scss
+++ b/packages/web/src/scss/components/Skeleton/_Skeleton.scss
@@ -1,8 +1,8 @@
 @use 'theme';
 @use 'tools';
-@use 'sass:map';
 @use '@tokens' as tokens;
 @use '../../tools/breakpoint';
+@use '../../tools/responsive-properties';
 @use '../../tools/string' as spirit-string;
 
 .Skeleton {
@@ -53,12 +53,13 @@
     height: var(--#{tokens.$css-variable-prefix}skeleton-shape-height);
     object-fit: cover;
     border: 1px solid theme.$shape-border-color;
-    border-radius: var(
-        --#{tokens.$css-variable-prefix}skeleton-shape-border-radius,
-        #{theme.$shape-default-border-radius}
-    );
 
-    @include tools.generate-radius-shape(theme.$breakpoints, tokens.$css-variable-prefix);
+    @include responsive-properties.create-cascade(
+        $property: 'border-radius',
+        $input-custom-property-base-name: '#{tokens.$css-variable-prefix}skeleton-shape-radius',
+        $breakpoints: theme.$breakpoints,
+        $fallback-value: theme.$shape-default-border-radius
+    );
 }
 
 .Skeleton--text .Skeleton__item,
diff --git a/packages/web/src/scss/components/Skeleton/_theme.scss b/packages/web/src/scss/components/Skeleton/_theme.scss
index 31ec59f2b8..78c1bf3742 100644
--- a/packages/web/src/scss/components/Skeleton/_theme.scss
+++ b/packages/web/src/scss/components/Skeleton/_theme.scss
@@ -1,5 +1,4 @@
 @use '@tokens' as tokens;
-@use 'sass:map';
 @use 'tools';
 
 $margin-bottom: tokens.$space-400;
@@ -9,10 +8,6 @@ $breakpoints: tokens.$breakpoints;
 $typography-border-radius: tokens.$radius-300;
 $typography-default-height: tools.get-height(tokens.$body-medium-bold, mobile);
 
-$border-radius-default: tokens.$radius-300;
-$border-radius-square: tokens.$radius-400;
-$border-radius-circle: tokens.$radius-full;
-
 $shape-border-color: tokens.$disabled-border;
 $shape-default-border-radius: tokens.$radius-300;
 
diff --git a/packages/web/src/scss/components/Skeleton/_tools.scss b/packages/web/src/scss/components/Skeleton/_tools.scss
index 647a2c1b56..fa665a6314 100644
--- a/packages/web/src/scss/components/Skeleton/_tools.scss
+++ b/packages/web/src/scss/components/Skeleton/_tools.scss
@@ -25,26 +25,6 @@
     @return $result;
 }
 
-@mixin generate-radius-shape($breakpoints, $css-variable-prefix) {
-    $previous-suffix: '';
-    $previous-previous-suffix: '';
-
-    @each $breakpoint-name, $breakpoint-value in $breakpoints {
-        $suffix: breakpoint.get-modifier(suffix, $breakpoint-name, $breakpoint-value);
-        $prefix: #{$css-variable-prefix}skeleton-shape;
-
-        @include breakpoint.up($breakpoint-value) {
-            --#{$prefix}-border-radius: var(
-                --#{$prefix}#{$suffix}-radius,
-                var(--#{$prefix}#{$previous-suffix}-radius, var(--#{$prefix}#{$previous-previous-suffix}-radius))
-            );
-        }
-
-        $previous-previous-suffix: $previous-suffix;
-        $previous-suffix: $suffix;
-    }
-}
-
 @mixin generate-item-sizes($class-name, $sizes) {
     @each $size, $variables in $sizes {
         &.#{$class-name}--#{$size} {
diff --git a/packages/web/src/scss/components/Skeleton/index.html b/packages/web/src/scss/components/Skeleton/index.html
index 6aa5d02bab..3996ab27ba 100644
--- a/packages/web/src/scss/components/Skeleton/index.html
+++ b/packages/web/src/scss/components/Skeleton/index.html
@@ -169,8 +169,8 @@ <h3 class="docs-Heading">Shape Rectangular responsive radius</h3>
                    --spirit-skeleton-shape-width: 300px;
                     --spirit-skeleton-shape-height: 100px;
                      --spirit-skeleton-shape-radius: var(--spirit-radius-200);
-                     --spirit-skeleton-shape-tablet-radius: var(--spirit-radius-400);
-                     --spirit-skeleton-shape-desktop-radius: var(--spirit-radius-500);
+                     --spirit-skeleton-shape-radius-tablet: var(--spirit-radius-400);
+                     --spirit-skeleton-shape-radius-desktop: var(--spirit-radius-500);
 "
               ></div>
             </div>