Sizes are used to create consistent spacing, sizing, and alignment across the design system. The system uses a set of tokens for spacing, border width, and border radius.

Every token is prefixed with --dds-, use the variants concated with the base name to get the token value. Example: --dds-spacing-50 or --dds-border-width-large. The system is using the 4px as a base unit for spacing and sizing. Every token is a multiple of 4px. Token naming is based on hundreds, so --dds-spacing-100 is 4px (100 => 1 => 1 * 4px, 300 => 3 => 3 * 4px).

Spacing is used to create consistent spacing between elements.

Border width is used to define the width of the border.

Border radius is used to define the radius of the border.

Icon sizes are predefined sizes for icons in the system.

Avatar sizes are predefined sizes for user avatars.

Z-index values are used to control stacking order of elements. Negative values are represented with 'n' prefix (n1 = -1).

Container max-widths for different screen sizes.

Breakpoints define viewport width thresholds for responsive behavior. They are available as CSS custom properties and are used by the design system for responsive sizing.

Use sizeMap to set which component size to use at which viewport breakpoint. Keys are breakpoints, values are component sizes. A pair like md:lg applies at that breakpoint and all narrower breakpoints (xs, sm, md), so you don’t need to define every smaller breakpoint.

• sizeMap (HTML attribute) – breakpoint:size pairs, comma-separated. For a given viewport, the widest matching breakpoint in the map is used. Breakpoints: xs (320px), sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Sizes: xxs, xs, sm, md, lg.
  • Example: sizeMap="md:lg" – at md and all smaller viewports (xs, sm, md) use size lg; at lg and above use the component’s size attribute.
  • Example: sizeMap="sm:lg,md:md" – at xs/sm use lg, at md (and up to lg) use md, at lg and above use the component’s size attribute.

These two components will automatically adjust their size based on the viewport size.

sm:lg -> small screens: lg component size

<>
<dap-ds-stack direction="column">
  <dap-ds-button size="xs" sizeMap="sm:lg">LG</dap-ds-button>
  <dap-ds-input
      size="xs"
      sizeMap="sm:lg"
      label="Small input"
      description="Small input description"
      feedback="Small input feedback"
      feedbackType="negative"
      placeholder="Small input placeholder"></dap-ds-input>
</dap-ds-stack>
</>