Style Inheritance

Styles in Component.Studio are composable, which means they can inherit properties from one another. This powerful feature allows you to create partial styles and blend them together to create new, complex styles without duplication.

For example, let's say you have a style that just turns text red, another that turns text gold, and another that makes text bigger. You could then write:

<red>Red</red> <gold>Gold</gold> <big>Big</big>

That might render like this:

Method 1: Nesting Tags

The first way to combine styles is by nesting style tags inside each other. When you nest tags, the inner text inherits properties from all the surrounding styles.

This <gold>is</gold> some <big><red>big red</red></big>

Which creates this:

Because we wrapped <big> and <red> around "big red", that text inherits properties from both styles, making it both large and red.

Method 2: The "Inherit From" Field

Rather than nesting tags in your text, you can create new styles that automatically inherit from existing styles. This is done using the "Inherit From" field found in every style's properties.

How to Use Inherit From

In the "Inherit From" field, enter a comma-separated list of style names you wish to inherit properties from. For example, if you create a new style called "header" and put red, big, gold into the "Inherit From" field:

Then when you write:

<header>My Header</header>

You get this:

Understanding Property Priority

You might be wondering: "Why is the text gold rather than red?" This is because inheritance follows a specific order of priority.

The inheritance resolution order works like this:

1. Start with Component.Studio's default values
2. Apply the first parent style's properties (e.g., "red")
3. Apply the second parent style's properties (e.g., "big"), potentially overwriting earlier values
4. Apply the third parent style's properties (e.g., "gold"), potentially overwriting earlier values
5. Finally, apply the current style's own properties, which override everything

Detailed Example

The -inherit- Special Value

Most style properties can be set to the special value -inherit-. This tells Component.Studio: "Don't set this property in this style; let it come from parent styles or the default value."

How -inherit- affects inheritance:

• Properties set to -inherit- are skipped during inheritance resolution
• Only properties with actual values (not -inherit-) are applied
• This allows you to create "partial" styles that only set specific properties

Inheriting in Text Layers

Text layers have a property called "Styles" in the Text Formatting section. This sets the base style(s) for all text in that layer.

Just like the "Inherit From" field in styles, you can enter a comma-separated list of multiple styles. This is a powerful way to set up default formatting for entire text layers.

Combining Both Methods

You can use both "Inherit From" in styles AND nesting tags in text simultaneously. The resolution order is:

1. Text layer's "Default Styles" (applied first)
2. Outermost nested style tag and its inheritance chain
3. Next nested style tag and its inheritance chain
4. Innermost nested style tag and its inheritance chain (applied last, highest priority)

Circular Dependencies

Component.Studio detects circular dependencies in style inheritance. If Style A inherits from Style B, and Style B inherits from Style A, the system will detect this and prevent infinite loops by breaking the cycle.

Best Practices

Create Reusable Building Blocks

• Size styles: Create styles like "tiny", "small", "medium", "large", "huge" that only set font size
• Color styles: Create styles like "red", "blue", "gold" that only set color
• Effect styles: Create styles like "shadowed", "outlined", "glowing" that only set effect properties

Compose Complex Styles

• Build complex styles by inheriting from multiple simple styles
• Example: Inherit From: large, red, shadowed creates a large, red, shadowed style
• This approach makes it easy to maintain and update styles

Order Matters

• List more general styles first, more specific ones last
• Put color styles after size styles if both are in the list
• The rightmost style in the inheritance list has the highest priority

Use Descriptive Names

• Name styles based on what they do: "header-large" instead of "style1"
• Use consistent naming conventions: "header-primary", "header-secondary"
• This makes inheritance lists easier to read and maintain

Common Patterns

Pattern 1: Base + Variant

Base style: "body" (sets font, size, color)
Variants:
  - "body-emphasized" with Inherit From: body (only overrides color)
  - "body-large" with Inherit From: body (only overrides size)

Pattern 2: Layer + Effect

Layer styles: "title", "subtitle", "caption"
Effect styles: "shadowed", "outlined", "glowing"
Usage in text: <title><shadowed>Shadowed Title</shadowed></title>

Pattern 3: Semantic Styles

Create semantic styles that inherit from design system styles:
- "heading" with Inherit From: large, bold, primary-color
- "body-text" with Inherit From: medium, normal-weight, text-color
- "caption" with Inherit From: small, light-weight, muted-color

Troubleshooting