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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.225",
+  "version": "0.0.226",
   "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({
@@ -162,8 +163,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 +173,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/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>;
+}