docs(backgroundlayers): style changes

Author: jenndiaz

components/backgroundlayers/index.css

@@ -16,7 +16,7 @@ governing permissions and limitations under the License.
 	--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-shadow-color: var(--spectrum-gray-600);
 	.spectrum--dark & {
 		--spectum-backgroundlayers-background-color: var(--spectrum-gray-75);
 		--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100);

components/backgroundlayers/stories/backgroundlayers.stories.js

@@ -2,7 +2,7 @@ import { Template } from "./template";
 import { html } from 'lit';
 
 export default {
-  title: "Elements/Background layers",
+  title: "UtilitityClasses/Background layers",
   description: "The background layers is a series of classes used to style background layers.",
   component: "BackgroundLayers",
   argTypes: {},
@@ -24,19 +24,19 @@ const EditingContext = ({
 	return html`
 		<div style="display: flex; justify-content: flex-start; position: relative; block-size: 150px;">
 			${Template({
-        style: "z-index: 4;",
+        style: "z-index: 4; inset-inline-start: 10px; inset-block-start: 10px;",
 				layer: 'elevated',
 			})}
 			${Template({
-        style: "z-index: 3; inset-inline-start: 15px; inset-block-start: 15px;",
+        style: "z-index: 3; inset-inline-start: 20px; inset-block-start: 20px;",
 				layer: 'layer2',
 			})}
 			${Template({
-        style: "z-index: 2; inset-inline-start: 25px; inset-block-start: 25px;",
+        style: "z-index: 2; inset-inline-start: 30px; inset-block-start: 30px;",
 				layer: 'layer1',
 			})}
 			${Template({
-        style: "z-index: 1; inset-inline-start: 35px; inset-block-start: 35px;",
+        style: "z-index: 1; inset-inline-start: 40px; inset-block-start: 40px;",
 				layer: "pasteboard",
 			})}
 		</div>
@@ -48,15 +48,15 @@ const BrowsingContext = ({
 	return html`
 		<div style="display: flex; justify-content: flex-start; position: relative; block-size: 150px;">
 			${Template({
-        style: "z-index: 3;",
+        style: "z-index: 3; inset-inline-start: 10px; inset-block-start: 10px;",
 				layer: 'elevated',
 			})}
 			${Template({
-        style: "z-index: 2; inset-inline-start: 15px; inset-block-start: 15px;",
+        style: "z-index: 2; inset-inline-start: 20px; inset-block-start: 20px;",
 				layer: 'layer1',
 			})}
 			${Template({
-        style: "z-index: 1; inset-inline-start: 25px; inset-block-start: 25px;",
+        style: "z-index: 1; inset-inline-start: 30px; inset-block-start: 30px;",
 				layer: "base",
 			})}
 		</div>

components/backgroundlayers/stories/template.js

@@ -16,7 +16,7 @@ export const Template = ({
       [`${rootClass}--${layer}`]: true,
       ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
     })}
-      style="${style} inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute;">
+      style="${style} inline-size: 150px; block-size: 150px; border-radius: 10px; position: absolute;">
     </div>
   `;
 }