feat: add text style background color and border outline videos in styles bar doc

Author: devvaannsh

docs/02-Live Preview/03-styles-bar.md

@@ -94,6 +94,10 @@ The **Spacing** tab:
 
 To learn more about these properties, see [MDN's text styling guide](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals).
 
+<VideoPlayer
+  src="https://docs-images.phcode.dev/videos/styles-bar/text-style.mp4"
+/>
+
 > Looking for bold? Use the font weight slider.
 
 ## Background Color
@@ -105,6 +109,10 @@ The **Background color** button shows the element's current background color. Cl
 - The **eyedropper** lets you pick a color from anywhere on the page.
 - **Swatches** shown on the left side displays all the colors already used in the page, plus a set of common colors.
 
+<VideoPlayer
+  src="https://docs-images.phcode.dev/videos/styles-bar/background-color.mp4"
+/>
+
 > The eyedropper is not available in Firefox, Safari and in the Linux desktop app.
 
 ## Text Color
@@ -130,6 +138,10 @@ The **Outline** tab has the same style, width, and color options, plus:
 
 > An outline is drawn outside the element's border and takes up no space on the page.
 
+<VideoPlayer
+  src="https://docs-images.phcode.dev/videos/styles-bar/border-outline.mp4"
+/>
+
 ## Box Model
 
 The popover has three tabs, **Size**, **Padding**, and **Margin**. They sit together because they measure one element from the inside out.