States

Sass mixins for state transition for interactive elements.

• Installation
• Basic Usage
• Variables
• Mixins
• Functions

Installation

npm install @trend/state

Basic Usage

// 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";

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.

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.

Functions

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