Use `inherited types`

Using inherited types for colors and roles allows for greater flexibility in using different color schemes and typography.

inherited-colors: Prefer using inherited.colors to give colors

inherited.colors are part of fastn design system. If you use custom / hardcoded colors then switching color schemes will not affect your component, and website maintainers using your component will have a great experience.

Not recommended

-- ftd.column:
background.solid: white

-- colms:
$color-value: #b4ccba

-- ftd.text: Campaign Summary
color: #7D8180

Lang:

ftd

Recommended

-- ftd.column:
background.solid: $inherited.colors.background.base

-- colms:
$color-value: $inherited.colors.custom.one

-- ftd.text: Campaign Summary
color: $inherited.colors.text

Lang:

ftd

role-inheritance: Prefer using inherited.types to give a role

Specific values for typography requires additional code for responsive design.

Meanwhile,role-inheritance allows for flexibility in using different typography, while maintaining consistency across the design system.

Not recommended

-- ftd.type dtype:
size.px: 40
weight: 900
font-family: cursive
line-height.px: 65
letter-spacing.px: 5

-- ftd.type mtype:
size.px: 20
weight: 100
font-family: fantasy
line-height.px: 35
letter-spacing.px: 3

-- ftd.responsive-type rtype:
desktop: $dtype
mobile: $mtype

-- ftd.text: Hello World
role: $rtype

Lang:

ftd

Recommended

-- ftd.text: Hello World
role: $inherited.types.copy-regular

Lang:

ftd

Use inherited types

Use `inherited types`