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

package/package.json

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

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

@@ -4,6 +4,7 @@ import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { queries } from '../../styles/mediaqueries';
 import { themeContract } from '../../theme/contract.css';
+import { addPixelsToBreakpoints } from '../../utils/addPixelsToBreakpoints';
 import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const videoRecipe = recipe({
@@ -119,6 +120,14 @@ export const playButton = style([
         opacity: 0,
         pointerEvents: 'none',
       },
+
+      '& svg': {
+        '@media': {
+          ...generateResponsiveMedia({
+            width: themeContract.video.playButton.iconSize,
+          }),
+        },
+      },
     },
 
     '@media': {
@@ -162,8 +171,6 @@ export const closeButton = style([
 export const pauseButton = style([
   controlButton,
   {
-    right: '80px',
-
     bottom: themeContract.space.md,
     border: themeContract.video.pauseButton.border,
     color: themeContract.video.pauseButton.iconColor,
@@ -174,6 +181,7 @@ export const pauseButton = style([
       ...generateResponsiveMedia({
         width: themeContract.video.pauseButton.width,
         height: themeContract.video.pauseButton.height,
+        right: addPixelsToBreakpoints(themeContract.video.pauseButton.width, 20),
       }),
     },
   },

package/src/theme/contract.css.ts

@@ -678,6 +678,14 @@ export const themeContract = createGlobalThemeContract({
         xl: 'latte-video-closeButton-height-xl',
         '2xl': 'latte-video-closeButton-height-2xl',
       },
+      iconSize: {
+        mobile: 'latte-video-playButton-iconSize-mobile',
+        sm: 'latte-video-playButton-iconSize-sm',
+        md: 'latte-video-playButton-iconSize-md',
+        lg: 'latte-video-playButton-iconSize-lg',
+        xl: 'latte-video-playButton-iconSize-xl',
+        '2xl': 'latte-video-playButton-iconSize-2xl',
+      },
     },
     pauseButton: {
       border: 'latte-video-pauseButton-border',
@@ -700,6 +708,14 @@ export const themeContract = createGlobalThemeContract({
         xl: 'latte-video-pauseButton-height-xl',
         '2xl': 'latte-video-pauseButton-height-2xl',
       },
+      iconSize: {
+        mobile: 'latte-video-pauseButton-iconSize-mobile',
+        sm: 'latte-video-pauseButton-iconSize-sm',
+        md: 'latte-video-pauseButton-iconSize-md',
+        lg: 'latte-video-pauseButton-iconSize-lg',
+        xl: 'latte-video-pauseButton-iconSize-xl',
+        '2xl': 'latte-video-pauseButton-iconSize-2xl',
+      },
     },
     soundButton: {
       border: 'latte-video-soundButton-border',
@@ -722,6 +738,14 @@ export const themeContract = createGlobalThemeContract({
         xl: 'latte-video-closeButton-height-xl',
         '2xl': 'latte-video-closeButton-height-2xl',
       },
+      iconSize: {
+        mobile: 'latte-video-soundButton-iconSize-mobile',
+        sm: 'latte-video-soundButton-iconSize-sm',
+        md: 'latte-video-soundButton-iconSize-md',
+        lg: 'latte-video-soundButton-iconSize-lg',
+        xl: 'latte-video-soundButton-iconSize-xl',
+        '2xl': 'latte-video-soundButton-iconSize-2xl',
+      },
     },
     closeButton: {
       border: 'latte-video-closeButton-border',
@@ -744,6 +768,14 @@ export const themeContract = createGlobalThemeContract({
         xl: 'latte-video-closeButton-height-xl',
         '2xl': 'latte-video-closeButton-height-2xl',
       },
+      iconSize: {
+        mobile: 'latte-video-closeButton-iconSize-mobile',
+        sm: 'latte-video-closeButton-iconSize-sm',
+        md: 'latte-video-closeButton-iconSize-md',
+        lg: 'latte-video-closeButton-iconSize-lg',
+        xl: 'latte-video-closeButton-iconSize-xl',
+        '2xl': 'latte-video-closeButton-iconSize-2xl',
+      },
     },
   },
   carousel: {

package/src/utils/addPixelsToBreakpoints.ts

@@ -0,0 +1,5 @@
+import { Breakpoints } from '../styles/mediaqueries';
+
+export function addPixelsToBreakpoints(map: Record<Breakpoints, string>, pixels: number) {
+  return Object.fromEntries(Object.entries(map).map(([bp, value]) => [bp, `calc(${value} + ${pixels}px)`])) as Record<Breakpoints, string>;
+}