# @trend/state

> TREND Components state mixins for interactive elements.

Latest version **0.5.0** (published 2019-04-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @trend/state
pnpm add @trend/state
yarn add @trend/state
bun add @trend/state
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2019-04-19 |
| First published | 2018-12-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | defo550 |
| Keywords | TREND Components, ui states, scss, sass, mixins |

## Links

- npm: https://www.npmjs.com/package/@trend/state
- npm.io page: https://npm.io/package/@trend/state

## Dependencies (2)

- [@trend/theme](https://npm.io/package/@trend/theme.md) ^0.5.0
- [@trend/helpers](https://npm.io/package/@trend/helpers.md) ^0.3.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.5.0 (latest) — 2019-04-19
- 0.4.0 — 2018-12-12
- 0.3.0 — 2018-12-03

## README

# States

Sass mixins for state transition for interactive elements.

* [Installation](#installation)
* [Basic Usage](#usage)
* [Variables](#variables)
* [Mixins](#mixins)
* [Functions](#functions)

## <a name="installation"></a> Installation

```bash
npm install @trend/state
```

## <a name="usage"></a> Basic Usage

```css
// Import all variables, mixins, and functions.
@import "@trend/state/styles";

// Import just variables.
@import "@trend/state/scss/variables";

// Import just mixins.
// NOTE: Will import variables and functions.
@import "@trend/state/scss/mixins";

// Import just functions.
// NOTE: Will import variables.
@import "@trend/state/scss/functions";
```

## <a name="variables"></a> Variables

Name | Type
--- | ---
`$tc-state-dark-color-opacities` | `Map`
`$tc-state-light-color-opacities` | `Map`

Both maps provide: `hover`, `focus`, `press`, `selected`, and `activated` keys.

## <a name="mixins"></a> Mixins

Name | Arguments | Description
--- | --- | ---
`tc-state` | `$color` (required) | Add state rules to a ruleset.
`tc-state-hover-opacity` | `$opacity` (required) | Create ruleset to adjust hover state for a interactive element.
`tc-state-focus-opacity` | `$opacity` (required) | Create ruleset to adjust focus state for a interactive element.
`tc-state-press-opacity` | `$opacity` (required) | Create ruleset to adjust active state for a interactive element.
`tc-state-base-color` | `$color` (required) | Add rule to ruleset to adjust background color of a interactive element.

## <a name="functions"></a> Functions

Name | Arguments | Description
--- | --- | ---
`$tc-state-opacity` | `$color` (Valid theme option), `$state` | Returns opacity value for desire state and color passed.

---
_Source: https://npm.io/package/@trend/state · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._