Types

Types For Attributes And Properties

All attributes and css properties have a certain type. All properties and attributes can be written in camelCase or kebab-case, but types must be written only in camelCase. If the value for these attributes or css properties is of a different type, an error will be raised. Here are all of the types that the attributes and css properties can be.

alignContent

Value must be top, bottom or center.

alignImage

Value must be left, right or center.

alignText

Value must be left, right or center.

applyStyle

Value must be date, timer , relative, time, or offset.

bool

Value can be anything but "null" or "false" ("true" is advised).

These tags all have the same fake bool attribute set to true:

<widget>
  <style>
    date {
      bool: true;
    }
  </style>
  <text bool=""></text>
  <date></date>
</widget>

colour

Value must be one or two HTML-supported colours separated by hyphens. HTML supported colours include hsl, hsla, rgb, rgba, hex or css colour names like red. If there are two colours, the first is the light mode colour and the second is the dark mode colour.

contentMode

Value must be filling or fitting.

decimal

Value must be a positive integer or float (decimal) with an optional % directly at the end.

font

Value must be a valid font name and then a positive integer separated by commas. The font name can also be a pre-set font such as boldSystemFont, lightMonospacedSystemFont or regularRoundedSystemFont . A font based on its content like largeTitle must not have a positive integer and comma.

gradient

Value must be one or more HTML-supported colour or group of light mode/dark mode colours separated by commas. Light mode/dark mode colour groups are created by splitting the light and dark colour by a hyphen with the light colour as the first colour. Example: red, white-black, blue. HTML supported colours include hsl, hsla, rgb, rgba, hex or css colour names like red.

The value can also have an optional direction or degree as the first parameter. The direction options are to top, to bottom, to right, to left, to top right, to top left, to bottom right, to bottom left., to left top, to left bottom, to right top and to right bottom. A degree is a number and the keyword deg directly beside (90deg). Example: to top left, #ff00ff, rgb(0,255,0)-rgb(255,0,255), hsl(180, 50%,70%). The default gradient direction is to bottom (0deg).

Beside the colour or colour groups, there is an optional location value. The location must be equal to or between 0 and 1 or be a percentage (50%). Locations must also go in accessing order. Example: 50deg, red 10%, blue 50%, green 0.7.

image

Value must be a valid url leading to an image or a data url starting with data:image/jpeg;base64, or data:image/png;base64, and with the base encoded image following.

layout

Value must be vertically or horizontally.

padding

Value must be 1, 2 or 4 positive integers separated by commas. 1 integer sets all padding. 2 integers sets the top and bottom padding to the first integer and left and right padding to the second. 4 integers sets the top padding to the first integer, left padding to the second, bottom padding to the third and right padding to the fourth integer. The value can also be default to set the default padding.

point

Value must be 2 integers (they can be negative) separated by commas. The first integer is the x and the second is the y.

posInt

Value must be a positive integer (satisfy \d+ regex).

size

Value must be two positive integers separated by commas. The first integer is the width and the second is the height.

url

Value must be a valid URL.

Additional Information

All attributes and properties, no matter the type, can have a value as "null". This makes it so that the attribute or property is not set. The background attribute is not set in the following example:

<widget background="null">
  <!-- You only need the one, the attribute or property to be set to null -->
  <style>
    widget {
      background: null;
    }
  </style>
</widget>

All tags also have the class attribute. This attribute is used with the <style> tag. The value must be one or more word characters including hyphens separated by spaces.

All tags also have the child bool attribute. This will do nothing to the tags and is only used for the templates.

All tags also have the no-css bool attribute. This will make css have no affect over the tag and it’s style will not change. This is mainly used for the templates.