Margin and Padding on base component

[matthias-reis]

Summary

The cask base components now should receive its first feature, configuration based margins. Generally the idea is to apply props like so <Cask ml='xl'>content</Cask> and it would translate to css.

Available Props

Similar to e.g. mui or tailwind, we want an easy way to place the base component relative to others and to its internal content. We need:

• p (padding), pl (padding left), pt, pr, pb, px (padding inline), py (padding block).
• m (margin), ml (margin left), mt, mr, mb, mx (margin inline), my (margin block).

Available Values

Each of those props can be assigned with the following values.

  --space0: 0;
  --space: 1px;
  --spaceXXS: 2px;
  --spaceXS: 4px;
  --spaceS: 8px;
  --spaceM: 12px;
  --spaceL: 16px;
  --spaceXL: 24px;
  --spaceXXL: 32px;
  --space3XL: 48px;
  --space4XL: 68px;
  --space5XL: 92px;
  --space6XL: 122px;

Create those as variables inside the global.css and make use of them through next yak.

Acceptance criteria

• style is applied via Next Yak. You should use the feature "mixins" (with the css function)
• classes are added to the components
• make sure it stays extensible