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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.223",
+  "version": "0.0.225",
   "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,8 @@ import {
   videoRecipe,
   type VideoVariants,
 } from './styles.css';
+import { themeContract } from '../../theme/contract.css';
+import { Icon } from '../Icon';
 
 export type VideoProps = React.HTMLAttributes<HTMLDivElement> &
   VideoVariants & {
@@ -92,15 +94,31 @@ export const Video = ({
       )}
 
       {!hidePlayButton && !isAutoPlay && (
-        <button className={playButton} data-playing={isPlaying} onClick={playVideo} aria-label="Play video" type="button" />
+        <button className={playButton} data-playing={isPlaying} onClick={playVideo} aria-label="Play video" type="button">
+          <Icon icon="play" color={themeContract.video.playButton.iconColor} />
+        </button>
       )}
 
-      {isPlayingFullScreen && <button className={closeButton} onClick={closeVideo} aria-label="Close video" type="button" />}
+      {isPlayingFullScreen && (
+        <button className={closeButton} onClick={closeVideo} aria-label="Close video" type="button">
+          <Icon icon="close" color={themeContract.video.closeButton.iconColor} />
+        </button>
+      )}
 
-      {isPlaying && showControls && <button className={pauseButton} onClick={pauseVideo} aria-label="Pause video" type="button" />}
+      {isPlaying && showControls && (
+        <button className={pauseButton} onClick={pauseVideo} aria-label="Pause video" type="button">
+          <Icon icon="pause" color={themeContract.video.pauseButton.iconColor} />
+        </button>
+      )}
 
       {showControls && (
-        <button className={soundButton} onClick={toggleMutedVideo} aria-label={isMuted ? 'Unmute video' : 'Mute video'} type="button" />
+        <button className={soundButton} onClick={toggleMutedVideo} aria-label={isMuted ? 'Unmute video' : 'Mute video'} type="button">
+          {isMuted ? (
+            <Icon icon="volumeUp" color={themeContract.video.soundButton.iconColor} />
+          ) : (
+            <Icon icon="volumeMute" color={themeContract.video.soundButton.iconColor} />
+          )}
+        </button>
       )}
     </div>
   );