How many lines of code change were required to make this possible?

The answer is only one.

-- color-display:

-- color-display:

-- import: fifthtry.github.io/forest-cs

-- ftd.column:
colors: $forest-cs.main

-- color-display:

-- end: ftd.column

-- import: fifthtry.github.io/forest-cs

-- ftd.column:
colors: $forest-cs.main

-- color-display:

-- end: ftd.column

As shown in the code snippet above, we are passing a reference of the forest-cs .main variable from the forest-cs module to the colors property of ftd .column.

The type of forest-cs.main variable is ftd.color-scheme.

-- record color-scheme:
ftd.background-colors background:
ftd.color border:
ftd.color border-strong:
ftd.color text:
ftd.color text-strong:
ftd.color shadow:
ftd.color scrim:
ftd.cta-colors cta-primary:
ftd.cta-colors cta-secondary:
ftd.cta-colors cta-tertiary:
ftd.cta-colors cta-danger:
ftd.pst accent:
ftd.btb error:
ftd.btb success:
ftd.btb info:
ftd.btb warning:
ftd.custom-colors custom:

-- record background-colors:
ftd.color base:
ftd.color step-1:
ftd.color step-2:
ftd.color overlay:
ftd.color code:

-- record cta-colors:
ftd.color base:
ftd.color hover:
ftd.color pressed:
ftd.color disabled:
ftd.color focused:
ftd.color border:
ftd.color text:

-- record pst:
ftd.color primary:
ftd.color secondary:
ftd.color tertiary:

-- record btb:
ftd.color base:
ftd.color text:
ftd.color border:

-- record custom-colors:
ftd.color one:
ftd.color two:
ftd.color three:
ftd.color four:
ftd.color five:
ftd.color six:
ftd.color seven:
ftd.color eight:
ftd.color nine:
ftd.color ten:

-- record color-scheme:
ftd.background-colors background:
ftd.color border:
ftd.color border-strong:
ftd.color text:
ftd.color text-strong:
ftd.color shadow:
ftd.color scrim:
ftd.cta-colors cta-primary:
ftd.cta-colors cta-secondary:
ftd.cta-colors cta-tertiary:
ftd.cta-colors cta-danger:
ftd.pst accent:
ftd.btb error:
ftd.btb success:
ftd.btb info:
ftd.btb warning:
ftd.custom-colors custom:

-- record background-colors:
ftd.color base:
ftd.color step-1:
ftd.color step-2:
ftd.color overlay:
ftd.color code:

-- record cta-colors:
ftd.color base:
ftd.color hover:
ftd.color pressed:
ftd.color disabled:
ftd.color focused:
ftd.color border:
ftd.color text:

-- record pst:
ftd.color primary:
ftd.color secondary:
ftd.color tertiary:

-- record btb:
ftd.color base:
ftd.color text:
ftd.color border:

-- record custom-colors:
ftd.color one:
ftd.color two:
ftd.color three:
ftd.color four:
ftd.color five:
ftd.color six:
ftd.color seven:
ftd.color eight:
ftd.color nine:
ftd.color ten:

How does the color-display component inherits the colors from it’s parent?

This is achieved through the use of the special keyword inherited. The inherited keyword gives access to the variables of its ancestors, allowing the component to search for the referred variable starting from its immediate parent, and then moving up to its grandparent and so on.

As depicted in the code above, the container ftd.column contains a property named color where we have passed the reference to ftd.color-scheme type variable. It is then inherited by color-display component.

-- component my-color:

-- ftd.text: Text
padding.px: 20
border-width.px: 10
color: $inherited.colors.text-strong
background.solid: $inherited.colors.background.step-2
border-color: $inherited.colors.border-strong

-- end: my-color

-- component my-color:

-- ftd.text: Text
padding.px: 20
border-width.px: 10
color: $inherited.colors.text-strong
background.solid: $inherited.colors.background.step-2
border-color: $inherited.colors.border-strong

-- end: my-color

-- import: fifthtry.github.io/saturated-sunset-cs as sunset-cs

-- ftd.column:
colors: $sunset-cs.main

-- my-color:

-- end: ftd.column

-- import: fifthtry.github.io/saturated-sunset-cs as sunset-cs

-- ftd.column:
colors: $sunset-cs.main

-- my-color:

-- end: ftd.column

-- import: fifthtry.github.io/forest-cs

-- ftd.column:
colors: $forest-cs.main

-- my-color:

-- end: ftd.column

-- import: fifthtry.github.io/forest-cs

-- ftd.column:
colors: $forest-cs.main

-- my-color:

-- end: ftd.column

• Easy to use: The ftd color scheme framework is designed to be simple and straightforward, making it easy for designers to define and apply color schemes to a website.

• Dynamic and flexible: With the ability to easily change colors and the use of inheritance, the ftd color scheme framework allows designers to create dynamic and flexible color schemes that can be easily modified as needed.

• Consistent appearance: By using the ftd color scheme framework, designers can ensure a consistent appearance throughout their website, making it easier for users to navigate and interact with the site.

• Centralized Management: By centralizing the definition of color schemes, this makes it easy for designers to modify and update the color palette in a single location. This helps save time and reduces the risk of inconsistent color usage throughout the application.

• Improved accessibility: With the ability to create color palettes that meet accessibility standards, the ftd color scheme framework helps designers create websites that are accessible to all users.

• Increased brand recognition: By using a consistent color scheme throughout the website, the ftd framework can help to reinforce a company’s brand and increase brand recognition. The use of specific colors can also evoke emotions and feelings associated with the brand, helping to create a stronger connection with users.

• Faster development: The ftd color scheme framework allows designers to quickly create color schemes and apply them to a website, reducing the time and effort required to create a professional-looking design. This can also lead to faster development times, helping to get the website up and running more quickly.