Dictionaries

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 + stretch, space-between AlignmentXExtended
AlignmentY top, center, bottom AlignmentY
AlignmentYExtended AlignmentY + stretch, baseline AlignmentYExtended

Color

Dictionary Values Code name
Action Color primary, secondary, tertiary, inverted ActionColor
Action Link Color primary, secondary, inverted ActionLinkColor
Emotion Color success, informative, warning, danger EmotionColor
Text Color primary, secondary, primary-inverted, secondary-inverted TextColor

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