{/* 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';

<Meta title="Docs / Theming/ Use in Storybook" />

# Theming and Storybook

## Controls Table

Storybook controls and addons are helpful in visualizing the impact of theming on Lightning-UI components. The controls are split into two categories, **properties**, and **theme values**.

### Properties versus Theme Values

Controls in the properties category are values that you can change **regardless of theme**. For example, if you were to modify the `ProgressBar` component by changing the width of the bar, this change would persist regardless of the selected theme. Theme values are the style properties that change based on the current theme. On the ProgressBar, theme properties would be things like progressColor or radius.

### Themes

We have created a custom "Theme Dropdown" addon to the Storybook toolbar, which allows you to select which theme you would like to apply to the components. The default theme is `Base`, which is bundled into the library. However, in Storybook, we also allow you to create and download a custom theme.

### Global versus Component

Choosing a theme target at a **global level** means that the theme values you have selected will be mapped to a broader set of components.

Choosing a theme target at a **component level** means that every instance of a particular component type will use the new values set by the controls, but the changes will not affect other types of components referencing the same theme values.

To learn more, check out ["Theming at a Global versus Component Level"](?path=/docs/docs-theming-overview--docs#theming-at-a-global-versus-component-level).

## Downloading JSON data

You can also download your custom theme, which will include any property overrides you made in Storybook, by hitting the export/download button on the Storybook toolbar. By hitting the export button you will see JSON values relating to your theme selections.

If you overrode any "global" properties via the "Global Theme Values" tab, you will see that reflected in the main property objects like colors and typography. If you overrode any "component" properties via the "Component Style Theme Values" tab, you will see them in the JSON file under the `componentConfig` object.
