Feat(web): Add background gradient to Box component #DS-1887

Author: curdaj

packages/web/src/scss/components/Box/README.md

@@ -59,3 +59,20 @@ You can define background color using utility classes `bg-<color>`.
 <div class="bg-secondary">Secondary Background</div>
 <div class="bg-tertiary">Tertiary Background</div>
 ```
+
+## Background Gradient
+
+You can define background gradient using utility classes `bg-gradient-<color>`.
+
+```html
+<div class="bg-gradient-primary">Primary Background Gradient</div>
+<div class="bg-gradient-secondary">Secondary Background Gradient</div>
+```
+
+Responsive values can be set for each prop using utility classes. For example, `bg-gradient-<color>` for mobile, `bg-gradient-tablet-<color>` for tablet, and `bg-gradient-desktop-<color>` for desktop.
+
+```html
+<div class="bg-gradient-primary bg-gradient-tablet-secondary bg-gradient-desktop-primary">
+  Responsive background gradient
+</div>
+```

packages/web/src/scss/components/Box/index.html

@@ -52,6 +52,19 @@ <h2 class="docs-Heading">With Background Color</h2>
   </div>
 </section>
 
+<section class="py-900 py-tablet-1000">
+  <div class="Container">
+    <h2 class="docs-Heading">With Background Gradient</h2>
+    <div class="docs-Stack docs-Stack--start">
+
+      <p>For demo purposes, the boxes have custom padding.</p>
+      <div class="bg-gradient-primary p-800">Primary Background Gradient</div>
+      <div class="bg-gradient-secondary p-800">Secondary Background Gradient</div>
+      <div class="bg-gradient-primary bg-gradient-tablet-secondary bg-gradient-desktop-secondary p-800">Responsive Background Gradient</div>
+    </div>
+  </div>
+</section>
+
 <section class="py-900 py-tablet-1000">
   <div class="Container">
     <h2 class="docs-Heading">With Radius</h2>