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 |
| TextAlignment | left, center, right | TextAlignment |
Border Properties
| Dictionary | Values | Code name |
|---|---|---|
| Border Color | basic | 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 |
Intensity
| Dictionary | Values | Code name |
|---|---|---|
| Intensity | basic, subtle | Intensity |
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 |
Gradient
| Dictionary | Values | Code name |
|---|---|---|
| Background Gradient | primary, secondary | BackgroundGradient |
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 |
Variant
| Dictionary | Values | Code name |
|---|---|---|
| Fill Variant | fill, outline | FillVariant |
| Shape Variant | box, pill | ShapeVariant |