npm package: @outbook/webcomponents-button-color-scheme
Description: Web components button-color-scheme
Author: Antonio Rodríguez
Latest version: 1.1.2

# @outbook/webcomponents-button-color-scheme

This package provides a web component for a button that toggles between light and dark color schemes.

## Installation

```bash
npm install @outbook/webcomponents-button-color-scheme
```

## Usage

### As a Lit Element

```javascript
import {html} from 'lit';
import {ButtonColorScheme} from '@outbook/webcomponents-button-color-scheme';

function render() {
  return html`
    ${ButtonColorScheme({
      textVisibility: 'visible',
      size: 'M'
    })}
  `;
}
```

### Direct HTML Usage

You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined. Also, for the component to work, you must instantiate `LuminMystic` and pass it as a property. It is simpler to use the Lit Element wrapper function.

```javascript
import '@outbook/webcomponents-button-color-scheme';
import { LuminMystic } from '@outbook/lumin-mystic';

const themeManager = new LuminMystic({
  classDark: 'is-dark',
  classLight: 'is-light',
  storageContext: 'session'
});

const button = document.querySelector('outbook-button-color-scheme');
button.themeManager = themeManager;
```

```html
<outbook-button-color-scheme text-visibility="visible" size="M"></outbook-button-color-scheme>
```

## Component Usage

The component is best used via its wrapper function `ButtonColorScheme`, which simplifies the creation and management of the theme manager.

### Properties

The properties listed below are used by the `ButtonColorScheme` wrapper function. Some of these are also reflected as attributes on the `outbook-button-color-scheme` custom element.

| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| `class` | `extraClasses` | `String` | `undefined` | Classes to add to the host element. |
| `size` | `size` | `String` | `'auto'` | The size of the button. Can be `'auto'`, `'XS'`, `'S'`, `'M'`, or `'L'`. |
| `text-visibility`| `textVisibility` | `String` | `'label'` | Controls the visibility of the descriptive text. Can be `'label'` (accessible only) or `'visible'`. |
| `lang` | `lang` | `String` | `'en'` | The language to use for internationalization. |
| - | `classDark` | `String` | `'is-dark'` | The CSS class to apply to the `<html>` element for dark mode. |
| - | `classLight` | `String` | `'is-light'` | The CSS class to apply to the `<html>` element for light mode. |
| - | `storageContext` | `String` | `'session'` | The storage to use for persisting the theme ('session' or 'local'). |


## Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

### Custom Properties

Can be used with css `light-dark` function.

| Custom Property | Description |
|---|---|
| `--outbook-button-color-scheme--color` | The color of the icon and text. |
| `--outbook-button-color-scheme--color-hover` | The color of the icon and text on hover. |

## License

This component is licensed under the Apache-2.0 License.