zoralabDIALOG Technical Specification - ZORALab's Hestia

Main Purpose

This package's primary purpose is to provide user interface (UI) styling specifically for dialog values. In web UI, it is shown as follows:

Open Dialog

Legacy Recording

This package was known as dialog_hestiaUI before ZORALab's Hestia v1.2.0. The transformation was due to someone attempting to steal the copyrights and makes way for programming package's documentation restructuring.

Designers

This component was designed by the following creators:

Dependencies

This component has the following dependencies (arranged in the order from left-top to right-bottom):

HTML

For HTML, ZORALab's Hestia employs the W3C native syntax for simplicity and maximum compatibility sakes. ZORALab's Hestia recommends the following HTML code structure for this component.

Minimum HTML

The minimum required HTML codes are shown below:

<main>
	...
	<button onclick='document.getElementById("...DIALOG_ID1...").showModal()'>Open</button>
	...
</main>
<footer>
	...
	<button onclick='document.getElementById("...DIALOG_ID1...").showModal()'>Open</button>
	...
</footer>

...

<dialog id="...DIALOG_ID1...">
	...
	<form method="dialog"><button>Close</button></form>
</dialog>

REMEMBER: It's A Special HTML

You must keep in mind that the dialog HTML syntax is a very special one where its operating CSS and Javascript variables and control values are reserved for proper operations. Known CSS attributes that are forbidden from overriding are:

display
width
height
tabindex (completely forbidden)
::backdrop (only in CSS 'style' syntax)

CSS

ZORALab's Hestia heavily rely on CSS to style this component and offering its css variables for customizations. Below are the list of available CSS variables at your disposal.

Border

Affects the border of the rendered component.

VARIABLE     : --dialog-border
CSS PROPERTY : border
DEFAULT      : 2px solid transparent (>= v1.2.0)

Border Radius

Affects the border radius of the rendered component.

VARIABLE     : --dialog-border-radius
CSS PROPERTY : border-radius
DEFAULT      : .5rem (>= v1.2.0)

Min-Width

Affects the minimum width of the rendered component.

VARIABLE     : --dialog-min-width
CSS PROPERTY : min-width
DEFAULT      : initial (>= v1.2.0)

Max-Width

Affects the maximum width of the rendered component.

VARIABLE     : --dialog-max-width
CSS PROPERTY : max-width
DEFAULT      : 100% (>= v1.2.0)

Min-Height

Affects the minimum height of the rendered component.

VARIABLE     : --dialog-min-height
CSS PROPERTY : min-height
DEFAULT      : initial (>= v1.2.0)

Max-Height

Affects the maximum height of the rendered component.

VARIABLE     : --dialog-max-height
CSS PROPERTY : max-height
DEFAULT      : initial (>= v1.2.0)

Color

Affects the color of the rendered component.

VARIABLE     : --dialog-color
CSS PROPERTY : color
DEFAULT      : var(--body-color) (>= v1.2.0)

Background

Affects the background of the rendered component.

VARIABLE     : --dialog-background
CSS PROPERTY : background
DEFAULT      : var(--body-background) (>= v1.2.0)

Timing

Affects the animation timing of the rendered component.

VARIABLE     : --dialog-timing
CSS PROPERTY : transition (opacity)
DEFAULT      : var(--timing-rapid) (>= v1.2.0)

JavaScript

Fortunately, this component does not use any JavaScript. Relax.

ToCSS

Render the CSS output for this UI component.

Hugo

Usage example:

{{- $ret := partial "hestiaGUI/zoralabDIALOG/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>