@ui-doc/html-renderer 0.2.0 → 0.4.0

package/templates/partials/section.html

@@ -1 +1 @@
-<section class="text-flow">{{partial:section-inner}}</section>
+<section class="container">{{partial:section-inner}}</section>

package/templates/partials/spaces.html

@@ -4,8 +4,8 @@
     class="item"
     style="--space-value: {{var:value.output}};"
   >
-    <div class="bg"></div>
-    <div class="bg">
+    <div class="bg pxy"></div>
+    <div class="bg pxy info">
       <span class="name">{{var:name}}</span>
       <span class="value">{{var:value.output}}</span>
       <span class="text">{{var:text}}</span>

package/dist/assets/src/base.d.ts

@@ -1 +0,0 @@
-export declare function ready(callback: () => void): void;

package/dist/types/index.d.ts

@@ -1,6 +0,0 @@
-export * from './base';
-export * from './lexer';
-export * from './parser';
-export * from './reader';
-export * from './renderer';
-export * from './token';

package/scripts/src/base.ts

@@ -1,7 +0,0 @@
-export function ready(callback: () => void) {
-  if (document.readyState !== 'loading') {
-    callback()
-  } else {
-    document.addEventListener('DOMContentLoaded', callback)
-  }
-}

package/scripts/src/example.ts

@@ -1,31 +0,0 @@
-export function initExample() {
-  document.querySelectorAll<HTMLIFrameElement>('[data-example] > iframe').forEach(iframe => {
-    const document = iframe.contentDocument ?? iframe.contentWindow?.document
-
-    if (!document) {
-      return
-    }
-
-    const action = () => {
-      const changeHeight = () => {
-        iframe.style.height = `${document.body.scrollHeight}px`
-      }
-
-      changeHeight()
-
-      const observer = new MutationObserver(changeHeight)
-
-      observer.observe(document.body, {
-        attributes: true,
-        childList: true,
-        subtree: true,
-      })
-    }
-
-    if (document.readyState === 'complete') {
-      action()
-    } else {
-      iframe.addEventListener('load', action)
-    }
-  })
-}

package/styles/02_objects/background.css

@@ -1,7 +0,0 @@
-.bg {
-  --selection-bg-color: var(--font-color);
-  --selection-color: var(--bg-color);
-
-  color: rgb(var(--font-color));
-  background: rgb(var(--bg-color));
-}

package/styles/02_objects/control.css

@@ -1,25 +0,0 @@
-.control {
-  --px: 0;
-  --py: 0;
-
-  @extend .pxy;
-  @extend .font;
-
-  cursor: pointer;
-
-  display: inline-block;
-
-  text-align: center;
-  text-decoration: none;
-
-  appearance: none;
-  background: rgb(var(--control-bg-color, transparent));
-  border: none;
-  border-radius: unset;
-  outline: none;
-
-  &[aria-disabled="true"],
-  &:disabled {
-    cursor: not-allowed;
-  }
-}

package/styles/02_objects/margin.css

@@ -1,44 +0,0 @@
-.margin,
-.mxy {
-  margin: var(--mt, var(--size-normal)) var(--mr, var(--size-normal)) var(--mb, var(--size-normal))
-    var(--ml, var(--size-normal));
-}
-
-.mt {
-  margin-top: var(--mt, var(--size-normal));
-}
-
-.mr {
-  margin-right: var(--mr, var(--size-normal));
-}
-
-.mb {
-  margin-bottom: var(--mb, var(--size-normal));
-}
-
-.ml {
-  margin-left: var(--ml, var(--size-normal));
-}
-
-.mxy {
-  --mt: var(--my, var(--size-normal));
-  --mb: var(--my, var(--size-normal));
-  --ml: var(--mx, var(--size-normal));
-  --mr: var(--mx, var(--size-normal));
-}
-
-.my {
-  --mt: var(--my, var(--size-normal));
-  --mb: var(--my, var(--size-normal));
-
-  @extend .mt;
-  @extend .mb;
-}
-
-.mx {
-  --ml: var(--mx, var(--size-normal));
-  --mr: var(--mx, var(--size-normal));
-
-  @extend .ml;
-  @extend .mr;
-}

package/styles/02_objects/padding.css

@@ -1,44 +0,0 @@
-.padding,
-.pxy {
-  padding: var(--pt, var(--size-normal)) var(--pr, var(--size-normal)) var(--pb, var(--size-normal))
-    var(--pl, var(--size-normal));
-}
-
-.pt {
-  padding-top: var(--pt, var(--size-normal));
-}
-
-.pr {
-  padding-right: var(--pr, var(--size-normal));
-}
-
-.pb {
-  padding-bottom: var(--pb, var(--size-normal));
-}
-
-.pl {
-  padding-left: var(--pl, var(--size-normal));
-}
-
-.pxy {
-  --pt: var(--py, var(--size-normal));
-  --pb: var(--py, var(--size-normal));
-  --pl: var(--px, var(--size-normal));
-  --pr: var(--px, var(--size-normal));
-}
-
-.py {
-  --pt: var(--py, var(--size-normal));
-  --pb: var(--py, var(--size-normal));
-
-  @extend .pt;
-  @extend .pb;
-}
-
-.px {
-  --pl: var(--px, var(--size-normal));
-  --pr: var(--px, var(--size-normal));
-
-  @extend .pl;
-  @extend .pr;
-}

package/styles/02_objects/text.css

@@ -1,3 +0,0 @@
-.tc {
-  color: rgb(var(--font-color));
-}

package/styles/02_objects/width.css

@@ -1,16 +0,0 @@
-[class*="width-"] {
-  --width-calc: max(
-    var(--width-min-space-x, 32px),
-    calc((100% - var(--width-content, 1280px)) / 2)
-  );
-
-  padding-inline: var(--width-calc);
-}
-
-.width-content {
-  --width-content: 1280px;
-}
-
-.width-full {
-  --width: 100%;
-}

package/styles/03_components/nav/main.css

@@ -1,39 +0,0 @@
-.nav-main {
-  @extend .bg;
-}
-
-.nav-main > .bar {
-  height: var(--nav-main-height);
-
-  > .control.title {
-    --px: var(--nav-main-menu-item-px);
-    --py: var(--nav-main-menu-item-py);
-    --font-weight: var(--font-weight-bold);
-  }
-}
-
-.nav-main > .menu {
-  position: absolute;
-  top: 0;
-  right: calc(var(--width-calc) - var(--nav-main-menu-item-px));
-
-  display: flex;
-  flex-direction: row;
-
-  height: var(--nav-main-height);
-
-  > .control {
-    --px: var(--nav-main-menu-item-px);
-    --py: var(--nav-main-menu-item-py);
-    --font-size: var(--nav-main-menu-item-font-size);
-    --font-weight: var(--font-weight-bold);
-
-    &[aria-current] {
-      --font-color: var(--accent-color);
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}

package/styles/03_components/text-flow.css

@@ -1,5 +0,0 @@
-.text-flow {
-  > * + * {
-    margin-top: var(--text-flow-space, 1em);
-  }
-}

package/styles/04_layouts/page.css

@@ -1,70 +0,0 @@
-html {
-  scroll-behavior: smooth;
-  scrollbar-gutter: stable;
-  scroll-padding-top: var(--nav-main-height);
-  height: 100%;
-}
-
-html > body {
-  min-height: 100%;
-}
-
-body > header {
-  padding-top: var(--nav-main-height);
-
-  > .nav-main {
-    position: fixed;
-    z-index: 1000;
-    top: 0;
-    width: 100%;
-  }
-}
-
-body > main {
-  --main-sidebar-width: 25ch;
-  --main-content-sidebar-space: var(--size-xl);
-
-  position: relative;
-}
-
-body > main > .sidebar {
-  position: absolute;
-  top: 0;
-  left: var(--width-calc);
-
-  width: var(--main-sidebar-width);
-  height: 100%;
-
-  > .scroll {
-    position: sticky;
-    top: var(--nav-main-height);
-
-    overflow-y: auto;
-
-    height: 100%;
-    max-height: calc(100vh - var(--nav-main-height));
-  }
-}
-
-body > main > .content {
-  container-name: content;
-  container-type: inline-size;
-  margin-left: calc(var(--main-sidebar-width) + var(--main-content-sidebar-space));
-
-  > .headline + .description {
-    margin-top: var(--size-md);
-  }
-
-  > section + section,
-  > section:first-of-type {
-    margin-top: var(--main-content-section-space, var(--size-lg));
-  }
-}
-
-footer {
-  --mt: var(--size-xl);
-
-  > .text {
-    text-align: right;
-  }
-}