docs(layer): update usage example in docs and StackBlitz (#19040)

heloiselui · web-flow · commit f16001bb6a20 · 2025-04-09T17:51:09.000Z
diff --git a/packages/web-components/examples/components/layer/index.html b/packages/web-components/examples/components/layer/index.html
@@ -9,13 +9,8 @@
   <head>
     <title>carbon-web-components example</title>
     <meta charset="UTF-8" />
-
+    
     <link rel="stylesheet" href="src/styles.scss" />
-    <style>
-      .example-layer-test-component {
-        padding: 1rem;
-      }
-    </style>
     <script type="module" src="src/index.js"></script>
   </head>
   <body>
diff --git a/packages/web-components/examples/components/layer/src/styles.scss b/packages/web-components/examples/components/layer/src/styles.scss
@@ -1,9 +1,15 @@
 @use '@carbon/styles/scss/reset';
 @use '@carbon/styles/scss/theme';
 @use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/spacing';
 
 :root {
   @include theme.theme(themes.$white);
   background-color: var(--cds-background);
   color: var(--cds-text-primary);
 }
+
+.example-layer-test-component {
+  padding: spacing.$spacing-05;
+  background: theme.$layer;
+}
diff --git a/packages/web-components/src/components/layer/layer.mdx b/packages/web-components/src/components/layer/layer.mdx
@@ -36,11 +36,15 @@ import '@carbon/web-components/es/components/layer/index.js';
 
 ### HTML
 
-Here we define a custom test class to define a custom padding.
+Here we define a custom test class to define a custom padding and background using tokens, which must be imported via Sass.
 
 ```css
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/theme';
+
 .example-layer-test-component {
-  padding: 1rem;
+  padding: spacing.$spacing-05;
+  background: theme.$layer;
 }
 ```
 
