From 192ec7ab875eed5961250e2e38a4665d1df0d7f8 Mon Sep 17 00:00:00 2001
From: Mujtaba Sayed <Mujtaba.Sayyed@teknopoint.local>
Date: Wed, 3 Jul 2024 21:59:15 +0530
Subject: [PATCH] added common linear gradient classes and json

---
 component-models.json | 33 +++++++++++++++++++++++++++++++++
 styles/styles.css     | 21 +++++++++++++++++++++
 2 files changed, 54 insertions(+)

diff --git a/component-models.json b/component-models.json
index b3af5263e3..8e26f7c9a8 100644
--- a/component-models.json
+++ b/component-models.json
@@ -1148,6 +1148,39 @@
                 "value": "card-full-width"
               }
             ]
+          },
+          {
+            "name": "liner-gradient",
+            "children": [
+              {
+                "name": "gradient-blue-gray",
+                "value": "gradient-blue-gray"
+              },
+              {
+                "name": "gradient-blue",
+                "value": "gradient-blue"
+              },
+              {
+                "name": "gradient-brown",
+                "value": "gradient-brown"
+              },
+              {
+                "name": "gradient-dark-blue",
+                "value": "gradient-dark-blue"
+              },
+              {
+                "name": "gradient-gray",
+                "value": "gradient-gray"
+              },
+              {
+                "name": "gradient-teal",
+                "value": "gradient-teal"
+              },
+              {
+                "name": "gradient-blue-green",
+                "value": "gradient-blue-green"
+              }
+            ]
           }
         ]
       },
diff --git a/styles/styles.css b/styles/styles.css
index 3f23073ea0..dab02a05c8 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -440,6 +440,27 @@ main img {
 .teaser.block.--skyblue>.background {
   background-color: var(--skyblue);
 }
+.gradient-blue-gray {
+  background-image: linear-gradient(to right, #2B4054, #2B405400);
+}
+.gradient-blue {
+  background-image: linear-gradient(to right, #587990, #58799000);
+}
+.gradient-brown {
+  background-image: linear-gradient(to right, #755930, #75593000);
+}
+.gradient-dark-blue {
+  background-image: linear-gradient(to right, #2C3C4D, #2C3C4D00);
+}
+.gradient-gray {
+  background-image: linear-gradient(to right, #8F8F8F, #8F8F8F00);
+}
+.gradient-teal {
+  background-image: linear-gradient(to right, #69888D, #69888D00);
+}
+.gradient-blue-green {
+  background-image: linear-gradient(to right, #016084, #01608400);
+}
 
 /* common classes for banner background end */