States

View Source

A series of variables used to visualize state for UI elements, such as alerts and inputs. Leveraging these configurations helps ensure visual consistency with various components.

Install

npm install seed-states --save

Dependencies

Configurations

Below are the default Sass configuration variables for seed-states. The variables can be found in the pack’s _config.scss file.

seed-states/_config.scss
// Dependencies
@import "pack/seed-color-scheme/_index";
@import "pack/seed-color-scheme-helpscout/_index";

// Namespaces
$seed-states-error-namespace: "error" !default;
$seed-states-info-namespace: "info" !default;
$seed-states-success-namespace: "success" !default;
$seed-states-warning-namespace: "warning" !default;

// Configs
$seed-states-colors: (
  #{$seed-states-error-namespace}: (
    background-color: _color(red, 200),
    border-color: _color(red, 500),
    color: _color(red, 800)
  ),
  #{$seed-states-info-namespace}: (
    background-color: _color(blue, 200),
    border-color: _color(blue, 500),
    color: _color(blue, 800)
  ),
  #{$seed-states-success-namespace}: (
    background-color: _color(green, 200),
    border-color: _color(green, 500),
    color: _color(green, 800)
  ),
  #{$seed-states-warning-namespace}: (
    background-color: _color(yellow, 200),
    border-color: _color(yellow, 500),
    color: _color(yellow, 800)
  ),
) !default;

Usage

It is recommended you use the _get() function from seed-dash to retrieve variables from the seed-states config.

_alert.scss
// Dependencies
@import "pack/seed-states/_index";
@import "pack/seed-dash/_index";

.alert {
  &.is-success {
    background-color: _get($seed-states-colors, background-color);
    color: _get($seed-states-colors, color);
  }
}

alert.css
.alert {
  background-color: #FFE3E2;
  color: #E52F28;
}

Customizing

You can modify the default variables of seed-states by defining them before you import the seed-states pack in your Sass setup.

scss/configs/_seed-states.scss
// Customizing seed-states sizes
$seed-states-error-namespace: "danger" !default;

// Import seed-states
@import "pack/seed-states/_index";

Just be aware that other Sass code that use any of the seed-states variables will be affected (e.g. the seed-alert pack).

↑Back to top
© Help Scout 2024