{/* prettier-ignore */}
{/*
Copyright 2023 Comcast Cable Communications Management, LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

SPDX-License-Identifier: Apache-2.0
\*/}

import { Meta } from '@storybook/blocks';
import Flowchart from '../assets/images/Flowchart.png';

<Meta title="Docs / Theming/ Hierarchy" />

# Theming Hierarchy

<img src={Flowchart} alt="" width="600" />

The above flowchart serves to demonstrate how the different theming-related concepts covered in previous documentation come together to build the final styles for each component.

## Component Style File

A component's style file can consist of a base style object, a [tone style object](?path=/docs/docs-theming-tones--docs), and a [mode style object](?path=/docs/docs-theming-modes--docs). These three objects are deep merged, in that order, to create a single style object that serves as the foundation for the final component style object.

## Theme's _componentConfig_

Themes can have a `componentConfig` object that has nested component style objects, which serve to override any styles from component style files. The objects nested within `componentConfig` must have keys matching the `__componentName` of the target components. These are deep merged with the results from each of those files.

## In-line Component Style Overrides

When utilizing components within your application, you can use [withThemeStyles](?path=/docs/utilities-withthemestyles--docs) to override particular style values in just that use case. Those custom styles are deep-merged with the resulting object from the previous steps.

## Extensions

Any extensions that target a component will be applied after the in-line component style overrides. This creates the final style object which will be referenced by the component via `this.style`.
