chore(demo): use css variable instead of shadow mixin (#6146)

projects/addon-charts/components/line-chart/line-chart.style.less

@@ -80,8 +80,8 @@
 }
 
 .t-hint {
-    .shadow();
     position: absolute;
+    box-shadow: var(--tui-shadow);
     font: var(--tui-font-text-xs);
     height: 1.25rem;
     line-height: 1.25rem;

projects/addon-doc/components/demo/demo.style.less

@@ -26,7 +26,7 @@
 }
 
 .t-wrapper {
-    .shadow(2);
+    box-shadow: var(--tui-shadow-dropdown);
     display: flex;
     border: 1px solid var(--tui-base-03);
     border-radius: var(--tui-radius-m);
@@ -129,7 +129,7 @@
 }
 
 .t-resizer {
-    .shadow(2);
+    box-shadow: var(--tui-shadow-dropdown);
     position: relative;
     width: 3.5rem;
     min-height: inherit;

projects/addon-doc/components/internal/header/header.style.less

@@ -1,14 +1,14 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 :host {
-    .shadow(6);
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     // fix for Safari to prevent tabs underline above sidebar
     z-index: 1;
     display: flex;
+    box-shadow: var(--tui-shadow-navigation);
     height: 3.9375rem;
     align-items: center;
     padding: 0 1.25rem;

projects/addon-mobile/components/pull-to-refresh/loader-android/loader-android.style.less

@@ -21,11 +21,11 @@
 }
 
 .t-wrapper {
-    .shadow(2);
     position: absolute;
     top: -2.5rem;
     left: 50%;
     display: flex;
+    box-shadow: var(--tui-shadow-dropdown);
     height: 2.25rem;
     width: 2.25rem;
     background-color: var(--tui-secondary);

projects/addon-mobile/components/sheet-dialog/sheet-dialog.style.less

@@ -36,7 +36,7 @@
 }
 
 .t-sheet {
-    .shadow();
+    box-shadow: var(--tui-shadow);
     width: calc(100% - 1rem);
     border-radius: 0.75rem 0.75rem 0 0;
     padding: 0 1rem;

projects/addon-mobile/components/sheet/components/sheet/sheet.style.less

@@ -49,15 +49,15 @@
     scroll-snap-align: start;
 
     &_shadow {
-        .shadow();
+        box-shadow: var(--tui-shadow);
     }
 }
 
 .t-top {
-    .shadow();
     position: sticky;
     top: 0;
     border-radius: 0.8rem 0.8rem 0 0;
+    box-shadow: var(--tui-shadow);
     transform: scaleX(-1);
     overflow: hidden;
 

projects/addon-tablebars/components/table-bars-host/table-bars-host.style.less

@@ -16,7 +16,7 @@
 }
 
 .t-bar {
-    .shadow();
+    box-shadow: var(--tui-shadow);
     flex: 0 0 100%;
     background: var(--tui-base-07);
     color: var(--tui-base-01);

projects/core/components/alert/alert.style.less

@@ -1,8 +1,8 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 :host {
-    .shadow(2);
     display: block;
+    box-shadow: var(--tui-shadow-dropdown);
     border-radius: var(--tui-radius-l);
     width: 18rem;
 

projects/core/components/dialog/dialog.style.less

@@ -12,10 +12,10 @@
 
     &:after {
         .fullsize();
-        .shadow(3);
         content: '';
         border-radius: inherit;
         pointer-events: none;
+        box-shadow: var(--tui-shadow-modal);
     }
 
     &[data-size='auto'] {

projects/core/directives/dropdown/dropdown.style.less

@@ -1,9 +1,9 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 :host {
-    .shadow(2);
     position: absolute;
     display: flex;
+    box-shadow: var(--tui-shadow-dropdown);
     background: var(--tui-elevation-02);
     border-radius: var(--tui-radius-m);
     overflow: hidden;

projects/core/styles/mixins/mixins.less

@@ -310,14 +310,14 @@
 }
 
 .hoverable-with-shadow() {
-    .shadow();
+    box-shadow: var(--tui-shadow);
     .transition();
     cursor: pointer;
     transition-property: transform, box-shadow;
     will-change: transform, box-shadow;
 
     &:hover {
-        .shadow(5);
+        box-shadow: var(--tui-shadow-hover);
         transform: translateY(-@space);
     }
 }

projects/demo/src/modules/app/landing/landing.style.less

@@ -236,7 +236,7 @@
 }
 
 .calendar {
-    .shadow(2);
+    box-shadow: var(--tui-shadow-dropdown);
     border-radius: var(--tui-radius-m);
     border: 1px solid var(--tui-base-03);
     margin-top: 0.25rem;

projects/demo/src/modules/components/app-bar/examples/1/index.less

@@ -1,7 +1,7 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 tui-app-bar {
-    .shadow(6);
+    box-shadow: var(--tui-shadow-navigation);
     width: 20rem;
     margin-bottom: 1rem;
 }

projects/demo/src/modules/components/avatar/examples/6/index.less

@@ -5,12 +5,11 @@
 }
 
 .avatar {
-    .shadow(1);
-
+    box-shadow: var(--tui-shadow);
     background: transparent;
     border: 1px solid;
 
     &:hover {
-        .shadow(5);
+        box-shadow: var(--tui-shadow-hover);
     }
 }

projects/demo/src/modules/components/carousel/examples/2/index.less

@@ -8,7 +8,7 @@
     border-radius: 100%;
 
     &_active {
-        .shadow(2);
+        box-shadow: var(--tui-shadow-dropdown);
         transform: scale(1.2);
     }
 }

projects/demo/src/modules/components/push/examples/1/index.less

@@ -5,7 +5,7 @@
 }
 
 .wrapper {
-    .shadow();
+    box-shadow: var(--tui-shadow);
     width: 22.5rem;
     max-width: 100%;
     border-radius: var(--tui-radius-l);

projects/demo/src/modules/components/tiles/examples/1/index.less

@@ -28,7 +28,7 @@
     overflow: hidden;
 
     tui-tile._dragged & {
-        .shadow(5);
+        box-shadow: var(--tui-shadow-hover);
     }
 }
 

projects/demo/src/modules/components/tiles/examples/2/index.less

@@ -24,6 +24,6 @@
     cursor: ns-resize;
 
     tui-tile._dragged & {
-        .shadow(5);
+        box-shadow: var(--tui-shadow-hover);
     }
 }

projects/demo/src/modules/customization/portals/examples/1/index.less

@@ -6,7 +6,7 @@
 }
 
 .template {
-    .shadow();
+    box-shadow: var(--tui-shadow);
     padding: 0.5rem;
     margin: 0.5rem;
     border-radius: 0.25rem;

projects/demo/src/modules/directives/portal/examples/1/index.less

@@ -1,7 +1,7 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 .portal {
-    .shadow(2);
+    box-shadow: var(--tui-shadow-dropdown);
     .center-all();
     position: fixed;
     padding: 1.5rem;

projects/demo/src/modules/experimental/badge/examples/5/index.less

@@ -2,7 +2,7 @@
 
 .custom-1 {
     .gradient(#0094cf, #24c0ff);
-    .shadow();
+    box-shadow: var(--tui-shadow);
 }
 
 .custom-2 {

projects/demo/src/modules/experimental/surface/examples/1/base.less

@@ -6,7 +6,7 @@
     gap: 1rem;
 
     * {
-        .shadow(1);
+        box-shadow: var(--tui-shadow);
         font-weight: bold;
         text-align: center;
     }

projects/demo/src/modules/experimental/surface/examples/1/index.less

@@ -64,5 +64,5 @@
 }
 
 .shadow:hover {
-    .shadow(5);
+    box-shadow: var(--tui-shadow-hover);
 }

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);
+}

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>