From 6383d90ed226e3abc3c866a50896a0f0c90e6a7c Mon Sep 17 00:00:00 2001
From: Dmitry Britov <kenclaron@gmail.com>
Date: Sat, 2 Aug 2025 12:06:35 +0300
Subject: [PATCH 1/6] fix: change light to dark classname in preset-sb demo

---
 .../website/src/entities/stories/ui/preset-sb/index.tsx   | 2 +-
 .../stories/ui/preset-sb/story/styles.module.scss         | 8 ++++++++
 .../src/entities/stories/ui/preset-sb/story/ui.tsx        | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/website/src/entities/stories/ui/preset-sb/index.tsx b/packages/website/src/entities/stories/ui/preset-sb/index.tsx
index 1c005f8..d05e8b4 100644
--- a/packages/website/src/entities/stories/ui/preset-sb/index.tsx
+++ b/packages/website/src/entities/stories/ui/preset-sb/index.tsx
@@ -20,7 +20,7 @@ export function SberPrimeStories() {
           animation: "immediately",
           preset: "instastories-preset-sb",
           duration: 15000,
-          viewer: { props: { className: "light" } }
+          viewer: { props: { className: "dark" } }
         }}
       >
         <Configurable.Container>{configurable}</Configurable.Container>
diff --git a/packages/website/src/entities/stories/ui/preset-sb/story/styles.module.scss b/packages/website/src/entities/stories/ui/preset-sb/story/styles.module.scss
index fb693fc..5b5c1cb 100644
--- a/packages/website/src/entities/stories/ui/preset-sb/story/styles.module.scss
+++ b/packages/website/src/entities/stories/ui/preset-sb/story/styles.module.scss
@@ -39,6 +39,14 @@
     font-size: 1.25em;
     user-select: none;
 
+    &:global(.action-item--tertiary) {
+      background-color: color-mix(
+        in srgb,
+        transparent 60%,
+        var(--action-item-color--primary)
+      );
+    }
+
     &:hover {
       transform: scale(1.1);
     }
diff --git a/packages/website/src/entities/stories/ui/preset-sb/story/ui.tsx b/packages/website/src/entities/stories/ui/preset-sb/story/ui.tsx
index a5b3be6..b2c5327 100644
--- a/packages/website/src/entities/stories/ui/preset-sb/story/ui.tsx
+++ b/packages/website/src/entities/stories/ui/preset-sb/story/ui.tsx
@@ -62,7 +62,7 @@ export function Story({
       <p className={styles["text"]}>{description}</p>
       <div className={styles["container"]}>
         <a
-          className="dark nx-text-center action-item action-item--primary"
+          className="nx-text-center action-item action-item--primary"
           href="/docs"
         >
           Learn more about react-instastories

From b9d8b2b137359cdb939450e84bc6fa135344b5e6 Mon Sep 17 00:00:00 2001
From: Dmitry Britov <kenclaron@gmail.com>
Date: Sat, 2 Aug 2025 12:07:12 +0300
Subject: [PATCH 2/6] fix: button hover in website

---
 .../src/app/ui/default/_instastories.scss     | 47 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/packages/website/src/app/ui/default/_instastories.scss b/packages/website/src/app/ui/default/_instastories.scss
index 3239d99..74b8f36 100644
--- a/packages/website/src/app/ui/default/_instastories.scss
+++ b/packages/website/src/app/ui/default/_instastories.scss
@@ -25,6 +25,13 @@ body {
       background-color: transparent;
     }
   }
+
+  .instastories-viewer:not([data-preset])
+    button.instastories-button-viewer-control:hover,
+  .instastories-viewer:not([data-preset])
+    button.instastories-button-stories-control:hover {
+    background-color: transparent;
+  }
 }
 
 .instastories-stories:not([data-preset]) > button.instastories-preview,
@@ -57,6 +64,21 @@ body {
     }
   }
 
+  &:active {
+    &::after {
+      background-color: transparent;
+    }
+  }
+}
+
+.instastories-stories:not([data-preset]) > button.instastories-preview,
+.dark
+  .instastories-viewer:not([data-preset])
+  .instastories-button-stories-control,
+.dark
+  .instastories-viewer:not([data-preset])
+  .instastories-button-viewer-control,
+.interactive--force {
   &:hover {
     &::after {
       background-color: color-mix(
@@ -76,10 +98,31 @@ body {
       );
     }
   }
+}
 
-  &:active {
+.light
+  .instastories-viewer:not([data-preset])
+  .instastories-button-stories-control,
+.light
+  .instastories-viewer:not([data-preset])
+  .instastories-button-viewer-control {
+  &:hover {
     &::after {
-      background-color: transparent;
+      background-color: color-mix(
+        in srgb,
+        var(--button-background-color-hover) 75%,
+        #1114
+      );
+    }
+  }
+
+  &:focus {
+    &::after {
+      background-color: color-mix(
+        in srgb,
+        var(--button-background-color-hover) 75%,
+        #1117
+      );
     }
   }
 }

From 23cd683a604d79e64cdf6d91eafaafa97c866cd7 Mon Sep 17 00:00:00 2001
From: Dmitry Britov <kenclaron@gmail.com>
Date: Sat, 2 Aug 2025 12:10:17 +0300
Subject: [PATCH 3/6] fix: lint nextjs.yml

---
 .github/workflows/nextjs.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml
index 6f76dbe..d2f9d74 100644
--- a/.github/workflows/nextjs.yml
+++ b/.github/workflows/nextjs.yml
@@ -85,15 +85,15 @@ jobs:
           WELL_KNOWN_FILES: ${{ secrets.WELL_KNOWN_FILES }}
         run: |
           mkdir -p packages/website/public/.well-known
-      
+
           # Save content into JSON file
           echo "$WELL_KNOWN_FILES" > .well-known-content.json
-      
+
           # Check and write content in files
           jq -r 'to_entries[] | select(.value != "") | "\(.key) \(.value)"' .well-known-content.json | while read name content; do
             echo "$content" > packages/website/public/.well-known/$name
           done
-      
+
           # Remove temp JSON file
           rm .well-known-content.json
       - name: Build with Next.js

From 16a9218f8250286b7c819595f2259642c67cff22 Mon Sep 17 00:00:00 2001
From: Dmitry Britov <kenclaron@gmail.com>
Date: Sat, 2 Aug 2025 12:11:24 +0300
Subject: [PATCH 4/6] fix: text of story with 3 pages

---
 packages/website/pages/docs/base/pages.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/website/pages/docs/base/pages.mdx b/packages/website/pages/docs/base/pages.mdx
index 58b38d7..88c40af 100644
--- a/packages/website/pages/docs/base/pages.mdx
+++ b/packages/website/pages/docs/base/pages.mdx
@@ -94,7 +94,7 @@ import { Image, hueRotate } from "../../../src/shared";
           src={BackgroundImage}
           style={{ filter: hueRotate(1), backgroundColor: "#2470c0" }}
         />
-        <h1>Story with 3 page</h1>
+        <h1>Story with 3 pages</h1>
       </Preview>
       <Pages>
         <Page>

From 259db5560672b25913b4fb5d2b3a5d06e7d6c3ea Mon Sep 17 00:00:00 2001
From: Dmitry Britov <kenclaron@gmail.com>
Date: Sat, 2 Aug 2025 12:36:21 +0300
Subject: [PATCH 5/6] fix: documentation styles

---
 packages/website/pages/docs/base/preview.mdx  |  2 +-
 .../src/app/ui/default/_instastories.scss     |  7 +++
 .../src/app/ui/default/_skeletons.scss        | 53 ++++++++++---------
 .../ui/demonstration/styles.module.scss       |  7 +++
 .../src/pages/documentation/ui/_preview.scss  |  2 +-
 5 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/packages/website/pages/docs/base/preview.mdx b/packages/website/pages/docs/base/preview.mdx
index 6a8e990..14ca8c4 100644
--- a/packages/website/pages/docs/base/preview.mdx
+++ b/packages/website/pages/docs/base/preview.mdx
@@ -163,7 +163,7 @@ import { Image, hueRotate } from "../../../src/shared";
           <sup>sup</sup>
           <sub>sub</sub>
         </div>
-        <span className="skeleton">Animation</span>
+        <span className="skeleton nx-rounded-md nx-p-1">Animation</span>
       </Preview>
       <Pages>
         <Page>
diff --git a/packages/website/src/app/ui/default/_instastories.scss b/packages/website/src/app/ui/default/_instastories.scss
index 74b8f36..32f1590 100644
--- a/packages/website/src/app/ui/default/_instastories.scss
+++ b/packages/website/src/app/ui/default/_instastories.scss
@@ -34,6 +34,13 @@ body {
   }
 }
 
+.dark .instastories-stories:not([data-preset]) > button.instastories-preview {
+  &:hover,
+  &:active {
+    outline: 0.1em solid #fff9;
+  }
+}
+
 .instastories-stories:not([data-preset]) > button.instastories-preview,
 .instastories-viewer:not([data-preset]) .instastories-button-stories-control,
 .instastories-viewer:not([data-preset]) .instastories-button-viewer-control,
diff --git a/packages/website/src/app/ui/default/_skeletons.scss b/packages/website/src/app/ui/default/_skeletons.scss
index df34309..e949e78 100644
--- a/packages/website/src/app/ui/default/_skeletons.scss
+++ b/packages/website/src/app/ui/default/_skeletons.scss
@@ -1,23 +1,9 @@
 .light {
   --skeleton-background: #fff3;
-  --skeleton-background-shimmer: linear-gradient(
-    var(--skeleton-background-deg),
-    transparent 0%,
-    #fff2 20%,
-    #fff4 60%,
-    transparent 100%
-  );
 }
 
 .dark {
   --skeleton-background: #3333;
-  --skeleton-background-shimmer: linear-gradient(
-    var(--skeleton-background-deg),
-    transparent 0%,
-    #0002 20%,
-    #0004 60%,
-    transparent 100%
-  );
 }
 
 .skeleton {
@@ -29,6 +15,15 @@
   overflow: hidden;
   pointer-events: none;
 
+  /* shimmer зависит от deg → определяем здесь */
+  --skeleton-background-shimmer: linear-gradient(
+    var(--skeleton-background-deg),
+    transparent 0%,
+    #fff2 20%,
+    #fff4 60%,
+    transparent 100%
+  );
+
   &::after {
     position: absolute;
     inset: 0;
@@ -39,6 +34,16 @@
   }
 }
 
+.dark .skeleton {
+  --skeleton-background-shimmer: linear-gradient(
+    var(--skeleton-background-deg),
+    transparent 0%,
+    #0002 20%,
+    #0004 60%,
+    transparent 100%
+  );
+}
+
 .skeleton,
 .skeleton--horizontal {
   --skeleton-background-deg: 90deg;
@@ -47,12 +52,6 @@
     transform: translateX(-100%);
     animation: shimmer-horizontal 5s infinite;
   }
-
-  @keyframes shimmer-horizontal {
-    100% {
-      transform: translateX(100%);
-    }
-  }
 }
 
 .skeleton--vertical {
@@ -62,10 +61,16 @@
     transform: translateY(-100%);
     animation: shimmer-vertical 5s infinite;
   }
+}
+
+@keyframes shimmer-horizontal {
+  100% {
+    transform: translateX(100%);
+  }
+}
 
-  @keyframes shimmer-vertical {
-    100% {
-      transform: translateY(100%);
-    }
+@keyframes shimmer-vertical {
+  100% {
+    transform: translateY(100%);
   }
 }
diff --git a/packages/website/src/entities/stories/ui/demonstration/styles.module.scss b/packages/website/src/entities/stories/ui/demonstration/styles.module.scss
index 71c6f4e..ebbf477 100644
--- a/packages/website/src/entities/stories/ui/demonstration/styles.module.scss
+++ b/packages/website/src/entities/stories/ui/demonstration/styles.module.scss
@@ -108,6 +108,13 @@
   }
 }
 
+:global(.dark) .container .stories > button:global(.instastories-preview) {
+  &:hover,
+  &:active {
+    outline: none;
+  }
+}
+
 :global(.dark) .container .stories > button {
   background-color: #fff8;
   color: black;
diff --git a/packages/website/src/pages/documentation/ui/_preview.scss b/packages/website/src/pages/documentation/ui/_preview.scss
index 92adcc8..428c2fb 100644
--- a/packages/website/src/pages/documentation/ui/_preview.scss
+++ b/packages/website/src/pages/documentation/ui/_preview.scss
@@ -18,7 +18,7 @@
         position: absolute;
         top: -0.25em;
         left: -0.25em;
-        z-index: 1;
+        z-index: 2;
         border-radius: 0.5em;
         background-color: red;
         padding: 0.5em;

From 683e3838e292ce582577a4e94d6f6e2123b064be Mon Sep 17 00:00:00 2001
From: Dmitry Britov <kenclaron@gmail.com>
Date: Sat, 2 Aug 2025 12:44:55 +0300
Subject: [PATCH 6/6] fix: remove debug

---
 packages/website/src/app/ui/default/_skeletons.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/website/src/app/ui/default/_skeletons.scss b/packages/website/src/app/ui/default/_skeletons.scss
index e949e78..2d4e4f6 100644
--- a/packages/website/src/app/ui/default/_skeletons.scss
+++ b/packages/website/src/app/ui/default/_skeletons.scss
@@ -15,7 +15,6 @@
   overflow: hidden;
   pointer-events: none;
 
-  /* shimmer зависит от deg → определяем здесь */
   --skeleton-background-shimmer: linear-gradient(
     var(--skeleton-background-deg),
     transparent 0%,