MWPW-163479: MAS - Switch to Spectrum CSS from SWC (#3289)

* MWPW-162385 add wcsApiKey attribute * MWPW-161355: Update MAS documentation (#3135) * MWPW-159374: Update hydrate logic to support all cta styles organise code and code coverage Update tests * add workaround for ccd-suggested cards * remove source maps * improve code coverage * merge MWPW-159374 * MWPW-161355: Update MAS documentation * Example with contextual menu * Checkout click event with correct event target when the CTA contains a text wrapped by a span * cleanup all attributes during card hydration * remove deps/mas/mas.js * update test * update doc * allow list libs/features/mas/mas/dist/mas.js * change order in ignore * trying with wildcard * allow list dist * update hlxignore rules * update hlxignore rules * MWPW-161176: restructure ccd gallery (#3169) restructure ccd gallery * fix mas path * fix undefined error in merch-icon * fix regression in ctas size * update doc * fix css with checkout-link * fix random rtl issue * revert removal of mas.js from deps * update ccd gallery --------- Co-authored-by: Mariia Lukianets <lukianet@adobe.com> * MWPW-161845: basic analytics on mas cards (#3206) * MWPW-161845: add analytics * fix review changes * add build files * MWPW-159191: MAS Freyja support (#3209) * initial freyja commit * increase codecov * trival * add qa support to ccd page * improve page performance * update ccd.html * MWPW-161804: Merch card style auditing (#3216) Refactor merch-card styles to improve structure and specificity * Added space after price recurrence label for display-per-unit prices (#3196) * Added space after price recurrence label for display-per-unit prices * more specific selector * built * fix cr * built * adding example * MWPW-162933: merge mas modules (#3248) * MWPW-162933: merge mas modules + consonant-templates module from tacocat.js into a single module * MWPW-160755 - add tests for CCD cards (#3256) * MWPW-160755 - add tests for CCD cards * refactor and prepare dark mode checks * add tests for slice cards * activate dark for suggested and eslint fixes * add check for cta variant * fix multi mnemonic check * fix lint * add analytics check * remove comment * MWPW-163041: analytics fix (#3257) * MWPW-163041: fix analytics & add docs * add tests for analytics * add analytics docu * fix test * Fix overriding of border style on merch cards (#3278) * Fix overriding of border style on merch cards * width change * built --------- Co-authored-by: Mariia Lukianets <mariia.lukianets@gmail.com> * Bump timeout from 2 to 10 sec (#3282) * bump to 10 seconds * new change * MWPW-163479: Switch to Spectrum CSS from SWC CCD app already provides Spectrum CCS styles. * update doc style * update doc style * update doc style * update doc style * update doc style * update doc style * Update styles * update docs * Keep SWC logic as an option * MWPW-161645: lana logging for CCD (#3271) * MWPW-161645: lana logging for CCD with <mas-commerce-service data-lana-tags="consumer=ccd" ...> lana will be enabled. TODO: Update docs * Update tests * fix review comments * add host env attribute, fix lana override * fix docs * fix unit tests * start loggin missing osi's * fix message * fix message * Update libs/features/mas/src/lana.js Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> * PR review changes * avoid duplicate logging, log wcs url, limit page length in log * fix formatString error * fix render * add tests * fix loggin * revert ccd comments * fix milo tags --------- Co-authored-by: Mariia Lukianets <mariia.lukianets@gmail.com> Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> * fix gaps with Spectrum CSS support * update version * fix gaps reported by ccd teamm * address gaps * address gaps * address gaps * address gaps * address gaps * fix for MWPW-163718 addressed design gaps. * addressed design gaps. * bump the version * add build artifacts * Update colors based on CCD app * Update colors based on CCD app * build without source maps * update Nala tests * fix lint * reset box-sizing for merch-card elements * Force box-sizing on merch-card * update styles: box-sizing * fix ccd gallery * update version * limit ccd price style to their variants * limit ccd price style to suggest variant * preserve white spaces in prices section * fix spacing in price * Update version * Update doc * update cards * update gallery styles * make the gallery responsive * align slice card ctas * cards resize responsively * fix 1x of gap issue * fix description text alignement * fix gaps in minimal widths * fix the gallery layout * Fix strikethrough price color in promos * Update nala tests * MWPW-164177: clean up card style on fragment * Added a new section to ccd gallery * update mas version * fix missing default spectrum css button style --------- Co-authored-by: Nicolas Peltier <npeltier@adobe.com> Co-authored-by: Mariia Lukianets <lukianet@adobe.com> Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> Co-authored-by: Angelo Statescu <angelostatescu.adobe@gmail.com> Co-authored-by: Milica Micic <cod23684@adobe.com> Co-authored-by: Mariia Lukianets <mariia.lukianets@gmail.com>
adobecom · Jan 7, 2025 · 7db0ff0 · 7db0ff0
1 parent d389752
commit 7db0ff0
Show file tree

Hide file tree

Showing 36 changed files with 9,333 additions and 1,661 deletions.
diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js
diff --git a/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js
diff --git a/libs/deps/mas/merch-icon.js b/libs/deps/mas/merch-icon.js
@@ -1,12 +1,12 @@
-var g=Object.defineProperty;var a=(i,t,s)=>t in i?g(i,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[t]=s;var h=(i,t,s)=>a(i,typeof t!="symbol"?t+"":t,s);import{LitElement as m,html as r,css as l}from"../lit-all.min.js";var e=class extends m{constructor(){super(),this.size="m",this.alt=""}render(){let{href:t}=this;return t?r`<a href="${t}">
+var g=Object.defineProperty;var m=(i,t,h)=>t in i?g(i,t,{enumerable:!0,configurable:!0,writable:!0,value:h}):i[t]=h;var r=(i,t,h)=>m(i,typeof t!="symbol"?t+"":t,h);import{LitElement as a,html as s,css as d}from"../lit-all.min.js";var e=class extends a{constructor(){super(),this.size="m",this.alt=""}render(){let{href:t}=this;return t?s`<a href="${t}">
                   <img src="${this.src}" alt="${this.alt}" loading="lazy" />
-              </a>`:r` <img src="${this.src}" alt="${this.alt}" loading="lazy" />`}};h(e,"properties",{size:{type:String,attribute:!0},src:{type:String,attribute:!0},alt:{type:String,attribute:!0},href:{type:String,attribute:!0}}),h(e,"styles",l`
+              </a>`:s` <img src="${this.src}" alt="${this.alt}" loading="lazy" />`}};r(e,"properties",{size:{type:String,attribute:!0},src:{type:String,attribute:!0},alt:{type:String,attribute:!0},href:{type:String,attribute:!0}}),r(e,"styles",d`
         :host {
             --img-width: 32px;
             --img-height: 32px;
             display: block;
-            width: var(--img-width);
-            height: var(--img-height);
+            width: var(--mod-img-width, var(--img-width));
+            height: var(--mod-img-height, var(--img-height));
         }
 
         :host([size='s']) {
@@ -25,7 +25,7 @@ var g=Object.defineProperty;var a=(i,t,s)=>t in i?g(i,t,{enumerable:!0,configura
         }
 
         img {
-            width: var(--img-width);
-            height: var(--img-height);
+            width: var(--mod-img-width, var(--img-width));
+            height: var(--mod-img-height, var(--img-height));
         }
     `);customElements.define("merch-icon",e);export{e as default};
diff --git a/libs/features/mas/dist/mas.js b/libs/features/mas/dist/mas.js
diff --git a/libs/features/mas/docs/ccd.html b/libs/features/mas/docs/ccd.html
@@ -4,16 +4,10 @@
     <meta charset="UTF-8">
     <title>CCD Gallery</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="spectrum.css">
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://p.typekit.net/p.css?s=1&k=hah7vzn&ht=tk&f=7180.7181.7182.7183.22474.22749.22750.22751.22753&a=8634977&app=typekit&e=css">
     <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
-    <script src="../../spectrum-web-components/dist/shared.js" type="module"></script>
-    <script src="../../spectrum-web-components/dist/button.js" type="module"></script>
-    <script src="../../spectrum-web-components/dist/base.js" type="module"></script>
-    <script src="../../spectrum-web-components/dist/icons-ui.js" type="module"></script>
-    <script src="../../spectrum-web-components/dist/icon.js" type="module"></script>
-    <script src="../../spectrum-web-components/dist/icons/cross.js" type="module"></script>
-    <script src="../../spectrum-web-components/dist/icons/checkmark.js" type="module"></script>
     <script src="/libs/deps/lit-all.min.js" type="module"></script>
 
     <script>
@@ -32,17 +26,18 @@
       meta.name = 'aem-base-url';
       meta.content = `https://${env}.adobe.com`;
       document.head.appendChild(meta);
+
+      const params = new URLSearchParams(document.location.search);
+      function toggleTheme(theme) {
+        document.body.className = 'spectrum spectrum--medium';
+        document.body.classList.add(`spectrum--${theme}`);
+        params.set('theme', theme);
+        history.replaceState(null, '', `${location.pathname}?${params}`);
+      }
     </script>
     <script type="module" src="../dist/mas.js"></script>
 
     <script type="module">
-      // theme
-      const params = new URLSearchParams(document.location.search);
-      const darkTheme = params?.get('theme')?.toLowerCase() === 'dark';
-      const theme = document.createElement('script');
-      theme.setAttribute('src', `../../spectrum-web-components/dist/themes/${darkTheme ? 'dark' : 'light'}.js`);
-      theme.setAttribute('type', `module`);
-      document.head.appendChild(theme);
       // mas-commerce-service
       const masCommerceService = document.createElement('mas-commerce-service');
       ['locale','language','env'].forEach((attribute) => {
@@ -56,91 +51,52 @@
     </script>
 </head>
 
-<body>
+<body class="spectrum spectrum--medium spectrum--light">
   <main>
-    <sp-theme color="light" scale="medium"> 
       <div class="gallery-content">
 
         <h1 id="ccd-gallery" tabindex="-1">CCD Gallery <a class="header-anchor" href="#ccd-gallery" href="#ccd-gallery" title="Permalink to this heading">#</a></h1>
-        Switch Theme: <a href="?theme=dark">Dark</a> OR <a href="?theme=light">Light</a>
+        Switch Theme: <a class="spectrum-Link pectrum-Link--secondary" href="javascript:toggleTheme('darkest');">Darkest</a> OR <a class="spectrum-Link pectrum-Link--secondary" href="javascript:toggleTheme('light');">Light</a>
 
-        <h2 id="ccd-slice-card" tabindex="-1">CCD Slice Card <a class="header-anchor" href="#ccd-slice-card" href="#ccd-slice-card" title="Permalink to this heading">#</a></h2>
-        <div class="gallery-grid-3">
-          <div>
-            <h3>Percentage</h3>
+        <h2 id="ccd-slice-card" tabindex="-1">CCD Slice Cards <a class="header-anchor" href="#ccd-slice-card" title="Permalink to this heading">#</a></h2>
+        <div class="three-merch-cards ccd-slice">
             <merch-card><aem-fragment fragment="0ef2a804-e788-4959-abb8-b4d96a18b0ef"></aem-fragment></merch-card>
             <merch-card><aem-fragment fragment="c13897c7-de77-4e45-b23b-eec9fd66cad1"></aem-fragment></merch-card>  
-          </div>
-          <div>
-            <h3>Two icons & pricing</h3>
             <merch-card><aem-fragment fragment="58c7906f-70a6-4e2b-bc29-257ff2ade513"></aem-fragment></merch-card>
-          </div>
-          <div>
-            <h3>See Terms link</h3>
             <merch-card><aem-fragment fragment="51c23f28-504f-450d-9764-0e60f1e279b2"></aem-fragment></merch-card>
-          </div>
-          <div>
-            <h3>Arbitrary Text</h3>
             <merch-card><aem-fragment fragment="2a293069-1f9a-45ae-9840-2fa0303fe685"></aem-fragment></merch-card>
-          </div>
-          <div>
-            <h3>With Badge</h3>
             <merch-card><aem-fragment fragment="3d26df5b-0784-4967-8149-8a9e59131084"></aem-fragment></merch-card>
-          </div>
-        </div>
-
-        <h2 id="ccd-slice-wide-card" tabindex="-1">CCD Slice Wide Card <a class="header-anchor" href="#ccd-slice-wide-card" href="#ccd-slice-wide-card" title="Permalink to this heading">#</a></h2>
-        <div class="gallery-grid-1">
           <merch-card><aem-fragment fragment="bdf40d06-5914-4f1f-aa10-77c5676fe671"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="31205553-b453-4c9e-a2ef-7b6aa7bfdc72"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="f3e5f2e7-df41-4300-87b9-465b3ad11abc"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="c25b20cc-e8a3-4854-b94f-51eec7d0ec25"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="6b3c6c4e-e19f-4d08-914f-fcfd9f77ca14"></aem-fragment></merch-card>
         </div>
 
-        <h2 id="ccd-suggested-card" tabindex="-1">CCD Suggested Card <a class="header-anchor" href="#ccd-suggested-card" href="#ccd-suggested-card" title="Permalink to this heading">#</a></h2>
-        <div class="gallery-grid-3">
-          <div>
-            <h3>With eyebrow</h3>
+        <h2 id="ccd-suggested-card" tabindex="-1">CCD Suggested Cards <a class="header-anchor" href="#ccd-suggested-card" title="Permalink to this heading">#</a></h2>
+        <div class="three-merch-cards ccd-suggested">
             <merch-card><aem-fragment fragment="0a2ac7c9-1965-488e-beca-856849305313"></aem-fragment></merch-card>
-          </div>
-          <div>
-            <h3>See Terms link</h3>
             <merch-card><aem-fragment fragment="549f6981-f5c8-4512-b41c-313d60f375b2"></aem-fragment></merch-card>
-          </div>
-          <div>
-            <h3>No eyebrow, price with term</h3>
             <merch-card><aem-fragment fragment="8b198434-f32d-4a77-8be0-cd6b9f7155b1"></aem-fragment></merch-card>
-          </div>
-          <div>
-            <h3>With Image</h3>
             <merch-card><aem-fragment fragment="cdfae8c5-4129-43bc-a283-9ce46d07e21f"></aem-fragment></merch-card>
-          </div>
-          <div>
-            <h3>Starting at price & see terms</h3>
             <merch-card><aem-fragment fragment="33c8f437-3c39-48cc-8afd-938a13af5732"></aem-fragment></merch-card>
-          </div>
-          <div>
-            <h3>Image & longer price</h3>
             <merch-card><aem-fragment fragment="45783ec8-ed85-4595-a445-3f018ac4ad9d"></aem-fragment></merch-card>
-          </div>
-          <div>
-            <h3>Wide Image with eyebrow</h3>
             <merch-card><aem-fragment fragment="6217fb6d-e793-4235-af70-6f82401fc5de"></aem-fragment></merch-card>
-          </div>
-          <div>
-            <h3>Wide strip with seat text</h3>
             <merch-card><aem-fragment fragment="d23182d8-fc92-483d-bcfe-d1fe3d3ce737"></aem-fragment></merch-card>
-          </div>
-          </div>
       </div>
-    </sp-theme>
-    <script type="module">
-      if (new URLSearchParams(document.location.search)?.get('theme')?.toLowerCase() === 'dark') {
-        document.querySelector('sp-theme').setAttribute('color', 'dark');
-      }
-    </script>
+
+        <h2 id="various-cards" tabindex="-1">Free to update cards <a class="header-anchor" href="#various-cards" title="Permalink to this heading">#</a></h2>
+        <div class="flex-cards">
+          <merch-card><aem-fragment fragment="42e9a6bf-3b94-4b13-a2ba-184591308096"></aem-fragment></merch-card>
+          <merch-card><aem-fragment fragment="9744936c-94e4-4e78-806b-58dd63d02fd7"></aem-fragment></merch-card>
+          <merch-card><aem-fragment fragment="1ccfef82-9870-428c-b9fc-35770a21ae4f"></aem-fragment></merch-card>
+      </div>
+    </div>
   </main>
+  <script>
+          const theme = params.get('theme');
+          if (theme) toggleTheme(theme);
+  </script>
 </body>
 
 </html>
diff --git a/libs/features/mas/docs/checkout-link.html b/libs/features/mas/docs/checkout-link.html
@@ -6,6 +6,7 @@
     <title>M@S Web Components</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script type="module" src="../../../deps/custom-elements.js"></script>
+    <link rel="stylesheet" href="spectrum.css">
     <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
 
   <script>
@@ -16,10 +17,6 @@
       document.head.appendChild(meta);
       }
   </script>
-  <!-- Include your custom element script as an ES6 module -->
-  <script src="../../spectrum-web-components/dist/theme.js" type="module"></script>
-  <script src="../../spectrum-web-components/dist/action-button.js" type="module"></script>
-  <script src="../../spectrum-web-components/dist/button.js" type="module"></script>
   <script type="module" src="../dist/mas.js"></script>
 
   <script type="module">
@@ -38,9 +35,9 @@
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-<main>
-<sp-theme color="light" scale="medium">
-<h1 id="checkout-link" tabindex="-1">checkout-link <a class="header-anchor" href="#checkout-link" href="#checkout-link" title="Permalink to this heading">#</a></h1>
+<main class="spectrum spectrum--medium spectrum--light">
+  <div class="container">
+  <h1 id="checkout-link" tabindex="-1">checkout-link <a class="header-anchor" href="#checkout-link" href="#checkout-link" title="Permalink to this heading">#</a></h1>
 <h2 id="introduction" tabindex="-1">Introduction <a class="header-anchor" href="#introduction" href="#introduction" title="Permalink to this heading">#</a></h2>
 <p>This custom element renders a checkout link supporting most of the features documented at <a href="https://wiki.corp.adobe.com/pages/viewpage.action?spaceKey=businessservices&amp;title=UCv3+Link+Creation+Guide.">https://wiki.corp.adobe.com/pages/viewpage.action?spaceKey=businessservices&amp;title=UCv3+Link+Creation+Guide.</a><br>
 Sometimes a checkout-link can be also referred as placeholder, as it can be used as an inline link resolving at runtime.<br>
@@ -352,7 +349,7 @@ <h4 id="logs" tabindex="-1">Logs <a class="header-anchor" href="#logs" href="#lo
 <pre><code id="log" class="language-html">
 </code></pre>
 
-</sp-theme>
+  </div>
 </main>
 <script type="module">
   document.querySelectorAll('code.demo').forEach(el => {

diff --git a/libs/features/mas/docs/inline-price.html b/libs/features/mas/docs/inline-price.html
@@ -6,6 +6,7 @@
     <title>M@S Web Components</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script type="module" src="../../../deps/custom-elements.js"></script>
+    <link rel="stylesheet" href="spectrum.css">
     <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
 
   <script>
@@ -16,10 +17,6 @@
       document.head.appendChild(meta);
       }
   </script>
-  <!-- Include your custom element script as an ES6 module -->
-  <script src="../../spectrum-web-components/dist/theme.js" type="module"></script>
-  <script src="../../spectrum-web-components/dist/action-button.js" type="module"></script>
-  <script src="../../spectrum-web-components/dist/button.js" type="module"></script>
   <script type="module" src="../dist/mas.js"></script>
 
   <script type="module">
@@ -38,9 +35,9 @@
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-<main>
-<sp-theme color="light" scale="medium">
-<h1 id="inline-price" tabindex="-1">inline-price <a class="header-anchor" href="#inline-price" href="#inline-price" title="Permalink to this heading">#</a></h1>
+<main class="spectrum spectrum--medium spectrum--light">
+  <div class="container">
+  <h1 id="inline-price" tabindex="-1">inline-price <a class="header-anchor" href="#inline-price" href="#inline-price" title="Permalink to this heading">#</a></h1>
 <h2 id="introduction" tabindex="-1">Introduction <a class="header-anchor" href="#introduction" href="#introduction" title="Permalink to this heading">#</a></h2>
 <p>This custom element renders an inline price supporting various display options and configurations. It retrieves pricing information from WCS based on the provided Offer Selector ID.</p>
 <p>See <a href="mas.html#terminology">MAS</a> to learn more.</p>
@@ -314,7 +311,7 @@ <h4 id="logs" tabindex="-1">Logs <a class="header-anchor" href="#logs" href="#lo
 <pre><code id="log" class="language-html">
 </code></pre>
 
-</sp-theme>
+  </div>
 </main>
 <script type="module">
   document.querySelectorAll('code.demo').forEach(el => {

diff --git a/libs/features/mas/docs/mas.html b/libs/features/mas/docs/mas.html
@@ -6,6 +6,7 @@
     <title>M@S Web Components</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script type="module" src="../../../deps/custom-elements.js"></script>
+    <link rel="stylesheet" href="spectrum.css">
     <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
 
   <script>
@@ -16,10 +17,6 @@
       document.head.appendChild(meta);
       }
   </script>
-  <!-- Include your custom element script as an ES6 module -->
-  <script src="../../spectrum-web-components/dist/theme.js" type="module"></script>
-  <script src="../../spectrum-web-components/dist/action-button.js" type="module"></script>
-  <script src="../../spectrum-web-components/dist/button.js" type="module"></script>
   <script type="module" src="../dist/mas.js"></script>
 
   <script type="module">
@@ -38,9 +35,9 @@
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-<main>
-<sp-theme color="light" scale="medium">
-<h1 id="merch-at-scale-(mas)" tabindex="-1">Merch At Scale (MAS) <a class="header-anchor" href="#merch-at-scale-(mas)" href="#merch-at-scale-(mas)" title="Permalink to this heading">#</a></h1>
+<main class="spectrum spectrum--medium spectrum--light">
+  <div class="container">
+  <h1 id="merch-at-scale-(mas)" tabindex="-1">Merch At Scale (MAS) <a class="header-anchor" href="#merch-at-scale-(mas)" href="#merch-at-scale-(mas)" title="Permalink to this heading">#</a></h1>
 <h2 id="table-of-contents" tabindex="-1">Table of Contents <a class="header-anchor" href="#table-of-contents" href="#table-of-contents" title="Permalink to this heading">#</a></h2>
 <ol>
 <li><a href="#introduction">Introduction</a></li>
@@ -105,7 +102,7 @@ <h2 id="analytics" tabindex="-1">Analytics <a class="header-anchor" href="#analy
 <p>Example: if you have 5 cards with buy-now cta on your page, you can take a combination of merch-card daa-lh and link daa-ll:
 ${daa-lh}–${daa-ll}: will result in ‘phlt–buy-now-2’.</p>
 
-</sp-theme>
+  </div>
 </main>
 <script type="module">
   document.querySelectorAll('code.demo').forEach(el => {

diff --git a/libs/features/mas/docs/mas.js.html b/libs/features/mas/docs/mas.js.html
@@ -6,6 +6,7 @@
     <title>M@S Web Components</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script type="module" src="../../../deps/custom-elements.js"></script>
+    <link rel="stylesheet" href="spectrum.css">
     <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
 
   <script>
@@ -16,10 +17,6 @@
       document.head.appendChild(meta);
       }
   </script>
-  <!-- Include your custom element script as an ES6 module -->
-  <script src="../../spectrum-web-components/dist/theme.js" type="module"></script>
-  <script src="../../spectrum-web-components/dist/action-button.js" type="module"></script>
-  <script src="../../spectrum-web-components/dist/button.js" type="module"></script>
   <script type="module" src="../dist/mas.js"></script>
 
   <script type="module">
@@ -38,9 +35,9 @@
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-<main>
-<sp-theme color="light" scale="medium">
-<h1 id="mas.js" tabindex="-1">mas.js <a class="header-anchor" href="#mas.js" href="#mas.js" title="Permalink to this heading">#</a></h1>
+<main class="spectrum spectrum--medium spectrum--light">
+  <div class="container">
+  <h1 id="mas.js" tabindex="-1">mas.js <a class="header-anchor" href="#mas.js" href="#mas.js" title="Permalink to this heading">#</a></h1>
 <h2 id="introduction" tabindex="-1">Introduction <a class="header-anchor" href="#introduction" href="#introduction" title="Permalink to this heading">#</a></h2>
 <p>This is a javasript library that enables M@S on any web surface.</p>
 <p>mas.js includes the followings custom elements:</p>
@@ -634,7 +631,7 @@ <h3 id="supported-locales" tabindex="-1">Supported locales <a class="header-anch
 </tbody>
 </table>
 
-</sp-theme>
+  </div>
 </main>
 <script type="module">
   document.querySelectorAll('code.demo').forEach(el => {