feat(backroundlayers): display each layer

Author: jenndiaz

components/backgroundlayers/index.css

@@ -12,10 +12,16 @@ governing permissions and limitations under the License.
 
 .spectrum-BackgroundLayers {
   --spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
+  --spectrum-backgroundlayers-drop-shadow:
 }
 
 .spectrum-BackgroundLayers--elevated {
   --spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
+  --spectrum-backgroundlayers-shadow-horizontal: 0;
+  --spectrum-backgroundlayers-shadow-vertical: 0;
+  --spectrum-backgroundlayers-shadow-blur: 5px;
+  --spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-200);
+
 }
 .spectrum-BackgroundLayers--layer2 {
   --spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
@@ -28,9 +34,10 @@ governing permissions and limitations under the License.
 }
 .spectrum-BackgroundLayers--base {
   --spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
-  border: 2px solid gray;
+  border: 2px solid rgba(180, 180, 180, 0.25);
 }
 
 .spectrum-BackgroundLayers {
   background-color: var(--spectum-backgroundlayers-background-color);
+  filter: drop-shadow(var(--spectrum-backgroundlayers-shadow-horizontal) var(--spectrum-backgroundlayers-shadow-vertical) var(--spectrum-backgroundlayers-shadow-blur) var(--spectrum-backgroundlayers-shadow-color));
 }

components/backgroundlayers/metadata/backgroundlayers.yml

@@ -5,14 +5,24 @@ examples:
   - id: backgroundlayers-browsing
     name: Browsing Contexts
     markup: |
-      <div class="spectrum-Examples">
-      <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--pasteboard" style="inline-size: 100px; block-size: 100px; border-radius: 10px;">
-      </div>
+      <div class="spectrum-Examples" style="justify-content: flex-start; position: relative; height: 150px;">
+        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 4;">
+        </div>
+        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--layer2" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 15px; top: 15px; z-index: 3;">
+        </div>
+        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--layer1" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 30px; top: 30px; z-index: 2;">
+        </div>
+        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--pasteboard" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 40px; top: 40px; z-index: 1;">
+        </div>
       </div>
   - id: backgroundlayers-editting
     name: Editting Contexts
     markup: |
-      <div class="spectrum-Examples">
-      <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--base" style="inline-size: 100px; block-size: 100px; border-radius: 10px;">
-      </div>
+      <div class="spectrum-Examples" style="justify-content: flex-start; position: relative; height: 150px;">
+        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 3;">
+        </div>
+        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--layer1" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 15px; top: 15px; z-index: 2;">
+        </div>
+        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--base"  style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 20px; top: 20px; z-index: 1;">
+        </div>
       </div>