Fix alpha handling

front/apps/mobile/package.json

@@ -42,7 +42,7 @@
 		"react-native-screens": "~3.18.0",
 		"react-native-svg": "13.4.0",
 		"react-native-video": "alpha",
-		"yoshiki": "0.3.3"
+		"yoshiki": "0.3.5"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.19.3",

front/apps/web/package.json

@@ -36,7 +36,7 @@
 		"react-native-web": "^0.18.10",
 		"solito": "^2.0.5",
 		"superjson": "^1.11.0",
-		"yoshiki": "0.3.3",
+		"yoshiki": "0.3.5",
 		"zod": "^3.19.1"
 	},
 	"devDependencies": {

front/packages/primitives/src/divider.tsx

@@ -20,7 +20,6 @@
 
 import { HR as EHR } from "@expo/html-elements";
 import { px, Stylable, useYoshiki } from "yoshiki/native";
-import { alpha } from "./themes";
 import { ts } from "./utils";
 
 export const HR = ({
@@ -34,7 +33,8 @@ export const HR = ({
 			{...css(
 				[
 					{
-						bg: (theme) => alpha(theme.overlay0, 0.7),
+						opacity: .7,
+						bg: (theme) => theme.overlay0,
 						borderWidth: 0,
 					},
 					orientation === "vertical" && {

front/packages/primitives/src/themes/theme.tsx

@@ -177,7 +177,7 @@ export const ContrastArea = ({
 							// Keep the same skeletons, it looks weird otherwise.
 							overlay0: theme.user.overlay0,
 							overlay1: theme.user.overlay1,
-							heading: mode === "light" ? theme.colors.black : theme.colors.white,
+							heading: theme.contrast,
 							paragraph: theme.heading,
 					  }
 					: theme

front/packages/ui/src/details/movie.tsx

@@ -36,7 +36,18 @@ export const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => {
 	const { css } = useYoshiki();
 
 	return (
-		<ScrollView {...css(Platform.OS === "web" && { overflow: "overlay" as any })}>
+		<ScrollView
+			{...css(
+				Platform.OS === "web" && {
+					// @ts-ignore Web only property
+					overflow: "auto" as any,
+					// @ts-ignore Web only property
+					overflowX: "hidden",
+					// @ts-ignore Web only property
+					overflowY: "overlay",
+				},
+			)}
+		>
 			<Header slug={slug} query={query(slug)} />
 			{/* <Staff slug={slug} /> */}
 		</ScrollView>

front/yarn.lock

@@ -10200,7 +10200,7 @@ __metadata:
     react-native-svg-transformer: ^1.0.0
     react-native-video: alpha
     typescript: ^4.6.3
-    yoshiki: 0.3.3
+    yoshiki: 0.3.5
   languageName: unknown
   linkType: soft
 
@@ -13932,7 +13932,7 @@ __metadata:
     superjson: ^1.11.0
     typescript: ^4.9.3
     webpack: ^5.75.0
-    yoshiki: 0.3.3
+    yoshiki: 0.3.5
     zod: ^3.19.1
   languageName: unknown
   linkType: soft
@@ -14278,9 +14278,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yoshiki@npm:0.3.3":
-  version: 0.3.3
-  resolution: "yoshiki@npm:0.3.3"
+"yoshiki@npm:0.3.5":
+  version: 0.3.5
+  resolution: "yoshiki@npm:0.3.5"
   dependencies:
     "@types/node": 18.x.x
     "@types/react": 18.x.x
@@ -14296,7 +14296,7 @@ __metadata:
       optional: true
     react-native-web:
       optional: true
-  checksum: 6358f53d28ba419a8783cd5cf785eb7c64878504815ed4c6794fbf81ed86bca83560a7677e5ecfe568f37c0ff714bf07f3a33c11ce6d869f6d758e800bfa58ba
+  checksum: 3ef90cbd97d48ec70f7361ce11ec6e44ba3a55dda95d626f828d57a3f0d52eb871688e32245d974fe5e962ee6037261610add5946852416f2fc37999b7d2a9d2
   languageName: node
   linkType: hard