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
Size
Dictionary | Values | Code name |
---|---|---|
Size | small , medium , large |
Size |
Size Extended | Size Dictionary + xsmall , xlarge |
SizeExtended |
Icon Size | small , medium , large , xlarge , xxlarge , xxxlarge |
IconSize |
Color
Dictionary | Values | Code name |
---|---|---|
Brand Color | primary , secondary , light , brand-background , primary-inverted |
BrandColors |
Action Color | primary , secondary , tertiary , inverted |
ActionColor |
Action Link Color | primary , secondary , tertiary , inverted |
ActionLinkColor |
Emotion Color | success , informative , warning , danger |
EmotionColor |
Text Color | primary , primary-disabled , secondary , primary-inverted , primary-inverted-disabled , secondary-inverted , secondary-inverted-disabled , secondary-disabled , light , light-disabled |
TextColor |
Background Color | brand , brand-primary , brand-primary-inverted , brand-secondary , brand-light , basic , cover , interactive-default , interactive-hover , interactive-active , interactive-selected , inverted , inverted-cover |
BackgroundColor |
Icon Color | Emotion Color Dictionary + primary , secondary , light , disabled , |
IconColor |
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 |
Validation
Dictionary | Values | Code name |
---|---|---|
Validation | success , warning , danger |
Validation |
Theme
Dictionary | Values | Code name |
---|---|---|
Theme | light , dark |
Theme |
Alignment
Dictionary | Values | Code name |
---|---|---|
AlignmentX | left , center , right |
AlignmentX |
AlignmentY | top , center , bottom |
AlignmentY |
Direction
Dictionary | Values | Code name |
---|---|---|
direction | column , row |
direction |
On this page