fix: website styles

.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

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>

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>

packages/website/src/app/ui/default/_instastories.scss

@@ -25,6 +25,20 @@ 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;
+  }
+}
+
+.dark .instastories-stories:not([data-preset]) > button.instastories-preview {
+  &:hover,
+  &:active {
+    outline: 0.1em solid #fff9;
+  }
 }
 
 .instastories-stories:not([data-preset]) > button.instastories-preview,
@@ -57,6 +71,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 +105,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
+      );
     }
   }
 }

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,14 @@
   overflow: hidden;
   pointer-events: none;
 
+  --skeleton-background-shimmer: linear-gradient(
+    var(--skeleton-background-deg),
+    transparent 0%,
+    #fff2 20%,
+    #fff4 60%,
+    transparent 100%
+  );
+
   &::after {
     position: absolute;
     inset: 0;
@@ -39,6 +33,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 +51,6 @@
     transform: translateX(-100%);
     animation: shimmer-horizontal 5s infinite;
   }
-
-  @keyframes shimmer-horizontal {
-    100% {
-      transform: translateX(100%);
-    }
-  }
 }
 
 .skeleton--vertical {
@@ -62,10 +60,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%);
   }
 }

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;

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>

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

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

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;