Dictionaries
This project uses dictionaries to unify props between different components.
- Every dictionary is always a range. E.g. the dictionary Size content Small, Medium, Large.
- If at least 1 item is used from the dictionary in a component's property, all the others should be used. E.g. if there are button sizes Medium and Large, there should also be the size Small.
- A given property is not a dictionary by itself. The property is contained in the dictionary. That is, the Action Primary Default color is contained in the Action Primary dictionary entry.
- Products can extend their dictionaries.
List of Dictionaries
Alignment
Dictionary | Values | Code name |
---|---|---|
AlignmentX | left, center, right | AlignmentX |
AlignmentXExtended | AlignmentX Dictionary + stretch, space-between | AlignmentXExtended |
AlignmentY | top, center, bottom | AlignmentY |
AlignmentYExtended | AlignmentY Dictionary + stretch, baseline | AlignmentYExtended |
Border Properties
Dictionary | Values | Code name |
---|---|---|
Border Color | basic, focus | BorderColor |
Border Radius | 0, 100, 200, 300, 400, 500, full | BorderRadius |
Border Style | solid, 'dotted', 'dashed' | BorderStyle |
Border Width | 0, 100, 200, | BorderWidth |
Color
Dictionary | Values | Code name |
---|---|---|
Background Color | primary, secondary, tertiary | BackgroundColor |
Component Button Color | primary, secondary, tertiary, plain | ComponentButtonColor |
Emotion Color | success, informative, warning, danger | EmotionColor |
Link Color | primary, secondary, tertiary | LinkColor |
Text Color | primary, secondary, tertiary | TextColor |
Direction
Dictionary | Values | Code name |
---|---|---|
Direction | horizontal, vertical | Direction |
DirectionAxis | x, y | DirectionAxis |
DirectionExtended | Direction Dictionary + horizontal-reversed | DirectionExtended |
Emphasis
Dictionary | Values | Code name |
---|---|---|
Emphasis | regular, bold, semibold, italic | Emphasis |
Placement
Dictionary | Values | Code name |
---|---|---|
Placement | top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end | Placement |
Size
Dictionary | Values | Code name |
---|---|---|
Size | small, medium, large | Size |
Size Extended | Size Dictionary + xsmall, xlarge | SizeExtended |
Validation
Dictionary | Values | Code name |
---|---|---|
Validation | success, warning, danger | Validation |