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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.224",
+  "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/index.tsx

@@ -14,6 +14,7 @@ import {
   videoRecipe,
   type VideoVariants,
 } from './styles.css';
+import { themeContract } from '../../theme/contract.css';
 import { Icon } from '../Icon';
 
 export type VideoProps = React.HTMLAttributes<HTMLDivElement> &
@@ -94,25 +95,29 @@ export const Video = ({
 
       {!hidePlayButton && !isAutoPlay && (
         <button className={playButton} data-playing={isPlaying} onClick={playVideo} aria-label="Play video" type="button">
-          <Icon icon="play" />
+          <Icon icon="play" color={themeContract.video.playButton.iconColor} />
         </button>
       )}
 
       {isPlayingFullScreen && (
         <button className={closeButton} onClick={closeVideo} aria-label="Close video" type="button">
-          <Icon icon="close" />
+          <Icon icon="close" color={themeContract.video.closeButton.iconColor} />
         </button>
       )}
 
       {isPlaying && showControls && (
         <button className={pauseButton} onClick={pauseVideo} aria-label="Pause video" type="button">
-          <Icon icon="pause" />
+          <Icon icon="pause" color={themeContract.video.pauseButton.iconColor} />
         </button>
       )}
 
       {showControls && (
         <button className={soundButton} onClick={toggleMutedVideo} aria-label={isMuted ? 'Unmute video' : 'Mute video'} type="button">
-          {isMuted ? <Icon icon="volumeUp" /> : <Icon icon="volumeMute" />}
+          {isMuted ? (
+            <Icon icon="volumeUp" color={themeContract.video.soundButton.iconColor} />
+          ) : (
+            <Icon icon="volumeMute" color={themeContract.video.soundButton.iconColor} />
+          )}
         </button>
       )}
     </div>

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>;
+}