inherited types
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 colorsinherited.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.-- ftd.column:
background.solid: white
-- colms:
$color-value: #b4ccba
-- ftd.text: Campaign Summary
color: #7D8180
-- ftd.column:
background.solid: $inherited.colors.background.base
-- colms:
$color-value: $inherited.colors.custom.one
-- ftd.text: Campaign Summary
color: $inherited.colors.text
role-inheritance
: Prefer using inherited.types
to give a roleSpecific values for typography
requires additional code for responsive
design.
role-inheritance
allows for flexibility in using different
typography, while maintaining consistency across the design system.-- 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
-- ftd.text: Hello World
role: $inherited.types.copy-regular