@latte-macchiat-io/latte-vanilla-components 0.0.227 → 0.0.229

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.227",
+  "version": "0.0.229",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Video/styles.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
@@ -120,14 +120,6 @@ export const playButton = style([
         opacity: 0,
         pointerEvents: 'none',
       },
-
-      '& svg': {
-        '@media': {
-          ...generateResponsiveMedia({
-            width: themeContract.video.playButton.iconSize,
-          }),
-        },
-      },
     },
 
     '@media': {
@@ -139,6 +131,15 @@ export const playButton = style([
   },
 ]);
 
+globalStyle(`${playButton} svg`, {
+  '@media': {
+    ...generateResponsiveMedia({
+      width: themeContract.video.playButton.iconSize,
+      height: themeContract.video.playButton.iconSize,
+    }),
+  },
+});
+
 const controlButton = style({
   border: 'none',
   display: 'flex',
@@ -168,6 +169,15 @@ export const closeButton = style([
   },
 ]);
 
+globalStyle(`${closeButton} svg`, {
+  '@media': {
+    ...generateResponsiveMedia({
+      width: themeContract.video.closeButton.iconSize,
+      height: themeContract.video.closeButton.iconSize,
+    }),
+  },
+});
+
 export const pauseButton = style([
   controlButton,
   {
@@ -187,6 +197,15 @@ export const pauseButton = style([
   },
 ]);
 
+globalStyle(`${pauseButton} svg`, {
+  '@media': {
+    ...generateResponsiveMedia({
+      width: themeContract.video.pauseButton.iconSize,
+      height: themeContract.video.pauseButton.iconSize,
+    }),
+  },
+});
+
 export const soundButton = style([
   controlButton,
 
@@ -206,3 +225,12 @@ export const soundButton = style([
     },
   },
 ]);
+
+globalStyle(`${soundButton} svg`, {
+  '@media': {
+    ...generateResponsiveMedia({
+      width: themeContract.video.soundButton.iconSize,
+      height: themeContract.video.soundButton.iconSize,
+    }),
+  },
+});