From 8aa34e916c44678e5417c0d0187bdcbbc84183c0 Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Sun, 3 Dec 2023 16:31:37 +0300
Subject: [PATCH] chore(demo): use css variable instead of shadow mixin

---
 .../modules/markup/shadows/shadows.style.less | 34 ++++++----
 .../markup/shadows/shadows.template.html      | 64 +++++++++----------
 2 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/projects/demo/src/modules/markup/shadows/shadows.style.less b/projects/demo/src/modules/markup/shadows/shadows.style.less
index 5ddb13bdec008..9c2f3742e3a37 100644
--- a/projects/demo/src/modules/markup/shadows/shadows.style.less
+++ b/projects/demo/src/modules/markup/shadows/shadows.style.less
@@ -1,51 +1,61 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
-.example {
+.title {
+    text-align: center;
+}
+
+.examples {
     display: flex;
-    flex: 1;
+    gap: 2.5rem;
     flex-wrap: wrap;
-    padding: 1.25rem;
+    align-items: center;
+    justify-content: center;
 }
 
 .item {
     .transition(box-shadow);
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    margin-top: 2.5rem;
-    margin-left: 2.5rem;
     width: 17.5rem;
     height: 5rem;
+    padding: 0.3125rem;
     border-radius: var(--tui-radius-m);
+    border: 1px solid var(--tui-base-02);
     color: var(--tui-text-03);
     cursor: pointer;
     text-align: center;
 
     &_default {
-        .shadow();
+        box-shadow: var(--tui-shadow);
 
         &:hover {
-            .shadow(5);
+            box-shadow: var(--tui-shadow-hover);
         }
     }
 
     &_dropdown {
-        .shadow(2);
+        box-shadow: var(--tui-shadow-dropdown);
     }
 
     &_modal {
-        .shadow(3);
+        box-shadow: var(--tui-shadow-modal);
     }
 
     &_sidebar {
-        .shadow(4);
+        box-shadow: var(--tui-shadow-sidebar);
     }
 
     &_navigation {
-        .shadow(6);
+        box-shadow: var(--tui-shadow-navigation);
     }
 
     &_mobile {
-        .shadow(7);
+        box-shadow: var(--tui-shadow-sheet);
     }
 }
+
+.code:not(pre code) {
+    color: var(--tui-link);
+}
diff --git a/projects/demo/src/modules/markup/shadows/shadows.template.html b/projects/demo/src/modules/markup/shadows/shadows.template.html
index e215ec60f17a8..26a761a76abd7 100644
--- a/projects/demo/src/modules/markup/shadows/shadows.template.html
+++ b/projects/demo/src/modules/markup/shadows/shadows.template.html
@@ -1,36 +1,34 @@
 <tui-doc-page header="Shadows">
-    <ng-template pageTab>
-        <p>Different kinds of shadows can be applied with mixin:</p>
-        <div class="example">
-            <div class="item item_default">
-                <span>
-                    Basic shadow:
-                    <code>.shadow(1)</code>
-                    with
-                    <code>.shadow(5)</code>
-                    when hovered
-                </span>
-            </div>
-            <div class="item item_dropdown">
-                Dropdown shadow:
-                <code>.shadow(2)</code>
-            </div>
-            <div class="item item_modal">
-                Modal shadow:
-                <code>.shadow(3)</code>
-            </div>
-            <div class="item item_sidebar">
-                Sidebar shadow:
-                <code>.shadow(4)</code>
-            </div>
-            <div class="item item_navigation">
-                Navigation shadow:
-                <code>.shadow(6)</code>
-            </div>
-            <div class="item item_mobile">
-                Mobile modal shadow:
-                <code>.shadow(7)</code>
-            </div>
+    <p class="title tui-space_bottom-5">Different kinds of shadows can be applied with css variables:</p>
+    <div class="examples">
+        <div class="item item_default">
+            <span>
+                Basic shadow:
+                <code class="code">--tui-shadow</code>
+                with
+                <code class="code">--tui-shadow-hovered</code>
+                when hovered
+            </span>
         </div>
-    </ng-template>
+        <div class="item item_dropdown">
+            Dropdown shadow:
+            <code class="code">--tui-shadow-dropdown</code>
+        </div>
+        <div class="item item_modal">
+            Modal shadow:
+            <code class="code">--tui-shadow-modal</code>
+        </div>
+        <div class="item item_sidebar">
+            Sidebar shadow:
+            <code class="code">--tui-shadow-sidebar</code>
+        </div>
+        <div class="item item_navigation">
+            Navigation shadow:
+            <code class="code">--tui-shadow-navigation</code>
+        </div>
+        <div class="item item_mobile">
+            Mobile modal shadow:
+            <code class="code">--tui-shadow-sheet</code>
+        </div>
+    </div>
 </tui-doc-page>