From 32a2c12badc7a45e4e505c962b6aad896588405d Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 11 May 2020 15:18:04 +0300
Subject: [PATCH] Add shadow helpers

---
 public/themes/luna-amber/theme.css      | 20 +++++++
 public/themes/luna-green/theme.css      | 20 +++++++
 public/themes/luna-pink/theme.css       | 20 +++++++
 public/themes/nova-colored/theme.css    | 22 +++++++-
 public/themes/nova-dark/theme.css       | 22 +++++++-
 public/themes/nova-light/theme.css      | 22 +++++++-
 public/themes/nova-vue/theme.css        | 22 +++++++-
 public/themes/rhea/theme.css            | 22 +++++++-
 public/themes/saga-blue/theme.css       | 20 +++++++
 public/themes/saga-cyan/theme.css       | 20 +++++++
 public/themes/saga-deeppurple/theme.css | 20 +++++++
 public/themes/saga-green/theme.css      | 20 +++++++
 public/themes/saga-indigo/theme.css     | 20 +++++++
 public/themes/saga-orange/theme.css     | 20 +++++++
 public/themes/saga-purple/theme.css     | 20 +++++++
 public/themes/saga-teal/theme.css       | 20 +++++++
 public/themes/vela-blue/theme.css       | 20 +++++++
 public/themes/vela-cyan/theme.css       | 20 +++++++
 public/themes/vela-deeppurple/theme.css | 20 +++++++
 public/themes/vela-green/theme.css      | 20 +++++++
 public/themes/vela-indigo/theme.css     | 20 +++++++
 public/themes/vela-orange/theme.css     | 20 +++++++
 public/themes/vela-purple/theme.css     | 20 +++++++
 public/themes/vela-teal/theme.css       | 20 +++++++
 src/AppMenu.vue                         |  1 +
 src/router.js                           |  5 ++
 src/views/shadow/ShadowDemo.vue         | 69 +++++++++++++++++++++++++
 src/views/shadow/ShadowDoc.vue          | 68 ++++++++++++++++++++++++
 28 files changed, 628 insertions(+), 5 deletions(-)
 create mode 100644 src/views/shadow/ShadowDemo.vue
 create mode 100644 src/views/shadow/ShadowDoc.vue

diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index d78cb5120..7c327eb0d 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -3558,4 +3558,24 @@
   color: #ffffff;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 3b19a1a99..833db0113 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -3558,4 +3558,24 @@
   color: #ffffff;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 3e6fa4446..553056c10 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -3558,4 +3558,24 @@
   color: #ffffff;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css
index 2867bfebe..ba1781eab 100644
--- a/public/themes/nova-colored/theme.css
+++ b/public/themes/nova-colored/theme.css
@@ -2092,7 +2092,7 @@
 .p-card {
   background: #ffffff;
   color: #333333;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   border-radius: 3px;
 }
 .p-card .p-card-body {
@@ -3558,4 +3558,24 @@
   color: #ffffff;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css
index 279de6cfc..7f0153bd5 100644
--- a/public/themes/nova-dark/theme.css
+++ b/public/themes/nova-dark/theme.css
@@ -2092,7 +2092,7 @@
 .p-card {
   background: #ffffff;
   color: #333333;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   border-radius: 3px;
 }
 .p-card .p-card-body {
@@ -3558,4 +3558,24 @@
   color: #ffffff;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
index d8230c9d3..f1d77783b 100644
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@@ -2092,7 +2092,7 @@
 .p-card {
   background: #ffffff;
   color: #333333;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   border-radius: 3px;
 }
 .p-card .p-card-body {
@@ -3558,4 +3558,24 @@
   color: #ffffff;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 483035e99..c50b64ae5 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -2092,7 +2092,7 @@
 .p-card {
   background: #ffffff;
   color: #333333;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   border-radius: 3px;
 }
 .p-card .p-card-body {
@@ -3558,4 +3558,24 @@
   color: #ffffff;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 9535535bf..91797b98b 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -2092,7 +2092,7 @@
 .p-card {
   background: #ffffff;
   color: #666666;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   border-radius: 2px;
 }
 .p-card .p-card-body {
@@ -3558,4 +3558,24 @@
   color: #262222;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 2bb4d520b..782eb3b74 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -3592,4 +3592,24 @@
   color: #ffffff;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css
index 6db37ce29..a86f043dc 100644
--- a/public/themes/saga-cyan/theme.css
+++ b/public/themes/saga-cyan/theme.css
@@ -3592,4 +3592,24 @@
   color: #ffffff;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css
index 4e765e602..0f9183193 100644
--- a/public/themes/saga-deeppurple/theme.css
+++ b/public/themes/saga-deeppurple/theme.css
@@ -3592,4 +3592,24 @@
   color: #ffffff;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index fe61f33ec..a020fc008 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -3592,4 +3592,24 @@
   color: #ffffff;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css
index 1d8778721..f4d829c89 100644
--- a/public/themes/saga-indigo/theme.css
+++ b/public/themes/saga-indigo/theme.css
@@ -3592,4 +3592,24 @@
   color: #ffffff;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index abd0182f9..b6615f53c 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -3592,4 +3592,24 @@
   color: #ffffff;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index c9819590b..59b345248 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -3592,4 +3592,24 @@
   color: #ffffff;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css
index d034b8229..b28aa5aa1 100644
--- a/public/themes/saga-teal/theme.css
+++ b/public/themes/saga-teal/theme.css
@@ -3592,4 +3592,24 @@
   color: #ffffff;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 3bdd34ed9..92b2de0d6 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -3592,4 +3592,24 @@
   color: #212529;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/vela-cyan/theme.css b/public/themes/vela-cyan/theme.css
index 3d86a563a..4afee722a 100644
--- a/public/themes/vela-cyan/theme.css
+++ b/public/themes/vela-cyan/theme.css
@@ -3592,4 +3592,24 @@
   color: #212529;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/vela-deeppurple/theme.css b/public/themes/vela-deeppurple/theme.css
index c7e611234..460c42cd1 100644
--- a/public/themes/vela-deeppurple/theme.css
+++ b/public/themes/vela-deeppurple/theme.css
@@ -3592,4 +3592,24 @@
   color: #212529;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index f7618448d..3293fd466 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -3592,4 +3592,24 @@
   color: #212529;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/vela-indigo/theme.css b/public/themes/vela-indigo/theme.css
index 8a80e40e2..c74998128 100644
--- a/public/themes/vela-indigo/theme.css
+++ b/public/themes/vela-indigo/theme.css
@@ -3592,4 +3592,24 @@
   color: #212529;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 6c8097466..83a728fc5 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -3592,4 +3592,24 @@
   color: #212529;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 067ff49c1..3889e408b 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -3592,4 +3592,24 @@
   color: #212529;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/public/themes/vela-teal/theme.css b/public/themes/vela-teal/theme.css
index 2d44de206..857f59a14 100644
--- a/public/themes/vela-teal/theme.css
+++ b/public/themes/vela-teal/theme.css
@@ -3592,4 +3592,24 @@
   color: #212529;
 }
 
+.p-shadow-1 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.p-shadow-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-shadow-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.p-shadow-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
 /* Customizations to the designer theme should be defined here */
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 8dcdc0b04..eeb92d0f0 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -150,6 +150,7 @@
                 <router-link to="/inplace">Inplace</router-link>
                 <router-link to="/progressbar">ProgressBar</router-link>
                 <router-link to="/progressspinner">ProgressSpinner</router-link>
+                <router-link to="/shadow">Shadow</router-link>
                 <router-link to="/terminal">Terminal</router-link>
             </div>
         </div>
diff --git a/src/router.js b/src/router.js
index cbd7d5eff..73c686bac 100755
--- a/src/router.js
+++ b/src/router.js
@@ -435,6 +435,11 @@ export default new Router({
 			path: '/selectbutton',
 			name: 'selectbutton',
 			component: () => import('./views/selectbutton/SelectButtonDemo.vue')
+        },
+        {
+			path: '/shadow',
+			name: 'shadow',
+			component: () => import('./views/shadow/ShadowDemo.vue')
 		},
 		{
 			path: '/sidebar',
diff --git a/src/views/shadow/ShadowDemo.vue b/src/views/shadow/ShadowDemo.vue
new file mode 100644
index 000000000..b625a6e69
--- /dev/null
+++ b/src/views/shadow/ShadowDemo.vue
@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Shadow</h1>
+                <p>Shadow is used to add depth to an element.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="p-grid">
+                <div class="p-col-12 p-md-2">
+                    <div class="box">
+                        none
+                    </div>
+                </div>
+                <div class="p-col-12 p-md-2">
+                    <div class="box p-shadow-1">
+                        p-shadow-1
+                    </div>
+                </div>
+                <div class="p-col-12 p-md-2">
+                    <div class="box p-shadow-2">
+                        p-shadow-2
+                    </div>
+                </div>
+                <div class="p-col-12 p-md-2">
+                    <div class="box p-shadow-3">
+                        p-shadow-3
+                    </div>
+                </div>
+                <div class="p-col-12 p-md-2">
+                    <div class="box p-shadow-4">
+                        p-shadow-4
+                    </div>
+                </div>
+                <div class="p-col-12 p-md-2">
+                    <div class="box p-shadow-5">
+                        p-shadow-5
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <ShadowDoc />
+    </div>
+</template>
+
+<script>
+import ShadowDoc from './ShadowDoc';
+
+export default {
+	components: {
+		'ShadowDoc': ShadowDoc
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+    background-color: #e9ecef;
+    width: 100%;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 500;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/shadow/ShadowDoc.vue b/src/views/shadow/ShadowDoc.vue
new file mode 100644
index 000000000..45965717b
--- /dev/null
+++ b/src/views/shadow/ShadowDoc.vue
@@ -0,0 +1,68 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Getting Started</h3>
+				<p>A shadow is added to an element using the <i>.p-shadow-{level}</i> class.</p>
+<CodeHighlight>
+&lt;div class="p-shadow-1" /&gt;
+</CodeHighlight>
+
+                <h3>Levels</h3>
+                <p>There are 5 depths available varying from 1 to 5.</p>
+<CodeHighlight>
+&lt;div class="p-shadow-1" /&gt;
+&lt;div class="p-shadow-2" /&gt;
+&lt;div class="p-shadow-3" /&gt;
+&lt;div class="p-shadow-4" /&gt;
+&lt;div class="p-shadow-5" /&gt;
+</CodeHighlight>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/shadow" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;div class="p-grid"&gt;
+    &lt;div class="p-col-12 p-md-2"&gt;
+        &lt;div class="box"&gt;
+            none
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="p-col-12 p-md-2"&gt;
+        &lt;div class="box p-shadow-1"&gt;
+            p-shadow-1
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="p-col-12 p-md-2"&gt;
+        &lt;div class="box p-shadow-2"&gt;
+            p-shadow-2
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="p-col-12 p-md-2"&gt;
+        &lt;div class="box p-shadow-3"&gt;
+            p-shadow-3
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="p-col-12 p-md-2"&gt;
+        &lt;div class="box p-shadow-4"&gt;
+            p-shadow-4
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="p-col-12 p-md-2"&gt;
+        &lt;div class="box p-shadow-5"&gt;
+            p-shadow-5
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</template>
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file