Skip to main content Skip to docs navigation

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