@ui-doc/html-renderer 0.3.0 → 1.0.0

package/styles/02_utils/margin.css

@@ -0,0 +1,150 @@
+/**
+  * Using `margin` to add margins top, right, bottom and left to your element.
+  * Possible variables are:
+  * - **--[space]** - set direclty a spacing unit
+  * - **--space-[space]** - set a predefined space
+  *
+  * Possible <spaces> are:
+  * - **mt** - margin-top
+  * - **mr** - margin-right
+  * - **mb** - margin-bottom
+  * - **ml** - margin-left
+  *
+  * @location utils.margin Margin
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="margin bg bg-white">text</div>
+  * </div>
+  */
+.margin,
+.mxy {
+  margin: var(--mt, calc(var(--space-unit) * var(--space-mt, var(--space-normal))))
+    var(--mr, calc(var(--space-unit) * var(--space-mr, var(--space-normal))))
+    var(--mb, calc(var(--space-unit) * var(--space-mb, var(--space-normal))))
+    var(--ml, calc(var(--space-unit) * var(--space-ml, var(--space-normal))));
+}
+
+/**
+  * Using `mt` to add margin top to your element.
+  * Possible variables are:
+  * - **--mt** - set direclty a spacing unit
+  * - **--space-mt** - set a predefined space
+  *
+  * @location utils.margin.top Margin top
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="mt bg bg-white">text</div>
+  * </div>
+  */
+.mt,
+.my {
+  margin-top: var(--mt, calc(var(--space-unit) * var(--space-mt, var(--space-normal))));
+}
+
+/**
+  * Using `mr` to add margin right to your element.
+  * Possible variables are:
+  * - **--mr** - set direclty a spacing unit
+  * - **--space-mr** - set a predefined space
+  *
+  * @location utils.margin.right Margin right
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="mr bg bg-white">text</div>
+  * </div>
+  */
+.mr,
+.mx {
+  margin-right: var(--mr, calc(var(--space-unit) * var(--space-mr, var(--space-normal))));
+}
+
+/**
+  * Using `mb` to add margin bottom to your element.
+  * Possible variables are:
+  * - **--mb** - set direclty a spacing unit
+  * - **--space-mb** - set a predefined space
+  *
+  * @location utils.margin.bottom Margin bottom
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="mb bg bg-white">text</div>
+  * </div>
+  */
+.mb,
+.my {
+  margin-bottom: var(--mb, calc(var(--space-unit) * var(--space-mb, var(--space-normal))));
+}
+
+/**
+  * Using `ml` to add margin left to your element.
+  * Possible variables are:
+  * - **--ml** - set direclty a spacing unit
+  * - **--space-ml** - set a predefined space
+  *
+  * @location utils.margin.left Margin left
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="ml bg bg-white">text</div>
+  * </div>
+  */
+.ml,
+.mx {
+  margin-left: var(--ml, calc(var(--space-unit) * var(--space-ml, var(--space-normal))));
+}
+
+/**
+  * Using `mxy` to add margin for the x and y axies to your element.
+  * Possible variables are:
+  * - **--[space]** - set direclty a spacing unit
+  * - **--space-[space]** - set a predefined space
+  *
+  * Possible <spaces> are:
+  * - **my** - margin-top and margin-bottom
+  * - **mx** - margin-left and margin-right
+
+  * @location utils.margin.xy Margin y-axis and x-axis
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="mxy bg bg-white">text</div>
+  * </div>
+  */
+.mxy {
+  --mt: var(--my, calc(var(--space-unit) * var(--space-my, var(--space-normal))));
+  --mb: var(--my, calc(var(--space-unit) * var(--space-my, var(--space-normal))));
+  --ml: var(--mx, calc(var(--space-unit) * var(--space-mx, var(--space-normal))));
+  --mr: var(--mx, calc(var(--space-unit) * var(--space-mx, var(--space-normal))));
+}
+
+/**
+  * Using `my` to add margins tob and bottom with same size to your element.
+  * Possible variables are:
+  * - **--my** - set direclty a spacing unit
+  * - **--space-my** - set a predefined space
+  *
+  * @location utils.margin.y Margin y-axis
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="my bg bg-white">text</div>
+  * </div>
+  */
+.my {
+  --mt: var(--my, calc(var(--space-unit) * var(--space-my, var(--space-normal))));
+  --mb: var(--my, calc(var(--space-unit) * var(--space-my, var(--space-normal))));
+}
+
+/**
+  * Using `mx` to add margins left and right with same size to your element.
+  * Possible variables are:
+  * - **--mx** - set direclty a spacing unit
+  * - **--space-mx** - set a predefined space
+  *
+  * @location utils.margin.x Margin x-axis
+  * @example
+  * <div class="bg bg-black" style="display: flow-root;">
+  *   <div class="mx bg bg-white">text</div>
+  * </div>
+  */
+.mx {
+  --ml: var(--mx, calc(var(--space-unit) * var(--space-mx, var(--space-normal))));
+  --mr: var(--mx, calc(var(--space-unit) * var(--space-mx, var(--space-normal))));
+}

package/styles/02_utils/padding.css

@@ -0,0 +1,134 @@
+/**
+  * Using `padding` to add paddings top, right, bottom and left to your element.
+  * Possible variables are:
+  * - **--[space]** - set direclty a spacing unit
+  * - **--space-[space]** - set a predefined space
+  *
+  * Possible <spaces> are:
+  * - **pt** - padding-top
+  * - **pr** - padding-right
+  * - **pb** - padding-bottom
+  * - **pl** - padding-left
+  *
+  * @location utils.padding Padding
+  * @example
+  * <div class="padding bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+.padding,
+.pxy {
+  padding: var(--pt, calc(var(--space-unit) * var(--space-pt, var(--space-normal))))
+    var(--pr, calc(var(--space-unit) * var(--space-pr, var(--space-normal))))
+    var(--pb, calc(var(--space-unit) * var(--space-pb, var(--space-normal))))
+    var(--pl, calc(var(--space-unit) * var(--space-pl, var(--space-normal))));
+}
+
+/**
+  * Using `pt` to add padding top to your element.
+  * Possible variables are:
+  * - **--pt** - set direclty a spacing unit
+  * - **--space-pt** - set a predefined space
+  *
+  * @location utils.padding.top Padding top
+  * @example
+  * <div class="pt bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+.pt,
+.py {
+  padding-top: var(--pt, calc(var(--space-unit) * var(--space-pt, var(--space-normal))));
+}
+
+/**
+  * Using `pr` to add padding right to your element.
+  * Possible variables are:
+  * - **--pr** - set direclty a spacing unit
+  * - **--space-pr** - set a predefined space
+  *
+  * @location utils.padding.right Padding right
+  * @example
+  * <div class="pr bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+.pr,
+.px {
+  padding-right: var(--pr, calc(var(--space-unit) * var(--space-pr, var(--space-normal))));
+}
+
+/**
+  * Using `pb` to add padding bottom to your element.
+  * Possible variables are:
+  * - **--pb** - set direclty a spacing unit
+  * - **--space-pb** - set a predefined space
+  *
+  * @location utils.padding.bottom Padding bottom
+  * @example
+  * <div class="pb bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+.pb,
+.py {
+  padding-bottom: var(--pb, calc(var(--space-unit) * var(--space-pb, var(--space-normal))));
+}
+
+/**
+  * Using `pl` to add padding left to your element.
+  * Possible variables are:
+  * - **--pl** - set direclty a spacing unit
+  * - **--space-pl** - set a predefined space
+  *
+  * @location utils.padding.left Padding left
+  * @example
+  * <div class="pl bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+.pl,
+.px {
+  padding-left: var(--pl, calc(var(--space-unit) * var(--space-pl, var(--space-normal))));
+}
+
+/**
+  * Using `pxy` to add padding for the x and y axies to your element.
+  * Possible variables are:
+  * - **--[space]** - set direclty a spacing unit
+  * - **--space-[space]** - set a predefined space
+  *
+  * Possible <spaces> are:
+  * - **my** - padding-top and padding-bottom
+  * - **mx** - padding-left and padding-right
+
+  * @location utils.padding.xy padding y-axis and x-axis
+  * @example
+  * <div class="pxy bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+.pxy {
+  --pt: var(--py, calc(var(--space-unit) * var(--space-py, var(--space-normal))));
+  --pb: var(--py, calc(var(--space-unit) * var(--space-py, var(--space-normal))));
+  --pl: var(--px, calc(var(--space-unit) * var(--space-px, var(--space-normal))));
+  --pr: var(--px, calc(var(--space-unit) * var(--space-px, var(--space-normal))));
+}
+
+/**
+  * Using `py` to add paddings tob and bottom with same size to your element.
+  * Possible variables are:
+  * - **--py** - set direclty a spacing unit
+  * - **--space-py** - set a predefined space
+  *
+  * @location utils.padding.y Padding y-axis
+  * @example
+  * <div class="py bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+.py {
+  --pt: var(--py, calc(var(--space-unit) * var(--space-py, var(--space-normal))));
+  --pb: var(--py, calc(var(--space-unit) * var(--space-py, var(--space-normal))));
+}
+
+/**
+  * Using `px` to add paddings left and right with same size to your element.
+  * Possible variables are:
+  * - **--px** - set direclty a spacing unit
+  * - **--space-px** - set a predefined space
+  *
+  * @location utils.padding.x Padding x-axis
+  * @example
+  * <div class="px bg bg-black"><div class="bg bg-white">text</div></div>
+  */
+.px {
+  --pl: var(--px, calc(var(--space-unit) * var(--space-px, var(--space-normal))));
+  --pr: var(--px, calc(var(--space-unit) * var(--space-px, var(--space-normal))));
+}

package/styles/02_utils/width.css

@@ -0,0 +1,39 @@
+/**
+  * Limit width of content. Use the `--width-content` variable to set the width and the `--width-min-offset-x` to
+  * set the minimum required space on the left and right side. If you want to offset the content a little bit but
+  * keep the same settings from `--width-content` and `--width-min-offset-x` you can use the `--width-content-offset`
+  * variable.
+  *
+  * @location utils.width Width (Content)
+  */
+[class^="width-"],
+[class*=" width-"] {
+  /* use padding to get content to a specific width https://css-tricks.com/using-max-for-an-inner-element-max-width/ */
+  --width-calc: max(
+    calc(var(--width-min-offset-x) - var(--width-content-offset, 0px)),
+    calc((100% - var(--width-content)) / 2 - var(--width-content-offset, 0px))
+  );
+
+  padding-inline: var(--width-calc);
+}
+
+/**
+  * @location utils.width.content Width base/default
+  * @example
+  * <div class="width-content">
+  *   <div class="bg bg-black" style="min-height: 1em"></div>
+  * </div>
+  */
+
+/* .width-content {} */
+
+/**
+  * @location utils.width.small Width small
+  * @example
+  * <div class="width-sm">
+  *   <div class="bg bg-black" style="min-height: 1em"></div>
+  * </div>
+  */
+.width-sm {
+  --width-content: var(--width-sm);
+}

package/styles/03_components/button.css

@@ -0,0 +1,42 @@
+/**
+  * Buttons extend the `.control` class and can be used with different html attributes.
+  *
+  * @location components.button Button
+  * @example
+  * <button class="btn">Button</button>
+  * <button class="btn" disabled>Button disabled</button>
+  * <a href="#" class="btn">Link Button</a>
+  * <input type="submit" class="btn" value="Submit button" />
+  */
+.btn {
+  --space-py: var(--btn-space-py, var(--space-xs));
+  --space-px: var(--btn-space-px, var(--space-sm));
+  --font-size: var(--btn-font-size, var(--font-size-normal));
+  --font-weight: var(--btn-font-weight, var(--font-weight-bold));
+
+  color: rgb(var(--btn-font-color, var(--font-color)));
+  background: rgb(var(--btn-bg-color, var(--bg-color)));
+  transition: all ease var(--btn-animation-time, var(--animation-time));
+}
+
+/**
+  * We are using the bg colors to modify the btn color. In combination with the accent color for hover effects.
+  *
+  * @location components.button.colors Colors
+  * @example
+  * <button class="btn bg-white">Button</button>
+  * <button class="btn bg-black">Button</button>
+  */
+.btn[class*="bg-"]:hover:not([aria-disabled="true"], [disabled], .no-hover) {
+  --btn-bg-color: var(--accent-color);
+}
+
+/**
+  * The hover effect when using bg colors is disabled when using disabled attributes. Or you can manually disable it with `.no-hover`.
+  *
+  * @location components.button.colors.hover Hover effect
+  * @example
+  * <button class="btn bg-black" aria-disabled="true">Disabled by aria</button>
+  * <button class="btn bg-black" disabled>Disabled</button>
+  * <button class="btn bg-black no-hover">No hover</button>
+  */

package/styles/03_components/colors.css

@@ -1,32 +1,20 @@
 .colors {
-  display: grid;
-  grid-template-columns: repeat(var(--colors-columns, 1), 1fr);
-  gap: var(--colors-gap, var(--size-normal));
-
-  @container content (width > 300px) {
-    --colors-columns: 2;
-  }
-
-  @container content (width > 620px) {
-    --colors-columns: 3;
-  }
-
-  @container content (width > 940px) {
-    --colors-columns: 4;
-  }
+  --grid-columns: 4;
+  --grid-item-min-width: 200px;
 }
 
 .colors > .item {
+  --space-px: var(--space-md);
+  --space-py: var(--space-xl);
+
   display: flex;
   flex-direction: column;
-  gap: var(--size-xs);
+  gap: calc(var(--space-xs) * var(--space-unit));
   justify-content: center;
 
-  padding: var(--size-xl) var(--size-md);
-
   text-align: center;
 
-  border: 1px solid rgb(var(--border-color, currentColor));
+  border: 1px solid rgb(var(--border-color, var(--font-color)));
 
   > .text {
     font-size: var(--font-size-md);

package/styles/03_components/container.css

@@ -0,0 +1,16 @@
+/**
+  * You can use the container class to wrap your content in a container.
+  *
+  * @location components.container Container
+  * @code
+  * <div class="container"></div>
+  */
+.container {
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}

package/styles/03_components/example-markup.css

@@ -1,11 +1,6 @@
 .example,
 .markup {
-  border: 1px solid rgb(var(--code-border-color, var(--border-color)));
-}
-
-.example,
-.markup > .code > .hljs {
-  padding: 1em;
+  border: 1px solid rgb(var(--code-border-color, var(--border-color, var(--font-color))));
 }
 
 .example {

package/styles/03_components/grid-auto.css

@@ -0,0 +1,49 @@
+/**
+  * Use the auto grid class to define your custom grid layouts. Please note, all columns will have the same width.
+  * We are using css variables to define the grid:
+  * - `--grid-columns` (required): define how many columns your grid should have
+  * - `--grid-item-min-width` (required): define the min width of the containing items, when you use a count of 4 and a item
+  *   width of  200px but there are only 650px availabe only three columns will be used. All items won't get smaller as
+  *   this number.
+  *
+  * Modify the gap of your grid:
+  * - `--gap-x` (optional): column (x-axis) gap - space between items - eg. 3rem
+  * - `--gap-y` (optional): row (y-axis) gap - space between items - eg. 3rem
+  * - `--gap` (optional): Define column (x-axis) and row (y-axis) gap - eg. 3rem
+  * - `--gap-space-x` (optional): Define column (x-axis) gap - use existing space variables - eg. var(--space-xs)
+  * - `--gap-space-y` (optional): Define row (y-axis) gap - use existing space variables - eg. var(--space-xs)
+  * - `--gap-space` (optional): Define column (x-axis) and row (y-axis) gap - use existing space variables - eg. var(--space-xs)
+  *
+  * If you need to redefine the gap in a inner auto grid you can use `unset` or `inital` as vairable value inn the inner grid to fallback to default.
+  *
+  * @location components.grid-auto Auto Grid
+  * @example
+  * <div class="grid-auto" style="--grid-columns: 3; --grid-item-min-width: 300px;">
+  *   <div class="bg bg-black pxy"></div>
+  *   <div class="bg bg-black pxy"></div>
+  *   <div class="bg bg-black pxy"></div>
+  *   <div class="bg bg-black pxy"></div>
+  *   <div class="bg bg-black pxy"></div>
+  * </div>
+  */
+.grid-auto {
+  /* https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/ */
+  --grid-gap-x: var(
+    --gap-x,
+    var(--gap, calc(var(--space-unit) * var(--gap-space-x, var(--gap-space, var(--space-normal)))))
+  );
+  --grid-gap-y: var(
+    --gap-y,
+    var(--gap, calc(var(--space-unit) * var(--gap-space-y, var(--gap-space, var(--space-normal)))))
+  );
+  --grid-gap-count: calc(var(--grid-columns) - 1);
+  --grid-total-gap-width: calc(var(--grid-gap-count) * var(--grid-gap-x));
+  --grid-item-max-width: calc((100% - var(--grid-total-gap-width)) / var(--grid-columns));
+
+  display: grid;
+  grid-gap: var(--grid-gap-y) var(--grid-gap-x);
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(max(var(--grid-item-min-width), var(--grid-item-max-width)), 1fr)
+  );
+}

package/styles/03_components/icons.css

@@ -1,32 +1,20 @@
 .icons {
-  display: grid;
-  grid-template-columns: repeat(var(--icons-columns, 1), 1fr);
-  gap: var(--icons-gap, var(--size-normal));
-
-  @container content (width > 300px) {
-    --icons-columns: 2;
-  }
-
-  @container content (width > 620px) {
-    --icons-columns: 3;
-  }
-
-  @container content (width > 940px) {
-    --icons-columns: 4;
-  }
+  --grid-columns: 4;
+  --grid-item-min-width: 200px;
 }
 
 .icons > .item {
+  --space-px: var(--space-md);
+  --space-py: var(--space-xl);
+
   display: flex;
   flex-direction: column;
-  gap: var(--size-xs);
+  gap: calc(var(--space-xs) * var(--space-unit));
   justify-content: center;
 
-  padding: var(--size-xl) var(--size-md);
-
   text-align: center;
 
-  border: 1px solid rgb(var(--border-color));
+  border: 1px solid rgb(var(--border-color, var(--font-color)));
 
   > .show,
   > .show::before,

package/styles/03_components/navigation/burger-control.css

@@ -0,0 +1,75 @@
+/**
+  * @location components.navigation.burger-control Navigation Burger Control
+  * @example
+  * <nav class="nav">
+  *   <button class="control burger" aria-label="Toggle Navigation" aria-expanded="false" aria-controls="target" style="--nav-burger-control-size: 3em; --space-px: .4; --space-py: .6">
+  *     <span class="line"></span>
+  *     <span class="line"></span>
+  *     <span class="line"></span>
+  *   </button>
+  *   <div id="target" hidden>Controlled Area</div>
+  * </nav>
+  */
+
+.nav-main .burger.control {
+  /* prettier-ignore */
+  --nav-burger-control-line-height-calc: var(--nav-burger-control-line-height, calc(
+    (
+      var(--nav-burger-control-size) -
+      (var(--py, calc(var(--space-unit) * var(--space-py))) * 2) -
+      (var(--nav-burger-control-line-space, var(--space-unit) / 2) * 2)
+    ) / 3
+  ));
+
+  position: relative;
+  width: calc(var(--nav-burger-control-size) * var(--nav-burger-control-width-multiplier, 1.4));
+  height: var(--nav-burger-control-size);
+}
+
+.nav-main .burger.control > .line {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  display: block;
+
+  width: calc(100% - var(--px, calc(var(--space-unit) * var(--space-px))) * 2);
+  height: var(--nav-burger-control-line-height-calc);
+
+  background: rgb(var(--font-color));
+
+  transition: all var(--nav-burger-animation-time, 0.3s) ease;
+
+  &:first-child {
+    transform: translate(
+      -50%,
+      calc(
+        -50% - var(--nav-burger-control-line-space, var(--space-unit) / 2) - var(--nav-burger-control-line-height-calc)
+      )
+    );
+  }
+
+  &:last-child {
+    transform: translate(
+      -50%,
+      calc(
+        -50% + var(--nav-burger-control-line-space, var(--space-unit) / 2) + var(--nav-burger-control-line-height-calc)
+      )
+    );
+  }
+}
+
+.nav-main .burger.control[aria-expanded="true"] > .line {
+  &:first-child {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  &:nth-child(2) {
+    display: none;
+  }
+
+  &:last-child {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+}

package/styles/03_components/{nav → navigation}/list.css

@@ -1,7 +1,7 @@
 .nav-list {
-  --nav-list-item-px: var(--size-sm);
-  --nav-list-item-py: var(--size-xs);
-  --nav-list-item-border-color: var(--border-color);
+  --nav-list-item-space-px: var(--space-sm);
+  --nav-list-item-space-py: var(--space-xs);
+  --nav-list-item-border-color: var(--border-color, var(--font-color));
 
   text-align: left;
 
@@ -15,23 +15,21 @@
     margin-top: var(--nav-list-root-item-space, var(--size-sm));
   }
 
-  .control {
-    &.active {
-      --font-color: var(--accent-color);
-    }
+  .control.active {
+    --font-color: var(--accent-color);
   }
 }
 
 .nav-list > ul > li > .control {
-  --py: var(--nav-list-item-py);
-  --pr: var(--nav-list-item-px);
+  --space-py: var(--nav-list-item-space-py);
+  --space-pr: var(--nav-list-item-space-px);
   --font-weight: var(--font-weight-bold);
   --font-size: var(--font-size-md);
 }
 
 .nav-list > ul > li > ul > li > .control {
-  --py: var(--nav-list-item-py);
-  --px: var(--nav-list-item-px);
+  --space-py: var(--nav-list-item-space-py);
+  --space-px: var(--nav-list-item-space-px);
 
   text-align: left;
   border-left: 1px solid rgba(var(--nav-list-item-border-color) / var(--border-opacity, 0.1));