Go Main page
Go Main page

Web components

cover

utilities types

Theme Types

v.1.0.0 | Saturn
Healthy
Github

To facilitate the management of applied tokens across various components, specific types have been created for grouping them:

  • CommonStyleType: This grouping of tokens is used to give shape to the containers, being able to apply styles referring to sizes, display, margins, paddings, backgrounds, etc.
  • TypographyTypes: This type of tokens is used to give shape to the texts, being able to apply styles referring to sizes, weights, alignments, colours, etc.
  • IconTypes: This type of tokens is used to give shape to icons, being able to apply styles referring to size and colours.
  • IllustrationTypes: Similar to IconTypes, this type of tokens is used to shape illustrations, being able to apply styles referring to its size.

While all the tokens we will discuss now can be applied directly, they can also be applied for a specific device. In order to apply custom device styles, use the DeviceBreakpointsType enum.

Example

Let's imagine we have the following structure:

123
type ExampleThemeType = {
  container?: CommonStyleType;
};

We could define the following style in which mobile-specific styles are applied:

12345678910
const theme: ExampleThemeType = {
  container: {
    padding: '10px',
    background_color: 'red'
    [DeviceBreakpointsType.MOBILE]: {
      padding_top: '0px'
      background_color: 'blue'
    },
  },
};

In this case, the padding and background colour will be applied to all devices, but the padding top and the blue background colour will be applied to mobile only.

CommonStyleType

This specific combination of tokens is used to define the structure and appearance of containers. These tokens allow the application of a wide range of styles that affect the size, layout, margins, padding, backgrounds and other visual aspects of the elements in the interface.

Internally they are grouped into the following subcategories:

  • PaddingTypes: tokens associated with paddings.
  • BorderTypes: tokens associated with borders.
  • BoxShadowTypes: tokens associated with shadows.
  • BackgroundTypes: tokens associated with backgrounds.
  • MeasuresTypes: tokens associated with sizes.
  • DisplayTypes: tokens associated with display.
  • MarginTypes: tokens associated with margins.
  • PositionTypes: tokens associated with positions.
  • PointerTypes: tokens associated with cursors.
  • AnimationType: tokens associated with animations.
  • WordWrapTypes: tokens associated with line breaks.

Let's look in each subcategory.

PaddingTypes

TokenCSS Property
paddingpadding
padding_leftpadding-left
padding_rightpadding-right
padding_toppadding-top
padding_bottompadding-bottom

BorderTypes

TokenCSS Property
borderborder
border_topborder-top
border_rightborder-right
border_bottomborder-bottom
border_leftborder-left
border_radiusborder-radius
border_widthborder-width
border_left_widthborder-left-width
border_right_widthborder-right-width
border_top_widthborder-top-width
border_bottom_widthborder-bottom-width
border_colorborder-color
border_left_colorborder-left-color
border_right_colorborder-right-color
border_top_colorborder-top-color
border_bottom_colorborder-bottom-color
border_top_left_radiusborder-top-left-radius
border_top_right_radiusborder-top-right-radius
border_bottom_left_radiusborder-bottom-left-radius
border_bottom_right_radiusborder-bottom-right-radius
border_styleborder-style
border_left_styleborder-left-style
border_top_styleborder-top-style
border_right_styleborder-right-style
border_bottom_styleborder-bottom-style
outlineoutline
outline_styleoutline-style
outline_coloroutline-color
outline_widthoutline-width
outline_offsetoutline-offset

BoxShadowTypes

TokenCSS Property
box_shadowbox-shadow

BackgroundTypes

TokenCSS Property
backgroundbackground
background_colorbackground-color
background_imagebackground-image
background_positionbackground-position
background_repeatbackground-repeat
background_sizebackground-size
opacityopacity
accent_coloraccent-color

MeasuresTypes

TokenCSS Property
box_sizingbox-sizing
widthwidth
min_widthmin-width
max_widthmax-width
heightheight
min_heightmin-height
max_heightmax-height

DisplayTypes

TokenCSS Property
displaydisplay
visibilityvisibility
overflowoverflow
overflow_xoverflow-x
overflow_yoverflow-y
flexflex
flex_directionflex-direction
flex_wrapflex-wrap
flex_flowflex-flow
flex_growflex-grow
flex_shrinkflex-shrink
flex_basisflex-basis
justify_contentjustify-content
align_itemsalign-items
align_selfalign-self
align_contentalign-content
orderorder
flex_orderflex-order
flex_align_selfflex-align-self
flex_justify_selfflex-justify-self
flex_align_contentflex-align-content
flex_align_itemsflex-align-items
gapgap
row_gaprow-gap
column_gapcolumn-gap
gridgrid
grid_areagrid-area
grid_templategrid-template
grid_template_areasgrid-template-areas
grid_template_rowsgrid-template-rows
grid_template_columnsgrid-template-columns
grid_rowgrid-row
grid_row_startgrid-row-start
grid_row_endgrid-row-end
grid_columngrid-column
grid_column_startgrid-column-start
grid_column_endgrid-column-end
grid_gapgrid-gap
grid_row_gapgrid-row-gap
grid_column_gapgrid-column-gap
grid_auto_flowgrid-auto-flow
grid_auto_rowsgrid-auto-rows
grid_auto_columnsgrid-auto-columns

MarginTypes

TokenCSS Property
marginmargin
margin_leftmargin-left
margin_rightmargin-right
margin_topmargin-top
margin_bottommargin-bottom

PositionTypes

TokenCSS Property
positionposition
toptop
rightright
bottombottom
leftleft
floatfloat
transformtransform
transform_styletransform-style
z_indexz-index

PointerTypes

TokenCSS Property
cursorcursor
pointer_eventspointer-events

AnimationType

TokenCSS Property
transitiondisplay
transition_delaytransition-delay
transition_durationtransition-duration
transition_propertytransition-property
transition_timing_functiontransition-timing-function

WordWrapTypes

TokenCSS Property
word_breakword-break
word_wrapword-wrap
white_spacewhite-space
text_overflowtext-overflow

TypographyTypes

This specific combination of tokens is used to define the structure and appearance of texts. These tokens allow the application of a wide range of styles that affect the size, weight, alignment, colour and other visual aspects of the text elements.

One of the main tokens to be taken into account is font_variant. This allows to apply a specific variant of the Text component, applying the styles associated with it.

Additionally, the following tokens are available:

TokenCSS Property
font_familyfont-family
font_sizefont-size
font_weightfont-weight
font_stylefont-style
line_heightline-height
letter_spacingletter-spacing
text_aligntext-align
text_decorationtext-decoration
text_transformtext-transform
text_shadowtext-shadow
text_indenttext-indent
text_justifytext-justify
colorcolor
overflowoverflow

IconTypes

This specific combination of tokens is used to define the appearance of the icons. Specifically:

  • colour: colour applied to the icon. If the icon already has a colour, it is not necessary to apply this token. Also do not use if the icon has more than one colour.
  • width: width of the icon.
  • height: height of the icon.

IllustrationTypes

This specific combination of tokens is used to define the size of the illustrations. Specifically:

  • width: width of the illustration.
  • height: height of the illustration.