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
Have a question or need help?
Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.
Join our Discord channel and share your thoughts, suggestion, question etc.
Connect with our community!We welcome you to join our Discord community today.
We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.