feat(doc-layout): migrate to new mdjs-layout from @divriots/dockit-core

divriots · Dec 9, 2021 · ef53f27 · ef53f27
1 parent 007f7d0
commit ef53f27
Show file tree

Hide file tree

Showing 39 changed files with 3,099 additions and 2,128 deletions.
diff --git a/borders/doc/index.md b/borders/doc/index.md
@@ -3,7 +3,6 @@
 ```js script
 import { html } from '~/core';
 import '~/token-display';
-import '~/doc-styles';
 import { borderRadiusMixin as _borderRadiusMixin } from '../src/radius.css.js';
 ```
 

diff --git a/button/doc/index.md b/button/doc/index.md
@@ -4,7 +4,6 @@ Button web component.
 
 ```js script
 import { html } from '~/core'
-import '~/doc-styles';
 import '../simba-button.js';
 ```
 

diff --git a/checkbox-group/doc/index.md b/checkbox-group/doc/index.md
@@ -6,7 +6,6 @@ Checkbox group Webcomponent.
 import { html } from '~/core';
 import { localize } from '~/localize';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
-import '~/doc-styles';
 import '../simba-checkbox.js';
 import '../simba-checkbox-indeterminate.js';
 import '../simba-checkbox-group.js';

diff --git a/collapsible/doc/index.md b/collapsible/doc/index.md
@@ -4,7 +4,6 @@ Collapsible component, folds out content.
 
 ```js script
 import { html } from '~/core';
-import '~/doc-styles';
 import '../simba-collapsible.js';
 import '../simba-collapsible-button.js';
 import '~/button/simba-button.js';

diff --git a/colors/doc/index.md b/colors/doc/index.md
@@ -3,7 +3,6 @@
 ```js script
 import { html } from '~/core'
 import '~/token-display';
-import '~/doc-styles';
 import {
   coolGray as coolGrayTokens,
   red as redTokens,

diff --git a/dialog/doc/index.md b/dialog/doc/index.md
@@ -11,7 +11,6 @@ The frame acts as a visual container and allows adding an easy to use close butt
 ```js script
 import { html } from '~/core';
 import '~/button/simba-button.js';
-import '~/doc-styles';
 import '../simba-dialog.js';
 import '../simba-dialog-frame.js';
 import { emerald, coolGray } from '~/colors';

diff --git a/doc-styles/src/ColorToggler.js → doc-layout/src/color-toggler.js b/doc-styles/src/ColorToggler.js → doc-layout/src/color-toggler.js
@@ -9,9 +9,8 @@ export class ColorToggler extends LitElement {
       css`
         :host {
           display: flex;
-          max-width: 125px;
+          max-width: calc(1.25rem * 4 + 4px * 2 * 4);
           flex-wrap: wrap;
-          margin: 0 10px;
         }
 
         .radio {
@@ -96,3 +95,5 @@ export class ColorToggler extends LitElement {
     setTheme(newColor);
   }
 }
+
+customElements.define('color-toggler', ColorToggler);
diff --git a/doc-layout/src/logo.svg b/doc-layout/src/logo.svg
diff --git a/doc-layout/src/template.js b/doc-layout/src/template.js
@@ -0,0 +1,53 @@
+import '@divriots/dockit-core/mdjs-layout/define';
+import { breakpoints, styles } from '@divriots/dockit-core/mdjs-layout';
+import { html, unsafeHTML } from '~/core';
+import './color-toggler';
+import logoSvg from './logo.svg?raw';
+
+export const docLayoutTemplate = (content, context) => html`
+  <style>
+    ${unsafeHTML(styles)} .logo {
+      color: #f59e0b;
+    }
+    .topbar {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: right;
+    }
+    @media screen and (min-width: ${breakpoints.lg}) {
+      .topbar {
+        justify-content: unset;
+      }
+    }
+    .preview-story .story_padded {
+      background-color: var(--simba-bg-color);
+      color: var(--simba-text-color);
+    }
+    html.dark .preview-story .story_padded {
+      background-color: var(--simba-bg-color-dark);
+      color: var(--simba-text-color-dark);
+    }
+  </style>
+  <mdjs-layout
+    .context="${context}"
+    @color-scheme-change="${(event) => {
+      if (event.detail.colorScheme === 'dark') {
+        document.documentElement.classList.add('dark');
+        document.documentElement.setAttribute('theme', 'dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+        document.documentElement.setAttribute('theme', 'light');
+      }
+    }}"
+  >
+    <div class="logo" slot="logo" aria-label="starter-simba">
+      ${unsafeHTML(logoSvg)}
+    </div>
+    <div class="topbar" slot="topbar">
+      Themes:&nbsp;
+      <color-toggler></color-toggler>
+    </div>
+    <div class="prose dark:prose-dark">${unsafeHTML(content)}</div>
+  </mdjs-layout>
+`;
diff --git a/doc-styles/color-toggler.js b/doc-styles/color-toggler.js
diff --git a/doc-styles/docs-menu.js b/doc-styles/docs-menu.js
diff --git a/doc-styles/index.js b/doc-styles/index.js
diff --git a/doc-styles/src/DocsMenu.js b/doc-styles/src/DocsMenu.js
diff --git a/doc-styles/src/index.js b/doc-styles/src/index.js
diff --git a/doc-styles/src/styles.css b/doc-styles/src/styles.css
diff --git a/form-core/doc/index.md b/form-core/doc/index.md
@@ -2,7 +2,6 @@
 
 ```js script
 import { html } from '~/core';
-import '~/doc-styles';
 ```
 
 The form-core package is an umbrella package for form-related utilities, two examples:

diff --git a/icons/doc/index.md b/icons/doc/index.md
@@ -4,7 +4,6 @@ Icon resolution manager. Ensures icons are bundled into iconsets and asynchronou
 
 ```js script
 import { html } from '~/core'
-import '~/doc-styles';
 import '../simba-icon.js';
 ```
 

diff --git a/input-amount/doc/index.md b/input-amount/doc/index.md
@@ -7,7 +7,6 @@ import { html } from '~/core';
 import { Required, Validator } from '~/form-core';
 import { localize } from '~/localize';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
-import '~/doc-styles';
 import '../simba-input-amount.js';
 
 loadDefaultFeedbackMessages();

diff --git a/input-date/doc/index.md b/input-date/doc/index.md
@@ -7,7 +7,6 @@ import { html } from '~/core';
 import { Required, Validator } from '~/form-core';
 import { localize } from '~/localize';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
-import '~/doc-styles';
 import '../simba-input-date.js';
 
 loadDefaultFeedbackMessages();

diff --git a/input-datepicker/doc/index.md b/input-datepicker/doc/index.md
@@ -7,7 +7,6 @@ import { html } from '~/core';
 import { Required, Validator } from '~/form-core';
 import { localize } from '~/localize';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
-import '~/doc-styles';
 import '../simba-input-datepicker.js';
 
 loadDefaultFeedbackMessages();

diff --git a/input-email/doc/index.md b/input-email/doc/index.md
@@ -7,7 +7,6 @@ import { html } from '~/core';
 import { Required } from '~/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { localize } from '~/localize';
-import '~/doc-styles';
 import '../simba-input-email.js';
 
 loadDefaultFeedbackMessages();

diff --git a/input-iban/doc/index.md b/input-iban/doc/index.md
@@ -7,7 +7,6 @@ import { html } from '~/core';
 import { Required, Validator } from '~/form-core';
 import { localize } from '~/localize';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
-import '~/doc-styles';
 import '../simba-input-iban.js';
 
 loadDefaultFeedbackMessages();

diff --git a/input-range/doc/index.md b/input-range/doc/index.md
@@ -7,7 +7,6 @@ import { html } from '~/core';
 import { Required, Validator } from '~/form-core';
 import { localize } from '~/localize';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
-import '~/doc-styles';
 import '../simba-input-range.js';
 
 loadDefaultFeedbackMessages();

diff --git a/input-stepper/doc/index.md b/input-stepper/doc/index.md
@@ -7,7 +7,6 @@ import { html } from '~/core';
 import { Required, Validator } from '~/form-core';
 import { localize } from '~/localize';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
-import '~/doc-styles';
 import '../simba-input-stepper.js';
 
 loadDefaultFeedbackMessages();