Version Packages

packages/mdjs-preview/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @mdjs/mdjs-preview
 
+## 0.5.6
+
+### Patch Changes
+
+- e81b77f: Change theme attribute into preview-theme attribute to separate theme styling of the preview section and the full mdjs viewer.
+- 456b8e7: Add css variable to style border-color of the mdjs-viewer
+
 ## 0.5.5
 
 ### Patch Changes

packages/mdjs-preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdjs/mdjs-preview",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "publishConfig": {
     "access": "public"
   },

packages/mdjs-preview/src/MdJsPreview.js

@@ -61,7 +61,7 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
       platforms: { type: Array },
       size: { type: String },
       sizes: { type: Array },
-      theme: { type: String, reflect: true },
+      previewTheme: { type: String, reflect: true, attribute: 'preview-theme' },
       themes: { type: Array },
       language: { type: String },
       languages: { type: Array },
@@ -82,7 +82,7 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
     this.__supportsClipboard = 'clipboard' in navigator;
     this.__copyButtonText = 'Copy Code';
 
-    this.theme = 'light';
+    this.previewTheme = 'light';
     /** @type {{ key: string, name: string }[]} */
     this.themes = [
       // { key: 'light', name: 'Light' },
@@ -286,7 +286,7 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
     const params = new URLSearchParams();
     params.set('story-file', sanitize(mdjsSetupScript.src, 'js'));
     params.set('story-key', this.key);
-    params.set('theme', this.theme);
+    params.set('theme', this.previewTheme);
     params.set('platform', this.platform);
     params.set('language', this.language);
     params.set('edge-distance', this.edgeDistance.toString());
@@ -439,20 +439,20 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
           @change=${
             /** @param {Event} ev */ ev => {
               if (ev.target) {
-                this.theme = /** @type {HTMLInputElement} */ (ev.target).value;
+                this.previewTheme = /** @type {HTMLInputElement} */ (ev.target).value;
               }
             }
           }
         >
           ${this.themes.map(
-            theme => html`
+            previewTheme => html`
-              <label class="${this.theme === theme.key ? 'selected' : ''}">
+              <label class="${this.previewTheme === previewTheme.key ? 'selected' : ''}">
-                <span>${theme.name}</span>
+                <span>${previewTheme.name}</span>
                 <input
                   type="radio"
                   name="theme"
-                  value="${theme.key}"
+                  value="${previewTheme.key}"
-                  ?checked=${this.theme === theme.key}
+                  ?checked=${this.previewTheme === previewTheme.key}
                 />
               </label>
             `,
@@ -686,11 +686,11 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
       }
 
       :host(:not([device-mode])) #wrapper {
-        border: 2px solid #4caf50;
+        border: 2px solid var(--primary-lines-color, #4caf50);
       }
 
       iframe {
-        border: 2px solid #4caf50;
+        border: 2px solid var(--primary-lines-color, #4caf50);
         background: #fff;
       }
 

packages/mdjs-preview/src/mdjsViewerSharedStates.js

@@ -1,7 +1,7 @@
 const _sharedStates = {
   platform: 'web',
   size: 'webSmall',
-  theme: 'light',
+  previewTheme: 'light',
   language: 'en',
   autoHeight: true,
   deviceMode: false,