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
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" }}
/>
- Story with 3 page
+ Story with 3 pages
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
sub
- Animation
+ Animation
diff --git a/packages/website/src/app/ui/default/_instastories.scss b/packages/website/src/app/ui/default/_instastories.scss
index 3239d99..32f1590 100644
--- a/packages/website/src/app/ui/default/_instastories.scss
+++ b/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
+ );
}
}
}
diff --git a/packages/website/src/app/ui/default/_skeletons.scss b/packages/website/src/app/ui/default/_skeletons.scss
index df34309..2d4e4f6 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,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%);
}
}
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/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}
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({
{description}