{/* 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 / Tones" />

# Tone

Each Lightning-UI component can be displayed in one of three visual modes that are referred to as a tone. All components have three tone options by default: **neutral**, **brand**, and **inverse**.
Some components can also utilize status colors, like **positive**, **negative**, **caution**, and **info**.

Each component has a default tone. For example, Base theme `Buttons` and `ListItems` default to the neutral tone.

A component's tone can be set at the theme or component level. It is also possible to add custom tones.

### Theme Level

You may change the default tone across all LUI components by setting this value in your theme file's `componentConfig`. For a deeper dive on `tones`, see ["Component Config"](?path=/docs/docs-theming-component-config--docs).

For example, if you want to use a brand tone on all `ProgressBar` components, add ProgressBar's tone to `componentConfig`:

{/* prettier-ignore */}
```js
componentConfig: {
  ProgressBar: {
    tone: 'brand'
  }
}
```

The resulting theme object would look like this:

```js
// Inside of themes/base/index.js
export default {
  color,
  layout,
  spacing,
  radius,
  typography,
  animation,
  componentConfig: {
    ProgressBar: {
      tone: 'neutral'
    }
  }
};
```

In this example, **all** `ProgressBar` components will be using the neutral tone.

### Component Level

You may also update this value on a per component basis by setting its tone property. For example:

```js
MyComponent: {
  type: ProgressBar,
  tone: 'inverse'
}
```

In this example, **only** MyComponent's `ProgressBar` will use the inverse tone.
