zoralabBUTTON Technical Specification - ZORALab's Hestia

Main Purpose

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

An Enabled Button A Disabled Button

Legacy Recording

This package was known as button_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:

<a class="button" ...>...</a>

<button>...</button>

Disabled Button HTML

The disabled button HTML codes are shown below:

<button disabled>...</button>

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.

Display

Affects the display mode of the rendered component.

VARIABLE     : --button-display
CSS PROPERTY : display
DEFAULT      : inline-block (>= v1.2.0)

Opacity

Affects the opacity of the rendered component.

VARIABLE     : --button-opacity
CSS PROPERTY : opacity
DEFAULT      : 1 (>= v1.2.0)

Opacity (Disabled)

Affects the opacity of the rendered component when disabled.

VARIABLE     : --button-opacity-disabled
CSS PROPERTY : opacity
DEFAULT      : .3 (>= v1.2.0)

Margin

Affects the margin of the rendered component.

VARIABLE     : --button-margin
CSS PROPERTY : margin
DEFAULT      : .5rem 1.2rem (>= v1.2.0)

Padding

Affects the padding of the rendered component.

VARIABLE     : --button-padding
CSS PROPERTY : padding
DEFAULT      : 1.3rem (>= v1.2.0)

Border

Affects the border of the rendered component.

VARIABLE     : --button-border
CSS PROPERTY : border
DEFAULT      : 2px solid var(--button-color) (>= v1.2.0)

Border Radius

Affects the border radius of the rendered component.

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

Font Size

Affects the font size of the rendered component.

VARIABLE     : --button-font-size
CSS PROPERTY : font-size
DEFAULT      : var(--body-font-size) (>= v1.2.0)

Font Weight

Affects the font weight of the rendered component.

VARIABLE     : --button-font-weight
CSS PROPERTY : font-weight
DEFAULT      : 700 (>= v1.2.0)

Text Align

Affects the text alignment of the rendered component.

VARIABLE     : --button-text-align
CSS PROPERTY : text-align
DEFAULT      : center (>= v1.2.0)

Text Decoration

Affects the text decoration of the rendered component.

VARIABLE     : --button-text-decoration
CSS PROPERTY : text-decoration
DEFAULT      : none (>= v1.2.0)

Text Transform

Affects the text transformation of the rendered component.

VARIABLE     : --button-text-transform
CSS PROPERTY : text-transform
DEFAULT      : uppercase (>= v1.2.0)

Word Break

Affects the word breaking behavior of the rendered component.

VARIABLE     : --button-word-break
CSS PROPERTY : word-break
DEFAULT      : REMOVED (>= v1.2.1) normal (== v1.2.0)

Overflow Wrap

Affects the overflow wrapping behavior of the rendered component.

VARIABLE     : --button-overflow-wrap
CSS PROPERTY : overflow-wrap
DEFAULT      : break-word (>= v1.2.1) normal (== v1.2.0)

Line Height

Affects the line height of the rendered component.

VARIABLE     : --button-line-height
CSS PROPERTY : line-height
DEFAULT      : var(--body-line-height) (>= v1.2.0)

Color

Affects the color of the rendered component.

VARIABLE     : --button-color
CSS PROPERTY : color
DEFAULT      : var(--color-primary-600) (>= v1.2.0)

Color (Inverted Mode)

Affects the color of the rendered component while in inverted mode.

VARIABLE     : --button-color-inverted
CSS PROPERTY : color
DEFAULT      : var(--color-typography-100) (>= v1.2.0)

Color (Print Mode)

Affects the color of the rendered component when in print mode.

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

Background (Print Mode)

Affects the background of the rendered component when in print mode.

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

Box Shadow

Affects the box shadow of the rendered component when in print mode.

VARIABLE     : --button-box-shadow
CSS PROPERTY : box-shadow
DEFAULT      : 0 .5rem 1rem var(--color-typography-400) (>= v1.2.0)

Transition

Affects the animation timing of the rendered component.

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

Transform (Focused)

Affects the transformation of the rendered component when focused.

VARIABLE     : --button-transform-focus
CSS PROPERTY : transform
DEFAULT      : scale(1.2) (>= 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/zoralabBUTTON/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>