@ui-doc/html-renderer 0.3.0 → 0.4.0

package/styles/01_resets/typography.css

@@ -1,3 +1,16 @@
+/**
+  * @location resets.typography Typography
+  */
+
+/**
+  * @location resets.typography.font Font Style
+  * @example
+  * <div style="font-weight: bold;">Bold | bold | 700</div>
+  * <div style="font-weight: normal;">Normal | normal | 400</div>
+  * <div style="font-weight: bold; font-style: italic;">Bold Italic</div>
+  * <div style="font-weight: normal; font-style: italic;">Normal Italic</div>
+  * @hideCode
+  */
 html {
   font-size: var(--font-size-base);
   -webkit-font-smoothing: antialiased;
@@ -7,7 +20,9 @@ html {
 }
 
 body,
-.font {
+.font,
+.control,
+.btn {
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
@@ -23,40 +38,122 @@ textarea {
   font-family: inherit;
 }
 
+/**
+  * You can use html headline tags or the class `.headline` to define headlines. The hedline class comes in handy if you want to display
+  * a headline without the semantic meaning of a headline tag.
+  *
+  * @location resets.typography.headlines Headlines
+  * @example
+  * <h1>Headline h1</h1>
+  * <h2>Headline h2</h2>
+  * <h3>Headline h3</h3>
+  * <h4>Headline h4</h4>
+  * <h5>Headline h5</h5>
+  * <h6>Headline h6</h6>
+  * <span class="headline h1">Class Headline h1</span>
+  * <span class="headline h2">Class Headline h2</span>
+  * <span class="headline h3">Class Headline h3</span>
+  * <span class="headline h4">Class Headline h4</span>
+  * <span class="headline h5">Class Headline h5</span>
+  * <span class="headline h6">Class Headline h6</span>
+  */
 h1,
 h2,
 h3,
 h4,
 h5,
-h6 {
+h6,
+.headline {
+  display: block;
+
+  margin-top: calc(var(--font-space-unit) * var(--headline-space, var(--space-normal)));
+  margin-bottom: 0;
+
   font-family: var(--headline-family, inherit);
   font-size: calc(var(--font-size-normal) * var(--headline-scale, 1));
-  font-weight: var(--headline-weight, inherit);
+  font-weight: var(--headline-weight, var(--font-weight-bold));
   line-height: var(--headline-line-height, inherit);
   color: rgb(var(--headline-color, inherit));
 }
 
-h1 {
+h1,
+.headline.h1 {
   --headline-scale: 2.5;
 }
 
-h2 {
+h2,
+.headline.h2 {
   --headline-scale: 2;
 }
 
-h3 {
+h3,
+.headline.h3 {
   --headline-scale: 1.75;
 }
 
-h4 {
+h4,
+.headline.h4 {
   --headline-scale: 1.5;
 }
 
+h5,
+.headline.h5 {
+  --headline-scale: 1.2;
+}
+
+h6,
+.headline.h6 {
+  --headline-scale: 1.1;
+}
+
+/**
+  * You can use the `.no-space` class to remove the margin from the headline class.
+  *
+  * @location resets.typography.headlines.no-space Headlines without space
+  * @example
+  * <span class="headline h1 no-space">Class Headline h1</span>
+  * <span class="headline h2 no-space">Class Headline h2</span>
+  */
+.headline.no-space {
+  --headline-space: 0;
+}
+
+/**
+  * @location resets.typography.text Text / Paragraph
+  * @example
+  * <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
+  * <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+  * <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+  */
+
+/* p {} */
+
+/**
+  * @location resets.typography.link Link
+  * @example
+  * <a href="#">Link Text</a>
+  */
 a {
   color: rgb(var(--link-color, inherit));
-  text-decoration: var(--link-decoration, none);
+  text-decoration: var(--link-decoration, underline);
+  transition: color ease var(--link-animation-time, var(--animation-time)) text-decoration ease
+    var(--link-animation-time, var(--animation-time));
+
+  &:hover {
+    --link-color: var(--link-hover-color, var(--accent-color));
+    --link-decoration: var(--link-hover-decoration, none);
+  }
 }
 
+/**
+  * @location resets.typography.format Format
+  * @example
+  * <span>Normal Text</span><br>
+  * <strong>Strong Text</strong><br>
+  * <small>Small Text</small><br>
+  * <em>Emphasis Text</em><br>
+  * <i>Italic Text</i>
+  */
 b,
 strong {
   --font-weight: var(--font-weight-bold);

package/styles/02_utils/background.css

@@ -0,0 +1,14 @@
+/**
+  * The `.bg` class can be used to set backgrounds, depending on the selected
+  * variant css variables will be changed, so all colors used inside will fit to
+  * the background.
+  *
+  * @location utils.background Background
+  */
+.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_utils/control.css

@@ -0,0 +1,41 @@
+/**
+  * The `.control` class is used as base for all controls either by extending or using the class directly.
+  *
+  * @location utils.control Control
+  * @example
+  * <a class="control">Link control</a><br>
+  * <button type="button" class="control">Button control</button><br>
+  * <button type="button" class="control" disabled>Button control disabeled</button><br>
+  * <button type="button" class="control no-hover">Disable hover effect</button><br>
+  */
+.control,
+.btn {
+  --space-px: 0;
+  --space-py: 0;
+
+  cursor: pointer;
+
+  display: inline-block;
+
+  padding: var(--py, calc(var(--space-unit) * var(--space-py)))
+    var(--px, calc(var(--space-unit) * var(--space-px)));
+
+  text-align: center;
+  text-decoration: none;
+  word-break: keep-all;
+
+  appearance: none;
+  background: rgb(var(--control-bg-color, transparent));
+  border: none;
+  border-radius: unset;
+  outline: none;
+
+  &:hover:not([aria-disabled="true"], [disabled], .btn[class*="bg-"], .no-hover) {
+    --font-color: var(--control-hover-color, var(--accent-color));
+  }
+
+  &[aria-disabled="true"],
+  &:disabled {
+    cursor: not-allowed;
+  }
+}

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 {